Improve VAC field on PVC details page

Author: cajieh

frontend/public/components/persistent-volume-claim.tsx

@@ -4,6 +4,8 @@ import i18next, { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import {
+  Alert,
+  AlertActionCloseButton,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -55,6 +57,7 @@ import { SectionHeading } from './utils/headings';
 import { ResourceLink } from './utils/resource-link';
 import { ResourceSummary } from './utils/details-page';
 import { Selector } from './utils/selector';
+import { truncateMiddle } from './utils/truncate-middle';
 import { humanizeBinaryBytes, convertToBaseValue } from './utils/units';
 import { ResourceEventStream } from './events';
 import { PVCMetrics, setPVCMetrics } from '@console/internal/actions/ui';
@@ -76,6 +79,36 @@ const tableColumnInfo = [
   { id: '' },
 ];
 
+/**
+ * Determines the VAC (VolumeAttributesClass) modification state for a PVC
+ * @param pvc - The PersistentVolumeClaim resource
+ * @returns Object containing error condition, pending state, requested and current VAC
+ */
+const getVACModificationState = (pvc: PersistentVolumeClaimKind) => {
+  const volumeAttributesClassName = pvc?.spec?.volumeAttributesClassName;
+  const currentVolumeAttributesClassName = pvc?.status?.currentVolumeAttributesClassName;
+  const conditions = pvc?.status?.conditions;
+
+  // Check for explicit ModifyVolumeError condition
+  const errorCondition = conditions?.find(
+    (condition) => condition.type === 'ModifyVolumeError' && condition.status === 'True',
+  );
+
+  // Determine if modification is pending
+  const isPending =
+    !errorCondition &&
+    ((volumeAttributesClassName &&
+      volumeAttributesClassName !== currentVolumeAttributesClassName) ||
+      (!volumeAttributesClassName && currentVolumeAttributesClassName));
+
+  return {
+    errorCondition,
+    isPending,
+    requested: volumeAttributesClassName,
+    current: currentVolumeAttributesClassName,
+  };
+};
+
 export const PVCStatusComponent: React.FCC<PVCStatusProps> = ({ pvc }) => {
   const { t } = useTranslation();
   const [pvcStatusExtensions, resolved] = useResolvedExtensions<PVCStatus>(isPVCStatus);
@@ -249,6 +282,17 @@ const PVCDetails: React.FCC<PVCDetailsProps> = ({ obj: pvc }) => {
   const volumeMode = pvc?.spec?.volumeMode;
   const conditions = pvc?.status?.conditions;
 
+  // State to track dismissed alerts
+  const [isErrorAlertDismissed, setIsErrorAlertDismissed] = React.useState(false);
+  const [isInfoAlertDismissed, setIsInfoAlertDismissed] = React.useState(false);
+
+  // Reset alert dismiss states when PVC changes
+  const pvcUid = pvc?.metadata?.uid;
+  React.useEffect(() => {
+    setIsErrorAlertDismissed(false);
+    setIsInfoAlertDismissed(false);
+  }, [pvcUid]);
+
   const query =
     name && namespace
       ? `kubelet_volume_stats_used_bytes{persistentvolumeclaim='${name}',namespace='${namespace}'}`
@@ -288,10 +332,61 @@ const PVCDetails: React.FCC<PVCDetailsProps> = ({ obj: pvc }) => {
     ({ properties: { alert: AlertComponent }, uid }) => <AlertComponent key={uid} pvc={pvc} />,
   );
 
+  // Get VAC modification state using helper function
+  const vacState = getVACModificationState(pvc);
+  const {
+    errorCondition: vacModifyFailedCondition,
+    isPending: isVACModificationPending,
+  } = vacState;
+
   return (
     <>
       <PaneBody>
         {alertComponents}
+        {isVACSupported && vacModifyFailedCondition && !isErrorAlertDismissed && (
+          <Alert
+            isInline
+            variant="danger"
+            title={t('public~VolumeAttributesClass modification failed')}
+            className="co-alert co-alert--margin-bottom-sm"
+            actionClose={<AlertActionCloseButton onClose={() => setIsErrorAlertDismissed(true)} />}
+          >
+            {truncateMiddle(
+              vacModifyFailedCondition.message ||
+                t('public~Failed to modify VolumeAttributesClass for this PersistentVolumeClaim.'),
+              { length: 200, truncateEnd: true },
+            )}
+          </Alert>
+        )}
+        {isVACSupported && isVACModificationPending && !isInfoAlertDismissed && (
+          <Alert
+            isInline
+            variant="info"
+            title={
+              volumeAttributesClassName && !currentVolumeAttributesClassName
+                ? t('public~VolumeAttributesClass application pending')
+                : t('public~VolumeAttributesClass modification in progress')
+            }
+            className="co-alert co-alert--margin-bottom-sm"
+            actionClose={<AlertActionCloseButton onClose={() => setIsInfoAlertDismissed(true)} />}
+          >
+            {volumeAttributesClassName
+              ? !currentVolumeAttributesClassName
+                ? t('public~VolumeAttributesClass "{{target}}" is pending application.', {
+                    target: volumeAttributesClassName,
+                  })
+                : t(
+                    'public~VolumeAttributesClass is being modified from "{{current}}" to "{{target}}".',
+                    {
+                      current: currentVolumeAttributesClassName,
+                      target: volumeAttributesClassName,
+                    },
+                  )
+              : t('public~VolumeAttributesClass "{{current}}" is being removed.', {
+                  current: currentVolumeAttributesClassName,
+                })}
+          </Alert>
+        )}
         <SectionHeading text={t('public~PersistentVolumeClaim details')} />
         {totalCapacityMetric && !loading && (
           <div className="co-pvc-donut">
@@ -383,19 +478,34 @@ const PVCDetails: React.FCC<PVCDetailsProps> = ({ obj: pvc }) => {
                   )}
                 </DescriptionListDescription>
               </DescriptionListGroup>
-              {isVACSupported &&
-                !!volumeAttributesClassName &&
-                volumeAttributesClassName === currentVolumeAttributesClassName && (
-                  <DescriptionListGroup>
-                    <DescriptionListTerm>{t('public~VolumeAttributesClass')}</DescriptionListTerm>
-                    <DescriptionListDescription>
+              {isVACSupported && (
+                <DescriptionListGroup>
+                  <DescriptionListTerm>
+                    {t('public~Requested VolumeAttributesClass')}
+                  </DescriptionListTerm>
+                  <DescriptionListDescription data-test-id="pvc-requested-vac">
+                    {volumeAttributesClassName ? (
                       <ResourceLink
                         kind={referenceFor(VolumeAttributesClassModel)}
                         name={volumeAttributesClassName}
                       />
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                )}
+                    ) : (
+                      DASH
+                    )}
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              )}
+              {isVACSupported && currentVolumeAttributesClassName && (
+                <DescriptionListGroup>
+                  <DescriptionListTerm>{t('public~VolumeAttributesClass')}</DescriptionListTerm>
+                  <DescriptionListDescription data-test-id="pvc-current-vac">
+                    <ResourceLink
+                      kind={referenceFor(VolumeAttributesClassModel)}
+                      name={currentVolumeAttributesClassName}
+                    />
+                  </DescriptionListDescription>
+                </DescriptionListGroup>
+              )}
               {volumeName && canListPV && (
                 <DescriptionListGroup>
                   <DescriptionListTerm>{t('public~PersistentVolumes')}</DescriptionListTerm>