feat(ui) - funnels - details wip

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 (
         <Loader loading={loading}>
-            
+            { funnelIssue && <FunnelIssuesListItem
+                issue={funnelIssue}
+                inDetails={true}
+            />}
+
+            <div className="mt-6">
+                {funnelIssue && funnelIssue.sessions.map(session => (
+                    <SessionItem key={session.id} session={session} />
+                ))}
+            </div>
         </Loader>
     );
 }

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();

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' }
                 ]}
             />
 
             <Loader loading={loadingWidget}>
-                {/* {isFunnel && <FunnelSubDetailsView widget={widget} />} */}
+                {isFunnel && <FunnelIssueDetails funnelId={metricId} issueId={subId} />}
             </Loader>
         </div>
     );

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<any> {
         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)

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: [

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() {
     }

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<any> {
-        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 || {});
     }
 }