feat: Filter alerts by tag

hyperdxio · Jan 22, 2024 · b9bf8bf · b9bf8bf
1 parent 306e42c
commit b9bf8bf
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 3 deletions.
diff --git a/packages/api/src/routers/api/alerts.ts b/packages/api/src/routers/api/alerts.ts
@@ -79,7 +79,12 @@ router.get('/', async (req, res, next) => {
               charts: alert.dashboardId.charts
                 .filter(chart => chart.id === alert.chartId)
                 .map(chart => _.pick(chart, ['id', 'name'])),
-              ..._.pick(alert.dashboardId, ['_id', 'name', 'updatedAt']),
+              ..._.pick(alert.dashboardId, [
+                '_id',
+                'name',
+                'updatedAt',
+                'tags',
+              ]),
             },
           }),
           ...(alert.logView && {
@@ -88,6 +93,7 @@ router.get('/', async (req, res, next) => {
               'createdAt',
               'name',
               'updatedAt',
+              'tags',
             ]),
           }),
           ..._.pick(alert, [

diff --git a/packages/app/src/AlertsPage.tsx b/packages/app/src/AlertsPage.tsx
@@ -3,6 +3,11 @@ import Head from 'next/head';
 import Link from 'next/link';
 import cx from 'classnames';
 import { formatRelative } from 'date-fns';
+import {
+  DelimitedArrayParam,
+  useQueryParam,
+  withDefault,
+} from 'use-query-params';
 import {
   Alert as MAlert,
   Badge,
@@ -16,6 +21,7 @@ import {
 
 import api from './api';
 import { withAppNav } from './layout';
+import { Tags } from './Tags';
 import type { Alert, AlertHistory, LogView } from './types';
 import { AlertState } from './types';
 
@@ -27,6 +33,7 @@ type AlertData = Alert & {
     _id: string;
     name: string;
     charts: { id: string; name: string }[];
+    tags?: string[];
   };
   logView?: LogView;
 };
@@ -203,6 +210,7 @@ function AlertCardList({ alerts }: { alerts: AlertData[] }) {
       alert.state === AlertState.DISABLED ||
       alert.state === AlertState.INSUFFICIENT_DATA,
   );
+
   return (
     <div className="d-flex flex-column gap-4">
       {alarmAlerts.length > 0 && (
@@ -247,10 +255,31 @@ function AlertCardList({ alerts }: { alerts: AlertData[] }) {
 
 export default function AlertsPage() {
   const { data, isError, isLoading } = api.useAlerts();
-  const alerts = data?.data;
+  const alerts = React.useMemo(
+    () => (data?.data || []) as AlertData[],
+    [data?.data],
+  );
 
   // TODO: Error and loading states
 
+  const [_tags, setTags] = useQueryParam(
+    'tags',
+    withDefault(DelimitedArrayParam, [] as (string | null)[]),
+    { updateType: 'replaceIn' },
+  );
+  const tags = React.useMemo(() => _tags.filter(Boolean) as string[], [_tags]);
+
+  const filteredAlerts = React.useMemo(() => {
+    if (!tags.length) {
+      return alerts;
+    }
+    return alerts.filter(alert =>
+      [...(alert.dashboard?.tags || []), ...(alert.logView?.tags || [])].some(
+        tag => tags.includes(tag),
+      ),
+    );
+  }, [tags, alerts]);
+
   return (
     <div className="AlertsPage">
       <Head>
@@ -280,7 +309,44 @@ export default function AlertsPage() {
           ) : isError ? (
             <div className="text-center text-slate-400 my-4 fs-8">Error</div>
           ) : alerts?.length ? (
-            <AlertCardList alerts={alerts} />
+            <>
+              <Button.Group mt="xl">
+                <Tags values={tags} onChange={setTags}>
+                  <Button
+                    size="xs"
+                    variant="default"
+                    leftIcon={
+                      <i
+                        className={cx(
+                          'bi bi-funnel-fill',
+                          tags.length ? 'text-success' : 'text-slate-400',
+                        )}
+                      />
+                    }
+                  >
+                    {tags.length ? (
+                      <>
+                        <span className="text-slate-400 me-1">Tags </span>
+                        {tags?.join(', ')}
+                      </>
+                    ) : (
+                      <span className="text-slate-400">Filter by Tags</span>
+                    )}
+                  </Button>
+                </Tags>
+                {tags.length > 0 && (
+                  <Button
+                    size="xs"
+                    variant="default"
+                    onClick={() => setTags([])}
+                    px="xs"
+                  >
+                    <i className="bi bi-x-lg" />
+                  </Button>
+                )}
+              </Button.Group>
+              <AlertCardList alerts={filteredAlerts} />
+            </>
           ) : (
             <div className="text-center text-slate-400 my-4 fs-8">
               No alerts created yet