From d5e3b2b9a444c0c1fa2dabcdeb82f8668aa1aa86 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 13 Jan 2023 15:19:49 +0100
Subject: [PATCH] change(ui) - dashboard - filters

---
 .../DashboardList/DashboardList.tsx           |  13 +-
 .../DashboardList/DashboardListItem.tsx       |   1 -
 .../DashboardList/DashboardSearch.tsx         |  52 +-
 .../components/DashboardList/Header.tsx       |  61 +-
 .../MetricViewHeader/MetricViewHeader.tsx     |  29 +-
 frontend/app/mstore/dashboardStore.ts         | 872 +++++++++---------
 frontend/app/mstore/metricStore.ts            |   3 +-
 7 files changed, 503 insertions(+), 528 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index ace14e03e..2b60ad40a 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -2,22 +2,14 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { NoContent, Pagination } from 'UI';
 import { useStore } from 'App/mstore';
-import { filterList } from 'App/utils';
 import { sliceListPerPage } from 'App/utils';
 import DashboardListItem from './DashboardListItem';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 function DashboardList() {
   const { dashboardStore } = useStore();
-  const [shownDashboards, setDashboards] = React.useState([]);
-  const dashboards = dashboardStore.sortedDashboards;
+  const list = dashboardStore.filteredList;
   const dashboardsSearch = dashboardStore.dashboardsSearch;
-
-  React.useEffect(() => {
-    setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']));
-  }, [dashboardsSearch]);
-
-  const list = dashboardsSearch !== '' ? shownDashboards : dashboards;
   const lenth = list.length;
 
   return (
@@ -38,9 +30,6 @@ function DashboardList() {
             )}
           </div>
           <AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
-          {/* <div className="my-2 bg-active-blue rounded flex items-center justify-center px-80 py-20">
-            <Icon name="grid-1x2" size={40} color="figmaColors-accent-secondary" />
-          </div> */}
         </div>
       }
     >
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
index a3cb6e436..e076dd6d5 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
@@ -32,7 +32,6 @@ function DashboardListItem(props: Props) {
                         <div className="link capitalize-first">{dashboard.name}</div>
                     </div>
                 </div>
-                {/* <div><Label className="capitalize">{metric.metricType}</Label></div> */}
                 <div className="col-span-2">
                     <div className="flex items-center">
                         <Icon name={dashboard.isPublic ? 'user-friends' : 'person-fill'} className="mr-2" />
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx
index a3b13f1d3..d60a6886c 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx
@@ -4,33 +4,37 @@ import { useStore } from 'App/mstore';
 import { Icon } from 'UI';
 import { debounce } from 'App/utils';
 
-let debounceUpdate: any = () => {}
+let debounceUpdate: any = () => {};
 
 function DashboardSearch() {
-    const { dashboardStore } = useStore();
-    const [query, setQuery] = useState(dashboardStore.dashboardsSearch);
-    useEffect(() => {
-        debounceUpdate = debounce((key: string, value: any) => dashboardStore.updateKey(key, value), 500);
-    }, [])
-
-    // @ts-ignore
-    const write = ({ target: { value } }) => {
-        setQuery(value);
-        debounceUpdate('dashboardsSearch', value);
-    }
-    
-    return (
-        <div className="relative">
-            <Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
-            <input
-                value={query}
-                name="dashboardsSearch"
-                className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
-                placeholder="Filter by title or description"
-                onChange={write}
-            />
-        </div>
+  const { dashboardStore } = useStore();
+  const [query, setQuery] = useState(dashboardStore.dashboardsSearch);
+  useEffect(() => {
+    debounceUpdate = debounce(
+      (key: string, value: any) =>
+        dashboardStore.updateKey('filter', { ...dashboardStore.filter, query: value }),
+      500
     );
+  }, []);
+
+  // @ts-ignore
+  const write = ({ target: { value } }) => {
+    setQuery(value);
+    debounceUpdate('dashboardsSearch', value);
+  };
+
+  return (
+    <div className="relative">
+      <Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
+      <input
+        value={query}
+        name="dashboardsSearch"
+        className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
+        placeholder="Filter by title or description"
+        onChange={write}
+      />
+    </div>
+  );
 }
 
 export default observer(DashboardSearch);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
index f77d3ae69..560c27c61 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
@@ -19,30 +19,49 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
   };
 
   return (
-    <div className="flex items-center mb-4 justify-between px-6">
-      <div className="flex items-baseline mr-3">
-        <PageTitle title="Dashboards" />
-      </div>
-      <div className="ml-auto flex items-center">
-        <Button variant="primary" onClick={onAddDashboardClick}>
-          New Dashboard
-        </Button>
-        <div className="mx-2">
-          <Select
-            options={[
-              { label: 'Newest', value: 'desc' },
-              { label: 'Oldest', value: 'asc' },
-            ]}
-            defaultValue={sort.by}
-            plain
-            onChange={({ value }) => dashboardStore.updateKey('sort', { by: value.value })}
-          />
+    <>
+      <div className="flex items-center mb-4 justify-between px-6">
+        <div className="flex items-baseline mr-3">
+          <PageTitle title="Dashboards" />
         </div>
-        <div className="w-1/4" style={{ minWidth: 300 }}>
-          <DashboardSearch />
+        <div className="ml-auto flex items-center">
+          <Button variant="primary" onClick={onAddDashboardClick}>
+            New Dashboard
+          </Button>
+          <div className="mx-2"></div>
+          <div className="w-1/4" style={{ minWidth: 300 }}>
+            <DashboardSearch />
+          </div>
         </div>
       </div>
-    </div>
+      <div className="border-y px-3 py-1 mt-2 flex items-center w-full justify-end gap-4">
+        <Select
+          options={[
+            { label: 'Visibility - All', value: 'all' },
+            { label: 'Visibility - Private', value: 'private' },
+            { label: 'Visibility - Team', value: 'team' },
+          ]}
+          defaultValue={'all'}
+          plain
+          onChange={({ value }) =>
+            dashboardStore.updateKey('filter', {
+              ...dashboardStore.filter,
+              visibility: value.value,
+            })
+          }
+        />
+
+        <Select
+          options={[
+            { label: 'Newest', value: 'desc' },
+            { label: 'Oldest', value: 'asc' },
+          ]}
+          defaultValue={sort.by}
+          plain
+          onChange={({ value }) => dashboardStore.updateKey('sort', { by: value.value })}
+        />
+      </div>
+    </>
   );
 }
 
diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
index a958cd0ec..6dcecabb2 100644
--- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, PageTitle, Button, Link, SegmentSelection } from 'UI';
+import { Icon, PageTitle, Button, Link } from 'UI';
 import MetricsSearch from '../MetricsSearch';
 import Select from 'Shared/Select';
 import { useStore } from 'App/mstore';
@@ -8,12 +8,8 @@ import { DROPDOWN_OPTIONS, Option } from 'App/constants/card';
 
 function MetricViewHeader() {
   const { metricStore } = useStore();
-  const sort = metricStore.sort;
-  const listView = metricStore.listView;
   const filter = metricStore.filter;
 
-  const writeOption = (e: any, { name, value }: any) => {};
-
   return (
     <div>
       <div className="flex items-center mb-4 justify-between px-6">
@@ -24,28 +20,6 @@ function MetricViewHeader() {
           <Link to={'/metrics/create'}>
             <Button variant="primary">New Card</Button>
           </Link>
-          {/* <SegmentSelection
-            name="viewType"
-            className="mx-3"
-            primary
-            onSelect={() => metricStore.updateKey('listView', !listView)}
-            value={{ value: listView ? 'list' : 'grid' }}
-            list={[
-              { value: 'list', name: '', icon: 'graph-up-arrow' },
-              { value: 'grid', name: '', icon: 'hash' },
-            ]}
-          />
-          <div className="mx-2">
-            <Select
-              options={[
-                { label: 'Newest', value: 'desc' },
-                { label: 'Oldest', value: 'asc' },
-              ]}
-              defaultValue={sort.by}
-              plain
-              onChange={({ value }) => metricStore.updateKey('sort', { by: value.value })}
-            />
-          </div> */}
           <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
             <MetricsSearch />
           </div>
@@ -65,6 +39,7 @@ function MetricViewHeader() {
             defaultValue={filter.type}
             onChange={({ value }) => metricStore.updateKey('filter', { ...filter, type: value.value})}
             plain={true}
+            isSearchable={true}
           />
 
           <Select
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index 5b89e82d5..8632d639c 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -1,444 +1,432 @@
-import {
-    makeAutoObservable,
-    runInAction,
-} from "mobx";
-import Dashboard from "./types/dashboard";
-import Widget from "./types/widget";
-import { dashboardService, metricService } from "App/services";
-import { toast } from "react-toastify";
-import Period, {
-    LAST_24_HOURS,
-    LAST_7_DAYS,
-} from "Types/app/period";
-import { getChartFormatter } from "Types/dashboard/helper";
-import Filter from "./types/filter";
-import Funnel from "./types/funnel";
-import Session from "./types/session";
-import Error from "./types/error";
-import { FilterKey } from "Types/filter/filterType";
+import { makeAutoObservable, runInAction } from 'mobx';
+import Dashboard from './types/dashboard';
+import Widget from './types/widget';
+import { dashboardService, metricService } from 'App/services';
+import { toast } from 'react-toastify';
+import Period, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period';
+import Filter from './types/filter';
+import { getRE } from 'App/utils';
 
-export default class DashboardStore {
-    siteId: any = null;
-    dashboards: Dashboard[] = [];
-    selectedDashboard: Dashboard | null = null;
-    dashboardInstance: Dashboard = new Dashboard();
-    selectedWidgets: Widget[] = [];
-    currentWidget: Widget = new Widget();
-    widgetCategories: any[] = [];
-    widgets: Widget[] = [];
-    period: Record<string, any> = Period({ rangeName: LAST_24_HOURS });
-    drillDownFilter: Filter = new Filter();
-    drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
-    startTimestamp: number = 0;
-    endTimestamp: number = 0;
-    pendingRequests: number = 0;
-
-    // Metrics
-    metricsPage: number = 1;
-    metricsPageSize: number = 10;
-    metricsSearch: string = "";
-
-    // Loading states
-    isLoading: boolean = true;
-    isSaving: boolean = false;
-    isDeleting: boolean = false;
-    loadingTemplates: boolean = false
-    fetchingDashboard: boolean = false;
-    sessionsLoading: boolean = false;
-    showAlertModal: boolean = false;
-
-    // Pagination
-    page: number = 1
-    pageSize: number = 10
-    dashboardsSearch: string = ''
-    sort: any = { by: 'desc'}
-
-    constructor() {
-        makeAutoObservable(this);
-
-        this.drillDownPeriod = Period({ rangeName: LAST_7_DAYS });
-        const timeStamps = this.drillDownPeriod.toTimestamps();
-        this.drillDownFilter.updateKey(
-            "startTimestamp",
-            timeStamps.startTimestamp
-        );
-        this.drillDownFilter.updateKey("endTimestamp", timeStamps.endTimestamp);
-    }
-
-    get sortedDashboards() {
-        const sortOrder = this.sort.by
-        return [...this.dashboards].sort((a, b) => sortOrder === 'desc' ? b.createdAt - a.createdAt : a.createdAt - b.createdAt)
-    }
-
-    toggleAllSelectedWidgets(isSelected: boolean) {
-        if (isSelected) {
-            const allWidgets = this.widgetCategories.reduce((acc, cat) => {
-                return acc.concat(cat.widgets);
-            }, []);
-
-            this.selectedWidgets = allWidgets;
-        } else {
-            this.selectedWidgets = [];
-        }
-    }
-
-    selectWidgetsByCategory(category: string) {
-        const selectedWidgetIds = this.selectedWidgets.map(
-            (widget: any) => widget.metricId
-        );
-        const widgets = this.widgetCategories
-            .find((cat) => cat.name === category)
-            ?.widgets.filter(
-                (widget: any) => !selectedWidgetIds.includes(widget.metricId)
-            );
-        this.selectedWidgets = this.selectedWidgets.concat(widgets) || [];
-    }
-
-    removeSelectedWidgetByCategory = (category: any) => {
-        const categoryWidgetIds = category.widgets.map((w: Widget) => w.metricId);
-        this.selectedWidgets = this.selectedWidgets.filter(
-            (widget: any) => !categoryWidgetIds.includes(widget.metricId)
-        );
-    };
-
-    toggleWidgetSelection = (widget: any) => {
-        const selectedWidgetIds = this.selectedWidgets.map(
-            (widget: any) => widget.metricId
-        );
-        if (selectedWidgetIds.includes(widget.metricId)) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-                (w: any) => w.metricId !== widget.metricId
-            );
-        } else {
-            this.selectedWidgets.push(widget);
-        }
-    };
-
-    findByIds(ids: string[]) {
-        return this.dashboards.filter((d) => ids.includes(d.dashboardId));
-    }
-
-    initDashboard(dashboard?: Dashboard) {
-        this.dashboardInstance = dashboard
-            ? new Dashboard().fromJson(dashboard)
-            : new Dashboard();
-        this.selectedWidgets = [];
-    }
-
-    updateKey(key: string, value: any) {
-        // @ts-ignore
-        this[key] = value;
-    }
-
-    resetCurrentWidget() {
-        this.currentWidget = new Widget();
-    }
-
-    editWidget(widget: any) {
-        this.currentWidget.update(widget);
-    }
-
-    fetchList(): Promise<any> {
-        this.isLoading = true;
-
-        return dashboardService
-            .getDashboards()
-            .then((list: any) => {
-                runInAction(() => {
-                    this.dashboards = list.map((d: Record<string, any>) =>
-                        new Dashboard().fromJson(d)
-                    );
-                });
-            })
-            .finally(() => {
-                runInAction(() => {
-                    this.isLoading = false;
-                });
-            });
-    }
-
-    fetch(dashboardId: string): Promise<any> {
-        this.setFetchingDashboard(true);
-        return dashboardService
-            .getDashboard(dashboardId)
-            .then((response) => {
-                this.selectedDashboard?.update({
-                    widgets: new Dashboard().fromJson(response).widgets,
-                });
-            })
-            .finally(() => {
-                this.setFetchingDashboard(false);
-            });
-    }
-
-    setFetchingDashboard(value: boolean) {
-        this.fetchingDashboard = value;
-    }
-
-    save(dashboard: Dashboard): Promise<any> {
-        this.isSaving = true;
-        const isCreating = !dashboard.dashboardId;
-
-        dashboard.metrics = this.selectedWidgets.map((w) => w.metricId);
-
-        return new Promise((resolve, reject) => {
-            dashboardService
-                .saveDashboard(dashboard)
-                .then((_dashboard) => {
-                    runInAction(() => {
-                        if (isCreating) {
-                            toast.success("Dashboard created successfully");
-                            this.addDashboard(
-                                new Dashboard().fromJson(_dashboard)
-                            );
-                        } else {
-                            toast.success("Dashboard successfully updated ");
-                            this.updateDashboard(
-                                new Dashboard().fromJson(_dashboard)
-                            );
-                        }
-                        resolve(_dashboard);
-                    });
-                })
-                .catch((error) => {
-                    toast.error("Error saving dashboard");
-                    reject();
-                })
-                .finally(() => {
-                    runInAction(() => {
-                        this.isSaving = false;
-                    });
-                });
-        });
-    }
-
-    saveMetric(metric: Widget, dashboardId: string): Promise<any> {
-        const isCreating = !metric.widgetId;
-        return dashboardService
-            .saveMetric(metric, dashboardId)
-            .then((metric) => {
-                runInAction(() => {
-                    if (isCreating) {
-                        this.selectedDashboard?.widgets.push(metric);
-                    } else {
-                        this.selectedDashboard?.widgets.map((w) => {
-                            if (w.widgetId === metric.widgetId) {
-                                w.update(metric);
-                            }
-                        });
-                    }
-                });
-            });
-    }
-
-    deleteDashboard(dashboard: Dashboard): Promise<any> {
-        this.isDeleting = true;
-        return dashboardService
-            .deleteDashboard(dashboard.dashboardId)
-            .then(() => {
-                toast.success("Dashboard deleted successfully");
-                runInAction(() => {
-                    this.removeDashboard(dashboard);
-                });
-            })
-            .catch(() => {
-                toast.error("Dashboard could not be deleted");
-            })
-            .finally(() => {
-                runInAction(() => {
-                    this.isDeleting = false;
-                });
-            });
-    }
-
-    toJson() {
-        return {
-            dashboards: this.dashboards.map((d) => d.toJson()),
-        };
-    }
-
-    fromJson(json: any) {
-        runInAction(() => {
-            this.dashboards = json.dashboards.map((d: Record<string, any>) =>
-                new Dashboard().fromJson(d)
-            );
-        });
-        return this;
-    }
-
-    addDashboard(dashboard: Dashboard) {
-        this.dashboards.push(new Dashboard().fromJson(dashboard));
-    }
-
-    removeDashboard(dashboard: Dashboard) {
-        this.dashboards = this.dashboards.filter(
-            (d) => d.dashboardId !== dashboard.dashboardId
-        );
-    }
-
-    getDashboard(dashboardId: string|number): Dashboard | null {
-        return (
-            this.dashboards.find((d) => d.dashboardId == dashboardId) || null
-        );
-    }
-
-    getDashboardByIndex(index: number) {
-        return this.dashboards[index];
-    }
-
-    getDashboardCount() {
-        return this.dashboards.length;
-    }
-
-    updateDashboard(dashboard: Dashboard) {
-        const index = this.dashboards.findIndex(
-            (d) => d.dashboardId === dashboard.dashboardId
-        );
-        if (index >= 0) {
-            this.dashboards[index] = dashboard;
-            if (this.selectedDashboard?.dashboardId === dashboard.dashboardId) {
-                this.selectDashboardById(dashboard.dashboardId);
-            }
-        }
-    }
-
-    selectDashboardById = (dashboardId: any) => {
-        this.selectedDashboard =
-            this.dashboards.find((d) => d.dashboardId == dashboardId) ||
-            new Dashboard();
-    };
-
-    getDashboardById = (dashboardId: string) => {
-        const dashboard = this.dashboards.find((d) => d.dashboardId == dashboardId)
-
-        if (dashboard) {
-            this.selectedDashboard = dashboard
-            return true;
-        } else {
-            this.selectedDashboard = null
-            return false;
-        }
-    }
-
-    setSiteId = (siteId: any) => {
-        this.siteId = siteId;
-    };
-
-    fetchTemplates(hardRefresh: boolean): Promise<any> {
-        this.loadingTemplates = true
-        return new Promise((resolve, reject) => {
-            if (this.widgetCategories.length > 0 && !hardRefresh) {
-                resolve(this.widgetCategories);
-            } else {
-                metricService
-                    .getTemplates()
-                    .then((response) => {
-                        const categories: any[] = [];
-                        response.forEach((category: any) => {
-                            const widgets: any[] = [];
-                            category.widgets
-                                .forEach((widget: any) => {
-                                    const w = new Widget().fromJson(widget);
-                                    widgets.push(w);
-                                });
-                            const c: any = {};
-                            c.widgets = widgets;
-                            c.name = category.category;
-                            c.description = category.description;
-                            categories.push(c);
-                        });
-                        this.widgetCategories = categories;
-                        resolve(this.widgetCategories);
-                    })
-                    .catch((error) => {
-                        reject(error);
-                    }).finally(() => {
-                        this.loadingTemplates = false
-                    });
-            }
-        });
-    }
-
-    deleteDashboardWidget(dashboardId: string, widgetId: string) {
-        this.isDeleting = true;
-        return dashboardService
-            .deleteWidget(dashboardId, widgetId)
-            .then(() => {
-                toast.success("Dashboard updated successfully");
-                runInAction(() => {
-                    this.selectedDashboard?.removeWidget(widgetId);
-                });
-            })
-            .finally(() => {
-                this.isDeleting = false;
-            });
-    }
-
-    addWidgetToDashboard(dashboard: Dashboard, metricIds: any): Promise<any> {
-        this.isSaving = true;
-        return dashboardService
-            .addWidget(dashboard, metricIds)
-            .then((response) => {
-                toast.success("Card added to dashboard.");
-            })
-            .catch(() => {
-                toast.error("Card could not be added.");
-            })
-            .finally(() => {
-                this.isSaving = false;
-            });
-    }
-
-    setPeriod(period: any) {
-        this.period = Period({
-            start: period.start,
-            end: period.end,
-            rangeName: period.rangeName,
-        });
-    }
-
-    setDrillDownPeriod(period: any) {
-        this.drillDownPeriod = Period({
-            start: period.start,
-            end: period.end,
-            rangeName: period.rangeName,
-        });
-    }
-
-    toggleAlertModal(val: boolean) {
-        this.showAlertModal = val
-    }
-
-    fetchMetricChartData(
-        metric: Widget,
-        data: any,
-        isWidget: boolean = false,
-        period: Record<string, any>
-    ): Promise<any> {
-        period = period.toTimestamps();
-        const params = { ...period, ...data, key: metric.predefinedKey };
-
-
-        if (metric.page && metric.limit) {
-            params["page"] = metric.page;
-            params["limit"] = metric.limit;
-        }
-
-        return new Promise((resolve, reject) => {
-            this.pendingRequests += 1
-            return metricService
-                .getMetricChartData(metric, params, isWidget)
-                .then((data: any) => {
-                    metric.setData(data, period);
-                    resolve(metric.data);
-                })
-                .catch((err: any) => {
-                    reject(err);
-                }).finally(() => {
-                    setTimeout(() => {
-                        this.pendingRequests = this.pendingRequests - 1
-                    }, 100)
-                });
-        });
-    }
+interface DashboardFilter {
+  query?: string;
+  visibility?: string;
+}
+export default class DashboardStore {
+  siteId: any = null;
+  dashboards: Dashboard[] = [];
+  selectedDashboard: Dashboard | null = null;
+  dashboardInstance: Dashboard = new Dashboard();
+  selectedWidgets: Widget[] = [];
+  currentWidget: Widget = new Widget();
+  widgetCategories: any[] = [];
+  widgets: Widget[] = [];
+  period: Record<string, any> = Period({ rangeName: LAST_24_HOURS });
+  drillDownFilter: Filter = new Filter();
+  drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
+  startTimestamp: number = 0;
+  endTimestamp: number = 0;
+  pendingRequests: number = 0;
+
+  filter: DashboardFilter = { visibility: 'all', query: '' };
+
+  // Metrics
+  metricsPage: number = 1;
+  metricsPageSize: number = 10;
+  metricsSearch: string = '';
+
+  // Loading states
+  isLoading: boolean = true;
+  isSaving: boolean = false;
+  isDeleting: boolean = false;
+  loadingTemplates: boolean = false;
+  fetchingDashboard: boolean = false;
+  sessionsLoading: boolean = false;
+  showAlertModal: boolean = false;
+
+  // Pagination
+  page: number = 1;
+  pageSize: number = 10;
+  dashboardsSearch: string = '';
+  sort: any = { by: 'desc' };
+
+  constructor() {
+    makeAutoObservable(this);
+
+    this.drillDownPeriod = Period({ rangeName: LAST_7_DAYS });
+    const timeStamps = this.drillDownPeriod.toTimestamps();
+    this.drillDownFilter.updateKey('startTimestamp', timeStamps.startTimestamp);
+    this.drillDownFilter.updateKey('endTimestamp', timeStamps.endTimestamp);
+  }
+
+  get sortedDashboards() {
+    const sortOrder = this.sort.by;
+    return [...this.dashboards].sort((a, b) =>
+      sortOrder === 'desc' ? b.createdAt - a.createdAt : a.createdAt - b.createdAt
+    );
+  }
+
+  get filteredList() {
+    const filterRE = this.filter.query ? getRE(this.filter.query, 'i') : null;
+    return this.dashboards
+      .filter(
+        (dashboard) =>
+          (this.filter.visibility === 'all' ||
+            (this.filter.visibility === 'team' ? dashboard.isPublic : !dashboard.isPublic)) &&
+          (!filterRE ||
+            // @ts-ignore
+            ['name', 'owner', 'description'].some((key) => filterRE.test(dashboard[key])))
+      )
+      .sort((a, b) =>
+        this.sort.by === 'desc' ? b.createdAt - a.createdAt : a.createdAt - b.createdAt
+      );
+  }
+
+  toggleAllSelectedWidgets(isSelected: boolean) {
+    if (isSelected) {
+      const allWidgets = this.widgetCategories.reduce((acc, cat) => {
+        return acc.concat(cat.widgets);
+      }, []);
+
+      this.selectedWidgets = allWidgets;
+    } else {
+      this.selectedWidgets = [];
+    }
+  }
+
+  selectWidgetsByCategory(category: string) {
+    const selectedWidgetIds = this.selectedWidgets.map((widget: any) => widget.metricId);
+    const widgets = this.widgetCategories
+      .find((cat) => cat.name === category)
+      ?.widgets.filter((widget: any) => !selectedWidgetIds.includes(widget.metricId));
+    this.selectedWidgets = this.selectedWidgets.concat(widgets) || [];
+  }
+
+  removeSelectedWidgetByCategory = (category: any) => {
+    const categoryWidgetIds = category.widgets.map((w: Widget) => w.metricId);
+    this.selectedWidgets = this.selectedWidgets.filter(
+      (widget: any) => !categoryWidgetIds.includes(widget.metricId)
+    );
+  };
+
+  toggleWidgetSelection = (widget: any) => {
+    const selectedWidgetIds = this.selectedWidgets.map((widget: any) => widget.metricId);
+    if (selectedWidgetIds.includes(widget.metricId)) {
+      this.selectedWidgets = this.selectedWidgets.filter(
+        (w: any) => w.metricId !== widget.metricId
+      );
+    } else {
+      this.selectedWidgets.push(widget);
+    }
+  };
+
+  findByIds(ids: string[]) {
+    return this.dashboards.filter((d) => ids.includes(d.dashboardId));
+  }
+
+  initDashboard(dashboard?: Dashboard) {
+    this.dashboardInstance = dashboard ? new Dashboard().fromJson(dashboard) : new Dashboard();
+    this.selectedWidgets = [];
+  }
+
+  updateKey(key: string, value: any) {
+    // @ts-ignore
+    this[key] = value;
+  }
+
+  resetCurrentWidget() {
+    this.currentWidget = new Widget();
+  }
+
+  editWidget(widget: any) {
+    this.currentWidget.update(widget);
+  }
+
+  fetchList(): Promise<any> {
+    this.isLoading = true;
+
+    return dashboardService
+      .getDashboards()
+      .then((list: any) => {
+        runInAction(() => {
+          this.dashboards = list.map((d: Record<string, any>) => new Dashboard().fromJson(d));
+        });
+      })
+      .finally(() => {
+        runInAction(() => {
+          this.isLoading = false;
+        });
+      });
+  }
+
+  fetch(dashboardId: string): Promise<any> {
+    this.setFetchingDashboard(true);
+    return dashboardService
+      .getDashboard(dashboardId)
+      .then((response) => {
+        this.selectedDashboard?.update({
+          widgets: new Dashboard().fromJson(response).widgets,
+        });
+      })
+      .finally(() => {
+        this.setFetchingDashboard(false);
+      });
+  }
+
+  setFetchingDashboard(value: boolean) {
+    this.fetchingDashboard = value;
+  }
+
+  save(dashboard: Dashboard): Promise<any> {
+    this.isSaving = true;
+    const isCreating = !dashboard.dashboardId;
+
+    dashboard.metrics = this.selectedWidgets.map((w) => w.metricId);
+
+    return new Promise((resolve, reject) => {
+      dashboardService
+        .saveDashboard(dashboard)
+        .then((_dashboard) => {
+          runInAction(() => {
+            if (isCreating) {
+              toast.success('Dashboard created successfully');
+              this.addDashboard(new Dashboard().fromJson(_dashboard));
+            } else {
+              toast.success('Dashboard successfully updated ');
+              this.updateDashboard(new Dashboard().fromJson(_dashboard));
+            }
+            resolve(_dashboard);
+          });
+        })
+        .catch((error) => {
+          toast.error('Error saving dashboard');
+          reject();
+        })
+        .finally(() => {
+          runInAction(() => {
+            this.isSaving = false;
+          });
+        });
+    });
+  }
+
+  saveMetric(metric: Widget, dashboardId: string): Promise<any> {
+    const isCreating = !metric.widgetId;
+    return dashboardService.saveMetric(metric, dashboardId).then((metric) => {
+      runInAction(() => {
+        if (isCreating) {
+          this.selectedDashboard?.widgets.push(metric);
+        } else {
+          this.selectedDashboard?.widgets.map((w) => {
+            if (w.widgetId === metric.widgetId) {
+              w.update(metric);
+            }
+          });
+        }
+      });
+    });
+  }
+
+  deleteDashboard(dashboard: Dashboard): Promise<any> {
+    this.isDeleting = true;
+    return dashboardService
+      .deleteDashboard(dashboard.dashboardId)
+      .then(() => {
+        toast.success('Dashboard deleted successfully');
+        runInAction(() => {
+          this.removeDashboard(dashboard);
+        });
+      })
+      .catch(() => {
+        toast.error('Dashboard could not be deleted');
+      })
+      .finally(() => {
+        runInAction(() => {
+          this.isDeleting = false;
+        });
+      });
+  }
+
+  toJson() {
+    return {
+      dashboards: this.dashboards.map((d) => d.toJson()),
+    };
+  }
+
+  fromJson(json: any) {
+    runInAction(() => {
+      this.dashboards = json.dashboards.map((d: Record<string, any>) =>
+        new Dashboard().fromJson(d)
+      );
+    });
+    return this;
+  }
+
+  addDashboard(dashboard: Dashboard) {
+    this.dashboards.push(new Dashboard().fromJson(dashboard));
+  }
+
+  removeDashboard(dashboard: Dashboard) {
+    this.dashboards = this.dashboards.filter((d) => d.dashboardId !== dashboard.dashboardId);
+  }
+
+  getDashboard(dashboardId: string | number): Dashboard | null {
+    return this.dashboards.find((d) => d.dashboardId == dashboardId) || null;
+  }
+
+  getDashboardByIndex(index: number) {
+    return this.dashboards[index];
+  }
+
+  getDashboardCount() {
+    return this.dashboards.length;
+  }
+
+  updateDashboard(dashboard: Dashboard) {
+    const index = this.dashboards.findIndex((d) => d.dashboardId === dashboard.dashboardId);
+    if (index >= 0) {
+      this.dashboards[index] = dashboard;
+      if (this.selectedDashboard?.dashboardId === dashboard.dashboardId) {
+        this.selectDashboardById(dashboard.dashboardId);
+      }
+    }
+  }
+
+  selectDashboardById = (dashboardId: any) => {
+    this.selectedDashboard =
+      this.dashboards.find((d) => d.dashboardId == dashboardId) || new Dashboard();
+  };
+
+  getDashboardById = (dashboardId: string) => {
+    const dashboard = this.dashboards.find((d) => d.dashboardId == dashboardId);
+
+    if (dashboard) {
+      this.selectedDashboard = dashboard;
+      return true;
+    } else {
+      this.selectedDashboard = null;
+      return false;
+    }
+  };
+
+  setSiteId = (siteId: any) => {
+    this.siteId = siteId;
+  };
+
+  fetchTemplates(hardRefresh: boolean): Promise<any> {
+    this.loadingTemplates = true;
+    return new Promise((resolve, reject) => {
+      if (this.widgetCategories.length > 0 && !hardRefresh) {
+        resolve(this.widgetCategories);
+      } else {
+        metricService
+          .getTemplates()
+          .then((response) => {
+            const categories: any[] = [];
+            response.forEach((category: any) => {
+              const widgets: any[] = [];
+              category.widgets.forEach((widget: any) => {
+                const w = new Widget().fromJson(widget);
+                widgets.push(w);
+              });
+              const c: any = {};
+              c.widgets = widgets;
+              c.name = category.category;
+              c.description = category.description;
+              categories.push(c);
+            });
+            this.widgetCategories = categories;
+            resolve(this.widgetCategories);
+          })
+          .catch((error) => {
+            reject(error);
+          })
+          .finally(() => {
+            this.loadingTemplates = false;
+          });
+      }
+    });
+  }
+
+  deleteDashboardWidget(dashboardId: string, widgetId: string) {
+    this.isDeleting = true;
+    return dashboardService
+      .deleteWidget(dashboardId, widgetId)
+      .then(() => {
+        toast.success('Dashboard updated successfully');
+        runInAction(() => {
+          this.selectedDashboard?.removeWidget(widgetId);
+        });
+      })
+      .finally(() => {
+        this.isDeleting = false;
+      });
+  }
+
+  addWidgetToDashboard(dashboard: Dashboard, metricIds: any): Promise<any> {
+    this.isSaving = true;
+    return dashboardService
+      .addWidget(dashboard, metricIds)
+      .then((response) => {
+        toast.success('Card added to dashboard.');
+      })
+      .catch(() => {
+        toast.error('Card could not be added.');
+      })
+      .finally(() => {
+        this.isSaving = false;
+      });
+  }
+
+  setPeriod(period: any) {
+    this.period = Period({
+      start: period.start,
+      end: period.end,
+      rangeName: period.rangeName,
+    });
+  }
+
+  setDrillDownPeriod(period: any) {
+    this.drillDownPeriod = Period({
+      start: period.start,
+      end: period.end,
+      rangeName: period.rangeName,
+    });
+  }
+
+  toggleAlertModal(val: boolean) {
+     this.showAlertModal = val
+  }
+
+  fetchMetricChartData(
+    metric: Widget,
+    data: any,
+    isWidget: boolean = false,
+    period: Record<string, any>
+  ): Promise<any> {
+    period = period.toTimestamps();
+    const params = { ...period, ...data, key: metric.predefinedKey };
+
+    if (metric.page && metric.limit) {
+      params['page'] = metric.page;
+      params['limit'] = metric.limit;
+    }
+
+    return new Promise((resolve, reject) => {
+      this.pendingRequests += 1;
+      return metricService
+        .getMetricChartData(metric, params, isWidget)
+        .then((data: any) => {
+          metric.setData(data, period);
+          resolve(metric.data);
+        })
+        .catch((err: any) => {
+          reject(err);
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.pendingRequests = this.pendingRequests - 1;
+          }, 100);
+        });
+    });
+  }
 }
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index 82d611ee1..af7050955 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -57,13 +57,14 @@ export default class MetricStore {
 
   get filteredCards() {
     const filterRE = this.filter.query ? getRE(this.filter.query, 'i') : null;
-    const dbIds = this.filter.dashboard ? this.filter.dashboard.map((i) => i.value) : [];
+    const dbIds = this.filter.dashboard ? this.filter.dashboard.map((i: any) => i.value) : [];
     return this.metrics
       .filter(
         (card) =>
           (this.filter.type === 'all' || card.metricType === this.filter.type) &&
           (!dbIds.length ||
             card.dashboards.map((i) => i.dashboardId).some((id) => dbIds.includes(id))) &&
+          // @ts-ignore
           (!filterRE || ['name', 'owner'].some((key) => filterRE.test(card[key])))
       )
       .sort((a, b) =>