feat: Better visibility for dashboard alerts

hyperdxio · Feb 19, 2024 · 74b868a · 74b868a
1 parent 9bb5c80
commit 74b868a
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 15 deletions.
diff --git a/packages/app/src/DashboardPage.tsx b/packages/app/src/DashboardPage.tsx
@@ -10,6 +10,7 @@ import {
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import cx from 'classnames';
 import produce from 'immer';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -30,6 +31,7 @@ import {
   CopyButton,
   Flex,
   Group,
+  Indicator,
   Paper,
   Popover,
   ScrollArea,
@@ -87,6 +89,7 @@ const Tile = forwardRef(
       dateRange,
       onDuplicateClick,
       onEditClick,
+      onAddAlertClick,
       onDeleteClick,
       query,
       queued,
@@ -107,6 +110,7 @@ const Tile = forwardRef(
       dateRange: [Date, Date];
       onDuplicateClick: () => void;
       onEditClick: () => void;
+      onAddAlertClick?: () => void;
       onDeleteClick: () => void;
       query: string;
       onSettled?: () => void;
@@ -232,22 +236,38 @@ const Tile = forwardRef(
           <div className="fs-7 text-muted">{chart.name}</div>
           <i className="bi bi-grip-horizontal text-muted" />
           <div className="fs-7 text-muted d-flex gap-2 align-items-center">
-            {alert && (
-              <Link href="/alerts" legacyBehavior>
+            {config.type === 'time' &&
+              (alert ? (
+                <Link href="/alerts" legacyBehavior>
+                  <div className="rounded px-1 text-muted-hover cursor-pointer">
+                    <Indicator
+                      zIndex={1}
+                      size={alert?.state === 'OK' ? 6 : 8}
+                      processing={alert?.state === 'ALERT'}
+                      color={alert?.state === 'OK' ? 'green' : 'red'}
+                    >
+                      <i
+                        className="bi bi-bell"
+                        title={`Has alert and is in ${alert.state} state`}
+                      />
+                    </Indicator>
+                  </div>
+                </Link>
+              ) : (
                 <div
-                  className={`rounded px-1 text-muted cursor-pointer ${
-                    alert.state === 'ALERT'
-                      ? 'bg-danger effect-pulse'
-                      : 'bg-grey opacity-90'
-                  }`}
+                  role="button"
+                  className="rounded px-1 cursor-pointer text-muted-hover"
+                  onClick={onAddAlertClick}
                 >
-                  <i
-                    className="bi bi-bell text-white"
-                    title={`Has alert and is in ${alert.state} state`}
-                  />
+                  <Indicator
+                    zIndex={1}
+                    label={<span className="text-slate-400 fs-7">+</span>}
+                    color="transparent"
+                  >
+                    <i className="bi bi-bell" title="Add alert" />
+                  </Indicator>
                 </div>
-              </Link>
-            )}
+              ))}
 
             <Button
               variant="link"
@@ -333,6 +353,7 @@ const Tile = forwardRef(
 
 const EditTileModal = ({
   isLocalDashboard,
+  isAddingAlert,
   chart,
   alerts,
   dateRange,
@@ -342,6 +363,7 @@ const EditTileModal = ({
   dashboardQuery,
 }: {
   isLocalDashboard: boolean;
+  isAddingAlert?: boolean;
   chart: Chart | undefined;
   alerts: Alert[];
   dateRange: [Date, Date];
@@ -366,6 +388,7 @@ const EditTileModal = ({
         >
           <EditTileForm
             isLocalDashboard={isLocalDashboard}
+            isAddingAlert={isAddingAlert}
             chart={chart}
             alerts={alerts}
             onSave={onSave}
@@ -644,6 +667,13 @@ export default function DashboardPage() {
     [dashboard?.alerts, editedChart?.id],
   );
 
+  const [isAddingAlert, setIsAddingAlert] = useState(false);
+  useEffect(() => {
+    if (editedChart == null) {
+      setIsAddingAlert(false);
+    }
+  }, [editedChart]);
+
   const { searchedTimeRange, displayedTimeInputValue, onSearch } =
     useNewTimeQuery({
       isUTC: false,
@@ -697,6 +727,10 @@ export default function DashboardPage() {
             chart={chart}
             dateRange={searchedTimeRange}
             onEditClick={() => setEditedChart(chart)}
+            onAddAlertClick={() => {
+              setIsAddingAlert(true);
+              setEditedChart(chart);
+            }}
             granularity={granularityQuery}
             alert={dashboard?.alerts?.find(a => a.chartId === chart.id)}
             isHighlighed={highlightedChartId === chart.id}
@@ -845,6 +879,7 @@ export default function DashboardPage() {
       {dashboard != null ? (
         <EditTileModal
           isLocalDashboard={isLocalDashboard}
+          isAddingAlert={isAddingAlert}
           dateRange={searchedTimeRange}
           key={editedChart?.id}
           chart={editedChart}

diff --git a/packages/app/src/EditChartForm.tsx b/packages/app/src/EditChartForm.tsx
@@ -1272,6 +1272,7 @@ export const EditMultiSeriesChartForm = ({
 
 export const EditLineChartForm = ({
   isLocalDashboard,
+  isAddingAlert,
   chart,
   alerts,
   onClose,
@@ -1287,6 +1288,7 @@ export const EditLineChartForm = ({
   dashboardQuery,
 }: {
   isLocalDashboard: boolean;
+  isAddingAlert?: boolean;
   chart: Chart | undefined;
   alerts?: Alert[];
   dateRange: [Date, Date];
@@ -1307,7 +1309,9 @@ export const EditLineChartForm = ({
     chart,
   );
   const [editedAlert, setEditedAlert] = useState<Alert | undefined>(alert);
-  const [alertEnabled, setAlertEnabled] = useState(editedAlert != null);
+  const [alertEnabled, setAlertEnabled] = useState(
+    editedAlert != null || !!isAddingAlert,
+  );
 
   const [_editedChart, _setEditedChart] =
     editedChart != null && setEditedChart != null
@@ -1390,7 +1394,14 @@ export const EditLineChartForm = ({
       />
 
       {isChartAlertsFeatureEnabled && (
-        <Paper bg="dark.7" p="md" py="xs" mt="md" withBorder>
+        <Paper
+          bg="dark.7"
+          p="md"
+          py="xs"
+          mt="md"
+          withBorder
+          style={isAddingAlert ? { borderWidth: 3 } : undefined}
+        >
           {isLocalDashboard ? (
             <span className="text-gray-600 fs-8">
               Alerts are not available in unsaved dashboards.

diff --git a/packages/app/src/EditTileForm.tsx b/packages/app/src/EditTileForm.tsx
@@ -18,6 +18,7 @@ import type { Alert, Chart, Dashboard } from './types';
 
 const EditTileForm = ({
   isLocalDashboard,
+  isAddingAlert,
   chart,
   alerts,
   dateRange,
@@ -36,6 +37,7 @@ const EditTileForm = ({
   dashboardQuery,
 }: {
   isLocalDashboard: boolean;
+  isAddingAlert?: boolean;
   chart: Chart | undefined;
   alerts?: Alert[];
   dateRange: [Date, Date];
@@ -160,6 +162,7 @@ const EditTileForm = ({
       {displayedTab === 'time' && chart != null && (
         <EditLineChartForm
           isLocalDashboard={isLocalDashboard}
+          isAddingAlert={isAddingAlert}
           chart={produce(chart, draft => {
             for (const series of draft.series) {
               series.type = 'time';