Add notifications for workers

locustio · Jun 7, 2024 · 0a83954 · 0a83954
1 parent 81fc9dc
commit 0a83954
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 72 deletions.
diff --git a/locust/webui/dist/assets/index-251901e1.js → locust/webui/dist/assets/index-84c63e70.js b/locust/webui/dist/assets/index-251901e1.js → locust/webui/dist/assets/index-84c63e70.js
diff --git a/locust/webui/dist/auth.html b/locust/webui/dist/auth.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <title>Locust</title>
-    <script type="module" crossorigin src="./assets/index-251901e1.js"></script>
+    <script type="module" crossorigin src="./assets/index-84c63e70.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/locust/webui/dist/index.html b/locust/webui/dist/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <title>Locust</title>
-    <script type="module" crossorigin src="./assets/index-251901e1.js"></script>
+    <script type="module" crossorigin src="./assets/index-84c63e70.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/locust/webui/src/components/LogViewer/LogViewer.tsx b/locust/webui/src/components/LogViewer/LogViewer.tsx
@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
 import {
   Accordion,
   AccordionDetails,
@@ -9,6 +11,7 @@ import {
 } from '@mui/material';
 import { red, amber, blue } from '@mui/material/colors';
 
+import { isImportantLog } from 'components/LogViewer/logUtils';
 import { useSelector } from 'redux/hooks';
 import { objectLength } from 'utils/object';
 
@@ -36,6 +39,32 @@ function LogDisplay({ log }: { log: string }) {
   );
 }
 
+function WorkerLogs({ workerId, logs }: { workerId: string; logs: string[] }) {
+  const [hasImportantLog, setHasImportantLog] = useState(false);
+
+  useEffect(() => {
+    if (logs.some(isImportantLog)) {
+      setHasImportantLog(true);
+    }
+  }, [logs]);
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} onClick={() => setHasImportantLog(false)}>
+        {hasImportantLog && <PriorityHighIcon color='secondary' />}
+        {workerId}
+      </AccordionSummary>
+      <AccordionDetails>
+        <Paper elevation={3} sx={{ p: 2 }}>
+          {logs.map((log, index) => (
+            <LogDisplay key={`worker-${workerId}-log-${index}`} log={log} />
+          ))}
+        </Paper>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
 export default function LogViewer() {
   const { master: masterLogs, workers: workerLogs } = useSelector(({ logViewer }) => logViewer);
 
@@ -57,16 +86,7 @@ export default function LogViewer() {
             Worker Logs
           </Typography>
           {Object.entries(workerLogs).map(([workerId, logs], index) => (
-            <Accordion key={`worker-log-${index}`}>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>{workerId}</AccordionSummary>
-              <AccordionDetails>
-                <Paper elevation={3} sx={{ p: 2 }}>
-                  {logs.map((log, index) => (
-                    <LogDisplay key={`worker-${workerId}-log-${index}`} log={log} />
-                  ))}
-                </Paper>
-              </AccordionDetails>
-            </Accordion>
+            <WorkerLogs key={`worker-log-${index}`} logs={logs} workerId={workerId} />
           ))}
         </Box>
       )}

diff --git a/locust/webui/src/components/LogViewer/logUtils.tsx b/locust/webui/src/components/LogViewer/logUtils.tsx
@@ -0,0 +1,2 @@
+export const isImportantLog = (log: string) =>
+  log.includes('WARNING') || log.includes('ERROR') || log.includes('CRITICAL');
diff --git a/locust/webui/src/components/LogViewer/useLogViewer.ts b/locust/webui/src/components/LogViewer/useLogViewer.ts
@@ -1,14 +1,14 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
+import { isImportantLog } from 'components/LogViewer/logUtils';
+import { LOG_VIEWER_KEY } from 'constants/logs';
 import { SWARM_STATE } from 'constants/swarm';
 import useInterval from 'hooks/useInterval';
 import useNotifications from 'hooks/useNotifications';
 import { useGetLogsQuery } from 'redux/api/swarm';
 import { useAction, useSelector } from 'redux/hooks';
 import { logViewerActions } from 'redux/slice/logViewer.slice';
-
-const isImportantLog = (log: string) =>
-  log.includes('WARNING') || log.includes('ERROR') || log.includes('CRITICAL');
+import { flatten } from 'utils/array';
 
 export default function useLogViewer() {
   const swarm = useSelector(({ swarm }) => swarm);
@@ -17,15 +17,21 @@ export default function useLogViewer() {
 
   const logs = data || { master: [], workers: {} };
 
+  const workerLogs = useMemo(() => flatten<string>(Object.values(logs.workers)), [logs.workers]);
+  const allLogs = [...logs.master, ...workerLogs];
+
   const shouldNotifyLogsUpdate = useCallback(
-    () => logs.master.slice(localStorage['logViewer']).some(isImportantLog),
+    () => allLogs.slice(localStorage['logViewer']).some(isImportantLog),
     [logs],
   );
 
   useInterval(refetchLogs, 5000, {
     shouldRunInterval: swarm.state === SWARM_STATE.SPAWNING || swarm.state == SWARM_STATE.RUNNING,
   });
-  useNotifications(logs.master, { key: 'logViewer', shouldNotify: shouldNotifyLogsUpdate });
+  useNotifications(allLogs, {
+    key: LOG_VIEWER_KEY,
+    shouldNotify: shouldNotifyLogsUpdate,
+  });
 
   useEffect(() => {
     setLogs(logs);

diff --git a/locust/webui/src/components/Tabs/Tabs.constants.tsx b/locust/webui/src/components/Tabs/Tabs.constants.tsx
@@ -6,6 +6,7 @@ import StatsTable from 'components/StatsTable/StatsTable';
 import SwarmCharts from 'components/SwarmCharts/SwarmCharts';
 import SwarmRatios from 'components/SwarmRatios/SwarmRatios';
 import WorkersTable from 'components/WorkersTable/WorkersTable';
+import { LOG_VIEWER_KEY } from 'constants/logs';
 import { IRootState } from 'redux/store';
 
 export const baseTabs = [
@@ -41,7 +42,7 @@ export const baseTabs = [
   },
   {
     component: LogViewer,
-    key: 'logViewer',
+    key: LOG_VIEWER_KEY,
     title: 'Logs',
   },
 ];

diff --git a/locust/webui/src/constants/logs.ts b/locust/webui/src/constants/logs.ts
@@ -0,0 +1 @@
+export const LOG_VIEWER_KEY = 'logViewer';
diff --git a/locust/webui/src/utils/array.ts b/locust/webui/src/utils/array.ts
@@ -0,0 +1,5 @@
+export const flatten = <T>(array: any[]): T[] =>
+  array.reduce(
+    (flat, toFlatten) => flat.concat(Array.isArray(toFlatten) ? flatten<T>(toFlatten) : toFlatten),
+    [] as T[],
+  );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const isImportantLog = (log: string) =>
		log.includes('WARNING') \|\| log.includes('ERROR') \|\| log.includes('CRITICAL');