Enhance DashboardValueComponent and DashboardTextComponent for improv…

…ed layout and error handling; add metric query configuration and adjust title height calculation
OneUptime · Dec 2, 2024 · c7c6a54 · c7c6a54
1 parent 12fc986
commit c7c6a54
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/Common/Utils/Dashboard/Components/DashboardValueComponent.ts b/Common/Utils/Dashboard/Components/DashboardValueComponent.ts
@@ -22,6 +22,12 @@ export default class DashboardValueComponentUtil extends DashboardBaseComponentU
       minWidthInDashboardUnits: 1,
       arguments: {
         title: "",
+        metricQueryConfig: {
+          metricQueryData: {
+            filterData: {},
+            groupBy: undefined,
+          },
+        },
       },
     };
   }

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx
@@ -9,7 +9,7 @@ export interface ComponentProps extends DashboardBaseComponentProps {
 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 textClassName: string = `m-auto truncate ${props.component.arguments.isBold ? "font-medium" : ""} ${props.component.arguments.isItalic ? "italic" : ""} ${props.component.arguments.isUnderline ? "underline" : ""}`;
   const textHeightInxPx: number = props.dashboardComponentHeightInPx * 0.5;
 
   return (

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
@@ -46,7 +46,6 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
         !metricViewData.startAndEndDate?.endValue
       ) {
         setIsLoading(false);
-        setError("Please select a valid start and end date.");
         return;
       }
 
@@ -60,7 +59,6 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
           .length === 0
       ) {
         setIsLoading(false);
-        setError("Please select a metric. Click here to add a metric.");
         return;
       }
 
@@ -71,9 +69,6 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
           ?.aggegationType
       ) {
         setIsLoading(false);
-        setError(
-          "Please select an Aggregation Type. Click here to add a Aggregation Type.",
-        );
         return;
       }
       setAggregationType(
@@ -149,25 +144,25 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
   }
 
   const valueHeightInPx: number = props.dashboardComponentHeightInPx * 0.4;
-  const titleHeightInPx: number = props.dashboardComponentHeightInPx * 0.1;
+  const titleHeightInPx: number = props.dashboardComponentHeightInPx * 0.13;
 
   return (
-    <div className="w-full text-center">
+    <div className="w-full text-center h-full m-auto">
       <div
         style={{
           fontSize: titleHeightInPx > 0 ? `${titleHeightInPx}px` : "",
         }}
-        className="text-center text-sm text-semibold"
+        className="text-center text-bold mb-1 truncate"
       >
-        {props.component.arguments.title || ""}
+        {props.component.arguments.title || " "}
       </div>
       <div
-        className="text-center text-lg text-semibold"
+        className="text-center text-semibold truncate"
         style={{
           fontSize: valueHeightInPx > 0 ? `${valueHeightInPx}px` : "",
         }}
       >
-        {aggregatedValue || "-"}
+        {aggregatedValue || "0"}
       </div>
     </div>
   );