From 68f24d9f0d994539b1da38a77148236e0d02f876 Mon Sep 17 00:00:00 2001
From: Jennifer Player <chainchompa@gmail.com>
Date: Wed, 21 Feb 2024 18:11:38 -0500
Subject: [PATCH] added status to import queue model

---
 .../subpanels/ImportQueueModel.tsx            | 56 +++++++++++++------
 1 file changed, 38 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportQueueModel.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportQueueModel.tsx
index 8704e847c6..6ae986b833 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportQueueModel.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportQueueModel.tsx
@@ -1,9 +1,4 @@
-import {
-  Flex,
-  IconButton,
-  Progress,
-  Text,
-} from '@invoke-ai/ui-library';
+import { Box, Flex, IconButton, Progress, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
@@ -50,12 +45,31 @@ export const ImportQueueModel = (props: ModelListItemProps) => {
       });
   }, [deleteImportModel, model, dispatch]);
 
+  const formatBytes = (bytes: number) => {
+    const units = ['b', 'kb', 'mb', 'gb', 'tb'];
+
+    let i = 0;
+
+    for (i; bytes >= 1024 && i < 4; i++) {
+      bytes /= 1024;
+    }
+
+    return `${bytes.toFixed(2)} ${units[i]}`;
+  };
+
   const progressValue = useMemo(() => {
     return (model.bytes / model.total_bytes) * 100;
   }, [model.bytes, model.total_bytes]);
 
+  const progressString = useMemo(() => {
+    if (model.status !== 'downloading') {
+      return '--';
+    }
+    return `${formatBytes(model.bytes)} / ${formatBytes(model.total_bytes)}`;
+  }, [model.bytes, model.total_bytes, model.status]);
+
   return (
-    <Flex gap="3" w="full" alignItems="center" textAlign="center">
+    <Flex gap="2" w="full" alignItems="center" textAlign="center">
       <Text w="20%" whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
         {model.source.repo_id}
       </Text>
@@ -66,17 +80,23 @@ export const ImportQueueModel = (props: ModelListItemProps) => {
         h={2}
         w="50%"
       />
-      <Text w="20%">{model.status}</Text>
-      {(model.status === 'downloading' || model.status === 'waiting') && (
-        <IconButton
-          isRound={true}
-          size="xs"
-          tooltip={t('modelManager.cancel')}
-          aria-label={t('modelManager.cancel')}
-          icon={<PiXBold />}
-          onClick={handleDeleteModelImport}
-        />
-      )}
+      <Text minW="20%" fontSize="xs" w="20%">
+        {progressString}
+      </Text>
+      <Text w="15%">{model.status[0].toUpperCase() +
+        model.status.slice(1)}</Text>
+      <Box w="10%">
+        {(model.status === 'downloading' || model.status === 'waiting') && (
+          <IconButton
+            isRound={true}
+            size="xs"
+            tooltip={t('modelManager.cancel')}
+            aria-label={t('modelManager.cancel')}
+            icon={<PiXBold />}
+            onClick={handleDeleteModelImport}
+          />
+        )}
+      </Box>
     </Flex>
   );
 };