Add more pages in the WebUI

webui/src/components/_commons/ToolBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <q-toolbar class="row no-wrap items-center">
+    <q-tabs align="left" inline-label indicator-color="transparent" stretch>
+      <q-route-tab :to="`/${protocol}/routers`" no-caps :label="`${protocolLabel} Routers`">
+        <q-badge v-if="routerTotal !== 0" align="middle" :label="routerTotal" class="q-ml-sm"/>
+      </q-route-tab>
+      <q-route-tab :to="`/${protocol}/services`" no-caps :label="`${protocolLabel} Services`">
+        <q-badge v-if="servicesTotal !== 0" align="middle" :label="servicesTotal" class="q-ml-sm"/>
+      </q-route-tab>
+      <q-route-tab v-if="protocol === 'http'" :to="`/${protocol}/middlewares`" no-caps :label="`${protocolLabel} Middlewares`">
+        <q-badge v-if="middlewaresTotal !== 0" align="middle" :label="middlewaresTotal" class="q-ml-sm"/>
+      </q-route-tab>
+    </q-tabs>
+  </q-toolbar>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'ToolBar',
+  data () {
+    return {
+      loadingOverview: true
+    }
+  },
+  computed: {
+    ...mapGetters('core', { overviewAll: 'allOverview' }),
+    protocol () {
+      return this.$route.meta.protocol
+    },
+    protocolLabel () {
+      return this.protocol.toUpperCase()
+    },
+    routerTotal () {
+      const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
+      return (data && data.routers && data.routers.total) || 0
+    },
+    servicesTotal () {
+      const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
+      return (data && data.services && data.services.total) || 0
+    },
+    middlewaresTotal () {
+      const data = this.overviewAll.items && this.overviewAll.items[`${this.protocol}`]
+      return (data && data.middlewares && data.middlewares.total) || 0
+    }
+  },
+  methods: {
+    ...mapActions('core', { getOverview: 'getOverview' }),
+    refreshAll () {
+      this.onGetAll()
+    },
+    onGetAll () {
+      this.getOverview()
+        .then(body => {
+          console.log('Success -> toolbar/overview', body)
+          if (!body) {
+            this.loadingOverview = false
+          }
+        })
+        .catch(error => {
+          console.log('Error -> toolbar/overview', error)
+        })
+    }
+  },
+  created () {
+    this.refreshAll()
+  },
+  beforeDestroy () {
+    this.$store.commit('core/getOverviewClear')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
+
+  .q-toolbar {
+    min-height: 48px;
+    padding: 0;
+  }
+
+  .q-tabs {
+    /deep/ .q-tabs__content {
+      .q-tab__label {
+        color: $app-text-grey;
+        font-size: 16px;
+        font-weight: 700;
+      }
+      .q-badge {
+        font-size: 13px;
+        font-weight: 700;
+        border-radius: 12px;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        min-width: 30px;
+        padding: 6px;
+        color: $app-text-grey;
+        background-color: rgba( $app-text-grey, .1 );
+      }
+      .q-tab--active {
+        .q-tab__label {
+          color: $accent;
+        }
+        .q-badge {
+          color: $accent;
+          background-color: rgba( $accent, .1 );
+        }
+      }
+    }
+  }
+</style>