chore :: trace api change

team-xquare · Aug 29, 2024 · 710cd31 · 710cd31
1 parent eea5062
commit 710cd31
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 80 deletions.
diff --git a/src/pages/Team/deploy/Container/Traces.tsx b/src/pages/Team/deploy/Container/Traces.tsx
@@ -24,37 +24,6 @@ interface JsonData {
   [key: string]: DataPoint;
 }
 
-interface ExtendedDateTimeFormatOptions extends Intl.DateTimeFormatOptions {
-  millisecond?: '2-digit' | '3-digit';
-}
-
-const getCurrentTimeFromStamp = (timestampNano: string) => {
-  try {
-    const timestampSeconds = parseInt(timestampNano, 10) / 1_000_000_000;
-    const myDate = new Date(timestampSeconds * 1000);
-    const options: ExtendedDateTimeFormatOptions = {
-      timeZone: 'Asia/Seoul',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      millisecond: '3-digit',
-      hour12: false,
-    };
-    const formattedDateTime = myDate.toLocaleString('en-US', options);
-    const [dateTimeString, milliseconds] = formattedDateTime.split('.');
-    if (milliseconds) {
-      return `${dateTimeString}.${milliseconds.padStart(3, '0')}`;
-    } else {
-      return formattedDateTime;
-    }
-  } catch (error) {
-    console.error('Error getting current time from timestamp:', error);
-    return 'Invalid timestamp';
-  }
-};
-
 export const TeamDeployContainerTraces = () => {
   const [selectedTrace, setSelectedTrace] = useState<string | null>(null);
   const [container, setData] = useState<ContainerDetailType>();
@@ -103,26 +72,24 @@ export const TeamDeployContainerTraces = () => {
 
   useEffect(() => {
     let currentTime = Math.floor(Date.now() / 1000) - 5;
-    const oneHourAgo = currentTime - 3605;
+    const oneHourAgo = currentTime - 1800;
 
-    if (container?.container_name) {
-      getTrace(container.container_name, oneHourAgo, currentTime).then((res) => {
-        setTraces(res.data.traces);
+    if (deployUUID && env) {
+      getTrace(deployUUID, env, oneHourAgo).then((res) => {
+        setTraces(res.data.spans);
       });
 
       const interval = setInterval(() => {
-        const newCurrentTime = Math.floor(Date.now() / 1000) - 5;
-        getTrace(container.container_name, currentTime, newCurrentTime)
+        getTrace(deployUUID, env, 5)
           .then((res) => {
             setTraces((prevTraces) => {
-              return [...res.data.traces, ...(prevTraces || [])];
+              return [...res.data.spans, ...(prevTraces || [])];
             });
           })
           .catch((err) => {
             console.error('Error fetching traces:', err);
           });
-        currentTime = newCurrentTime;
-      }, 1000);
+      }, 5000);
 
       return () => clearInterval(interval);
     }
@@ -156,24 +123,18 @@ export const TeamDeployContainerTraces = () => {
           </TraceLabel>
           {traces &&
             traces.map((trace, index) => {
-              const currentTime = getCurrentTimeFromStamp(trace.startTimeUnixNano);
               return (
                 <TraceItem
                   key={index}
                   onClick={() => {
-                    setSelectedTrace(trace.traceID === selectedTrace ? null : trace.traceID);
+                    setSelectedTrace(trace.trace_id === selectedTrace ? null : trace.trace_id);
                   }}
                 >
-                  <DateItem>{currentTime}</DateItem>
-                  <ResourceItem>{trace.rootTraceName ?? ''}</ResourceItem>
-                  <DurationItem>{trace.durationMs ?? ''}ms</DurationItem>
-                  <MethodItem>{trace.rootTraceName?.split(' ')[0] ?? ''}</MethodItem>
-                  <StatusCodeItem>
-                    {
-                      trace.spanSet.spans[0].attributes.filter((attr) => attr.key === 'http.status_code')[0].value
-                        .intValue
-                    }
-                  </StatusCodeItem>
+                  <DateItem>{trace.date}</DateItem>
+                  <ResourceItem>{trace.resource ?? ''}</ResourceItem>
+                  <DurationItem>{trace.duration_ms ?? ''}ms</DurationItem>
+                  <MethodItem>{trace.method ?? ''}</MethodItem>
+                  <StatusCodeItem>{trace.status_code ?? ''}</StatusCodeItem>
                 </TraceItem>
               );
             })}

diff --git a/src/utils/apis/trace.ts b/src/utils/apis/trace.ts
@@ -1,7 +1,7 @@
 import { instance } from './axios';
 
-export const getTrace = async (containerName: string, startUnixTime: number, endUnixTime: number) => {
+export const getTrace = async (deployUUID: string, env: string, timeRange: number) => {
   return await instance.get(
-    `${import.meta.env.VITE_SERVER_GRAFANA_URL}/api/search?q={kind=server%26%26span.http.status_code!= nil%26%26.service.name="${containerName}"}&start=${startUnixTime}&end=${endUnixTime}`,
+    `${import.meta.env.VITE_SERVER_BASE_URL}/trace/list?deployId=${deployUUID}&environment=${env}&timeRange=${timeRange}`,
   );
 };
diff --git a/src/utils/types/traceType.ts b/src/utils/types/traceType.ts
@@ -1,28 +1,8 @@
-export type ValueType = {
-  [key: string]: string;
-};
-
-export type AttributeType = {
-  key: string;
-  value: ValueType;
-};
-
-export type SpanType = {
-  spanID: string;
-  startTimeUnixNano: string;
-  durationNanos: string;
-  attributes: AttributeType[];
-};
-
-export type SpansType = {
-  spans: SpanType[];
-};
-
 export type TraceType = {
-  traceID: string;
-  rootServiceName: string;
-  rootTraceName: string;
-  startTimeUnixNano: string;
-  durationMs: number;
-  spanSet: SpansType;
+  trace_id: string;
+  date: string;
+  resource: string;
+  method: string | null;
+  duration_ms: number;
+  status_code: number | null;
 };