Update monitor metric units for consistency and improve metric view legend handling

Common/Server/Utils/Monitor/MonitorResource.ts

@@ -603,7 +603,7 @@ export default class MonitorResourceUtil {
         monitorMetric.name = MonitorMetricType.IsOnline;
         monitorMetric.description = CheckOn.IsOnline + " status for monitor";
         monitorMetric.value = isOnline ? 1 : 0;
-        monitorMetric.unit = CheckOn.IsOnline;
+        monitorMetric.unit = "";
         monitorMetric.attributes = {
           monitorId: data.monitorId.toString(),
           projectId: data.projectId.toString(),
@@ -632,7 +632,7 @@ export default class MonitorResourceUtil {
         monitorMetric.name = MonitorMetricType.CPUUsagePercent;
         monitorMetric.description = CheckOn.CPUUsagePercent + " of Server/VM";
         monitorMetric.value = basicMetrics.cpuMetrics.percentUsed;
-        monitorMetric.unit = "Percent";
+        monitorMetric.unit = "%";
         monitorMetric.attributes = {
           monitorId: data.monitorId.toString(),
           projectId: data.projectId.toString(),
@@ -654,7 +654,7 @@ export default class MonitorResourceUtil {
         monitorMetric.description =
           CheckOn.MemoryUsagePercent + " of Server/VM";
         monitorMetric.value = basicMetrics.memoryMetrics.percentUsed;
-        monitorMetric.unit = "Percent";
+        monitorMetric.unit = "%";
         monitorMetric.attributes = {
           monitorId: data.monitorId.toString(),
           projectId: data.projectId.toString(),
@@ -677,7 +677,7 @@ export default class MonitorResourceUtil {
           monitorMetric.description =
             CheckOn.DiskUsagePercent + " of Server/VM";
           monitorMetric.value = diskMetric.percentUsed;
-          monitorMetric.unit = "Percent";
+          monitorMetric.unit = "%";
           monitorMetric.attributes = {
             monitorId: data.monitorId.toString(),
             projectId: data.projectId.toString(),
@@ -796,7 +796,7 @@ export default class MonitorResourceUtil {
         .isOnline
         ? 1
         : 0;
-      monitorMetric.unit = CheckOn.IsOnline;
+      monitorMetric.unit = "";
       monitorMetric.attributes = {
         monitorId: data.monitorId.toString(),
         projectId: data.projectId.toString(),
@@ -823,7 +823,7 @@ export default class MonitorResourceUtil {
       monitorMetric.value = (
         data.dataToProcess as ProbeMonitorResponse
       ).responseCode;
-      monitorMetric.unit = CheckOn.ResponseStatusCode;
+      monitorMetric.unit = "Status Code";
       monitorMetric.attributes = {
         monitorId: data.monitorId.toString(),
         projectId: data.projectId.toString(),

Common/Utils/Monitor/MonitorMetricType.ts

@@ -4,8 +4,6 @@ import MonitorMetricType from "../../Types/Monitor/MonitorMetricType";
 import MonitorType from "../../Types/Monitor/MonitorType";
 
 class MonitorMetricTypeUtil {
-
-
   public static getAggregationTypeByMonitorMetricType(
     monitorMetricType: MonitorMetricType,
   ): AggregationType {
@@ -60,18 +58,19 @@ class MonitorMetricTypeUtil {
       monitorType === MonitorType.Website
     ) {
       return [
+        MonitorMetricType.IsOnline,
         MonitorMetricType.ResponseTime,
         MonitorMetricType.ResponseStatusCode,
-        MonitorMetricType.IsOnline,
       ];
     }
 
     if (monitorType === MonitorType.Server) {
       return [
+        MonitorMetricType.IsOnline,
         MonitorMetricType.DiskUsagePercent,
         MonitorMetricType.CPUUsagePercent,
         MonitorMetricType.MemoryUsagePercent,
-        MonitorMetricType.IsOnline,
+        
       ];
     }
 
@@ -88,7 +87,7 @@ class MonitorMetricTypeUtil {
       monitorType === MonitorType.IP ||
       monitorType === MonitorType.Port
     ) {
-      return [MonitorMetricType.ResponseTime, MonitorMetricType.IsOnline];
+      return [MonitorMetricType.IsOnline, MonitorMetricType.ResponseTime ];
     }
 
     return [];

Dashboard/src/Components/Metrics/MetricView.tsx

@@ -234,17 +234,20 @@ const MetricView: FunctionComponent<ComponentProps> = (
           },
           yAxis: {
             // legend is the unit of the metric
-            legend:
+            legend: "",
+
+            options: {
+              type: YAxisType.Number,
+              formatter: (value: number) => {
+                const metricNameAndUnit: MetricNameAndUnit | undefined =
                   metricNamesAndUnits.find((m: MetricNameAndUnit) => {
                     return (
                       m.metricName ===
                       queryConfig.metricQueryData.filterData.metricName
                     );
-              })?.unit || "",
-            options: {
-              type: YAxisType.Number,
-              formatter: (value: number) => {
-                return `${value}`;
+                  });
+
+                return `${value} ${metricNameAndUnit?.unit || ""}`;
               },
               precision: YAxisPrecision.NoDecimals,
               max: "auto",
@@ -291,6 +294,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
         },
         groupBy: {
           name: true,
+          unit: true,
         },
       });
 
@@ -444,7 +448,12 @@ const MetricView: FunctionComponent<ComponentProps> = (
                   });
 
                   // if hideQueryElements is true then we should fetch the results immediately because apply button is hidden
-                  if (props.hideQueryElements) {
+                  if (
+                    props.hideQueryElements &&
+                    startAndEndDate &&
+                    startAndEndDate.startValue &&
+                    startAndEndDate.endValue
+                  ) {
                     fetchAggregatedResults().catch((err: Error) => {
                       setMetricResultsError(
                         API.getFriendlyErrorMessage(err as Error),

Dashboard/src/Components/Monitor/MonitorMetrics.tsx

@@ -11,7 +11,6 @@ import InBetween from "Common/Types/BaseDatabase/InBetween";
 import MetricView from "../Metrics/MetricView";
 import { MetricQueryConfigData } from "../Metrics/MetricQueryConfig";
 import DashboardNavigation from "../../Utils/Navigation";
-import AggregationType from "Common/Types/BaseDatabase/AggregationType";
 import MonitorMetricType from "Common/Types/Monitor/MonitorMetricType";
 import MonitorType from "Common/Types/Monitor/MonitorType";
 import API from "Common/UI/Utils/API/API";
@@ -110,7 +109,8 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
                 monitorId: props.monitorId.toString(),
                 projectId: DashboardNavigation.getProjectId()?.toString() || "",
               },
-              aggegationType: MonitorMetricTypeUtil.getAggregationTypeByMonitorMetricType(
+              aggegationType:
+                MonitorMetricTypeUtil.getAggregationTypeByMonitorMetricType(
                   monitorMetricType,
                 ),
             },