From 0082bf4069731c08a045ed6cc6ff5eff4903cf20 Mon Sep 17 00:00:00 2001
From: jihea-park <jihea.park@navercorp.com>
Date: Thu, 17 Oct 2024 16:52:51 +0900
Subject: [PATCH] [#10776] OpenTelemetry > Send agentId

---
 .../charts/OpenTelemetryMetricFetcher.tsx     | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
index e3fe88c7e3ac..a788d4b68c5c 100644
--- a/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
+++ b/web-frontend/src/main/v3/packages/ui/src/components/OpenTelemetry/charts/OpenTelemetryMetricFetcher.tsx
@@ -7,6 +7,7 @@ import { ChartDataConfig, OpenTelemetryChart } from './OpenTelemetryChart';
 import { getRandomColorInHSL } from '../../../lib/colors';
 import React from 'react';
 import { OpenTelemetryTick } from './OpenTelemetryTick';
+import { assign } from 'lodash';
 
 export interface OpenTelemetryMetricFetcherProps {
   metricDefinition: OtlpMetricDefUserDefined.Metric;
@@ -18,7 +19,7 @@ export const OpenTelemetryMetricFetcher = ({
   dashboardId,
 }: OpenTelemetryMetricFetcherProps) => {
   const { mutate, data } = usePostOtlpMetricData();
-  const { dateRange } = useOpenTelemetrySearchParameters();
+  const { dateRange, agentId } = useOpenTelemetrySearchParameters();
 
   React.useEffect(() => {
     const {
@@ -31,19 +32,24 @@ export const OpenTelemetryMetricFetcher = ({
       fieldNameList,
       primaryForFieldAndTagRelation,
     } = metricDefinition;
-    mutate({
-      applicationName,
-      metricGroupName,
-      metricName,
-      tagGroupList,
-      chartType,
-      aggregationFunction,
-      fieldNameList,
-      primaryForFieldAndTagRelation,
-      from: dateRange?.from.getTime(),
-      to: dateRange?.to.getTime(),
-    });
-  }, [dateRange, metricDefinition]);
+    mutate(
+      assign(
+        {
+          applicationName,
+          metricGroupName,
+          metricName,
+          tagGroupList,
+          chartType,
+          aggregationFunction,
+          fieldNameList,
+          primaryForFieldAndTagRelation,
+          from: dateRange?.from.getTime(),
+          to: dateRange?.to.getTime(),
+        },
+        agentId ? { agentId } : {},
+      ),
+    );
+  }, [dateRange, agentId, metricDefinition]);
 
   const { stack, stackDetails } = metricDefinition;