From d21339b9b9da9afc7e4a044cca4e34455306c983 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Mon, 7 Oct 2024 14:11:05 +0300
Subject: [PATCH] Add UI for volumes #1683

---
 frontend/src/locale/en.json                           |  4 +++-
 .../src/pages/Volumes/AdministrationList/hooks.tsx    | 11 ++++++++---
 .../src/pages/Volumes/AdministrationList/index.tsx    |  2 +-
 frontend/src/pages/Volumes/List/hooks.tsx             | 11 ++++++++---
 frontend/src/pages/Volumes/List/index.tsx             |  4 ++--
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index a8bc9b9dc..b6794cfbc 100644
--- 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
index e8fa4628f..7bf066f36 100644
--- 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
index 9bb132d2a..ca74e130a 100644
--- 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
index b90601ec0..9832be145 100644
--- 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
index 52cb3890c..6a2d98159 100644
--- 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>