From d6f9971cb6dea033580a2300f07d57d704125c3a Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Tue, 3 Dec 2024 14:31:22 +0000
Subject: [PATCH] Refactor DashboardChartComponent and DashboardValueComponent
 for improved readability; add unit display in DashboardValueComponent

---
 .../Components/DashboardChartComponent.tsx    | 28 ++++++++-----------
 .../Components/DashboardValueComponent.tsx    | 13 +++++++++
 .../Components/Metrics/MetricQueryConfig.tsx  |  1 -
 Dashboard/src/Components/NavBar/NavBar.tsx    |  4 +--
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
index e5946af2f2..1b9d156423 100644
--- a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
@@ -92,16 +92,12 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
 
   useEffect(() => {
     fetchAggregatedResults();
-  }, [
-    props.dashboardStartAndEndDate,
-    props.metricNameAndUnits,
-  ]);
+  }, [props.dashboardStartAndEndDate, props.metricNameAndUnits]);
 
   const [metricQueryConfig, setMetricQueryConfig] = React.useState<
     MetricQueryConfigData | undefined
   >(props.component.arguments.metricQueryConfig);
 
-
   useEffect(() => {
     // set metricQueryConfig to the new value only if it is different from the previous value
     if (
@@ -139,18 +135,18 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
   const chartMetricViewData: MetricViewData = {
     queryConfigs: props.component.arguments.metricQueryConfig
       ? [
-        {
-          ...props.component.arguments.metricQueryConfig!,
-          metricAliasData: {
-            title: props.component.arguments.chartTitle || undefined,
-            description:
-              props.component.arguments.chartDescription || undefined,
-            metricVariable: undefined,
-            legend: props.component.arguments.legendText || undefined,
-            legendUnit: props.component.arguments.legendUnit || undefined,
+          {
+            ...props.component.arguments.metricQueryConfig!,
+            metricAliasData: {
+              title: props.component.arguments.chartTitle || undefined,
+              description:
+                props.component.arguments.chartDescription || undefined,
+              metricVariable: undefined,
+              legend: props.component.arguments.legendText || undefined,
+              legendUnit: props.component.arguments.legendUnit || undefined,
+            },
           },
-        },
-      ]
+        ]
       : [],
     startAndEndDate: DashboardStartAndEndDateUtil.getStartAndEndDate(
       props.dashboardStartAndEndDate,
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
index 9fdf5b82c1..4deaa47083 100644
--- a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
@@ -12,6 +12,7 @@ import AggregationType from "Common/Types/BaseDatabase/AggregationType";
 import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData";
 import JSONFunctions from "Common/Types/JSONFunctions";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import MetricNameAndUnit from "../../Metrics/Types/MetricNameAndUnit";
 
 export interface ComponentProps extends DashboardBaseComponentProps {
   component: DashboardValueComponent;
@@ -158,9 +159,20 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
     aggregatedValue = aggregatedValue / avgCount;
   }
 
+  // round to 2 decimal places
+  aggregatedValue = Math.round(aggregatedValue * 100) / 100;
+
   const valueHeightInPx: number = props.dashboardComponentHeightInPx * 0.4;
   const titleHeightInPx: number = props.dashboardComponentHeightInPx * 0.13;
 
+  const unit: string | undefined =
+    props.metricNameAndUnits?.find((item: MetricNameAndUnit) => {
+      return (
+        item.metricName?.toString() ===
+        props.component.arguments.metricQueryConfig?.metricQueryData.filterData.metricName?.toString()
+      );
+    })?.unit || "";
+
   return (
     <div className="w-full text-center h-full m-auto">
       <div
@@ -178,6 +190,7 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
         }}
       >
         {aggregatedValue || "0"}
+        {unit}
       </div>
     </div>
   );
diff --git a/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx b/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
index cc7485d8a5..67b2ba8b20 100644
--- a/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
+++ b/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
@@ -28,7 +28,6 @@ export interface ComponentProps {
 const MetricGraphConfig: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-
   const getContent: GetReactElementFunction = (): ReactElement => {
     return (
       <div>
diff --git a/Dashboard/src/Components/NavBar/NavBar.tsx b/Dashboard/src/Components/NavBar/NavBar.tsx
index 63f5f6ffdd..a99d84ee69 100644
--- a/Dashboard/src/Components/NavBar/NavBar.tsx
+++ b/Dashboard/src/Components/NavBar/NavBar.tsx
@@ -118,14 +118,14 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
         )}
       ></NavBarItem>
 
-      {/* <NavBarItem
+      <NavBarItem
         title="Dashboards"
         activeRoute={RouteMap[PageMap.DASHBOARDS]}
         icon={IconProp.Window}
         route={RouteUtil.populateRouteParams(
           RouteMap[PageMap.DASHBOARDS] as Route,
         )}
-      ></NavBarItem> */}
+      ></NavBarItem>
 
       <NavBarItem
         title="More"