Make the locust UI responsive

Author: andrewbaldwin44

Diff for: locust/webui/src/components/Layout/Navbar/Navbar.tsx

@@ -1,30 +1,72 @@
-import { AppBar, Box, Container, Link, Toolbar } from '@mui/material';
+import { useState } from 'react';
+import MenuIcon from '@mui/icons-material/Menu';
+import { AppBar, Box, Container, Drawer, IconButton, Link, Toolbar } from '@mui/material';
 
 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';
 
 export default function Navbar() {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const toggleDrawer = (open: boolean) => () => {
+    setDrawerOpen(open);
+  };
+
   return (
-    <AppBar position='static'>
-      <Container maxWidth='xl'>
-        <Toolbar disableGutters sx={{ display: 'flex', justifyContent: 'space-between', columnGap: 2 }}>
-          <Link
-            color='inherit'
-            href='/'
-            sx={{ display: 'flex', alignItems: 'center' }}
-            underline='none'
+    <>
+      <AppBar position='static'>
+        <Container maxWidth='xl'>
+          <Toolbar
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between', columnGap: 2 }}
           >
-            <Logo />
-          </Link>
-          <Box sx={{ display: 'flex', columnGap: 6 }}>
-            <SwarmMonitor />
-            <StateButtons />
+            <Link
+              color='inherit'
+              href='/'
+              sx={{ display: 'flex', alignItems: 'center' }}
+              underline='none'
+            >
+              <Logo />
+            </Link>
+            <IconButton
+              aria-label='menu'
+              color='inherit'
+              edge='start'
+              onClick={toggleDrawer(true)}
+              sx={{ display: { xs: 'block', md: 'none' } }}
+            >
+              <MenuIcon />
+            </IconButton>
+
+            <Box sx={{ display: { xs: 'none', md: 'flex' }, columnGap: { md: 2, lg: 6 } }}>
+              <SwarmMonitor />
+              <StateButtons />
+              <DarkLightToggle />
+            </Box>
+          </Toolbar>
+        </Container>
+      </AppBar>
+
+      <Drawer anchor='right' onClose={toggleDrawer(false)} open={drawerOpen}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            columnGap: { md: 2, lg: 6 },
+            rowGap: 2,
+            p: 2,
+            maxWidth: '100vw',
+          }}
+        >
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <DarkLightToggle />
           </Box>
-        </Toolbar>
-      </Container>
-    </AppBar>
+          <StateButtons />
+          <SwarmMonitor />
+        </Box>
+      </Drawer>
+    </>
   );
 }

Diff for: locust/webui/src/components/Layout/Navbar/SwarmMonitor.tsx

@@ -20,7 +20,9 @@ function SwarmMonitor({
   workerCount,
 }: ISwarmMonitor) {
   return (
-    <Box sx={{ display: 'flex', columnGap: 2 }}>
+    <Box
+      sx={{ display: 'flex', columnGap: 2, rowGap: 1, flexDirection: { xs: 'column', md: 'row' } }}
+    >
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Typography variant='button'>Host</Typography>
         <Tooltip title={host}>
@@ -29,7 +31,7 @@ function SwarmMonitor({
             sx={{
               overflow: 'hidden',
               textOverflow: 'ellipsis',
-              maxWidth: '400px',
+              maxWidth: { xs: '180px', lg: '400px' },
             }}
           >
             {host}
@@ -44,7 +46,7 @@ function SwarmMonitor({
       {(state === SWARM_STATE.RUNNING || state === SWARM_STATE.SPAWNING) && (
         <>
           <Divider flexItem orientation='vertical' />
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
             <Typography variant='button'>Users</Typography>
             <Typography noWrap variant='button'>
               {userCount}
@@ -55,7 +57,7 @@ function SwarmMonitor({
       {isDistributed && (
         <>
           <Divider flexItem orientation='vertical' />
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
             <Typography variant='button'>Workers</Typography>
             <Typography noWrap variant='button'>
               {workerCount}
@@ -64,14 +66,14 @@ function SwarmMonitor({
         </>
       )}
       <Divider flexItem orientation='vertical' />
-      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
         <Typography variant='button'>RPS</Typography>
         <Typography noWrap variant='button'>
           {totalRps}
         </Typography>
       </Box>
       <Divider flexItem orientation='vertical' />
-      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
         <Typography variant='button'>Failures</Typography>
         <Typography noWrap variant='button'>{`${failRatio}%`}</Typography>
       </Box>

Diff for: locust/webui/src/components/Table/Table.tsx

@@ -62,12 +62,7 @@ export default function Table<Row extends Record<string, any> = Record<string, s
   });
 
   return (
-    <TableContainer
-      component={Paper}
-      sx={{
-        overflowX: 'visible',
-      }}
-    >
+    <TableContainer component={Paper}>
       <MuiTable>
         <TableHead
           sx={{

Diff for: locust/webui/src/components/Tabs/Tabs.tsx

@@ -60,7 +60,12 @@ function Tabs({ currentTabIndexFromQuery, notification, setNotification, setUrl,
   return (
     <Container maxWidth='xl'>
       <Box sx={{ mb: 2 }}>
-        <MuiTabs onChange={onTabChange} value={currentTabIndex}>
+        <MuiTabs
+          onChange={onTabChange}
+          scrollButtons='auto'
+          value={currentTabIndex}
+          variant='scrollable'
+        >
           {tabs.map(({ key: tabKey, title }, index) => (
             <MuiTab
               key={`tab-${index}`}