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,30 @@ const tableColumnInfo = [
   { id: '' },
 ];
 
+/**
+ * Determines the VAC (VolumeAttributesClass) modification state for a PVC
+ * @param pvc - The PersistentVolumeClaim resource
+ * @returns Object containing error condition and pending state
+ */
+const getVACAlertState = (pvc: PersistentVolumeClaimKind) => {
+  const volumeAttributesClassName = pvc?.spec?.volumeAttributesClassName;
+  const currentVolumeAttributesClassName = pvc?.status?.currentVolumeAttributesClassName;
+  const conditions = pvc?.status?.conditions;
+
+  // Check for explicit ModifyVolumeError condition
+  const vacErrorCondition = conditions?.find(
+    (condition) => condition.type === 'ModifyVolumeError' && condition.status === 'True',
+  );
+
+  // Determine if modification is pending (only when applying or modifying VAC, not removing)
+  const isVacPending =
+    !vacErrorCondition &&
+    volumeAttributesClassName &&
+    volumeAttributesClassName !== currentVolumeAttributesClassName;
+
+  return { vacErrorCondition, isVacPending };
+};
+
 export const PVCStatusComponent: React.FCC<PVCStatusProps> = ({ pvc }) => {
   const { t } = useTranslation();
   const [pvcStatusExtensions, resolved] = useResolvedExtensions<PVCStatus>(isPVCStatus);
@@ -249,6 +276,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 +326,53 @@ const PVCDetails: React.FCC<PVCDetailsProps> = ({ obj: pvc }) => {
     ({ properties: { alert: AlertComponent }, uid }) => <AlertComponent key={uid} pvc={pvc} />,
   );
 
+  // Get VAC modification state using helper function
+  const { vacErrorCondition, isVacPending } = getVACAlertState(pvc);
+
   return (
     <>
       <PaneBody>
         {alertComponents}
+        {isVACSupported && vacErrorCondition && !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(
+              vacErrorCondition.message ||
+                t('public~Failed to modify VolumeAttributesClass for this PersistentVolumeClaim.'),
+              { length: 200, truncateEnd: true },
+            )}
+          </Alert>
+        )}
+        {isVACSupported && isVacPending && !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)} />}
+          >
+            {!currentVolumeAttributesClassName
+              ? t('public~VolumeAttributesClass "{{target}}" is pending application.', {
+                  target: volumeAttributesClassName,
+                })
+              : t(
+                  'public~VolumeAttributesClass is being modified from "{{current}}" to "{{target}}".',
+                  {
+                    current: currentVolumeAttributesClassName,
+                    target: volumeAttributesClassName,
+                  },
+                )}
+          </Alert>
+        )}
         <SectionHeading text={t('public~PersistentVolumeClaim details')} />
         {totalCapacityMetric && !loading && (
           <div className="co-pvc-donut">
@@ -383,19 +464,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>

frontend/public/locales/en/public.json

@@ -1128,6 +1128,12 @@
   "Used": "Used",
   "StorageClass": "StorageClass",
   "Total": "Total",
+  "VolumeAttributesClass modification failed": "VolumeAttributesClass modification failed",
+  "Failed to modify VolumeAttributesClass for this PersistentVolumeClaim.": "Failed to modify VolumeAttributesClass for this PersistentVolumeClaim.",
+  "VolumeAttributesClass application pending": "VolumeAttributesClass application pending",
+  "VolumeAttributesClass modification in progress": "VolumeAttributesClass modification in progress",
+  "VolumeAttributesClass \"{{target}}\" is pending application.": "VolumeAttributesClass \"{{target}}\" is pending application.",
+  "VolumeAttributesClass is being modified from \"{{current}}\" to \"{{target}}\".": "VolumeAttributesClass is being modified from \"{{current}}\" to \"{{target}}\".",
   "PersistentVolumeClaim details": "PersistentVolumeClaim details",
   "Available versus used capacity": "Available versus used capacity",
   "Total capacity": "Total capacity",
@@ -1136,6 +1142,7 @@
   "Access modes": "Access modes",
   "Volume mode": "Volume mode",
   "StorageClasses": "StorageClasses",
+  "Requested VolumeAttributesClass": "Requested VolumeAttributesClass",
   "VolumeAttributesClass": "VolumeAttributesClass",
   "PersistentVolumes": "PersistentVolumes",
   "Bound": "Bound",