Add alert when filling

sdss · Sep 17, 2024 · 30f06dd · 30f06dd
1 parent da2114d
commit 30f06dd
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/src/components/APITable/APITable.tsx b/src/components/APITable/APITable.tsx
@@ -7,6 +7,8 @@
 
 'use client';
 
+import React from 'react';
+import { IconAlertTriangle, IconReload, IconSettings } from '@tabler/icons-react';
 import {
   ActionIcon,
   Box,
@@ -18,8 +20,6 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core';
-import { IconAlertTriangle, IconReload, IconSettings } from '@tabler/icons-react';
-import React from 'react';
 import APIStatusText from './APIStatusText/APIStatusText';
 import classses from './APITable.module.css';
 
@@ -60,13 +60,15 @@ function RefreshData(props: { onClick: () => void }) {
 export default function APITable(props: {
   title: string;
   elements: Elements;
+  midsection?: React.ReactNode;
   noData?: boolean;
   icon?: JSX.Element;
   refreshData?: () => void;
 }) {
   const {
     title,
     elements,
+    midsection,
     noData = false,
     icon = <IconSettings />,
     refreshData,
@@ -149,7 +151,7 @@ export default function APITable(props: {
           <Title order={4} className={classses.title}>
             {title}
           </Title>
-          <Box style={{ flexGrow: 1 }} />
+          <Box style={{ flexGrow: 1, textAlign: 'center' }}>{midsection}</Box>
           {noData && <WarningIcon />}
           {refreshData && <RefreshData onClick={refreshData} />}
         </Group>

diff --git a/src/components/APITables/SpecTable/SpecTable.tsx b/src/components/APITables/SpecTable/SpecTable.tsx
@@ -7,11 +7,20 @@
 
 'use client';
 
+import React from 'react';
+import { IconPrismLight } from '@tabler/icons-react';
+import {
+  Box,
+  Divider,
+  Group,
+  Pill,
+  Progress,
+  Stack,
+  Text,
+  Transition,
+} from '@mantine/core';
 import { AlertsContext } from '@/src/components/LVMWebRoot/LVMWebRoot';
 import useAPICall from '@/src/hooks/use-api-call';
-import { Divider, Group, Pill, Progress, Stack, Text } from '@mantine/core';
-import { IconPrismLight } from '@tabler/icons-react';
-import React from 'react';
 import APIStatusText from '../../APITable/APIStatusText/APIStatusText';
 import APITable from '../../APITable/APITable';
 
@@ -190,9 +199,35 @@ function SpecProgress(props: SpecProgressProps) {
   );
 }
 
+function FillPill(props: { active: boolean }) {
+  const [opened, setOpened] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!props.active) {
+      return () => {};
+    }
+
+    const id = setInterval(() => setOpened((old) => !old), 1500);
+
+    return () => clearInterval(id);
+  }, [props.active]);
+
+  return (
+    <Transition mounted={opened} transition="fade" duration={500} timingFunction="ease">
+      {(styles) => (
+        <Box style={styles}>
+          <Pill bg="yellow.8" c="dark.6" size="lg">
+            Filling
+          </Pill>
+        </Box>
+      )}
+    </Transition>
+  );
+}
 export default function SpecTable() {
   const STATUS_INTERVAL = 5000;
   const TEMPS_INTERVAL = 60000;
+  const FILLING_INTERVAL = 3000;
 
   const alerts = React.useContext(AlertsContext);
 
@@ -206,6 +241,11 @@ export default function SpecTable() {
     { interval: TEMPS_INTERVAL }
   );
 
+  const [filling, , noDataFilling] = useAPICall<boolean>(
+    '/spectrographs/fills/running',
+    { interval: FILLING_INTERVAL }
+  );
+
   const noData = noDataSpec || noDataTemps;
 
   const refresh = React.useCallback(() => {
@@ -329,6 +369,7 @@ export default function SpecTable() {
   return (
     <APITable
       title="Spectrographs"
+      midsection={filling && !noDataFilling && <FillPill active={filling} />}
       elements={elements}
       noData={noData}
       icon={<IconPrismLight />}