Refactor Dashboard components for improved readability; update Dashbo…

…ardTextComponent to dynamically set height and fix formatting in DashboardValueComponent
OneUptime · Dec 2, 2024 · baabf84 · baabf84
1 parent 359c36e
commit baabf84
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 };