Merge pull request #2542 from target/worker-loading-status

ui/worker: add loading status to worker
target · Aug 18, 2022 · d012eb4 · d012eb4
2 parents 400e593 + 48c1f84
commit d012eb4
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 14 deletions.
diff --git a/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx b/web/src/app/admin/admin-alert-counts/AdminAlertCounts.tsx
@@ -63,7 +63,11 @@ export default function AdminAlertCounts(): JSX.Element {
     () => ({ int: graphInterval, dur: graphDur, alerts: alertsData.alerts }),
     [graphInterval, graphDur, alertsData.alerts],
   )
-  const alertCounts = useWorker('useAdminAlertCounts', alertCountOpts, [])
+  const [alertCounts, alertCountStatus] = useWorker(
+    'useAdminAlertCounts',
+    alertCountOpts,
+    [],
+  )
 
   if (alertsData.error) {
     return <GenericError error={alertsData.error.message} />
@@ -85,7 +89,7 @@ export default function AdminAlertCounts(): JSX.Element {
           <CardContent>
             <AlertCountLineGraph
               data={graphData}
-              loading={alertsData.loading}
+              loading={alertCountStatus.loading || alertsData.loading}
               unit={unit}
             />
             <AlertCountTable
@@ -96,7 +100,7 @@ export default function AdminAlertCounts(): JSX.Element {
                 'yyyy-MM-dd',
               )}
               endTime={until.toFormat('yyyy-MM-dd')}
-              loading={alertsData.loading}
+              loading={alertCountStatus.loading || alertsData.loading}
             />
           </CardContent>
         </Card>

diff --git a/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx b/web/src/app/admin/admin-alert-counts/AlertCountLineGraph.tsx
@@ -175,6 +175,7 @@ export default function AlertCountLineGraph(
                 <Line
                   dataKey='dayTotal'
                   data={series.dailyCounts}
+                  strokeOpacity={props.loading ? 0.5 : 1}
                   strokeWidth={active === series.serviceName ? 4 : 1}
                   name={series.serviceName}
                   stroke={chooseColor(idx)}

diff --git a/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx b/web/src/app/admin/admin-alert-counts/AlertCountTable.tsx
@@ -95,7 +95,7 @@ export default function AlertCountTable(
     }),
     [props.alertCounts],
   )
-  const csvData = useWorker('useAlertCountCSV', csvOpts, '')
+  const [csvData] = useWorker('useAlertCountCSV', csvOpts, '')
   const link = useMemo(
     () => URL.createObjectURL(new Blob([csvData], { type: 'text/csv' })),
     [csvData],

diff --git a/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx b/web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
@@ -3,6 +3,7 @@ import { Grid, Paper, Typography } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles/makeStyles'
 import { Theme, useTheme } from '@mui/material/styles'
 import AutoSizer from 'react-virtualized-auto-sizer'
+import Spinner from '../../loading/components/Spinner'
 import {
   XAxis,
   YAxis,
@@ -16,7 +17,10 @@ import {
 
 interface CustomDotProps extends DotProps {
   dataKey: string
-  payload: { date: string }
+  payload: {
+    date: string
+    count: number
+  }
 }
 
 const CustomDot = (props: CustomDotProps): JSX.Element => {
@@ -26,7 +30,7 @@ const CustomDot = (props: CustomDotProps): JSX.Element => {
       cy={cy}
       cx={cx}
       fill={fill}
-      r={r}
+      r={payload.count ? r : 0}
       stroke={stroke}
       strokeWidth={strokeWidth}
       key={dataKey + '-' + payload.date}
@@ -37,6 +41,7 @@ const CustomDot = (props: CustomDotProps): JSX.Element => {
 
 interface AlertAveragesGraphProps {
   data: typeof LineChart.defaultProps['data']
+  loading: boolean
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -59,6 +64,7 @@ export default function AlertAveragesGraph(
   return (
     <Grid container className={classes.graphContent}>
       <Grid item xs={12} data-cy='metrics-averages-graph'>
+        {props.loading && <Spinner />}
         <AutoSizer>
           {({ width, height }) => (
             <LineChart
@@ -112,6 +118,7 @@ export default function AlertAveragesGraph(
               <Line
                 type='monotone'
                 dataKey='avgTimeToAck'
+                strokeOpacity={props.loading ? 0.5 : 1}
                 strokeWidth={2}
                 stroke={theme.palette.primary.main}
                 activeDot={{ r: 8 }}
@@ -124,6 +131,7 @@ export default function AlertAveragesGraph(
                 strokeWidth={2}
                 dataKey='avgTimeToClose'
                 isAnimationActive={false}
+                strokeOpacity={props.loading ? 0.5 : 1}
                 stroke={
                   theme.palette.mode === 'light'
                     ? theme.palette.secondary.dark

diff --git a/web/src/app/services/AlertMetrics/AlertCountGraph.tsx b/web/src/app/services/AlertMetrics/AlertCountGraph.tsx
@@ -3,6 +3,7 @@ import { Grid, Paper, Typography } from '@mui/material'
 import makeStyles from '@mui/styles/makeStyles/makeStyles'
 import { Theme, useTheme } from '@mui/material/styles'
 import AutoSizer from 'react-virtualized-auto-sizer'
+import Spinner from '../../loading/components/Spinner'
 import {
   XAxis,
   YAxis,
@@ -15,6 +16,7 @@ import {
 
 interface AlertCountGraphProps {
   data: typeof BarChart.defaultProps['data']
+  loading: boolean
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -37,6 +39,7 @@ export default function AlertCountGraph(
   return (
     <Grid container className={classes.graphContent}>
       <Grid item xs={12} data-cy='metrics-count-graph'>
+        {props.loading && <Spinner />}
         <AutoSizer>
           {({ width, height }) => (
             <BarChart
@@ -89,13 +92,15 @@ export default function AlertCountGraph(
               <Bar
                 dataKey='escalatedCount'
                 stackId='a'
+                fillOpacity={props.loading ? 0.5 : 1}
                 fill={theme.palette.primary.main}
                 className={classes.bar}
                 name='Escalated'
               />
               <Bar
                 stackId='a'
                 dataKey='nonEscalatedCount'
+                fillOpacity={props.loading ? 0.5 : 1}
                 fill={
                   theme.palette.mode === 'light'
                     ? theme.palette.secondary.dark

diff --git a/web/src/app/services/AlertMetrics/AlertMetrics.tsx b/web/src/app/services/AlertMetrics/AlertMetrics.tsx
@@ -58,7 +58,11 @@ export default function AlertMetrics({
     [graphInterval, graphDur, alertsData.alerts],
   )
 
-  const graphData = useWorker('useAlertMetrics', metricsOpts, [])
+  const [graphData, graphDataStatus] = useWorker(
+    'useAlertMetrics',
+    metricsOpts,
+    [],
+  )
 
   if (svc.fetching) return <Spinner />
   if (!svc.data?.service?.name) return <ObjectNotFound />
@@ -79,14 +83,20 @@ export default function AlertMetrics({
           />
           <CardContent>
             <AlertMetricsFilter />
-            <AlertCountGraph data={graphData} />
-            <AlertAveragesGraph data={graphData} />
+            <AlertCountGraph
+              data={graphData}
+              loading={graphDataStatus.loading || alertsData.loading}
+            />
+            <AlertAveragesGraph
+              data={graphData}
+              loading={graphDataStatus.loading || alertsData.loading}
+            />
             <AlertMetricsTable
               alerts={alertsData.alerts}
               serviceName={svc.data.service.name}
               startTime={since.toFormat('yyyy-MM-dd')}
               endTime={until.toFormat('yyyy-MM-dd')}
-              loading={alertsData.loading}
+              loading={graphDataStatus.loading || alertsData.loading}
             />
           </CardContent>
         </Card>

diff --git a/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx b/web/src/app/services/AlertMetrics/AlertMetricsTable.tsx
@@ -140,7 +140,7 @@ export default function AlertMetricsTable(
     }),
     [props.alerts],
   )
-  const csvData = useWorker('useAlertCSV', csvOpts, '')
+  const [csvData] = useWorker('useAlertCSV', csvOpts, '')
   const link = useMemo(
     () => URL.createObjectURL(new Blob([csvData], { type: 'text/csv' })),
     [csvData],

diff --git a/web/src/app/worker/index.ts b/web/src/app/worker/index.ts
@@ -3,6 +3,7 @@ import { pathPrefix } from '../env'
 import methods, {
   WorkerMethod,
   WorkerMethodName,
+  WorkerReturnType,
   WorkerParam,
   WorkerResult,
 } from './methods'
@@ -61,6 +62,7 @@ class Runner<N extends WorkerMethodName> {
   private next: NextRun<N> | null = null
   private onChange: ChangeCallback<N>
   private isBusy = false
+  private loading = true
 
   private _initWorker = (): Worker | StubWorker<N> => {
     const w = window.Worker
@@ -77,7 +79,10 @@ class Runner<N extends WorkerMethodName> {
   }
 
   private _send = (): void => {
-    if (!this.next) return
+    if (!this.next) {
+      this.loading = false
+      return
+    }
     if (!this.worker) {
       this.worker = this._initWorker()
     }
@@ -89,6 +94,7 @@ class Runner<N extends WorkerMethodName> {
 
   run = (arg: WorkerParam<N>): void => {
     this.next = { arg }
+    this.loading = true
     this._send()
   }
 
@@ -97,13 +103,17 @@ class Runner<N extends WorkerMethodName> {
     this.worker.terminate()
     this.worker = null
   }
+
+  isLoading = (): boolean => {
+    return this.loading
+  }
 }
 
 export function useWorker<N extends WorkerMethodName>(
   methodName: N,
   arg: WorkerParam<N>,
   def: WorkerResult<N>,
-): WorkerResult<N> {
+): WorkerReturnType<N> {
   if (!(methodName in methods)) {
     throw new Error(`method must be a valid method from app/worker/methods.ts`)
   }
@@ -122,5 +132,7 @@ export function useWorker<N extends WorkerMethodName>(
     worker.run(arg)
   }, [worker, arg])
 
-  return result
+  const loadingStatus = worker?.isLoading() || false
+
+  return [result, { loading: loadingStatus }]
 }
diff --git a/web/src/app/worker/methods.ts b/web/src/app/worker/methods.ts
@@ -16,6 +16,10 @@ export type WorkerMethod<N extends WorkerMethodName> = typeof methods[N]
 export type WorkerResult<N extends WorkerMethodName> = ReturnType<
   WorkerMethod<N>
 >
+export type WorkerReturnType<N extends WorkerMethodName> = [
+  result: WorkerResult<N>,
+  status: { loading: boolean },
+]
 export type WorkerParam<N extends WorkerMethodName> = Parameters<
   WorkerMethod<N>
 >[0]