Web UI: Take off logic from generic table component

2019-12-11 23:14:04 +01:00 · 2019-12-11 23:14:04 +01:00 · 3f1484480e
parent 2d3fc613ec
commit 3f1484480e
13 changed files with 287 additions and 190 deletions
--- 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",
--- 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": {
--- a/webui/src/_mixins/GetTableProps.js
+++ 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
--- a/webui/src/components/_commons/Chips.vue
+++ 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>
--- 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>
--- a/webui/src/components/_commons/ProviderIcon.vue
+++ 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>
--- 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,
--- 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,
--- 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,
--- 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,
--- 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,
--- 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,
--- 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,