Skip to content

Commit

Permalink
Refactor MonitorMetrics and MetricExplorer components to streamline s…
Browse files Browse the repository at this point in the history 
…tate management with MetricViewData and improve code readability
  • Loading branch information
@simlarsen
simlarsen committed Dec 11, 2024
1 parent e500886 commit 180d02c
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 87 deletions.
8 changes: 4 additions & 4 deletions Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -17,11 +18,10 @@ export interface ComponentProps {
const MetricMonitorStepForm: FunctionComponent<ComponentProps> = (
props: ComponentProps,
): ReactElement => {

const [monitorStepMetricMonitor, setMonitorStepMetricMonitor] =
React.useState<MonitorStepMetricMonitor>(
props.monitorStepMetricMonitor ||
MonitorStepMetricMonitorUtil.getDefault(),
MonitorStepMetricMonitorUtil.getDefault(),
);

useEffect(() => {
Expand Down Expand Up @@ -58,8 +58,8 @@ const MetricMonitorStepForm: FunctionComponent<ComponentProps> = (
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: {
Expand Down
9 changes: 3 additions & 6 deletions Dashboard/src/Components/Metrics/MetricExplorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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") || "";

Expand All @@ -20,9 +19,7 @@ const MetricExplorer: FunctionComponent = (): ReactElement => {

const startAndEndDate: InBetween<Date> = new InBetween(startDate, endDate);

const [metricViewData, setMetricViewData] = React.useState<
MetricViewData
>({
const [metricViewData, setMetricViewData] = React.useState<MetricViewData>({
startAndEndDate: startAndEndDate,
queryConfigs: [
{
Expand All @@ -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,
},
Expand Down
145 changes: 77 additions & 68 deletions Dashboard/src/Components/Metrics/MetricView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -86,7 +84,6 @@ const MetricView: FunctionComponent<ComponentProps> = (
});
}, []);


useEffect(() => {
if (
props.hideQueryElements &&
Expand Down Expand Up @@ -127,32 +124,36 @@ const MetricView: FunctionComponent<ComponentProps> = (
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));
Expand Down Expand Up @@ -195,23 +196,26 @@ const MetricView: FunctionComponent<ComponentProps> = (
return (
<Fragment>
<div className="space-y-3">
{!props.hideStartAndEndDate && <div className="mb-5">
<Card>
<div className="-mt-5">
<FieldLabelElement title="Start and End Time" required={true} />
<StartAndEndDate
type={StartAndEndDateType.DateTime}
initialValue={props.data.startAndEndDate || undefined}
onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
props.onChange && props.onChange({
...props.data,
startAndEndDate: startAndEndDate,
});
}}
/>
</div>
</Card>
</div>}
{!props.hideStartAndEndDate && (
<div className="mb-5">
<Card>
<div className="-mt-5">
<FieldLabelElement title="Start and End Time" required={true} />
<StartAndEndDate
type={StartAndEndDateType.DateTime}
initialValue={props.data.startAndEndDate || undefined}
onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
props.onChange &&
props.onChange({
...props.data,
startAndEndDate: startAndEndDate,
});
}}
/>
</div>
</Card>
</div>
)}

{!props.hideQueryElements && (
<div className="space-y-3">
Expand All @@ -225,10 +229,11 @@ const MetricView: FunctionComponent<ComponentProps> = (
...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}
Expand All @@ -239,10 +244,11 @@ const MetricView: FunctionComponent<ComponentProps> = (
];
newGraphConfigs.splice(index, 1);

props.onChange && props.onChange({
...props.data,
queryConfigs: newGraphConfigs,
});
props.onChange &&
props.onChange({
...props.data,
queryConfigs: newGraphConfigs,
});
}}
/>
);
Expand All @@ -265,21 +271,23 @@ const MetricView: FunctionComponent<ComponentProps> = (
...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={() => {
const newGraphConfigs: Array<MetricFormulaConfigData> = [
...props.data.formulaConfigs,
];
newGraphConfigs.splice(index, 1);
props.onChange && props.onChange({
...props.data,
formulaConfigs: newGraphConfigs,
});
props.onChange &&
props.onChange({
...props.data,
formulaConfigs: newGraphConfigs,
});
}}
/>
);
Expand All @@ -293,13 +301,14 @@ const MetricView: FunctionComponent<ComponentProps> = (
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(),
],
});
}}
/>
{/* <Button
Expand Down
7 changes: 2 additions & 5 deletions Dashboard/src/Components/Monitor/MetricMonitor/MetricMonitorPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,10 @@ const MetricMonitorPreview: FunctionComponent<ComponentProps> = (
const startAndEndDate: InBetween<Date> =
RollingTimeUtil.convertToStartAndEndDate(
props.monitorStepMetricMonitor?.rollingTime ||
RollingTimeUtil.getDefault(),
RollingTimeUtil.getDefault(),
);


const [metricViewData, setMetricViewData] = React.useState<
MetricViewData
>({
const [metricViewData, setMetricViewData] = React.useState<MetricViewData>({
startAndEndDate: startAndEndDate,
queryConfigs:
props.monitorStepMetricMonitor?.metricViewConfig.queryConfigs || [],
Expand Down
4 changes: 0 additions & 4 deletions Dashboard/src/Components/Monitor/MonitorMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,6 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveHours(endDate, -1);





const startAndEndDate: InBetween<Date> = new InBetween(startDate, endDate);

type GetQueryConfigByMonitorMetricTypesFunction =
Expand Down

0 comments on commit 180d02c

Please sign in to comment.