From 75ab1b1a51e548b86c4e4235b61de54f48516bd0 Mon Sep 17 00:00:00 2001
From: Danil Kostromin <danil.kostromin@arknetworks.am>
Date: Mon, 15 Jan 2024 06:12:47 +0200
Subject: [PATCH] feat(import): add live import logs via polling for changes

Changes:
- Poll import logs every 5 seconds for updates
- Fix broken link to live import logs

Signed-off-by: Danil Kostromin <danil.kostromin@arknetworks.am>
---
 .../import-log.component.tsx                  | 61 +++++++++++++------
 ...n-form-result-list.component.spec.tsx.snap | 42 +++++++------
 .../import-run-form-result-list.component.tsx | 11 +---
 3 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/libs/bublik/features/run-import/src/lib/import-events-table/import-log.component.tsx b/libs/bublik/features/run-import/src/lib/import-events-table/import-log.component.tsx
index ce70e13f..a4ed3124 100644
--- a/libs/bublik/features/run-import/src/lib/import-events-table/import-log.component.tsx
+++ b/libs/bublik/features/run-import/src/lib/import-events-table/import-log.component.tsx
@@ -1,6 +1,8 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
-import { useGetImportLogQuery, usePrefetch } from '@/services/bublik-api';
+import { ComponentProps, ElementRef, useEffect, useRef } from 'react';
+
+import { useGetImportLogQuery } from '@/services/bublik-api';
 import {
 	Dialog,
 	DialogClose,
@@ -13,60 +15,81 @@ import {
 import { ImportJsonLog } from '@/shared/types';
 import { useCopyToClipboard } from '@/shared/hooks';
 
-export interface JsonLogContainerProsp {
+export interface JsonLogContainerProps {
 	taskId: string;
+	enablePolling?: boolean;
 }
 
-export const JsonLogContainer = ({ taskId }: JsonLogContainerProsp) => {
-	const prefetchLog = usePrefetch('getImportLog');
-
+export const JsonLogContainer = ({
+	taskId,
+	enablePolling
+}: JsonLogContainerProps) => {
 	return (
 		<Dialog>
-			<DialogTrigger asChild onMouseEnter={() => prefetchLog(taskId)}>
+			<DialogTrigger asChild>
 				<button className="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff]">
 					<Icon name="BoxArrowRight" />
 					<span>Logs</span>
 				</button>
 			</DialogTrigger>
 			<ModalContent className="bg-[#24292f] rounded-lg w-[90vw] flex flex-col">
-				<ImportLogTableContainer taskId={taskId} />
+				<ImportLogTableContainer
+					taskId={taskId}
+					enablePolling={enablePolling}
+				/>
 			</ModalContent>
 		</Dialog>
 	);
 };
 
 export interface ImportLogTableContainerProps {
-	taskId: string;
+	taskId: ComponentProps<typeof JsonLogContainer>['taskId'];
+	enablePolling: ComponentProps<typeof JsonLogContainer>['enablePolling'];
 }
 
 export const ImportLogTableContainer = (
 	props: ImportLogTableContainerProps
 ) => {
 	const { taskId } = props;
+	const { data, isLoading, isFetching, error } = useGetImportLogQuery(taskId, {
+		pollingInterval: props.enablePolling ? 5000 : 0
+	});
 
-	const { data, isLoading, error } = useGetImportLogQuery(taskId);
+	const scrollRef = useRef<ElementRef<'div'>>(null);
 
 	const [, copy] = useCopyToClipboard({
 		onSuccess: () => toast.success('Copied to clipboard')
 	});
 
-	if (error) {
-		return <div>Error..</div>;
-	}
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		if (!props.enablePolling) return;
+
+		setTimeout(
+			() => el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' }),
+			0
+		);
+	}, [props.enablePolling, isFetching]);
+
+	if (error) return <div>Error..</div>;
 
-	if (isLoading) {
-		return <Skeleton className="w-full h-[90vh] rounded-md" />;
-	}
+	if (isLoading) return <Skeleton className="w-full h-[90vh] rounded-md" />;
 
-	if (!data) {
-		return <div>Empty </div>;
-	}
+	if (!data) return <div>Empty </div>;
 
 	return (
 		<>
 			<div className="px-4 py-2 flex gap-4 items-center justify-between">
 				<h2 className="text-gray-300 text-lg">Logs</h2>
 				<div className="flex gap-4 items-center">
+					{props.enablePolling ? (
+						<Icon
+							name="InformationCircleProgress"
+							size={24}
+							className="text-gray-400 p-0.5 animate-spin"
+						/>
+					) : null}
 					<button
 						className="p-0.5 text-gray-400 hover:bg-gray-600/20 rounded-md hover:text-gray-200"
 						onClick={async () => {
@@ -81,7 +104,7 @@ export const ImportLogTableContainer = (
 					</DialogClose>
 				</div>
 			</div>
-			<div className="px-4 pt-6 pb-4 flex-grow overflow-auto">
+			<div className="px-4 pt-6 pb-4 flex-grow overflow-auto" ref={scrollRef}>
 				<ImportLogTable logs={data} />
 			</div>
 		</>
diff --git a/libs/bublik/features/run-import/src/lib/import-run-form/__snapshots__/import-run-form-result-list.component.spec.tsx.snap b/libs/bublik/features/run-import/src/lib/import-run-form/__snapshots__/import-run-form-result-list.component.spec.tsx.snap
index c0355c46..bd2dd0d1 100644
--- a/libs/bublik/features/run-import/src/lib/import-run-form/__snapshots__/import-run-form-result-list.component.spec.tsx.snap
+++ b/libs/bublik/features/run-import/src/lib/import-run-form/__snapshots__/import-run-form-result-list.component.spec.tsx.snap
@@ -36,11 +36,13 @@ exports[`ImportRunFormResultList > should render successfully 1`] = `
             <div
               class="flex flex-col w-24 gap-1"
             >
-              <a
-                class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff] text-xs"
-                href="http://localhost:3000/v1/logs/1"
-                rel="noreferrer"
-                target="_blank"
+              <button
+                aria-controls="radix-:r3:"
+                aria-expanded="false"
+                aria-haspopup="dialog"
+                class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff]"
+                data-state="closed"
+                type="button"
               >
                 <svg
                   fill="none"
@@ -59,7 +61,7 @@ exports[`ImportRunFormResultList > should render successfully 1`] = `
                 <span>
                   Logs
                 </span>
-              </a>
+              </button>
               <a
                 class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff] text-xs"
                 href="http://localhost:3000/flower/task/1"
@@ -115,11 +117,13 @@ exports[`ImportRunFormResultList > should render successfully 1`] = `
             <div
               class="flex flex-col w-24 gap-1"
             >
-              <a
-                class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff] text-xs"
-                href="http://localhost:3000/v1/logs/2"
-                rel="noreferrer"
-                target="_blank"
+              <button
+                aria-controls="radix-:r6:"
+                aria-expanded="false"
+                aria-haspopup="dialog"
+                class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff]"
+                data-state="closed"
+                type="button"
               >
                 <svg
                   fill="none"
@@ -138,7 +142,7 @@ exports[`ImportRunFormResultList > should render successfully 1`] = `
                 <span>
                   Logs
                 </span>
-              </a>
+              </button>
               <a
                 class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff] text-xs"
                 href="http://localhost:3000/flower/task/2"
@@ -194,11 +198,13 @@ exports[`ImportRunFormResultList > should render successfully 1`] = `
             <div
               class="flex flex-col w-24 gap-1"
             >
-              <a
-                class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff] text-xs"
-                href="http://localhost:3000/v1/logs/3"
-                rel="noreferrer"
-                target="_blank"
+              <button
+                aria-controls="radix-:r9:"
+                aria-expanded="false"
+                aria-haspopup="dialog"
+                class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff]"
+                data-state="closed"
+                type="button"
               >
                 <svg
                   fill="none"
@@ -217,7 +223,7 @@ exports[`ImportRunFormResultList > should render successfully 1`] = `
                 <span>
                   Logs
                 </span>
-              </a>
+              </button>
               <a
                 class="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff] text-xs"
                 href="http://localhost:3000/flower/task/3"
diff --git a/libs/bublik/features/run-import/src/lib/import-run-form/import-run-form-result-list.component.tsx b/libs/bublik/features/run-import/src/lib/import-run-form/import-run-form-result-list.component.tsx
index 8a146229..afebf294 100644
--- a/libs/bublik/features/run-import/src/lib/import-run-form/import-run-form-result-list.component.tsx
+++ b/libs/bublik/features/run-import/src/lib/import-run-form/import-run-form-result-list.component.tsx
@@ -5,6 +5,7 @@ import { ImportEventResponse } from '@/shared/types';
 import { DialogDescription, DialogTitle, Icon } from '@/shared/tailwind-ui';
 
 import { statusBadgeStyles } from '../import-events-table/import-event-table.columns';
+import { JsonLogContainer } from '../import-events-table/import-log.component';
 
 export interface RunImportResultProps {
 	results: ImportEventResponse[];
@@ -27,15 +28,7 @@ export const RunImportResult = (props: RunImportResultProps) => {
 							<div className="flex flex-col w-24 gap-1">
 								{taskId && (
 									<>
-										<a
-											href={`${config.oldBaseUrl}/v1/logs/${taskId}`}
-											target="_blank"
-											rel="noreferrer"
-											className="relative inline-flex items-center justify-start px-2 w-fit transition-all appearance-none select-none whitespace-nowrap text-primary bg-primary-wash rounded-md gap-1 h-[1.625rem] border-2 border-transparent hover:border-[#94b0ff] text-xs"
-										>
-											<Icon name="BoxArrowRight" />
-											<span>Logs</span>
-										</a>
+										<JsonLogContainer taskId={taskId} enablePolling />
 										<a
 											href={`${config.oldBaseUrl}/flower/task/${taskId}`}
 											target="_blank"