views: add infra summary dashboard

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

ui/src/config/section/infra.js

@@ -13,6 +13,13 @@ export default {
   icon: 'bank',
   permission: [ 'listInfrastructure' ],
   children: [
+    {
+      name: 'infrasummary',
+      title: 'Summary',
+      icon: 'read',
+      permission: [ 'listInfrastructure' ],
+      component: () => import('@/views/infra/InfraSummary.vue')
+    },
     zones,
     pods,
     clusters,

ui/src/views/infra/InfraSummary.vue

@@ -0,0 +1,131 @@
+<template>
+  <a-row :gutter="24" style="margin: 6px">
+    <a-col
+      :md="6"
+      :style="{ marginBottom: '12px', marginTop: '12px' }"
+      v-for="(section, index) in sections"
+      v-if="routes[section]"
+      :key="index">
+      <chart-card :loading="loading">
+        <div class="capacity-dashboard-chart-card-inner">
+          <h2>{{ $t(routes[section].title) }}</h2>
+          <h1><a-icon :type="routes[section].icon" /> {{ stats[section] }}</h1>
+        </div>
+        <template slot="footer">
+          <center>
+            <router-link :to="{ name: section.substring(0, section.length - 1) }">
+              <a-button style="margin-bottom: 3px">View {{ $t(routes[section].title) }}</a-button>
+            </router-link>
+          </center>
+        </template>
+      </chart-card>
+    </a-col>
+    <!-- move refresh and ssl cert setup somewhere more friendly -->
+    <a-col
+      :md="6"
+      :style="{ marginBottom: '12px', marginTop: '12px' }">
+      <a-card>
+        <a-button
+          style="margin-right: 20px"
+          icon="safety-certificate">
+          {{ $t('SSL Certificate')}}
+        </a-button>
+        <a-button
+          @click="fetchData()"
+          :loading="loading"
+          type="primary"
+          icon="reload">
+          {{ $t('Refresh') }}
+        </a-button>
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+import { api } from '@/api'
+import router from '@/router'
+
+import ChartCard from '@/components/chart/ChartCard'
+
+export default {
+  name: 'InfraSummary',
+  components: {
+    ChartCard
+  },
+  data () {
+    return {
+      loading: true,
+      sections: ['zones', 'pods', 'clusters', 'hosts', 'storagepools', 'imagestores', 'systemvms', 'routers', 'cpusockets', 'managementservers'],
+      routes: {},
+      stats: {}
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.routes = {}
+      for (const section of this.sections) {
+        const node = router.resolve({ name: section.substring(0, section.length - 1) })
+        this.routes[section] = {
+          title: node.route.meta.title,
+          icon: node.route.meta.icon
+        }
+      }
+      this.listInfra()
+    },
+    listInfra () {
+      this.loading = true
+      api('listInfrastructure').then(json => {
+        this.stats = []
+        if (json && json.listinfrastructureresponse && json.listinfrastructureresponse.infrastructure) {
+          this.stats = json.listinfrastructureresponse.infrastructure
+        }
+      }).finally(f => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.capacity-dashboard {
+  &-wrapper {
+    display: flex;
+    margin-bottom: 12px;
+  }
+
+  &-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 {
+    width: auto;
+    padding-left: 12px;
+  }
+
+  &-button-icon {
+    font-size: 16px;
+    padding: 2px;
+  }
+
+  &-footer {
+    padding-top: 12px;
+    padding-left: 3px;
+    white-space: normal;
+  }
+}
+</style>