Added customization options for menu and dashboard elements (#5937)

ui/docs/customize.md

@@ -53,6 +53,15 @@ Customize themes like colors, border color, etc.
 - `@navigation-background-color` changes the navigation menu background color.
 - `@navigation-text-color` changes the navigation text color.
 - `@primary-color` change the major background color of the page (background button, icon hover, etc).
+- `@primary-color-light` changes selected menu item bg-color and hovered table cell bg-color.
+- `@dashboard-graph-normal-color` changes the -normal- color of stroke in graphs in the Root admin's dashboard.
+- `@dashboard-graph-exception-color` changes the -danger- color of stroke in graphs in the Root admin's dashboard.
+- `@dashboard-tile-runningvms-bg` changes bg color of the "Running VMs" tile in the non-Root admin's dashboard.
+- `@dashboard-tile-stoppedvms-bg` changes bg color of the "Stopped VMs" tile in the non-Root admin's dashboard.
+- `@dashboard-tile-totalvms-bg` changes bg color of the "Total VMs" tile in the non-Root admin's dashboard.
+- `@dashboard-tile-totalvolumes-bg` changes bg color of the "Total volumes" tile in the non-Root admin's dashboard.
+- `@dashboard-tile-totalnetworks-bg` changes bg color of the "Total networks" tile in the non-Root admin's dashboard.
+- `@dashboard-tile-totalips-bg` changes bg color of the "Total IPs" tile in the non-Root admin's dashboard.
 - `@link-color` changes the link color.
 - `@link-hover-color` changes the link hover color.
 - `@loading-color` changes the message loading color and page loading bar at the top page.

ui/src/style/vars.less

@@ -28,6 +28,7 @@
 @project-nav-text-color: rgba(255, 255, 255, 0.65);
 @navigation-text-color:  rgba(0, 0, 0, 0.65);
 @primary-color: #1890ff;
+@primary-color-light: tint(@primary-color, 90);
 @link-color: @primary-color;
 @link-hover-color: #40a9ff;
 @processing-color: @primary-color;
@@ -120,6 +121,19 @@ a {
   color: @primary-color;
 }
 
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: @primary-color-light;
+}
+
+.ant-menu-item:active,
+.ant-menu-submenu-title:active {
+  background: @primary-color-light;
+}
+
+.list .item:hover {
+  background: @primary-color-light;
+}
+
 .ant-menu-vertical .ant-menu-item,
 .ant-menu-vertical-left .ant-menu-item,
 .ant-menu-vertical-right .ant-menu-item,
@@ -351,3 +365,10 @@ a {
   top: 35px;
   z-index: 1001;
 }
+
+.ant-table-thead > tr.ant-table-row-hover > td,
+.ant-table-tbody > tr.ant-table-row-hover > td,
+.ant-table-thead > tr:hover > td,
+.ant-table-tbody > tr:hover > td {
+  background: @primary-color-light !important;
+}

ui/src/views/dashboard/CapacityDashboard.vue

@@ -184,9 +184,9 @@ export default {
     },
     getStrokeColour (value) {
       if (value >= 80) {
-        return 'red'
+        return this.$config.theme['@graph-exception-color'] || 'red'
       }
-      return 'primary'
+      return this.$config.theme['@graph-normal-color'] || 'primary'
     },
     displayData (dataType, value) {
       switch (dataType) {

ui/src/views/dashboard/UsageDashboard.vue

@@ -48,7 +48,7 @@
               class="usage-dashboard-chart-card"
               :bordered="false"
               :loading="loading"
-              :style="stat.bgcolor ? { 'background-color': stat.bgcolor } : {}">
+              :style="stat.bgcolor ? { 'background': stat.bgcolor } : {}">
               <router-link :to="{ path: stat.path }">
                 <div
                   class="usage-dashboard-chart-card-inner">
@@ -166,42 +166,48 @@ export default {
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.splice(0, 1, { name: this.$t('label.running'), count: count, icon: 'desktop', bgcolor: '#dfe9cc', path: '/vm?state=running&filter=running' })
+        var tileColor = this.$config.theme['@dashboard-tile-runningvms-bg'] || '#dfe9cc'
+        this.stats.splice(0, 1, { name: this.$t('label.running'), count: count, icon: 'desktop', bgcolor: tileColor, path: '/vm?state=running&filter=running' })
       })
       api('listVirtualMachines', { state: 'Stopped', listall: true }).then(json => {
         var count = 0
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.splice(1, 1, { name: this.$t('label.stopped'), count: count, icon: 'poweroff', bgcolor: '#edcbce', path: '/vm?state=stopped&filter=stopped' })
+        var tileColor = this.$config.theme['@dashboard-tile-stoppedvms-bg'] || '#edcbce'
+        this.stats.splice(1, 1, { name: this.$t('label.stopped'), count: count, icon: 'poweroff', bgcolor: tileColor, path: '/vm?state=stopped&filter=stopped' })
       })
       api('listVirtualMachines', { listall: true }).then(json => {
         var count = 0
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.splice(2, 1, { name: this.$t('label.total.vms'), count: count, icon: 'number', path: '/vm' })
+        var tileColor = this.$config.theme['@dashboard-tile-totalvms-bg'] || '#ffffff'
+        this.stats.splice(2, 1, { name: this.$t('label.total.vms'), count: count, icon: 'number', bgcolor: tileColor, path: '/vm' })
       })
       api('listVolumes', { listall: true }).then(json => {
         var count = 0
         if (json && json.listvolumesresponse) {
           count = json.listvolumesresponse.count
         }
-        this.stats.splice(3, 1, { name: this.$t('label.total.volume'), count: count, icon: 'database', path: '/volume' })
+        var tileColor = this.$config.theme['@dashboard-tile-totalvolumes-bg'] || '#ffffff'
+        this.stats.splice(3, 1, { name: this.$t('label.total.volume'), count: count, icon: 'database', bgcolor: tileColor, path: '/volume' })
       })
       api('listNetworks', { listall: true }).then(json => {
         var count = 0
         if (json && json.listnetworksresponse) {
           count = json.listnetworksresponse.count
         }
-        this.stats.splice(4, 1, { name: this.$t('label.total.network'), count: count, icon: 'apartment', path: '/guestnetwork' })
+        var tileColor = this.$config.theme['@dashboard-tile-totalnetworks-bg'] || '#ffffff'
+        this.stats.splice(4, 1, { name: this.$t('label.total.network'), count: count, icon: 'apartment', bgcolor: tileColor, path: '/guestnetwork' })
       })
       api('listPublicIpAddresses', { listall: true }).then(json => {
         var count = 0
         if (json && json.listpublicipaddressesresponse) {
           count = json.listpublicipaddressesresponse.count
         }
-        this.stats.splice(5, 1, { name: this.$t('label.public.ip.addresses'), count: count, icon: 'environment', path: '/publicip' })
+        var tileColor = this.$config.theme['@dashboard-tile-totalips-bg'] || '#ffffff'
+        this.stats.splice(5, 1, { name: this.$t('label.public.ip.addresses'), count: count, icon: 'environment', bgcolor: tileColor, path: '/publicip' })
       })
       this.listEvents()
     },

ui/theme.config.js

@@ -33,6 +33,15 @@ const options = {
     '@navigation-background-color',
     '@navigation-text-color',
     '@primary-color',
+    '@primary-color-light',
+    '@graph-normal-color',
+    '@graph-exception-color',
+    '@dashboard-tile-runningvms-bg',
+    '@dashboard-tile-stoppedvms-bg',
+    '@dashboard-tile-totalvms-bg',
+    '@dashboard-tile-totalvolumes-bg',
+    '@dashboard-tile-totalnetworks-bg',
+    '@dashboard-tile-totalips-bg',
     '@link-color',
     '@link-hover-color',
     '@loading-color',