refactor: Update JSON deserialization logic in DatabaseBaseModel

Common/Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel.ts

@@ -673,10 +673,7 @@ export default class DatabaseBaseModel extends BaseEntity {
             json[key] as JSONArray,
             tableColumnMetadata.modelType,
           );
-        } else if(json[key] &&
-          tableColumnMetadata.type === TableColumnType.JSON){
-          (baseModel as any)[key] = JSONFunctions.deserialize(json[key] as JSONObject) as JSONObject;
-        }else { 
+        } else {
           (baseModel as any)[key] = json[key];
         }
       }

Common/Types/Monitor/MonitorSteps.ts

@@ -90,7 +90,13 @@ export default class MonitorSteps extends DatabaseProperty {
     });
   }
 
-  public static override fromJSON(json: JSONObject): MonitorSteps {
+  public static override fromJSON(
+    json: JSONObject | MonitorSteps | undefined,
+  ): MonitorSteps {
+    if (json === undefined) {
+      return new MonitorSteps();
+    }
+
     if (json instanceof MonitorSteps) {
       return json;
     }

Dashboard/src/Components/Form/Monitor/MonitorSteps.tsx

@@ -166,7 +166,7 @@ const MonitorStepsElement: FunctionComponent<ComponentProps> = (
 
   const [monitorSteps, setMonitorSteps] = React.useState<
     MonitorSteps | undefined
-  >(props.initialValue);
+  >(MonitorSteps.fromJSON(props.initialValue));
 
   useEffect(() => {
     if (monitorSteps && props.onChange) {
@@ -184,7 +184,7 @@ const MonitorStepsElement: FunctionComponent<ComponentProps> = (
 
   return (
     <div>
-      {monitorSteps?.data?.monitorStepsInstanceArray.map(
+      {monitorSteps?.data?.monitorStepsInstanceArray?.map(
         (i: MonitorStep, index: number) => {
           return (
             <MonitorStepElement

Dashboard/src/Components/Form/Monitor/TraceMonitor/TraceMonitorStepForm.tsx

@@ -2,7 +2,7 @@ import MonitorStepTraceMonitor, {
   MonitorStepTraceMonitorUtil,
 } from "Common/Types/Monitor/MonitorStepTraceMonitor";
 import TelemetryService from "Common/Models/DatabaseModels/TelemetryService";
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import React, { FunctionComponent, ReactElement } from "react";
 import BasicForm from "Common/UI/Components/Forms/BasicForm";
 import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType";
 import Button, { ButtonStyleType } from "Common/UI/Components/Button/Button";
@@ -23,16 +23,9 @@ export interface ComponentProps {
 const TraceMonitorStepForm: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [monitorStepTraceMonitor, setMonitorStepTraceMonitor] =
-    React.useState<MonitorStepTraceMonitor | null>(null);
-
   let showAdvancedOptionsByDefault: boolean = false;
-
-  useEffect(() => {
-    setMonitorStepTraceMonitor(
-      props.monitorStepTraceMonitor || MonitorStepTraceMonitorUtil.getDefault(),
-    );
-  }, [props.monitorStepTraceMonitor]);
+  const monitorStepTraceMonitor: MonitorStepTraceMonitor =
+    props.monitorStepTraceMonitor || MonitorStepTraceMonitorUtil.getDefault();
 
   if (
     monitorStepTraceMonitor &&
@@ -54,7 +47,6 @@ const TraceMonitorStepForm: FunctionComponent<ComponentProps> = (
         hideSubmitButton={true}
         initialValues={monitorStepTraceMonitor}
         onChange={(values: MonitorStepTraceMonitor) => {
-          setMonitorStepTraceMonitor(values);
           props.onMonitorStepTraceMonitorChanged(values);
         }}
         fields={[

Dashboard/src/Components/Monitor/SummaryView/PingMonitorView.tsx

@@ -17,7 +17,6 @@ const PingMonitorView: FunctionComponent<ComponentProps> = (
     responseTimeInMs = Math.round(responseTimeInMs);
   }
 
-
   return (
     <div className="space-y-5">
       <div className="flex space-x-3">

Dashboard/src/Pages/Monitor/View/Index.tsx

@@ -649,7 +649,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (): ReactElement => {
           .traceMonitor && (
           <TraceTable
             spanQuery={MonitorStepTraceMonitorUtil.toQuery(
-              monitor.monitorSteps.data?.monitorStepsInstanceArray[0]!.data!
+              monitor.monitorSteps.data!.monitorStepsInstanceArray[0]!.data!
                 .traceMonitor!,
             )}
           />