From f6bd3dd0dd9f137ba752168f78041f00c31b6c1f Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Fri, 13 May 2022 16:05:11 +0200 Subject: [PATCH] feat(ui) - funnels - details wip --- .../FunnelIssueDetails/FunnelIssueDetails.tsx | 18 ++++++++++++++++-- .../FunnelIssueDetails/index.ts | 0 .../FunnelIssueGraph/FunnelIssueGraph.tsx | 0 .../components => }/FunnelIssueGraph/index.ts | 0 .../Funnels/FunnelIssues/FunnelIssues.tsx | 2 +- .../FunnelIssuesList/FunnelIssuesList.tsx | 0 .../components => }/FunnelIssuesList/index.ts | 0 .../FunnelIssuesListItem.tsx | 0 .../FunnelIssuesListItem/index.ts | 0 .../WidgetSubDetailsView.tsx | 14 ++++++++------ frontend/app/mstore/funnelStore.ts | 8 ++++++-- frontend/app/mstore/metricStore.ts | 2 +- frontend/app/mstore/types/funnelIssue.ts | 1 + frontend/app/services/FunnelService.ts | 4 +++- 14 files changed, 36 insertions(+), 13 deletions(-) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssueDetails/FunnelIssueDetails.tsx (55%) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssueDetails/index.ts (100%) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssueGraph/FunnelIssueGraph.tsx (100%) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssueGraph/index.ts (100%) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssuesList/FunnelIssuesList.tsx (100%) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssuesList/index.ts (100%) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssuesListItem/FunnelIssuesListItem.tsx (100%) rename frontend/app/components/Dashboard/components/Funnels/{FunnelIssues/components => }/FunnelIssuesListItem/index.ts (100%) diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/FunnelIssueDetails.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx similarity index 55% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/FunnelIssueDetails.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx index 06c845da9..fa4ff3b4e 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/FunnelIssueDetails.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/FunnelIssueDetails.tsx @@ -2,6 +2,8 @@ import React, { useEffect } from 'react'; import { useStore } from 'App/mstore'; import { useObserver } from 'mobx-react-lite'; import { Loader } from 'UI'; +import FunnelIssuesListItem from '../FunnelIssuesListItem'; +import SessionItem from 'App/components/shared/SessionItem/SessionItem'; interface Props { funnelId: string; @@ -16,15 +18,27 @@ function FunnelIssueDetails(props: Props) { useEffect(() => { if (!funnel || !funnel.exists()) { - funnelStore.fetchFunnel(props.funnelId); + // funnelStore.fetchFunnel(props.funnelId); + funnelStore.fetchFunnel('143'); } funnelStore.fetchIssue(funnelId, issueId); }, []); + console.log('funnelIssue', funnelIssue) + return ( - + { funnelIssue && } + +
+ {funnelIssue && funnelIssue.sessions.map(session => ( + + ))} +
); } diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueDetails/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssueDetails/index.ts diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/FunnelIssueGraph.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/FunnelIssueGraph.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/FunnelIssueGraph.tsx diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssueGraph/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssueGraph/index.ts diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx index e779d4f49..81bb4457e 100644 --- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx +++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/FunnelIssues.tsx @@ -4,7 +4,7 @@ import React, { useEffect } from 'react'; import { NoContent, Loader } from 'UI'; import FunnelIssuesDropdown from '../FunnelIssuesDropdown'; import FunnelIssuesSort from '../FunnelIssuesSort'; -import FunnelIssuesList from './components/FunnelIssuesList'; +import FunnelIssuesList from '../FunnelIssuesList'; function FunnelIssues(props) { const { funnelStore } = useStore(); diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/FunnelIssuesList.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesList/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/index.ts diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/FunnelIssuesListItem.tsx similarity index 100% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/FunnelIssuesListItem.tsx rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/FunnelIssuesListItem.tsx diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/index.ts b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/index.ts similarity index 100% rename from frontend/app/components/Dashboard/components/Funnels/FunnelIssues/components/FunnelIssuesListItem/index.ts rename to frontend/app/components/Dashboard/components/Funnels/FunnelIssuesListItem/index.ts diff --git a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx index da772e747..261e77efd 100644 --- a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx +++ b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx @@ -4,7 +4,7 @@ import { useObserver } from 'mobx-react-lite'; import React, { useEffect } from 'react'; import { withSiteId } from 'App/routes'; import { Loader } from 'UI'; -// import FunnelSubDetailsView from './FunnelSubDetailsView'; +import FunnelIssueDetails from '../Funnels/FunnelIssueDetails'; interface Props { history: any; @@ -12,11 +12,13 @@ interface Props { siteId: any } function WidgetSubDetailsView(props: Props) { - const { match: { params: { siteId, dashboardId, metricId } } } = props; - const { metricStore } = useStore(); + const { match: { params: { siteId, dashboardId, metricId, subId } } } = props; + const { metricStore, funnelStore } = useStore(); const widget = useObserver(() => metricStore.instance); + const issueInstance = useObserver(() => funnelStore.issueInstance); const loadingWidget = useObserver(() => metricStore.isLoading); - const isFunnel = widget.metricType === 'funnel'; + // const isFunnel = widget.metricType === 'funnel'; // TODO uncomment this line + const isFunnel = widget.metricType === 'table'; // TODO remove this line useEffect(() => { if (!widget || !widget.exists()) { @@ -30,12 +32,12 @@ function WidgetSubDetailsView(props: Props) { items={[ { label: dashboardId ? 'Dashboard' : 'Metrics', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) }, { label: widget.name, to: withSiteId(`/metrics/${widget.metricId}`, siteId) }, - { label: 'Sub Details' } + { label: issueInstance ? issueInstance.title : 'Sub Details' } ]} /> - {/* {isFunnel && } */} + {isFunnel && } ); diff --git a/frontend/app/mstore/funnelStore.ts b/frontend/app/mstore/funnelStore.ts index 181305661..946e801d3 100644 --- a/frontend/app/mstore/funnelStore.ts +++ b/frontend/app/mstore/funnelStore.ts @@ -1,6 +1,7 @@ import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx" import { funnelService } from "App/services" import Funnel, { IFunnel } from "./types/funnel"; +import Session from './types/session'; import FunnelIssue from './types/funnelIssue'; import Period, { LAST_7_DAYS } from 'Types/app/period'; @@ -124,9 +125,12 @@ export default class FunnelStore { fetchIssue(funnelId: string, issueId: string): Promise { this.isLoadingIssues = true return new Promise((resolve, reject) => { - funnelService.fetchIssue(funnelId, issueId) + // funnelService.fetchIssue(funnelId, issueId) + funnelService.fetchIssue('143', '91515f9118ed803291f87133e2cb49a16ea') .then(response => { - this.issueInstance = new FunnelIssue().fromJSON(response) + this.issueInstance = new FunnelIssue().fromJSON(response.issue) + this.issueInstance.sessions = response.sessions.sessions.map(i => new Session().fromJson(i)) + console.log('response.sessions', response.sessions); resolve(this.issueInstance) }).catch(error => { reject(error) diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts index 0f4163711..eb9147620 100644 --- a/frontend/app/mstore/metricStore.ts +++ b/frontend/app/mstore/metricStore.ts @@ -192,7 +192,7 @@ export default class MetricStore implements IMetricStore { } const sampleJson = { - metricId: 1, + // metricId: 1, name: "Funnel Sample", metricType: 'funnel', series: [ diff --git a/frontend/app/mstore/types/funnelIssue.ts b/frontend/app/mstore/types/funnelIssue.ts index 5f07ee123..203a6727c 100644 --- a/frontend/app/mstore/types/funnelIssue.ts +++ b/frontend/app/mstore/types/funnelIssue.ts @@ -12,6 +12,7 @@ export default class FunnelIssue { affectedSessionsPer: number = 0 unaffectedSessionsPer: number = 0 icon: any = {} + sessions: any[] = [] constructor() { } diff --git a/frontend/app/services/FunnelService.ts b/frontend/app/services/FunnelService.ts index 099ad8d1f..676d7fb3f 100644 --- a/frontend/app/services/FunnelService.ts +++ b/frontend/app/services/FunnelService.ts @@ -54,10 +54,12 @@ export default class FunnelService implements IFunnelService { const path = funnelId ? `/funnels/${funnelId}/issues` : '/funnels/issues'; return this.client.post(path, payload) .then(response => response.json()) + .then(response => response.data || []); } fetchIssue(funnelId: string, issueId: string): Promise { - return this.client.get(`/funnels/${funnelId}/issues/${issueId}`) + return this.client.post(`/funnels/${funnelId}/issues/${issueId}/sessions`, {}) .then(response => response.json()) + .then(response => response.data || {}); } } \ No newline at end of file