diff --git a/src/components/Dashboard/Utilization/UtilizationItem.js b/src/components/Dashboard/Utilization/UtilizationItem.js
index 2caa8cb92..259ae36d9 100644
--- a/src/components/Dashboard/Utilization/UtilizationItem.js
+++ b/src/components/Dashboard/Utilization/UtilizationItem.js
@@ -22,7 +22,7 @@ export class UtilizationItem extends React.PureComponent {
};
render() {
- const { id, title, data, maxY, unit, isLoading, LoadingComponent } = this.props;
+ const { id, title, data, maxY, unit, isLoading, LoadingComponent, decimalPoints } = this.props;
const { width } = this.state.dimensions;
const axis = {
@@ -46,12 +46,19 @@ export class UtilizationItem extends React.PureComponent {
}
let actual;
+ let yTickValues;
let chart = NOT_AVAILABLE;
if (isLoading) {
chart = ;
} else if (data) {
const chartData = data.map((val, index) => ({ x: index, y: val ? Number(val.toFixed(1)) : 0 }));
actual = `${Math.round(data[data.length - 1])} ${unit}`;
+ if (decimalPoints > -1) {
+ yTickValues = [0, Number((maxY / 2).toFixed(decimalPoints)), Number(maxY.toFixed(decimalPoints))];
+ } else {
+ yTickValues = [0, maxY / 2, maxY];
+ }
+
chart = (
-
+
);
}
@@ -131,6 +138,7 @@ UtilizationItem.defaultProps = {
data: null,
LoadingComponent: InlineLoading,
isLoading: false,
+ decimalPoints: -1,
};
UtilizationItem.propTypes = {
@@ -141,4 +149,5 @@ UtilizationItem.propTypes = {
maxY: PropTypes.number,
LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
isLoading: PropTypes.bool,
+ decimalPoints: PropTypes.number,
};
diff --git a/src/components/StorageOverview/Utilization/Utilization.js b/src/components/StorageOverview/Utilization/Utilization.js
index 246b29b0f..1f9b94523 100644
--- a/src/components/StorageOverview/Utilization/Utilization.js
+++ b/src/components/StorageOverview/Utilization/Utilization.js
@@ -14,6 +14,27 @@ import { UtilizationItem } from '../../Dashboard/Utilization/UtilizationItem';
import { getUtilizationVectorStats } from '../../../selectors';
import { formatBytes } from '../../../utils';
+const getUtilizationData = data => {
+ let stats = null;
+ let maxValueConverted;
+
+ const statsRaw = getUtilizationVectorStats(data);
+ if (statsRaw) {
+ const maxValue = Math.max(0, ...statsRaw);
+ maxValueConverted = formatBytes(maxValue);
+ stats = statsRaw.map(bytes => formatBytes(bytes, maxValueConverted.unit, 1).value);
+ } else {
+ maxValueConverted = formatBytes(0);
+ stats = null;
+ }
+
+ return {
+ unit: `${maxValueConverted.unit}/s`,
+ values: stats,
+ maxValue: Number(maxValueConverted.value.toFixed(1)),
+ };
+};
+
export const Utilization = ({
iopsUtilization,
latencyUtilization,
@@ -21,34 +42,19 @@ export const Utilization = ({
recoveryRateUtilization,
LoadingComponent,
}) => {
- const iopsStats = getUtilizationVectorStats(iopsUtilization);
- const latencyStats = getUtilizationVectorStats(latencyUtilization);
+ const throughputData = getUtilizationData(throughputUtilization);
+ const recoveryRateData = getUtilizationData(recoveryRateUtilization);
- const throughputStatsRaw = getUtilizationVectorStats(throughputUtilization);
- let throughputStats = null;
- let throughputMax = 0;
- let throughputMaxConverted;
- if (throughputStatsRaw) {
- throughputMax = Math.max(0, ...throughputStatsRaw);
- throughputMaxConverted = formatBytes(throughputMax);
- throughputStats = throughputStatsRaw.map(bytes => formatBytes(bytes, throughputMaxConverted.unit, 1).value);
- } else {
- throughputMaxConverted = formatBytes(throughputMax); // B
+ const iopsStats = getUtilizationVectorStats(iopsUtilization);
+ let iopsStatsMax = 0;
+ if (iopsStats) {
+ iopsStatsMax = Math.ceil(Math.max(0, ...iopsStats));
}
- const throughputUnit = `${throughputMaxConverted.unit}/s`;
-
- const recoveryRateStatsRaw = getUtilizationVectorStats(recoveryRateUtilization);
- let recoveryRateStats = null;
- let recoveryRateMax = 0;
- let recoveryRateMaxConverted;
- if (recoveryRateStatsRaw) {
- recoveryRateMax = Math.max(0, ...recoveryRateStatsRaw);
- recoveryRateMaxConverted = formatBytes(recoveryRateMax);
- recoveryRateStats = recoveryRateStatsRaw.map(bytes => formatBytes(bytes, recoveryRateMaxConverted.unit, 1).value);
- } else {
- recoveryRateMaxConverted = formatBytes(recoveryRateMax); // B
+ const latencyStats = getUtilizationVectorStats(latencyUtilization);
+ let latencyStatsMax = 0;
+ if (latencyStats) {
+ latencyStatsMax = Math.max(0, ...latencyStats);
}
- const recoveryRateUnit = `${recoveryRateMaxConverted.unit}/s`;
return (
@@ -58,10 +64,12 @@ export const Utilization = ({
@@ -70,6 +78,8 @@ export const Utilization = ({
id="iops"
title="IOPS"
data={iopsStats}
+ maxY={iopsStatsMax}
+ decimalPoints={0}
LoadingComponent={LoadingComponent}
isLoading={!iopsUtilization}
/>
@@ -78,14 +88,18 @@ export const Utilization = ({
id="latency"
title="Latency"
data={latencyStats}
+ maxY={latencyStatsMax}
+ decimalPoints={1}
LoadingComponent={LoadingComponent}
isLoading={!latencyUtilization}
/>
diff --git a/src/components/StorageOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap b/src/components/StorageOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap
index fb41b711a..e9410b9f9 100644
--- a/src/components/StorageOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap
+++ b/src/components/StorageOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap
@@ -151,8 +151,8 @@ exports[` renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
/>
renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
+ />
+
+
+ 15
+
+
+
+
+
+
+
+
+ 30
+
+
@@ -313,8 +369,8 @@ exports[` renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
/>
renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
+ />
+
+
+ 50
+
+
+
+
+
+
+
+
+ 100
+
+
@@ -475,8 +587,8 @@ exports[` renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
/>
renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
+ />
+
+
+ 50
+
+
+
+
+
+
+
+
+ 100
+
+
@@ -637,8 +805,8 @@ exports[` renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
/>
renders correctly 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
+ />
+
+
+ 15
+
+
+
+
+
+
+
+
+ 30
+
+
diff --git a/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap b/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap
index b997e6e74..975c2e510 100644
--- a/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap
+++ b/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap
@@ -363,8 +363,8 @@ exports[` renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
/>
renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
+ />
+
+
+ 15
+
+
+
+
+
+
+
+
+ 30
+
+
@@ -525,8 +581,8 @@ exports[` renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
/>
renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
+ />
+
+
+ 50
+
+
+
+
+
+
+
+
+ 100
+
+
@@ -687,8 +799,8 @@ exports[` renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
/>
renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271845"
+ y2="37.30582524271845"
+ />
+
+
+ 50
+
+
+
+
+
+
+
+
+ 100
+
+
@@ -849,8 +1017,8 @@ exports[` renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="300"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
/>
renders correctly with Provider 1`] = `
vector-effect="non-scaling-stroke"
x1="40"
x2="39"
- y1="55"
- y2="55"
+ y1="37.30582524271844"
+ y2="37.30582524271844"
+ />
+
+
+ 15
+
+
+
+
+
+
+
+
+ 30
+
+