dashboard improvements (#27)

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

* Fix navigation scroll behavior

Signed-off-by: Rohit Yadav <[email protected]>

Author: M. Weber

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 {

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

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,31 +23,31 @@
               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
             </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-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;
+  }
+
+  &-select {
+    width: 100%; // for flexbox causes
+
+    .ant-select {
+      width: 100%; // to fill flex item width
+    }
   }
 
-  &__button {
+  &-button {
     width: auto;
     padding-left: 12px;
   }
+
+  &-button-icon {
+    font-size: 16px;
+    padding: 2px;
+  }
+
+  &-footer {
+    padding-top: 12px;
+    padding-left: 3px;
+    white-space: normal;
+  }
 }
 </style>

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,15 +150,25 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .user-dashboard {
+  .usage-dashboard {
     margin-top: 24px;
 
+    &-chart-tile {
+      margin-bottom: 12px;
+    }
+
     &-chart-card {
       padding-top: 24px;
     }
 
     &-chart-card-inner {
       text-align: center;
     }
+
+    &-footer {
+       padding-top: 12px;
+       padding-left: 3px;
+       white-space: normal;
+    }
   }
 </style>