UI assorted fixes (#9381)

* config.json: make configuration names consistent with other

Makes login related config param to be consistent with the original
`loginFooter`. Group them together.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

* ui: assorted UI fixes and copy console URL fix

This brings in related buttons across some infra views and new columns
which are missing. Also fixes the copy console URL issue on some
browsers.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

---------

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/public/config.json

@@ -10,12 +10,12 @@
   "docBase": "http://docs.cloudstack.apache.org/en/latest",
   "appTitle": "CloudStack",
   "footer": "Licensed under the <a href='http://www.apache.org/licenses/' target='_blank'>Apache License</a>, Version 2.0.",
+  "loginTitle": "CloudStack",
+  "loginFavicon": "assets/logo.svg",
   "loginFooter": "",
   "logo": "assets/logo.svg",
   "minilogo": "assets/mini-logo.svg",
   "banner": "assets/banner.svg",
-  "loginPageTitle": "CloudStack",
-  "loginPageFavicon": "assets/logo.svg",
   "error": {
     "403": "assets/403.png",
     "404": "assets/404.png",

ui/public/index.html

@@ -58,8 +58,8 @@
     fetch('./config.json')
       .then(response => response.json())
       .then(data => {
-        document.getElementById("favicon").setAttribute("href", data.loginPageFavicon);
-        document.getElementById("title").innerHTML = data.loginPageTitle;
+        document.getElementById("favicon").setAttribute("href", data.loginFavicon);
+        document.getElementById("title").innerHTML = data.loginTitle;
       }).catch((err) => {});
   </script>
 </html>

ui/public/locales/en.json

@@ -1891,6 +1891,7 @@
 "label.service.connectivity.distributedroutercapabilitycheckbox": "Distributed router",
 "label.service.connectivity.regionlevelvpccapabilitycheckbox": "Region level VPC",
 "label.service.group": "Service group",
+"label.serviceip": "Service IP",
 "label.service.lb.elasticlbcheckbox": "Elastic LB",
 "label.service.lb.inlinemodedropdown": "Mode",
 "label.service.lb.lbisolationdropdown": "LB isolation",

ui/src/components/view/InfoCard.vue

@@ -104,18 +104,6 @@
                   v-if="resource.id"
                 />
               </a-tooltip>
-              <a-tooltip placement="right" >
-                <template #title>
-                  <span>{{ $t('label.copy.consoleurl') }}</span>
-                </template>
-                <console
-                  copyUrlToClipboard
-                  style="margin-top: -5px;"
-                  :resource="resource"
-                  size="default"
-                  v-if="resource.id"
-                />
-              </a-tooltip>
             </div>
           </slot>
         </div>

ui/src/components/widgets/Console.vue

@@ -56,17 +56,10 @@ export default {
         this.url = (json && json.createconsoleendpointresponse) ? json.createconsoleendpointresponse.consoleendpoint.url : '#/exception/404'
         if (json.createconsoleendpointresponse.consoleendpoint.success) {
           if (this.copyUrlToClipboard) {
+            this.$copyText(this.url)
             this.$message.success({
               content: this.$t('label.copied.clipboard')
             })
-            const hiddenElement = document.createElement('textarea')
-            hiddenElement.value = this.url
-            document.body.appendChild(hiddenElement)
-            hiddenElement.focus()
-            hiddenElement.select()
-
-            document.execCommand('copy')
-            document.body.removeChild(hiddenElement)
           } else {
             window.open(this.url, '_blank')
           }

ui/src/config/section/account.js

@@ -31,6 +31,30 @@ export default {
     name: 'accountuser',
     title: 'label.users',
     param: 'account'
+  }, {
+    name: 'vm',
+    title: 'label.vms',
+    param: 'account'
+  }, {
+    name: 'volume',
+    title: 'label.volumes',
+    param: 'account'
+  }, {
+    name: 'guestnetwork',
+    title: 'label.networks',
+    param: 'account'
+  }, {
+    name: 'ssh',
+    title: 'label.sshkeypairs',
+    param: 'account'
+  }, {
+    name: 'userdata',
+    title: 'label.userdata',
+    param: 'account'
+  }, {
+    name: 'template',
+    title: 'label.templates',
+    param: 'account'
   }],
   filters: () => {
     const filters = ['enabled', 'disabled', 'locked']

ui/src/config/section/domain.js

@@ -32,6 +32,22 @@ export default {
     name: 'account',
     title: 'label.accounts',
     param: 'domainid'
+  }, {
+    name: 'vm',
+    title: 'label.vms',
+    param: 'domainid'
+  }, {
+    name: 'volume',
+    title: 'label.volumes',
+    param: 'domainid'
+  }, {
+    name: 'guestnetwork',
+    title: 'label.networks',
+    param: 'domainid'
+  }, {
+    name: 'template',
+    title: 'label.templates',
+    param: 'domainid'
   }],
   tabs: [
     {

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

@@ -32,7 +32,7 @@ export default {
   },
   params: { type: 'routing' },
   columns: () => {
-    const fields = ['name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'instances', 'powerstate']
+    const fields = ['name', 'state', 'resourcestate', 'ipaddress', 'hypervisor', 'instances', 'powerstate', 'version']
     const metricsFields = ['cpunumber', 'cputotalghz', 'cpuusedghz', 'cpuallocatedghz', 'memorytotalgb', 'memoryusedgb', 'memoryallocatedgb', 'networkread', 'networkwrite']
     if (store.getters.metrics) {
       fields.push(...metricsFields)

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

@@ -26,8 +26,8 @@ export default {
   permission: ['listManagementServersMetrics'],
   resourceType: 'ManagementServer',
   columns: () => {
-    const fields = ['name', 'state', 'version']
-    const metricsFields = ['collectiontime', 'availableprocessors', 'cpuload', 'heapmemoryused', 'agentcount']
+    const fields = ['name', 'state', 'serviceip', 'version', 'osdistribution', 'agentcount']
+    const metricsFields = ['collectiontime', 'availableprocessors', 'cpuload', 'heapmemoryused']
     if (store.getters.metrics) {
       fields.push(...metricsFields)
     }