feat(ui) - dashboards wip

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

@@ -0,0 +1,55 @@
+import { useObserver } from 'mobx-react-lite';
+import React from 'react';
+import { Icon, NoContent, Label, Link } from 'UI';
+import { useDashboardStore } from '../../store/store';
+
+interface Props { }
+function MetricsList(props: Props) {
+    const store: any = useDashboardStore();
+    const widgets = store.widgets;
+    const lenth = widgets.length;
+
+    return useObserver(() => (
+        <NoContent show={lenth === 0} icon="exclamation-circle">
+            <div className="mt-3 border rounded bg-white">
+                <div className="grid grid-cols-7 p-3 font-medium">
+                    <div className="col-span-2">Title</div>
+                    <div>Type</div>
+                    <div>Dashboards</div>
+                    <div>Owner</div>
+                    <div>Visibility & Edit Access</div>
+                    <div>Last Modified</div>
+                </div>
+
+                {widgets.map((metric: any) => (
+                    <div className="grid grid-cols-7 p-3 border-t select-none">
+                        <div className="col-span-2">
+                            <Link to="/dashboard/metrics/create" className="link">
+                                {metric.name}
+                            </Link>
+                        </div>
+                        <div><Label className="capitalize">{metric.metricType}</Label></div>
+                        <div>Dashboards</div>
+                        <div>{metric.owner}</div>
+                        <div>
+                            {metric.isPrivate ? (
+                                <div className="flex items-center">
+                                    <Icon name="person-fill" className="mr-2" />
+                                    <span>Private</span>
+                                </div>
+                            ) : (
+                                <div className="flex items-center">
+                                    <Icon name="user-friends" className="mr-2" />
+                                    <span>Team</span>
+                                </div>
+                            )}
+                        </div>
+                        <div>Last Modified</div>
+                    </div>
+                ))}
+            </div>
+        </NoContent>
+    ));
+}
+
+export default MetricsList;

frontend/app/components/Dashboard/components/MetricsList/index.ts

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

frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
-import { Button, PageTitle, Link } from 'UI';
+import { Button, PageTitle, Icon, Link } from 'UI';
 import { withSiteId, dashboardMetricCreate } from 'App/routes';
+import MetricsList from '../MetricsList';
 
 function MetricsView(props) {
     return (
         <div>
-            <div className="flex items-center mb-4">
+            <div className="flex items-center mb-4 justify-between">
                 <PageTitle title="Metrics" className="mr-3" />
                 {/* <Link to={withSiteId(dashboardMetricCreate(dashboard.dashboardId), store.siteId)}><Button primary size="small">Add Metric</Button></Link> */}
+                <div className="ml-auto w-1/4">
+                    <input
+                        className="bg-white p-2 border rounded w-full"
+                        placeholder="Filter by title, type, dashboard and owner"
+                    />
+                </div>
             </div>
+            <MetricsList />
         </div>
     );
 }

frontend/app/components/Dashboard/store/dashboardStore.ts

@@ -5,6 +5,7 @@ import Widget from "./widget";
 
 export default class DashboardStore {
     dashboards: Dashboard[] = []
+    widgets: Widget[] = []
     selectedDashboard: Dashboard | null = new Dashboard()
     isLoading: boolean = false
     siteId: any = null
@@ -48,6 +49,17 @@ export default class DashboardStore {
         //     this.selectedDashboard?.widgets[4].update({ position: 2 })
         //     this.selectedDashboard?.swapWidgetPosition(2, 0)
         // }, 3000)
+
+        for (let i = 0; i < 8; i++) {
+            const widget = getRandomWidget();
+            widget.position = i;
+            widget.name = `Widget ${i}`;
+            widget.isPrivate = [true, false][Math.floor(Math.random() * 2)];
+            widget.dashboardIds = [this.selectedDashboard?.dashboardId];
+            widget.owner = ["John", "Jane", "Jack", "Jill"][i % 4];
+            widget.metricType = ['timeseries', 'table'][Math.floor(Math.random() * 2)];
+            this.widgets.push(widget);
+        }
     }
 
     resetCurrentWidget() {

frontend/app/components/Dashboard/store/widget.ts

@@ -11,6 +11,10 @@ export default class Widget {
     viewType: string = "lineChart"
     series: FilterSeries[] = []
     sessions: [] = []
+    isPrivate: boolean = false
+    owner: string = ""
+    lastModified: Date = new Date()
+    dashboardIds: any[] = []
 
     position: number = 0
     data: any = {}

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-person-fill" viewBox="0 0 16 16">
+  <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+</svg>