From 7a3aeff36625bd382f7353c9111cff1bb848d13b Mon Sep 17 00:00:00 2001 From: YanJin Date: Wed, 22 Sep 2021 16:43:30 +0200 Subject: [PATCH] ui: Use the hook to manage the get series for the charts --- ui/src/components/VolumeCharts.js | 158 +++++++----------------------- 1 file changed, 38 insertions(+), 120 deletions(-) diff --git a/ui/src/components/VolumeCharts.js b/ui/src/components/VolumeCharts.js index a9a4ad9537..e3b9aaa8e9 100644 --- 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 (