feat(ui) - funnels - issues list

frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx

@@ -8,6 +8,7 @@ import { useObserver } from 'mobx-react-lite';
 import { withSiteId } from 'App/routes';
 import WidgetName from '../WidgetName';
 import FunnelIssues from '../FunnelIssues/FunnelIssues';
+import Breadcrumb from 'Shared/Breadcrumb';
 interface Props {
     history: any;
     match: any
@@ -40,7 +41,12 @@ function WidgetView(props: Props) {
     return useObserver(() => (
         <Loader loading={loading}>
             <div className="relative pb-10">
-                <BackLink onClick={onBackHandler} vertical className="absolute" style={{ left: '-50px', top: '0px' }} />
+                <Breadcrumb
+                    items={[
+                        { label: dashboardId ? 'Dashboard' : 'Metrics', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) },
+                        { label: widget.name, }
+                    ]}
+                />
                 <div className="bg-white rounded border">
                     <div className="px-6 py-4 flex justify-between items-center">
                         <h1 className="mb-0 text-2xl">

frontend/app/components/shared/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Icon } from 'UI';
+import { Link } from 'react-router-dom';
+
+interface Props {
+    items: any
+}
+function Breadcrumb(props) {
+    const { items } = props;
+    return (
+        <div className="mb-3 flex items-center text-lg">
+            {items.map((item, index) => {
+                if (index === items.length - 1) {
+                    return (
+                        <span key={index} className="color-gray-medium">{item.label}</span>
+                    );
+                }
+                return (
+                    <div key={index} className="color-gray-darkest hover:color-teal flex items-center">
+                        <Link to={item.to} className="">{item.label}</Link>
+                        <span className="mx-2">/</span>
+                        {/* <Icon name="chevron-right" /> */}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+export default Breadcrumb;

frontend/app/components/shared/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export { default } from './Breadcrumb';

frontend/app/player/MessageDistributor/MessageDistributor.ts

@@ -154,7 +154,7 @@ export default class MessageDistributor extends StatedScreen {
 
     const r = new MFileReader(new Uint8Array(), this.sessionStart)
     const msgs: Array<Message> = []
-    loadFiles(this.session.mobsUrl,
+    loadFiles([this.session.mobsUrl],
       b => {
         r.append(b)
         let next: ReturnType<MFileReader['next']>

frontend/app/routes.js

@@ -112,6 +112,7 @@ export const dashboardMetricCreate = (dashboardId = ':dashboardId',  hash) => ha
 export const metrics = () => `/metrics`;
 export const metricCreate = () => `/metrics/create`;
 export const metricDetails = (id = ':metricId', hash) => hashed(`/metrics/${ id }`, hash);
+export const metricDetailsSub = (id = ':metricId', subId = ':subId', hash) => hashed(`/metrics/${ id }/details/${subId}`, hash);
 
 export const RESULTS_QUERY_KEY = 'results';
 export const METRICS_QUERY_KEY = 'metrics';