feat(ui) - metrics list icons

frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import { Icon, NoContent, Label, Link, Pagination } from 'UI';
 import { checkForRecent, formatDateTimeDefault, convertTimestampToUtcTimestamp } from 'App/date';
+import { getIcon } from 'react-toastify/dist/components';
 
 interface Props {
     metric: any;
 }
 
-function DashboardLink({ dashboards}) {
+function DashboardLink({ dashboards}: any) {
     return (
-        dashboards.map(dashboard => (
+        dashboards.map((dashboard: any) => (
             <React.Fragment key={dashboard.dashboardId}>
-            <Link to={`/dashboard/${dashboard.dashboardId}`} className="">
-                <div className="flex items-center mb-1">
-                    <div className="mr-2 text-4xl no-underline" style={{ textDecoration: 'none'}}>·</div>
+            <Link to={`/dashboard/${dashboard.dashboardId}`}>
+                <div className="flex items-center mb-1 py-1">
+                    <div className="mr-2">
+                        <Icon name="circle-fill" size="4" color="gray-medium" />
+                    </div>
                     <span className="link leading-4">{dashboard.name}</span>
                 </div>
             </Link>
@@ -23,14 +26,30 @@ function DashboardLink({ dashboards}) {
 
 function MetricListItem(props: Props) {
     const { metric } = props;
+
+    const getIcon = (metricType: string) => {
+        switch (metricType) {
+            case 'funnel':
+                return 'filter';
+            case 'table':
+                return 'list-alt';
+            case 'timeseries':
+                return 'bar-chart-line';
+        }
+    }
     return (
         <div className="grid grid-cols-12 p-3 border-t select-none">
-            <div className="col-span-3">
-                <Link to={`/metrics/${metric.metricId}`} className="link">
-                    {metric.name}
-                </Link>
+            <div className="col-span-3 flex items-start">
+                <div className="flex items-center">
+                    <div className="w-8 h-8 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
+                        <Icon name={getIcon(metric.metricType)} size="14" color="tealx"  />
+                    </div>
+                    <Link to={`/metrics/${metric.metricId}`} className="link">
+                        {metric.name}
+                    </Link>
+                </div>
             </div>
-            <div><Label className="capitalize">{metric.metricType}</Label></div>
+            {/* <div><Label className="capitalize">{metric.metricType}</Label></div> */}
             <div className="col-span-2">
                 <DashboardLink dashboards={metric.dashboards} />
             </div>

frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx

@@ -39,8 +39,8 @@ function MetricsList(props: Props) {
         >
             <div className="mt-3 border rounded bg-white">
                 <div className="grid grid-cols-12 p-3 font-medium">
-                    <div className="col-span-3">Title</div>
-                    <div>Type</div>
+                    <div className="col-span-3">Metric</div>
+                    {/* <div>Type</div> */}
                     <div className="col-span-2">Dashboards</div>
                     <div className="col-span-3">Owner</div>
                     <div>Visibility</div>

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

@@ -22,6 +22,11 @@ function WidgetView(props: Props) {
     const widget = useObserver(() => metricStore.instance);
     const loading = useObserver(() => metricStore.isLoading);
     const [expanded, setExpanded] = useState(!metricId || metricId === 'create');
+    
+    const dashboards = useObserver(() => dashboardStore.dashboards);
+    const dashboard = useObserver(() => dashboards.find((d: any) => d.dashboardId == dashboardId));
+    const dashboardName = dashboard ? dashboard.name : null;
+
 
     React.useEffect(() => {
         if (metricId && metricId !== 'create') {
@@ -45,7 +50,7 @@ function WidgetView(props: Props) {
             <div className="relative pb-10">
                 <Breadcrumb
                     items={[
-                        { label: dashboardId ? 'Dashboard' : 'Metrics', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) },
+                        { label: dashboardName ? dashboardName : 'Metrics', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) },
                         { label: widget.name, }
                     ]}
                 />

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

@@ -5,11 +5,11 @@ import { Link } from 'react-router-dom';
 interface Props {
     items: any
 }
-function Breadcrumb(props) {
+function Breadcrumb(props: Props) {
     const { items } = props;
     return (
         <div className="mb-3 flex items-center text-lg">
-            {items.map((item, index) => {
+            {items.map((item: any, index: any) => {
                 if (index === items.length - 1) {
                     return (
                         <span key={index} className="color-gray-medium">{item.label}</span>

frontend/app/components/ui/SVG.tsx

@@ -101,6 +101,7 @@ const SVG = (props: Props) => {
     case 'chevron-left': return <svg class="bi bi-chevron-left" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>;
     case 'chevron-right': return <svg class="bi bi-chevron-right" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>;
     case 'chevron-up': return <svg class="bi bi-chevron-up" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>;
+    case 'circle-fill': return <svg class="bi bi-circle-fill" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><circle cx="8" cy="8" r="8"/></svg>;
     case 'circle': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>;
     case 'clipboard-list-check': return <svg class="bi bi-card-checklist" viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/></svg>;
     case 'clock': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>;

frontend/app/svg/icons/circle-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
+  <circle cx="8" cy="8" r="8"/>
+</svg>