From e3a995d51560d010614609fd7a404073c20fb511 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Thu, 30 Nov 2023 09:48:55 +1300
Subject: [PATCH] fix(pvc): show access modes [EE-5581] (#10554)

Co-authored-by: testa113 <testa113>
---
 .../converters/persistentVolumeClaim.js       |  1 +
 app/kubernetes/models/storage-class/models.js |  4 ++--
 app/kubernetes/models/volume/models.js        |  1 +
 app/kubernetes/views/volumes/edit/volume.html | 19 ++++++++++++------
 .../views/volumes/edit/volumeController.js    | 20 ++++++++-----------
 5 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/kubernetes/converters/persistentVolumeClaim.js b/app/kubernetes/converters/persistentVolumeClaim.js
index c7421f1b5..637df6374 100644
--- a/app/kubernetes/converters/persistentVolumeClaim.js
+++ b/app/kubernetes/converters/persistentVolumeClaim.js
@@ -18,6 +18,7 @@ class KubernetesPersistentVolumeClaimConverter {
     res.Namespace = data.metadata.namespace;
     res.CreationDate = data.metadata.creationTimestamp;
     res.Storage = `${data.spec.resources.requests.storage}B`;
+    res.AccessModes = data.spec.accessModes || [];
     res.StorageClass = _.find(storageClasses, { Name: data.spec.storageClassName });
     res.Yaml = yaml ? yaml.data : '';
     res.ApplicationOwner = data.metadata.labels ? data.metadata.labels[KubernetesPortainerApplicationOwnerLabel] : '';
diff --git a/app/kubernetes/models/storage-class/models.js b/app/kubernetes/models/storage-class/models.js
index beb5bb3d5..dff77f4f0 100644
--- a/app/kubernetes/models/storage-class/models.js
+++ b/app/kubernetes/models/storage-class/models.js
@@ -3,12 +3,12 @@
  */
 const _KubernetesStorageClassAccessPolicies = Object.freeze([
   {
-    Name: 'RWO',
+    Name: 'ReadWriteOnce',
     Description: 'Allow read-write from a single pod only (RWO)',
     selected: true,
   },
   {
-    Name: 'RWX',
+    Name: 'ReadWriteMany',
     Description: 'Allow read-write access from one or more pods concurrently (RWX)',
     selected: false,
   },
diff --git a/app/kubernetes/models/volume/models.js b/app/kubernetes/models/volume/models.js
index aaaee4054..bb140dcaf 100644
--- a/app/kubernetes/models/volume/models.js
+++ b/app/kubernetes/models/volume/models.js
@@ -11,6 +11,7 @@ const _KubernetesPersistentVolumeClaim = Object.freeze({
   StorageClass: {}, // KubernetesStorageClass
   CreationDate: '',
   ApplicationOwner: '',
+  AccessModes: [],
   ApplicationName: '',
   MountPath: '', // used for Application creation from ApplicationFormValues | not used from API conversion
   Yaml: '',
diff --git a/app/kubernetes/views/volumes/edit/volume.html b/app/kubernetes/views/volumes/edit/volume.html
index fd745250e..cd2455341 100644
--- a/app/kubernetes/views/volumes/edit/volume.html
+++ b/app/kubernetes/views/volumes/edit/volume.html
@@ -49,15 +49,22 @@
                       </td>
                     </tr>
                     <tr>
-                      <td>Storage</td>
+                      <td>Storage Class</td>
                       <td data-cy="k8sVolDetail-volStorageClassname">{{ ctrl.volume.PersistentVolumeClaim.StorageClass.Name }}</td>
                     </tr>
                     <tr>
-                      <td>Shared Access Policy</td>
-                      <td data-cy="k8sVolDetail-volAccessPolicy"
-                        >{{ ctrl.state.volumeSharedAccessPolicy }}
-                        <portainer-tooltip ng-if="ctrl.state.volumeSharedAccessPolicyTooltip" message="ctrl.state.volumeSharedAccessPolicyTooltip"></portainer-tooltip
-                      ></td>
+                      <td>Access Modes</td>
+                      <td data-cy="k8sVolDetail-volAccessPolicy">
+                        <div ng-repeat="(index, accessPolicy) in ctrl.state.volumeSharedAccessPolicies" class="flex flex-col gap-y-1">
+                          <div class="items-center flex gap-x-1">
+                            {{ accessPolicy }}
+                            <portainer-tooltip
+                              ng-if="ctrl.state.volumeSharedAccessPolicyTooltips[index]"
+                              message="ctrl.state.volumeSharedAccessPolicyTooltips[index]"
+                            ></portainer-tooltip>
+                          </div>
+                        </div>
+                      </td>
                     </tr>
                     <tr>
                       <td>Provisioner</td>
diff --git a/app/kubernetes/views/volumes/edit/volumeController.js b/app/kubernetes/views/volumes/edit/volumeController.js
index aad4969d7..09fb1faf5 100644
--- a/app/kubernetes/views/volumes/edit/volumeController.js
+++ b/app/kubernetes/views/volumes/edit/volumeController.js
@@ -174,8 +174,8 @@ class KubernetesVolumeController {
       increaseSize: false,
       volumeSize: 0,
       volumeSizeUnit: 'GB',
-      volumeSharedAccessPolicy: '',
-      volumeSharedAccessPolicyTooltip: '',
+      volumeSharedAccessPolicies: [],
+      volumeSharedAccessPolicyTooltips: '',
       errors: {
         volumeSize: false,
       },
@@ -186,16 +186,12 @@ class KubernetesVolumeController {
     try {
       await this.getVolume();
       await this.getEvents();
-      if (this.volume.PersistentVolumeClaim.StorageClass !== undefined) {
-        this.state.volumeSharedAccessPolicy = this.volume.PersistentVolumeClaim.StorageClass.AccessModes[this.volume.PersistentVolumeClaim.StorageClass.AccessModes.length - 1];
-        let policies = KubernetesStorageClassAccessPolicies();
-
-        policies.forEach((policy) => {
-          if (policy.Name == this.state.volumeSharedAccessPolicy) {
-            this.state.volumeSharedAccessPolicyTooltip = policy.Description;
-          }
-        });
-      }
+      this.state.volumeSharedAccessPolicies = this.volume.PersistentVolumeClaim.AccessModes;
+      let policies = KubernetesStorageClassAccessPolicies();
+      this.state.volumeSharedAccessPolicyTooltips = this.state.volumeSharedAccessPolicies.map((policy) => {
+        const matchingPolicy = policies.find((p) => p.Name === policy);
+        return matchingPolicy ? matchingPolicy.Description : undefined;
+      });
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to load view data');
     } finally {