Add TCP Middlewares support

webui/src/_mixins/GetTableProps.js

@@ -126,6 +126,9 @@ const propsByType = {
   },
   'http-middlewares': {
     columns: columnsByResource.middlewares
+  },
+  'tcp-middlewares': {
+    columns: columnsByResource.middlewares
   }
 }
 

webui/src/_services/TcpService.js

@@ -39,9 +39,29 @@ function getServiceByName (name) {
     })
 }
 
+function getAllMiddlewares (params) {
+  return APP.api.get(`${apiBase}/middlewares?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 -> TcpService -> getAllMiddlewares', response.data)
+      return { data, total }
+    })
+}
+
+function getMiddlewareByName (name) {
+  return APP.api.get(`${apiBase}/middlewares/${name}`)
+    .then(body => {
+      console.log('Success -> TcpService -> getMiddlewareByName', body.data)
+      return body.data
+    })
+}
+
 export default {
   getAllRouters,
   getRouterByName,
   getAllServices,
-  getServiceByName
+  getServiceByName,
+  getAllMiddlewares,
+  getMiddlewareByName
 }

webui/src/components/_commons/MainTable.vue

@@ -12,7 +12,7 @@
             </th>
           </tr>
         </thead>
-        <tfoot v-if="!data.length">
+        <tfoot v-if="!data || !data.length">
           <tr>
             <td colspan="100%">
               <q-icon name="warning" style="font-size: 1.5rem"/> No data available

webui/src/components/_commons/PanelTLS.vue

@@ -21,7 +21,7 @@
           </div>
         </div>
       </q-card-section>
-      <q-card-section v-if="protocol == 'tcp'">
+      <q-card-section v-if="protocol === 'tcp'">
         <div class="row items-start no-wrap">
           <div class="col">
             <div class="text-subtitle2">PASSTHROUGH</div>

webui/src/components/_commons/ToolBar.vue

@@ -7,7 +7,7 @@
       <q-route-tab :to="`/${protocol}/services`" no-caps :label="`${protocolLabel} Services`">
         <q-badge v-if="servicesTotal !== 0" align="middle" :label="servicesTotal" class="q-ml-sm"/>
       </q-route-tab>
-      <q-route-tab v-if="protocol === 'http'" :to="`/${protocol}/middlewares`" no-caps :label="`${protocolLabel} Middlewares`">
+      <q-route-tab v-if="protocol !== 'udp'" :to="`/${protocol}/middlewares`" no-caps :label="`${protocolLabel} Middlewares`">
         <q-badge v-if="middlewaresTotal !== 0" align="middle" :label="middlewaresTotal" class="q-ml-sm"/>
       </q-route-tab>
     </q-tabs>

webui/src/pages/_commons/MiddlewareDetail.vue

@@ -96,6 +96,7 @@ export default {
   },
   computed: {
     ...mapGetters('http', { http_middlewareByName: 'middlewareByName' }),
+    ...mapGetters('tcp', { tcp_middlewareByName: 'middlewareByName' }),
     protocol () {
       return this.$route.meta.protocol
     },
@@ -111,6 +112,7 @@ export default {
   },
   methods: {
     ...mapActions('http', { http_getMiddlewareByName: 'getMiddlewareByName', http_getRouterByName: 'getRouterByName' }),
+    ...mapActions('tcp', { tcp_getMiddlewareByName: 'getMiddlewareByName', tcp_getRouterByName: 'getRouterByName' }),
     refreshAll () {
       if (this.middlewareByName.loading) {
         return
@@ -160,6 +162,7 @@ export default {
   beforeDestroy () {
     clearInterval(this.timeOutGetAll)
     this.$store.commit('http/getMiddlewareByNameClear')
+    this.$store.commit('tcp/getMiddlewareByNameClear')
   }
 }
 </script>

webui/src/pages/_commons/RouterDetail.vue

@@ -125,7 +125,7 @@
             </div>
           </div>
 
-          <div class="col-12 col-md-4 q-mb-lg path-block" v-if="protocol === 'http'">
+          <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-layers"></q-icon>
               <div class="app-title-label">Middlewares</div>
@@ -194,7 +194,7 @@ export default {
     ...mapGetters('tcp', { tcp_routerByName: 'routerByName' }),
     ...mapGetters('udp', { udp_routerByName: 'routerByName' }),
     hasMiddlewares () {
-      return this.$route.meta.protocol === 'http' && this.middlewares.length > 0
+      return this.$route.meta.protocol !== 'udp' && this.middlewares.length > 0
     },
     protocol () {
       return this.$route.meta.protocol
@@ -204,11 +204,14 @@ export default {
     },
     getRouterByName () {
       return this[`${this.protocol}_getRouterByName`]
+    },
+    getMiddlewareByName () {
+      return this[`${this.protocol}_getMiddlewareByName`]
     }
   },
   methods: {
-    ...mapActions('http', { http_getRouterByName: 'getRouterByName', getMiddlewareByName: 'getMiddlewareByName' }),
-    ...mapActions('tcp', { tcp_getRouterByName: 'getRouterByName' }),
+    ...mapActions('http', { http_getRouterByName: 'getRouterByName', http_getMiddlewareByName: 'getMiddlewareByName' }),
+    ...mapActions('tcp', { tcp_getRouterByName: 'getRouterByName', tcp_getMiddlewareByName: 'getMiddlewareByName' }),
     ...mapActions('udp', { udp_getRouterByName: 'getRouterByName' }),
     ...mapActions('entrypoints', { getEntrypointsByName: 'getByName' }),
     refreshAll () {

webui/src/pages/tcp/Middlewares.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: 'tcp-middlewares' })"
+              :data="allMiddlewares.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allMiddlewares.endReached"
+              :loading="allMiddlewares.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: 'PageTCPMiddlewares',
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllMiddlewaresWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
+  components: {
+    PageDefault,
+    ToolBarTable,
+    MainTable
+  },
+  data () {
+    return {
+      filter: '',
+      status: ''
+    }
+  },
+  computed: {
+    ...mapGetters('tcp', { allMiddlewares: 'allMiddlewares' })
+  },
+  methods: {
+    ...mapActions('tcp', { getAllMiddlewares: 'getAllMiddlewares' }),
+    getAllMiddlewaresWithParams (params) {
+      return this.getAllMiddlewares({
+        query: this.filter,
+        status: this.status,
+        ...params
+      })
+    },
+    refreshAll () {
+      if (this.allMiddlewares.loading) {
+        return
+      }
+
+      this.initFetch()
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      return this.fetchMore({ page })
+    }
+  },
+  watch: {
+    'status' () {
+      this.refreshAll()
+    },
+    'filter' () {
+      this.refreshAll()
+    }
+  },
+  beforeDestroy () {
+    this.$store.commit('tcp/getAllMiddlewaresClear')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

webui/src/pages/tcp/Routers.vue

@@ -85,7 +85,7 @@ export default {
     }
   },
   beforeDestroy () {
-    this.$store.commit('http/getAllRoutersClear')
+    this.$store.commit('tcp/getAllRoutersClear')
   }
 }
 </script>

webui/src/pages/tcp/Services.vue

@@ -85,7 +85,7 @@ export default {
     }
   },
   beforeDestroy () {
-    this.$store.commit('http/getAllServicesClear')
+    this.$store.commit('tcp/getAllServicesClear')
   }
 }
 </script>

webui/src/pages/udp/Routers.vue

@@ -84,7 +84,7 @@ export default {
     }
   },
   beforeDestroy () {
-    this.$store.commit('http/getAllRoutersClear')
+    this.$store.commit('udp/getAllRoutersClear')
   }
 }
 </script>

webui/src/pages/udp/Services.vue

@@ -85,7 +85,7 @@ export default {
     }
   },
   beforeDestroy () {
-    this.$store.commit('http/getAllServicesClear')
+    this.$store.commit('udp/getAllServicesClear')
   }
 }
 </script>

webui/src/router/routes.js

@@ -156,6 +156,32 @@ const routes = [
           protocol: 'tcp',
           title: 'TCP Service Detail'
         }
+      },
+      {
+        path: 'middlewares',
+        name: 'tcpMiddlewares',
+        components: {
+          default: () => import('pages/tcp/Middlewares.vue'),
+          NavBar: () => import('components/_commons/ToolBar.vue')
+        },
+        props: { default: true, NavBar: true },
+        meta: {
+          protocol: 'tcp',
+          title: 'TCP Middlewares'
+        }
+      },
+      {
+        path: 'middlewares/:name',
+        name: 'tcpMiddlewareDetail',
+        components: {
+          default: () => import('pages/_commons/MiddlewareDetail.vue'),
+          NavBar: () => import('components/_commons/ToolBar.vue')
+        },
+        props: { default: true, NavBar: true },
+        meta: {
+          protocol: 'tcp',
+          title: 'TCP Middleware Detail'
+        }
       }
     ]
   },

webui/src/store/tcp/actions.js

@@ -51,3 +51,29 @@ export function getServiceByName ({ commit }, name) {
       return Promise.reject(error)
     })
 }
+
+export function getAllMiddlewares ({ commit }, params) {
+  commit('getAllMiddlewaresRequest')
+  return TcpService.getAllMiddlewares(params)
+    .then(body => {
+      commit('getAllMiddlewaresSuccess', { body, ...params })
+      return body
+    })
+    .catch(error => {
+      commit('getAllMiddlewaresFailure', error)
+      return Promise.reject(error)
+    })
+}
+
+export function getMiddlewareByName ({ commit }, name) {
+  commit('getMiddlewareByNameRequest')
+  return TcpService.getMiddlewareByName(name)
+    .then(body => {
+      commit('getMiddlewareByNameSuccess', body)
+      return body
+    })
+    .catch(error => {
+      commit('getMiddlewareByNameFailure', error)
+      return Promise.reject(error)
+    })
+}

webui/src/store/tcp/getters.js

@@ -25,3 +25,17 @@ export function allServices (state) {
 export function serviceByName (state) {
   return state.serviceByName
 }
+
+// ----------------------------
+// all Middlewares
+// ----------------------------
+export function allMiddlewares (state) {
+  return state.allMiddlewares
+}
+
+// ----------------------------
+// Middleware by Name
+// ----------------------------
+export function middlewareByName (state) {
+  return state.middlewareByName
+}

webui/src/store/tcp/mutations.js

@@ -103,3 +103,55 @@ export function getServiceByNameFailure (state, error) {
 export function getServiceByNameClear (state) {
   state.serviceByName = {}
 }
+
+// ----------------------------
+// Get All Middlewares
+// ----------------------------
+export function getAllMiddlewaresRequest (state) {
+  withPagination('request', { statePath: 'allMiddlewares' })(state)
+}
+
+export function getAllMiddlewaresSuccess (state, data) {
+  const { query = '', status = '' } = data
+  const currentState = state.allMiddlewares
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allMiddlewares = {
+    ...state.allMiddlewares,
+    currentQuery: query,
+    currentStatus: status
+  }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allMiddlewares'
+  })(state, data)
+}
+
+export function getAllMiddlewaresFailure (state, error) {
+  withPagination('failure', { statePath: 'allMiddlewares' })(state, error)
+}
+
+export function getAllMiddlewaresClear (state) {
+  state.allMiddlewares = {}
+}
+
+// ----------------------------
+// Get Middleware By Name
+// ----------------------------
+export function getMiddlewareByNameRequest (state) {
+  state.middlewareByName.loading = true
+}
+
+export function getMiddlewareByNameSuccess (state, body) {
+  state.middlewareByName = { item: body, loading: false }
+}
+
+export function getMiddlewareByNameFailure (state, error) {
+  state.middlewareByName = { error }
+}
+
+export function getMiddlewareByNameClear (state) {
+  state.middlewareByName = {}
+}

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

@@ -7,7 +7,10 @@ const {
   getAllRoutersFailure,
   getAllServicesRequest,
   getAllServicesSuccess,
-  getAllServicesFailure
+  getAllServicesFailure,
+  getAllMiddlewaresRequest,
+  getAllMiddlewaresSuccess,
+  getAllMiddlewaresFailure
 } = store.mutations
 
 describe('tcp mutations', function () {
@@ -194,4 +197,96 @@ describe('tcp mutations', function () {
       expect(state.allServices.items.length).to.equal(3)
     })
   })
+
+  /* Middlewares */
+  describe('tcp middlewares mutations', function () {
+    it('getAllMiddlewaresRequest', function () {
+      const state = {
+        allMiddlewares: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllMiddlewaresRequest(state)
+
+      expect(state.allMiddlewares.loading).to.equal(true)
+      expect(state.allMiddlewares.items.length).to.equal(3)
+    })
+
+    it('getAllMiddlewaresSuccess page 1', function () {
+      const state = {
+        allMiddlewares: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllMiddlewaresSuccess(state, data)
+
+      expect(state.allMiddlewares.loading).to.equal(false)
+      expect(state.allMiddlewares.total).to.equal(3)
+      expect(state.allMiddlewares.items.length).to.equal(3)
+      expect(state.allMiddlewares.currentPage).to.equal(1)
+      expect(state.allMiddlewares.currentQuery).to.equal('test query')
+      expect(state.allMiddlewares.currentStatus).to.equal('warning')
+    })
+
+    it('getAllMiddlewaresSuccess page 2', function () {
+      const state = {
+        allMiddlewares: {
+          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
+      }
+
+      getAllMiddlewaresSuccess(state, data)
+
+      expect(state.allMiddlewares.loading).to.equal(false)
+      expect(state.allMiddlewares.total).to.equal(7)
+      expect(state.allMiddlewares.items.length).to.equal(7)
+      expect(state.allMiddlewares.currentPage).to.equal(2)
+      expect(state.allMiddlewares.currentQuery).to.equal('test query')
+      expect(state.allMiddlewares.currentStatus).to.equal('warning')
+    })
+
+    it('getAllMiddlewaresFailing', function () {
+      const state = {
+        allMiddlewares: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllMiddlewaresFailure(state, error)
+
+      expect(state.allMiddlewares.loading).to.equal(false)
+      expect(state.allMiddlewares.endReached).to.equal(true)
+      expect(state.allMiddlewares.items.length).to.equal(3)
+    })
+  })
 })

webui/src/store/tcp/state.js

@@ -2,5 +2,7 @@ export default {
   allRouters: {},
   routerByName: {},
   allServices: {},
-  serviceByName: {}
+  serviceByName: {},
+  allMiddlewares: {},
+  middlewareByName: {}
 }