Skip to content

Commit

Permalink
Add provider to html report
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewbaldwin44
andrewbaldwin44 committed Aug 5, 2024
1 parent f595f93 commit 2b6264d
Showing 1 changed file with 78 additions and 67 deletions.
145 changes: 78 additions & 67 deletions locust/webui/src/pages/HtmlReport.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Box, Typography, Container, Link } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

import { ExceptionsTable } from 'components/ExceptionsTable/ExceptionsTable';
import { FailuresTable } from 'components/FailuresTable/FailuresTable';
Expand All @@ -9,11 +11,13 @@ import { StatsTable } from 'components/StatsTable/StatsTable';
import { SwarmCharts } from 'components/SwarmCharts/SwarmCharts';
import { SwarmRatios } from 'components/SwarmRatios/SwarmRatios';
import { INITIAL_THEME } from 'constants/theme';
import theme from 'redux/slice/theme.slice';
import createTheme from 'styles/theme';
import { IReport } from 'types/swarm.types';
import { formatLocaleString } from 'utils/date';

const theme = createTheme(window.theme || INITIAL_THEME);
const muiTheme = createTheme(window.theme || INITIAL_THEME);
const isDarkMode = (window.theme || INITIAL_THEME) === 'dark';

const statsReportTableStructure = [
{ key: 'method', title: 'Type' },
Expand All @@ -28,6 +32,11 @@ const statsReportTableStructure = [
{ key: 'totalFailPerSec', title: 'Failures/s', round: 2 },
];

const reportStore = configureStore({
reducer: combineReducers({ theme }),
preloadedState: { theme: { isDarkMode } },
});

export default function HtmlReport({
locustfile,
showDownloadLink,
Expand All @@ -42,88 +51,90 @@ export default function HtmlReport({
tasks,
}: IReport) {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Provider store={reportStore}>
<ThemeProvider theme={muiTheme}>
<CssBaseline />

<Container maxWidth='lg' sx={{ my: 4 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
<Typography
component='h1'
noWrap
sx={{
fontWeight: 700,
}}
variant='h3'
>
Locust Test Report
</Typography>
{showDownloadLink && (
<Link href={`?download=1&theme=${window.theme}`}>Download the Report</Link>
)}
</Box>
<Box sx={{ my: 2 }}>
<Box sx={{ display: 'flex', columnGap: 0.5 }}>
<Typography fontWeight={600}>During:</Typography>
<Typography>
{formatLocaleString(startTime)} - {formatLocaleString(endTime)}
<Container maxWidth='lg' sx={{ my: 4 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
<Typography
component='h1'
noWrap
sx={{
fontWeight: 700,
}}
variant='h3'
>
Locust Test Report
</Typography>
{showDownloadLink && (
<Link href={`?download=1&theme=${window.theme}`}>Download the Report</Link>
)}
</Box>
<Box sx={{ my: 2 }}>
<Box sx={{ display: 'flex', columnGap: 0.5 }}>
<Typography fontWeight={600}>During:</Typography>
<Typography>
{formatLocaleString(startTime)} - {formatLocaleString(endTime)}
</Typography>
</Box>

<Box sx={{ display: 'flex', columnGap: 0.5 }}>
<Typography fontWeight={600}>Target Host:</Typography>
<Typography>{host || 'None'}</Typography>
</Box>
<Box sx={{ display: 'flex', columnGap: 0.5 }}>
<Typography fontWeight={600}>Target Host:</Typography>
<Typography>{host || 'None'}</Typography>
</Box>

<Box sx={{ display: 'flex', columnGap: 0.5 }}>
<Typography fontWeight={600}>Script:</Typography>
<Typography>{locustfile}</Typography>
<Box sx={{ display: 'flex', columnGap: 0.5 }}>
<Typography fontWeight={600}>Script:</Typography>
<Typography>{locustfile}</Typography>
</Box>
</Box>
</Box>

<Box sx={{ display: 'flex', flexDirection: 'column', rowGap: 4 }}>
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Request Statistics
</Typography>
<StatsTable stats={requestsStatistics} tableStructure={statsReportTableStructure} />
</Box>
{!!responseTimeStatistics.length && (
<Box sx={{ display: 'flex', flexDirection: 'column', rowGap: 4 }}>
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Response Time Statistics
Request Statistics
</Typography>
<ResponseTimeTable responseTimes={responseTimeStatistics} />
<StatsTable stats={requestsStatistics} tableStructure={statsReportTableStructure} />
</Box>
)}
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Failures Statistics
</Typography>
<FailuresTable errors={failuresStatistics} />
</Box>
{!!exceptionsStatistics.length && (
{!!responseTimeStatistics.length && (
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Response Time Statistics
</Typography>
<ResponseTimeTable responseTimes={responseTimeStatistics} />
</Box>
)}
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Exceptions Statistics
Failures Statistics
</Typography>
<ExceptionsTable exceptions={exceptionsStatistics} />
<FailuresTable errors={failuresStatistics} />
</Box>
)}
{!!exceptionsStatistics.length && (
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Exceptions Statistics
</Typography>
<ExceptionsTable exceptions={exceptionsStatistics} />
</Box>
)}

<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Charts
</Typography>
<SwarmCharts charts={charts} />
</Box>
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Final ratio
</Typography>
<SwarmRatios ratios={tasks} />
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Charts
</Typography>
<SwarmCharts charts={charts} />
</Box>
<Box>
<Typography component='h2' mb={1} noWrap variant='h4'>
Final ratio
</Typography>
<SwarmRatios ratios={tasks} />
</Box>
</Box>
</Box>
</Container>
</ThemeProvider>
</Container>
</ThemeProvider>
</Provider>
);
}

0 comments on commit 2b6264d

Please sign in to comment.