mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated speedtest behavior (#1427)

Browse Source 
- Allowed object size changed in autotune mode
- Removed "Please wait while we get x results... "
- Reorganized advanced options form

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2022-01-20 19:44:55 -07:00
committed by GitHub
parent 3ba7b34b25
commit a926082e4d
3 changed files with 196 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View File

@@ -1232,7 +1232,7 @@ export const createTenantCommon: any = {
paddingTop: 15, paddingTop: 15,
}, },
descriptionText: { descriptionText: {
fontSize: 16, fontSize: 14,
}, },
}; };

160
portal-ui/src/screens/Console/Speedtest/STResults.tsx
View File

@@ -166,7 +166,7 @@ const styles = (theme: Theme) =>
const STResults = ({ classes, results, start, autotune }: ISTResults) => { const STResults = ({ classes, results, start, autotune }: ISTResults) => {
const [jsonView, setJsonView] = useState<boolean>(false); const [jsonView, setJsonView] = useState<boolean>(false);
const finalRes = results[results.length - 1]; const finalRes = results[results.length - 1] || [];
const getServers: STServer[] = get(finalRes, "GETStats.servers", []) || []; const getServers: STServer[] = get(finalRes, "GETStats.servers", []) || [];
const putServers: STServer[] = get(finalRes, "PUTStats.servers", []) || []; const putServers: STServer[] = get(finalRes, "PUTStats.servers", []) || [];
@@ -188,14 +188,22 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
}) => { }) => {
const avg = calculateBytes(throughput); const avg = calculateBytes(throughput);
let total = "--";
let unit = "";
if (avg.total !== 0) {
total = avg.total.toString();
unit = `${avg.unit}/S`;
}
return ( return (
<Grid container> <Grid container>
<Grid item xs={12} className={classes.objectGeneralTitle}> <Grid item xs={12} className={classes.objectGeneralTitle}>
{title} {title}
</Grid> </Grid>
<Grid item xs={12} md={6} className={classes.metricValContainer}> <Grid item xs={12} md={6} className={classes.metricValContainer}>
<span className={classes.testUnitRes}>{avg.total}</span> <span className={classes.testUnitRes}>{total}</span>
<span className={classes.generalUnit}>{avg.unit}/S</span> <span className={classes.generalUnit}>{unit}</span>
</Grid> </Grid>
</Grid> </Grid>
); );
@@ -271,86 +279,78 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
return ( return (
<Fragment> <Fragment>
{clnMetrics.length <= 1 && ( <Grid container className={classes.objectGeneral}>
<Grid container> <Grid item xs={12} md={6} lg={4}>
<Grid item xs={12} className={classes.initialResults}> <ObjectGeneral
Please wait while we get {autotune ? "the initial" : "the system"}{" "} title={
results... <div className={classes.download}>
</Grid> <DownloadStatIcon />
&nbsp; GET
</div>
}
throughput={getThroughput}
objects={getObjects}
/>
</Grid> </Grid>
)} <Grid item xs={12} md={6} lg={4}>
<ObjectGeneral
title={
<div className={classes.upload}>
<UploadStatIcon />
&nbsp; PUT
</div>
}
throughput={putThroughput}
objects={putObjects}
/>
</Grid>
<Grid item xs={12} md={12} lg={4}>
<ResponsiveContainer width="99%">
<AreaChart data={clnMetrics}>
<defs>
<linearGradient id="colorPut" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#2781B0" stopOpacity={0.9} />
<stop offset="95%" stopColor="#fff" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorGet" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#4CCB92" stopOpacity={0.9} />
<stop offset="95%" stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray={"0 0"}
strokeWidth={1}
strokeOpacity={0.5}
stroke={"#F1F1F1"}
vertical={false}
/>
<Area
type="monotone"
dataKey={"get"}
stroke={"#4CCB92"}
fill={"url(#colorGet)"}
fillOpacity={0.3}
strokeWidth={2}
dot={false}
/>
<Area
type="monotone"
dataKey={"put"}
stroke={"#2781B0"}
fill={"url(#colorPut)"}
fillOpacity={0.3}
strokeWidth={2}
dot={false}
/>
</AreaChart>
</ResponsiveContainer>
</Grid>
</Grid>
<br />
{clnMetrics.length > 1 && ( {clnMetrics.length > 1 && (
<Fragment> <Fragment>
<Grid container className={classes.objectGeneral}>
<Grid item xs={12} md={6} lg={4}>
<ObjectGeneral
title={
<div className={classes.download}>
<DownloadStatIcon />
&nbsp; GET
</div>
}
throughput={getThroughput}
objects={getObjects}
/>
</Grid>
<Grid item xs={12} md={6} lg={4}>
<ObjectGeneral
title={
<div className={classes.upload}>
<UploadStatIcon />
&nbsp; PUT
</div>
}
throughput={putThroughput}
objects={putObjects}
/>
</Grid>
<Grid item xs={12} md={12} lg={4}>
<ResponsiveContainer width="99%">
<AreaChart data={clnMetrics}>
<defs>
<linearGradient id="colorPut" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#2781B0" stopOpacity={0.9} />
<stop offset="95%" stopColor="#fff" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorGet" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#4CCB92" stopOpacity={0.9} />
<stop offset="95%" stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray={"0 0"}
strokeWidth={1}
strokeOpacity={0.5}
stroke={"#F1F1F1"}
vertical={false}
/>
<Area
type="monotone"
dataKey={"get"}
stroke={"#4CCB92"}
fill={"url(#colorGet)"}
fillOpacity={0.3}
strokeWidth={2}
dot={false}
/>
<Area
type="monotone"
dataKey={"put"}
stroke={"#2781B0"}
fill={"url(#colorPut)"}
fillOpacity={0.3}
strokeWidth={2}
dot={false}
/>
</AreaChart>
</ResponsiveContainer>
</Grid>
</Grid>
<br />
<Grid container> <Grid container>
<Grid item xs={12} md={6} className={classes.descriptorLabel}> <Grid item xs={12} md={6} className={classes.descriptorLabel}>
{start ? ( {start ? (

188
portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
View File

@@ -28,6 +28,7 @@ import {
actionsTray, actionsTray,
advancedFilterToggleStyles, advancedFilterToggleStyles,
containerForHeader, containerForHeader,
formFieldStyles,
searchField, searchField,
} from "../Common/FormComponents/common/styleLibrary"; } from "../Common/FormComponents/common/styleLibrary";
import { wsProtocol } from "../../../utils/wsUtils"; import { wsProtocol } from "../../../utils/wsUtils";
@@ -79,9 +80,13 @@ const styles = (theme: Theme) =>
advancedOption: { advancedOption: {
marginTop: 20, marginTop: 20,
}, },
advancedAutotune: {
marginTop: 10,
},
...advancedFilterToggleStyles, ...advancedFilterToggleStyles,
...actionsTray, ...actionsTray,
...searchField, ...searchField,
...formFieldStyles,
...containerForHeader(theme.spacing(4)), ...containerForHeader(theme.spacing(4)),
}); });
@@ -280,82 +285,119 @@ const Speedtest = ({ classes, distributedSetup }: ISpeedtest) => {
}`} }`}
> >
<Grid item xs={12}> <Grid item xs={12}>
<CheckboxWrapper <Grid
checked={autotune} container
onChange={(e) => setAutotune(e.target.checked)} direction="row"
id={"autotune"} justifyContent="space-around"
name={"autotune"} alignItems="center"
label={"Enable Autotune"} >
tooltip={ <Grid
"Autotune gets the maximum stats for the system by running with multiple configurations at once. \ item
This configuration is enabled by default and disables the rest of available options" xs={12}
} md={4}
value="true" className={classes.advancedOption}
disabled={start} >
/> <InputBoxWrapper
id={"size"}
name={"size"}
label={"Object Size"}
onChange={(e) => {
setSize(e.target.value);
}}
value={size}
disabled={start}
overlayObject={
<InputUnitMenu
id={"size-unit"}
onUnitChange={setSizeUnit}
unitSelected={sizeUnit}
unitsList={[
{ label: "KB", value: "KB" },
{ label: "MB", value: "MB" },
{ label: "GB", value: "GB" },
]}
disabled={start}
/>
}
/>
</Grid>
<Grid
item
xs={12}
md={4}
className={classes.advancedAutotune}
>
<CheckboxWrapper
checked={autotune}
onChange={(e) => setAutotune(e.target.checked)}
id={"autotune"}
name={"autotune"}
label={"Enable Autotune"}
tooltip={
"Autotune gets the maximum stats for the system by testing multiple configurations at once. This configuration is enabled by default and overrides duration & concurrent requests options"
}
value="true"
disabled={start}
/>
</Grid>
</Grid>
</Grid> </Grid>
<Grid item xs={12} md={3} className={classes.advancedOption}> <Grid item xs={12}>
<InputBoxWrapper <Grid
id={"duration"} container
name={"duration"} direction="row"
label={"Duration"} justifyContent="space-around"
onChange={(e) => { alignItems="center"
setDuration(e.target.value); >
}} <Grid
value={duration} item
disabled={start || autotune} xs={12}
overlayObject={ md={4}
<InputUnitMenu className={classes.advancedOption}
id={"duration-unit"} >
onUnitChange={setDurationUnit} <InputBoxWrapper
unitSelected={durationUnit} id={"duration"}
unitsList={[ name={"duration"}
{ label: "miliseconds", value: "ms" }, label={"Duration"}
{ label: "seconds", value: "s" }, onChange={(e) => {
]} setDuration(e.target.value);
}}
value={duration}
disabled={start || autotune}
overlayObject={
<InputUnitMenu
id={"duration-unit"}
onUnitChange={setDurationUnit}
unitSelected={durationUnit}
unitsList={[
{ label: "miliseconds", value: "ms" },
{ label: "seconds", value: "s" },
]}
disabled={start || autotune}
/>
}
/>
</Grid>
<Grid
item
xs={12}
md={4}
className={classes.advancedOption}
>
<InputBoxWrapper
type="number"
min="0"
id={"concurrent"}
name={"concurrent"}
label={"Concurrent Requests"}
onChange={(e) => {
setConcurrent(e.target.value);
}}
value={concurrent}
disabled={start || autotune} disabled={start || autotune}
/> />
} </Grid>
/> </Grid>
</Grid>
<Grid item xs={12} md={3} className={classes.advancedOption}>
<InputBoxWrapper
id={"size"}
name={"size"}
label={"Object Size"}
onChange={(e) => {
setSize(e.target.value);
}}
value={size}
disabled={start || autotune}
overlayObject={
<InputUnitMenu
id={"size-unit"}
onUnitChange={setSizeUnit}
unitSelected={sizeUnit}
unitsList={[
{ label: "KB", value: "KB" },
{ label: "MB", value: "MB" },
{ label: "GB", value: "GB" },
]}
disabled={start || autotune}
/>
}
/>
</Grid>
<Grid item xs={12} md={3} className={classes.advancedOption}>
<InputBoxWrapper
type="number"
min="0"
id={"concurrent"}
name={"concurrent"}
label={"Concurrent Requests"}
onChange={(e) => {
setConcurrent(e.target.value);
}}
value={concurrent}
disabled={start || autotune}
/>
</Grid> </Grid>
</Grid> </Grid>
<Grid container className={classes.multiModule}> <Grid container className={classes.multiModule}>