Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(import): add live logs with polling #10

Merged
merged 1 commit into from
Jan 17, 2024
Merged

feat(import): add live logs with polling #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 42 additions & 19 deletions libs/bublik/features/run-import/src/lib/import-events-table/import-log.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
/* SPDX-License-Identifier: Apache-2.0 */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add live 'import logs' with polling

/* 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,
Expand All @@ -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 () => {
Expand All @@ -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>
</>
Expand Down
42 changes: 24 additions & 18 deletions ...src/lib/import-run-form/__snapshots__/import-run-form-result-list.component.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
11 changes: 2 additions & 9 deletions ...lik/features/run-import/src/lib/import-run-form/import-run-form-result-list.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand All @@ -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"
Expand Down
Loading