ui: Fixes for action messages and forms (#4824)

* ui: Fixes for storage

* ui: fixes for compute

* ui: Fixes for network and accounts

* ui: Fixes for domain

* ui: Fixes for infra

ui/public/locales/en.json

@@ -202,6 +202,8 @@
 "label.action.generate.keys": "Generate Keys",
 "label.action.generate.keys.processing": "Generate Keys....",
 "label.action.get.diagnostics": "Get Diagnostics Data",
+"label.action.image.store.read.only": "Make Image store read-only",
+"label.action.image.store.read.write": "Make Image store read-write",
 "label.action.iso.permission": "Update ISO Permissions",
 "label.action.iso.share": "Update ISO Sharing",
 "label.action.list.nexusvswitch": "List Nexus 1000v",
@@ -2428,6 +2430,8 @@
 "message.action.revert.snapshot": "Please confirm that you want to revert the owning volume to this snapshot.",
 "message.action.router.health.checks": "Health checks result will be fetched from router.",
 "message.action.router.health.checks.disabled.warning": "Please enable router health checks.",
+"message.action.secondary.storage.read.only": "Please confirm that you want to make this secondary storage read only.",
+"message.action.secondary.storage.read.write": "Please confirm that you want to make this secondary storage read write.",
 "message.action.secure.host": "This will restart the host agent and libvirtd process after applying new X509 certificates, please confirm?",
 "message.action.settings.warning.vm.running": "Please stop the virtual machine to access settings",
 "message.action.settings.warning.vm.started": "Virtual machine has been started. It needs to be stopped to access settings",
@@ -3043,7 +3047,7 @@
 "message.restart.mgmt.usage.server": "Please restart your management server(s) and usage server(s) for your new settings to take effect.",
 "message.restart.network": "All services provided by this network will be interrupted. Please confirm that you want to restart this network.",
 "message.restart.vpc": "Please confirm that you want to restart the VPC",
-"message.restart.vpc.remark": "Please confirm that you want to restart the VPC <p><small><i>Remark: making a non-redundant VPC redundant will force a clean up. The networks will not be available for a couple of minutes</i>.</small></p>",
+"message.restart.vpc.remark": "Please confirm that you want to restart the VPC <p><i>Remark: making a non-redundant VPC redundant will force a clean up. The networks will not be available for a couple of minutes</i>.</p>",
 "message.restorevm": "Do you want to restore the VM ?",
 "message.role.ordering.fail": "Reordering of rule permissions aborted as the list has changed while you were making changes. Please try again.",
 "message.role.update.fail": "Failed updating rule permission",
@@ -3177,6 +3181,7 @@
 "message.update.ipaddress.processing": "Updating IP Address...",
 "message.update.os.preference": "Please choose a OS preference for this host.  All virtual instances with similar preferences will be first allocated to this host before choosing another.",
 "message.update.resource.count": "Please confirm that you want to update resource counts for this account.",
+"message.update.resource.count.domain": "Please confirm that you want to update resource counts for this domain.",
 "message.update.ssl": "Please submit a new X.509 compliant SSL certificate chain to be updated to each console proxy and secondary storage virtual instance:",
 "message.update.ssl.failed": "Failed to update SSL Certificate.",
 "message.update.ssl.succeeded": "Update SSL Certificates succeeded",

ui/src/config/section/compute.js

@@ -543,6 +543,7 @@ export default {
           api: 'deleteSSHKeyPair',
           icon: 'delete',
           label: 'label.remove.ssh.key.pair',
+          message: 'message.please.confirm.remove.ssh.key.pair',
           dataView: true,
           args: ['name', 'account', 'domainid'],
           mapping: {

ui/src/config/section/domain.js

@@ -93,7 +93,7 @@ export default {
       api: 'updateResourceCount',
       icon: 'sync',
       label: 'label.action.update.resource.count',
-      message: 'message.update.resource.count',
+      message: 'message.update.resource.count.domain',
       listView: true,
       dataView: true,
       args: ['domainid'],

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

@@ -103,6 +103,7 @@ export default {
       api: 'migrateSystemVm',
       icon: 'drag',
       label: 'label.action.migrate.router',
+      message: 'message.migrate.router.confirm',
       dataView: true,
       show: (record, store) => { return ['Running'].includes(record.state) && ['Admin'].includes(store.userInfo.roletype) },
       args: ['virtualmachineid', 'hostid'],

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

@@ -61,17 +61,11 @@ export default {
       popup: true,
       component: () => import('@/views/infra/AddSecondaryStorage.vue')
     },
-    {
-      api: 'deleteImageStore',
-      icon: 'delete',
-      label: 'label.action.delete.secondary.storage',
-      message: 'message.action.delete.secondary.storage',
-      dataView: true
-    },
     {
       api: 'updateImageStore',
       icon: 'stop',
-      label: 'Make Image store read-only',
+      label: 'label.action.image.store.read.only',
+      message: 'message.action.secondary.storage.read.only',
       dataView: true,
       defaultArgs: { readonly: true },
       show: (record) => { return record.readonly === false }
@@ -79,10 +73,18 @@ export default {
     {
       api: 'updateImageStore',
       icon: 'check-circle',
-      label: 'Make Image store read-write',
+      label: 'label.action.image.store.read.write',
+      message: 'message.action.secondary.storage.read.write',
       dataView: true,
       defaultArgs: { readonly: false },
       show: (record) => { return record.readonly === true }
+    },
+    {
+      api: 'deleteImageStore',
+      icon: 'delete',
+      label: 'label.action.delete.secondary.storage',
+      message: 'message.action.delete.secondary.storage',
+      dataView: true
     }
   ]
 }

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

@@ -68,6 +68,7 @@ export default {
       api: 'migrateSystemVm',
       icon: 'drag',
       label: 'label.action.migrate.systemvm',
+      message: 'message.migrate.systemvm.confirm',
       dataView: true,
       show: (record) => { return record.state === 'Running' },
       args: ['virtualmachineid', 'hostid'],

ui/src/config/section/network.js

@@ -85,6 +85,7 @@ export default {
           api: 'restartNetwork',
           icon: 'sync',
           label: 'label.restart.network',
+          message: 'message.restart.network',
           dataView: true,
           args: ['cleanup'],
           show: (record) => record.type !== 'L2'
@@ -165,7 +166,7 @@ export default {
           api: 'restartVPC',
           icon: 'sync',
           label: 'label.restart.vpc',
-          message: 'message.restart.vpc',
+          message: (record) => { return record.redundantvpcrouter ? 'message.restart.vpc' : 'message.restart.vpc.remark' },
           dataView: true,
           args: (record) => {
             var fields = ['cleanup']

ui/src/views/AutogenView.vue

@@ -727,6 +727,13 @@ export default {
         return 0
       })
       this.currentAction.paramFields = []
+      if ('message' in action) {
+        var message = action.message
+        if (typeof action.message === 'function') {
+          message = action.message(action.resource)
+        }
+        action.message = message
+      }
       if ('args' in action) {
         var args = action.args
         if (typeof action.args === 'function') {

ui/src/views/compute/AssignInstance.vue

@@ -17,14 +17,16 @@
 
 <template>
   <div>
-    <p v-html="$t('message.assign.instance.another')"></p>
-
     <div class="form">
 
       <div v-if="loading" class="loading">
         <a-icon type="loading" style="color: #1890ff;"></a-icon>
       </div>
 
+      <a-alert type="warning" style="margin-bottom: 20px">
+        <span slot="message" v-html="$t('message.assign.instance.another')"></span>
+      </a-alert>
+
       <div class="form__item">
         <p class="form__label">{{ $t('label.accounttype') }}</p>
         <a-select v-model="selectedAccountType" defaultValue="account">
@@ -226,6 +228,12 @@ export default {
 
 <style scoped lang="scss">
   .form {
+    width: 85vw;
+
+    @media (min-width: 760px) {
+      width: 500px;
+    }
+
     display: flex;
     flex-direction: column;
 

ui/src/views/iam/DomainActionForm.vue

@@ -37,6 +37,9 @@
           :form="form"
           @submit="handleSubmit"
           layout="vertical" >
+          <a-alert type="warning" v-if="action.message">
+            <span slot="message" v-html="$t(action.message)" />
+          </a-alert>
           <a-form-item
             v-for="(field, fieldIndex) in action.paramFields"
             :key="fieldIndex"

ui/src/views/project/AddAccountOrUserToProject.vue

@@ -88,7 +88,9 @@
           :form="form"
           @submit="addUserToProject"
           layout="vertical">
-          <p v-html="$t('message.add.user.to.project')"></p>
+          <a-alert type="warning" style="margin-bottom: 20px">
+            <span slot="message" v-html="$t('message.add.user.to.project')"></span>
+          </a-alert>
           <a-form-item>
             <span slot="label">
               {{ $t('label.user') }}

ui/src/views/storage/FormSchedule.vue

@@ -18,9 +18,9 @@
 <template>
   <a-spin :spinning="loading">
     <div class="form-layout">
-      <label>
-        {{ $t('label.header.volume.snapshot') }}
-      </label>
+      <a-alert type="warning">
+        <span slot="message" v-html="$t('label.header.volume.snapshot')" />
+      </a-alert>
       <div class="form">
         <a-form
           :form="form"

ui/src/views/storage/MigrateVolume.vue

@@ -17,9 +17,11 @@
 
 <template>
   <div class="migrate-volume-container">
-
     <div class="modal-form">
       <div v-if="storagePools.length > 0">
+        <a-alert type="warning">
+          <span slot="message" v-html="$t('message.migrate.volume')" />
+        </a-alert>
         <p class="modal-form__label">{{ $t('label.storagepool') }}</p>
         <a-select v-model="selectedStoragePool" style="width: 100%;">
           <a-select-option v-for="(storagePool, index) in storagePools" :value="storagePool.id" :key="index">
@@ -168,11 +170,10 @@ export default {
 
 <style scoped lang="scss">
   .migrate-volume-container {
-    width: 95vw;
-    max-width: 100%;
+    width: 85vw;
 
     @media (min-width: 760px) {
-      width: 50vw;
+      width: 500px;
     }
   }
 

ui/src/views/storage/ResizeVolume.vue

@@ -142,9 +142,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .form-layout {
-  width: 75vw;
-  @media (min-width: 700px) {
-    width: 40vw;
+  width: 85vw;
+
+  @media (min-width: 760px) {
+    width: 500px;
   }
 }
 .action-button {

ui/src/views/storage/TakeSnapshot.vue

@@ -18,9 +18,9 @@
 <template>
   <div class="take-snapshot">
     <a-spin :spinning="loading || actionLoading">
-      <label>
-        {{ $t('label.header.volume.take.snapshot') }}
-      </label>
+      <a-alert type="warning">
+        <span slot="message" v-html="$t('label.header.volume.take.snapshot')" />
+      </a-alert>
       <a-form
         class="form"
         :form="form"