feat: Client-Side Structured Logs (#801)

Author: Cahllagerfeld

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

@@ -4,11 +4,11 @@ import { EnhancedLogsViewer } from "@/components/logs/enhanced-log-viewer";
 import { LoadingLogs } from "@/components/logs/loading-logs";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useRunLogs } from "@/data/pipeline-runs/run-logs";
-import { parseLogString } from "@/lib/logs";
 import { Skeleton } from "@zenml-io/react-component-library/components/server";
 import { useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { LogCombobox } from "./combobox";
+import { buildInternalLogEntries } from "@/lib/logs";
 
 export function LogTab() {
 	const { runId } = useParams() as { runId: string };
@@ -39,14 +39,18 @@ function LogTabContent({ sources, runId }: { sources: string[]; runId: string })
 	const [selectedSource, setSelectedSource] = useState<string>(sources[0]);
 	return (
 		<section className="space-y-5">
-			{sources.length > 1 && (
+			{sources.length > 0 && (
 				<div className="flex items-center gap-2">
 					<span className="text-theme-text-secondary">Logs source:</span>
-					<LogCombobox
-						sources={sources}
-						selectedSource={selectedSource}
-						setSelectedSource={setSelectedSource}
-					/>
+					{sources.length > 1 ? (
+						<LogCombobox
+							sources={sources}
+							selectedSource={selectedSource}
+							setSelectedSource={setSelectedSource}
+						/>
+					) : (
+						<span className="font-semibold capitalize">{selectedSource}</span>
+					)}
 				</div>
 			)}
 			<LogDisplay selectedSource={selectedSource} runId={runId} />
@@ -63,7 +67,7 @@ function LogDisplay({ selectedSource, runId }: LogTabContentProps) {
 
 	const parsedLogs = useMemo(() => {
 		if (!runLogs.data) return [];
-		return parseLogString(runLogs.data);
+		return buildInternalLogEntries(runLogs.data);
 	}, [runLogs.data]);
 
 	if (runLogs.isPending) return <LoadingLogs />;

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

@@ -1,15 +1,17 @@
 import Collapse from "@/assets/icons/collapse-text.svg?react";
 import Expand from "@/assets/icons/expand-full.svg?react";
-import { LogEntry as LogEntryType } from "@/types/logs"; // Assuming types are in src/types/logs.ts
-import { Button } from "@zenml-io/react-component-library/components/server";
-import React, { useState } from "react";
+import { LogEntryInternal } from "@/types/logs"; // Assuming types are in src/types/logs.ts
+import { Button, Input } from "@zenml-io/react-component-library/components/server";
+import React, { useCallback, useState } from "react";
+import { EmptyStateLogs } from "./empty-state-logs";
 import LogLine from "./log-line"; // Import the LogLine component
 import { LogToolbar } from "./toolbar";
 import { useLogSearch } from "./use-log-search";
-import { EmptyStateLogs } from "./empty-state-logs";
+import { useLogLevelFilter } from "./use-loglevel-filter";
+import { useLogPageInput } from "./use-logpage-input";
 
 interface EnhancedLogsViewerProps {
-	logs: LogEntryType[];
+	logs: LogEntryInternal[];
 	itemsPerPage?: number; // Optional prop for items per page
 }
 
@@ -19,10 +21,15 @@ export function EnhancedLogsViewer({
 	logs,
 	itemsPerPage = DEFAULT_ITEMS_PER_PAGE
 }: EnhancedLogsViewerProps) {
-	const [currentPage, setCurrentPage] = useState(1);
+	const [currentPage, setCurrentPageState] = useState(1);
 	const [textWrapEnabled, setTextWrapEnabled] = useState(true);
 
-	// Initialize search functionality on filtered logs
+	const {
+		filteredLogs: filteredLogsByLogLevel,
+		selectedLogLevel,
+		setSelectedLogLevel
+	} = useLogLevelFilter(logs);
+
 	const {
 		searchQuery,
 		setSearchQuery,
@@ -32,27 +39,42 @@ export function EnhancedLogsViewer({
 		goToNextMatch,
 		goToPreviousMatch,
 		highlightText
-	} = useLogSearch(logs);
+	} = useLogSearch(filteredLogsByLogLevel);
 
 	// Use search + filtered logs for pagination
 	const logsToDisplay = searchAndFilteredLogs;
 
 	// Reset to first page when search or filters change
-	React.useEffect(() => {
-		setCurrentPage(1);
-	}, [searchQuery]);
 
 	const totalPages = Math.ceil(logsToDisplay.length / itemsPerPage);
 	const startIndex = (currentPage - 1) * itemsPerPage;
 	const endIndex = startIndex + itemsPerPage;
 	const currentLogs = logsToDisplay.slice(startIndex, endIndex);
 
+	const { form } = useLogPageInput(currentPage, totalPages);
+
+	const setCurrentPage = useCallback(
+		(page: number) => {
+			setCurrentPageState(page);
+			form.setValue("page", page);
+		},
+		[form]
+	);
+
+	function handlePageSubmit(data: { page: number }) {
+		setCurrentPage(data.page);
+	}
+
+	React.useEffect(() => {
+		setCurrentPage(1);
+	}, [searchQuery]);
+
 	const handlePreviousPage = () => {
-		setCurrentPage((prev) => Math.max(prev - 1, 1));
+		setCurrentPage(Math.max(currentPage - 1, 1));
 	};
 
 	const handleNextPage = () => {
-		setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+		setCurrentPage(Math.min(currentPage + 1, totalPages));
 	};
 
 	const handleFirstPage = () => {
@@ -64,15 +86,14 @@ export function EnhancedLogsViewer({
 	};
 
 	const handleCopyAllLogs = () => {
-		const logText = getOriginalLogText(logsToDisplay);
-
+		const logText = getOriginalLogText(logs);
 		navigator.clipboard.writeText(logText).catch((err) => {
 			console.error("Failed to copy logs:", err);
 		});
 	};
 
 	const handleDownloadLogs = () => {
-		const logText = getOriginalLogText(logsToDisplay);
+		const logText = getOriginalLogText(logs);
 		const blob = new Blob([logText], { type: "text/plain" });
 		const url = URL.createObjectURL(blob);
 		const a = document.createElement("a");
@@ -89,10 +110,12 @@ export function EnhancedLogsViewer({
 	};
 
 	// Empty state - no logs at all
-	if (!logs) {
+	if (!logs || searchAndFilteredLogs.length === 0) {
 		return (
 			<div className="flex h-full flex-col space-y-5">
 				<LogToolbar
+					logLevel={selectedLogLevel}
+					setLogLevel={setSelectedLogLevel}
 					onSearchChange={setSearchQuery}
 					onCopyAll={handleCopyAllLogs}
 					onDownload={handleDownloadLogs}
@@ -113,6 +136,8 @@ export function EnhancedLogsViewer({
 	return (
 		<div className="flex h-full flex-col space-y-5">
 			<LogToolbar
+				logLevel={selectedLogLevel}
+				setLogLevel={setSelectedLogLevel}
 				onSearchChange={setSearchQuery}
 				onCopyAll={handleCopyAllLogs}
 				onDownload={handleDownloadLogs}
@@ -129,7 +154,7 @@ export function EnhancedLogsViewer({
 					{/* Table-style header with fixed structure */}
 					<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">
 						{/* Type column header - match LogLine badge area */}
-						<div className="flex w-8 flex-shrink-0 items-center">
+						<div className="flex w-12 flex-shrink-0 items-center">
 							<span className="text-text-sm font-semibold">Type</span>
 						</div>
 
@@ -216,9 +241,14 @@ export function EnhancedLogsViewer({
 								>
 									Previous
 								</Button>
-								<span className="text-sm text-theme-text-secondary">
-									Page {currentPage} of {totalPages}
-								</span>
+								<form
+									onSubmit={form.handleSubmit(handlePageSubmit)}
+									className="text-sm flex items-center gap-1 text-theme-text-secondary"
+								>
+									Page
+									<Input {...form.register("page")} className="w-10" />
+									of {totalPages}
+								</form>
 								<Button
 									className="bg-theme-surface-primary"
 									size="md"
@@ -248,6 +278,6 @@ export function EnhancedLogsViewer({
 	);
 }
 
-function getOriginalLogText(logs: LogEntryType[]) {
+function getOriginalLogText(logs: LogEntryInternal[]) {
 	return logs.map((log) => log.originalEntry).join("\n");
 }

src/components/logs/log-level-select.tsx

@@ -0,0 +1,74 @@
+import Warning from "@/assets/icons/alert-triangle.svg?react";
+import Running from "@/assets/icons/dots-circle.svg?react";
+import Info from "@/assets/icons/info.svg?react";
+import AlertCircle from "@/assets/icons/alert-circle.svg?react";
+import {
+	ScrollArea,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue
+} from "@zenml-io/react-component-library/components/client";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+
+const logLevels = [
+	{
+		value: 10,
+		label: "Debug",
+		icon: <Running className="size-3 shrink-0 fill-neutral-400" />
+	},
+	{
+		value: 20,
+		label: "Info",
+		icon: <Info className="size-3 shrink-0 fill-blue-500" />
+	},
+	{
+		value: 30,
+		label: "Warning",
+		icon: <Warning className="size-3 shrink-0 fill-warning-500" />
+	},
+	{
+		value: 40,
+		label: "Error",
+		icon: <AlertCircle className="size-3 shrink-0 fill-error-500" />
+	},
+	{
+		value: 50,
+		label: "Critical",
+		icon: <AlertCircle className="size-3 shrink-0 fill-error-700" />
+	}
+] as const;
+
+export const LogLevelSelect = forwardRef<
+	ElementRef<typeof SelectTrigger>,
+	ComponentPropsWithoutRef<typeof Select>
+>(({ ...props }, ref) => {
+	return (
+		<Select {...props}>
+			<SelectTrigger
+				ref={ref}
+				className="h-7 w-full truncate border border-[#D0D5DD] bg-theme-surface-primary p-2 text-left text-text-md"
+			>
+				<SelectValue
+					className="data-[placeholder]:text-theme-text-secondary"
+					placeholder="Select a role..."
+				/>
+			</SelectTrigger>
+			<SelectContent className="">
+				<ScrollArea viewportClassName="max-h-[300px]">
+					{logLevels.map((logLevel, idx) => (
+						<SelectItem key={idx} className="rounded-sm p-2" value={logLevel.value.toString()}>
+							<div className="flex items-center gap-1">
+								{logLevel.icon}
+								{logLevel.label}
+							</div>
+						</SelectItem>
+					))}
+				</ScrollArea>
+			</SelectContent>
+		</Select>
+	);
+});
+
+LogLevelSelect.displayName = "LogLevelSelect";

src/components/logs/log-line.tsx

@@ -1,26 +1,27 @@
 import React from "react";
-import { LogEntry, LogLevel } from "@/types/logs";
+import { LogEntryInternal, LoggingLevel } from "@/types/logs";
 import { CopyButton } from "../CopyButton";
+import { LOG_LEVEL_NAMES } from "@/lib/logs";
 
 interface LogLineProps {
-	entry: LogEntry;
+	entry: LogEntryInternal;
 	searchTerm?: string;
 	isCurrentMatch?: boolean;
 	textWrapEnabled?: boolean;
 	highlightedMessage?: React.ReactNode;
 }
 
-const getLogLevelColor = (level: LogLevel): string => {
+const getLogLevelColor = (level: LoggingLevel | undefined): string => {
 	switch (level) {
-		case "INFO":
+		case 10:
+			return "bg-neutral-400";
+		case 20:
 			return "bg-blue-500";
-		case "ERROR":
-			return "bg-error-500";
-		case "WARN":
+		case 30:
 			return "bg-warning-500";
-		case "DEBUG":
-			return "bg-neutral-400";
-		case "CRITICAL":
+		case 40:
+			return "bg-error-500";
+		case 50:
 			return "bg-error-700";
 		default:
 			return "bg-neutral-400";
@@ -41,7 +42,7 @@ export function LogLine({
 }: LogLineProps) {
 	const { timestamp, level, message, originalEntry } = entry;
 	const formattedTimestamp = timestamp ? formatTimestamp(timestamp) : "";
-	const levelColorClass = getLogLevelColor(level);
+	const levelColorClass = getLogLevelColor(level ?? undefined);
 
 	const highlightSearchTerm = (text: string) => {
 		if (!searchTerm) return text;
@@ -70,9 +71,11 @@ export function LogLine({
 	return (
 		<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">
 			{/* Compact log level badge */}
-			<div className="flex max-h-6 w-8 flex-shrink-0 items-center">
+			<div className="flex max-h-6 w-12 flex-shrink-0 items-center">
 				<div className={`h-4 w-[2px] rounded-sm ${levelColorClass} mr-2`}></div>
-				<span className="text-xs font-medium text-theme-text-tertiary">{level}</span>
+				<span className="text-xs font-medium text-theme-text-tertiary">
+					{LOG_LEVEL_NAMES[level ?? 20]}
+				</span>
 			</div>
 
 			{/* Timestamp */}