refactor: Update JSONFunctions and Table component to support custom …

…classNames
yonasBSD · Aug 8, 2024 · 0ef7ca9 · 0ef7ca9
1 parent ca7c55b
commit 0ef7ca9
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 137 deletions.
diff --git a/Common/Types/JSONFunctions.ts b/Common/Types/JSONFunctions.ts
@@ -15,6 +15,13 @@ export default class JSONFunctions {
     return sizeToGb;
   }
 
+  public static isJSONObjectDifferent(
+    obj1: JSONObject,
+    obj2: JSONObject,
+  ): boolean {
+    return JSON.stringify(obj1) !== JSON.stringify(obj2);
+  }
+
   public static nestJson(obj: JSONObject): JSONObject {
     // obj could be in this format:
 

diff --git a/Common/UI/Components/ModelTable/BaseModelTable.tsx b/Common/UI/Components/ModelTable/BaseModelTable.tsx
@@ -619,6 +619,12 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       setIsFilterFetchLoading(false);
     };
 
+  useEffect(() => {
+    fetchItems().catch((err: Error) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, [props.query]);
+
   const fetchAllBulkItems: PromiseVoidFunction = async (): Promise<void> => {
     setError("");
     setIsLoading(true);
@@ -1260,6 +1266,11 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         onFilterChanged={(filterData: FilterData<TBaseModel>) => {
           onFilterChanged(filterData);
         }}
+        className={
+          props.cardProps
+            ? ""
+            : "rounded-lg border-2 border-gray-200 p-6 pt-0 pb-0"
+        }
         onFilterRefreshClick={async () => {
           await getFilterDropdownItems();
         }}

diff --git a/Common/UI/Components/Table/Table.tsx b/Common/UI/Components/Table/Table.tsx
@@ -25,7 +25,7 @@ export interface ComponentProps<T extends GenericObject> {
   data: Array<T>;
   id: string;
   columns: Columns<T>;
-
+  className?: string;
   disablePagination?: undefined | boolean;
   onNavigateToPage: (pageNumber: number, itemsOnPage: number) => void;
   currentPageNumber: number;
@@ -200,7 +200,7 @@ const Table: TableFunction = <T extends GenericObject>(
   });
 
   return (
-    <div>
+    <div className={props.className}>
       <FilterViewer
         id={`${props.id}-filter`}
         showFilterModal={props.showFilterModal || false}

diff --git a/Dashboard/src/Components/Form/Monitor/TraceMonitor/TraceMonitorStepForm.tsx b/Dashboard/src/Components/Form/Monitor/TraceMonitor/TraceMonitorStepForm.tsx
@@ -1,14 +1,13 @@
 import MonitorStepTraceMonitor from "Common/Types/Monitor/MonitorStepTraceMonitor";
 import TelemetryService from "Common/Models/DatabaseModels/TelemetryService";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import BasicForm from "Common/UI/Components/Forms/BasicForm";
-import DropdownUtil from "Common/UI/Utils/Dropdown";
 import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType";
 import Button, { ButtonStyleType } from "Common/UI/Components/Button/Button";
 import FieldLabelElement from "Common/UI/Components/Forms/Fields/FieldLabel";
 import HorizontalRule from "Common/UI/Components/HorizontalRule/HorizontalRule";
 import TraceMonitorPreview from "../../../Monitor/TraceMonitor/TraceMonitorPreview";
-import { SpanStatus } from "Common/Models/AnalyticsModels/Span";
+import SpanUtil from "../../../../Utils/SpanUtil";
 
 export interface ComponentProps {
   monitorStepTraceMonitor: MonitorStepTraceMonitor;
@@ -23,14 +22,19 @@ const TraceMonitorStepForm: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [monitorStepTraceMonitor, setMonitorStepTraceMonitor] =
-    React.useState<MonitorStepTraceMonitor>(props.monitorStepTraceMonitor);
+    React.useState<MonitorStepTraceMonitor | null>(null);
 
   let showAdvancedOptionsByDefault: boolean = false;
 
+  useEffect(() => {
+    setMonitorStepTraceMonitor(props.monitorStepTraceMonitor);
+  }, [props.monitorStepTraceMonitor]);
+
   if (
-    monitorStepTraceMonitor.attributes ||
-    monitorStepTraceMonitor.spanStatuses ||
-    monitorStepTraceMonitor.telemetryServiceIds
+    monitorStepTraceMonitor &&
+    (monitorStepTraceMonitor.attributes ||
+      monitorStepTraceMonitor.spanStatuses ||
+      monitorStepTraceMonitor.telemetryServiceIds)
   ) {
     showAdvancedOptionsByDefault = true;
   }
@@ -121,8 +125,7 @@ const TraceMonitorStepForm: FunctionComponent<ComponentProps> = (
             field: {
               spanStatuses: true,
             },
-            dropdownOptions:
-              DropdownUtil.getDropdownOptionsFromEnum(SpanStatus),
+            dropdownOptions: SpanUtil.getSpanStatusDropdownOptions(),
             fieldType: FormFieldSchemaType.MultiSelectDropdown,
             title: "Filter by Span Status",
             description: "Select the status of the spans you want to monitor.",
@@ -183,7 +186,7 @@ const TraceMonitorStepForm: FunctionComponent<ComponentProps> = (
       <div>
         <HorizontalRule />
         <FieldLabelElement
-          title={"Traces Preview"}
+          title={"Spans Preview"}
           description={
             "Here is the preview of the Traces that will be monitored based on the filters you have set above."
           }
@@ -192,7 +195,7 @@ const TraceMonitorStepForm: FunctionComponent<ComponentProps> = (
         />
         <div className="mt-5 mb-5">
           <TraceMonitorPreview
-            monitorStepTraceMonitor={monitorStepTraceMonitor}
+            monitorStepTraceMonitor={monitorStepTraceMonitor!}
           />
         </div>
       </div>

diff --git a/Dashboard/src/Components/Monitor/TraceMonitor/TraceMonitorPreview.tsx b/Dashboard/src/Components/Monitor/TraceMonitor/TraceMonitorPreview.tsx
@@ -5,6 +5,7 @@ import MonitorStepTraceMonitor, {
 import TraceTable from "../../Traces/TraceTable";
 import Query from "Common/Types/BaseDatabase/Query";
 import Span from "Common/Models/AnalyticsModels/Span";
+import JSONFunctions from "Common/Types/JSONFunctions";
 
 export interface ComponentProps {
   monitorStepTraceMonitor: MonitorStepTraceMonitor | undefined;
@@ -25,10 +26,14 @@ const TraceMonitorPreview: FunctionComponent<ComponentProps> = (
   const [spanQuery, setSpanQuery] = React.useState<Query<Span>>(refreshQuery());
 
   useEffect(() => {
-    setSpanQuery(refreshQuery());
+    const query: Query<Span> = refreshQuery();
+
+    if (JSONFunctions.isJSONObjectDifferent(spanQuery, query)) {
+      setSpanQuery(query);
+    }
   }, [props.monitorStepTraceMonitor]);
 
-  return <TraceTable spanQuery={spanQuery} />;
+  return <TraceTable isMinimalTable={true} spanQuery={spanQuery} />;
 };
 
 export default TraceMonitorPreview;