From 3f1484480eb0286b170429d23c67374ccf504dff Mon Sep 17 00:00:00 2001
From: Matthieu Hostache <matthieu.hostache@gmail.com>
Date: Wed, 11 Dec 2019 23:14:04 +0100
Subject: [PATCH] Web UI: Take off logic from generic table component

---
 webui/package-lock.json                       |  49 ++++-
 webui/package.json                            |   3 +
 webui/src/_mixins/GetTableProps.js            | 141 ++++++++++++
 webui/src/components/_commons/Chips.vue       |  17 ++
 webui/src/components/_commons/MainTable.vue   | 203 +++---------------
 .../src/components/_commons/ProviderIcon.vue  |  22 ++
 webui/src/pages/_commons/MiddlewareDetail.vue |  11 +-
 webui/src/pages/_commons/ServiceDetail.vue    |  11 +-
 webui/src/pages/http/Middlewares.vue          |   4 +-
 webui/src/pages/http/Routers.vue              |   4 +-
 webui/src/pages/http/Services.vue             |   4 +-
 webui/src/pages/tcp/Routers.vue               |   4 +-
 webui/src/pages/tcp/Services.vue              |   4 +-
 13 files changed, 287 insertions(+), 190 deletions(-)
 create mode 100644 webui/src/_mixins/GetTableProps.js
 create mode 100644 webui/src/components/_commons/Chips.vue
 create mode 100644 webui/src/components/_commons/ProviderIcon.vue

diff --git a/webui/package-lock.json b/webui/package-lock.json
index 6f75224c1..909e47be8 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -2176,6 +2176,15 @@
             "which": "^2.0.1"
           }
         },
+        "dot-prop": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.1.1.tgz",
+          "integrity": "sha512-QCHI6Lkf+9fJMpwfAFsTvbiSh6ujoPmhCLiDvD/n4dGtLvHfhuBwPdN6z2x4YSOwwtTcLoO/LP70xELWGF/JVA==",
+          "dev": true,
+          "requires": {
+            "is-obj": "^2.0.0"
+          }
+        },
         "emoji-regex": {
           "version": "8.0.0",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -2218,6 +2227,12 @@
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
           "dev": true
         },
+        "is-obj": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+          "dev": true
+        },
         "mimic-fn": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
@@ -5101,10 +5116,9 @@
       }
     },
     "dot-prop": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.1.1.tgz",
-      "integrity": "sha512-QCHI6Lkf+9fJMpwfAFsTvbiSh6ujoPmhCLiDvD/n4dGtLvHfhuBwPdN6z2x4YSOwwtTcLoO/LP70xELWGF/JVA==",
-      "dev": true,
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
+      "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
       "requires": {
         "is-obj": "^2.0.0"
       },
@@ -5112,8 +5126,7 @@
         "is-obj": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
-          "dev": true
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
         }
       }
     },
@@ -5600,6 +5613,15 @@
         }
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.1.tgz",
+      "integrity": "sha512-A+TZuHZ0KU0cnn56/9mfR7/KjUJ9QNVXUhwvRFSR7PGPe0zQR6PTkmyqg1AtUUEOzTqeRsUwyKFh0oVZKVCrtA==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-promise": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz",
@@ -5965,6 +5987,12 @@
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.0.tgz",
@@ -10181,6 +10209,15 @@
       "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
diff --git a/webui/package.json b/webui/package.json
index a959db1c9..9280222b6 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -20,6 +20,7 @@
     "axios": "^0.19.0",
     "bowser": "^2.5.2",
     "chart.js": "^2.8.0",
+    "dot-prop": "5.2.0",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "quasar": "^1.4.4",
@@ -33,8 +34,10 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.10.0",
     "eslint-loader": "^2.1.1",
+    "eslint-plugin-prettier": "3.1.1",
     "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.12.0",
+    "prettier": "1.19.1",
     "sass-loader": "^7.1.0"
   },
   "engines": {
diff --git a/webui/src/_mixins/GetTableProps.js b/webui/src/_mixins/GetTableProps.js
new file mode 100644
index 000000000..a15ddcb28
--- /dev/null
+++ b/webui/src/_mixins/GetTableProps.js
@@ -0,0 +1,141 @@
+import { get } from 'dot-prop'
+import { QChip } from 'quasar'
+import Chips from '../components/_commons/Chips'
+import ProviderIcon from '../components/_commons/ProviderIcon'
+import AvatarState from '../components/_commons/AvatarState'
+import TLSState from '../components/_commons/TLSState'
+
+const allColumns = [
+  {
+    name: 'status',
+    required: true,
+    label: 'Status',
+    align: 'left',
+    fieldToProps: row => ({
+      state: row.status === 'enabled' ? 'positive' : 'negative'
+    }),
+    component: AvatarState
+  },
+  {
+    name: 'tls',
+    align: 'left',
+    label: 'TLS',
+    fieldToProps: row => ({ isTLS: row.tls }),
+    component: TLSState
+  },
+  {
+    name: 'rule',
+    align: 'left',
+    label: 'Rule',
+    component: QChip,
+    fieldToProps: () => ({ class: 'app-chip app-chip-rule', dense: true }),
+    content: row => row.rule
+  },
+  {
+    name: 'entryPoints',
+    align: 'left',
+    label: 'Entrypoints',
+    component: Chips,
+    fieldToProps: row => ({
+      classNames: 'app-chip app-chip-entry-points',
+      dense: true,
+      list: row.entryPoints
+    })
+  },
+  {
+    name: 'name',
+    align: 'left',
+    label: 'Name',
+    component: QChip,
+    fieldToProps: () => ({ class: 'app-chip app-chip-name', dense: true }),
+    content: row => row.name
+  },
+  {
+    name: 'type',
+    align: 'left',
+    label: 'Type',
+    component: QChip,
+    fieldToProps: () => ({
+      class: 'app-chip app-chip-entry-points',
+      dense: true
+    }),
+    content: row => row.type
+  },
+  {
+    name: 'servers',
+    align: 'right',
+    label: 'Servers',
+    fieldToProps: () => ({ class: 'servers-label' }),
+    content: function (value) {
+      if (value.loadBalancer && value.loadBalancer.servers) {
+        return value.loadBalancer.servers.length
+      }
+      return 0
+    }
+  },
+  {
+    name: 'service',
+    align: 'left',
+    label: 'Service',
+    component: QChip,
+    fieldToProps: () => ({ class: 'app-chip app-chip-service', dense: true }),
+    content: row => row.service
+  },
+  {
+    name: 'provider',
+    align: 'center',
+    label: 'Provider',
+    fieldToProps: row => ({ name: row.provider }),
+    component: ProviderIcon
+  }
+]
+
+const columnsByResource = {
+  routers: [
+    'status',
+    'rule',
+    'entryPoints',
+    'name',
+    'service',
+    'tls',
+    'provider'
+  ],
+  services: ['status', 'name', 'type', 'servers', 'provider'],
+  middlewares: ['status', 'name', 'type', 'provider']
+}
+
+const propsByType = {
+  'http-routers': {
+    columns: columnsByResource.routers
+  },
+  'tcp-routers': {
+    columns: columnsByResource.routers
+  },
+  'http-services': {
+    columns: columnsByResource.services
+  },
+  'tcp-services': {
+    columns: columnsByResource.services
+  },
+  'http-middlewares': {
+    columns: columnsByResource.middlewares
+  }
+}
+
+const GetTablePropsMixin = {
+  methods: {
+    getTableProps ({ type }) {
+      return {
+        onRowClick: row =>
+          this.$router.push({
+            path: `/${type.replace('-', '/', 'gi')}/${row.name}`
+          }),
+        columns: allColumns.filter(c =>
+          get(propsByType, `${type}.columns`, []).includes(c.name)
+        )
+      }
+    }
+  }
+}
+
+export default GetTablePropsMixin
diff --git a/webui/src/components/_commons/Chips.vue b/webui/src/components/_commons/Chips.vue
new file mode 100644
index 000000000..2d77d8c25
--- /dev/null
+++ b/webui/src/components/_commons/Chips.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <q-chip
+      v-for="(chip, index) in list"
+      :key="index"
+      :dense="dense"
+      :class="classNames">
+      {{ chip }}
+    </q-chip>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['dense', 'classNames', 'list']
+}
+</script>
diff --git a/webui/src/components/_commons/MainTable.vue b/webui/src/components/_commons/MainTable.vue
index cbf909a04..d84b9bfbb 100644
--- a/webui/src/components/_commons/MainTable.vue
+++ b/webui/src/components/_commons/MainTable.vue
@@ -5,7 +5,7 @@
         <thead>
           <tr class="table-header">
             <th
-              v-for="column in getColumns()"
+              v-for="column in columns"
               v-bind:class="`text-${column.align}`"
               v-bind:key="column.name">
               {{ column.label }}
@@ -20,63 +20,29 @@
           </tr>
         </tfoot>
         <tbody>
-          <tr v-for="row in data" :key="row.name" class="cursor-pointer" @click="$router.push({ path: `/${getPath}/${row.name}`})">
-            <td v-if="hasColumn('status')" v-bind:class="`text-${getColumn('status').align}`">
-              <avatar-state :state="row.status | status "/>
-            </td>
-            <td v-if="hasColumn('tls')" v-bind:class="`text-${getColumn('tls').align}`">
-              <t-l-s-state :is-t-l-s="row.tls"/>
-            </td>
-            <td v-if="hasColumn('rule')" v-bind:class="`text-${getColumn('rule').align}`">
-              <q-chip
-                :v-if="row.rule"
-                dense
-                class="app-chip app-chip-rule">
-                {{ row.rule }}
-              </q-chip>
-            </td>
-            <td v-if="hasColumn('entryPoints')" v-bind:class="`text-${getColumn('entryPoints').align}`">
-              <div v-if="row.using">
-                <q-chip
-                  v-for="(entryPoints, index) in row.using" :key="index"
-                  dense
-                  class="app-chip app-chip-entry-points">
-                  {{ entryPoints }}
-                </q-chip>
-              </div>
-            </td>
-            <td v-if="hasColumn('name')" v-bind:class="`text-${getColumn('name').align}`">
-              <q-chip
-                v-if="row.name"
-                dense
-                class="app-chip app-chip-name">
-                {{ row.name }}
-              </q-chip>
-            </td>
-            <td v-if="hasColumn('type')" v-bind:class="`text-${getColumn('type').align}`">
-              <q-chip
-                v-if="row.type"
-                dense
-                class="app-chip app-chip-entry-points">
-                {{ row.type }}
-              </q-chip>
-            </td>
-            <td v-if="hasColumn('servers')" v-bind:class="`text-${getColumn('servers').align}`">
-              <span class="servers-label">{{ row | servers }}</span>
-            </td>
-            <td v-if="hasColumn('service')" v-bind:class="`text-${getColumn('service').align}`">
-              <q-chip
-                v-if="row.service"
-                dense
-                class="app-chip app-chip-service">
-                {{ row.service }}
-              </q-chip>
-            </td>
-            <td v-if="hasColumn('provider')" v-bind:class="`text-${getColumn('provider').align}`">
-              <q-avatar class="provider-logo">
-                <q-icon :name="`img:statics/providers/${row.provider}.svg`" />
-              </q-avatar>
-            </td>
+          <tr v-for="row in data" :key="row.name" class="cursor-pointer" @click="onRowClick(row)">
+            <template v-for="column in columns">
+              <td :key="column.name" v-if="getColumn(column.name).component" v-bind:class="`text-${getColumn(column.name).align}`">
+                <component
+                  v-bind:is="getColumn(column.name).component"
+                  v-bind="getColumn(column.name).fieldToProps(row)"
+                >
+                  <template v-if="getColumn(column.name).content">
+                    {{ getColumn(column.name).content(row) }}
+                  </template>
+                </component>
+              </td>
+              <td
+                :key="column.name"
+                v-if="!getColumn(column.name).component"
+                v-bind:class="`text-${getColumn(column.name).align}`"
+                v-bind="getColumn(column.name).fieldToProps(row)"
+              >
+                 <span>
+                  {{getColumn(column.name).content ? getColumn(column.name).content(row) : row[column.name]}}
+                </span>
+              </td>
+            </template>
           </tr>
         </tbody>
       </q-markup-table>
@@ -95,126 +61,18 @@
 </template>
 
 <script>
-import AvatarState from './AvatarState'
-import TLSState from './TLSState'
 import { QMarkupTable, QInfiniteScroll, QSpinnerDots, QPageScroller } from 'quasar'
 
 export default {
   name: 'MainTable',
-  props: ['data', 'request', 'loading', 'pagination', 'type', 'onLoadMore', 'endReached'],
+  props: ['data', 'columns', 'loading', 'onLoadMore', 'endReached', 'onRowClick'],
   components: {
-    TLSState,
-    AvatarState,
     QMarkupTable,
     QInfiniteScroll,
     QSpinnerDots,
     QPageScroller
   },
-  data () {
-    return {
-      visibleColumnsHttpRouters: ['status', 'rule', 'entryPoints', 'name', 'service', 'tls', 'provider'],
-      visibleColumnsHttpServices: ['status', 'name', 'type', 'servers', 'provider'],
-      visibleColumnsHttpMiddlewares: ['status', 'name', 'type', 'provider'],
-      visibleColumns: ['status', 'name', 'provider'],
-      columns: [
-        {
-          name: 'status',
-          required: true,
-          label: 'Status',
-          align: 'left',
-          field: row => row.status
-        },
-        {
-          name: 'tls',
-          align: 'left',
-          label: 'TLS',
-          field: row => row
-        },
-        {
-          name: 'rule',
-          align: 'left',
-          label: 'Rule',
-          field: row => row.rule
-        },
-        {
-          name: 'entryPoints',
-          align: 'left',
-          label: 'Entrypoints',
-          field: row => row.entryPoints
-        },
-        {
-          name: 'name',
-          align: 'left',
-          label: 'Name',
-          field: row => row.name
-        },
-        {
-          name: 'type',
-          align: 'left',
-          label: 'Type',
-          field: row => row.type
-        },
-        {
-          name: 'servers',
-          align: 'right',
-          label: 'Servers',
-          field: row => row.servers
-        },
-        {
-          name: 'service',
-          align: 'left',
-          label: 'Service',
-          field: row => row.service
-        },
-        {
-          name: 'provider',
-          align: 'center',
-          label: 'Provider',
-          field: row => row.provider
-        }
-      ]
-    }
-  },
-  computed: {
-    getPath () {
-      return this.type.replace('-', '/', 'gi')
-    }
-  },
-  filters: {
-    status (value) {
-      if (value === 'enabled') {
-        return 'positive'
-      }
-      if (value === 'disabled') {
-        return 'negative'
-      }
-      return value
-    },
-    servers (value) {
-      if (value.loadBalancer && value.loadBalancer.servers) {
-        return value.loadBalancer.servers.length
-      }
-      return 0
-    }
-  },
-  created () {
-    if (this.type === 'http-routers' || this.type === 'tcp-routers') {
-      this.visibleColumns = this.visibleColumnsHttpRouters
-    }
-    if (this.type === 'http-services' || this.type === 'tcp-services') {
-      this.visibleColumns = this.visibleColumnsHttpServices
-    }
-    if (this.type === 'http-middlewares') {
-      this.visibleColumns = this.visibleColumnsHttpMiddlewares
-    }
-  },
   methods: {
-    hasColumn (columnName) {
-      return this.visibleColumns.includes(columnName)
-    },
-    getColumns () {
-      return this.columns.filter(c => this.visibleColumns.includes(c.name))
-    },
     getColumn (columnName) {
       return this.columns.find(c => c.name === columnName) || {}
     },
@@ -265,17 +123,8 @@ export default {
     }
   }
 
-  .servers-label{
+  .servers-label {
     font-size: 14px;
     font-weight: 600;
   }
-
-  .provider-logo {
-    width: 32px;
-    height: 32px;
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
 </style>
diff --git a/webui/src/components/_commons/ProviderIcon.vue b/webui/src/components/_commons/ProviderIcon.vue
new file mode 100644
index 000000000..ecf749f74
--- /dev/null
+++ b/webui/src/components/_commons/ProviderIcon.vue
@@ -0,0 +1,22 @@
+<template>
+  <q-avatar class="provider-logo">
+    <q-icon :name="`img:statics/providers/${name}.svg`" />
+  </q-avatar>
+</template>
+
+<script>
+export default {
+  props: ['name']
+}
+</script>
+
+<style scoped lang="scss">
+  .provider-logo {
+    width: 32px;
+    height: 32px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/webui/src/pages/_commons/MiddlewareDetail.vue b/webui/src/pages/_commons/MiddlewareDetail.vue
index 2cc7876cf..8b4c19942 100644
--- a/webui/src/pages/_commons/MiddlewareDetail.vue
+++ b/webui/src/pages/_commons/MiddlewareDetail.vue
@@ -43,7 +43,14 @@
         </div>
         <div class="row items-center q-col-gutter-lg">
           <div class="col-12">
-            <main-table :data="allRouters" :request="()=>{}" :loading="routersLoading" :pagination.sync="routersPagination" :filter="routersFilter" :type="`${protocol}-routers`"/>
+            <main-table
+              :data="allRouters"
+              v-bind="getTableProps({ type: `${protocol}-routers` })"
+              :request="()=>{}"
+              :loading="routersLoading"
+              :pagination.sync="routersPagination"
+              :filter="routersFilter"
+            />
           </div>
         </div>
       </div>
@@ -54,6 +61,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PageDefault from '../../components/_commons/PageDefault'
 import SkeletonBox from '../../components/_commons/SkeletonBox'
 import PanelMiddlewares from '../../components/_commons/PanelMiddlewares'
@@ -62,6 +70,7 @@ import MainTable from '../../components/_commons/MainTable'
 export default {
   name: 'PageMiddlewareDetail',
   props: ['name', 'type'],
+  mixins: [GetTablePropsMixin],
   components: {
     PageDefault,
     SkeletonBox,
diff --git a/webui/src/pages/_commons/ServiceDetail.vue b/webui/src/pages/_commons/ServiceDetail.vue
index d4decb2fc..17596b296 100644
--- a/webui/src/pages/_commons/ServiceDetail.vue
+++ b/webui/src/pages/_commons/ServiceDetail.vue
@@ -111,7 +111,14 @@
         </div>
         <div class="row items-center q-col-gutter-lg">
           <div class="col-12">
-            <main-table :data="allRouters" :request="()=>{}" :loading="routersLoading" :pagination.sync="routersPagination" :filter="routersFilter" :type="`${protocol}-routers`"/>
+            <main-table
+              :data="allRouters"
+              v-bind="getTableProps({ type: `${protocol}-routers` })"
+              :request="()=>{}"
+              :loading="routersLoading"
+              :pagination.sync="routersPagination"
+              :filter="routersFilter"
+            />
           </div>
         </div>
       </div>
@@ -122,6 +129,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PageDefault from '../../components/_commons/PageDefault'
 import SkeletonBox from '../../components/_commons/SkeletonBox'
 import PanelServiceDetails from '../../components/_commons/PanelServiceDetails'
@@ -134,6 +142,7 @@ import PanelMirroringServices from '../../components/_commons/PanelMirroringServ
 export default {
   name: 'PageServiceDetail',
   props: ['name', 'type'],
+  mixins: [GetTablePropsMixin],
   components: {
     PanelMirroringServices,
     PanelWeightedServices,
diff --git a/webui/src/pages/http/Middlewares.vue b/webui/src/pages/http/Middlewares.vue
index 6d021b294..87863eddf 100644
--- a/webui/src/pages/http/Middlewares.vue
+++ b/webui/src/pages/http/Middlewares.vue
@@ -10,11 +10,11 @@
           <div class="col-12">
             <main-table
               ref="mainTable"
+              v-bind="getTableProps({ type: 'http-middlewares' })"
               :data="allMiddlewares.items"
               :onLoadMore="handleLoadMore"
               :endReached="allMiddlewares.endReached"
               :loading="allMiddlewares.loading"
-              type="http-middlewares"
             />
           </div>
         </div>
@@ -26,12 +26,14 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageHTTPMiddlewares',
+  mixins: [GetTablePropsMixin],
   components: {
     PageDefault,
     ToolBarTable,
diff --git a/webui/src/pages/http/Routers.vue b/webui/src/pages/http/Routers.vue
index 8b4fa9405..e99a21ea7 100644
--- a/webui/src/pages/http/Routers.vue
+++ b/webui/src/pages/http/Routers.vue
@@ -10,11 +10,11 @@
           <div class="col-12">
             <main-table
               ref="mainTable"
+              v-bind="getTableProps({ type: 'http-routers' })"
               :data="allRouters.items"
               :onLoadMore="handleLoadMore"
               :endReached="allRouters.endReached"
               :loading="allRouters.loading"
-              type="http-routers"
             />
           </div>
         </div>
@@ -26,12 +26,14 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageHTTPRouters',
+  mixins: [GetTablePropsMixin],
   components: {
     PageDefault,
     ToolBarTable,
diff --git a/webui/src/pages/http/Services.vue b/webui/src/pages/http/Services.vue
index 9ae481e60..74549e845 100644
--- a/webui/src/pages/http/Services.vue
+++ b/webui/src/pages/http/Services.vue
@@ -10,11 +10,11 @@
           <div class="col-12">
             <main-table
               ref="mainTable"
+              v-bind="getTableProps({ type: 'http-services' })"
               :data="allServices.items"
               :onLoadMore="handleLoadMore"
               :endReached="allServices.endReached"
               :loading="allServices.loading"
-              type="http-services"
             />
           </div>
         </div>
@@ -26,12 +26,14 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageHTTPServices',
+  mixins: [GetTablePropsMixin],
   components: {
     PageDefault,
     ToolBarTable,
diff --git a/webui/src/pages/tcp/Routers.vue b/webui/src/pages/tcp/Routers.vue
index 139f08df5..c0179c102 100644
--- a/webui/src/pages/tcp/Routers.vue
+++ b/webui/src/pages/tcp/Routers.vue
@@ -10,11 +10,11 @@
           <div class="col-12">
             <main-table
               ref="mainTable"
+              v-bind="getTableProps({ type: 'tcp-routers' })"
               :data="allRouters.items"
               :onLoadMore="handleLoadMore"
               :endReached="allRouters.endReached"
               :loading="allRouters.loading"
-              type="tcp-routers"
             />
           </div>
         </div>
@@ -26,12 +26,14 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageTCPRouters',
+  mixins: [GetTablePropsMixin],
   components: {
     PageDefault,
     ToolBarTable,
diff --git a/webui/src/pages/tcp/Services.vue b/webui/src/pages/tcp/Services.vue
index 9b99a0070..593c90c9f 100644
--- a/webui/src/pages/tcp/Services.vue
+++ b/webui/src/pages/tcp/Services.vue
@@ -10,11 +10,11 @@
           <div class="col-12">
             <main-table
               ref="mainTable"
+              v-bind="getTableProps({ type: 'tcp-services' })"
               :data="allServices.items"
               :onLoadMore="handleLoadMore"
               :endReached="allServices.endReached"
               :loading="allServices.loading"
-              type="tcp-services"
             />
           </div>
         </div>
@@ -26,12 +26,14 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
+import GetTablePropsMixin from '../../_mixins/GetTableProps'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageTCPServices',
+  mixins: [GetTablePropsMixin],
   components: {
     PageDefault,
     ToolBarTable,