ui: secondary storage - Display text and change the badge color of the Read-only column (#5176)

* change badge color and display text of read-only secondary storage

* change readonly label to access

Fixes #5169

ui/public/locales/en.json

@@ -3324,6 +3324,8 @@
 "state.expunging": "Expunging",
 "state.migrating": "Migrating",
 "state.pending": "Pending",
+"state.readonly": "Read-Only",
+"state.readwrite": "Read-Write",
 "state.running": "Running",
 "state.starting": "Starting",
 "state.stopped": "Stopped",

ui/src/components/view/ListView.vue

@@ -231,7 +231,7 @@
       <span v-else>{{ text }}</span>
     </span>
     <a slot="readonly" slot-scope="text, record">
-      <status :text="record.readonly ? 'ReadOnly' : 'ReadWrite'" />
+      <status :text="record.readonly ? 'ReadOnly' : 'ReadWrite'" displayText />
     </a>
     <span slot="created" slot-scope="text">
       {{ $toLocaleDate(text) }}

ui/src/components/widgets/Status.vue

@@ -72,6 +72,12 @@ export default {
           case 'Error':
             state = this.$t('state.error')
             break
+          case 'ReadOnly':
+            state = this.$t('state.readonly')
+            break
+          case 'ReadWrite':
+            state = this.$t('state.readwrite')
+            break
         }
         return state.charAt(0).toUpperCase() + state.slice(1)
       }
@@ -106,7 +112,6 @@ export default {
         case 'Error':
         case 'False':
         case 'Stopped':
-        case 'ReadOnly':
           status = 'error'
           break
         case 'Migrating':
@@ -126,6 +131,7 @@ export default {
         case 'Created':
         case 'Maintenance':
         case 'Pending':
+        case 'ReadOnly':
           status = 'warning'
           break
       }

ui/src/config/section/infra/secondaryStorages.js

@@ -25,7 +25,10 @@ export default {
   columns: () => {
     var fields = ['name', 'url', 'protocol', 'scope', 'zonename']
     if (store.getters.apis.listImageStores.params.filter(x => x.name === 'readonly').length > 0) {
-      fields.push('readonly')
+      fields.push({
+        field: 'readonly',
+        customTitle: 'access'
+      })
     }
     return fields
   },

ui/src/views/AutogenView.vue

@@ -583,13 +583,21 @@ export default {
 
       const customRender = {}
       for (var columnKey of this.columnKeys) {
-        var key = columnKey
+        let key = columnKey
+        let title = columnKey
         if (typeof columnKey === 'object') {
-          key = Object.keys(columnKey)[0]
-          customRender[key] = columnKey[key]
+          if ('customTitle' in columnKey && 'field' in columnKey) {
+            key = columnKey.field
+            title = columnKey.customTitle
+            customRender[key] = columnKey[key]
+          } else {
+            key = Object.keys(columnKey)[0]
+            title = Object.keys(columnKey)[0]
+            customRender[key] = columnKey[key]
+          }
         }
         this.columns.push({
-          title: this.$t('label.' + String(key).toLowerCase()),
+          title: this.$t('label.' + String(title).toLowerCase()),
           dataIndex: key,
           scopedSlots: { customRender: key },
           sorter: function (a, b) { return genericCompare(a[this.dataIndex] || '', b[this.dataIndex] || '') }