diff --git a/src/pages/Team/deploy/Container/Traces.tsx b/src/pages/Team/deploy/Container/Traces.tsx index 8b2dda1..9d87a35 100644 --- 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(null); const [container, setData] = useState(); @@ -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 = () => { {traces && traces.map((trace, index) => { - const currentTime = getCurrentTimeFromStamp(trace.startTimeUnixNano); return ( { - setSelectedTrace(trace.traceID === selectedTrace ? null : trace.traceID); + setSelectedTrace(trace.trace_id === selectedTrace ? null : trace.trace_id); }} > - {currentTime} - {trace.rootTraceName ?? ''} - {trace.durationMs ?? ''}ms - {trace.rootTraceName?.split(' ')[0] ?? ''} - - { - trace.spanSet.spans[0].attributes.filter((attr) => attr.key === 'http.status_code')[0].value - .intValue - } - + {trace.date} + {trace.resource ?? ''} + {trace.duration_ms ?? ''}ms + {trace.method ?? ''} + {trace.status_code ?? ''} ); })} diff --git a/src/utils/apis/trace.ts b/src/utils/apis/trace.ts index 1ab927b..070b31c 100644 --- 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 index e291fc2..06b47de 100644 --- 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; };