locustio · cyberw · Aug 9, 2024 · Aug 8, 2024 · Aug 8, 2024 · Aug 8, 2024
diff --git a/locust/webui/index.html b/locust/webui/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="./assets/favicon.ico" />
+    <link rel="icon" href="./assets/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 

diff --git a/locust/webui/public/assets/favicon.ico b/locust/webui/public/assets/favicon.ico
diff --git a/locust/webui/public/assets/favicon.png b/locust/webui/public/assets/favicon.png
diff --git a/locust/webui/src/assets/Logo.tsx b/locust/webui/src/assets/Logo.tsx
@@ -0,0 +1,49 @@
+export default function Logo({
+  isDarkMode,
+  lightModeBackgroundColor = '#15803d',
+}: {
+  isDarkMode: boolean;
+  lightModeBackgroundColor?: string;
+}) {
+  return (
+    <svg
+      aria-label='Locust'
+      fill='none'
+      height='35'
+      role='img'
+      viewBox='0 0 183 35'
+      width='183'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        clip-rule='evenodd'
+        d='M36.6942 18.9754L48.9434 6.62621L47.341 5.01205L35.0918 17.3612L36.6942 18.9754Z'
+        fill='#B8EE4B'
+        fill-rule='evenodd'
+      />
+      <path
+        clip-rule='evenodd'
+        d='M40.954 20.093L53.0301 8.01687L51.4159 6.40271L39.3398 18.4788L40.954 20.093Z'
+        fill='#B8EE4B'
+        fillRule='evenodd'
+      />
+      <path
+        clip-rule='evenodd'
+        d='M0 28.1761L39.9453 9.82391L43.7047 9.82392L47.4641 13.5833V19.9629L43.819 23.608L39.2012 18.9279L38.0252 20.0882L47.7932 29.988H41.7525L35.4796 23.7151L20.9615 29.988H0V28.1761Z'
+        fill='#B8EE4B'
+        fillRule='evenodd'
+      />
+      <rect fill='#B8EE4B' height='7.15246' width='2.45866' x='37.2148' y='17.4108' />
+      <path
+        d='M11.279 5.80442L10.9321 5.97319L10.8347 6.34649L4.72023 29.7764L4.44626 30.8262H5.53125H6.94682H10.2332H10.8805L11.0442 30.1999L15.3834 13.5938L32.3703 30.5807L32.6158 30.8262H32.963H39.4073H41.4309L40 29.3953L15.1525 4.54779L14.7302 4.12549L14.1931 4.38675L11.279 5.80442Z'
+        fill='#B8EE4B'
+        stroke={isDarkMode ? '#0B2406' : lightModeBackgroundColor}
+        strokeWidth='1.67636'
+      />
+      <path
+        d='M64.0015 30V11.009H68.5005V26.2244H79.4429V30H64.0015ZM90.4052 30.633C84.2105 30.633 79.9827 26.4731 79.9827 20.5045C79.9827 14.5359 84.2105 10.376 90.4052 10.376C96.6225 10.376 100.85 14.5359 100.85 20.5045C100.85 26.4731 96.6225 30.633 90.4052 30.633ZM90.4052 26.7218C93.7964 26.7218 96.3738 24.2349 96.3738 20.5045C96.3738 16.7741 93.7964 14.2872 90.4052 14.2872C87.0365 14.2872 84.4366 16.7741 84.4366 20.5045C84.4366 24.2349 87.0365 26.7218 90.4052 26.7218ZM112.638 30.633C106.488 30.633 102.238 26.4731 102.238 20.5045C102.238 14.5359 106.488 10.376 112.638 10.376C116.798 10.376 121.071 12.2298 121.997 17.8141H117.679C116.865 15.3724 114.989 14.2872 112.638 14.2872C109.269 14.2872 106.692 16.842 106.692 20.5045C106.692 24.1444 109.269 26.7218 112.638 26.7218C114.989 26.7218 116.865 25.6366 117.679 23.1723H121.997C121.071 28.7791 116.843 30.633 112.638 30.633ZM132.77 30.633C126.914 30.633 123.613 27.8748 123.613 22.0871V11.009H128.158V21.974C128.158 25.0036 129.672 26.8348 132.77 26.8348C135.867 26.8348 137.404 25.0036 137.404 21.974V11.009H141.926V22.0871C141.926 27.8748 138.625 30.633 132.77 30.633ZM152.22 30.633C146.432 30.633 143.38 28.5757 143.403 24.1218H147.472C147.63 25.9079 149.1 27.0383 152.22 27.0609C155.159 27.0609 156.764 26.0661 156.764 24.574C156.764 23.2627 155.702 22.6071 153.441 22.2227L151.089 21.8158C147.495 21.1827 143.923 20.2332 143.923 16.0959C143.923 12.5011 146.952 10.376 152.265 10.376C157.216 10.376 160.653 12.1168 160.698 16.8193H156.651C156.357 15.1011 155.023 13.9481 152.175 13.9481C149.597 13.9481 148.241 14.8298 148.241 16.2994C148.241 17.4524 149.168 18.1758 151.112 18.5376L153.169 18.8993C156.787 19.5549 161.241 20.1654 161.241 24.7096C161.241 28.4852 158.143 30.633 152.22 30.633ZM180.394 11.009V14.7846H173.272V30H168.751V14.7846H161.652V11.009H180.394Z'
+        fill='currentcolor'
+      />
+    </svg>
+  );
+}
diff --git a/locust/webui/src/assets/logo.png b/locust/webui/src/assets/logo.png
diff --git a/locust/webui/src/components/Layout/Footer/About.tsx b/locust/webui/src/components/Layout/Footer/About.tsx
@@ -22,23 +22,29 @@ export default function About() {
           </Typography>
           <Typography component='p' variant='subtitle1'>
             Locust is free and open source software released under the{' '}
-            <Link href={`https://github.com/locustio/locust/blob/master/LICENSE`}>MIT License</Link>
+            <Link href='https://github.com/locustio/locust/blob/master/LICENSE'>MIT License</Link>
           </Typography>
           <Typography component='p' sx={{ mt: 2 }} variant='subtitle1'>
             It was originally developed by Carl Byström and{' '}
-            <Link href={`https://twitter.com/jonatanheyman/`}>Jonatan Heyman</Link>. Since 2019, it
-            is primarily maintained by <Link href={`https://github.com/cyberw`}>Lars Holmberg</Link>
-            .
+            <Link href='https://twitter.com/jonatanheyman'>Jonatan Heyman</Link>. Since 2019, it is
+            primarily maintained by <Link href='https://github.com/cyberw'>Lars Holmberg</Link>.
           </Typography>
           <Typography component='p' sx={{ mt: 2 }} variant='subtitle1'>
             Many thanks to all our wonderful{' '}
-            <Link href={`https://github.com/locustio/locust/graphs/contributors`}>
-              contributors
-            </Link>
-            !
+            <Link href='https://github.com/locustio/locust/graphs/contributors'>contributors</Link>!
           </Typography>
         </div>
 
+        <div>
+          <Typography component='h2' mb={1} variant='h4'>
+            Need help getting started?
+          </Typography>
+          <Link href='https://locust.cloud'>Locust Cloud</Link> gives you access to hosted, easily
+          scalable, and distributed load generation, as well as advanced reporting — all while
+          preserving the flexible “it’s just Python” approach to load test scripting that Locust
+          provides
+        </div>
+
         <div>
           <Typography component='h2' mb={1} variant='h4'>
             Version
@@ -54,7 +60,10 @@ export default function About() {
             <Link href='https://github.com/locustio/locust'>GitHub</Link>
           </Typography>
           <Typography component='p' variant='subtitle1'>
-            <Link href='https://docs.locust.io/en/stable/'>Documentation</Link>
+            <Link href='https://docs.locust.io/en/stable'>Documentation</Link>
+          </Typography>
+          <Typography component='p' variant='subtitle1'>
+            <Link href='https://medium.com/locust-cloud'>Blog</Link>
           </Typography>
         </div>
       </Modal>

diff --git a/locust/webui/src/components/Layout/Navbar/Navbar.tsx b/locust/webui/src/components/Layout/Navbar/Navbar.tsx
@@ -1,34 +1,25 @@
-import { AppBar, Box, Container, Link, Toolbar, Typography } from '@mui/material';
+import { AppBar, Box, Container, Link, Toolbar } from '@mui/material';
 
-import Logo from 'assets/logo.png';
+import Logo from 'assets/Logo';
 import DarkLightToggle from 'components/Layout/Navbar/DarkLightToggle';
 import SwarmMonitor from 'components/Layout/Navbar/SwarmMonitor';
 import StateButtons from 'components/StateButtons/StateButtons';
+import { useSelector } from 'redux/hooks';
 
 export default function Navbar() {
+  const isDarkMode = useSelector(({ theme }) => theme.isDarkMode);
+
   return (
     <AppBar position='static'>
       <Container maxWidth='xl'>
-        <Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Toolbar disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
           <Link
             color='inherit'
             href='/'
             sx={{ display: 'flex', alignItems: 'center', columnGap: 2 }}
             underline='none'
           >
-            <img height='52' src={Logo} width='52' />
-            <Typography
-              component='h1'
-              noWrap
-              sx={{
-                fontWeight: 700,
-                display: 'flex',
-                alignItems: 'center',
-              }}
-              variant='h3'
-            >
-              Locust
-            </Typography>
+            <Logo isDarkMode={isDarkMode} />
           </Link>
           <Box sx={{ display: 'flex', columnGap: 6 }}>
             <SwarmMonitor />

diff --git a/locust/webui/src/components/Layout/Navbar/SwarmMonitor.tsx b/locust/webui/src/components/Layout/Navbar/SwarmMonitor.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Typography } from '@mui/material';
+import { Box, Divider, Tooltip, Typography } from '@mui/material';
 import { connect } from 'react-redux';
 
 import { SWARM_STATE } from 'constants/swarm';
@@ -23,7 +23,18 @@ function SwarmMonitor({
     <Box sx={{ display: 'flex', columnGap: 2 }}>
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Typography variant='button'>Host</Typography>
-        <Typography>{host}</Typography>
+        <Tooltip title={host}>
+          <Typography
+            noWrap
+            sx={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              maxWidth: '400px',
+            }}
+          >
+            {host}
+          </Typography>
+        </Tooltip>
       </Box>
       <Divider flexItem orientation='vertical' />
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
@@ -35,7 +46,9 @@ function SwarmMonitor({
           <Divider flexItem orientation='vertical' />
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <Typography variant='button'>Users</Typography>
-            <Typography variant='button'>{userCount}</Typography>
+            <Typography noWrap variant='button'>
+              {userCount}
+            </Typography>
           </Box>
         </>
       )}
@@ -44,19 +57,23 @@ function SwarmMonitor({
           <Divider flexItem orientation='vertical' />
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <Typography variant='button'>Workers</Typography>
-            <Typography variant='button'>{workerCount}</Typography>
+            <Typography noWrap variant='button'>
+              {workerCount}
+            </Typography>
           </Box>
         </>
       )}
       <Divider flexItem orientation='vertical' />
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         <Typography variant='button'>RPS</Typography>
-        <Typography variant='button'>{totalRps}</Typography>
+        <Typography noWrap variant='button'>
+          {totalRps}
+        </Typography>
       </Box>
       <Divider flexItem orientation='vertical' />
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
         <Typography variant='button'>Failures</Typography>
-        <Typography variant='button'>{`${failRatio}%`}</Typography>
+        <Typography noWrap variant='button'>{`${failRatio}%`}</Typography>
       </Box>
     </Box>
   );

diff --git a/locust/webui/src/components/StateButtons/StateButtons.tsx b/locust/webui/src/components/StateButtons/StateButtons.tsx
@@ -15,7 +15,7 @@ export default function StateButtons() {
   }
 
   return (
-    <Box sx={{ display: 'flex', columnGap: 2 }}>
+    <Box sx={{ display: 'flex', columnGap: 2, marginY: 'auto', height: '50px' }}>
       {swarmState === SWARM_STATE.STOPPED ? (
         <NewTestButton />
       ) : (

diff --git a/locust/webui/src/components/SwarmForm/SwarmEditForm.tsx b/locust/webui/src/components/SwarmForm/SwarmEditForm.tsx
@@ -3,21 +3,23 @@ import { connect } from 'react-redux';
 
 import Form from 'components/Form/Form';
 import { useStartSwarmMutation } from 'redux/api/swarm';
-import { ISwarmState } from 'redux/slice/swarm.slice';
+import { ISwarmState, swarmActions } from 'redux/slice/swarm.slice';
 import { IRootState } from 'redux/store';
 
-type ISwarmFormInput = Pick<ISwarmState, 'spawnRate' | 'numUsers'>;
+type ISwarmFormInput = Pick<ISwarmState, 'spawnRate' | 'userCount'>;
 
 interface ISwarmForm extends ISwarmFormInput {
   onSubmit: () => void;
+  setSwarm: (swarmPayload: Partial<ISwarmState>) => void;
 }
 
-function SwarmEditForm({ onSubmit, numUsers, spawnRate }: ISwarmForm) {
+function SwarmEditForm({ onSubmit, userCount, spawnRate, setSwarm }: ISwarmForm) {
   const [startSwarm] = useStartSwarmMutation();
 
   const onEditSwarm = (inputData: ISwarmFormInput) => {
     onSubmit();
     startSwarm(inputData);
+    setSwarm(inputData);
   };
 
   return (
@@ -28,7 +30,7 @@ function SwarmEditForm({ onSubmit, numUsers, spawnRate }: ISwarmForm) {
       <Form<ISwarmFormInput> onSubmit={onEditSwarm}>
         <Box sx={{ my: 2, display: 'flex', flexDirection: 'column', rowGap: 4 }}>
           <TextField
-            defaultValue={numUsers || 1}
+            defaultValue={userCount || 1}
             label='Number of users (peak concurrency)'
             name='userCount'
           />
@@ -48,9 +50,13 @@ function SwarmEditForm({ onSubmit, numUsers, spawnRate }: ISwarmForm) {
   );
 }
 
-const storeConnector = ({ swarm: { spawnRate, numUsers } }: IRootState) => ({
+const storeConnector = ({ swarm: { spawnRate, userCount } }: IRootState) => ({
   spawnRate,
-  numUsers,
+  userCount,
 });
 
-export default connect(storeConnector)(SwarmEditForm);
+const actionCreator = {
+  setSwarm: swarmActions.setSwarm,
+};
+
+export default connect(storeConnector, actionCreator)(SwarmEditForm);
diff --git a/locust/webui/src/hooks/useTheme.ts b/locust/webui/src/hooks/useTheme.ts
@@ -12,5 +12,5 @@ export default function useTheme() {
     [isDarkMode],
   );
 
-  return theme;
+  return { theme, isDarkMode };
 }
diff --git a/locust/webui/src/images.d.ts b/locust/webui/src/images.d.ts
@@ -1 +1,2 @@
 declare module '*.png';
+declare module '*.svg';
diff --git a/locust/webui/src/pages/Auth.tsx b/locust/webui/src/pages/Auth.tsx
@@ -2,13 +2,13 @@ import { Alert, Box, Button, IconButton, TextField, Typography } from '@mui/mate
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 
-import Logo from 'assets/logo.png';
+import Logo from 'assets/Logo';
 import DarkLightToggle from 'components/Layout/Navbar/DarkLightToggle';
 import useTheme from 'hooks/useTheme';
 import { IAuthArgs } from 'types/auth.types';
 
 export default function Auth({ authProviders, error, usernamePasswordCallback }: IAuthArgs) {
-  const theme = useTheme();
+  const { theme, isDarkMode } = useTheme();
 
   return (
     <ThemeProvider theme={theme}>
@@ -34,19 +34,7 @@ export default function Auth({ authProviders, error, usernamePasswordCallback }:
         }}
       >
         <Box sx={{ display: 'flex', justifyContent: 'center', columnGap: 2 }}>
-          <img height='52' src={Logo} width='52' />
-          <Typography
-            component='h1'
-            noWrap
-            sx={{
-              fontWeight: 700,
-              display: 'flex',
-              alignItems: 'center',
-            }}
-            variant='h3'
-          >
-            Locust
-          </Typography>
+          <Logo isDarkMode={isDarkMode} lightModeBackgroundColor='#fff' />
         </Box>
         {usernamePasswordCallback && (
           <form action={usernamePasswordCallback}>

diff --git a/locust/webui/src/pages/Dashboard.tsx b/locust/webui/src/pages/Dashboard.tsx
@@ -24,7 +24,7 @@ function Dashboard({ swarmState, tabs, extendedTabs }: IDashboard) {
   useSwarmUi();
   useLogViewer();
 
-  const theme = useTheme();
+  const { theme } = useTheme();
 
   return (
     <ThemeProvider theme={theme}>

diff --git a/locust/webui/src/pages/tests/Dashboard.test.tsx b/locust/webui/src/pages/tests/Dashboard.test.tsx
@@ -9,13 +9,12 @@ describe('Dashboard', () => {
   test('renders the layout', () => {
     const { getByRole } = renderWithProvider(<Dashboard />);
 
-    const logo = getByRole('img');
+    const logo = getByRole('img', { name: 'Locust' });
     const heading = getByRole('link', { name: 'Locust' });
 
     expect(heading).toBeTruthy();
     expect(heading.getAttribute('href')).toEqual('/');
     expect(logo).toBeTruthy();
-    expect(logo.getAttribute('src')).toEqual('/src/assets/logo.png');
   });
 
   test('renders the swarm form by default', () => {