feat: download

Author: Cahllagerfeld

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

@@ -2,13 +2,14 @@ import { ErrorFallback } from "@/components/Error";
 import { EmptyStateLogs } from "@/components/logs/empty-state-logs";
 import { EnhancedLogsViewer } from "@/components/logs/enhanced-log-viewer";
 import { LoadingLogs } from "@/components/logs/loading-logs";
+import { LogViewerProvider, useLogViewerContext } from "@/components/logs/logviewer-context";
+import { apiPaths, createApiPath } from "@/data/api";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useRunLogs } from "@/data/pipeline-runs/run-logs";
 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 };
@@ -73,9 +74,12 @@ function LogDisplay({ selectedSource, runId }: LogTabContentProps) {
 return <ErrorFallback err={runLogs.error} />;
 }
 
+const downloadUrl =
+createApiPath(apiPaths.runs.logsDownload(runId)) + "?source=" + selectedSource;
+
 return (
 <div className="h-full w-full">
-<EnhancedLogsViewer logPage={runLogs.data} />
+<EnhancedLogsViewer downloadLink={downloadUrl} logPage={runLogs.data} />
 </div>
 );
 }

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

@@ -1,6 +1,6 @@
 import Collapse from "@/assets/icons/collapse-text.svg?react";
 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 { 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";
@@ -13,9 +13,10 @@ import { useLogSearch } from "./use-log-search";
 interface EnhancedLogsViewerProps {
 logPage: LogPage;
 itemsPerPage?: number;
+downloadLink?: string;
 }
 
-export function EnhancedLogsViewer({ logPage }: EnhancedLogsViewerProps) {
+export function EnhancedLogsViewer({ logPage, downloadLink }: EnhancedLogsViewerProps) {
 const { currentPage, setCurrentPage } = useLogViewerContext();
 const [textWrapEnabled, setTextWrapEnabled] = useState(true);
 const { searchQuery, setSearchQuery } = useLogViewerContext();
@@ -40,19 +41,6 @@ export function EnhancedLogsViewer({ logPage }: EnhancedLogsViewerProps) {
 setCurrentPage(1);
 }, [searchQuery]);
 
-const handleDownloadLogs = () => {
-const logText = getOriginalLogText(logsToDisplay);
-const blob = new Blob([logText], { type: "text/plain" });
-const url = URL.createObjectURL(blob);
-const a = document.createElement("a");
-a.href = url;
-a.download = `logs-${new Date().toISOString().split("T")[0]}.txt`;
-document.body.appendChild(a);
-a.click();
-document.body.removeChild(a);
-URL.revokeObjectURL(url);
-};
-
 const handleToggleTextWrap = () => {
 setTextWrapEnabled((prev) => !prev);
 };
@@ -62,8 +50,8 @@ export function EnhancedLogsViewer({ logPage }: EnhancedLogsViewerProps) {
 return (
 <div className="flex h-full flex-col space-y-5">
 <LogToolbar
+downloadLink={downloadLink}
 onSearchChange={setSearchQuery}
-onDownload={handleDownloadLogs}
 searchQuery={searchQuery}
 currentMatchIndex={currentMatchIndex}
 totalMatches={totalMatches}
@@ -81,8 +69,8 @@ export function EnhancedLogsViewer({ logPage }: EnhancedLogsViewerProps) {
 return (
 <div className="flex h-full flex-col space-y-5">
 <LogToolbar
+downloadLink={downloadLink}
 onSearchChange={setSearchQuery}
-onDownload={handleDownloadLogs}
 searchQuery={searchQuery}
 currentMatchIndex={currentMatchIndex}
 totalMatches={totalMatches}
@@ -159,7 +147,3 @@ export function EnhancedLogsViewer({ logPage }: EnhancedLogsViewerProps) {
 </div>
 );
 }
-
-function getOriginalLogText(logs: LogEntryType[]) {
-return logs.map((log) => log.message).join("\n");
-}

src/components/logs/toolbar.tsx

@@ -7,7 +7,8 @@ import { useLogViewerContext } from "./logviewer-context";
 
 interface LogToolbarProps {
 onSearchChange: (searchTerm: string) => void;
-onDownload: () => void;
+downloadLink?: string;
+
 // Search-related props from useLogSearch hook
 searchQuery: string;
 currentMatchIndex?: number;
@@ -18,8 +19,7 @@ interface LogToolbarProps {
 
 export function LogToolbar({
 onSearchChange,
-
-onDownload,
+downloadLink,
 searchQuery,
 currentMatchIndex = 0,
 totalMatches = 0,
@@ -74,17 +74,21 @@ export function LogToolbar({
 </div>
 
 {/* Right side - Action Buttons */}
-<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>
+{downloadLink && (
+<Button
+asChild
+size="md"
+emphasis="subtle"
+intent="secondary"
+title="Download logs as file"
+className="bg-theme-surface-primary"
+>
+<a href={downloadLink}>
+<Download className="mr-1 h-5 w-5 fill-theme-text-tertiary" />
+Download
+</a>
+</Button>
+)}
 </div>
 </div>
 </>

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

@@ -3,6 +3,7 @@ import { LoadingLogs } from "@/components/logs/loading-logs";
 import { useStepLogs } from "@/data/steps/step-logs-query";
 import { ErrorFallback } from "../../Error";
 import { useLogViewerContext } from "@/components/logs/logviewer-context";
+import { apiPaths, createApiPath } from "@/data/api";
 
 type Props = {
 stepId: string;
@@ -23,9 +24,11 @@ export function StepLogsTab({ stepId }: Props) {
 return <LoadingLogs />;
 }
 
+const downloadUrl = createApiPath(apiPaths.steps.logsDownload(stepId));
+
 return (
 <div className="space-y-5">
-<EnhancedLogsViewer logPage={data} />
+<EnhancedLogsViewer downloadLink={downloadUrl} logPage={data} />
 </div>
 );
 }

src/data/api.ts

@@ -30,6 +30,7 @@ export const apiPaths = {
 detail: (id: string) => `/runs/${id}`,
 dag: (id: string) => `/runs/${id}/dag`,
 logs: (runId: string) => `/runs/${runId}/logs`,
+logsDownload: (runId: string) => `/runs/${runId}/logs/download`,
 refresh: (runId: string) => `/runs/${runId}/refresh`,
 stop: (runId: string) => `/runs/${runId}/stop`
 },
@@ -70,7 +71,8 @@ export const apiPaths = {
 },
 steps: {
 detail: (stepId: string) => `/steps/${stepId}`,
-logs: (stepId: string) => `/steps/${stepId}/logs`
+logs: (stepId: string) => `/steps/${stepId}/logs`,
+logsDownload: (stepId: string) => `/steps/${stepId}/logs/download`
 },
 users: {
 all: "/users",