Skip to content

Commit 783b056

Browse files
JeanMarcMilletScalityJeanMarcMilletScality
committed
Refactor chart components to use custom hook for legend registration. use register instead of direclty defining colorSet for ChartLegend
1 parent 8fc2960 commit 783b056

10 files changed

+264
-257
lines changed

‎ui/src/components/DashboardChartCpuUsage.tsx‎

Lines changed: 3 additions & 10 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,
@@ -41,7 +41,6 @@ const DashboardChartCpuUsage = () => {
4141

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

@@ -57,13 +56,7 @@ const DashboardChartCpuUsageWithoutQuantils = () => {
5756
),
5857
});
5958

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

6861
return (
6962
<LineTimeSerieChart

‎ui/src/components/DashboardChartMemory.tsx‎

Lines changed: 3 additions & 11 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,
@@ -41,7 +40,6 @@ const DashboardChartMemory = () => {
4140

4241
const DashboardChartMemoryWithoutQuantiles = () => {
4342
const chartId = useChartId();
44-
const { register } = useChartLegend();
4543
const nodes = useNodes();
4644
const nodeAddresses = useNodeAddressesSelector(nodes);
4745

@@ -62,13 +60,7 @@ const DashboardChartMemoryWithoutQuantiles = () => {
6260
),
6361
});
6462

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

7365
return (
7466
<LineTimeSerieChart

‎ui/src/components/DashboardChartSystemLoad.tsx‎

Lines changed: 3 additions & 10 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,
@@ -41,7 +41,6 @@ const DashboardChartSystemLoad = () => {
4141

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

@@ -57,13 +56,7 @@ const DashboardChartSystemLoadWithoutQuantiles = () => {
5756
),
5857
});
5958

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

6861
return (
6962
<LineTimeSerieChart

‎ui/src/components/DashboardChartThroughput.tsx‎

Lines changed: 3 additions & 12 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,
@@ -56,7 +56,6 @@ const DashboardChartThroughput = () => {
5656

5757
const DashboardChartThroughputWithoutQuantile = () => {
5858
const chartId = useChartId();
59-
const { register } = useChartLegend();
6059
const nodes = useNodes();
6160
const nodeAddresses = useNodeAddressesSelector(nodes);
6261

@@ -93,15 +92,7 @@ const DashboardChartThroughputWithoutQuantile = () => {
9392
),
9493
});
9594

96-
// Register series names for symmetrical chart (above + below series)
97-
useEffect(() => {
98-
if (series && (series.above?.length > 0 || series.below?.length > 0)) {
99-
const aboveNames = series.above?.map((s) => s.resource) || [];
100-
const belowNames = series.below?.map((s) => s.resource) || [];
101-
const allSeriesNames = [...aboveNames, ...belowNames];
102-
register(chartId, allSeriesNames);
103-
}
104-
}, [chartId, register, series]);
95+
useChartLegendRegistration({ chartId, series, isSymmetrical: true });
10596

10697
return (
10798
<LineTimeSerieChart

‎ui/src/components/MetricChart.tsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
import { useCallback } from 'react';
1+
import React, { useCallback, useMemo } from 'react';
22
import type { UseQueryOptions } from 'react-query';
33
import 'react-query';
44
import {
55
LineTimeSerieChart,
6+
useChartId,
67
useMetricsTimeSpan,
78
} from '@scality/core-ui/dist/next';
89
import { convertPrometheusResultToSerieWithAverage } from '../services/graphUtils';
9-
import { HEIGHT_DEFAULT_CHART, NODE_SYNC_ID } from '../constants';
10+
import {
11+
CLUSTER_AVERAGE,
12+
HEIGHT_DEFAULT_CHART,
13+
NODE_SYNC_ID,
14+
} from '../constants';
1015
import { useChartSeries } from '../hooks';
1116
import { TimeSpanProps } from '../services/platformlibrary/metrics';
17+
import { useChartLegendRegistration } from '../hooks/useChartLegendRegistration';
1218

1319
const MetricChart = ({
1420
title,
@@ -38,6 +44,15 @@ const MetricChart = ({
3844
label: string;
3945
}[];
4046
}) => {
47+
console.log(
48+
'DEBUG MetricChart',
49+
title,
50+
yAxisType,
51+
nodeName,
52+
instanceIP,
53+
showAvg,
54+
);
55+
const chartId = useChartId();
4156
const { interval, duration } = useMetricsTimeSpan();
4257
const { isLoading, series, startingTimeStamp } = useChartSeries({
4358
getQueries: useCallback(
@@ -68,6 +83,16 @@ const MetricChart = ({
6883
[nodeName, showAvg],
6984
),
7085
});
86+
const additionalNames = useMemo(
87+
() => (showAvg ? [CLUSTER_AVERAGE] : []),
88+
[showAvg],
89+
);
90+
useChartLegendRegistration({
91+
chartId,
92+
series,
93+
isSymmetrical: false,
94+
additionalNames,
95+
});
7196
return (
7297
<LineTimeSerieChart
7398
series={series}
@@ -84,4 +109,4 @@ const MetricChart = ({
84109
);
85110
};
86111

87-
export default MetricChart;
112+
export default React.memo(MetricChart);

‎ui/src/components/MetricSymmetricalChart.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
import { useCallback } from 'react';
1+
import React, { useCallback, useMemo } from 'react';
22
import type { UseQueryOptions } from 'react-query';
33
import 'react-query';
44
import {
55
LineTimeSerieChart,
6+
useChartId,
67
useMetricsTimeSpan,
78
} from '@scality/core-ui/dist/next';
89
import { getSeriesForSymmetricalChart } from '../services/graphUtils';
9-
import { HEIGHT_SYMMETRICAL_CHART, NODE_SYNC_ID } from '../constants';
10+
import {
11+
CLUSTER_AVERAGE,
12+
HEIGHT_SYMMETRICAL_CHART,
13+
NODE_SYNC_ID,
14+
} from '../constants';
1015
import { NodesState } from '../ducks/app/nodes';
1116
import { useSymetricalChartSeries } from '../hooks';
1217
import { TimeSpanProps } from '../services/platformlibrary/metrics';
18+
import { useChartLegendRegistration } from '../hooks/useChartLegendRegistration';
1319

1420
const MetricSymmetricalChart = ({
1521
title,
@@ -65,6 +71,7 @@ const MetricSymmetricalChart = ({
6571
planeInterface?: string;
6672
isPlaneInterfaceRequired?: boolean;
6773
}) => {
74+
const chartId = useChartId();
6875
const { interval, duration } = useMetricsTimeSpan();
6976
const { isLoading, series, startingTimeStamp } = useSymetricalChartSeries({
7077
getAboveQueries: useCallback(
@@ -90,7 +97,7 @@ const MetricSymmetricalChart = ({
9097
instanceIP,
9198
showAvg,
9299
planeInterface,
93-
JSON.stringify(nodesIPsInfo),
100+
nodesIPsInfo,
94101
getMetricAboveQuery,
95102
getMetricAboveAvgQuery,
96103
],
@@ -114,12 +121,11 @@ const MetricSymmetricalChart = ({
114121
];
115122
}
116123
},
117-
// eslint-disable-next-line react-hooks/exhaustive-deps
118124
[
119125
instanceIP,
120126
showAvg,
121127
planeInterface,
122-
JSON.stringify(nodesIPsInfo),
128+
nodesIPsInfo,
123129
getMetricBelowQuery,
124130
getMetricBelowAvgQuery,
125131
],
@@ -155,6 +161,16 @@ const MetricSymmetricalChart = ({
155161
[showAvg, nodeName, metricPrefixAbove, metricPrefixBelow],
156162
),
157163
});
164+
const additionalNames = useMemo(
165+
() => (showAvg ? [CLUSTER_AVERAGE] : []),
166+
[showAvg],
167+
);
168+
useChartLegendRegistration({
169+
chartId,
170+
series,
171+
isSymmetrical: true,
172+
additionalNames,
173+
});
158174
return (
159175
<LineTimeSerieChart
160176
series={{
@@ -175,4 +191,4 @@ const MetricSymmetricalChart = ({
175191
);
176192
};
177193

178-
export default MetricSymmetricalChart;
194+
export default React.memo(MetricSymmetricalChart);

0 commit comments

Comments
 (0)