icon and adjustments

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

ui/src/assets/README.md

@@ -0,0 +1 @@
+Attribution: The icons were taken from https://www.iconfinder.com/iconsets/cat-force

ui/src/config/router.config.js

@@ -602,7 +602,7 @@ export const asyncRouterMap = [
         name: 'exception',
         component: RouteView,
         hidden: true,
-        redirect: '/exception/403',
+        redirect: '/exception/404',
         meta: { title: 'Exception', icon: 'warning' },
         children: [
           {

ui/src/views/dashboard/CapacityDashboard.vue

@@ -2,43 +2,62 @@
   <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-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="6" :style="{ marginBottom: '24px' }">
-        <a-button
-          type="primary"
-          @click="listCapacity(zoneSelected, true)">Fetch Latest Statistics</a-button>
-      </a-col>
-    </a-row>
+        <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-row :gutter="24">
-      <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">
+        <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>
+      <a-col :xl="6">
+        <chart-card style="margin-bottom: 24px">
           <div style="text-align: center">
-            <h4>{{ stat.name }}</h4>
-            <a-progress type="dashboard" :percent="parseFloat(stat.percentused, 10)" :width="100" />
+            <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>
-          <template slot="footer"><span>{{ stat.capacityused }} / {{ stat.capacitytotal }}</span></template>
         </chart-card>
       </a-col>
     </a-row>
-
   </div>
 </template>
 

ui/src/views/exception/ExceptionPage.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="exception">
-    <div class="img">
-      <img :src="config[type].img"/>
+    <div class="img" v-if="type == '403'">
+      <img src="@/assets/403.png"/>
+    </div>
+    <div class="img" v-if="type == '404'">
+      <img src="@/assets/404.png"/>
+    </div>
+    <div class="img" v-if="type == '500'">
+      <img src="@/assets/500.png"/>
     </div>
     <div class="content">
       <h1>{{ config[type].title }}</h1>
@@ -49,8 +55,8 @@ export default {
       padding-right: 52px;
       zoom: 1;
       img {
-        height: 360px;
-        max-width: 430px;
+        height: 256px;
+        max-width: 256px;
       }
     }
     .content {

ui/src/views/exception/type.js

@@ -1,16 +1,13 @@
 const types = {
   403: {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
     title: '403',
     desc: 'Access Forbidden.'
   },
   404: {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
     title: '404',
     desc: 'Not Found.'
   },
   500: {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
     title: '500',
     desc: 'Internal Server Error.'
   }