feat: add reload button to logs (#839)

Author: tzador

src/assets/icons/download-01.svg

@@ -12,13 +12,15 @@ import { useLogPageInput } from "./use-logpage-input";
 
 interface EnhancedLogsViewerProps {
 	logs: LogEntryInternal[];
+	reloadLogs: () => void;
 	itemsPerPage?: number; // Optional prop for items per page
 }
 
 const DEFAULT_ITEMS_PER_PAGE = 100;
 
 export function EnhancedLogsViewer({
 	logs,
+	reloadLogs,
 	itemsPerPage = DEFAULT_ITEMS_PER_PAGE
 }: EnhancedLogsViewerProps) {
 	const [currentPage, setCurrentPageState] = useState(1);
@@ -117,6 +119,7 @@ export function EnhancedLogsViewer({
 					logLevel={selectedLogLevel}
 					setLogLevel={setSelectedLogLevel}
 					onSearchChange={setSearchQuery}
+					onReload={reloadLogs}
 					onCopyAll={handleCopyAllLogs}
 					onDownload={handleDownloadLogs}
 					searchQuery={searchQuery}
@@ -139,6 +142,7 @@ export function EnhancedLogsViewer({
 				logLevel={selectedLogLevel}
 				setLogLevel={setSelectedLogLevel}
 				onSearchChange={setSearchQuery}
+				onReload={reloadLogs}
 				onCopyAll={handleCopyAllLogs}
 				onDownload={handleDownloadLogs}
 				searchQuery={searchQuery}

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

@@ -1,15 +1,23 @@
 import Copy from "@/assets/icons/copy.svg?react";
 import Download from "@/assets/icons/download-01.svg?react";
 import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
+import Refresh from "@/assets/icons/refresh.svg?react";
 import { Button } from "@zenml-io/react-component-library/components/server";
 import { SearchField } from "../SearchField";
 import { LogLevelSelect } from "./log-level-select";
 import { LoggingLevel } from "@/types/logs";
 import { Dispatch, SetStateAction } from "react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from "@zenml-io/react-component-library";
 
 interface LogToolbarProps {
 	onSearchChange: (searchTerm: string) => void;
 
+	onReload: () => void;
 	onCopyAll: () => void;
 	onDownload: () => void;
 	// Search-related props from useLogSearch hook
@@ -25,6 +33,7 @@ interface LogToolbarProps {
 
 export function LogToolbar({
 	onSearchChange,
+	onReload,
 	onCopyAll,
 	onDownload,
 	searchQuery = "",
@@ -83,33 +92,56 @@ export function LogToolbar({
 					</div>
 
 					{/* Right side - Action Buttons */}
-					<div className="flex items-center gap-2">
-						<Button
-							size="md"
-							emphasis="subtle"
-							intent="secondary"
-							onClick={onCopyAll}
-							title="Copy all displayed logs"
-							className="bg-theme-surface-primary"
-						>
-							<Copy className="mr-1 h-4 w-4 fill-theme-text-secondary" />
-							Copy All
-						</Button>
+					<TooltipProvider>
+						<div className="flex items-center gap-2">
+							<LogIconButton
+								icon={<Refresh className="h-4 w-4 fill-theme-text-primary" />}
+								tooltip="Reload logs"
+								onClick={onReload}
+							/>
 
-						<Button
-							size="md"
-							emphasis="subtle"
-							intent="secondary"
-							onClick={onDownload}
-							title="Download logs as file"
-							className="bg-theme-surface-primary"
-						>
-							<Download className="mr-1 h-5 w-5 fill-theme-text-tertiary" />
-							Download
-						</Button>
-					</div>
+							<LogIconButton
+								icon={<Copy className="h-4 w-4 fill-theme-text-primary" />}
+								tooltip="Copy all displayed logs"
+								onClick={onCopyAll}
+							/>
+
+							<LogIconButton
+								icon={<Download className="h-4 w-4 fill-theme-text-primary" />}
+								tooltip="Download logs as file"
+								onClick={onDownload}
+							/>
+						</div>
+					</TooltipProvider>
 				</div>
 			</div>
 		</>
 	);
 }
+
+function LogIconButton({
+	icon,
+	tooltip,
+	onClick
+}: {
+	icon: React.ReactNode;
+	tooltip: string;
+	onClick: () => void;
+}) {
+	return (
+		<Tooltip delayDuration={200}>
+			<TooltipTrigger>
+				<Button
+					size="md"
+					emphasis="subtle"
+					intent="secondary"
+					onClick={onClick}
+					className="flex aspect-square items-center justify-center bg-theme-surface-primary p-0"
+				>
+					{icon}
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>{tooltip}</TooltipContent>
+		</Tooltip>
+	);
+}

src/components/logs/toolbar.tsx

@@ -88,7 +88,7 @@ function LogDisplay({ selectedSource, runId }: LogTabContentProps) {
 
 	return (
 		<div className="h-full w-full">
-			<EnhancedLogsViewer logs={parsedLogs} />
+			<EnhancedLogsViewer logs={parsedLogs} reloadLogs={() => runLogs.refetch()} />
 		</div>
 	);
 }

src/components/runs/detail-tabs/LogTab/logs.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 export function StepLogsTab({ stepId }: Props) {
-	const { data, isPending, isError, error } = useStepLogs({ stepId });
+	const { data, isPending, isError, error, refetch } = useStepLogs({ stepId });
 
 	const parsedLogs = useMemo(() => {
 		if (!data) return [];
@@ -37,7 +37,7 @@ export function StepLogsTab({ stepId }: Props) {
 
 	return (
 		<div className="space-y-5">
-			<EnhancedLogsViewer logs={parsedLogs} />
+			<EnhancedLogsViewer logs={parsedLogs} reloadLogs={refetch} />
 		</div>
 	);
 }