From 74ef647a2819931cac38c3884cb95500e6521192 Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Tue, 13 Aug 2019 13:34:19 +0530
Subject: [PATCH] fix alignment bugs, fix issue on mobile by changing icons to
 small/round icons

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/views/dashboard/CapacityDashboard.vue | 47 +++++++++++++-------
 ui/src/views/dashboard/UsageDashboard.vue    | 21 ++++-----
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index c44939c2d7b..9356675babc 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -16,25 +16,42 @@
           </a-select>
         </div>
         <div class="ant-pro-capacity-dashboard__button">
-          <a-button
-            type="primary"
-            @click="listCapacity(zoneSelected, true)">Fetch Latest</a-button>
+          <a-tooltip placement="bottom">
+            <template slot='title'>
+              Fetch Latest
+            </template>
+            <a-button
+              type="primary" shape="circle"
+              @click="listCapacity(zoneSelected, true)">
+              <a-icon style="font-size: 16px; padding: 2px" type="reload" />
+            </a-button>
+          </a-tooltip>
         </div>
         <div class="ant-pro-capacity-dashboard__button">
-          <a-button>
-            <router-link :to="{ name: 'alert' }">
-              <a-icon style="font-size: 16px; padding: 2px" type="flag" />
-            </router-link>
-          </a-button>
+          <a-tooltip placement="bottom">
+            <template slot='title'>
+              View Alerts
+            </template>
+            <a-button shape="circle">
+              <router-link :to="{ name: 'alert' }">
+                <a-icon style="font-size: 16px; padding: 2px" type="flag" />
+              </router-link>
+            </a-button>
+          </a-tooltip>
         </div>
         <div class="ant-pro-capacity-dashboard__button">
-          <a-button type="danger">
-            <router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
-              <a-badge dot>
-                <a-icon style="font-size: 16px" type="desktop" />
-              </a-badge>
-            </router-link>
-          </a-button>
+          <a-tooltip placement="bottom">
+            <template slot='title'>
+              View Hosts in Alert State
+            </template>
+            <a-button type="danger" shape="circle">
+              <router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
+                <a-badge dot>
+                  <a-icon style="font-size: 16px" type="desktop" />
+                </a-badge>
+              </router-link>
+            </a-button>
+          </a-tooltip>
         </div>
       </div>
       <a-row :gutter="12">
diff --git a/ui/src/views/dashboard/UsageDashboard.vue b/ui/src/views/dashboard/UsageDashboard.vue
index bb1de655ef5..e0aad97f935 100644
--- a/ui/src/views/dashboard/UsageDashboard.vue
+++ b/ui/src/views/dashboard/UsageDashboard.vue
@@ -3,13 +3,10 @@
     <a-row :gutter="12">
       <a-col
         class="user-dashboard-chart-card"
-        :sm="12"
-        :md="12"
-        :xl="6"
-        :style="{ marginTop: '24px' }">
+        :xl="16">
         <a-row :gutter="12">
           <a-col
-            :xl="12"
+            :xl="8"
             v-for="stat in stats"
             :key="stat.type"
             :style="{ marginBottom: '12px' }">
@@ -82,48 +79,48 @@ export default {
   },
   methods: {
     fetchData () {
-      this.stats = []
+      this.stats = [{}, {}, {}, {}, {}, {}]
       api('listVirtualMachines', { state: 'Running', listall: true }).then(json => {
         var count = 0
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.push({ name: 'Running VMs', count: count, path: 'vm' })
+        this.stats.splice(0, 1, { name: 'Running VMs', count: count, path: 'vm' })
       })
       api('listVirtualMachines', { state: 'Stopped', listall: true }).then(json => {
         var count = 0
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.push({ name: 'Stopped VMs', count: count, path: 'vm' })
+        this.stats.splice(1, 1, { name: 'Stopped VMs', count: count, path: 'vm' })
       })
       api('listVirtualMachines', { listall: true }).then(json => {
         var count = 0
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.push({ name: 'Total VMs', count: count, path: 'vm' })
+        this.stats.splice(2, 1, { name: 'Total VMs', count: count, path: 'vm' })
       })
       api('listVolumes', { listall: true }).then(json => {
         var count = 0
         if (json && json.listvolumesresponse) {
           count = json.listvolumesresponse.count
         }
-        this.stats.push({ name: 'Total Volumes', count: count, path: 'volume' })
+        this.stats.splice(3, 1, { name: 'Total Volumes', count: count, path: 'volume' })
       })
       api('listNetworks', { listall: true }).then(json => {
         var count = 0
         if (json && json.listnetworksresponse) {
           count = json.listnetworksresponse.count
         }
-        this.stats.push({ name: 'Total Networks', count: count, path: 'guestnetwork' })
+        this.stats.splice(4, 1, { name: 'Total Networks', count: count, path: 'guestnetwork' })
       })
       api('listPublicIpAddresses', { listall: true }).then(json => {
         var count = 0
         if (json && json.listpublicipaddressesresponse) {
           count = json.listpublicipaddressesresponse.count
         }
-        this.stats.push({ name: 'Public IP Addresses', count: count, path: 'publicip' })
+        this.stats.splice(5, 1, { name: 'Public IP Addresses', count: count, path: 'publicip' })
       })
       this.listEvents()
     },