github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

Refactor code for improved readability and consistency across Monitor components

Browse Source
This commit is contained in:
Simon Larsen
2024-12-10 14:37:31 +00:00
parent 14d3228786
commit 450488eb4f
13 changed files with 273 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Common/Server/Utils/Monitor/Criteria/MetricMonitorCriteria.ts
View File

@@ -1,10 +1,8 @@
import AggregateModel from "../../../../Types/BaseDatabase/AggregatedModel";
import AggregatedResult from "../../../../Types/BaseDatabase/AggregatedResult";
import MetricMonitorResponse from "../../../../Types/Monitor/MetricMonitor/MetricMonitorResponse";
import DataToProcess from "../DataToProcess";
import CompareCriteria from "./CompareCriteria";
import { CheckOn, CriteriaFilter } from "Common/Types/Monitor/CriteriaFilter";
import LogMonitorResponse from "Common/Types/Monitor/LogMonitor/LogMonitorResponse";
export default class LogMonitorCriteria {
public static async isMonitorInstanceCriteriaFilterMet(input: {

5
Common/Types/Monitor/CriteriaFilter.ts
View File

@@ -39,9 +39,8 @@ export enum CheckOn {
// Trace monitors.
SpanCount = "Span Count",
// Metric Monitors.
// Metric Monitors.
MetricValue = "Metric Value",
}
export interface ServerMonitorOptions {
@@ -81,7 +80,7 @@ export interface EvaluateOverTimeOptions {
export interface CriteriaFilter {
checkOn: CheckOn;
serverMonitorOptions?: ServerMonitorOptions | undefined;
metricMonitorOptions?: MetricMonitorOptions | undefined;
metricMonitorOptions?: MetricMonitorOptions | undefined;
filterType: FilterType | undefined;
value: string | number | undefined;
eveluateOverTime?: boolean | undefined;

19
Common/Types/Monitor/MonitorCriteriaInstance.ts
View File

@@ -61,7 +61,7 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
monitorName: string;
metricOptions?: {
metricAliases: Array<string>;
}
};
}): MonitorCriteriaInstance | null {
if (arg.monitorType === MonitorType.IncomingRequest) {
const monitorCriteriaInstance: MonitorCriteriaInstance =
@@ -130,7 +130,12 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
checkOn: CheckOn.MetricValue,
filterType: FilterType.GreaterThan,
metricMonitorOptions: {
metricAlias: arg.metricOptions && arg.metricOptions.metricAliases && arg.metricOptions.metricAliases.length > 0 ? arg.metricOptions.metricAliases[0] : undefined,
metricAlias:
arg.metricOptions &&
arg.metricOptions.metricAliases &&
arg.metricOptions.metricAliases.length > 0
? arg.metricOptions.metricAliases[0]
: undefined,
},
value: 0, // if there are some logs then monitor is online.
},
@@ -313,7 +318,7 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
monitorName: string;
metricOptions?: {
metricAliases: Array<string>;
}
};
}): MonitorCriteriaInstance {
const monitorCriteriaInstance: MonitorCriteriaInstance =
new MonitorCriteriaInstance();
@@ -451,7 +456,6 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
};
}
if (arg.monitorType === MonitorType.Metrics) {
monitorCriteriaInstance.data = {
id: ObjectID.generate().toString(),
@@ -462,7 +466,12 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
checkOn: CheckOn.MetricValue,
filterType: FilterType.EqualTo,
metricMonitorOptions: {
metricAlias: arg.metricOptions && arg.metricOptions.metricAliases && arg.metricOptions.metricAliases.length > 0 ? arg.metricOptions.metricAliases[0] : undefined,
metricAlias:
arg.metricOptions &&
arg.metricOptions.metricAliases &&
arg.metricOptions.metricAliases.length > 0
? arg.metricOptions.metricAliases[0]
: undefined,
},
value: 0, // if there are no logs then the monitor is offline
},

24
Common/Types/Monitor/MonitorStep.ts
View File

@@ -20,7 +20,9 @@ import { FindOperator } from "typeorm";
import MonitorStepTraceMonitor, {
MonitorStepTraceMonitorUtil,
} from "./MonitorStepTraceMonitor";
import MonitorStepMetricMonitor, { MonitorStepMetricMonitorUtil } from "./MonitorStepMetricMonitor";
import MonitorStepMetricMonitor, {
MonitorStepMetricMonitorUtil,
} from "./MonitorStepMetricMonitor";
export interface MonitorStepType {
id: string;
@@ -52,8 +54,7 @@ export interface MonitorStepType {
// trace monitor type.
traceMonitor?: MonitorStepTraceMonitor | undefined;
// Metric Monitor
// Metric Monitor
metricMonitor: MonitorStepMetricMonitor | undefined;
}
@@ -172,7 +173,9 @@ export default class MonitorStep extends DatabaseProperty {
return this;
}
public setMetricMonitor(metricMonitor: MonitorStepMetricMonitor): MonitorStep {
public setMetricMonitor(
metricMonitor: MonitorStepMetricMonitor,
): MonitorStep {
this.data!.metricMonitor = metricMonitor;
return this;
}
@@ -297,7 +300,9 @@ export default class MonitorStep extends DatabaseProperty {
this.data.logMonitor || MonitorStepLogMonitorUtil.getDefault(),
)
: undefined,
metricMonitor: this.data.metricMonitor ? MonitorStepMetricMonitorUtil.toJSON(this.data.metricMonitor) : undefined,
metricMonitor: this.data.metricMonitor
? MonitorStepMetricMonitorUtil.toJSON(this.data.metricMonitor)
: undefined,
traceMonitor: this.data.traceMonitor
? MonitorStepTraceMonitorUtil.toJSON(
this.data.traceMonitor ||
@@ -396,8 +401,8 @@ export default class MonitorStep extends DatabaseProperty {
logMonitor: json["logMonitor"]
? (json["logMonitor"] as JSONObject)
: undefined,
metricMonitor: json["metricMonitor"]
? (json["metricMonitor"] as JSONObject)
metricMonitor: json["metricMonitor"]
? (json["metricMonitor"] as JSONObject)
: undefined,
traceMonitor: json["traceMonitor"]
? (json["traceMonitor"] as JSONObject)
@@ -412,8 +417,9 @@ export default class MonitorStep extends DatabaseProperty {
monitorStep.data.traceMonitor = MonitorStepTraceMonitorUtil.getDefault();
}
if(monitorStep.data && !monitorStep.data?.metricMonitor) {
monitorStep.data.metricMonitor = MonitorStepMetricMonitorUtil.getDefault();
if (monitorStep.data && !monitorStep.data?.metricMonitor) {
monitorStep.data.metricMonitor =
MonitorStepMetricMonitorUtil.getDefault();
}
return monitorStep;

9
Common/Types/Monitor/MonitorStepMetricMonitor.ts
View File

@@ -8,22 +8,21 @@ export default interface MonitorStepMetricMonitor {
}
export class MonitorStepMetricMonitorUtil {
public static getDefault(): MonitorStepMetricMonitor {
return {
metricViewConfig: {
queryConfigs: [],
formulaConfigs: []
formulaConfigs: [],
},
rollingTime: RollingTime.Past1Minute
rollingTime: RollingTime.Past1Minute,
};
}
public static fromJSON(json: JSONObject): MonitorStepMetricMonitor {
return (json as any) as MonitorStepMetricMonitor;
return json as any as MonitorStepMetricMonitor;
}
public static toJSON(monitor: MonitorStepMetricMonitor): JSONObject {
return (monitor as any) as JSONObject;
return monitor as any as JSONObject;
}
}

45
Common/Types/RollingTime/RollingTime.ts
View File

@@ -1,25 +1,24 @@
enum RollingTime {
Past1Minute = "Past 1 Minute",
Past5Minutes = "Past 5 Minutes",
Past10Minutes = "Past 10 Minutes",
Past15Minutes = "Past 15 Minutes",
Past30Minutes = "Past 30 Minutes",
Past1Hour = "Past 1 Hour",
Past2Hours = "Past 2 Hours",
Past3Hours = "Past 3 Hours",
Past6Hours = "Past 6 Hours",
Past12Hours = "Past 12 Hours",
Past1Hours = "Past 1 Day",
Past2Days = "Past 2 Days",
Past3Days = "Past 3 Days",
Past7Days = "Past 7 Days",
Past14Days = "Past 14 Days",
Past30Days = "Past 30 Days",
Past60Days = "Past 60 Days",
Past90Days = "Past 90 Days",
Past180Days = "Past 180 Days",
Past365Days = "Past 365 Days",
enum RollingTime {
Past1Minute = "Past 1 Minute",
Past5Minutes = "Past 5 Minutes",
Past10Minutes = "Past 10 Minutes",
Past15Minutes = "Past 15 Minutes",
Past30Minutes = "Past 30 Minutes",
Past1Hour = "Past 1 Hour",
Past2Hours = "Past 2 Hours",
Past3Hours = "Past 3 Hours",
Past6Hours = "Past 6 Hours",
Past12Hours = "Past 12 Hours",
Past1Hours = "Past 1 Day",
Past2Days = "Past 2 Days",
Past3Days = "Past 3 Days",
Past7Days = "Past 7 Days",
Past14Days = "Past 14 Days",
Past30Days = "Past 30 Days",
Past60Days = "Past 60 Days",
Past90Days = "Past 90 Days",
Past180Days = "Past 180 Days",
Past365Days = "Past 365 Days",
}
export default RollingTime;
export default RollingTime;

180
Common/Types/RollingTime/RollingTimeUtil.ts
View File

@@ -2,99 +2,97 @@ import InBetween from "../BaseDatabase/InBetween";
import OneUptimeDate from "../Date";
import RollingTime from "./RollingTime";
export default class RollingTimeUtil {
export default class RollingTimeUtil {
public static getDefault(): RollingTime {
return RollingTime.Past1Minute;
}
public static convertToStartAndEndDate(
rollingTime: RollingTime,
): InBetween<Date> {
const endDate: Date = OneUptimeDate.getCurrentDate();
let startDate: Date = OneUptimeDate.getCurrentDate();
public static getDefault(): RollingTime {
return RollingTime.Past1Minute;
if (rollingTime === RollingTime.Past1Minute) {
startDate = OneUptimeDate.addRemoveMinutes(endDate, -1);
}
public static convertToStartAndEndDate(rollingTime: RollingTime): InBetween<Date> {
const endDate: Date = OneUptimeDate.getCurrentDate();
let startDate: Date = OneUptimeDate.getCurrentDate();
if(rollingTime === RollingTime.Past1Minute){
startDate = OneUptimeDate.addRemoveMinutes(endDate, -1);
}
if(rollingTime === RollingTime.Past5Minutes){
startDate = OneUptimeDate.addRemoveMinutes(endDate, -5);
}
if(rollingTime === RollingTime.Past10Minutes){
startDate = OneUptimeDate.addRemoveMinutes(endDate, -10);
}
if(rollingTime === RollingTime.Past15Minutes){
startDate = OneUptimeDate.addRemoveMinutes(endDate, -15);
}
if(rollingTime === RollingTime.Past30Minutes){
startDate = OneUptimeDate.addRemoveMinutes(endDate, -30);
}
if(rollingTime === RollingTime.Past1Hour){
startDate = OneUptimeDate.addRemoveHours(endDate, -1);
}
if(rollingTime === RollingTime.Past2Hours){
startDate = OneUptimeDate.addRemoveHours(endDate, -2);
}
if(rollingTime === RollingTime.Past3Hours){
startDate = OneUptimeDate.addRemoveHours(endDate, -3);
}
if(rollingTime === RollingTime.Past6Hours){
startDate = OneUptimeDate.addRemoveHours(endDate, -6);
}
if(rollingTime === RollingTime.Past12Hours){
startDate = OneUptimeDate.addRemoveHours(endDate, -12);
}
if(rollingTime === RollingTime.Past1Hours){
startDate = OneUptimeDate.addRemoveDays(endDate, -1);
}
if(rollingTime === RollingTime.Past2Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -2);
}
if(rollingTime === RollingTime.Past3Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -3);
}
if(rollingTime === RollingTime.Past7Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -7);
}
if(rollingTime === RollingTime.Past14Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -14);
}
if(rollingTime === RollingTime.Past30Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -30);
}
if(rollingTime === RollingTime.Past60Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -60);
}
if(rollingTime === RollingTime.Past90Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -90);
}
if(rollingTime === RollingTime.Past180Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -180);
}
if(rollingTime === RollingTime.Past365Days){
startDate = OneUptimeDate.addRemoveDays(endDate, -365);
}
return new InBetween(startDate, endDate);
if (rollingTime === RollingTime.Past5Minutes) {
startDate = OneUptimeDate.addRemoveMinutes(endDate, -5);
}
}
if (rollingTime === RollingTime.Past10Minutes) {
startDate = OneUptimeDate.addRemoveMinutes(endDate, -10);
}
if (rollingTime === RollingTime.Past15Minutes) {
startDate = OneUptimeDate.addRemoveMinutes(endDate, -15);
}
if (rollingTime === RollingTime.Past30Minutes) {
startDate = OneUptimeDate.addRemoveMinutes(endDate, -30);
}
if (rollingTime === RollingTime.Past1Hour) {
startDate = OneUptimeDate.addRemoveHours(endDate, -1);
}
if (rollingTime === RollingTime.Past2Hours) {
startDate = OneUptimeDate.addRemoveHours(endDate, -2);
}
if (rollingTime === RollingTime.Past3Hours) {
startDate = OneUptimeDate.addRemoveHours(endDate, -3);
}
if (rollingTime === RollingTime.Past6Hours) {
startDate = OneUptimeDate.addRemoveHours(endDate, -6);
}
if (rollingTime === RollingTime.Past12Hours) {
startDate = OneUptimeDate.addRemoveHours(endDate, -12);
}
if (rollingTime === RollingTime.Past1Hours) {
startDate = OneUptimeDate.addRemoveDays(endDate, -1);
}
if (rollingTime === RollingTime.Past2Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -2);
}
if (rollingTime === RollingTime.Past3Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -3);
}
if (rollingTime === RollingTime.Past7Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -7);
}
if (rollingTime === RollingTime.Past14Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -14);
}
if (rollingTime === RollingTime.Past30Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -30);
}
if (rollingTime === RollingTime.Past60Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -60);
}
if (rollingTime === RollingTime.Past90Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -90);
}
if (rollingTime === RollingTime.Past180Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -180);
}
if (rollingTime === RollingTime.Past365Days) {
startDate = OneUptimeDate.addRemoveDays(endDate, -365);
}
return new InBetween(startDate, endDate);
}
}

71
Common/UI/Components/RollingTimePicker/RollingTimePicker.tsx
View File

@@ -4,52 +4,55 @@ import DropdownUtil from "../../Utils/Dropdown";
import RollingTime from "../../../Types/RollingTime/RollingTime";
export interface ComponentProps {
initialValue?: undefined | RollingTime;
value?: RollingTime | undefined;
onChange?: undefined | ((value: RollingTime) => void);
initialValue?: undefined | RollingTime;
value?: RollingTime | undefined;
onChange?: undefined | ((value: RollingTime) => void);
}
const RollingTimePicker: FunctionComponent<ComponentProps> = (
props: ComponentProps,
props: ComponentProps,
): ReactElement => {
const [rollingTime, setRollingTime] = React.useState<RollingTime>(
props.initialValue || RollingTime.Past1Minute
);
const [rollingTime, setRollingTime] = React.useState<RollingTime>(
props.initialValue || RollingTime.Past1Minute,
);
const dropdownOptions: Array<DropdownOption> = DropdownUtil.getDropdownOptionsFromEnum(RollingTime);
const dropdownOptions: Array<DropdownOption> =
DropdownUtil.getDropdownOptionsFromEnum(RollingTime);
useEffect(() => {
if (props.value) {
setRollingTime(props.value);
}
}, [props.value]);
useEffect(() => {
if (rollingTime) {
props.onChange && props.onChange(rollingTime);
}
useEffect(() => {
if (props.value) {
setRollingTime(props.value);
}
, [rollingTime]);
}, [props.value]);
useEffect(() => {
if (rollingTime) {
props.onChange && props.onChange(rollingTime);
}
}, [rollingTime]);
const currentDropdownOption: DropdownOption | undefined = dropdownOptions.find((option) => option.value === rollingTime);
const currentDropdownOption: DropdownOption | undefined =
dropdownOptions.find((option: DropdownOption) => {
return option.value === rollingTime;
});
return <Dropdown
value={currentDropdownOption}
onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
if (value === null) {
return;
}
return (
<Dropdown
value={currentDropdownOption}
onChange={(value: DropdownValue | Array<DropdownValue> | null) => {
if (value === null) {
return;
}
if (Array.isArray(value)) {
return;
}
if (Array.isArray(value)) {
return;
}
setRollingTime(value as RollingTime);
}}
options={dropdownOptions}
/>;
setRollingTime(value as RollingTime);
}}
options={dropdownOptions}
/>
);
};
export default RollingTimePicker;

77
Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx
View File

@@ -1,4 +1,6 @@
import MonitorStepMetricMonitor, { MonitorStepMetricMonitorUtil } from "Common/Types/Monitor/MonitorStepMetricMonitor";
import MonitorStepMetricMonitor, {
MonitorStepMetricMonitorUtil,
} from "Common/Types/Monitor/MonitorStepMetricMonitor";
import React, { FunctionComponent, ReactElement, useEffect } from "react";
import MetricView from "../../../Metrics/MetricView";
import RollingTime from "Common/Types/RollingTime/RollingTime";
@@ -7,45 +9,50 @@ import RollingTimePicker from "Common/UI/Components/RollingTimePicker/RollingTim
import RollingTimeUtil from "Common/Types/RollingTime/RollingTimeUtil";
export interface ComponentProps {
monitorStepMetricMonitor: MonitorStepMetricMonitor;
onChange: (
monitorStepMetricMonitor: MonitorStepMetricMonitor,
) => void;
monitorStepMetricMonitor: MonitorStepMetricMonitor;
onChange: (monitorStepMetricMonitor: MonitorStepMetricMonitor) => void;
}
const MetricMonitorStepForm: FunctionComponent<ComponentProps> = (
props: ComponentProps,
props: ComponentProps,
): ReactElement => {
const [monitorStepMetricMonitor, setMonitorStepMetricMonitor] =
React.useState<MonitorStepMetricMonitor>(props.monitorStepMetricMonitor || MonitorStepMetricMonitorUtil.getDefault());
useEffect(() => {
props.onChange(monitorStepMetricMonitor);
}, [
monitorStepMetricMonitor,
])
const startAndEndDate: InBetween<Date> = RollingTimeUtil.convertToStartAndEndDate(monitorStepMetricMonitor.rollingTime || RollingTime.Past1Minute);
return (
<div>
<RollingTimePicker value={monitorStepMetricMonitor.rollingTime} onChange={(value: RollingTime) => {
setMonitorStepMetricMonitor({
...monitorStepMetricMonitor,
rollingTime: value,
});
}} />
<MetricView
data={{
startAndEndDate: startAndEndDate,
queryConfigs: monitorStepMetricMonitor.metricViewConfig.queryConfigs,
formulaConfigs: monitorStepMetricMonitor.metricViewConfig.formulaConfigs,
}}
/>
</div>
const [monitorStepMetricMonitor, setMonitorStepMetricMonitor] =
React.useState<MonitorStepMetricMonitor>(
props.monitorStepMetricMonitor ||
MonitorStepMetricMonitorUtil.getDefault(),
);
useEffect(() => {
props.onChange(monitorStepMetricMonitor);
}, [monitorStepMetricMonitor]);
const startAndEndDate: InBetween<Date> =
RollingTimeUtil.convertToStartAndEndDate(
monitorStepMetricMonitor.rollingTime || RollingTime.Past1Minute,
);
return (
<div>
<RollingTimePicker
value={monitorStepMetricMonitor.rollingTime}
onChange={(value: RollingTime) => {
setMonitorStepMetricMonitor({
...monitorStepMetricMonitor,
rollingTime: value,
});
}}
/>
<MetricView
data={{
startAndEndDate: startAndEndDate,
queryConfigs: monitorStepMetricMonitor.metricViewConfig.queryConfigs,
formulaConfigs:
monitorStepMetricMonitor.metricViewConfig.formulaConfigs,
}}
/>
</div>
);
};
export default MetricMonitorStepForm;

47
Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
View File

@@ -63,7 +63,9 @@ import MonitorTestForm from "./MonitorTest";
import MonitorSteps from "Common/Types/Monitor/MonitorSteps";
import Probe from "Common/Models/DatabaseModels/Probe";
import MetricMonitorStepForm from "./MetricMonitor/MetricMonitorStepForm";
import MonitorStepMetricMonitor, { MonitorStepMetricMonitorUtil } from "Common/Types/Monitor/MonitorStepMetricMonitor";
import MonitorStepMetricMonitor, {
MonitorStepMetricMonitorUtil,
} from "Common/Types/Monitor/MonitorStepMetricMonitor";
export interface ComponentProps {
monitorStatusDropdownOptions: Array<DropdownOption>;
@@ -150,28 +152,28 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
}
};
const fetchMetricAttributes: PromiseVoidFunction =
async (): Promise<void> => {
const attributeRepsonse: HTTPResponse<JSONObject> | HTTPErrorResponse =
await API.post(
URL.fromString(APP_API_URL.toString()).addRoute(
"/telemetry/metrics/get-attributes",
),
{},
{
...ModelAPI.getCommonHeaders(),
},
);
const fetchMetricAttributes: PromiseVoidFunction = async (): Promise<void> => {
const attributeRepsonse: HTTPResponse<JSONObject> | HTTPErrorResponse =
await API.post(
URL.fromString(APP_API_URL.toString()).addRoute(
"/telemetry/metrics/get-attributes",
),
{},
{
...ModelAPI.getCommonHeaders(),
},
);
if (attributeRepsonse instanceof HTTPErrorResponse) {
throw attributeRepsonse;
} else {
const attributes: Array<string> = attributeRepsonse.data[
"attributes"
] as Array<string>;
setAttributeKeys(attributes);
}
};
if (attributeRepsonse instanceof HTTPErrorResponse) {
throw attributeRepsonse;
} else {
const attributes: Array<string> = attributeRepsonse.data[
"attributes"
] as Array<string>;
setAttributeKeys(attributes);
}
};
const fetchTelemetryServices: PromiseVoidFunction =
async (): Promise<void> => {
@@ -217,7 +219,6 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
if (props.monitorType === MonitorType.Metrics) {
await fetchMetricAttributes();
}
} catch (err) {
setError(API.getFriendlyErrorMessage(err as Error));
}

29
Dashboard/src/Components/Monitor/MetricMonitor/MetricMonitorPreview.tsx
View File

@@ -5,24 +5,29 @@ import InBetween from "Common/Types/BaseDatabase/InBetween";
import RollingTimeUtil from "Common/Types/RollingTime/RollingTimeUtil";
export interface ComponentProps {
monitorStepMetricMonitor: MonitorStepMetricMonitor | undefined;
monitorStepMetricMonitor: MonitorStepMetricMonitor | undefined;
}
const MetricMonitorPreview: FunctionComponent<ComponentProps> = (
props: ComponentProps,
props: ComponentProps,
): ReactElement => {
const startAndEndDate: InBetween<Date> =
RollingTimeUtil.convertToStartAndEndDate(
props.monitorStepMetricMonitor?.rollingTime ||
RollingTimeUtil.getDefault(),
);
const startAndEndDate: InBetween<Date> = RollingTimeUtil.convertToStartAndEndDate(
props.monitorStepMetricMonitor?.rollingTime || RollingTimeUtil.getDefault(),
)
return <MetricView
data={{
startAndEndDate: startAndEndDate,
queryConfigs: props.monitorStepMetricMonitor?.metricViewConfig.queryConfigs || [],
formulaConfigs: props.monitorStepMetricMonitor?.metricViewConfig.formulaConfigs || [],
}}
return (
<MetricView
data={{
startAndEndDate: startAndEndDate,
queryConfigs:
props.monitorStepMetricMonitor?.metricViewConfig.queryConfigs || [],
formulaConfigs:
props.monitorStepMetricMonitor?.metricViewConfig.formulaConfigs || [],
}}
/>
);
};
export default MetricMonitorPreview;

11
Dashboard/src/Components/Monitor/SummaryView/SummaryInfo.tsx
View File

@@ -159,11 +159,12 @@ const SummaryInfo: FunctionComponent<ComponentProps> = (
)}
{(props.monitorType === MonitorType.Logs ||
props.monitorType === MonitorType.Traces || props.monitorType === MonitorType.Metrics) && (
<TelemetryMonitorSummaryView
telemetryMonitorSummary={props.telemetryMonitorSummary}
/>
)}
props.monitorType === MonitorType.Traces ||
props.monitorType === MonitorType.Metrics) && (
<TelemetryMonitorSummaryView
telemetryMonitorSummary={props.telemetryMonitorSummary}
/>
)}
</div>
);
};

4
Dashboard/src/Pages/Monitor/View/Index.tsx
View File

@@ -566,9 +566,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (): ReactElement => {
</div>
)}
{monitor?.monitorType === MonitorType.Metrics &&
{monitor?.monitorType === MonitorType.Metrics &&
monitor.monitorSteps &&
monitor.monitorSteps.data?.monitorStepsInstanceArray &&
monitor.monitorSteps.data?.monitorStepsInstanceArray.length > 0 && (