feat: more code

Author: Cahllagerfeld

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

@@ -8,6 +8,7 @@ import { Skeleton } from "@zenml-io/react-component-library/components/server";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { LogCombobox } from "./combobox";
+import { LogViewerProvider, useLogViewerContext } from "@/components/logs/logviewer-context";
 
 export function LogTab() {
 const { runId } = useParams() as { runId: string };
@@ -48,7 +49,9 @@ function LogTabContent({ sources, runId }: { sources: string[]; runId: string })
 />
 </div>
 )}
-<LogDisplay selectedSource={selectedSource} runId={runId} />
+<LogViewerProvider>
+<LogDisplay selectedSource={selectedSource} runId={runId} />
+</LogViewerProvider>
 </section>
 );
 }
@@ -58,7 +61,11 @@ type LogTabContentProps = {
 runId: string;
 };
 function LogDisplay({ selectedSource, runId }: LogTabContentProps) {
-const runLogs = useRunLogs({ runId, queries: { source: selectedSource } });
+const { logLevel, searchQuery } = useLogViewerContext();
+const runLogs = useRunLogs({
+runId,
+queries: { source: selectedSource, level: logLevel, search: searchQuery }
+});
 
 if (runLogs.isPending) return <LoadingLogs />;
 

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

@@ -3,10 +3,11 @@ import Expand from "@/assets/icons/expand-full.svg?react";
 import { LogEntry as LogEntryType, LogPage } 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 { EmptyStateLogs } from "./empty-state-logs";
 import LogLine from "./log-line"; // Import the LogLine component
+import { useLogViewerContext } from "./logviewer-context";
 import { LogToolbar } from "./toolbar";
 import { useLogSearch } from "./use-log-search";
-import { EmptyStateLogs } from "./empty-state-logs";
 
 interface EnhancedLogsViewerProps {
 logPage: LogPage;
@@ -21,7 +22,7 @@ export function EnhancedLogsViewer({
 }: EnhancedLogsViewerProps) {
 const [currentPage, setCurrentPage] = useState(1);
 const [textWrapEnabled, setTextWrapEnabled] = useState(true);
-const [searchQuery, setSearchQuery] = useState("");
+const { searchQuery, setSearchQuery } = useLogViewerContext();
 const [caseSensitive] = useState(false);
 
 const logs = logPage.items;

src/components/logs/loglevel-select.tsx

@@ -0,0 +1,62 @@
+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"
+},
+{
+value: 20,
+label: "Info"
+},
+{
+value: 30,
+label: "Warning"
+},
+{
+value: 40,
+label: "Error"
+},
+{
+value: 50,
+label: "Critical"
+}
+] 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()}>
+{logLevel.label}
+</SelectItem>
+))}
+</ScrollArea>
+</SelectContent>
+</Select>
+);
+});
+
+LogLevelSelect.displayName = "LogLevelSelect";

src/components/logs/logviewer-context.tsx

@@ -0,0 +1,28 @@
+import { Dispatch, SetStateAction, createContext, useContext, useState } from "react";
+
+type LogViewerContextType = {
+searchQuery: string;
+setSearchQuery: Dispatch<SetStateAction<string>>;
+logLevel: number;
+setLogLevel: Dispatch<SetStateAction<number>>;
+};
+
+export const LogViewerContext = createContext<LogViewerContextType | null>(null);
+
+export function LogViewerProvider({ children }: { children: React.ReactNode }) {
+const [searchQuery, setSearchQuery] = useState("");
+const [logLevel, setLogLevel] = useState(20);
+return (
+<LogViewerContext.Provider value={{ searchQuery, setSearchQuery, logLevel, setLogLevel }}>
+{children}
+</LogViewerContext.Provider>
+);
+}
+
+export function useLogViewerContext() {
+const context = useContext(LogViewerContext);
+if (context === null) {
+throw new Error("useLogViewerContext must be used within a LogViewerProvider");
+}
+return context;
+}

src/components/logs/toolbar.tsx

@@ -2,12 +2,14 @@ import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
 import Download from "@/assets/icons/download-01.svg?react";
 import { Button } from "@zenml-io/react-component-library/components/server";
 import { SearchField } from "../SearchField";
+import { LogLevelSelect } from "./loglevel-select";
+import { useLogViewerContext } from "./logviewer-context";
 
 interface LogToolbarProps {
 onSearchChange: (searchTerm: string) => void;
 onDownload: () => void;
 // Search-related props from useLogSearch hook
-searchQuery?: string;
+searchQuery: string;
 currentMatchIndex?: number;
 totalMatches?: number;
 onPreviousMatch?: () => void;
@@ -18,12 +20,13 @@ export function LogToolbar({
 onSearchChange,
 
 onDownload,
-searchQuery = "",
+searchQuery,
 currentMatchIndex = 0,
 totalMatches = 0,
 onPreviousMatch,
 onNextMatch
 }: LogToolbarProps) {
+const { logLevel, setLogLevel } = useLogViewerContext();
 return (
 <>
 {/* Main Toolbar */}
@@ -33,6 +36,7 @@ export function LogToolbar({
 <div className="flex items-center gap-2">
 <SearchField
 searchParams={{}}
+value={searchQuery}
 inMemoryHandler={onSearchChange}
 placeholder="Search logs..."
 />
@@ -63,6 +67,10 @@ export function LogToolbar({
 </Button>
 </div>
 )}
+<LogLevelSelect
+value={logLevel.toString()}
+onValueChange={(value) => setLogLevel(Number(value))}
+/>
 </div>
 
 {/* Right side - Action Buttons */}