Updated speedtest behavior (#1427)
- 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
GitHub
@@ -1232,7 +1232,7 @@ export const createTenantCommon: any = {
|
||||
paddingTop: 15,
|
||||
},
|
||||
descriptionText: {
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -166,7 +166,7 @@ const styles = (theme: Theme) =>
|
||||
const STResults = ({ classes, results, start, autotune }: ISTResults) => {
|
||||
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 putServers: STServer[] = get(finalRes, "PUTStats.servers", []) || [];
|
||||
@@ -188,14 +188,22 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
|
||||
}) => {
|
||||
const avg = calculateBytes(throughput);
|
||||
|
||||
let total = "--";
|
||||
let unit = "";
|
||||
|
||||
if (avg.total !== 0) {
|
||||
total = avg.total.toString();
|
||||
unit = `${avg.unit}/S`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item xs={12} className={classes.objectGeneralTitle}>
|
||||
{title}
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} className={classes.metricValContainer}>
|
||||
<span className={classes.testUnitRes}>{avg.total}</span>
|
||||
<span className={classes.generalUnit}>{avg.unit}/S</span>
|
||||
<span className={classes.testUnitRes}>{total}</span>
|
||||
<span className={classes.generalUnit}>{unit}</span>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
@@ -271,86 +279,78 @@ const STResults = ({ classes, results, start, autotune }: ISTResults) => {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{clnMetrics.length <= 1 && (
|
||||
<Grid container>
|
||||
<Grid item xs={12} className={classes.initialResults}>
|
||||
Please wait while we get {autotune ? "the initial" : "the system"}{" "}
|
||||
results...
|
||||
</Grid>
|
||||
<Grid container className={classes.objectGeneral}>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<ObjectGeneral
|
||||
title={
|
||||
<div className={classes.download}>
|
||||
<DownloadStatIcon />
|
||||
GET
|
||||
</div>
|
||||
}
|
||||
throughput={getThroughput}
|
||||
objects={getObjects}
|
||||
/>
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<ObjectGeneral
|
||||
title={
|
||||
<div className={classes.upload}>
|
||||
<UploadStatIcon />
|
||||
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 && (
|
||||
<Fragment>
|
||||
<Grid container className={classes.objectGeneral}>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<ObjectGeneral
|
||||
title={
|
||||
<div className={classes.download}>
|
||||
<DownloadStatIcon />
|
||||
GET
|
||||
</div>
|
||||
}
|
||||
throughput={getThroughput}
|
||||
objects={getObjects}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<ObjectGeneral
|
||||
title={
|
||||
<div className={classes.upload}>
|
||||
<UploadStatIcon />
|
||||
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 item xs={12} md={6} className={classes.descriptorLabel}>
|
||||
{start ? (
|
||||
|
||||
@@ -28,6 +28,7 @@ import {
|
||||
actionsTray,
|
||||
advancedFilterToggleStyles,
|
||||
containerForHeader,
|
||||
formFieldStyles,
|
||||
searchField,
|
||||
} from "../Common/FormComponents/common/styleLibrary";
|
||||
import { wsProtocol } from "../../../utils/wsUtils";
|
||||
@@ -79,9 +80,13 @@ const styles = (theme: Theme) =>
|
||||
advancedOption: {
|
||||
marginTop: 20,
|
||||
},
|
||||
advancedAutotune: {
|
||||
marginTop: 10,
|
||||
},
|
||||
...advancedFilterToggleStyles,
|
||||
...actionsTray,
|
||||
...searchField,
|
||||
...formFieldStyles,
|
||||
...containerForHeader(theme.spacing(4)),
|
||||
});
|
||||
|
||||
@@ -280,82 +285,119 @@ const Speedtest = ({ classes, distributedSetup }: ISpeedtest) => {
|
||||
}`}
|
||||
>
|
||||
<Grid item xs={12}>
|
||||
<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 running with multiple configurations at once. \
|
||||
This configuration is enabled by default and disables the rest of available options"
|
||||
}
|
||||
value="true"
|
||||
disabled={start}
|
||||
/>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justifyContent="space-around"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={4}
|
||||
className={classes.advancedOption}
|
||||
>
|
||||
<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 item xs={12} md={3} className={classes.advancedOption}>
|
||||
<InputBoxWrapper
|
||||
id={"duration"}
|
||||
name={"duration"}
|
||||
label={"Duration"}
|
||||
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" },
|
||||
]}
|
||||
<Grid item xs={12}>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justifyContent="space-around"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={4}
|
||||
className={classes.advancedOption}
|
||||
>
|
||||
<InputBoxWrapper
|
||||
id={"duration"}
|
||||
name={"duration"}
|
||||
label={"Duration"}
|
||||
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}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</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}>
|
||||
|
||||
Reference in New Issue
Block a user