Add LogViewer to modern UI

locustio · Oct 30, 2023 · 2c421ca · 2c421ca
1 parent 96bc1fb
commit 2c421ca
Show file tree

Hide file tree

Showing 6 changed files with 287 additions and 4 deletions.
diff --git a/locust/webui/dist/assets/index-b46361c2.js b/locust/webui/dist/assets/index-b46361c2.js
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-908b1e34.js"></script>
+    <script type="module" crossorigin src="/assets/index-b46361c2.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
@@ -0,0 +1,23 @@
+import { Box, Typography } from '@mui/material';
+
+import { SWARM_STATE } from 'constants/swarm';
+import useInterval from 'hooks/useInterval';
+import { useGetLogsQuery } from 'redux/api/swarm';
+import { useSelector } from 'redux/hooks';
+
+export default function LogViewer() {
+  const swarm = useSelector(({ swarm }) => swarm);
+  const { data, refetch: refetchLogs } = useGetLogsQuery();
+
+  useInterval(refetchLogs, 5000, { shouldRunInterval: swarm.state !== SWARM_STATE.STOPPED });
+
+  return (
+    <Box>
+      <Typography component='h2' variant='h4'>
+        Logs
+      </Typography>
+
+      <ul>{data && data.logs.map((log, index) => <li key={`log-${index}`}>{log}</li>)}</ul>
+    </Box>
+  );
+}
diff --git a/locust/webui/src/components/Tabs/Tabs.constants.tsx b/locust/webui/src/components/Tabs/Tabs.constants.tsx
@@ -1,5 +1,6 @@
 import ExceptionsTable from 'components/ExceptionsTable/ExceptionsTable';
 import FailuresTable from 'components/FailuresTable/FailuresTable';
+import LogViewer from 'components/LogViewer/LogViewer';
 import Reports from 'components/Reports/Reports';
 import StatsTable from 'components/StatsTable/StatsTable';
 import SwarmCharts from 'components/SwarmCharts/SwarmCharts';
@@ -38,6 +39,11 @@ export const baseTabs = [
     key: 'reports',
     title: 'Download Data',
   },
+  {
+    component: LogViewer,
+    key: 'log_viewer',
+    title: 'Logs',
+  },
 ];
 
 export const conditionalTabs = [

diff --git a/locust/webui/src/redux/api/swarm.ts b/locust/webui/src/redux/api/swarm.ts
@@ -1,6 +1,11 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
-import { IStatsResponse, ISwarmExceptionsResponse, ISwarmRatios } from 'types/ui.types';
+import {
+  IStatsResponse,
+  ISwarmExceptionsResponse,
+  ISwarmRatios,
+  ILogsResponse,
+} from 'types/ui.types';
 import { createFormData } from 'utils/object';
 import { camelCaseKeys, snakeCaseKeys } from 'utils/string';
 
@@ -19,6 +24,10 @@ export const api = createApi({
       query: () => 'exceptions',
       transformResponse: camelCaseKeys<ISwarmExceptionsResponse>,
     }),
+    getLogs: builder.query<ILogsResponse, void>({
+      query: () => 'logs',
+      transformResponse: camelCaseKeys<ILogsResponse>,
+    }),
 
     startSwarm: builder.mutation({
       query: body => ({
@@ -31,5 +40,10 @@ export const api = createApi({
   }),
 });
 
-export const { useGetStatsQuery, useGetTasksQuery, useGetExceptionsQuery, useStartSwarmMutation } =
-  api;
+export const {
+  useGetStatsQuery,
+  useGetTasksQuery,
+  useGetExceptionsQuery,
+  useGetLogsQuery,
+  useStartSwarmMutation,
+} = api;
diff --git a/locust/webui/src/types/ui.types.ts b/locust/webui/src/types/ui.types.ts
@@ -99,3 +99,7 @@ export interface IStatsResponse {
   currentResponseTimePercentile2: number | null;
   userCount: number;
 }
+
+export interface ILogsResponse {
+  logs: string[];
+}