Merge pull request #15643 from cajieh/volume-attributes-class-implementation

CONSOLE-4814: Add UI for creating VACs and also applying VACs to PVCs

Author: openshift-merge-bot[bot]

frontend/packages/console-app/console-extensions.json

@@ -424,6 +424,20 @@
       "provider": { "$codeRef": "volumeSnapshotProvider.useVolumeSnapshotActionsProvider" }
     }
   },
+  {
+    "type": "console.action/resource-provider",
+    "properties": {
+      "model": {
+        "version": "v1",
+        "kind": "VolumeAttributesClass",
+        "group": "storage.k8s.io"
+      },
+      "provider": { "$codeRef": "volumeAttributesClassProvider.useVolumeAttributesClassActionsProvider" }
+    },
+    "flags": {
+      "required": ["VAC_PLATFORM_SUPPORT"]
+    }
+  },
   {
     "type": "console.action/resource-provider",
     "properties": {
@@ -1255,13 +1269,31 @@
       }
     }
   },
+  {
+    "type": "console.navigation/resource-cluster",
+    "properties": {
+      "perspective": "admin",
+      "section": "storage",
+      "id": "volumeattributesclasses",
+      "insertAfter": "storageclasses",
+      "name": "%console-app~VolumeAttributesClasses%",
+      "model": {
+        "group": "storage.k8s.io",
+        "version": "v1",
+        "kind": "VolumeAttributesClass"
+      }
+    },
+    "flags": { 
+      "required": ["VAC_PLATFORM_SUPPORT"] 
+    }
+  },
   {
     "type": "console.navigation/resource-ns",
     "properties": {
       "perspective": "admin",
       "section": "storage",
       "id": "volumesnapshots",
-      "insertAfter": "storageclasses",
+      "insertAfter": "volumeattributesclasses",
       "name": "%console-app~VolumeSnapshots%",
       "model": {
         "group": "snapshot.storage.k8s.io",
@@ -2406,6 +2438,12 @@
       "handler": { "$codeRef": "getConsoleOperatorConfigFlag" }
     }
   },
+  {
+    "type": "console.flag/hookProvider",
+    "properties": {
+      "handler": { "$codeRef": "vacPlatformSupport.useVACPlatformSupportProvider" }
+    }
+  },
   {
     "type": "console.action/resource-provider",
     "properties": {

frontend/packages/console-app/locales/en/console-app.json

@@ -67,6 +67,7 @@
   "PersistentVolumes": "PersistentVolumes",
   "PersistentVolumeClaims": "PersistentVolumeClaims",
   "StorageClasses": "StorageClasses",
+  "VolumeAttributesClasses": "VolumeAttributesClasses",
   "VolumeSnapshotClasses": "VolumeSnapshotClasses",
   "BuildConfigs": "BuildConfigs",
   "ImageStreams": "ImageStreams",
@@ -227,6 +228,8 @@
   "Create snapshot": "Create snapshot",
   "PVC is not Bound": "PVC is not Bound",
   "Clone PVC": "Clone PVC",
+  "Modify VolumeAttributesClass": "Modify VolumeAttributesClass",
+  "PVC must be Bound to modify VolumeAttributesClass": "PVC must be Bound to modify VolumeAttributesClass",
   "Rollback": "Rollback",
   "Cancel rollout": "Cancel rollout",
   "Are you sure you want to cancel this rollout?": "Are you sure you want to cancel this rollout?",

frontend/packages/console-app/package.json

@@ -47,6 +47,8 @@
       "prometheusProvider": "src/actions/providers/prometheus-provider.ts",
       "groupProvider": "src/actions/providers/group-provider.ts",
       "volumeSnapshotProvider": "src/actions/providers/volume-snaphot-provider.ts",
+      "volumeAttributesClassProvider": "src/actions/providers/volumeattributesclass-provider.ts",
+      "vacPlatformSupport": "src/features/vac-platform-support.ts",
       "podProvider": "src/actions/providers/pod-provider.ts",
       "podDisruptionBudgetProvider": "src/actions/providers/pdb-provider.ts",
       "perspectiveStateProvider": "src/actions/providers/perspective-state-provider.ts",

frontend/packages/console-app/src/actions/hooks/types.ts

@@ -30,6 +30,7 @@ export enum PVCActionCreator {
   PVCSnapshot = 'PVCSnapshot',
   ClonePVC = 'ClonePVC',
   DeletePVC = 'DeletePVC',
+  ModifyVAC = 'ModifyVAC',
 }
 
 export enum VolumeSnapshotActionCreator {

frontend/packages/console-app/src/actions/hooks/usePVCActions.ts

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ModifyVACModal } from '@console/app/src/components/modals/modify-vac-modal';
 import { Action } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
 import { clonePVCModal, expandPVCModal } from '@console/internal/components/modals';
 import deletePVCModal from '@console/internal/components/modals/delete-pvc-modal';
@@ -34,6 +36,7 @@ export const usePVCActions = (
   filterActions?: PVCActionCreator[],
 ): Action[] => {
   const { t } = useTranslation();
+  const launchModal = useOverlay();
 
   const memoizedFilterActions = useDeepCompareMemoize(filterActions);
 
@@ -71,6 +74,17 @@ export const usePVCActions = (
           }),
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'create'),
       }),
+      [PVCActionCreator.ModifyVAC]: () => ({
+        id: 'modify-vac',
+        label: t('console-app~Modify VolumeAttributesClass'),
+        disabled: obj?.status?.phase !== 'Bound',
+        tooltip:
+          obj?.status?.phase !== 'Bound'
+            ? t('console-app~PVC must be Bound to modify VolumeAttributesClass')
+            : '',
+        cta: () => launchModal(ModifyVACModal, { resource: obj }),
+        accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'patch'),
+      }),
       [PVCActionCreator.DeletePVC]: () => ({
         id: 'delete-pvc',
         label: t('public~Delete PersistentVolumeClaim'),
@@ -81,15 +95,21 @@ export const usePVCActions = (
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'delete'),
       }),
     }),
-    [t, obj],
+    [t, obj, launchModal],
   );
 
   // filter and initialize requested actions or construct list of all PVCActions
   const actions = useMemo<Action[]>(() => {
     if (memoizedFilterActions) {
       return memoizedFilterActions.map((creator) => factory[creator]());
     }
-    return [factory.ExpandPVC(), factory.PVCSnapshot(), factory.ClonePVC(), factory.DeletePVC()];
+    return [
+      factory.ExpandPVC(),
+      factory.PVCSnapshot(),
+      factory.ClonePVC(),
+      factory.ModifyVAC(),
+      factory.DeletePVC(),
+    ];
   }, [factory, memoizedFilterActions]);
   return actions;
 };

frontend/packages/console-app/src/actions/providers/persistent-volume-claim-provider.ts

@@ -2,6 +2,8 @@ import { useMemo } from 'react';
 import { usePVCActions } from '@console/app/src/actions/hooks/usePVCActions';
 import { Action } from '@console/dynamic-plugin-sdk';
 import { referenceFor, PersistentVolumeClaimKind } from '@console/internal/module/k8s';
+import { FLAGS } from '@console/shared/src/constants/common';
+import { useFlag } from '@console/shared/src/hooks/flag';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
 import { CommonActionCreator, PVCActionCreator } from '../hooks/types';
 import { useCommonActions } from '../hooks/useCommonActions';
@@ -10,11 +12,20 @@ export const usePVCActionsProvider = (
   resource: PersistentVolumeClaimKind,
 ): [Action[], boolean, boolean] => {
   const [kindObj, inFlight] = useK8sModel(referenceFor(resource));
-  const pvcActions = usePVCActions(resource, [
-    PVCActionCreator.ExpandPVC,
-    PVCActionCreator.PVCSnapshot,
-    PVCActionCreator.ClonePVC,
-  ]);
+  const isVACSupported = useFlag(FLAGS.VAC_PLATFORM_SUPPORT);
+
+  const pvcActionsList = useMemo(() => {
+    const baseActions = [
+      PVCActionCreator.ExpandPVC,
+      PVCActionCreator.PVCSnapshot,
+      PVCActionCreator.ClonePVC,
+    ];
+
+    // Conditionally check platform support for VAC
+    return isVACSupported ? [...baseActions, PVCActionCreator.ModifyVAC] : baseActions;
+  }, [isVACSupported]);
+
+  const pvcActions = usePVCActions(resource, pvcActionsList);
   const pvcDeleteAction = usePVCActions(resource, [PVCActionCreator.DeletePVC]);
   const [commonActions] = useCommonActions(kindObj, resource, [
     CommonActionCreator.ModifyLabels,

frontend/packages/console-app/src/actions/providers/volumeattributesclass-provider.ts

@@ -0,0 +1,13 @@
+import { Action } from '@console/dynamic-plugin-sdk';
+import { K8sResourceCommon, referenceFor } from '@console/internal/module/k8s';
+import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
+import { useCommonResourceActions } from '../hooks/useCommonResourceActions';
+
+export const useVolumeAttributesClassActionsProvider = (
+  volumeAttributesClass: K8sResourceCommon,
+): [Action[], boolean] => {
+  const [volumeAttributesClassModel, inFlight] = useK8sModel(referenceFor(volumeAttributesClass));
+  const commonActions = useCommonResourceActions(volumeAttributesClassModel, volumeAttributesClass);
+
+  return [commonActions, !inFlight];
+};

frontend/packages/console-app/src/components/modals/modify-vac-modal.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Form, FormGroup } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
+import {
+  ModalBody,
+  ModalSubmitFooter,
+  ModalTitle,
+  ModalWrapper,
+} from '@console/internal/components/factory/modal';
+import { VolumeAttributesClassDropdown } from '@console/internal/components/utils/volume-attributes-class-dropdown';
+import { PersistentVolumeClaimModel } from '@console/internal/models';
+import { PersistentVolumeClaimKind } from '@console/internal/module/k8s';
+import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+
+const ModifyVACModalComponent: React.FCC<ModifyVACModalComponentProps> = ({
+  resource,
+  close,
+  cancel,
+}) => {
+  const { t } = useTranslation();
+  const [volumeAttributesClass, setVolumeAttributesClass] = useState(
+    resource?.spec?.volumeAttributesClassName || '',
+  );
+  const [handlePromise, inProgress, errorMessage] = usePromiseHandler();
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+
+    const hasExistingVAC = !!resource?.spec?.volumeAttributesClassName;
+
+    const patch = [
+      {
+        op: hasExistingVAC ? 'replace' : 'add',
+        path: '/spec/volumeAttributesClassName',
+        value: volumeAttributesClass,
+      },
+    ];
+
+    handlePromise(
+      k8sPatchResource({
+        model: PersistentVolumeClaimModel,
+        resource,
+        data: patch,
+      }),
+    )
+      .then(() => close())
+      .catch(() => {});
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <ModalTitle>{t('console-app~Modify VolumeAttributesClass')}</ModalTitle>
+      <ModalBody>
+        <FormGroup fieldId="vac-dropdown">
+          <VolumeAttributesClassDropdown
+            onChange={setVolumeAttributesClass}
+            selectedKey={volumeAttributesClass}
+            id="vac-dropdown"
+            dataTest="modify-vac-dropdown"
+            required
+            noSelection
+          />
+        </FormGroup>
+      </ModalBody>
+      <ModalSubmitFooter
+        submitText={t('console-app~Save')}
+        submitDisabled={!volumeAttributesClass}
+        cancel={cancel}
+        inProgress={inProgress}
+        errorMessage={errorMessage}
+      />
+    </Form>
+  );
+};
+
+export const ModifyVACModal: React.FC<ModifyVACModalProps> = ({ closeOverlay, resource }) => {
+  return (
+    <ModalWrapper blocking onClose={closeOverlay}>
+      <ModifyVACModalComponent close={closeOverlay} cancel={closeOverlay} resource={resource} />
+    </ModalWrapper>
+  );
+};
+
+export type ModifyVACModalProps = {
+  resource: PersistentVolumeClaimKind;
+  closeOverlay: () => void;
+};
+
+type ModifyVACModalComponentProps = {
+  resource: PersistentVolumeClaimKind;
+  close: () => void;
+  cancel: () => void;
+};

frontend/packages/console-app/src/features/vac-platform-support.ts

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { SetFeatureFlag } from '@console/dynamic-plugin-sdk';
+import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
+import { InfrastructureModel } from '@console/internal/models';
+import { K8sResourceKind } from '@console/internal/module/k8s';
+import { FLAGS } from '@console/shared/src/constants/common';
+import { getInfrastructurePlatform } from '@console/shared/src/selectors/infrastructure';
+
+/**
+ * Platforms that support VolumeAttributesClass (VAC) modifications on a PVC.
+ * VAC is only supported on AWS and GCP platforms.
+ */
+const VAC_SUPPORTED_PLATFORMS = ['AWS', 'GCP'] as const;
+
+/**
+ * Hook provider for VolumeAttributesClass platform support detection.
+ * VAC is only supported on AWS and GCP platforms.
+ */
+export const useVACPlatformSupportProvider = (setFeatureFlag: SetFeatureFlag) => {
+  const [infrastructure, loaded, error] = useK8sGet<K8sResourceKind>(
+    InfrastructureModel,
+    'cluster',
+  );
+
+  useEffect(() => {
+    if (loaded && !error) {
+      const platform = getInfrastructurePlatform(infrastructure);
+      const isSupported = VAC_SUPPORTED_PLATFORMS.includes(
+        platform as typeof VAC_SUPPORTED_PLATFORMS[number],
+      );
+
+      setFeatureFlag(FLAGS.VAC_PLATFORM_SUPPORT, isSupported);
+    } else if (error) {
+      // eslint-disable-next-line no-console
+      console.warn('Failed to detect platform for VAC support:', error);
+      setFeatureFlag(FLAGS.VAC_PLATFORM_SUPPORT, false);
+    }
+  }, [error, infrastructure, loaded, setFeatureFlag]);
+};

frontend/packages/console-shared/src/constants/common.ts

@@ -94,6 +94,7 @@ export enum FLAGS {
   CONSOLE_CAPABILITY_GETTINGSTARTEDBANNER_IS_ENABLED = 'CONSOLE_CAPABILITY_GETTINGSTARTEDBANNER_IS_ENABLED',
   LIGHTSPEED_IS_AVAILABLE_TO_INSTALL = 'LIGHTSPEED_IS_AVAILABLE_TO_INSTALL',
   DEVCONSOLE_PROXY = 'DEVCONSOLE_PROXY',
+  VAC_PLATFORM_SUPPORT = 'VAC_PLATFORM_SUPPORT',
 }
 
 export const CONFIG_STORAGE_CONSOLE = 'console';