From 33df072505a22d84f4c4b69588073ed99cf044c4 Mon Sep 17 00:00:00 2001
From: "M. Weber" <m.weber@ewerk.com>
Date: Thu, 8 Aug 2019 17:28:03 +0200
Subject: [PATCH] dashboard: fix styling and enhancements (#8)

Refactoring, visual enhancements and extend readme.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/README.md                                  |   2 +
 ui/src/components/page/GlobalLayout.vue       |  27 ++++
 ui/src/components/page/SHeaderNotice.vue      |   3 +-
 ui/src/components/tools/Breadcrumb.vue        |   8 +-
 ui/src/components/tools/HeaderNotice.vue      |  34 +++--
 ui/src/components/tools/TranslationMenu.vue   |   2 +-
 ui/src/components/tools/UserMenu.vue          |  24 ++++
 ui/src/components/tools/setting.js            |   9 +-
 ui/src/config/defaultSettings.js              |   2 +-
 ui/src/core/bootstrap.js                      |   4 +-
 ui/src/store/modules/app.js                   |  14 +-
 ui/src/store/mutation-types.js                |   2 +-
 ui/src/style/README.md                        |  13 +-
 .../ant-overwrite/ant-layout-header.less      |  33 +++++
 ui/src/style/ant-overwrite/ant-progress.less  |   4 +
 ui/src/style/common/common.less               |   4 -
 ui/src/style/component/ant-drawer.less        |  22 ---
 ui/src/style/component/dashboard.less         |  36 +++++
 ui/src/style/frame/header/header-notice.less  |   0
 .../style/frame/header/translation-menu.less  |   4 +
 ui/src/style/frame/user-dropdown.less         |  21 ---
 ui/src/style/index.less                       |  11 +-
 ui/src/style/layout/ant.less                  |   8 +-
 ui/src/style/layout/inverted-mode.less        |   3 +
 ui/src/utils/mixin.js                         |   2 +-
 ui/src/views/dashboard/CapacityDashboard.vue  | 135 +++++++++++-------
 26 files changed, 286 insertions(+), 141 deletions(-)
 create mode 100644 ui/src/style/ant-overwrite/ant-layout-header.less
 create mode 100644 ui/src/style/ant-overwrite/ant-progress.less
 delete mode 100644 ui/src/style/component/ant-drawer.less
 create mode 100644 ui/src/style/component/dashboard.less
 create mode 100644 ui/src/style/frame/header/header-notice.less
 create mode 100644 ui/src/style/frame/header/translation-menu.less
 create mode 100644 ui/src/style/layout/inverted-mode.less

diff --git a/ui/README.md b/ui/README.md
index 75266c37e10..4210fd05168 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -12,6 +12,8 @@ Install tools and dependencies:
 
 Build and run:
 
+    npm start
+    or
     npm run serve
 
 Production Build:
diff --git a/ui/src/components/page/GlobalLayout.vue b/ui/src/components/page/GlobalLayout.vue
index b3a8ce5766b..5d7f08a137d 100644
--- a/ui/src/components/page/GlobalLayout.vue
+++ b/ui/src/components/page/GlobalLayout.vue
@@ -152,3 +152,30 @@ export default {
   }
 }
 </script>
+
+<style lang="less">
+// Todo try to get this rules scoped
+.ant-drawer.drawer-sider {
+  .sider {
+    box-shadow: none;
+  }
+
+  &.dark {
+    .ant-drawer-content {
+      background-color: rgb(0, 21, 41);
+    }
+  }
+
+  &.light {
+    box-shadow: none;
+
+    .ant-drawer-content {
+      background-color: #fff;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 0
+  }
+}
+</style>
diff --git a/ui/src/components/page/SHeaderNotice.vue b/ui/src/components/page/SHeaderNotice.vue
index 9520a324246..ac4087031dc 100644
--- a/ui/src/components/page/SHeaderNotice.vue
+++ b/ui/src/components/page/SHeaderNotice.vue
@@ -48,9 +48,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .header-notice{
+  .header-notice {
     display: inline-block;
     transition: all 0.3s;
+
     span {
       vertical-align: initial;
     }
diff --git a/ui/src/components/tools/Breadcrumb.vue b/ui/src/components/tools/Breadcrumb.vue
index 2965f8cd9c3..1af3d753755 100644
--- a/ui/src/components/tools/Breadcrumb.vue
+++ b/ui/src/components/tools/Breadcrumb.vue
@@ -42,6 +42,10 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="less" scoped>
+  .breadcrumb {
+    .mobile & {
+      display: none;
+    }
+  }
 </style>
diff --git a/ui/src/components/tools/HeaderNotice.vue b/ui/src/components/tools/HeaderNotice.vue
index 66e33f7c419..5021c83eff4 100644
--- a/ui/src/components/tools/HeaderNotice.vue
+++ b/ui/src/components/tools/HeaderNotice.vue
@@ -5,7 +5,7 @@
     placement="bottomRight"
     :autoAdjustOverflow="true"
     :arrowPointAtCenter="true"
-    overlayClassName="header-notice-wrapper"
+    overlayClassName="ant-pro-header-notice__popover"
     :overlayStyle="{ width: '300px', top: '50px' }">
     <template slot="content">
       <a-spin :spinning="loadding">
@@ -38,9 +38,9 @@
         </a-tabs>
       </a-spin>
     </template>
-    <span @click="fetchNotice" class="header-notice">
+    <span @click="fetchNotice" class="ant-pro-header-notice__opener">
       <a-badge count="12">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+        <a-icon class="ant-pro-header-notice__icon" type="bell" />
       </a-badge>
     </span>
   </a-popover>
@@ -71,13 +71,8 @@ export default {
 }
 </script>
 
-<style lang="css">
-  .header-notice-wrapper {
-    top: 50px !important;
-  }
-</style>
 <style lang="less" scoped>
-  .header-notice{
+  .header-notice {
     display: inline-block;
     transition: all 0.3s;
 
@@ -85,4 +80,25 @@ export default {
       vertical-align: initial;
     }
   }
+
+  .ant-pro-header-notice {
+
+    &__popover {
+      top: 50px !important;
+    }
+
+    &__opener {
+      display: inline-block;
+      transition: all 0.3s;
+
+      span {
+        vertical-align: initial;
+      }
+    }
+
+    &__icon {
+      font-size: 18px;
+      padding: 4px;
+    }
+  }
 </style>
diff --git a/ui/src/components/tools/TranslationMenu.vue b/ui/src/components/tools/TranslationMenu.vue
index f66b7e1cf64..d2ca212ecc0 100644
--- a/ui/src/components/tools/TranslationMenu.vue
+++ b/ui/src/components/tools/TranslationMenu.vue
@@ -1,7 +1,7 @@
 <template>
 
   <a-dropdown>
-    <span class="action ant-dropdown-link">
+    <span class="action ant-dropdown-link ant-pro-translation-menu">
       <a-icon type="global"></a-icon>
     </span>
     <a-menu slot="overlay" @click="onClick">
diff --git a/ui/src/components/tools/UserMenu.vue b/ui/src/components/tools/UserMenu.vue
index a068dda597f..09eaacc3a8b 100644
--- a/ui/src/components/tools/UserMenu.vue
+++ b/ui/src/components/tools/UserMenu.vue
@@ -76,3 +76,27 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+  .user-dropdown-menu {
+    span {
+      user-select: none;
+    }
+  }
+
+  .user-dropdown-menu-wrapper.ant-dropdown-menu {
+    padding: 4px 0;
+
+    .ant-dropdown-menu-item {
+      width: 160px;
+    }
+
+    .ant-dropdown-menu-item > .anticon:first-child,
+    .ant-dropdown-menu-item > a > .anticon:first-child,
+    .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+      min-width: 12px;
+      margin-right: 8px;
+    }
+
+  }
+</style>
diff --git a/ui/src/components/tools/setting.js b/ui/src/components/tools/setting.js
index 863aa0e2fbf..fdd592a258f 100644
--- a/ui/src/components/tools/setting.js
+++ b/ui/src/components/tools/setting.js
@@ -87,9 +87,10 @@ const updateTheme = primaryColor => {
   }
 }
 
-const updateColorWeak = colorWeak => {
-  // document.body.className = colorWeak ? 'colorWeak' : '';
-  colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
+const updateInvertedMode = invertedMode => {
+  invertedMode = true;
+  console.log(invertedMode);
+  invertedMode ? document.body.classList.add('layout-inverted-mode') : document.body.classList.remove('layout-inverted-mode')
 }
 
-export { updateTheme, colorList, updateColorWeak }
+export { updateTheme, colorList, updateInvertedMode }
diff --git a/ui/src/config/defaultSettings.js b/ui/src/config/defaultSettings.js
index d32379d8aa4..3e1550f45ba 100644
--- a/ui/src/config/defaultSettings.js
+++ b/ui/src/config/defaultSettings.js
@@ -6,7 +6,7 @@ export default {
   fixedHeader: true, // sticky header
   fixSiderbar: true, // sticky siderbar
   autoHideHeader: false, //  auto hide header
-  colorWeak: false,
+  invertedMode: true,
   multiTab: false, // enable to have tab/route history stuff
   // CloudStack options
   apiBase: '/client/api',
diff --git a/ui/src/core/bootstrap.js b/ui/src/core/bootstrap.js
index e074a647018..6e926aaada9 100644
--- a/ui/src/core/bootstrap.js
+++ b/ui/src/core/bootstrap.js
@@ -6,7 +6,7 @@ import {
   DEFAULT_COLOR,
   DEFAULT_THEME,
   DEFAULT_LAYOUT_MODE,
-  DEFAULT_COLOR_WEAK,
+  DEFAULT_COLOR_INVERTED,
   SIDEBAR_TYPE,
   DEFAULT_FIXED_HEADER,
   DEFAULT_FIXED_HEADER_HIDDEN,
@@ -24,7 +24,7 @@ export default function Initializer () {
   store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
   store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
   store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
-  store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
+  store.commit('TOGGLE_INVERTED', Vue.ls.get(DEFAULT_COLOR_INVERTED, config.invertedMode))
   store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
   store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
   store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
diff --git a/ui/src/store/modules/app.js b/ui/src/store/modules/app.js
index 373a97ebf30..2d0627b920d 100644
--- a/ui/src/store/modules/app.js
+++ b/ui/src/store/modules/app.js
@@ -4,7 +4,7 @@ import {
   DEFAULT_THEME,
   DEFAULT_LAYOUT_MODE,
   DEFAULT_COLOR,
-  DEFAULT_COLOR_WEAK,
+  DEFAULT_COLOR_INVERTED,
   DEFAULT_FIXED_HEADER,
   DEFAULT_FIXED_SIDEMENU,
   DEFAULT_FIXED_HEADER_HIDDEN,
@@ -23,7 +23,7 @@ const app = {
     fixSiderbar: false,
     autoHideHeader: false,
     color: null,
-    weak: false,
+    inverted: true,
     multiTab: true
   },
   mutations: {
@@ -67,9 +67,9 @@ const app = {
       Vue.ls.set(DEFAULT_COLOR, color)
       state.color = color
     },
-    TOGGLE_WEAK: (state, flag) => {
-      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
-      state.weak = flag
+    TOGGLE_INVERTED: (state, flag) => {
+      Vue.ls.set(DEFAULT_COLOR_INVERTED, flag)
+      state.inverted = flag
     },
     TOGGLE_MULTI_TAB: (state, bool) => {
       Vue.ls.set(DEFAULT_MULTI_TAB, bool)
@@ -110,8 +110,8 @@ const app = {
     ToggleColor ({ commit }, color) {
       commit('TOGGLE_COLOR', color)
     },
-    ToggleWeak ({ commit }, weakFlag) {
-      commit('TOGGLE_WEAK', weakFlag)
+    ToggleInverted ({ commit }, invertedFlag) {
+      commit('TOGGLE_INVERTED', invertedFlag)
     },
     ToggleMultiTab ({ commit }, bool) {
       commit('TOGGLE_MULTI_TAB', bool)
diff --git a/ui/src/store/mutation-types.js b/ui/src/store/mutation-types.js
index e0c3bce39d6..6e0c55345d6 100644
--- a/ui/src/store/mutation-types.js
+++ b/ui/src/store/mutation-types.js
@@ -4,7 +4,7 @@ export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
 export const DEFAULT_THEME = 'DEFAULT_THEME'
 export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE'
 export const DEFAULT_COLOR = 'DEFAULT_COLOR'
-export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
+export const DEFAULT_COLOR_INVERTED = 'DEFAULT_COLOR_INVERTED'
 export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
 export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
 export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
diff --git a/ui/src/style/README.md b/ui/src/style/README.md
index 632f07d1f2c..4f4b7a4b0de 100644
--- a/ui/src/style/README.md
+++ b/ui/src/style/README.md
@@ -24,13 +24,16 @@
 2. common
     - include all rules that reset styles, define global stuffs without classes at all
     - e.g. body {} p, ul, li {} h1, h2, h3 {}
-3. frame
+3. ant-overwrite
+    - any styles that overwrites the existin ant rules by any reason
+    - e.g. classes like .ant-layout-header .anticon {}
+4. frame
     - everything that belongs to the frame
     - e.g. header, footer, nav, sider, content (just the actual content frame, not every component in it)
-4. layout
+5. layout
     - rules that modify the page at all if new layout class is set.
     - e.g. #html class="layout-ant-black"#
-5. objects
-    - repeatly used elements like buttons, inputs,
-6. components
+6. objects
+    - repeatly used elements like buttons, inputs
+7. components
     - complex elements like dropdown, forms, table, search (usualy include this to components/FooterToolbar/ folder)
diff --git a/ui/src/style/ant-overwrite/ant-layout-header.less b/ui/src/style/ant-overwrite/ant-layout-header.less
new file mode 100644
index 00000000000..f243144cad8
--- /dev/null
+++ b/ui/src/style/ant-overwrite/ant-layout-header.less
@@ -0,0 +1,33 @@
+.ant-layout-header {
+  .anticon-menu-fold {
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  .ant-breadcrumb .anticon {
+    margin-top: -3px;
+    margin-left: 12px;
+  }
+
+  .anticon-home {
+    font-size: 18px;
+  }
+
+  .anticon {
+    vertical-align: middle;
+  }
+}
+
+.ant-menu {
+
+  .ant-menu-item .anticon,
+  .ant-menu-submenu-title .anticon {
+    font-size: 18px!important; // overwrite ant-menu collaped defaults
+    margin-right: 12px;
+    vertical-align: sub;
+  }
+}
+
+.ant-badge-count {
+  top: -15px;
+}
diff --git a/ui/src/style/ant-overwrite/ant-progress.less b/ui/src/style/ant-overwrite/ant-progress.less
new file mode 100644
index 00000000000..dcbaea32d21
--- /dev/null
+++ b/ui/src/style/ant-overwrite/ant-progress.less
@@ -0,0 +1,4 @@
+.ant-progress-circle .ant-progress-text {
+  font-size: 16px;
+  transform: translateY(-67%); // position text centered to down cut off progress circle
+}
diff --git a/ui/src/style/common/common.less b/ui/src/style/common/common.less
index 5fc25020808..9b0e35d4040 100644
--- a/ui/src/style/common/common.less
+++ b/ui/src/style/common/common.less
@@ -1,7 +1,3 @@
 body {
   overflow-y: scroll;
-
-  &.colorWeak {
-    filter: invert(80%);
-  }
 }
diff --git a/ui/src/style/component/ant-drawer.less b/ui/src/style/component/ant-drawer.less
deleted file mode 100644
index 58180224cb5..00000000000
--- a/ui/src/style/component/ant-drawer.less
+++ /dev/null
@@ -1,22 +0,0 @@
-
-.ant-drawer.drawer-sider {
-  .sider {
-    box-shadow: none;
-  }
-
-  &.dark {
-    .ant-drawer-content {
-      background-color: rgb(0, 21, 41);
-    }
-  }
-  &.light {
-    box-shadow: none;
-    .ant-drawer-content {
-      background-color: #fff;
-    }
-  }
-
-  .ant-drawer-body {
-    padding: 0
-  }
-}
diff --git a/ui/src/style/component/dashboard.less b/ui/src/style/component/dashboard.less
new file mode 100644
index 00000000000..45e01badfbb
--- /dev/null
+++ b/ui/src/style/component/dashboard.less
@@ -0,0 +1,36 @@
+.ant-pro-capacity-dashboard {
+  &__wrapper {
+    display: flex;
+    margin-bottom: 24px;
+    flex-wrap: nowrap;
+
+    .mobile & {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__select {
+    width: 100%;
+    padding: 0 12px;
+
+    .mobile & {
+      margin-bottom: 12px;
+    }
+  }
+
+  &__button {
+    width: auto;
+    padding: 0 12px;
+  }
+
+  &__tile-wrapper:after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+
+  &__alert-wrapper {
+    clear: both;
+    padding: 0 12px;
+  }
+}
diff --git a/ui/src/style/frame/header/header-notice.less b/ui/src/style/frame/header/header-notice.less
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/src/style/frame/header/translation-menu.less b/ui/src/style/frame/header/translation-menu.less
new file mode 100644
index 00000000000..120634a801e
--- /dev/null
+++ b/ui/src/style/frame/header/translation-menu.less
@@ -0,0 +1,4 @@
+.ant-pro-translation-menu {
+  font-size: 18px;
+  line-height: 1;
+}
diff --git a/ui/src/style/frame/user-dropdown.less b/ui/src/style/frame/user-dropdown.less
index 013a357a259..e69de29bb2d 100644
--- a/ui/src/style/frame/user-dropdown.less
+++ b/ui/src/style/frame/user-dropdown.less
@@ -1,21 +0,0 @@
-.user-dropdown-menu {
-  span {
-    user-select: none;
-  }
-}
-
-.user-dropdown-menu-wrapper.ant-dropdown-menu {
-  padding: 4px 0;
-
-  .ant-dropdown-menu-item {
-    width: 160px;
-  }
-
-  .ant-dropdown-menu-item > .anticon:first-child,
-  .ant-dropdown-menu-item > a > .anticon:first-child,
-  .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
-    min-width: 12px;
-    margin-right: 8px;
-  }
-
-}
\ No newline at end of file
diff --git a/ui/src/style/index.less b/ui/src/style/index.less
index 12d7ae8c0e8..64a868c713e 100644
--- a/ui/src/style/index.less
+++ b/ui/src/style/index.less
@@ -3,18 +3,21 @@
 @import "~ant-design-vue/lib/style/core/index";
 
 //* import all  ## custom ##  variables, mixins and styles
+
+
 @import "variables/prefixes";
 
 @import "common/common";
 
-@import "component/ant-drawer";
+@import "layout/ant";
+@import "layout/inverted-mode";
+@import "ant-overwrite/ant-layout-header";
+@import "ant-overwrite/ant-progress";
 
+@import "frame/header/translation-menu";
 @import "frame/content";
 @import "frame/search";
 @import "frame/sider";
 @import "frame/top-menu";
-@import "frame/user-dropdown";
-
-@import "layout/ant";
 
 @import "objects/table";
diff --git a/ui/src/style/layout/ant.less b/ui/src/style/layout/ant.less
index f78e355a2b8..962f0fa91ee 100644
--- a/ui/src/style/layout/ant.less
+++ b/ui/src/style/layout/ant.less
@@ -126,8 +126,10 @@
 
       .action {
         cursor: pointer;
-        padding: 0 12px;
-        display: inline-block;
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        float: left;
         transition: all .3s;
         height: 100%;
         color: rgba(0, 0, 0, 0.65);
@@ -311,4 +313,4 @@
     padding: 0 12px 0 0;
   }
 
-}
\ No newline at end of file
+}
diff --git a/ui/src/style/layout/inverted-mode.less b/ui/src/style/layout/inverted-mode.less
new file mode 100644
index 00000000000..4d7de6e8ab9
--- /dev/null
+++ b/ui/src/style/layout/inverted-mode.less
@@ -0,0 +1,3 @@
+body.layout-inverted-mode {
+  filter: invert(80%);
+}
diff --git a/ui/src/utils/mixin.js b/ui/src/utils/mixin.js
index 217732d27cf..19bfaf3d462 100644
--- a/ui/src/utils/mixin.js
+++ b/ui/src/utils/mixin.js
@@ -11,7 +11,7 @@ const mixin = {
       layoutMode: state => state.app.layout,
       navTheme: state => state.app.theme,
       primaryColor: state => state.app.color,
-      colorWeak: state => state.app.weak,
+      invertedMode: state => state.app.inverted,
       fixedHeader: state => state.app.fixedHeader,
       fixSiderbar: state => state.app.fixSiderbar,
       fixSidebar: state => state.app.fixSiderbar,
diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index 35faa41d440..1aac3c220b8 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -1,61 +1,73 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="24" :style="{ marginTop: '24px' }">
-      <a-col :sm="24" :md="6" :xl="18" :style="{ marginBottom: '24px' }">
-        <a-col :sm="24" :md="6" :xl="20" :style="{ marginBottom: '24px' }">
-          <a-select
-            showSearch
-            optionFilterProp="children"
-            :defaultValue="zoneSelected.name"
-            :value="zoneSelected.name"
-            @change="changeZone"
-            style="width: 100%" >
-            <a-select-option v-for="(zone, index) in zones" :key="index">
-              {{ zone.name }}
-            </a-select-option>
-          </a-select>
-        </a-col>
-        <a-col :sm="24" :md="6" :xl="4" :style="{ marginBottom: '24px' }">
-          <a-button
-            type="primary"
-            @click="listCapacity(zoneSelected, true)">Fetch Latest Statistics</a-button>
-        </a-col>
-
-        <a-col
-          :sm="12"
-          :md="12"
-          :xl="6"
-          :style="{ marginBottom: '28px' }"
-          v-for="stat in stats"
-          :key="stat.type">
-          <chart-card :loading="loading" style="padding-top: 40px">
-            <div style="text-align: center">
-              <h4>{{ stat.name }}</h4>
-              <a-progress type="dashboard" :percent="parseFloat(stat.percentused, 10)" :width="100" />
-            </div>
-            <template slot="footer"><span>{{ stat.capacityused }} / {{ stat.capacitytotal }}</span></template>
-          </chart-card>
-        </a-col>
+      <a-col :sm="24" :md="24" :xl="18" :style="{ marginBottom: '24px' }">
+        <div class="ant-pro-capacity-dashboard__wrapper">
+          <div class="ant-pro-capacity-dashboard__select">
+            <a-select
+              showSearch
+              optionFilterProp="children"
+              :defaultValue="zoneSelected.name"
+              :value="zoneSelected.name"
+              @change="changeZone"
+              style="width: 100%" >
+              <a-select-option v-for="(zone, index) in zones" :key="index">
+                {{ zone.name }}
+              </a-select-option>
+            </a-select>
+          </div>
+          <div class="ant-pro-capacity-dashboard__button">
+            <a-button
+              type="primary"
+              @click="listCapacity(zoneSelected, true)">Fetch Latest Statistics</a-button>
+          </div>
+        </div>
+        <div class="ant-pro-capacity-dashboard__tile-wrapper">
+          <a-col
+            :xs="12"
+            :sm="12"
+            :md="8"
+            :xl="6"
+            :style="{ marginBottom: '28px' }"
+            v-for="stat in stats"
+            :key="stat.type">
+            <chart-card :loading="loading" style="padding-top: 40px">
+              <div style="text-align: center">
+                <h4>{{ stat.name }}</h4>
+                <a-progress type="dashboard" :percent="Number(parseFloat(stat.percentused, 10).toFixed(2))" :width="100" />
+              </div>
+              <template slot="footer"><span>{{ stat.capacityused }} / {{ stat.capacitytotal }}</span></template>
+            </chart-card>
+          </a-col>
+        </div>
       </a-col>
       <a-col :xl="6">
-        <chart-card style="margin-bottom: 24px">
-          <div style="text-align: center">
-            <h4>Alerts</h4>
-            <p>Some event data here...</p>
-          </div>
-        </chart-card>
-        <chart-card style="margin-bottom: 24px">
-          <div style="text-align: center">
-            <h4>Host Alerts</h4>
-            <p>Some event data here...</p>
-          </div>
-        </chart-card>
-        <chart-card style="margin-bottom: 24px">
-          <div style="text-align: center">
-            <h4>Events</h4>
-            <p>Some event data here...</p>
-          </div>
-        </chart-card>
+        <a-row class="ant-pro-capacity-dashboard__alert-wrapper" :gutter="24">
+          <a-col :md="8" :xl="24">
+            <chart-card style="margin-bottom: 24px">
+              <div style="text-align: center">
+                <h4>Alerts</h4>
+                <p>Some event data here...</p>
+              </div>
+            </chart-card>
+          </a-col>
+          <a-col :md="8" :xl="24">
+            <chart-card style="margin-bottom: 24px">
+              <div style="text-align: center">
+                <h4>Host Alerts</h4>
+                <p>Some event data here...</p>
+              </div>
+            </chart-card>
+          </a-col>
+          <a-col :md="8" :xl="24">
+            <chart-card style="margin-bottom: 24px">
+              <div style="text-align: center">
+                <h4>Events</h4>
+                <p>Some event data here...</p>
+              </div>
+            </chart-card>
+          </a-col>
+        </a-row>
       </a-col>
     </a-row>
   </div>
@@ -159,4 +171,21 @@ export default {
       }
     }
   }
+
+  .ant-pro-capacity-dashboard {
+    &__wrapper {
+      display: flex;
+      margin-bottom: 24px;
+    }
+
+    &__select {
+      width: 100%;
+      padding: 0 12px;
+    }
+
+    &__button {
+      width: auto;
+      padding: 0 12px;
+    }
+  }
 </style>