diff --git a/Common/Server/Utils/Monitor/Criteria/MetricMonitorCriteria.ts b/Common/Server/Utils/Monitor/Criteria/MetricMonitorCriteria.ts
index be1ce071ff..e4d6412bf1 100644
--- a/Common/Server/Utils/Monitor/Criteria/MetricMonitorCriteria.ts
+++ b/Common/Server/Utils/Monitor/Criteria/MetricMonitorCriteria.ts
@@ -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: {
diff --git a/Common/Types/Monitor/CriteriaFilter.ts b/Common/Types/Monitor/CriteriaFilter.ts
index b9ec3a2918..993234f0d6 100644
--- a/Common/Types/Monitor/CriteriaFilter.ts
+++ b/Common/Types/Monitor/CriteriaFilter.ts
@@ -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;
diff --git a/Common/Types/Monitor/MonitorCriteriaInstance.ts b/Common/Types/Monitor/MonitorCriteriaInstance.ts
index e89445139a..e22ec822f1 100644
--- a/Common/Types/Monitor/MonitorCriteriaInstance.ts
+++ b/Common/Types/Monitor/MonitorCriteriaInstance.ts
@@ -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
           },
diff --git a/Common/Types/Monitor/MonitorStep.ts b/Common/Types/Monitor/MonitorStep.ts
index 31132bdaed..9976ac182f 100644
--- a/Common/Types/Monitor/MonitorStep.ts
+++ b/Common/Types/Monitor/MonitorStep.ts
@@ -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;
diff --git a/Common/Types/Monitor/MonitorStepMetricMonitor.ts b/Common/Types/Monitor/MonitorStepMetricMonitor.ts
index 245df21e08..2a91bb7ea9 100644
--- a/Common/Types/Monitor/MonitorStepMetricMonitor.ts
+++ b/Common/Types/Monitor/MonitorStepMetricMonitor.ts
@@ -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;
   }
 }
diff --git a/Common/Types/RollingTime/RollingTime.ts b/Common/Types/RollingTime/RollingTime.ts
index c49b1b34e5..3a69ec99a1 100644
--- a/Common/Types/RollingTime/RollingTime.ts
+++ b/Common/Types/RollingTime/RollingTime.ts
@@ -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;
\ No newline at end of file
+export default RollingTime;
diff --git a/Common/Types/RollingTime/RollingTimeUtil.ts b/Common/Types/RollingTime/RollingTimeUtil.ts
index 3f0fd3c86a..5584608d6e 100644
--- a/Common/Types/RollingTime/RollingTimeUtil.ts
+++ b/Common/Types/RollingTime/RollingTimeUtil.ts
@@ -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);
     }
-}
\ No newline at end of file
+
+    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);
+  }
+}
diff --git a/Common/UI/Components/RollingTimePicker/RollingTimePicker.tsx b/Common/UI/Components/RollingTimePicker/RollingTimePicker.tsx
index c5ab2c1087..a35264a7fa 100644
--- a/Common/UI/Components/RollingTimePicker/RollingTimePicker.tsx
+++ b/Common/UI/Components/RollingTimePicker/RollingTimePicker.tsx
@@ -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;
diff --git a/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx b/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx
index 0ba773cd2d..08abea1884 100644
--- a/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx
+++ b/Dashboard/src/Components/Form/Monitor/MetricMonitor/MetricMonitorStepForm.tsx
@@ -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;
diff --git a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
index 089ffe43e0..f90306dce6 100644
--- a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
+++ b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
@@ -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));
       }
diff --git a/Dashboard/src/Components/Monitor/MetricMonitor/MetricMonitorPreview.tsx b/Dashboard/src/Components/Monitor/MetricMonitor/MetricMonitorPreview.tsx
index 54ffd558ba..8e2378db4d 100644
--- a/Dashboard/src/Components/Monitor/MetricMonitor/MetricMonitorPreview.tsx
+++ b/Dashboard/src/Components/Monitor/MetricMonitor/MetricMonitorPreview.tsx
@@ -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;
diff --git a/Dashboard/src/Components/Monitor/SummaryView/SummaryInfo.tsx b/Dashboard/src/Components/Monitor/SummaryView/SummaryInfo.tsx
index 671ee10168..c834ec3e59 100644
--- a/Dashboard/src/Components/Monitor/SummaryView/SummaryInfo.tsx
+++ b/Dashboard/src/Components/Monitor/SummaryView/SummaryInfo.tsx
@@ -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>
   );
 };
diff --git a/Dashboard/src/Pages/Monitor/View/Index.tsx b/Dashboard/src/Pages/Monitor/View/Index.tsx
index aa86b592af..a7f0a03d88 100644
--- a/Dashboard/src/Pages/Monitor/View/Index.tsx
+++ b/Dashboard/src/Pages/Monitor/View/Index.tsx
@@ -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 && (