WebUI: add udp pages

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: {