Skip to content

Commit 62500fa

Browse files
CahllagerfeldCahllagerfeld
committed
refactor: use new endpoint
1 parent a750394 commit 62500fa

File tree

9 files changed

+44
-522
lines changed

9 files changed

+44
-522
lines changed

‎src/app/runs/[id]/_Tabs/LogTab/logs.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ import { EnhancedLogsViewer } from "@/components/logs/enhanced-log-viewer";
44
import { LoadingLogs } from "@/components/logs/loading-logs";
55
import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
66
import { useRunLogs } from "@/data/pipeline-runs/run-logs";
7-
import { parseLogString } from "@/lib/logs";
87
import { Skeleton } from "@zenml-io/react-component-library/components/server";
9-
import { useMemo, useState } from "react";
8+
import { useState } from "react";
109
import { useParams } from "react-router-dom";
1110
import { LogCombobox } from "./combobox";
1211

@@ -61,11 +60,6 @@ type LogTabContentProps = {
6160
function LogDisplay({ selectedSource, runId }: LogTabContentProps) {
6261
const runLogs = useRunLogs({ runId, queries: { source: selectedSource } });
6362

64-
const parsedLogs = useMemo(() => {
65-
if (!runLogs.data) return [];
66-
return parseLogString(runLogs.data);
67-
}, [runLogs.data]);
68-
6963
if (runLogs.isPending) return <LoadingLogs />;
7064

7165
if (runLogs.isError) {
@@ -84,7 +78,7 @@ function LogDisplay({ selectedSource, runId }: LogTabContentProps) {
8478

8579
return (
8680
<div className="h-full w-full">
87-
<EnhancedLogsViewer logs={parsedLogs} />
81+
<EnhancedLogsViewer logs={logs} />
8882
</div>
8983
);
9084
}

‎src/components/logs/enhanced-log-viewer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { EmptyStateLogs } from "./empty-state-logs";
1010

1111
interface EnhancedLogsViewerProps {
1212
logs: LogEntryType[];
13-
itemsPerPage?: number; // Optional prop for items per page
13+
itemsPerPage?: number;
1414
}
1515

1616
const DEFAULT_ITEMS_PER_PAGE = 100;
@@ -129,7 +129,7 @@ export function EnhancedLogsViewer({
129129
{/* Table-style header with fixed structure */}
130130
<div className="flex w-full min-w-[600px] space-x-3 bg-theme-surface-tertiary px-4 py-1 font-medium text-theme-text-secondary">
131131
{/* Type column header - match LogLine badge area */}
132-
<div className="flex w-8 flex-shrink-0 items-center">
132+
<div className="flex w-12 flex-shrink-0 items-center">
133133
<span className="text-text-sm font-semibold">Type</span>
134134
</div>
135135

@@ -249,5 +249,5 @@ export function EnhancedLogsViewer({
249249
}
250250

251251
function getOriginalLogText(logs: LogEntryType[]) {
252-
return logs.map((log) => log.originalEntry).join("\n");
252+
return logs.map((log) => log.message).join("\n");
253253
}

‎src/components/logs/log-line.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { LogEntry, LogLevel } from "@/types/logs";
2+
import { LogEntry, LoggingLevel } from "@/types/logs";
33
import { CopyButton } from "../CopyButton";
44

55
interface LogLineProps {
@@ -10,17 +10,25 @@ interface LogLineProps {
1010
highlightedMessage?: React.ReactNode;
1111
}
1212

13-
const getLogLevelColor = (level: LogLevel): string => {
13+
const LOG_LEVEL_NAMES = {
14+
10: "DEBUG",
15+
20: "INFO",
16+
30: "WARNING",
17+
40: "ERROR",
18+
50: "CRITICAL"
19+
} as const;
20+
21+
const getLogLevelColor = (level: LoggingLevel | undefined): string => {
1422
switch (level) {
15-
case "INFO":
23+
case 20:
1624
return "bg-blue-500";
17-
case "ERROR":
25+
case 40:
1826
return "bg-error-500";
19-
case "WARN":
27+
case 30:
2028
return "bg-warning-500";
21-
case "DEBUG":
29+
case 10:
2230
return "bg-neutral-400";
23-
case "CRITICAL":
31+
case 50:
2432
return "bg-error-700";
2533
default:
2634
return "bg-neutral-400";
@@ -39,9 +47,10 @@ export function LogLine({
3947
textWrapEnabled,
4048
highlightedMessage
4149
}: LogLineProps) {
42-
const { timestamp, level, message, originalEntry } = entry;
50+
const { timestamp, level, message } = entry;
4351
const formattedTimestamp = timestamp ? formatTimestamp(timestamp) : "";
44-
const levelColorClass = getLogLevelColor(level);
52+
53+
const levelColorClass = getLogLevelColor(level ?? undefined);
4554

4655
const highlightSearchTerm = (text: string) => {
4756
if (!searchTerm) return text;
@@ -70,9 +79,11 @@ export function LogLine({
7079
return (
7180
<div className="group/copybutton flex w-full items-start space-x-3 border-b border-theme-border-minimal px-4 py-1 font-mono text-text-sm transition-colors hover:bg-theme-surface-secondary">
7281
{/* Compact log level badge */}
73-
<div className="flex max-h-6 w-8 flex-shrink-0 items-center">
82+
<div className="flex max-h-6 w-12 flex-shrink-0 items-center">
7483
<div className={`h-4 w-[2px] rounded-sm ${levelColorClass} mr-2`}></div>
75-
<span className="text-xs font-medium text-theme-text-tertiary">{level}</span>
84+
<span className="text-xs font-medium text-theme-text-tertiary">
85+
{level ? LOG_LEVEL_NAMES[level] : "UNKNOWN"}
86+
</span>
7687
</div>
7788

7889
{/* Timestamp */}
@@ -89,7 +100,7 @@ export function LogLine({
89100

90101
{/* Compact copy button - appears on hover, doesn't change height */}
91102
<div className="flex flex-shrink-0 items-center">
92-
<CopyButton copyText={originalEntry} copyTitle="Copy log line" />
103+
<CopyButton copyText={message} copyTitle="Copy log line" />
93104
</div>
94105
</div>
95106
);

‎src/components/steps/step-sheet/LogsTab.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { EmptyStateLogs } from "@/components/logs/empty-state-logs";
22
import { EnhancedLogsViewer } from "@/components/logs/enhanced-log-viewer";
33
import { LoadingLogs } from "@/components/logs/loading-logs";
44
import { useStepLogs } from "@/data/steps/step-logs-query";
5-
import { parseLogString } from "@/lib/logs";
6-
import { useMemo } from "react";
75
import { ErrorFallback } from "../../Error";
86

97
type Props = {
@@ -13,11 +11,6 @@ type Props = {
1311
export function StepLogsTab({ stepId }: Props) {
1412
const { data, isPending, isError, error } = useStepLogs({ stepId });
1513

16-
const parsedLogs = useMemo(() => {
17-
if (!data) return [];
18-
return parseLogString(data);
19-
}, [data]);
20-
2114
if (isError) {
2215
return <ErrorFallback err={error} />;
2316
}
@@ -26,7 +19,7 @@ export function StepLogsTab({ stepId }: Props) {
2619
return <LoadingLogs />;
2720
}
2821

29-
if (parsedLogs.length === 0) {
22+
if (data.length === 0) {
3023
return (
3124
<EmptyStateLogs
3225
title="This step has no logs"
@@ -37,7 +30,7 @@ export function StepLogsTab({ stepId }: Props) {
3730

3831
return (
3932
<div className="space-y-5">
40-
<EnhancedLogsViewer logs={parsedLogs} />
33+
<EnhancedLogsViewer logs={data} />
4134
</div>
4235
);
4336
}

‎src/data/pipeline-runs/run-logs.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FetchError } from "@/lib/fetch-error";
22
import { UseQueryOptions, useQuery } from "@tanstack/react-query";
33
import { apiPaths, createApiPath } from "../api";
44
import { fetcher } from "../fetch";
5-
import { RunLogsQueryParams } from "@/types/logs";
5+
import { LogEntry, RunLogsQueryParams } from "@/types/logs";
66
import { objectToSearchParams } from "@/lib/url";
77

88
export type PipelineRunDetailOverview = {
@@ -14,7 +14,10 @@ export function getRunLogsQueryKey({ runId, queries }: PipelineRunDetailOverview
1414
return ["runs", runId, "logs", queries];
1515
}
1616

17-
export async function fetchRunLogs({ runId, queries }: PipelineRunDetailOverview): Promise<string> {
17+
export async function fetchRunLogs({
18+
runId,
19+
queries
20+
}: PipelineRunDetailOverview): Promise<LogEntry[]> {
1821
const queryString = objectToSearchParams(queries).toString();
1922
const url = createApiPath(apiPaths.runs.logs(runId)) + (queryString ? `?${queryString}` : "");
2023
const res = await fetcher(url, {
@@ -45,9 +48,9 @@ export async function fetchRunLogs({ runId, queries }: PipelineRunDetailOverview
4548

4649
export function useRunLogs(
4750
params: PipelineRunDetailOverview,
48-
options?: Omit<UseQueryOptions<string, FetchError>, "queryKey" | "queryFn">
51+
options?: Omit<UseQueryOptions<LogEntry[], FetchError>, "queryKey" | "queryFn">
4952
) {
50-
return useQuery<string, FetchError>({
53+
return useQuery<LogEntry[], FetchError>({
5154
queryKey: getRunLogsQueryKey(params),
5255
queryFn: () => fetchRunLogs(params),
5356
...options

‎src/data/steps/step-logs-query.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { FetchError } from "@/lib/fetch-error";
22
import { apiPaths, createApiPath } from "../api";
33
import { UseQueryOptions, useQuery } from "@tanstack/react-query";
44
import { fetcher } from "../fetch";
5+
import { LogEntry } from "@/types/logs";
56

67
type StepLogs = {
78
stepId: string;
@@ -41,9 +42,9 @@ export async function fetchStepLogs({ stepId }: StepLogs) {
4142

4243
export function useStepLogs(
4344
params: StepLogs,
44-
options?: Omit<UseQueryOptions<string, FetchError>, "queryKey" | "queryFn">
45+
options?: Omit<UseQueryOptions<LogEntry[], FetchError>, "queryKey" | "queryFn">
4546
) {
46-
return useQuery<string, FetchError>({
47+
return useQuery<LogEntry[], FetchError>({
4748
queryKey: getStepLogsQueryKey(params),
4849
queryFn: () => fetchStepLogs(params),
4950
...options

0 commit comments

Comments
 (0)