From b31f6b7e58de29024276e9822691f7b189ef0acb Mon Sep 17 00:00:00 2001
From: dutexion <dutexion@gmail.com>
Date: Thu, 29 Aug 2024 22:40:11 +0900
Subject: [PATCH] =?UTF-8?q?feat=20::=20trace=20data=20=EB=B6=88=EB=9F=AC?=
 =?UTF-8?q?=EC=98=A4=EB=8A=94=EA=B2=83=EA=B9=8C=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Trace/TraceInformation.tsx | 29 ++++++++++++++++-------
 src/utils/apis/trace.ts                   |  4 ++++
 src/utils/types/traceType.ts              | 11 +++++++++
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/Trace/TraceInformation.tsx b/src/components/Trace/TraceInformation.tsx
index b0e2e27..5baeda6 100644
--- a/src/components/Trace/TraceInformation.tsx
+++ b/src/components/Trace/TraceInformation.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { theme } from '@/style/theme';
 import styled from '@emotion/styled';
 import { useResizable } from '@/hooks/useResizable';
+import { getDetailTrace } from '@/utils/apis/trace';
+import { SpanType } from '@/utils/types/traceType';
 
 type PropsType = {
   selectedTrace: string | null;
@@ -10,17 +12,28 @@ type PropsType = {
 
 export const TraceInformation = ({ selectedTrace, setSelectedTrace }: PropsType) => {
   const { width, boxRef, handleMouseDown } = useResizable(400, 300, window.innerWidth - 280);
+  const [data, setData] = useState<SpanType[]>();
+
+  useEffect(() => {
+    if (selectedTrace) {
+      getDetailTrace(selectedTrace).then((res) => {
+        setData(res.data.spans);
+      });
+    }
+  }, [selectedTrace]);
 
   return (
     <Wrapper selectedTrace={selectedTrace} width={width} ref={boxRef}>
       <Resizer onMouseDown={handleMouseDown} />
-      <Content>
-        <ColorBox />
-        <TitleContainer>
-          <h2>Trace View</h2>
-          <b onClick={() => setSelectedTrace(null)}>닫기</b>
-        </TitleContainer>
-      </Content>
+      {data && (
+        <Content>
+          <ColorBox />
+          <TitleContainer>
+            <h2>Trace View</h2>
+            <b onClick={() => setSelectedTrace(null)}>닫기</b>
+          </TitleContainer>
+        </Content>
+      )}
     </Wrapper>
   );
 };
diff --git a/src/utils/apis/trace.ts b/src/utils/apis/trace.ts
index 070b31c..e8d2866 100644
--- a/src/utils/apis/trace.ts
+++ b/src/utils/apis/trace.ts
@@ -5,3 +5,7 @@ export const getTrace = async (deployUUID: string, env: string, timeRange: numbe
     `${import.meta.env.VITE_SERVER_BASE_URL}/trace/list?deployId=${deployUUID}&environment=${env}&timeRange=${timeRange}`,
   );
 };
+
+export const getDetailTrace = async (traceId: string) => {
+  return await instance.get(`${import.meta.env.VITE_SERVER_BASE_URL}/trace/${traceId}`);
+};
diff --git a/src/utils/types/traceType.ts b/src/utils/types/traceType.ts
index 06b47de..532b80b 100644
--- a/src/utils/types/traceType.ts
+++ b/src/utils/types/traceType.ts
@@ -6,3 +6,14 @@ export type TraceType = {
   duration_ms: number;
   status_code: number | null;
 };
+
+export type SpanType = {
+  trace_id: string;
+  span_id: string;
+  name: string;
+  start_time_unix_nano: number;
+  end_time_unix_nano: number;
+  attributes: {
+    [key: string]: string;
+  };
+};