Merge pull request #11 from vertex-center/feature/download-logs

Better download logs display
vertex-center · Oct 2, 2023 · 15ef652 · 15ef652
2 parents caf2da9 + a304c6f
commit 15ef652
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 8 deletions.
diff --git a/src/apps/Instances/Details/InstanceLogs/InstanceLogs.tsx b/src/apps/Instances/Details/InstanceLogs/InstanceLogs.tsx
@@ -36,6 +36,8 @@ export default function InstanceLogs() {
         const sse = registerSSE(`/instance/${uuid}/events`);
 
         const onStdout = (e) => {
+            console.error(e.data);
+
             setLogs((logs) => [
                 ...logs,
                 {
@@ -55,12 +57,54 @@ export default function InstanceLogs() {
             ]);
         };
 
+        const onDownload = (e) => {
+            setLogs((logs) => {
+                const dl = JSON.parse(e.data);
+
+                let downloads = [];
+                if (
+                    logs.length > 0 &&
+                    logs[logs.length - 1].kind === "downloads"
+                ) {
+                    downloads = logs[logs.length - 1].message;
+                }
+
+                const i = downloads.findIndex((d) => d.id === dl.id);
+
+                if (i === -1) {
+                    downloads = [...downloads, dl];
+                } else {
+                    downloads[i] = dl;
+                }
+
+                if (logs.length === 0) return logs;
+                if (logs[logs.length - 1].kind === "downloads") {
+                    const lgs = [...logs];
+                    lgs[logs.length - 1] = {
+                        kind: "downloads",
+                        message: downloads,
+                    };
+                    return lgs;
+                } else {
+                    return [
+                        ...logs,
+                        {
+                            kind: "downloads",
+                            message: downloads,
+                        },
+                    ];
+                }
+            });
+        };
+
         registerSSEEvent(sse, "stdout", onStdout);
         registerSSEEvent(sse, "stderr", onStderr);
+        registerSSEEvent(sse, "download", onDownload);
 
         return () => {
             unregisterSSEEvent(sse, "stdout", onStdout);
             unregisterSSEEvent(sse, "stderr", onStderr);
+            unregisterSSEEvent(sse, "download", onDownload);
 
             unregisterSSE(sse);
         };

diff --git a/src/components/Downloads/Downloads.module.sass b/src/components/Downloads/Downloads.module.sass
@@ -0,0 +1,32 @@
+@use "../../styles/colors"
+@use "../../styles/dimensions"
+@use "../../styles/fonts"
+
+.downloads
+    display: flex
+    flex-direction: column
+    margin: 0 10px
+    line-height: 1.7
+
+    &List
+        display: flex
+        flex-direction: column
+
+.download
+    display: flex
+    flex-direction: row
+    align-items: center
+    gap: 10px
+    padding: 2px 0
+
+    &ID
+        font-family: fonts.$font-family-code
+        color: colors.$fg-primary
+        opacity: 0.4
+
+    &Progress
+        flex-grow: 1
+
+    &Status
+        color: colors.$fg-secondary
+        font-size: 13px
diff --git a/src/components/Downloads/Downloads.tsx b/src/components/Downloads/Downloads.tsx
@@ -0,0 +1,45 @@
+import Progress from "../Progress";
+import styles from "./Downloads.module.sass";
+
+export type Download = {
+    id: string;
+    status: string;
+    current?: number;
+    total?: number;
+};
+
+export default function Downloads(props: { downloads?: Download[] }) {
+    const { downloads } = props;
+
+    console.log(downloads);
+    if (!downloads) return null;
+    if (downloads.length === 0) return null;
+
+    const status = downloads?.find((dl) => dl.id === "")?.status;
+
+    return (
+        <div className={styles.downloads}>
+            <div className={styles.downloadsList}>
+                {downloads.map((dl) => {
+                    if (dl.id === "") return null;
+                    return (
+                        <div key={dl.id} className={styles.download}>
+                            {dl.id && (
+                                <div className={styles.downloadID}>{dl.id}</div>
+                            )}
+                            {dl.status}
+                            {dl.current && dl.total && (
+                                <div className={styles.downloadProgress}>
+                                    <Progress
+                                        value={(dl.current / dl.total) * 100}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+            {status && <div className={styles.download}>{status}</div>}
+        </div>
+    );
+}
diff --git a/src/components/Logs/Logs.module.sass b/src/components/Logs/Logs.module.sass
@@ -16,8 +16,8 @@
 .line
     display: flex
     flex-direction: row
-    gap: 12px
-    padding: 2px 8px
+    gap: 10px
+    padding: 2px 10px
     border-radius: 4px
 
     &Error

diff --git a/src/components/Logs/Logs.tsx b/src/components/Logs/Logs.tsx
@@ -3,15 +3,20 @@ import { HTMLProps, useEffect, useRef, useState } from "react";
 import styles from "./Logs.module.sass";
 import classNames from "classnames";
 import useScrollPercentage from "react-scroll-percentage-hook";
+import Downloads from "../Downloads/Downloads";
 
 export type LogLine = {
-    kind: "out" | "err";
-    message: string;
+    kind: "out" | "err" | "downloads";
+    message: any;
 };
 
 function Line(props: LogLine) {
     const { kind, message } = props;
 
+    if (kind === "downloads") {
+        return <Downloads downloads={message} />;
+    }
+
     return (
         <div
             className={classNames({
@@ -49,9 +54,9 @@ export default function Logs(props: Props) {
 
     return (
         <div className={styles.logs} ref={ref}>
-            {lines.map((line, i) => (
-                <Line key={i} kind={line.kind} message={line.message} />
-            ))}
+            {lines.map((line, i) => {
+                return <Line key={i} kind={line.kind} message={line.message} />;
+            })}
             <div ref={scroll} />
         </div>
     );

diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
@@ -13,10 +13,11 @@ export function ProgressOverlay({ show }: { show?: boolean }) {
 type Props = {
     infinite?: boolean;
     small?: boolean;
+    value?: number;
 };
 
 export default function Progress(props: Props) {
-    const { infinite, small } = props;
+    const { infinite, small, value } = props;
 
     return (
         <div
@@ -31,6 +32,9 @@ export default function Progress(props: Props) {
                     [styles.barInfinite]: infinite,
                     [styles.barSmall]: small,
                 })}
+                style={{
+                    width: `${value}%`,
+                }}
             />
         </div>
     );