Add a new dashboard page.

webui/src/components/_commons/AvatarState.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-avatar :color="state" text-color="white">
+    <q-icon v-if="state === 'positive'" name="eva-checkmark-circle-2" />
+    <q-icon v-if="state === 'warning'" name="eva-alert-circle" />
+    <q-icon v-if="state === 'negative'" name="eva-alert-triangle" />
+  </q-avatar>
+</template>
+
+<script>
+export default {
+  name: 'AvatarState',
+  props: ['state']
+}
+</script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
+
+  .q-avatar{
+    font-size: 32px;
+    border-radius: 4px;
+    .q-icon {
+      font-size: 22px;
+      margin: 0 0 0 1px;
+    }
+  }
+</style>

webui/src/components/_commons/ChartDoughnut.vue

@@ -0,0 +1,30 @@
+<script>
+import { Doughnut } from 'vue-chartjs'
+
+export default {
+  extends: Doughnut,
+  props: {
+    chartdata: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: null
+    }
+  },
+  watch: {
+    chartdata: function (newData, oldData) {
+      // TODO - bug, 'update()' not update the chart, remplace for renderChart()
+      // console.log('new data from watcher...', newData, oldData, this.$_.isEqual(newData.datasets[0].data, oldData.datasets[0].data))
+      if (!this.$_.isEqual(newData.datasets[0].data, oldData.datasets[0].data)) {
+        // this.$data._chart.update()
+        this.renderChart(this.chartdata, this.options)
+      }
+    }
+  },
+  mounted () {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+</script>

webui/src/components/_commons/NavBar.vue

@@ -0,0 +1,97 @@
+<template>
+  <q-header class="shadow-1">
+    <section class="app-section bg-primary text-white">
+      <div class="app-section-wrap app-boxed app-boxed-xl">
+        <q-toolbar class="row no-wrap items-center">
+          <div class="q-pr-md logo">
+            <img alt="logo" src="~assets/logo.svg">
+          </div>
+          <q-tabs align="left" inline-label indicator-color="transparent" active-color="white" stretch>
+            <q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
+          </q-tabs>
+          <q-space />
+          <q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
+          <q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="`${name} ${version}`" class="btn-menu" />
+        </q-toolbar>
+      </div>
+    </section>
+
+    <section class="app-section bg-white text-black">
+      <div class="app-section-wrap app-boxed app-boxed-xl">
+        <slot />
+      </div>
+    </section>
+  </q-header>
+</template>
+
+<script>
+import config from '../../../package'
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'NavBar',
+  data () {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters('core', { coreVersion: 'version' }),
+    version () {
+      return this.coreVersion.Version
+    },
+    parsedVersion () {
+      if (this.version === undefined) {
+        return 'master'
+      }
+      if (this.version === 'dev') {
+        return 'master'
+      }
+      const matches = this.version.match(/^(v?\d+\.\d+)/)
+      return matches ? 'v' + matches[1] : 'master'
+    },
+    name () {
+      return config.productName
+    }
+  },
+  methods: {
+    ...mapActions('core', { getVersion: 'getVersion' })
+  },
+  created () {
+    this.getVersion()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  @import "../../css/sass/variables";
+
+  .q-toolbar {
+    min-height: 64px;
+  }
+
+  .logo {
+    display: inline-block;
+    img {
+      height: 24px;
+    }
+  }
+
+  .q-tabs {
+    color: rgba( $app-text-white, .4 );
+    /deep/ .q-tabs__content {
+      .q-tab__content{
+        min-width: 100%;
+        .q-tab__label {
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  .btn-menu{
+    color: rgba( $app-text-white, .4 );
+    font-size: 16px;
+    font-weight: 600;
+  }
+</style>

webui/src/components/_commons/PageDefault.vue

@@ -0,0 +1,15 @@
+<template>
+  <q-page>
+    <slot/>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageDefault'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

webui/src/components/_commons/SkeletonBox.vue

@@ -0,0 +1,72 @@
+<template>
+  <span
+    :style="{ height, width: computedWidth }"
+    v-bind:class="['SkeletonBox']"
+  />
+</template>
+
+<script>
+export default {
+  name: `SkeletonBox`,
+  props: {
+    maxWidth: {
+      default: 100,
+      type: Number
+    },
+    minWidth: {
+      default: 80,
+      type: Number
+    },
+    height: {
+      default: `2em`,
+      type: String
+    },
+    width: {
+      default: null,
+      type: String
+    }
+  },
+  computed: {
+    computedWidth () {
+      return this.width || `${Math.floor((Math.random() * (this.maxWidth - this.minWidth)) + this.minWidth)}%`
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .SkeletonBox {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    overflow: hidden;
+    background-color: #E0E0E0;
+    border-radius: 4px;
+    &.dark{
+      background-color: #9E9E9E;
+    }
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      will-change: transform;
+      transform: translateX(-100%) translateZ(0);
+      background-image: linear-gradient(
+          90deg,
+          rgba(#fff, 0) 0,
+          rgba(#fff, 0.2) 20%,
+          rgba(#fff, 0.5) 60%,
+          rgba(#fff, 0)
+      );
+      // TODO - fix high cpu usage
+      // animation: shimmer 5s infinite;
+      content: '';
+    }
+    @keyframes shimmer {
+      from { transform: translateX(-100%) translateZ(0); }
+      to { transform: translateX(100%) translateZ(0); }
+    }
+  }
+</style>