WebUI: add udp pages

webui/src/pages/_commons/RouterDetail.vue

@@ -109,7 +109,7 @@
             </div>
           </div>
 
-          <div class="col-12 col-md-4 q-mb-lg path-block">
+          <div class="col-12 col-md-4 q-mb-lg path-block" v-if="protocol !== 'udp'">
             <div class="row no-wrap items-center q-mb-lg app-title">
               <q-icon name="eva-shield"></q-icon>
               <div class="app-title-label">TLS</div>
@@ -192,6 +192,7 @@ export default {
     },
     ...mapGetters('http', { http_routerByName: 'routerByName' }),
     ...mapGetters('tcp', { tcp_routerByName: 'routerByName' }),
+    ...mapGetters('udp', { udp_routerByName: 'routerByName' }),
     hasMiddlewares () {
       return this.$route.meta.protocol === 'http' && this.middlewares.length > 0
     },
@@ -208,6 +209,7 @@ export default {
   methods: {
     ...mapActions('http', { http_getRouterByName: 'getRouterByName', getMiddlewareByName: 'getMiddlewareByName' }),
     ...mapActions('tcp', { tcp_getRouterByName: 'getRouterByName' }),
+    ...mapActions('udp', { udp_getRouterByName: 'getRouterByName' }),
     ...mapActions('entrypoints', { getEntrypointsByName: 'getByName' }),
     refreshAll () {
       if (this.routerByName.loading) {
@@ -274,6 +276,7 @@ export default {
     clearInterval(this.timeOutGetAll)
     this.$store.commit('http/getRouterByNameClear')
     this.$store.commit('tcp/getRouterByNameClear')
+    this.$store.commit('udp/getRouterByNameClear')
   }
 }
 </script>

webui/src/pages/_commons/ServiceDetail.vue

@@ -54,7 +54,7 @@
               <div class="col-12">
                 <div class="row items-start q-col-gutter-md">
                   <div class="col-12">
-                    <panel-servers dense :data="serviceByName.item"/>
+                    <panel-servers dense :data="serviceByName.item" :hasStatus="serviceByName.item.serverStatus"/>
                   </div>
                 </div>
               </div>
@@ -173,6 +173,7 @@ export default {
   computed: {
     ...mapGetters('http', { http_serviceByName: 'serviceByName' }),
     ...mapGetters('tcp', { tcp_serviceByName: 'serviceByName' }),
+    ...mapGetters('udp', { udp_serviceByName: 'serviceByName' }),
     protocol () {
       return this.$route.meta.protocol
     },
@@ -189,6 +190,7 @@ export default {
   methods: {
     ...mapActions('http', { http_getServiceByName: 'getServiceByName', http_getRouterByName: 'getRouterByName' }),
     ...mapActions('tcp', { tcp_getServiceByName: 'getServiceByName', tcp_getRouterByName: 'getRouterByName' }),
+    ...mapActions('udp', { udp_getServiceByName: 'getServiceByName', udp_getRouterByName: 'getRouterByName' }),
     refreshAll () {
       if (this.serviceByName.loading) {
         return
@@ -238,6 +240,8 @@ export default {
   beforeDestroy () {
     clearInterval(this.timeOutGetAll)
     this.$store.commit('http/getServiceByNameClear')
+    this.$store.commit('tcp/getServiceByNameClear')
+    this.$store.commit('udp/getServiceByNameClear')
   }
 }
 </script>

webui/src/pages/dashboard/Index.vue

@@ -70,6 +70,29 @@
       </div>
     </section>
 
+    <section class="app-section">
+      <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
+        <div class="row no-wrap items-center q-mb-lg app-title">
+          <q-icon name="eva-globe-3"></q-icon>
+          <div class="app-title-label">UDP</div>
+        </div>
+        <div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
+          <div
+            v-for="(overviewUDP, index) in allUDP" :key="index"
+            class="col-12 col-sm-6 col-md-4">
+            <panel-chart :name="index" :data="overviewUDP" type="udp"/>
+          </div>
+        </div>
+        <div v-else class="row items-center q-col-gutter-lg">
+          <div class="col-12 col-sm-6 col-md-4">
+            <p v-for="n in 6" :key="n" class="flex">
+              <SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <section class="app-section">
       <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
         <div class="row no-wrap items-center q-mb-lg app-title">
@@ -157,6 +180,9 @@ export default {
     allTCP () {
       return this.overviewAll.items.tcp
     },
+    allUDP () {
+      return this.overviewAll.items.udp
+    },
     allFeatures () {
       return this.overviewAll.items.features
     },

webui/src/pages/udp/Routers.vue

@@ -0,0 +1,94 @@
+<template>
+  <page-default>
+    <section class="app-section">
+      <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl">
+        <div class="row no-wrap items-center q-mb-lg">
+          <tool-bar-table :status.sync="status" :filter.sync="filter"/>
+        </div>
+        <div class="row items-center q-col-gutter-lg">
+          <div class="col-12">
+            <main-table
+              ref="mainTable"
+              v-bind="getTableProps({ type: 'udp-routers' })"
+              :data="allRouters.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allRouters.endReached"
+              :loading="allRouters.loading"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+  </page-default>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
+import PaginationMixin from '../../_mixins/Pagination'
+import PageDefault from '../../components/_commons/PageDefault'
+import ToolBarTable from '../../components/_commons/ToolBarTable'
+import MainTable from '../../components/_commons/MainTable'
+
+export default {
+  name: 'PageUDPRouters',
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllRoutersWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
+  components: {
+    PageDefault,
+    ToolBarTable,
+    MainTable
+  },
+  data () {
+    return {
+      filter: '',
+      status: ''
+    }
+  },
+  computed: {
+    ...mapGetters('udp', { allRouters: 'allRouters' })
+  },
+  methods: {
+    ...mapActions('udp', { getAllRouters: 'getAllRouters' }),
+    getAllRoutersWithParams (params) {
+      return this.getAllRouters({
+        query: this.filter,
+        status: this.status,
+        ...params
+      })
+    },
+    refreshAll () {
+      if (this.allRouters.loading) {
+        return
+      }
+
+      this.initFetch()
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      return this.fetchMore({ page })
+    }
+  },
+  watch: {
+    'status' () {
+      this.refreshAll()
+    },
+    'filter' () {
+      this.refreshAll()
+    }
+  },
+  beforeDestroy () {
+    this.$store.commit('http/getAllRoutersClear')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

webui/src/pages/udp/Services.vue

@@ -0,0 +1,95 @@
+<template>
+  <page-default>
+
+    <section class="app-section">
+      <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl">
+        <div class="row no-wrap items-center q-mb-lg">
+          <tool-bar-table :status.sync="status" :filter.sync="filter"/>
+        </div>
+        <div class="row items-center q-col-gutter-lg">
+          <div class="col-12">
+            <main-table
+              ref="mainTable"
+              v-bind="getTableProps({ type: 'udp-services' })"
+              :data="allServices.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allServices.endReached"
+              :loading="allServices.loading"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+  </page-default>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
+import PaginationMixin from '../../_mixins/Pagination'
+import PageDefault from '../../components/_commons/PageDefault'
+import ToolBarTable from '../../components/_commons/ToolBarTable'
+import MainTable from '../../components/_commons/MainTable'
+
+export default {
+  name: 'PageUDPServices',
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllServicesWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
+  components: {
+    PageDefault,
+    ToolBarTable,
+    MainTable
+  },
+  data () {
+    return {
+      filter: '',
+      status: ''
+    }
+  },
+  computed: {
+    ...mapGetters('udp', { allServices: 'allServices' })
+  },
+  methods: {
+    ...mapActions('udp', { getAllServices: 'getAllServices' }),
+    getAllServicesWithParams (params) {
+      return this.getAllServices({
+        query: this.filter,
+        status: this.status,
+        ...params
+      })
+    },
+    refreshAll () {
+      if (this.allServices.loading) {
+        return
+      }
+
+      this.initFetch()
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      return this.fetchMore({ page })
+    }
+  },
+  watch: {
+    'status' () {
+      this.refreshAll()
+    },
+    'filter' () {
+      this.refreshAll()
+    }
+  },
+  beforeDestroy () {
+    this.$store.commit('http/getAllServicesClear')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>