Skip to content

Commit 4a86d46

Browse files
JeanMarcMilletScalityJeanMarcMilletScality
authored
Merge pull request #4663 from scality/improvement/replace-quantile-chart
Improvement/replace quantile chart
2 parents 77a0cd0 + b6c0791 commit 4a86d46

24 files changed

+1980
-1156
lines changed

‎ui/src/components/DashboardBandwidthChart.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
getNodesPlanesBandwidthOutQuery,
3030
} from '../services/platformlibrary/metrics';
3131
import SymmetricalQuantileChart from './SymmetricalQuantileChart';
32-
import { UNIT_RANGE_BS } from '../constants';
32+
import { HEIGHT_SYMMETRICAL_CHART, UNIT_RANGE_BS } from '../constants';
3333

3434
const DashboardBandwidthChartWithoutQuantile = ({
3535
title,
@@ -57,11 +57,9 @@ const DashboardBandwidthChartWithoutQuantile = ({
5757

5858
const { isLoading, series, startingTimeStamp } = useSymetricalChartSeries({
5959
getAboveQueries: (timeSpanProps) => [
60-
// @ts-expect-error - FIXME when you are working on it
6160
getNodesPlanesBandwidthInQuery(timeSpanProps, devices),
6261
],
6362
getBelowQueries: (timeSpanProps) => [
64-
// @ts-expect-error - FIXME when you are working on it
6563
getNodesPlanesBandwidthOutQuery(timeSpanProps, devices),
6664
],
6765
// @ts-expect-error - FIXME when you are working on it
@@ -80,19 +78,9 @@ const DashboardBandwidthChartWithoutQuantile = ({
8078
nodesPlaneInterface,
8179
);
8280

83-
const aboveSeries = allSeries.filter(
84-
(serie) => serie.metricPrefix === 'in',
85-
);
86-
87-
const belowSeries = allSeries.filter(
88-
(serie) => serie.metricPrefix === 'out',
89-
);
90-
return {
91-
above: aboveSeries,
92-
below: belowSeries,
93-
};
81+
return allSeries;
9482
},
95-
83+
// eslint-disable-next-line react-hooks/exhaustive-deps
9684
[JSON.stringify(nodeAddresses), JSON.stringify(nodesPlaneInterface)],
9785
),
9886
});
@@ -108,7 +96,7 @@ const DashboardBandwidthChartWithoutQuantile = ({
10896
below: series.below,
10997
}}
11098
unitRange={UNIT_RANGE_BS}
111-
height={150}
99+
height={HEIGHT_SYMMETRICAL_CHART}
112100
interval={interval}
113101
duration={duration}
114102
title={title}
@@ -137,6 +125,7 @@ const DashboardBandwidthChart = ({
137125
dispatch(fetchNodesAction());
138126
}, [dispatch]);
139127
const { isShowQuantileChart } = useShowQuantileChart();
128+
140129
return (
141130
<>
142131
{isShowQuantileChart ? (

‎ui/src/components/DashboardChartCpuUsage.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import {
33
useMetricsTimeSpan,
44
useChartId,
55
} from '@scality/core-ui/dist/next';
6-
import { useChartLegend } from '@scality/core-ui/dist/components/chartlegend/ChartLegendWrapper';
6+
import { useChartLegendRegistration } from '../hooks/useChartLegendRegistration';
77

8-
import { useCallback, useEffect } from 'react';
8+
import { useCallback } from 'react';
99
import { getMultiResourceSeriesForChart } from '../services/graphUtils';
1010
import {
1111
useNodeAddressesSelector,
@@ -19,16 +19,15 @@ import {
1919
getNodesCPUUsageQuery,
2020
} from '../services/platformlibrary/metrics';
2121
import NonSymmetricalQuantileChart from './NonSymmetricalQuantileChart';
22+
import { HEIGHT_DEFAULT_CHART } from '../constants';
2223

2324
const DashboardChartCpuUsage = () => {
2425
const { isShowQuantileChart } = useShowQuantileChart();
2526
return (
2627
<>
2728
{isShowQuantileChart ? (
2829
<NonSymmetricalQuantileChart
29-
// @ts-expect-error - FIXME when you are working on it
3030
getQuantileQuery={getNodesCPUUsageQuantileQuery}
31-
// @ts-expect-error - FIXME when you are working on it
3231
getQuantileHoverQuery={getNodesCPUUsageOutpassingThresholdQuery}
3332
title={'CPU Usage'}
3433
yAxisType={'percentage'}
@@ -42,13 +41,11 @@ const DashboardChartCpuUsage = () => {
4241

4342
const DashboardChartCpuUsageWithoutQuantils = () => {
4443
const chartId = useChartId();
45-
const { register } = useChartLegend();
4644
const nodes = useNodes();
4745
const nodeAddresses = useNodeAddressesSelector(nodes);
4846

4947
const { interval, duration } = useMetricsTimeSpan();
5048
const { isLoading, series, startingTimeStamp } = useSingleChartSerie({
51-
// @ts-expect-error - FIXME when you are working on it
5249
getQuery: (timeSpanProps) => getNodesCPUUsageQuery(timeSpanProps),
5350
transformPrometheusDataToSeries: useCallback(
5451
(prometheusResult) =>
@@ -59,18 +56,12 @@ const DashboardChartCpuUsageWithoutQuantils = () => {
5956
),
6057
});
6158

62-
// Register series names with ChartLegendWrapper
63-
useEffect(() => {
64-
if (series && series.length > 0) {
65-
const seriesNames = series.map((s) => s.resource);
66-
register(chartId, seriesNames);
67-
}
68-
}, [chartId, register, series]);
59+
useChartLegendRegistration({ chartId, series, isSymmetrical: false });
6960

7061
return (
7162
<LineTimeSerieChart
7263
series={series}
73-
height={110}
64+
height={HEIGHT_DEFAULT_CHART}
7465
interval={interval}
7566
duration={duration}
7667
title="CPU Usage"

‎ui/src/components/DashboardChartMemory.tsx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ import {
33
useMetricsTimeSpan,
44
useChartId,
55
} from '@scality/core-ui/dist/next';
6-
import { useChartLegend } from '@scality/core-ui/dist/components/chartlegend/ChartLegendWrapper';
7-
8-
import { useCallback, useEffect } from 'react';
6+
import { useChartLegendRegistration } from '../hooks/useChartLegendRegistration';
7+
import { useCallback } from 'react';
98
import {
109
useNodes,
1110
useNodeAddressesSelector,
@@ -19,16 +18,15 @@ import {
1918
} from '../services/platformlibrary/metrics';
2019
import { getMultiResourceSeriesForChart } from '../services/graphUtils';
2120
import NonSymmetricalQuantileChart from './NonSymmetricalQuantileChart';
21+
import { HEIGHT_DEFAULT_CHART } from '../constants';
2222

2323
const DashboardChartMemory = () => {
2424
const { isShowQuantileChart } = useShowQuantileChart();
2525
return (
2626
<>
2727
{isShowQuantileChart ? (
2828
<NonSymmetricalQuantileChart
29-
// @ts-expect-error - FIXME when you are working on it
3029
getQuantileQuery={getNodesMemoryQuantileQuery}
31-
// @ts-expect-error - FIXME when you are working on it
3230
getQuantileHoverQuery={getNodesMemoryOutpassingThresholdQuery}
3331
title={'Memory'}
3432
yAxisType={'percentage'}
@@ -42,13 +40,11 @@ const DashboardChartMemory = () => {
4240

4341
const DashboardChartMemoryWithoutQuantiles = () => {
4442
const chartId = useChartId();
45-
const { register } = useChartLegend();
4643
const nodes = useNodes();
4744
const nodeAddresses = useNodeAddressesSelector(nodes);
4845

4946
const { interval, duration } = useMetricsTimeSpan();
5047
const { isLoading, series, startingTimeStamp } = useSingleChartSerie({
51-
// @ts-expect-error - FIXME when you are working on it
5248
getQuery: (timeSpanProps) => getNodesMemoryQuery(timeSpanProps),
5349
transformPrometheusDataToSeries: useCallback(
5450
(prometheusResult) => {
@@ -64,18 +60,12 @@ const DashboardChartMemoryWithoutQuantiles = () => {
6460
),
6561
});
6662

67-
// Register series names with ChartLegendWrapper
68-
useEffect(() => {
69-
if (series && series.length > 0) {
70-
const seriesNames = series.map((s) => s.resource);
71-
register(chartId, seriesNames);
72-
}
73-
}, [chartId, register, series]);
63+
useChartLegendRegistration({ chartId, series, isSymmetrical: false });
7464

7565
return (
7666
<LineTimeSerieChart
7767
series={series}
78-
height={110}
68+
height={HEIGHT_DEFAULT_CHART}
7969
interval={interval}
8070
duration={duration}
8171
title="Memory"

‎ui/src/components/DashboardChartSystemLoad.tsx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import {
33
useMetricsTimeSpan,
44
useChartId,
55
} from '@scality/core-ui/dist/next';
6-
import { useChartLegend } from '@scality/core-ui/dist/components/chartlegend/ChartLegendWrapper';
6+
import { useChartLegendRegistration } from '../hooks/useChartLegendRegistration';
77

8-
import { useCallback, useEffect } from 'react';
8+
import { useCallback } from 'react';
99
import {
1010
useNodeAddressesSelector,
1111
useNodes,
@@ -19,18 +19,18 @@ import {
1919
getNodesSystemLoadQuery,
2020
} from '../services/platformlibrary/metrics';
2121
import NonSymmetricalQuantileChart from './NonSymmetricalQuantileChart';
22+
import { HEIGHT_DEFAULT_CHART } from '../constants';
2223

2324
const DashboardChartSystemLoad = () => {
2425
const { isShowQuantileChart } = useShowQuantileChart();
2526
return (
2627
<>
2728
{isShowQuantileChart ? (
2829
<NonSymmetricalQuantileChart
29-
// @ts-expect-error - FIXME when you are working on it
3030
getQuantileQuery={getNodesSystemLoadQuantileQuery}
31-
// @ts-expect-error - FIXME when you are working on it
3231
getQuantileHoverQuery={getNodesSystemLoadOutpassingThresholdQuery}
3332
title={'System Load'}
33+
yAxisType={'percentage'}
3434
/>
3535
) : (
3636
<DashboardChartSystemLoadWithoutQuantiles />
@@ -41,15 +41,12 @@ const DashboardChartSystemLoad = () => {
4141

4242
const DashboardChartSystemLoadWithoutQuantiles = () => {
4343
const chartId = useChartId();
44-
const { register } = useChartLegend();
4544
const nodes = useNodes();
4645
const nodeAddresses = useNodeAddressesSelector(nodes);
4746

4847
const { interval, duration } = useMetricsTimeSpan();
4948
const { isLoading, series, startingTimeStamp } = useSingleChartSerie({
50-
getQuery: (timeSpanProps) =>
51-
// @ts-expect-error - FIXME when you are working on it
52-
getNodesSystemLoadQuery(timeSpanProps),
49+
getQuery: (timeSpanProps) => getNodesSystemLoadQuery(timeSpanProps),
5350
transformPrometheusDataToSeries: useCallback(
5451
(prometheusResult) =>
5552
getMultiResourceSeriesForChart(prometheusResult, nodeAddresses),
@@ -59,18 +56,12 @@ const DashboardChartSystemLoadWithoutQuantiles = () => {
5956
),
6057
});
6158

62-
// Register series names with ChartLegendWrapper
63-
useEffect(() => {
64-
if (series && series.length > 0) {
65-
const seriesNames = series.map((s) => s.resource);
66-
register(chartId, seriesNames);
67-
}
68-
}, [chartId, register, series]);
59+
useChartLegendRegistration({ chartId, series, isSymmetrical: false });
6960

7061
return (
7162
<LineTimeSerieChart
7263
series={series}
73-
height={110}
64+
height={HEIGHT_DEFAULT_CHART}
7465
interval={interval}
7566
duration={duration}
7667
title="System Load"

‎ui/src/components/DashboardChartThroughput.tsx‎

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import {
33
useMetricsTimeSpan,
44
useChartId,
55
} from '@scality/core-ui/dist/next';
6-
import { useChartLegend } from '@scality/core-ui/dist/components/chartlegend/ChartLegendWrapper';
6+
import { useChartLegendRegistration } from '../hooks/useChartLegendRegistration';
77

8-
import { useCallback, useEffect } from 'react';
8+
import { useCallback } from 'react';
99
import {
1010
useNodeAddressesSelector,
1111
useNodes,
@@ -22,7 +22,11 @@ import {
2222
} from '../services/platformlibrary/metrics';
2323
import { getMultipleSymmetricalSeries } from '../services/graphUtils';
2424
import SymmetricalQuantileChart from './SymmetricalQuantileChart';
25-
import { UNIT_RANGE_BS, YAXIS_TITLE_READ_WRITE } from '../constants';
25+
import {
26+
HEIGHT_SYMMETRICAL_CHART,
27+
UNIT_RANGE_BS,
28+
YAXIS_TITLE_READ_WRITE,
29+
} from '../constants';
2630

2731
const DashboardChartThroughput = () => {
2832
const { isShowQuantileChart } = useShowQuantileChart();
@@ -52,18 +56,15 @@ const DashboardChartThroughput = () => {
5256

5357
const DashboardChartThroughputWithoutQuantile = () => {
5458
const chartId = useChartId();
55-
const { register } = useChartLegend();
5659
const nodes = useNodes();
5760
const nodeAddresses = useNodeAddressesSelector(nodes);
5861

5962
const { interval, duration } = useMetricsTimeSpan();
6063
const { isLoading, series, startingTimeStamp } = useSymetricalChartSeries({
6164
getAboveQueries: (timeSpanProps) => [
62-
// @ts-expect-error - FIXME when you are working on it
6365
getNodesThroughputWriteQuery(timeSpanProps),
6466
],
6567
getBelowQueries: (timeSpanProps) => [
66-
// @ts-expect-error - FIXME when you are working on it
6768
getNodesThroughputReadQuery(timeSpanProps),
6869
],
6970
transformPrometheusDataToSeries: useCallback(
@@ -83,41 +84,23 @@ const DashboardChartThroughputWithoutQuantile = () => {
8384
nodeAddresses,
8485
);
8586

86-
const aboveSeries = allSeries.filter(
87-
(serie) => serie.metricPrefix === 'write',
88-
);
89-
90-
const belowSeries = allSeries.filter(
91-
(serie) => serie.metricPrefix === 'read',
92-
);
93-
return {
94-
above: aboveSeries,
95-
below: belowSeries,
96-
};
87+
return allSeries;
9788
},
9889
//Expect warning because of complex dependency
9990
// eslint-disable-next-line react-hooks/exhaustive-deps
10091
[JSON.stringify(nodeAddresses)],
10192
),
10293
});
10394

104-
// Register series names for symmetrical chart (above + below series)
105-
useEffect(() => {
106-
if (series && (series.above?.length > 0 || series.below?.length > 0)) {
107-
const aboveNames = series.above?.map((s) => s.resource) || [];
108-
const belowNames = series.below?.map((s) => s.resource) || [];
109-
const allSeriesNames = [...aboveNames, ...belowNames];
110-
register(chartId, allSeriesNames);
111-
}
112-
}, [chartId, register, series]);
95+
useChartLegendRegistration({ chartId, series, isSymmetrical: true });
11396

11497
return (
11598
<LineTimeSerieChart
11699
series={{
117100
above: series.above,
118101
below: series.below,
119102
}}
120-
height={150}
103+
height={HEIGHT_SYMMETRICAL_CHART}
121104
unitRange={UNIT_RANGE_BS}
122105
interval={interval}
123106
duration={duration}

‎ui/src/components/DashboardMetrics.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,17 @@ const DashboardMetrics = () => {
9494
)}
9595
</PanelActions>
9696
<DashboardScrollableArea>
97-
<ChartLegendWrapper colorSet={createColorSet}>
98-
<GraphsWrapper>
97+
<GraphsWrapper>
98+
<ChartLegendWrapper colorSet={createColorSet}>
9999
<DashboardChartCpuUsage />
100100
<DashboardChartMemory />
101101
<DashboardChartSystemLoad />
102+
</ChartLegendWrapper>
103+
<ChartLegendWrapper colorSet={createColorSet}>
102104
<DashboardChartThroughput />
103-
</GraphsWrapper>
104-
<ChartLegend shape="line" legendSize={'Smaller'} />
105-
</ChartLegendWrapper>
105+
<ChartLegend shape="line" legendSize={'Smaller'} />
106+
</ChartLegendWrapper>
107+
</GraphsWrapper>
106108
</DashboardScrollableArea>
107109
</MetricsContainer>
108110
);

0 commit comments

Comments
 (0)