Refactor dashboard components to utilize JSONFunctions for deserializ…

…ation of dashboard view configurations
OneUptime · Nov 28, 2024 · 5c2fa28 · 5c2fa28
1 parent 2f8495e
commit 5c2fa28
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx b/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx
@@ -64,7 +64,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
             hideSubmitButton={true}
             ref={formRef}
             initialValues={{
-              ...(component || {}),
+              ...(component?.arguments || {}),
             }}
             onChange={(values: FormValues<JSONObject>) => {
               setComponent({

diff --git a/Dashboard/src/Components/Dashboard/Canvas/Index.tsx b/Dashboard/src/Components/Dashboard/Canvas/Index.tsx
@@ -8,6 +8,7 @@ import DashboardBaseComponentElement from "../Components/DashboardBaseComponent"
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 import ObjectID from "Common/Types/ObjectID";
 import ComponentSettingsSideOver from "./ComponentSettingsSideOver";
+import JSONFunctions from "Common/Types/JSONFunctions";
 
 export interface ComponentProps {
   dashboardViewConfig: DashboardViewConfig;
@@ -153,7 +154,11 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
       components: [...updatedComponents],
     };
 
-    props.onDashboardViewConfigChange(updatedDashboardViewConfig);
+    props.onDashboardViewConfigChange(
+      JSONFunctions.deserializeValue(
+        updatedDashboardViewConfig,
+      ) as DashboardViewConfig,
+    );
   };
 
   const renderComponent: RenderComponentFunction = (

diff --git a/Dashboard/src/Components/Dashboard/DashboardView.tsx b/Dashboard/src/Components/Dashboard/DashboardView.tsx
@@ -25,6 +25,7 @@ import PageLoader from "Common/UI/Components/Loader/PageLoader";
 import DashboardViewConfigUtil from "Common/Utils/Dashboard/DashboardViewConfig";
 import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
 import { PromiseVoidFunction, VoidFunction } from "Common/Types/FunctionTypes";
+import JSONFunctions from "Common/Types/JSONFunctions";
 
 export interface ComponentProps {
   dashboardId: ObjectID;
@@ -116,8 +117,10 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
         }
 
         setDashboardViewConfig(
-          dashboard.dashboardViewConfig ||
-            DashboardViewConfigUtil.createDefaultDashboardViewConfig(),
+          JSONFunctions.deserializeValue(
+            dashboard.dashboardViewConfig ||
+              DashboardViewConfigUtil.createDefaultDashboardViewConfig(),
+          ) as DashboardViewConfig,
         );
         setDashboardName(dashboard.name || "Untitled Dashboard");
       } catch (err) {
@@ -203,10 +206,12 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
           }
 
           const newDashboardConfig: DashboardViewConfig =
-            DashboardViewConfigUtil.addComponentToDashboard({
-              component: newComponent,
-              dashboardViewConfig: dashboardViewConfig,
-            });
+            JSONFunctions.deserializeValue(
+              DashboardViewConfigUtil.addComponentToDashboard({
+                component: newComponent,
+                dashboardViewConfig: dashboardViewConfig,
+              }),
+            ) as DashboardViewConfig;
 
           setDashboardViewConfig(newDashboardConfig);
         }}
@@ -215,7 +220,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
       <DashboardCanvas
         dashboardViewConfig={dashboardViewConfig}
         onDashboardViewConfigChange={(newConfig: DashboardViewConfig) => {
-          setDashboardViewConfig(JSON.parse(JSON.stringify(newConfig)));
+          setDashboardViewConfig(newConfig);
         }}
         onComponentSelected={(componentId: ObjectID) => {
           // Do nothing