Improve pv list and pv detail page

https://github.com/rancher/rancher/issues/15450

app/authenticated/cluster/storage/persistent-volumes/index/controller.js

@@ -15,6 +15,12 @@ export const headers = [
     searchField:    'displayName',
     translationKey: 'generic.name',
   },
+  {
+    name:           'displayPvc',
+    sort:           ['displayPvc', 'sortName', 'id'],
+    searchField:    'displayPvc',
+    translationKey: 'cruPersistentVolume.pvc',
+  },
   {
     name:           'source',
     sort:           ['displaySource', 'name', 'id'],

app/authenticated/cluster/storage/persistent-volumes/index/template.hbs

@@ -30,6 +30,13 @@
       <td data-title="{{dt.name}}">
         <a href="{{href-to "authenticated.cluster.storage.persistent-volumes.detail" obj.id}}">{{obj.displayName}}</a>
       </td>
+      <td data-title="{{dt.displayPvc}}">
+        {{#if obj.displayPvc}}
+          {{obj.displayPvc}}
+        {{else}}
+          <div class="text-muted">{{t 'generic.na'}}</div>
+        {{/if}}
+      </td>
       <td data-title="{{dt.source}}">
         {{obj.displaySource}}
       </td>

app/components/cru-persistent-volume/template.hbs

@@ -13,6 +13,9 @@
   {{#if model.description}}
     {{banner-message color='bg-secondary mb-0 mt-10' message=(linkify model.description)}}
   {{/if}}
+  {{#if model.showTransitioningMessage}}
+    <div class="{{model.stateColor}}"><p>{{uc-first model.transitioningMessage}}</p></div>
+  {{/if}}
 {{else}}
   {{form-name-description
     model=primaryResource
@@ -24,10 +27,39 @@
   }}
 {{/if}}
 
-<div class="row">
+{{#if isView}}
-  <div class="col span-6">
+  <div class="row banner bg-info basics">
-    <label class="acc-label">{{t 'cruPersistentVolume.source.label'}}{{field-required editing=editing}}</label>
+    <div class="vertical-middle">
-    {{#if editing}}
+      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.source.label'}}</label>
+      {{t (concat 'volumeSource.' sourceName '.title')}}
+    </div>
+    <div class="vertical-middle">
+      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.capacity.label'}}</label>
+      {{capacity}} {{t 'cruPersistentVolume.capacity.unit'}}
+    </div>
+    <div class="vertical-middle">
+      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.reclaimPolicy'}}</label>
+      {{model.persistentVolumeReclaimPolicy}}
+    </div>
+  </div>
+  <div class="row banner bg-info basics">
+    <div class="vertical-middle">
+      <label class="acc-label vertical-middle p-0">{{t 'cruPersistentVolume.pvc'}}</label>
+      {{#if model.displayPvc}}
+        {{model.displayPvc}}
+      {{else}}
+        <span class="text-muted">{{t 'generic.na'}}</span>
+      {{/if}}
+    </div>
+    <div class="vertical-middle">
+      <label class="acc-label vertical-middle p-0">{{t 'generic.created'}}</label>
+      {{date-calendar model.created}}
+    </div>
+  </div>
+{{else}}
+  <div class="row">
+    <div class="col span-6">
+      <label class="acc-label">{{t 'cruPersistentVolume.source.label'}}{{field-required editing=editing}}</label>
       {{new-select
         content=sourceChoices
         prompt="cruPersistentVolume.source.prompt"
@@ -36,26 +68,18 @@
         value=sourceName
         readOnly=isView
       }}
-    {{else}}
+    </div>
-      <div>
+    <div class="col span-6">
-        {{t (concat 'volumeSource.' sourceName '.title')}}
+      <label class="acc-label">{{t 'cruPersistentVolume.capacity.label'}}{{field-required editing=editing}}</label>
-      </div>
-    {{/if}}
-  </div>
-  <div class="col span-6">
-    <label class="acc-label">{{t 'cruPersistentVolume.capacity.label'}}{{field-required editing=editing}}</label>
-    {{#if editing}}
       <div class="input-group">
         {{input-number classNames="form-control" value=capacity}}
         <span class="input-group-addon bg-default">{{t 'cruPersistentVolume.capacity.unit'}}</span>
       </div>
-    {{else}}
+    </div>
-      <div>
-        {{capacity}} {{t 'cruPersistentVolume.capacity.unit'}}
-      </div>
-    {{/if}}
   </div>
-</div>
+{{/if}}
+
+
 
 <hr class="mb-20" />
 
@@ -139,14 +163,20 @@
   {{/accordion-list-item}}
 
   {{#if isView}}
-      {{resource-event-list
+    {{resource-event-list
-        resourceType=(t 'generic.persistentVolume')
+      resourceType=(t 'generic.persistentVolume')
-        expandAll=al.expandAll
+      expandAll=al.expandAll
-        expandFn=expandFn
+      expandFn=expandFn
-        name=model.name
+      name=model.name
-        kind="PersistentVolume"
+      kind="PersistentVolume"
-      }}
+    }}
-    {{/if}}
+
+    {{annotations-section
+      model=model
+      expandAll=al.expandAll
+      expandFn=expandFn
+    }}
+  {{/if}}
 {{/accordion-list}}
 
 {{#unless isView}}

app/components/form-node-affinity/template.hbs

@@ -4,7 +4,7 @@
     rule=rule
     editing=editing}}
 {{else if (not editing)}}
-  <div class="p-20">{{t 'formNodeAffinity.noRules'}}</div>
+  <div class="text-center text-muted lacsso pt-20 pb-20">{{t 'formNodeAffinity.noRules'}}</div>
 {{/each}}
 
 {{#if editing}}

app/models/persistentvolume.js

@@ -14,6 +14,12 @@ export default Volume.extend({
     return !!get(this, 'links.remove') && get(this, 'state') !== 'bound';
   }),
 
+  displayPvc: computed('claimRef.namespace', 'claimRef.name', function() {
+    if ( get(this, 'claimRef.name') ) {
+      return `${ get(this, 'claimRef.namespace') }/${ get(this, 'claimRef.name') }`;
+    }
+  }),
+
   actions: {
     edit() {
       get(this, 'router').transitionTo('authenticated.cluster.storage.persistent-volumes.detail.edit', get(this, 'id'));

translations/en-us.yaml

@@ -2261,6 +2261,8 @@ cruPersistentVolume:
   storageClass:
     label: Assign to Storage Class
     prompt: None
+  pvc: Persistent Volume Claim
+  reclaimPolicy: Reclaim Policy
   capacity:
     label: Capacity
     unit: GiB