From baabf84951dfc815230a1d8c3fc1914ca868d16f Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 2 Dec 2024 17:16:12 +0000
Subject: [PATCH] Refactor Dashboard components for improved readability;
 update DashboardTextComponent to dynamically set height and fix formatting in
 DashboardValueComponent

---
 .../Components/DashboardValueComponent.ts     |  2 +-
 .../Components/DashboardChartComponent.tsx    |  3 ++-
 .../Components/DashboardTextComponent.tsx     |  5 ++++-
 .../Components/DashboardValueComponent.tsx    | 21 +++++++++++--------
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/Common/Utils/Dashboard/Components/DashboardValueComponent.ts b/Common/Utils/Dashboard/Components/DashboardValueComponent.ts
index 7e4bc8ec6ee..f7633fbba6c 100644
--- a/Common/Utils/Dashboard/Components/DashboardValueComponent.ts
+++ b/Common/Utils/Dashboard/Components/DashboardValueComponent.ts
@@ -21,7 +21,7 @@ export default class DashboardValueComponentUtil extends DashboardBaseComponentU
       minHeightInDashboardUnits: 1,
       minWidthInDashboardUnits: 1,
       arguments: {
-        title: ''
+        title: "",
       },
     };
   }
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
index 8e94e347864..2bd2c6ab7a4 100644
--- a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
@@ -62,7 +62,8 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
       if (
         !metricViewData.queryConfigs[0] ||
         !metricViewData.queryConfigs[0].metricQueryData.filterData ||
-        metricViewData.queryConfigs[0].metricQueryData.filterData?.aggegationType
+        metricViewData.queryConfigs[0].metricQueryData.filterData
+          ?.aggegationType
       ) {
         setIsLoading(false);
         setError(
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx
index c1e2b2b8359..5716d4c8d76 100644
--- a/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx
@@ -10,10 +10,13 @@ const DashboardTextComponentElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const textClassName: string = `truncate ${props.component.arguments.isBold ? "font-medium" : ""} ${props.component.arguments.isItalic ? "italic" : ""} ${props.component.arguments.isUnderline ? "underline" : ""}`;
+  const textHeightInxPx: number =props.dashboardComponentHeightInPx - 20;
 
   return (
     <div>
-      <div className={textClassName}>{props.component.arguments.text}</div>
+      <div className={textClassName} style={{
+        height: textHeightInxPx > 0 ? `${textHeightInxPx}px` : "auto",
+      }}>{props.component.arguments.text}</div>
     </div>
   );
 };
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
index 4eba818e76b..02de5001b51 100644
--- a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
+++ b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
@@ -21,7 +21,9 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
   const [metricResults, setMetricResults] = React.useState<
     Array<AggregatedResult>
   >([]);
-  const [aggregationType, setAggregationType] = React.useState<AggregationType>(AggregationType.Avg);
+  const [aggregationType, setAggregationType] = React.useState<AggregationType>(
+    AggregationType.Avg,
+  );
   const [error, setError] = React.useState<string | null>(null);
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
 
@@ -63,14 +65,18 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
       if (
         !metricViewData.queryConfigs[0] ||
         !metricViewData.queryConfigs[0].metricQueryData.filterData ||
-        metricViewData.queryConfigs[0].metricQueryData.filterData?.aggegationType
+        metricViewData.queryConfigs[0].metricQueryData.filterData
+          ?.aggegationType
       ) {
         setIsLoading(false);
         setError(
           "Please select a aggregation. Click here to add a aggregation.",
         );
       } else {
-        setAggregationType(metricViewData.queryConfigs[0].metricQueryData.filterData?.aggegationType as AggregationType || AggregationType.Avg);
+        setAggregationType(
+          (metricViewData.queryConfigs[0].metricQueryData.filterData
+            ?.aggegationType as AggregationType) || AggregationType.Avg,
+        );
       }
 
       try {
@@ -133,22 +139,19 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
       } else if (aggregationType === AggregationType.Count) {
         aggregatedValue += 1;
       }
-
     }
   }
 
-  if(aggregationType === AggregationType.Avg && avgCount > 0) {
+  if (aggregationType === AggregationType.Avg && avgCount > 0) {
     aggregatedValue = aggregatedValue / avgCount;
   }
 
   return (
     <div>
       <div className="text-center text-sm text-semibold">
-        {props.component.arguments.title || ''}
-      </div>
-      <div>
-        {aggregatedValue || '-'}
+        {props.component.arguments.title || ""}
       </div>
+      <div>{aggregatedValue || "-"}</div>
     </div>
   );
 };