WebUI: add udp pages

pkg/api/handler_overview.go

@@ -32,6 +32,7 @@ type features struct {
 type overview struct {
 	HTTP      schemeOverview `json:"http"`
 	TCP       schemeOverview `json:"tcp"`
+	UDP       schemeOverview `json:"udp"`
 	Features  features       `json:"features,omitempty"`
 	Providers []string       `json:"providers,omitempty"`
 }
@@ -47,6 +48,10 @@ func (h Handler) getOverview(rw http.ResponseWriter, request *http.Request) {
 			Routers:  getTCPRouterSection(h.runtimeConfiguration.TCPRouters),
 			Services: getTCPServiceSection(h.runtimeConfiguration.TCPServices),
 		},
+		UDP: schemeOverview{
+			Routers:  getUDPRouterSection(h.runtimeConfiguration.UDPRouters),
+			Services: getUDPServiceSection(h.runtimeConfiguration.UDPServices),
+		},
 		Features:  getFeatures(h.staticConfig),
 		Providers: getProviders(h.staticConfig),
 	}
@@ -155,6 +160,44 @@ func getTCPServiceSection(services map[string]*runtime.TCPServiceInfo) *section
 	}
 }
 
+func getUDPRouterSection(routers map[string]*runtime.UDPRouterInfo) *section {
+	var countErrors int
+	var countWarnings int
+	for _, rt := range routers {
+		switch rt.Status {
+		case runtime.StatusDisabled:
+			countErrors++
+		case runtime.StatusWarning:
+			countWarnings++
+		}
+	}
+
+	return &section{
+		Total:    len(routers),
+		Warnings: countWarnings,
+		Errors:   countErrors,
+	}
+}
+
+func getUDPServiceSection(services map[string]*runtime.UDPServiceInfo) *section {
+	var countErrors int
+	var countWarnings int
+	for _, svc := range services {
+		switch svc.Status {
+		case runtime.StatusDisabled:
+			countErrors++
+		case runtime.StatusWarning:
+			countWarnings++
+		}
+	}
+
+	return &section{
+		Total:    len(services),
+		Warnings: countWarnings,
+		Errors:   countErrors,
+	}
+}
+
 func getProviders(conf static.Configuration) []string {
 	if conf.Providers == nil {
 		return nil

pkg/api/testdata/overview-dynamic.json

@@ -32,5 +32,17 @@
 			"total": 3,
 			"warnings": 1
 		}
+	},
+	"udp": {
+		"routers": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		},
+		"services": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		}
 	}
 }

pkg/api/testdata/overview-empty.json

@@ -32,5 +32,17 @@
 			"total": 0,
 			"warnings": 0
 		}
+	},
+	"udp": {
+		"routers": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		},
+		"services": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		}
 	}
 }

pkg/api/testdata/overview-features.json

@@ -32,5 +32,17 @@
 			"total": 0,
 			"warnings": 0
 		}
+	},
+	"udp": {
+		"routers": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		},
+		"services": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		}
 	}
 }

pkg/api/testdata/overview-providers.json

@@ -41,5 +41,17 @@
 			"total": 0,
 			"warnings": 0
 		}
+	},
+	"udp": {
+		"routers": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		},
+		"services": {
+			"errors": 0,
+			"total": 0,
+			"warnings": 0
+		}
 	}
 }

webui/src/_mixins/GetTableProps.js

@@ -100,6 +100,7 @@ const columnsByResource = {
     'tls',
     'provider'
   ],
+  udpRouters: ['status', 'entryPoints', 'name', 'service', 'provider'],
   services: ['status', 'name', 'type', 'servers', 'provider'],
   middlewares: ['status', 'name', 'type', 'provider']
 }
@@ -111,12 +112,18 @@ const propsByType = {
   'tcp-routers': {
     columns: columnsByResource.routers
   },
+  'udp-routers': {
+    columns: columnsByResource.udpRouters
+  },
   'http-services': {
     columns: columnsByResource.services
   },
   'tcp-services': {
     columns: columnsByResource.services
   },
+  'udp-services': {
+    columns: columnsByResource.services
+  },
   'http-middlewares': {
     columns: columnsByResource.middlewares
   }

webui/src/_services/TcpService.js

@@ -8,7 +8,7 @@ function getAllRouters (params) {
     .then(response => {
       const { data = [], headers } = response
       const total = getTotal(headers, params)
-      console.log('Success -> HttpService -> getAllRouters', response.data)
+      console.log('Success -> TcpService -> getAllRouters', response.data)
       return { data, total }
     })
 }
@@ -16,7 +16,7 @@ function getAllRouters (params) {
 function getRouterByName (name) {
   return APP.api.get(`${apiBase}/routers/${name}`)
     .then(body => {
-      console.log('Success -> HttpService -> getRouterByName', body.data)
+      console.log('Success -> TcpService -> getRouterByName', body.data)
       return body.data
     })
 }
@@ -26,7 +26,7 @@ function getAllServices (params) {
     .then(response => {
       const { data = [], headers } = response
       const total = getTotal(headers, params)
-      console.log('Success -> HttpService -> getAllServices', response.data)
+      console.log('Success -> TcpService -> getAllServices', response.data)
       return { data, total }
     })
 }
@@ -34,7 +34,7 @@ function getAllServices (params) {
 function getServiceByName (name) {
   return APP.api.get(`${apiBase}/services/${name}`)
     .then(body => {
-      console.log('Success -> HttpService -> getServiceByName', body.data)
+      console.log('Success -> TcpService -> getServiceByName', body.data)
       return body.data
     })
 }

webui/src/_services/UdpService.js

@@ -0,0 +1,47 @@
+import { APP } from '../_helpers/APP'
+import { getTotal } from './utils'
+
+const apiBase = '/udp'
+
+function getAllRouters (params) {
+  return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
+    .then(response => {
+      const { data = [], headers } = response
+      const total = getTotal(headers, params)
+      console.log('Success -> UdpService -> getAllRouters', response.data)
+      return { data, total }
+    })
+}
+
+function getRouterByName (name) {
+  return APP.api.get(`${apiBase}/routers/${name}`)
+    .then(body => {
+      console.log('Success -> UdpService -> getRouterByName', body.data)
+      return body.data
+    })
+}
+
+function getAllServices (params) {
+  return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
+    .then(response => {
+      const { data = [], headers } = response
+      const total = getTotal(headers, params)
+      console.log('Success -> UdpService -> getAllServices', response.data)
+      return { data, total }
+    })
+}
+
+function getServiceByName (name) {
+  return APP.api.get(`${apiBase}/services/${name}`)
+    .then(body => {
+      console.log('Success -> UdpService -> getServiceByName', body.data)
+      return body.data
+    })
+}
+
+export default {
+  getAllRouters,
+  getRouterByName,
+  getAllServices,
+  getServiceByName
+}

webui/src/components/_commons/NavBar.vue

@@ -10,6 +10,7 @@
             <q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
             <q-route-tab to="/http" icon="eva-globe-outline" no-caps label="HTTP" />
             <q-route-tab to="/tcp" icon="eva-globe-2-outline" no-caps label="TCP" />
+            <q-route-tab to="/udp" icon="eva-globe-2-outline" no-caps label="UDP" />
           </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" />

webui/src/components/_commons/PanelServers.vue

@@ -3,7 +3,7 @@
     <q-scroll-area :thumb-style="appThumbStyle" style="height:100%;">
       <q-card-section>
         <div class="row items-start no-wrap">
-          <div class="col-3">
+          <div class="col-3" v-if="showStatus">
             <div class="text-subtitle2 text-table">Status</div>
           </div>
           <div class="col-9">
@@ -15,7 +15,7 @@
       <div v-for="(server, index) in data.loadBalancer.servers" :key="index">
         <q-card-section>
           <div class="row items-center no-wrap">
-            <div class="col-3">
+            <div class="col-3" v-if="showStatus">
               <div class="block-right-text">
                 <avatar-state v-if="data.serverStatus" :state="data.serverStatus[server.url || server.address] | status "/>
                 <avatar-state v-if="!data.serverStatus" :state="'DOWN' | status"/>
@@ -41,13 +41,16 @@ import AvatarState from './AvatarState'
 
 export default {
   name: 'PanelServers',
-  props: ['data', 'dense'],
+  props: ['data', 'dense', 'hasStatus'],
   components: {
     AvatarState
   },
   computed: {
     isDense () {
       return this.dense !== undefined
+    },
+    showStatus () {
+      return this.hasStatus !== undefined
     }
   },
   filters: {

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>

webui/src/router/routes.js

@@ -158,6 +158,65 @@ const routes = [
         }
       }
     ]
+  },
+  {
+    path: '/udp',
+    redirect: '/udp/routers',
+    component: LayoutDefault,
+    children: [
+      {
+        path: 'routers',
+        name: 'udpRouters',
+        components: {
+          default: () => import('pages/udp/Routers.vue'),
+          NavBar: () => import('components/_commons/ToolBar.vue')
+        },
+        props: { default: true, NavBar: true },
+        meta: {
+          protocol: 'udp',
+          title: 'TCP Routers'
+        }
+      },
+      {
+        path: 'routers/:name',
+        name: 'udpRouterDetail',
+        components: {
+          default: () => import('pages/_commons/RouterDetail.vue'),
+          NavBar: () => import('components/_commons/ToolBar.vue')
+        },
+        props: { default: true, NavBar: true },
+        meta: {
+          protocol: 'udp',
+          title: 'TCP Router Detail'
+        }
+      },
+      {
+        path: 'services',
+        name: 'udpServices',
+        components: {
+          default: () => import('pages/udp/Services.vue'),
+          NavBar: () => import('components/_commons/ToolBar.vue')
+        },
+        props: { default: true, NavBar: true },
+        meta: {
+          protocol: 'udp',
+          title: 'TCP Services'
+        }
+      },
+      {
+        path: 'services/:name',
+        name: 'udpServiceDetail',
+        components: {
+          default: () => import('pages/_commons/ServiceDetail.vue'),
+          NavBar: () => import('components/_commons/ToolBar.vue')
+        },
+        props: { default: true, NavBar: true },
+        meta: {
+          protocol: 'udp',
+          title: 'TCP Service Detail'
+        }
+      }
+    ]
   }
 ]
 

webui/src/store/index.js

@@ -5,6 +5,7 @@ import core from './core'
 import entrypoints from './entrypoints'
 import http from './http'
 import tcp from './tcp'
+import udp from './udp'
 
 Vue.use(Vuex)
 
@@ -19,7 +20,8 @@ export default function (/* { ssrContext } */) {
       core,
       entrypoints,
       http,
-      tcp
+      tcp,
+      udp
     },
 
     // enable strict mode (adds overhead!)

webui/src/store/udp/actions.js

@@ -0,0 +1,53 @@
+import UdpService from '../../_services/UdpService'
+
+export function getAllRouters ({ commit }, params) {
+  commit('getAllRoutersRequest')
+  return UdpService.getAllRouters(params)
+    .then(body => {
+      commit('getAllRoutersSuccess', { body, ...params })
+      return body
+    })
+    .catch(error => {
+      commit('getAllRoutersFailure', error)
+      return Promise.reject(error)
+    })
+}
+
+export function getRouterByName ({ commit }, name) {
+  commit('getRouterByNameRequest')
+  return UdpService.getRouterByName(name)
+    .then(body => {
+      commit('getRouterByNameSuccess', body)
+      return body
+    })
+    .catch(error => {
+      commit('getRouterByNameFailure', error)
+      return Promise.reject(error)
+    })
+}
+
+export function getAllServices ({ commit }, params) {
+  commit('getAllServicesRequest')
+  return UdpService.getAllServices(params)
+    .then(body => {
+      commit('getAllServicesSuccess', { body, ...params })
+      return body
+    })
+    .catch(error => {
+      commit('getAllServicesFailure', error)
+      return Promise.reject(error)
+    })
+}
+
+export function getServiceByName ({ commit }, name) {
+  commit('getServiceByNameRequest')
+  return UdpService.getServiceByName(name)
+    .then(body => {
+      commit('getServiceByNameSuccess', body)
+      return body
+    })
+    .catch(error => {
+      commit('getServiceByNameFailure', error)
+      return Promise.reject(error)
+    })
+}

webui/src/store/udp/getters.js

@@ -0,0 +1,27 @@
+// ----------------------------
+// all Routers
+// ----------------------------
+export function allRouters (state) {
+  return state.allRouters
+}
+
+// ----------------------------
+// Router by Name
+// ----------------------------
+export function routerByName (state) {
+  return state.routerByName
+}
+
+// ----------------------------
+// all Services
+// ----------------------------
+export function allServices (state) {
+  return state.allServices
+}
+
+// ----------------------------
+// Service by Name
+// ----------------------------
+export function serviceByName (state) {
+  return state.serviceByName
+}

webui/src/store/udp/index.js

@@ -0,0 +1,12 @@
+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  getters,
+  mutations,
+  actions,
+  state
+}

webui/src/store/udp/mutations.js

@@ -0,0 +1,105 @@
+import { withPagination } from '../../_helpers/Mutations'
+
+// ----------------------------
+// Get All Routers
+// ----------------------------
+export function getAllRoutersRequest (state) {
+  withPagination('request', { statePath: 'allRouters' })(state)
+}
+
+export function getAllRoutersSuccess (state, data) {
+  const { query = '', status = '' } = data
+  const currentState = state.allRouters
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allRouters = {
+    ...state.allRouters,
+    currentQuery: query,
+    currentStatus: status
+  }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allRouters'
+  })(state, data)
+}
+
+export function getAllRoutersFailure (state, error) {
+  withPagination('failure', { statePath: 'allRouters' })(state, error)
+}
+
+export function getAllRoutersClear (state) {
+  state.allRouters = {}
+}
+
+// ----------------------------
+// Get Router By Name
+// ----------------------------
+export function getRouterByNameRequest (state) {
+  state.routerByName.loading = true
+}
+
+export function getRouterByNameSuccess (state, body) {
+  state.routerByName = { item: body, loading: false }
+}
+
+export function getRouterByNameFailure (state, error) {
+  state.routerByName = { error }
+}
+
+export function getRouterByNameClear (state) {
+  state.routerByName = {}
+}
+
+// ----------------------------
+// Get All Services
+// ----------------------------
+export function getAllServicesRequest (state) {
+  withPagination('request', { statePath: 'allServices' })(state)
+}
+
+export function getAllServicesSuccess (state, data) {
+  const { query = '', status = '' } = data
+  const currentState = state.allServices
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allServices = {
+    ...state.allServices,
+    currentQuery: query,
+    currentStatus: status
+  }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allServices'
+  })(state, data)
+}
+
+export function getAllServicesFailure (state, error) {
+  withPagination('failure', { statePath: 'allServices' })(state, error)
+}
+
+export function getAllServicesClear (state) {
+  state.allServices = {}
+}
+
+// ----------------------------
+// Get Service By Name
+// ----------------------------
+export function getServiceByNameRequest (state) {
+  state.serviceByName.loading = true
+}
+
+export function getServiceByNameSuccess (state, body) {
+  state.serviceByName = { item: body, loading: false }
+}
+
+export function getServiceByNameFailure (state, error) {
+  state.serviceByName = { error }
+}
+
+export function getServiceByNameClear (state) {
+  state.serviceByName = {}
+}

webui/src/store/udp/mutations.spec.js

@@ -0,0 +1,197 @@
+import { expect } from 'chai'
+import store from './index.js'
+
+const {
+  getAllRoutersRequest,
+  getAllRoutersSuccess,
+  getAllRoutersFailure,
+  getAllServicesRequest,
+  getAllServicesSuccess,
+  getAllServicesFailure
+} = store.mutations
+
+describe('udp mutations', function () {
+  /* Routers */
+  describe('udp routers mutations', function () {
+    it('getAllRoutersRequest', function () {
+      const state = {
+        allRouters: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllRoutersRequest(state)
+
+      expect(state.allRouters.loading).to.equal(true)
+      expect(state.allRouters.items.length).to.equal(3)
+    })
+
+    it('getAllRoutersSuccess page 1', function () {
+      const state = {
+        allRouters: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllRoutersSuccess(state, data)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.total).to.equal(3)
+      expect(state.allRouters.items.length).to.equal(3)
+      expect(state.allRouters.currentPage).to.equal(1)
+      expect(state.allRouters.currentQuery).to.equal('test query')
+      expect(state.allRouters.currentStatus).to.equal('warning')
+    })
+
+    it('getAllRoutersSuccess page 2', function () {
+      const state = {
+        allRouters: {
+          loading: false,
+          items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          total: 3,
+          currentPage: 1,
+          currentQuery: 'test query',
+          currentStatus: 'warning'
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
+          total: 4
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 2
+      }
+
+      getAllRoutersSuccess(state, data)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.total).to.equal(7)
+      expect(state.allRouters.items.length).to.equal(7)
+      expect(state.allRouters.currentPage).to.equal(2)
+      expect(state.allRouters.currentQuery).to.equal('test query')
+      expect(state.allRouters.currentStatus).to.equal('warning')
+    })
+
+    it('getAllRoutersFailing', function () {
+      const state = {
+        allRouters: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllRoutersFailure(state, error)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.endReached).to.equal(true)
+      expect(state.allRouters.items.length).to.equal(3)
+    })
+  })
+
+  /* Services */
+  describe('udp services mutations', function () {
+    it('getAllServicesRequest', function () {
+      const state = {
+        allServices: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllServicesRequest(state)
+
+      expect(state.allServices.loading).to.equal(true)
+      expect(state.allServices.items.length).to.equal(3)
+    })
+
+    it('getAllServicesSuccess page 1', function () {
+      const state = {
+        allServices: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllServicesSuccess(state, data)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.total).to.equal(3)
+      expect(state.allServices.items.length).to.equal(3)
+      expect(state.allServices.currentPage).to.equal(1)
+      expect(state.allServices.currentQuery).to.equal('test query')
+      expect(state.allServices.currentStatus).to.equal('warning')
+    })
+
+    it('getAllServicesSuccess page 2', function () {
+      const state = {
+        allServices: {
+          loading: false,
+          items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          total: 3,
+          currentPage: 1,
+          currentQuery: 'test query',
+          currentStatus: 'warning'
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
+          total: 4
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 2
+      }
+
+      getAllServicesSuccess(state, data)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.total).to.equal(7)
+      expect(state.allServices.items.length).to.equal(7)
+      expect(state.allServices.currentPage).to.equal(2)
+      expect(state.allServices.currentQuery).to.equal('test query')
+      expect(state.allServices.currentStatus).to.equal('warning')
+    })
+
+    it('getAllServicesFailing', function () {
+      const state = {
+        allServices: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllServicesFailure(state, error)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.endReached).to.equal(true)
+      expect(state.allServices.items.length).to.equal(3)
+    })
+  })
+})

webui/src/store/udp/state.js

@@ -0,0 +1,6 @@
+export default {
+  allRouters: {},
+  routerByName: {},
+  allServices: {},
+  serviceByName: {}
+}