refactor(UI-1536): update copying and download output logs

src/components/organisms/deployments/sessions/viewer.tsx

@@ -13,18 +13,16 @@ import {
 	dateTimeFormat,
 	defaultSessionsPageSize,
 	defaultSessionTab,
-	maxLogsPageSize,
 	namespaces,
 	sessionLogRowHeight,
 	sessionTabs,
 	timeFormat,
 } from "@constants";
 import { LoggerService } from "@services/index";
 import { SessionsService } from "@services/sessions.service";
-import { EventListenerName, SessionLogType, SessionState } from "@src/enums";
+import { EventListenerName, SessionState } from "@src/enums";
 import { triggerEvent, useEventListener } from "@src/hooks";
-import { SessionOutputLog, ViewerSession } from "@src/interfaces/models/session.interface";
-import { convertSessionLogProtoToViewerOutput } from "@src/models";
+import { ViewerSession } from "@src/interfaces/models/session.interface";
 import { useActivitiesCacheStore, useOutputsCacheStore, useToastStore } from "@src/store";
 import { copyToClipboard } from "@src/utilities";
 
@@ -52,115 +50,45 @@ export const SessionViewer = () => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [isInitialLoad, setIsInitialLoad] = useState(true);
 	const addToast = useToastStore((state) => state.addToast);
-	const [isFetchingAllSessionPrints, setIsFetchingAllSessionPrints] = useState<"copy" | "download">();
+	const [isCopyingLogs, setIsCopyingLogs] = useState(false);
+	const [isDownloadingLogs, setIsDownloadingLogs] = useState(false);
 
-	const { loading: loadingOutputs, loadLogs: loadOutputs } = useOutputsCacheStore();
+	const { loading: loadingOutputs, loadLogs: loadOutputs, sessions: outputsSessions } = useOutputsCacheStore();
 	const { loading: loadingActivities, loadLogs: loadActivities, sessions } = useActivitiesCacheStore();
 
-	const getAllSessionLogs = async (pageToken: string): Promise<SessionOutputLog[]> => {
-		if (!sessionId) return [];
-
-		const { data, error } = await SessionsService.getOutputsBySessionId(sessionId, pageToken, maxLogsPageSize);
-
-		if (error || !data) {
-			throw new Error(t("errorFetchingLogs"));
-		}
-
-		const logs = [...data.logs];
-
-		if (data.nextPageToken) {
-			const nextLogs = await getAllSessionLogs(data.nextPageToken);
-			logs.push(...nextLogs);
-		}
-
-		const { data: sessionStateRecords, error: sessionStateRequestError } =
-			await SessionsService.getLogRecordsBySessionId(sessionId, undefined, 1, SessionLogType.State);
-		if (sessionStateRequestError) {
-			addToast({ message: t("activityLogsFetchError"), type: "error" });
-		}
-		const lastSessionState = convertSessionLogProtoToViewerOutput(sessionStateRecords?.records?.[0]);
-
-		if (lastSessionState) {
-			logs.unshift(lastSessionState);
-		}
-
-		return logs;
-	};
-
 	const copySessionLogs = async () => {
-		await handleSessionLogs(
-			async (logContent) => {
-				if (!logContent) return;
-				const { isError, message } = await copyToClipboard(logContent);
-				addToast({
-					message: message,
-					type: isError ? "error" : "success",
-				});
-			},
-			t("errorCopyingLogs"),
-			t("noLogsToDownload"),
-			"copy"
+		if (!sessionId) return;
+		setIsCopyingLogs(true);
+		const { isError, message } = await copyToClipboard(
+			outputsSessions[sessionId].outputs.map((log) => `[${log.time}]: ${log.print}`).join("\n")
 		);
+		addToast({
+			message: message,
+			type: isError ? "error" : "success",
+		});
+		setIsCopyingLogs(false);
 	};
 
 	const downloadSessionLogs = async () => {
-		await handleSessionLogs(
-			(logContent) => {
-				if (!logContent) return;
-				const blob = new Blob([logContent], { type: "text/plain" });
-				const url = URL.createObjectURL(blob);
-				const dateTime = dayjs().format(dateTimeFormat);
-				const fileName = `${sessionInfo?.sourceType?.toLowerCase() || "session"}-${dateTime}.log`;
-
-				const link = Object.assign(document.createElement("a"), {
-					href: url,
-					download: fileName,
-				});
-
-				document.body.appendChild(link);
-				link.click();
-				document.body.removeChild(link);
-				URL.revokeObjectURL(url);
-			},
-			t("errorDownloadingLogs"),
-			t("noLogsToDownload"),
-			"download"
-		);
-	};
-
-	const handleSessionLogs = async (
-		callback: (logContent: string) => Promise<void> | void,
-		errorMessage: string,
-		noLogsMessage: string,
-		action: "copy" | "download"
-	) => {
-		if (!sessionId || !sessionInfo) return;
-		setIsFetchingAllSessionPrints(action);
-
-		try {
-			const logContent = (await getAllSessionLogs(""))
-				.reverse()
-				.map((log) => `[${log.time}]: ${log.print}`)
-				.join("\n");
-
-			if (!logContent.length) {
-				addToast({
-					message: noLogsMessage,
-					type: "error",
-				});
-				setIsFetchingAllSessionPrints(undefined);
-				return;
-			}
-
-			await callback(logContent);
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		} catch (error) {
-			addToast({
-				message: errorMessage,
-				type: "error",
-			});
+		if (!sessionId) return;
+		setIsDownloadingLogs(true);
+		const { data: logContent } = await SessionsService.downloadLogs(sessionId);
+		if (!logContent) {
+			addToast({ message: t("noLogsFound"), type: "error" });
+			return;
 		}
-		setIsFetchingAllSessionPrints(undefined);
+		const blob = new Blob([logContent], { type: "text/plain;charset=utf-8" });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement("a");
+		link.href = url;
+		if (!sessionInfo) return;
+		const timestamp = dayjs(sessionInfo.createdAt).format("YY-MM-DD_HH-mm");
+		link.download = `${timestamp}_${sessionId}.log`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+		URL.revokeObjectURL(url);
+		setIsDownloadingLogs(false);
 	};
 
 	const closeEditor = useCallback(() => {
@@ -373,10 +301,10 @@ export const SessionViewer = () => {
 					<Tooltip content={t("copy")} position="bottom">
 						<Button
 							className="group py-2 pl-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
-							disabled={isFetchingAllSessionPrints === "copy"}
+							disabled={isCopyingLogs}
 							onClick={copySessionLogs}
 						>
-							{isFetchingAllSessionPrints === "copy" ? (
+							{isCopyingLogs ? (
 								<div className="flex size-4 items-center">
 									<Loader size="sm" />
 								</div>
@@ -388,10 +316,10 @@ export const SessionViewer = () => {
 					<Tooltip content={t("download")} position="bottom">
 						<Button
 							className="group py-2 pl-2 text-white disabled:cursor-not-allowed disabled:opacity-50"
-							disabled={isFetchingAllSessionPrints === "download"}
+							disabled={isDownloadingLogs}
 							onClick={downloadSessionLogs}
 						>
-							{isFetchingAllSessionPrints === "download" ? (
+							{isDownloadingLogs ? (
 								<div className="flex size-4 items-center">
 									<Loader size="sm" />
 								</div>

src/locales/en/errors/translation.json

@@ -28,6 +28,7 @@
 	"failedRemoveSessionExtended": "Failed to remove session, ID: {{sessionId}}",
 	"failedStopSession": "Failed to stop session",
 	"failedStopSessionExtended": "Failed to stop session ID: {{sessionId}}, error: {{error}}",
+	"sessionDownloadLogsFailedExtended": "Failed to download session logs, ID: {{sessionId}}, error: {{error}}",
 	"fileAddFailed": "Failed to create file: {{fileName}}",
 	"fileAddFailedExtended": "Failed to create a file. Project ID: {{projectId}}, File name: {{fileName}}, Error: {{error}}",
 	"fileAddFailedExtendedNoError": "Failed to create a file. Project ID: {{projectId}}, File name: {{fileName}}",

src/services/sessions.service.ts

@@ -213,4 +213,21 @@ export class SessionsService {
 			return { data: undefined, error };
 		}
 	}
+
+	static async downloadLogs(sessionId: string): Promise<ServiceResponse<Uint8Array<ArrayBuffer>>> {
+		try {
+			const { data: logs } = await sessionsClient.downloadLogs({ sessionId });
+
+			return { data: logs, error: undefined };
+		} catch (error) {
+			const log = t("sessionDownloadLogsFailedExtended", {
+				sessionId,
+				error,
+				ns: "errors",
+			});
+			LoggerService.error(namespaces.sessionsService, log);
+
+			return { data: undefined, error };
+		}
+	}
 }

src/utilities/copyToClipboard.utils.ts

@@ -20,6 +20,7 @@ const retryCopyToClipboard = (text: string): { isError: boolean; message: string
 
 export const copyToClipboard = async (text: string): Promise<{ isError: boolean; message: string }> => {
 	try {
+		await new Promise((resolve) => setTimeout(resolve, 0));
 		if (navigator.clipboard && window.isSecureContext) {
 			await navigator.clipboard.writeText(text);
 		} else {