Add UI for volumes #1683

dstackai · Oct 7, 2024 · d21339b · d21339b
1 parent a2a3128
commit d21339b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -451,6 +451,7 @@
     "empty_message_text": "No volumes to display.",
     "nomatch_message_title": "No matches",
     "nomatch_message_text": "We can't find a match.",
+    "active_only": "Active volumes",
 
     "name": "Name",
     "project": "Project name",
@@ -464,7 +465,8 @@
       "failed": "Failed",
       "submitted": "Submitted",
       "provisioning": "Provisioning",
-      "active":  "Active"
+      "active":  "Active",
+      "deleted":  "Deleted"
     }
   },
 

diff --git a/frontend/src/pages/Volumes/AdministrationList/hooks.tsx b/frontend/src/pages/Volumes/AdministrationList/hooks.tsx
@@ -35,9 +35,14 @@ export const useColumnsDefinitions = () => {
         {
             id: 'status',
             header: t('volume.status'),
-            cell: (item: IVolume) => (
-                <StatusIndicator type={getStatusIconType(item.status)}>{t(`volume.statuses.${item.status}`)}</StatusIndicator>
-            ),
+            cell: (item: IVolume) =>
+                item.deleted ? (
+                    <StatusIndicator type="error">{t(`volume.statuses.deleted`)}</StatusIndicator>
+                ) : (
+                    <StatusIndicator type={getStatusIconType(item.status)}>
+                        {t(`volume.statuses.${item.status}`)}
+                    </StatusIndicator>
+                ),
         },
         {
             id: 'created_at',

diff --git a/frontend/src/pages/Volumes/AdministrationList/index.tsx b/frontend/src/pages/Volumes/AdministrationList/index.tsx
@@ -70,7 +70,7 @@ export const AdministrationVolumeList: React.FC = () => {
 
                     <div className={styles.activeOnly}>
                         <Toggle onChange={({ detail }) => setOnlyActive(detail.checked)} checked={onlyActive}>
-                            {t('fleets.active_only')}
+                            {t('volume.active_only')}
                         </Toggle>
                     </div>
 

diff --git a/frontend/src/pages/Volumes/List/hooks.tsx b/frontend/src/pages/Volumes/List/hooks.tsx
@@ -52,9 +52,14 @@ export const useColumnsDefinitions = () => {
         {
             id: 'status',
             header: t('volume.status'),
-            cell: (item: IVolume) => (
-                <StatusIndicator type={getStatusIconType(item.status)}>{t(`volume.statuses.${item.status}`)}</StatusIndicator>
-            ),
+            cell: (item: IVolume) =>
+                item.deleted ? (
+                    <StatusIndicator type="error">{t(`volume.statuses.deleted`)}</StatusIndicator>
+                ) : (
+                    <StatusIndicator type={getStatusIconType(item.status)}>
+                        {t(`volume.statuses.${item.status}`)}
+                    </StatusIndicator>
+                ),
         },
         {
             id: 'created_at',

diff --git a/frontend/src/pages/Volumes/List/index.tsx b/frontend/src/pages/Volumes/List/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Header, Pagination, SpaceBetween, Table, Toggle } from 'components';
+import { Button, Header, Pagination, Table, Toggle } from 'components';
 import { useProjectDropdown } from 'layouts/AppLayout/hooks';
 
 import { useCollection } from 'hooks';
@@ -47,7 +47,7 @@ export const VolumeList: React.FC = () => {
                 <div className={styles.filters}>
                     <div className={styles.activeOnly}>
                         <Toggle onChange={({ detail }) => setOnlyActive(detail.checked)} checked={onlyActive}>
-                            {t('fleets.active_only')}
+                            {t('volume.active_only')}
                         </Toggle>
                     </div>