From 180d02c53d19fff395b4ad4d787c9b4449228216 Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Wed, 11 Dec 2024 14:01:31 +0000 Subject: [PATCH] Refactor MonitorMetrics and MetricExplorer components to streamline state management with MetricViewData and improve code readability --- .../MetricMonitor/MetricMonitorStepForm.tsx | 8 +- .../src/Components/Metrics/MetricExplorer.tsx | 9 +- .../src/Components/Metrics/MetricView.tsx | 145 ++++++++++-------- .../MetricMonitor/MetricMonitorPreview.tsx | 7 +- .../src/Components/Monitor/MonitorMetrics.tsx | 4 - 5 files changed, 86 insertions(+), 87 deletions(-) diff --git a/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx b/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx index 923e225adf..841c721640 100644 --- a/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx +++ b/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx @@ -8,6 +8,7 @@ import InBetween from "Common/Types/BaseDatabase/InBetween"; import RollingTimePicker from "Common/UI/Components/RollingTimePicker/RollingTimePicker"; import RollingTimeUtil from "Common/Types/RollingTime/RollingTimeUtil"; import FieldLabelElement from "Common/UI/Components/Forms/Fields/FieldLabel"; +import MetricViewData from "../../../Metrics/Types/MetricViewData"; export interface ComponentProps { monitorStepMetricMonitor: MonitorStepMetricMonitor; @@ -17,11 +18,10 @@ export interface ComponentProps { const MetricMonitorStepForm: FunctionComponent = ( props: ComponentProps, ): ReactElement => { - const [monitorStepMetricMonitor, setMonitorStepMetricMonitor] = React.useState( props.monitorStepMetricMonitor || - MonitorStepMetricMonitorUtil.getDefault(), + MonitorStepMetricMonitorUtil.getDefault(), ); useEffect(() => { @@ -58,8 +58,8 @@ const MetricMonitorStepForm: FunctionComponent = ( formulaConfigs: monitorStepMetricMonitor.metricViewConfig.formulaConfigs, }} - onChange={(data) => { - // we dont care about start and end time here because it is not editable in metric view but editable in rolling time picker. + onChange={(data: MetricViewData) => { + // we dont care about start and end time here because it is not editable in metric view but editable in rolling time picker. setMonitorStepMetricMonitor({ ...monitorStepMetricMonitor, metricViewConfig: { diff --git a/Dashboard/src/Components/Metrics/MetricExplorer.tsx b/Dashboard/src/Components/Metrics/MetricExplorer.tsx index 78fba60965..f323804cdb 100644 --- a/Dashboard/src/Components/Metrics/MetricExplorer.tsx +++ b/Dashboard/src/Components/Metrics/MetricExplorer.tsx @@ -7,7 +7,6 @@ import InBetween from "Common/Types/BaseDatabase/InBetween"; import MetricViewData from "./Types/MetricViewData"; const MetricExplorer: FunctionComponent = (): ReactElement => { - const metricName: string = Navigation.getQueryStringByName("metricName") || ""; @@ -20,9 +19,7 @@ const MetricExplorer: FunctionComponent = (): ReactElement => { const startAndEndDate: InBetween = new InBetween(startDate, endDate); - const [metricViewData, setMetricViewData] = React.useState< - MetricViewData - >({ + const [metricViewData, setMetricViewData] = React.useState({ startAndEndDate: startAndEndDate, queryConfigs: [ { @@ -38,8 +35,8 @@ const MetricExplorer: FunctionComponent = (): ReactElement => { metricName: metricName, attributes: serviceName ? { - "resource.oneuptime.telemetry.service.name": serviceName, - } + "resource.oneuptime.telemetry.service.name": serviceName, + } : {}, aggegationType: MetricsAggregationType.Avg, }, diff --git a/Dashboard/src/Components/Metrics/MetricView.tsx b/Dashboard/src/Components/Metrics/MetricView.tsx index 1373088490..1b13c18d53 100644 --- a/Dashboard/src/Components/Metrics/MetricView.tsx +++ b/Dashboard/src/Components/Metrics/MetricView.tsx @@ -7,9 +7,7 @@ import React, { } from "react"; import MetricQueryConfig from "./MetricQueryConfig"; import MetricGraphConfig from "./MetricFormulaConfig"; -import Button, { - ButtonSize, -} from "Common/UI/Components/Button/Button"; +import Button, { ButtonSize } from "Common/UI/Components/Button/Button"; import Text from "Common/Types/Text"; import HorizontalRule from "Common/UI/Components/HorizontalRule/HorizontalRule"; import MetricsAggregationType from "Common/Types/Metrics/MetricsAggregationType"; @@ -86,7 +84,6 @@ const MetricView: FunctionComponent = ( }); }, []); - useEffect(() => { if ( props.hideQueryElements && @@ -127,32 +124,36 @@ const MetricView: FunctionComponent = ( setIsPageLoading(false); setPageError(""); - /// if there's no query then set the default query and fetch results. - if (props.data.queryConfigs.length === 0 && metricNamesAndUnits.length > 0 && metricNamesAndUnits[0] && metricNamesAndUnits[0].metricName) { - // then add a default query which would be the first - props.onChange && props.onChange({ - ...props.data, - queryConfigs: [ - { - metricAliasData: { - metricVariable: "a", - legend: "", - title: "", - description: "", - legendUnit: "" - }, - metricQueryData: { - filterData: { - metricName: metricNamesAndUnits[0].metricName, - aggegationType: MetricsAggregationType.Avg, - } + /// if there's no query then set the default query and fetch results. + if ( + props.data.queryConfigs.length === 0 && + metricNamesAndUnits.length > 0 && + metricNamesAndUnits[0] && + metricNamesAndUnits[0].metricName + ) { + // then add a default query which would be the first + props.onChange && + props.onChange({ + ...props.data, + queryConfigs: [ + { + metricAliasData: { + metricVariable: "a", + legend: "", + title: "", + description: "", + legendUnit: "", + }, + metricQueryData: { + filterData: { + metricName: metricNamesAndUnits[0].metricName, + aggegationType: MetricsAggregationType.Avg, + }, + }, }, - - } - ], - }); + ], + }); } - } catch (err) { setIsPageLoading(false); setPageError(API.getFriendlyErrorMessage(err as Error)); @@ -195,23 +196,26 @@ const MetricView: FunctionComponent = ( return (
- {!props.hideStartAndEndDate &&
- -
- - | null) => { - props.onChange && props.onChange({ - ...props.data, - startAndEndDate: startAndEndDate, - }); - }} - /> -
- -
} + {!props.hideStartAndEndDate && ( +
+ +
+ + | null) => { + props.onChange && + props.onChange({ + ...props.data, + startAndEndDate: startAndEndDate, + }); + }} + /> +
+ +
+ )} {!props.hideQueryElements && (
@@ -225,10 +229,11 @@ const MetricView: FunctionComponent = ( ...props.data.queryConfigs, ]; newGraphConfigs[index] = data; - props.onChange && props.onChange({ - ...props.data, - queryConfigs: newGraphConfigs, - }); + props.onChange && + props.onChange({ + ...props.data, + queryConfigs: newGraphConfigs, + }); }} data={queryConfig} telemetryAttributes={telemetryAttributes} @@ -239,10 +244,11 @@ const MetricView: FunctionComponent = ( ]; newGraphConfigs.splice(index, 1); - props.onChange && props.onChange({ - ...props.data, - queryConfigs: newGraphConfigs, - }); + props.onChange && + props.onChange({ + ...props.data, + queryConfigs: newGraphConfigs, + }); }} /> ); @@ -265,10 +271,11 @@ const MetricView: FunctionComponent = ( ...props.data.formulaConfigs, ]; newGraphConfigs[index] = data; - props.onChange && props.onChange({ - ...props.data, - formulaConfigs: newGraphConfigs, - }); + props.onChange && + props.onChange({ + ...props.data, + formulaConfigs: newGraphConfigs, + }); }} data={formulaConfig} onRemove={() => { @@ -276,10 +283,11 @@ const MetricView: FunctionComponent = ( ...props.data.formulaConfigs, ]; newGraphConfigs.splice(index, 1); - props.onChange && props.onChange({ - ...props.data, - formulaConfigs: newGraphConfigs, - }); + props.onChange && + props.onChange({ + ...props.data, + formulaConfigs: newGraphConfigs, + }); }} /> ); @@ -293,13 +301,14 @@ const MetricView: FunctionComponent = ( title="Add Metric" buttonSize={ButtonSize.Small} onClick={() => { - props.onChange && props.onChange({ - ...props.data, - queryConfigs: [ - ...props.data.queryConfigs, - getEmptyQueryConfigData(), - ], - }); + props.onChange && + props.onChange({ + ...props.data, + queryConfigs: [ + ...props.data.queryConfigs, + getEmptyQueryConfigData(), + ], + }); }} /> {/*