ui: metrics filtering checks

frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx

@@ -4,7 +4,7 @@ import { Button, Popover, Space, Dropdown, Menu } from 'antd';
 import { PlusOutlined, DownOutlined } from '@ant-design/icons';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-import { DROPDOWN_OPTIONS } from 'App/constants/card';
+import { DROPDOWN_OPTIONS, CATEGORIES } from 'App/constants/card';
 import MetricsSearch from '../MetricsSearch';
 import AddCardSection from '../AddCardSection/AddCardSection';
 import { TFunction } from 'i18next';
@@ -20,11 +20,11 @@ const options = (t: TFunction) => [
     label: option.label,
   })),
   {
-    key: 'monitors',
+    key: CATEGORIES.monitors,
     label: t('Monitors'),
   },
   {
-    key: 'web_analytics',
+    key: CATEGORIES.web_analytics,
     label: t('Web Analytics'),
   },
 ];

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

@@ -1,8 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useMemo, useState } from 'react';
-import { NoContent, Loader, Pagination } from 'UI';
+import { NoContent } from 'UI';
 import { useStore } from 'App/mstore';
-import { sliceListPerPage } from 'App/utils';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { Popover, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
@@ -11,10 +10,10 @@ import AddCardSection from '../AddCardSection/AddCardSection';
 import { useTranslation } from 'react-i18next';
 
 function MetricsList({
-                       siteId,
-                       onSelectionChange,
-                       inLibrary
-                     }: {
+    siteId,
+    onSelectionChange,
+    inLibrary
+  }: {
   siteId: string;
   onSelectionChange?: (selected: any[]) => void;
   inLibrary?: boolean;
@@ -67,7 +66,6 @@ function MetricsList({
     metricStore.updateKey('sessionsPage', 1);
   }, [metricStore]);
 
-
   const isFiltered = metricStore.filter.query !== '' || metricStore.filter.type !== '';
 
   const searchImageDimensions = { width: 60, height: 'auto' };
@@ -76,7 +74,6 @@ function MetricsList({
   const imageDimensions = isFiltered
     ? searchImageDimensions
     : defaultImageDimensions;
-
   return (
     <NoContent
       show={!loading && length === 0}

frontend/app/mstore/metricStore.ts

@@ -18,7 +18,7 @@ import { FilterKey } from 'Types/filter/filterType';
 import { ErrorInfo } from './types/error';
 import Widget from './types/widget';
 
-const handleFilter = (card: Widget, filterType?: string) => {
+const handleTypeFilter = (card: Widget, filterType?: string) => {
   const { metricType } = card;
   if (filterType === 'all' || !filterType || !metricType) {
     return true;
@@ -121,10 +121,9 @@ export default class MetricStore {
       .filter(
         (card) =>
           (this.filter.showMine
-            ? card.owner ===
-            JSON.parse(localStorage.getItem('user')!).account.email
+            ? card.owner === JSON.parse(localStorage.getItem('user')!).account.email
             : true) &&
-          handleFilter(card, this.filter.type) &&
+          handleTypeFilter(card, this.filter.type) &&
           (!dbIds.length ||
             card.dashboards
               .map((i) => i.dashboardId)