From f71ed859641f18703ed062659325fe6d0359a284 Mon Sep 17 00:00:00 2001
From: "M. Weber" <m.weber@ewerk.com>
Date: Wed, 14 Aug 2019 15:10:45 +0200
Subject: [PATCH] dashboard improvements (#27)

* Add new grid values new classes to replace inline stlyes with it

* Fix navigation scroll behavior

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/menu/SideMenu.vue          |   2 +-
 ui/src/style/README.md                       |   8 ++
 ui/src/views/dashboard/CapacityDashboard.vue |  62 ++++++++----
 ui/src/views/dashboard/UsageDashboard.vue    | 101 ++++++++++---------
 4 files changed, 106 insertions(+), 67 deletions(-)

diff --git a/ui/src/components/menu/SideMenu.vue b/ui/src/components/menu/SideMenu.vue
index b4aed5024bf..716fdb54d62 100644
--- a/ui/src/components/menu/SideMenu.vue
+++ b/ui/src/components/menu/SideMenu.vue
@@ -67,7 +67,7 @@ export default {
   z-index: 10;
   height: auto;
 
-  .ant-layout-sider-children {
+  /deep/ .ant-layout-sider-children {
     overflow-y: hidden;
 
     &:hover {
diff --git a/ui/src/style/README.md b/ui/src/style/README.md
index 4f4b7a4b0de..d60ceb3425f 100644
--- a/ui/src/style/README.md
+++ b/ui/src/style/README.md
@@ -37,3 +37,11 @@
     - repeatly used elements like buttons, inputs
 7. components
     - complex elements like dropdown, forms, table, search (usualy include this to components/FooterToolbar/ folder)
+
+
+# The "/deep/" combinator
+- use the /deep/ combinator (or in other versions ">>>") helps us to exclude "scoped" rules into global
+- e.g. <style scoped> .a .b .c {}</style> will scope a generated data ID like .a .b .c[data-abcde] {}
+- but  <style scoped> .a /deep/ .b .c {} </style> will scope .a[data-abcde] .b .c {}
+- so everything after deep will be outside the defined scope
+- watch this article for technical information. https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
diff --git a/ui/src/views/dashboard/CapacityDashboard.vue b/ui/src/views/dashboard/CapacityDashboard.vue
index 29d912097a6..1f19cf627be 100644
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@@ -1,21 +1,20 @@
 <template>
-  <a-row :gutter="12" :style="{ marginTop: '24px' }">
+  <a-row class="capacity-dashboard" :gutter="24">
     <a-col :xl="18">
-      <div class="ant-pro-capacity-dashboard__wrapper">
-        <div class="ant-pro-capacity-dashboard__select">
+      <div class="capacity-dashboard-wrapper">
+        <div class="capacity-dashboard-select">
           <a-select
             showSearch
             optionFilterProp="children"
             :defaultValue="zoneSelected.name"
             :value="zoneSelected.name"
-            @change="changeZone"
-            style="width: 100%" >
+            @change="changeZone">
             <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">
+        <div class="capacity-dashboard-button">
           <a-tooltip placement="bottom">
             <template slot="title">
               Fetch Latest
@@ -24,23 +23,23 @@
               type="primary"
               shape="circle"
               @click="listCapacity(zoneSelected, true)">
-              <a-icon style="font-size: 16px; padding: 2px" type="reload" />
+              <a-icon class="capacity-dashboard-button-icon" type="reload" />
             </a-button>
           </a-tooltip>
         </div>
-        <div class="ant-pro-capacity-dashboard__button">
+        <div class="capacity-dashboard-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" />
+                <a-icon class="capacity-dashboard-button-icon" type="flag" />
               </router-link>
             </a-button>
           </a-tooltip>
         </div>
-        <div class="ant-pro-capacity-dashboard__button">
+        <div class="capacity-dashboard-button">
           <a-tooltip placement="bottom">
             <template slot="title">
               View Hosts in Alert State
@@ -48,7 +47,7 @@
             <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-icon class="capacity-dashboard-button-icon" type="desktop" />
                 </a-badge>
               </router-link>
             </a-button>
@@ -57,12 +56,14 @@
       </div>
       <a-row :gutter="12">
         <a-col
-          :xl="6"
+          :xs="12"
+          :sm="8"
+          :md="6"
           :style="{ marginBottom: '12px' }"
           v-for="stat in stats"
           :key="stat.type">
           <chart-card :loading="loading">
-            <div style="text-align: center; white-space: nowrap; overflow: hidden;">
+            <div class="capacity-dashboard-chart-card-inner">
               <h4>{{ stat.name }}</h4>
               <a-progress type="dashboard" :percent="Number(parseFloat(stat.percentused, 10).toFixed(2))" :width="100" />
             </div>
@@ -78,7 +79,7 @@
           <a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
         </div>
         <template slot="footer">
-          <div :style="{ paddingTop: '12px', paddingLeft: '3px', whiteSpace: 'normal' }">
+          <div class="capacity-dashboard-footer">
             <a-timeline pending="...">
               <a-timeline-item
                 v-for="event in events"
@@ -198,19 +199,42 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.ant-pro-capacity-dashboard {
-  &__wrapper {
+.capacity-dashboard {
+  margin-top: 24px;
+
+  &-wrapper {
     display: flex;
     margin-bottom: 12px;
   }
 
-  &__select {
-    width: 100%;
+  &-chart-card-inner {
+     text-align: center;
+     white-space: nowrap;
+     overflow: hidden;
   }
 
-  &__button {
+  &-select {
+    width: 100%; // for flexbox causes
+
+    .ant-select {
+      width: 100%; // to fill flex item width
+    }
+  }
+
+  &-button {
     width: auto;
     padding-left: 12px;
   }
+
+  &-button-icon {
+    font-size: 16px;
+    padding: 2px;
+  }
+
+  &-footer {
+    padding-top: 12px;
+    padding-left: 3px;
+    white-space: normal;
+  }
 }
 </style>
diff --git a/ui/src/views/dashboard/UsageDashboard.vue b/ui/src/views/dashboard/UsageDashboard.vue
index e0aad97f935..20906f27e5c 100644
--- a/ui/src/views/dashboard/UsageDashboard.vue
+++ b/ui/src/views/dashboard/UsageDashboard.vue
@@ -1,51 +1,48 @@
 <template>
-  <div class="page-header-index-wide">
-    <a-row :gutter="12">
-      <a-col
-        class="user-dashboard-chart-card"
-        :xl="16">
-        <a-row :gutter="12">
-          <a-col
-            :xl="8"
-            v-for="stat in stats"
-            :key="stat.type"
-            :style="{ marginBottom: '12px' }">
-            <chart-card class="user-dashboard-chart-card" :loading="loading">
-              <router-link :to="{ name: stat.path }">
-                <div style="text-align: center">
-                  <h4>{{ stat.name }}</h4>
-                  <h1>{{ stat.count == undefined ? 0 : stat.count }}</h1>
-                </div>
-              </router-link>
-            </chart-card>
-          </a-col>
-        </a-row>
-      </a-col>
-      <a-col
-        :xl="8"
-        :style="{ marginTop: '24px' }">
-        <chart-card>
-          <div style="text-align: center">
-            <a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
+  <a-row class="usage-dashboard" :gutter="24">
+    <a-col
+      :xl="16">
+      <a-row :gutter="12">
+        <a-col
+          class="usage-dashboard-chart-tile"
+          :xs="12"
+          :md="8"
+          v-for="stat in stats"
+          :key="stat.type">
+          <chart-card class="usage-dashboard-chart-card" :loading="loading">
+            <router-link :to="{ name: stat.path }">
+              <div class="usage-dashboard-chart-card-inner">
+                <h4>{{ stat.name }}</h4>
+                <h1>{{ stat.count == undefined ? 0 : stat.count }}</h1>
+              </div>
+            </router-link>
+          </chart-card>
+        </a-col>
+      </a-row>
+    </a-col>
+    <a-col
+      :xl="8">
+      <chart-card>
+        <div class="usage-dashboard-chart-card-inner">
+          <a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
+        </div>
+        <template slot="footer">
+          <div class="usage-dashboard-chart-footer">
+            <a-timeline pending="...">
+              <a-timeline-item
+                v-for="event in events"
+                :key="event.id"
+                :color="getEventColour(event)">
+                <span :style="{ color: '#999' }"><small>{{ event.created }}</small></span><br/>
+                <span :style="{ color: '#666' }"><small>{{ event.type }}</small></span><br/>
+                <span :style="{ color: '#aaa' }">({{ event.username }}) {{ event.description }}</span>
+              </a-timeline-item>
+            </a-timeline>
           </div>
-          <template slot="footer">
-            <div :style="{ paddingTop: '12px', paddingLeft: '3px', whiteSpace: 'normal' }">
-              <a-timeline pending="...">
-                <a-timeline-item
-                  v-for="event in events"
-                  :key="event.id"
-                  :color="getEventColour(event)">
-                  <span :style="{ color: '#999' }"><small>{{ event.created }}</small></span><br/>
-                  <span :style="{ color: '#666' }"><small>{{ event.type }}</small></span><br/>
-                  <span :style="{ color: '#aaa' }">({{ event.username }}) {{ event.description }}</span>
-                </a-timeline-item>
-              </a-timeline>
-            </div>
-          </template>
-        </chart-card>
-      </a-col>
-    </a-row>
-  </div>
+        </template>
+      </chart-card>
+    </a-col>
+  </a-row>
 </template>
 
 <script>
@@ -153,9 +150,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .user-dashboard {
+  .usage-dashboard {
     margin-top: 24px;
 
+    &-chart-tile {
+      margin-bottom: 12px;
+    }
+
     &-chart-card {
       padding-top: 24px;
     }
@@ -163,5 +164,11 @@ export default {
     &-chart-card-inner {
       text-align: center;
     }
+
+    &-footer {
+       padding-top: 12px;
+       padding-left: 3px;
+       white-space: normal;
+    }
   }
 </style>