ui: Use the hook to manage the get series for the charts

scality · Sep 22, 2021 · 7a3aeff · 7a3aeff
1 parent 38ed7c5
commit 7a3aeff
Showing 1 changed file with 38 additions and 120 deletions.
diff --git a/ui/src/components/VolumeCharts.js b/ui/src/components/VolumeCharts.js
@@ -1,10 +1,5 @@
-import React, { useRef, useEffect } from 'react';
-import { useQuery } from 'react-query';
-import {
-  LineTemporalChart,
-  useMetricsTimeSpan,
-} from '@scality/core-ui/dist/next';
-import { useStartingTimeStamp } from '../containers/StartTimeProvider';
+import React from 'react';
+import { LineTemporalChart } from '@scality/core-ui/dist/next';
 import {
   getSeriesForSymmetricalChart,
   getSingleResourceSerie,
@@ -18,114 +13,12 @@ import {
   getVolumeThroughputWriteQuery,
   getVolumeUsageQuery,
 } from '../services/platformlibrary/metrics';
-import type { UseQueryResult } from 'react-query';
 import type { TimeSpanProps } from '../services/platformlibrary/metrics';
 import {
   UNIT_RANGE_BS,
   YAXIS_TITLE_READ_WRITE,
 } from '@scality/core-ui/dist/components/linetemporalchart/LineTemporalChart.component';
-
-const useSingleChartSerie = ({
-  getQuery,
-  resourceName,
-}: {
-  getQuery: (timeSpanProps: TimeSpanProps) => UseQueryResult,
-  resourceName: string,
-}) => {
-  const { startingTimeISO, currentTimeISO } = useStartingTimeStamp();
-  const { frequency } = useMetricsTimeSpan();
-
-  const startTimeRef = useRef(startingTimeISO);
-  const chartStartTimeRef = useRef(startingTimeISO);
-  const seriesRef = useRef();
-
-  startTimeRef.current = startingTimeISO;
-
-  const query = useQuery(
-    getQuery({
-      startingTimeISO,
-      currentTimeISO,
-      frequency,
-    }),
-  );
-
-  const isLoading = query.isLoading;
-
-  useEffect(() => {
-    if (!isLoading) {
-      chartStartTimeRef.current = startTimeRef.current;
-      seriesRef.current = getSingleResourceSerie(query.data, resourceName);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, resourceName]);
-
-  return {
-    series: seriesRef.current || [],
-    startingTimeStamp: Date.parse(chartStartTimeRef.current) / 1000,
-    isLoading,
-  };
-};
-
-const useSymetricalChartSeries = ({
-  getQueryAbove,
-  getQueryBelow,
-  aboveQueryPrefix,
-  belowQueryPrefix,
-  resourceName,
-}: {
-  getQueryAbove: (timeSpanProps: TimeSpanProps) => UseQueryResult,
-  getQueryBelow: (timeSpanProps: TimeSpanProps) => UseQueryResult,
-  resourceName: string,
-  aboveQueryPrefix: string,
-  belowQueryPrefix: string,
-}) => {
-  const { startingTimeISO, currentTimeISO } = useStartingTimeStamp();
-  const { frequency } = useMetricsTimeSpan();
-
-  const startTimeRef = useRef(startingTimeISO);
-  const chartStartTimeRef = useRef(startingTimeISO);
-  const seriesRef = useRef();
-
-  startTimeRef.current = startingTimeISO;
-
-  const aboveQuery = useQuery(
-    getQueryAbove({
-      startingTimeISO,
-      currentTimeISO,
-      frequency,
-    }),
-  );
-
-  const belowQuery = useQuery(
-    getQueryBelow({
-      startingTimeISO,
-      currentTimeISO,
-      frequency,
-    }),
-  );
-
-  const isLoading = aboveQuery.isLoading || belowQuery.isLoading;
-
-  useEffect(() => {
-    if (!isLoading) {
-      chartStartTimeRef.current = startTimeRef.current;
-      seriesRef.current = getSeriesForSymmetricalChart(
-        belowQuery.data,
-        aboveQuery.data,
-        resourceName,
-        aboveQueryPrefix,
-        belowQueryPrefix,
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, resourceName]);
-
-  return {
-    series: seriesRef.current || [],
-    startingTimeStamp: Date.parse(chartStartTimeRef.current) / 1000,
-    isLoading,
-  };
-};
+import { useSingleChartSerie, useSymetricalChartSeries } from '../hooks';
 
 export const VolumeThroughputChart = ({
   instanceIp,
@@ -141,9 +34,17 @@ export const VolumeThroughputChart = ({
       getVolumeThroughputWriteQuery(instanceIp, deviceName, timeSpanProps),
     getQueryBelow: (timeSpanProps: TimeSpanProps) =>
       getVolumeThroughputReadQuery(instanceIp, deviceName, timeSpanProps),
-    aboveQueryPrefix: 'write',
-    belowQueryPrefix: 'read',
-    resourceName: volumeName,
+    transformPrometheusDataToSeries: (
+      prometheusResultAbove,
+      prometheusResultBelow,
+    ) =>
+      getSeriesForSymmetricalChart(
+        prometheusResultAbove,
+        prometheusResultBelow,
+        volumeName,
+        'write',
+        'read',
+      ),
   });
 
   return (
@@ -175,9 +76,17 @@ export const VolumeLatencyChart = ({
       getVolumeLatencyWriteQuery(instanceIp, deviceName, timeSpanProps),
     getQueryBelow: (timeSpanProps: TimeSpanProps) =>
       getVolumeLatencyReadQuery(instanceIp, deviceName, timeSpanProps),
-    aboveQueryPrefix: 'write',
-    belowQueryPrefix: 'read',
-    resourceName: volumeName,
+    transformPrometheusDataToSeries: (
+      prometheusResultAbove,
+      prometheusResultBelow,
+    ) =>
+      getSeriesForSymmetricalChart(
+        prometheusResultAbove,
+        prometheusResultBelow,
+        volumeName,
+        'write',
+        'read',
+      ),
   });
 
   return (
@@ -214,9 +123,17 @@ export const VolumeIOPSChart = ({
       getVolumeIOPSWriteQuery(instanceIp, deviceName, timeSpanProps),
     getQueryBelow: (timeSpanProps: TimeSpanProps) =>
       getVolumeIOPSReadQuery(instanceIp, deviceName, timeSpanProps),
-    aboveQueryPrefix: 'write',
-    belowQueryPrefix: 'read',
-    resourceName: volumeName,
+    transformPrometheusDataToSeries: (
+      prometheusResultAbove,
+      prometheusResultBelow,
+    ) =>
+      getSeriesForSymmetricalChart(
+        prometheusResultAbove,
+        prometheusResultBelow,
+        volumeName,
+        'write',
+        'read',
+      ),
   });
 
   return (
@@ -245,7 +162,8 @@ export const VolumeUsageChart = ({
   const { series, startingTimeStamp, isLoading } = useSingleChartSerie({
     getQuery: (timeSpanProps: TimeSpanProps) =>
       getVolumeUsageQuery(pvcName, namespace, timeSpanProps),
-    resourceName: volumeName,
+    transformPrometheusDataToSeries: (prometheusResult) =>
+      getSingleResourceSerie(prometheusResult, volumeName),
   });
 
   return (