views: fix dashboard and autogenview css issues

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

ui/src/components/widgets/Breadcrumb.vue

@@ -101,7 +101,6 @@ export default {
 <style>
 .ant-breadcrumb {
   vertical-align: text-bottom;
-  margin-bottom: 8px;
 }
 
 .ant-breadcrumb .anticon {

ui/src/views/AutogenView.vue

@@ -22,20 +22,15 @@
         <a-col :span="device === 'mobile' ? 24 : 12" style="padding-left: 12px">
           <breadcrumb :resource="resource">
             <span slot="end">
-              <a-tooltip placement="bottom">
-                <template slot="title">
-                  {{ $t('label.refresh') }}
-                </template>
-                <a-button
-                  style="margin-top: 4px"
-                  :loading="loading"
-                  shape="round"
-                  size="small"
-                  icon="reload"
-                  @click="fetchData()">
-                  {{ $t('label.refresh') }}
-                </a-button>
-              </a-tooltip>
+              <a-button
+                :loading="loading"
+                style="margin-bottom: 5px"
+                shape="round"
+                size="small"
+                icon="reload"
+                @click="fetchData()">
+                {{ $t('label.refresh') }}
+              </a-button>
               <a-tooltip placement="right">
                 <template slot="title">
                   {{ $t('label.filterby') }}
@@ -971,7 +966,7 @@ export default {
 .breadcrumb-card {
   margin-left: -24px;
   margin-right: -24px;
-  margin-top: -18px;
+  margin-top: -16px;
   margin-bottom: 12px;
 }
 
@@ -983,8 +978,4 @@ export default {
 .ant-breadcrumb {
   vertical-align: text-bottom;
 }
-
-.ant-breadcrumb .anticon {
-  margin-left: 8px;
-}
 </style>

ui/src/views/compute/InstanceHardware.vue

@@ -75,7 +75,7 @@
                 <div class="label">{{ $t('label.physicalsize') }}</div>
                 <div>{{ (item.physicalsize / (1024 * 1024 * 1024.0)).toFixed(4) }} GB</div>
               </div>
-              <div class="attribute">
+              <div class="attribute" v-if="item.storage">
                 <div class="label">{{ $t('label.storagepool') }}</div>
                 <div>{{ item.storage }} ({{ item.storagetype }})</div>
               </div>

ui/src/views/dashboard/CapacityDashboard.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-row class="capacity-dashboard" :gutter="12">
-    <a-col :xl="18">
+    <a-col :xl="16">
       <div class="capacity-dashboard-wrapper">
         <div class="capacity-dashboard-select">
           <a-select
@@ -48,11 +48,12 @@
         <a-col
           :xs="12"
           :sm="8"
-          :md="6"
+          :md="8"
           :style="{ marginBottom: '12px' }"
           v-for="stat in stats"
           :key="stat.type">
           <chart-card :loading="loading">
+            <router-link :to="{ path: '/zone/' + zoneSelected.id }">
             <div class="capacity-dashboard-chart-card-inner">
               <h3>{{ $t(ts[stat.name]) }}</h3>
               <a-progress
@@ -63,18 +64,19 @@
                 :strokeColor="getStrokeColour(parseFloat(stat.percentused))"
                 :width="100" />
             </div>
+            </router-link>
             <template slot="footer"><center>{{ displayData(stat.name, stat.capacityused) }} / {{ displayData(stat.name, stat.capacitytotal) }}</center></template>
           </chart-card>
         </a-col>
       </a-row>
     </a-col>
 
-    <a-col :xl="6">
+    <a-col :xl="8">
       <chart-card>
         <div style="text-align: center">
           <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper">
             <template slot="title">
-              View Hosts in Alert State
+              {{ $t('label.view') + ' ' + $t('label.host.alerts') }}
             </template>
             <a-button type="danger" shape="circle">
               <router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
@@ -84,7 +86,7 @@
           </a-tooltip>
           <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper">
             <template slot="title">
-              View Alerts
+              {{ $t('label.view') + ' ' + $t('label.alerts') }}
             </template>
             <a-button shape="circle">
               <router-link :to="{ name: 'alert' }">
@@ -94,7 +96,7 @@
           </a-tooltip>
           <a-tooltip placement="bottom" class="capacity-dashboard-button-wrapper">
             <template slot="title">
-              View Events
+            {{ $t('label.view') + ' ' + $t('label.events') }}
             </template>
             <a-button shape="circle">
               <router-link :to="{ name: 'event' }">
@@ -227,7 +229,7 @@ export default {
     listEvents () {
       const params = {
         page: 1,
-        pagesize: 6,
+        pagesize: 7,
         listall: true
       }
       this.loading = true

ui/src/views/dashboard/UsageDashboard.vue

@@ -60,7 +60,11 @@
       :xl="8">
       <chart-card>
         <div class="usage-dashboard-chart-card-inner">
-          <a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
+          <a-button>
+            <router-link :to="{ name: 'event' }">
+              {{ $t('label.view') + ' ' + $t('label.events') }}
+            </router-link>
+          </a-button>
         </div>
         <template slot="footer">
           <div class="usage-dashboard-chart-footer">
@@ -139,6 +143,11 @@ export default {
     },
     resource (newData, oldData) {
       this.project = newData
+    },
+    '$i18n.locale' (to, from) {
+      if (to !== from) {
+        this.fetchData()
+      }
     }
   },
   methods: {
@@ -149,21 +158,21 @@ export default {
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.splice(0, 1, { name: 'Running VMs', count: count, path: 'vm' })
+        this.stats.splice(0, 1, { name: this.$t('label.running'), 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.splice(1, 1, { name: 'Stopped VMs', count: count, path: 'vm' })
+        this.stats.splice(1, 1, { name: this.$t('label.stopped'), count: count, path: 'vm' })
       })
       api('listVirtualMachines', { listall: true }).then(json => {
         var count = 0
         if (json && json.listvirtualmachinesresponse) {
           count = json.listvirtualmachinesresponse.count
         }
-        this.stats.splice(2, 1, { name: 'Total VMs', count: count, path: 'vm' })
+        this.stats.splice(2, 1, { name: this.$t('label.total.vms'), count: count, path: 'vm' })
       })
       api('listVolumes', { listall: true }).then(json => {
         var count = 0
@@ -184,7 +193,7 @@ export default {
         if (json && json.listpublicipaddressesresponse) {
           count = json.listpublicipaddressesresponse.count
         }
-        this.stats.splice(5, 1, { name: 'Public IP Addresses', count: count, path: 'publicip' })
+        this.stats.splice(5, 1, { name: this.$t('label.public.ip.addresses'), count: count, path: 'publicip' })
       })
       this.listEvents()
     },

ui/src/views/infra/InfraSummary.vue

@@ -315,8 +315,8 @@ export default {
 <style lang="scss" scoped>
 
   .breadcrumb-card {
-    margin-left: -36px;
-    margin-right: -36px;
+    margin-left: -24px;
+    margin-right: -24px;
     margin-top: -16px;
     margin-bottom: 12px;
   }