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,15 +8,15 @@ 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 }
     })
 }
 
 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,15 +26,15 @@ 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 }
     })
 }
 
 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>