feat: move status to status column with additional info

kyma-project · Sep 2, 2024 · 25ca87a · 25ca87a
1 parent cf5909e
commit 25ca87a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/public/i18n/en.yaml b/public/i18n/en.yaml
@@ -1108,6 +1108,7 @@ nodes:
 persistent-volume-claims:
   description: <0>PersistentVolumeClaim (PVC)</0> is a request for the PersistentVolume resources.
   headers:
+    capacity: Capacity
     access-modes: Access Mode
     selector: Selector
     storage: Storage

diff --git a/src/resources/PersistentVolumeClaims/PersistentVolumeClaimDetails.js b/src/resources/PersistentVolumeClaims/PersistentVolumeClaimDetails.js
@@ -18,6 +18,7 @@ import PersistentVolumeClaimCreate from './PersistentVolumeClaimCreate';
 import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 import { ResourceDescription } from 'resources/PersistentVolumeClaims';
 import { Link } from 'shared/components/Link/Link';
+import { spacing } from '@ui5/webcomponents-react-base';
 
 import './PersistentVolumeClaim.scss';
 
@@ -167,13 +168,10 @@ export const PVCConfiguration = pvc => {
 
 export function PersistentVolumeClaimDetails(props) {
   const { t } = useTranslation();
-  const customColumns = [
+  const customStatusColumns = [
     {
-      header: t('common.headers.status'),
-      value: ({ status }) =>
-        <PersistentVolumeClaimStatus phase={status.phase} /> || {
-          EMPTY_TEXT_PLACEHOLDER,
-        },
+      header: t('persistent-volume-claims.headers.access-modes'),
+      value: pvc => <Tokens tokens={pvc?.status?.accessModes} />,
     },
   ];
 
@@ -204,13 +202,46 @@ export function PersistentVolumeClaimDetails(props) {
 
   return (
     <ResourceDetails
+      statusBadge={pvc =>
+        <PersistentVolumeClaimStatus phase={pvc?.status.phase} /> || {
+          EMPTY_TEXT_PLACEHOLDER,
+        }
+      }
+      customStatusColumns={customStatusColumns}
+      customConditionsComponents={[
+        {
+          header: t('persistent-volume-claims.headers.capacity'),
+          value: pvc =>
+            pvc.status.capacity ? (
+              Object.entries(pvc?.status?.capacity).map(capacity => {
+                console.log(capacity);
+                return (
+                  <LayoutPanelRow
+                    name={capacity[0]}
+                    value={capacity[1] || EMPTY_TEXT_PLACEHOLDER}
+                    key={capacity[0]}
+                  />
+                );
+              })
+            ) : (
+              <div
+                className="content bsl-has-color-text-1"
+                style={{
+                  ...spacing.sapUiSmallMarginBegin,
+                  ...spacing.sapUiSmallMarginBottom,
+                }}
+              >
+                {EMPTY_TEXT_PLACEHOLDER}
+              </div>
+            ),
+        },
+      ]}
       customComponents={[
         PVCConfiguration,
         PVCPods,
         PVCSelectorSpecification,
         Events,
       ]}
-      customColumns={customColumns}
       description={ResourceDescription}
       singularName={t('persistent-volume-claims.name_singular')}
       createResourceForm={PersistentVolumeClaimCreate}