From 183ff170ae8212e0cdb86c45a322ecc55a9cb63a Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Thu, 15 Aug 2024 16:34:25 +0100
Subject: [PATCH] refactor: Update telemetry service fetching logic in
 MonitorStepElement

---
 .../Components/Form/Monitor/MonitorStep.tsx   |  9 +++---
 .../Monitor/MonitorSteps/MonitorStep.tsx      | 24 ++++++++++++++-
 Dashboard/src/Pages/Incidents/View/Index.tsx  |  8 +++++
 Dashboard/src/Pages/Monitor/View/Index.tsx    | 30 ++++++++-----------
 4 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
index 016ff6dc9f..8137d68a5f 100644
--- a/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
+++ b/Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
@@ -78,9 +78,6 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
     props.initialValue || new MonitorStep(),
   );
 
-  const [monitorStepTraceMonitor, setMonitorStepTraceMonitor] =
-    useState<MonitorStepTraceMonitor>(MonitorStepTraceMonitorUtil.getDefault());
-
   const [telemetryServices, setTelemetryServices] = useState<
     Array<TelemetryService>
   >([]);
@@ -557,12 +554,14 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
       {props.monitorType === MonitorType.Traces && (
         <div className="mt-5">
           <TraceMonitorStepForm
-            monitorStepTraceMonitor={monitorStepTraceMonitor}
+            monitorStepTraceMonitor={
+              monitorStep.data?.traceMonitor ||
+              MonitorStepTraceMonitorUtil.getDefault()
+            }
             onMonitorStepTraceMonitorChanged={(
               value: MonitorStepTraceMonitor,
             ) => {
               monitorStep.setTraceMonitor(value);
-              setMonitorStepTraceMonitor(value);
               setMonitorStep(MonitorStep.clone(monitorStep));
             }}
             attributeKeys={attributeKeys}
diff --git a/Dashboard/src/Components/Monitor/MonitorSteps/MonitorStep.tsx b/Dashboard/src/Components/Monitor/MonitorSteps/MonitorStep.tsx
index 085b7aebec..1051c2f4de 100644
--- a/Dashboard/src/Components/Monitor/MonitorSteps/MonitorStep.tsx
+++ b/Dashboard/src/Components/Monitor/MonitorSteps/MonitorStep.tsx
@@ -32,6 +32,7 @@ import Includes from "Common/Types/BaseDatabase/Includes";
 import OneUptimeDate from "Common/Types/Date";
 import TelemetryServicesElement from "../../TelemetryService/TelemetryServiceElements";
 import { SpanStatus } from "Common/Models/AnalyticsModels/Span";
+import ObjectID from "Common/Types/ObjectID";
 
 export interface ComponentProps {
   monitorStatusOptions: Array<MonitorStatus>;
@@ -89,13 +90,27 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
 
   const fetchTelemetryServices: PromiseVoidFunction =
     async (): Promise<void> => {
+
+
+      let telemetryServiceIds: Array<ObjectID> = [];
+
+      // if the monitor is a log monitor
+      if (props.monitorStep.data?.logMonitor && props.monitorType === MonitorType.Logs) {
+        telemetryServiceIds = props.monitorStep.data?.logMonitor?.telemetryServiceIds || [];
+      }
+
+      // if the monitor is a trace monitor
+      if (props.monitorStep.data?.traceMonitor && props.monitorType === MonitorType.Traces) {
+        telemetryServiceIds = props.monitorStep.data?.traceMonitor?.telemetryServiceIds || [];
+      }
+
       const telemetryServicesResult: ListResult<TelemetryService> =
         await ModelAPI.getList<TelemetryService>({
           modelType: TelemetryService,
           query: {
             projectId: DashboardNavigation.getProjectId(),
             _id: new Includes(
-              props.monitorStep.data?.logMonitor?.telemetryServiceIds || [],
+              telemetryServiceIds
             ),
           },
           limit: LIMIT_PER_PROJECT,
@@ -462,6 +477,13 @@ const MonitorStepElement: FunctionComponent<ComponentProps> = (
             fields={logFields}
           />
         )}
+        {traceFields && traceFields.length > 0 && (
+          <Detail<TraceMonitorStepView>
+            id={"monitor-traces"}
+            item={traceMonitorDetailView}
+            fields={traceFields}
+          />
+        )}
       </div>
 
       <HorizontalRule />
diff --git a/Dashboard/src/Pages/Incidents/View/Index.tsx b/Dashboard/src/Pages/Incidents/View/Index.tsx
index 7b4300ef8d..61e894d4d3 100644
--- a/Dashboard/src/Pages/Incidents/View/Index.tsx
+++ b/Dashboard/src/Pages/Incidents/View/Index.tsx
@@ -47,6 +47,7 @@ import Card from "Common/UI/Components/Card/Card";
 import DashboardLogsViewer from "../../../Components/Logs/LogsViewer";
 import TelemetryType from "Common/Types/Telemetry/TelemetryType";
 import JSONFunctions from "Common/Types/JSONFunctions";
+import TraceTable from "../../../Components/Traces/TraceTable";
 
 const IncidentView: FunctionComponent<
   PageComponentProps
@@ -699,6 +700,13 @@ const IncidentView: FunctionComponent<
           </Card>
         </div>
       )}
+
+      {telemetryQuery &&
+        telemetryQuery.telemetryType === TelemetryType.Trace && (
+          <div>
+            <TraceTable spanQuery={telemetryQuery.telemetryQuery} />
+          </div>
+        )}
     </Fragment>
   );
 };
diff --git a/Dashboard/src/Pages/Monitor/View/Index.tsx b/Dashboard/src/Pages/Monitor/View/Index.tsx
index f953e648a6..50336b64b2 100644
--- a/Dashboard/src/Pages/Monitor/View/Index.tsx
+++ b/Dashboard/src/Pages/Monitor/View/Index.tsx
@@ -64,7 +64,8 @@ import useAsyncEffect from "use-async-effect";
 import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
 import PageMap from "../../../Utils/PageMap";
 import LogMonitorPreview from "../../../Components/Monitor/LogMonitor/LogMonitorPreview";
-import TraceMonitorPreview from "../../../Components/Monitor/TraceMonitor/TraceMonitorPreview";
+import TraceTable from "../../../Components/Traces/TraceTable";
+import { MonitorStepTraceMonitorUtil } from "Common/Types/Monitor/MonitorStepTraceMonitor";
 
 const MonitorView: FunctionComponent<PageComponentProps> = (): ReactElement => {
   const modelId: ObjectID = Navigation.getLastParamAsObjectID();
@@ -641,22 +642,17 @@ const MonitorView: FunctionComponent<PageComponentProps> = (): ReactElement => {
       {monitor?.monitorType === MonitorType.Traces &&
         monitor.monitorSteps &&
         monitor.monitorSteps.data?.monitorStepsInstanceArray &&
-        monitor.monitorSteps.data?.monitorStepsInstanceArray.length > 0 && (
-          <div>
-            <Card
-              title={"Spans Preview"}
-              description={
-                "Preview of the spans that match the filter of this monitor."
-              }
-            >
-              <TraceMonitorPreview
-                monitorStepTraceMonitor={
-                  monitor.monitorSteps.data?.monitorStepsInstanceArray[0]?.data
-                    ?.traceMonitor
-                }
-              />
-            </Card>
-          </div>
+        monitor.monitorSteps.data?.monitorStepsInstanceArray.length > 0 &&
+        monitor.monitorSteps.data?.monitorStepsInstanceArray[0] &&
+        monitor.monitorSteps.data?.monitorStepsInstanceArray[0]!.data &&
+        monitor.monitorSteps.data?.monitorStepsInstanceArray[0]!.data!
+          .traceMonitor && (
+          <TraceTable
+            spanQuery={MonitorStepTraceMonitorUtil.toQuery(
+              monitor.monitorSteps.data?.monitorStepsInstanceArray[0]!.data!
+                .traceMonitor!,
+            )}
+          />
         )}
 
       {shouldFetchMonitorMetrics && getMonitorMetricsChartGroup()}