added status to import queue model

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportQueueModel.tsx

@@ -1,9 +1,4 @@
-import {
+import { Box, Flex, IconButton, Progress, Text } from '@invoke-ai/ui-library';
-  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,7 +80,12 @@ export const ImportQueueModel = (props: ModelListItemProps) => {
         h={2}
         w="50%"
       />
-      <Text w="20%">{model.status}</Text>
+      <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}
@@ -77,6 +96,7 @@ export const ImportQueueModel = (props: ModelListItemProps) => {
             onClick={handleDeleteModelImport}
           />
         )}
+      </Box>
     </Flex>
   );
 };