Sync quantile chart in dashboard

Author: JeanMarcMilletScality

ui/src/components/NonSymmetricalQuantileChart.tsx

@@ -7,7 +7,11 @@ import {
 import { useCallback, useMemo } from 'react';
 import { UseQueryOptions } from 'react-query';
 import { useSelector } from 'react-redux';
-import { HEIGHT_DEFAULT_CHART, PORT_NODE_EXPORTER } from '../constants';
+import {
+  DASHBOARD_QUANTILE_SYNC_ID,
+  HEIGHT_DEFAULT_CHART,
+  PORT_NODE_EXPORTER,
+} from '../constants';
 import { useChartSeries, useNodeAddressesSelector, useNodes } from '../hooks';
 import {
   convertPrometheusResultToSerie,
@@ -164,6 +168,7 @@ const NonSymmetricalQuantileChart = ({
         isLoading={isLoadingQuantile}
         unitRange={unitRange}
         renderTooltip={renderTooltip}
+        syncId={DASHBOARD_QUANTILE_SYNC_ID}
       />
       <ChartLegend shape="line" legendSize="Smaller" />
     </ChartLegendWrapper>

ui/src/components/SymmetricalQuantileChart.tsx

@@ -7,7 +7,11 @@ import {
 } from '@scality/core-ui/dist/next';
 import { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { HEIGHT_SYMMETRICAL_CHART, PORT_NODE_EXPORTER } from '../constants';
+import {
+  DASHBOARD_QUANTILE_SYNC_ID,
+  HEIGHT_SYMMETRICAL_CHART,
+  PORT_NODE_EXPORTER,
+} from '../constants';
 import {
   useNodeAddressesSelector,
   useNodes,
@@ -154,6 +158,7 @@ const SymmetricalQuantileChart = ({
         yAxisType={'symmetrical'}
         yAxisTitle={yAxisTitle}
         unitRange={UNIT_RANGE_BS}
+        syncId={DASHBOARD_QUANTILE_SYNC_ID}
         renderTooltip={(tooltipProps) => {
           return (
             <SymmetricalQuantileTooltip

ui/src/constants.ts

@@ -106,6 +106,7 @@ export const HEIGHT_SYMMETRICAL_CHART = 160;
 export const NODES_LIMIT_QUANTILE = 8;
 export const NODE_SYNC_ID = 'nodeMetrics';
 export const DASHBOARD_SYNC_ID = 'dashboard';
+export const DASHBOARD_QUANTILE_SYNC_ID = 'dashboard-quantile';
 
 // Chart color values for consistent coloring across components
 export const CHART_COLOR_VALUES = Object.values(chartColors);