Web UI: Table infinite scroll

2019-11-27 15:06:06 +01:00 · 2019-11-27 15:06:06 +01:00 · c4a38de007
parent bd75eddc8e
commit c4a38de007
15 changed files with 2965 additions and 1049 deletions
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
--- a/webui/package.json
+++ b/webui/package.json
@ -22,13 +22,13 @@
    "chart.js": "^2.8.0",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
-    "quasar": "^1.0.0",
+    "quasar": "^1.4.4",
    "vh-check": "^2.0.5",
    "vue-chartjs": "^3.4.2",
    "vuex-map-fields": "^1.3.4"
  },
  "devDependencies": {
-    "@quasar/app": "^1.0.0",
+    "@quasar/app": "^1.2.4",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.10.0",
--- a/webui/src/_helpers/Errors.js
+++ b/webui/src/_helpers/Errors.js
@ -27,7 +27,11 @@ class Errors {
    if (error.response.status === 401) {
      // TODO - actions...
    }
-    Errors.showError(body)
+
+    // Avoid to notify when reaching end of an infinite scroll
+    if (!error.response.data.message.includes('invalid request: page:')) {
+      Errors.showError(body)
+    }
    return Promise.reject(body)
  }

--- a/webui/src/components/_commons/MainTable.vue
+++ b/webui/src/components/_commons/MainTable.vue
@ -1,94 +1,114 @@
 <template>
  <div class="table-wrapper">
-    <q-table
-      :data="data"
-      :columns="columns"
-      row-key="name"
-      :pagination.sync="syncPagination"
-      :rows-per-page-options="[10, 20, 40, 80, 100, 0]"
-      :loading="loading"
-      :filter="filter"
-      @request="request"
-      binary-state-sort
-      :visible-columns="visibleColumns"
-      color="primary"
-      table-header-class="table-header">
-
-      <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer" @click.native="$router.push({ path: `/${getPath}/${props.row.name}`})">
-          <q-td key="status" :props="props" auto-width>
-            <avatar-state :state="props.row.status | status "/>
-          </q-td>
-          <q-td key="tls" :props="props" auto-width>
-            <t-l-s-state :is-t-l-s="props.row.tls"/>
-          </q-td>
-          <q-td key="rule" :props="props">
-            <q-chip
-              v-if="props.row.rule"
-              dense
-              class="app-chip app-chip-rule">
-              {{ props.row.rule }}
-            </q-chip>
-          </q-td>
-          <q-td key="entryPoints" :props="props">
-            <div v-if="props.row.using">
+    <q-infinite-scroll @load="handleLoadMore" :offset="250" ref="scroller">
+      <q-markup-table>
+        <thead>
+          <tr class="table-header">
+            <th
+              v-for="column in getColumns()"
+              v-bind:class="`text-${column.align}`"
+              v-bind:key="column.name">
+              {{ column.label }}
+            </th>
+          </tr>
+        </thead>
+        <tfoot v-if="!data.length">
+          <tr>
+            <td colspan="100%">
+              <q-icon name="warning" style="font-size: 1.5rem"/> No data available
+            </td>
+          </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-for="(entryPoints, index) in props.row.using" :key="index"
+                :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">
-                {{ entryPoints }}
+                {{ row.type }}
              </q-chip>
-            </div>
-          </q-td>
-          <q-td key="name" :props="props">
-            <q-chip
-              v-if="props.row.name"
-              dense
-              class="app-chip app-chip-name">
-              {{ props.row.name }}
-            </q-chip>
-          </q-td>
-          <q-td key="type" :props="props">
-            <q-chip
-              v-if="props.row.type"
-              dense
-              class="app-chip app-chip-entry-points">
-              {{ props.row.type }}
-            </q-chip>
-          </q-td>
-          <q-td key="servers" :props="props">
-            <span class="servers-label">{{ props.row | servers }}</span>
-          </q-td>
-          <q-td key="service" :props="props">
-            <q-chip
-              v-if="props.row.service"
-              dense
-              class="app-chip app-chip-service">
-              {{ props.row.service }}
-            </q-chip>
-          </q-td>
-          <q-td key="provider" :props="props" auto-width>
-            <q-avatar class="provider-logo">
-              <q-icon :name="`img:statics/providers/${props.row.provider}.svg`" />
-            </q-avatar>
-          </q-td>
-        </q-tr>
+            </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>
+        </tbody>
+      </q-markup-table>
+      <template v-slot:loading v-if="loading">
+        <div class="row justify-center q-my-md">
+          <q-spinner-dots color="app-grey" size="40px" />
+        </div>
      </template>
-
-    </q-table>
+    </q-infinite-scroll>
+    <q-page-scroller position="bottom" :scroll-offset="150" class="back-to-top" v-if="endReached">
+      <q-btn color="primary" small>
+        Back to top
+      </q-btn>
+    </q-page-scroller>
  </div>
 </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', 'filter', 'type'],
+  props: ['data', 'request', 'loading', 'pagination', 'type', 'onLoadMore', 'endReached'],
  components: {
    TLSState,
-    AvatarState
+    AvatarState,
+    QMarkupTable,
+    QInfiniteScroll,
+    QSpinnerDots,
+    QPageScroller
  },
  data () {
    return {
@ -156,14 +176,6 @@ export default {
    }
  },
  computed: {
-    syncPagination: {
-      get () {
-        return this.pagination
-      },
-      set (newValue) {
-        this.$emit('update:pagination', newValue)
-      }
-    },
    getPath () {
      return this.type.replace('-', '/', 'gi')
    }
@ -195,6 +207,22 @@ export default {
    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) || {}
+    },
+    handleLoadMore (index, done) {
+      this.onLoadMore({ page: index })
+        .then(() => done())
+        .catch(() => done(true))
+    }
  }
 }
 </script>
@ -231,6 +259,10 @@ export default {
        }
      }
    }
+
+    .back-to-top {
+      margin: 16px 0;
+    }
  }

  .servers-label{
--- a/webui/src/components/_commons/TLSState.vue
+++ b/webui/src/components/_commons/TLSState.vue
@ -17,8 +17,8 @@ export default {
  .q-avatar{
    font-size: 32px;
    border-radius: 4px;
-    color: green;
    .q-icon {
+      color: green;
      font-size: 22px;
      margin: 0 0 0 1px;
    }
--- a/webui/src/index.template.html
+++ b/webui/src/index.template.html
@ -7,7 +7,7 @@
    <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

    <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
--- a/webui/src/pages/http/Middlewares.vue
+++ b/webui/src/pages/http/Middlewares.vue
@ -8,7 +8,14 @@
        </div>
        <div class="row items-center q-col-gutter-lg">
          <div class="col-12">
-            <main-table :data="allMiddlewares.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="http-middlewares"/>
+            <main-table
+              ref="mainTable"
+              :data="allMiddlewares.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allMiddlewares.endReached"
+              :loading="allMiddlewares.loading"
+              type="http-middlewares"
+            />
          </div>
        </div>
      </div>
@ -49,12 +56,30 @@ export default {
  },
  methods: {
    ...mapActions('http', { getAllMiddlewares: 'getAllMiddlewares' }),
+    initData () {
+      const scrollerRef = this.$refs.mainTable.$refs.scroller
+      if (scrollerRef) {
+        scrollerRef.stop()
+        scrollerRef.reset()
+      }
+
+      this.handleLoadMore({ page: 1 }).then(() => {
+        if (scrollerRef) {
+          scrollerRef.resume()
+          scrollerRef.poll()
+        }
+      })
+    },
    refreshAll () {
      if (this.allMiddlewares.loading) {
        return
      }
-      this.pagination.page = 1
-      this.onGetAll({
+
+      this.handleLoadMore({ page: 1 })
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      this.pagination.page = page
+      return this.onGetAll({
        pagination: this.pagination,
        filter: this.filter
      })
@ -62,12 +87,8 @@ export default {
    onGetAll (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination

-      this.getAllMiddlewares({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
+      return this.getAllMiddlewares({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
        .then(body => {
-          if (!body) {
-            this.loading = false
-            return
-          }
          this.loading = false
          console.log('Success -> http/middlewares', body)
          // update rowsNumber with appropriate value
@ -78,17 +99,14 @@ export default {
          this.pagination.sortBy = sortBy
          this.pagination.descending = descending
        })
-        .catch(error => {
-          console.log('Error -> http/middlewares', error)
-        })
    }
  },
  watch: {
    'status' () {
-      this.refreshAll()
+      this.initData()
    },
    'filter' () {
-      this.refreshAll()
+      this.initData()
    }
  },
  created () {
--- a/webui/src/pages/http/Routers.vue
+++ b/webui/src/pages/http/Routers.vue
@ -8,7 +8,14 @@
        </div>
        <div class="row items-center q-col-gutter-lg">
          <div class="col-12">
-            <main-table :data="allRouters.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="http-routers"/>
+            <main-table
+              ref="mainTable"
+              :data="allRouters.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allRouters.endReached"
+              :loading="allRouters.loading"
+              type="http-routers"
+            />
          </div>
        </div>
      </div>
@ -49,12 +56,30 @@ export default {
  },
  methods: {
    ...mapActions('http', { getAllRouters: 'getAllRouters' }),
+    initData () {
+      const scrollerRef = this.$refs.mainTable.$refs.scroller
+      if (scrollerRef) {
+        scrollerRef.stop()
+        scrollerRef.reset()
+      }
+
+      this.handleLoadMore({ page: 1 }).then(() => {
+        if (scrollerRef) {
+          scrollerRef.resume()
+          scrollerRef.poll()
+        }
+      })
+    },
    refreshAll () {
      if (this.allRouters.loading) {
        return
      }
-      this.pagination.page = 1
-      this.onGetAll({
+
+      this.handleLoadMore({ page: 1 })
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      this.pagination.page = page
+      return this.onGetAll({
        pagination: this.pagination,
        filter: this.filter
      })
@ -62,12 +87,8 @@ export default {
    onGetAll (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination

-      this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
+      return this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
        .then(body => {
-          if (!body) {
-            this.loading = false
-            return
-          }
          this.loading = false
          console.log('Success -> http/routers', body)
          // update rowsNumber with appropriate value
@ -78,17 +99,14 @@ export default {
          this.pagination.sortBy = sortBy
          this.pagination.descending = descending
        })
-        .catch(error => {
-          console.log('Error -> http/router', error)
-        })
    }
  },
  watch: {
    'status' () {
-      this.refreshAll()
+      this.initData()
    },
    'filter' () {
-      this.refreshAll()
+      this.initData()
    }
  },
  created () {
--- a/webui/src/pages/http/Services.vue
+++ b/webui/src/pages/http/Services.vue
@ -8,7 +8,14 @@
        </div>
        <div class="row items-center q-col-gutter-lg">
          <div class="col-12">
-            <main-table :data="allServices.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="http-services"/>
+            <main-table
+              ref="mainTable"
+              :data="allServices.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allServices.endReached"
+              :loading="allServices.loading"
+              type="http-services"
+            />
          </div>
        </div>
      </div>
@ -49,12 +56,30 @@ export default {
  },
  methods: {
    ...mapActions('http', { getAllServices: 'getAllServices' }),
+    initData () {
+      const scrollerRef = this.$refs.mainTable.$refs.scroller
+      if (scrollerRef) {
+        scrollerRef.stop()
+        scrollerRef.reset()
+      }
+
+      this.handleLoadMore({ page: 1 }).then(() => {
+        if (scrollerRef) {
+          scrollerRef.resume()
+          scrollerRef.poll()
+        }
+      })
+    },
    refreshAll () {
      if (this.allServices.loading) {
        return
      }
-      this.pagination.page = 1
-      this.onGetAll({
+
+      this.handleLoadMore({ page: 1 })
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      this.pagination.page = page
+      return this.onGetAll({
        pagination: this.pagination,
        filter: this.filter
      })
@ -62,12 +87,8 @@ export default {
    onGetAll (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination

-      this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
+      return this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
        .then(body => {
-          if (!body) {
-            this.loading = false
-            return
-          }
          this.loading = false
          console.log('Success -> http/services', body)
          // update rowsNumber with appropriate value
@ -78,17 +99,14 @@ export default {
          this.pagination.sortBy = sortBy
          this.pagination.descending = descending
        })
-        .catch(error => {
-          console.log('Error -> http/services', error)
-        })
    }
  },
  watch: {
    'status' () {
-      this.refreshAll()
+      this.initData()
    },
    'filter' () {
-      this.refreshAll()
+      this.initData()
    }
  },
  created () {
--- a/webui/src/pages/tcp/Routers.vue
+++ b/webui/src/pages/tcp/Routers.vue
@ -8,7 +8,14 @@
        </div>
        <div class="row items-center q-col-gutter-lg">
          <div class="col-12">
-            <main-table :data="allRouters.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="tcp-routers"/>
+            <main-table
+              ref="mainTable"
+              :data="allRouters.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allRouters.endReached"
+              :loading="allRouters.loading"
+              type="tcp-routers"
+            />
          </div>
        </div>
      </div>
@ -49,12 +56,30 @@ export default {
  },
  methods: {
    ...mapActions('tcp', { getAllRouters: 'getAllRouters' }),
+    initData () {
+      const scrollerRef = this.$refs.mainTable.$refs.scroller
+      if (scrollerRef) {
+        scrollerRef.stop()
+        scrollerRef.reset()
+      }
+
+      this.handleLoadMore({ page: 1 }).then(() => {
+        if (scrollerRef) {
+          scrollerRef.resume()
+          scrollerRef.poll()
+        }
+      })
+    },
    refreshAll () {
      if (this.allRouters.loading) {
        return
      }
-      this.pagination.page = 1
-      this.onGetAll({
+
+      this.handleLoadMore({ page: 1 })
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      this.pagination.page = page
+      return this.onGetAll({
        pagination: this.pagination,
        filter: this.filter
      })
@ -62,12 +87,8 @@ export default {
    onGetAll (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination

-      this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
+      return this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
        .then(body => {
-          if (!body) {
-            this.loading = false
-            return
-          }
          this.loading = false
          console.log('Success -> tcp/routers', body)
          // update rowsNumber with appropriate value
@ -78,17 +99,14 @@ export default {
          this.pagination.sortBy = sortBy
          this.pagination.descending = descending
        })
-        .catch(error => {
-          console.log('Error -> tcp/router', error)
-        })
    }
  },
  watch: {
    'status' () {
-      this.refreshAll()
+      this.initData()
    },
    'filter' () {
-      this.refreshAll()
+      this.initData()
    }
  },
  created () {
--- a/webui/src/pages/tcp/Services.vue
+++ b/webui/src/pages/tcp/Services.vue
@ -8,7 +8,14 @@
        </div>
        <div class="row items-center q-col-gutter-lg">
          <div class="col-12">
-            <main-table :data="allServices.items" :request="onGetAll" :loading="loading" :pagination.sync="pagination" :filter="filter" type="tcp-services"/>
+            <main-table
+              ref="mainTable"
+              :data="allServices.items"
+              :onLoadMore="handleLoadMore"
+              :endReached="allServices.endReached"
+              :loading="allServices.loading"
+              type="tcp-services"
+            />
          </div>
        </div>
      </div>
@ -49,12 +56,30 @@ export default {
  },
  methods: {
    ...mapActions('tcp', { getAllServices: 'getAllServices' }),
+    initData () {
+      const scrollerRef = this.$refs.mainTable.$refs.scroller
+      if (scrollerRef) {
+        scrollerRef.stop()
+        scrollerRef.reset()
+      }
+
+      this.handleLoadMore({ page: 1 }).then(() => {
+        if (scrollerRef) {
+          scrollerRef.resume()
+          scrollerRef.poll()
+        }
+      })
+    },
    refreshAll () {
      if (this.allServices.loading) {
        return
      }
-      this.pagination.page = 1
-      this.onGetAll({
+
+      this.handleLoadMore({ page: 1 })
+    },
+    handleLoadMore ({ page = 1 } = {}) {
+      this.pagination.page = page
+      return this.onGetAll({
        pagination: this.pagination,
        filter: this.filter
      })
@ -62,12 +87,8 @@ export default {
    onGetAll (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination

-      this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
+      return this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
        .then(body => {
-          if (!body) {
-            this.loading = false
-            return
-          }
          this.loading = false
          console.log('Success -> tcp/services', body)
          // update rowsNumber with appropriate value
@ -78,17 +99,14 @@ export default {
          this.pagination.sortBy = sortBy
          this.pagination.descending = descending
        })
-        .catch(error => {
-          console.log('Error -> tcp/services', error)
-        })
    }
  },
  watch: {
    'status' () {
-      this.refreshAll()
+      this.initData()
    },
    'filter' () {
-      this.refreshAll()
+      this.initData()
    }
  },
  created () {
--- a/webui/src/store/http/actions.js
+++ b/webui/src/store/http/actions.js
@ -4,7 +4,7 @@ export function getAllRouters ({ commit }, params) {
  commit('getAllRoutersRequest')
  return HttpService.getAllRouters(params)
    .then(body => {
-      commit('getAllRoutersSuccess', body)
+      commit('getAllRoutersSuccess', { body, ...params })
      return body
    })
    .catch(error => {
@ -30,7 +30,7 @@ export function getAllServices ({ commit }, params) {
  commit('getAllServicesRequest')
  return HttpService.getAllServices(params)
    .then(body => {
-      commit('getAllServicesSuccess', body)
+      commit('getAllServicesSuccess', { body, ...params })
      return body
    })
    .catch(error => {
@ -56,7 +56,7 @@ export function getAllMiddlewares ({ commit }, params) {
  commit('getAllMiddlewaresRequest')
  return HttpService.getAllMiddlewares(params)
    .then(body => {
-      commit('getAllMiddlewaresSuccess', body)
+      commit('getAllMiddlewaresSuccess', { body, ...params })
      return body
    })
    .catch(error => {
--- a/webui/src/store/http/mutations.js
+++ b/webui/src/store/http/mutations.js
@ -5,12 +5,33 @@ export function getAllRoutersRequest (state) {
  state.allRouters.loading = true
 }

-export function getAllRoutersSuccess (state, body) {
-  state.allRouters = { items: body.data, total: body.total, loading: false }
+export function getAllRoutersSuccess (state, data) {
+  const { body, query = '', status = '', page } = data
+  const currentState = state.allRouters
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allRouters = {
+    ...state.allRouters,
+    items: [
+      ...(isSameContext && currentState.items && page !== 1 ? currentState.items : []),
+      ...(body.data || [])
+    ],
+    currentPage: page,
+    total: body.total,
+    loading: false,
+    currentQuery: query,
+    currentStatus: status
+  }
 }

 export function getAllRoutersFailure (state, error) {
-  state.allRouters = { error }
+  state.allRouters = {
+    ...state.allRouters,
+    loading: false,
+    error,
+    endReached: error.message.includes('invalid request: page:')
+  }
 }

 export function getAllRoutersClear (state) {
@ -43,12 +64,33 @@ export function getAllServicesRequest (state) {
  state.allServices.loading = true
 }

-export function getAllServicesSuccess (state, body) {
-  state.allServices = { items: body.data, total: body.total, loading: false }
+export function getAllServicesSuccess (state, data) {
+  const { body, query = '', status = '', page } = data
+  const currentState = state.allServices
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allServices = {
+    ...state.allServices,
+    items: [
+      ...(isSameContext && currentState.items && page !== 1 ? currentState.items : []),
+      ...(body.data || [])
+    ],
+    currentPage: page,
+    total: body.total,
+    loading: false,
+    currentQuery: query,
+    currentStatus: status
+  }
 }

 export function getAllServicesFailure (state, error) {
-  state.allServices = { error }
+  state.allServices = {
+    ...state.allServices,
+    loading: false,
+    error,
+    endReached: error.message.includes('invalid request: page:')
+  }
 }

 export function getAllServicesClear (state) {
@ -81,12 +123,33 @@ export function getAllMiddlewaresRequest (state) {
  state.allMiddlewares.loading = true
 }

-export function getAllMiddlewaresSuccess (state, body) {
-  state.allMiddlewares = { items: body.data, total: body.total, loading: false }
+export function getAllMiddlewaresSuccess (state, data) {
+  const { body, query = '', status = '', page } = data
+  const currentState = state.allMiddlewares
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allMiddlewares = {
+    ...state.allMiddlewares,
+    items: [
+      ...(isSameContext && currentState.items && page !== 1 ? currentState.items : []),
+      ...(body.data || [])
+    ],
+    currentPage: page,
+    total: body.total,
+    loading: false,
+    currentQuery: query,
+    currentStatus: status
+  }
 }

 export function getAllMiddlewaresFailure (state, error) {
-  state.allMiddlewares = { error }
+  state.allMiddlewares = {
+    ...state.allMiddlewares,
+    loading: false,
+    error,
+    endReached: error.message.includes('invalid request: page:')
+  }
 }

 export function getAllMiddlewaresClear (state) {
--- a/webui/src/store/tcp/actions.js
+++ b/webui/src/store/tcp/actions.js
@ -4,7 +4,7 @@ export function getAllRouters ({ commit }, params) {
  commit('getAllRoutersRequest')
  return TcpService.getAllRouters(params)
    .then(body => {
-      commit('getAllRoutersSuccess', body)
+      commit('getAllRoutersSuccess', { body, ...params })
      return body
    })
    .catch(error => {
@ -30,7 +30,7 @@ export function getAllServices ({ commit }, params) {
  commit('getAllServicesRequest')
  return TcpService.getAllServices(params)
    .then(body => {
-      commit('getAllServicesSuccess', body)
+      commit('getAllServicesSuccess', { body, ...params })
      return body
    })
    .catch(error => {
--- a/webui/src/store/tcp/mutations.js
+++ b/webui/src/store/tcp/mutations.js
@ -5,12 +5,33 @@ export function getAllRoutersRequest (state) {
  state.allRouters.loading = true
 }

-export function getAllRoutersSuccess (state, body) {
-  state.allRouters = { items: body.data, total: body.total, loading: false }
+export function getAllRoutersSuccess (state, data) {
+  const { body, query = '', status = '', page } = data
+  const currentState = state.allRouters
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allRouters = {
+    ...state.allRouters,
+    items: [
+      ...(isSameContext && currentState.items && page !== 1 ? currentState.items : []),
+      ...(body.data || [])
+    ],
+    currentPage: page,
+    total: body.total,
+    loading: false,
+    currentQuery: query,
+    currentStatus: status
+  }
 }

 export function getAllRoutersFailure (state, error) {
-  state.allRouters = { error }
+  state.allRouters = {
+    ...state.allRouters,
+    loading: false,
+    error,
+    endReached: error.message.includes('invalid request: page:')
+  }
 }

 export function getAllRoutersClear (state) {
@ -43,12 +64,33 @@ export function getAllServicesRequest (state) {
  state.allServices.loading = true
 }

-export function getAllServicesSuccess (state, body) {
-  state.allServices = { items: body.data, total: body.total, loading: false }
+export function getAllServicesSuccess (state, data) {
+  const { body, query = '', status = '', page } = data
+  const currentState = state.allServices
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allServices = {
+    ...state.allServices,
+    items: [
+      ...(isSameContext && currentState.items && page !== 1 ? currentState.items : []),
+      ...(body.data || [])
+    ],
+    currentPage: page,
+    total: body.total,
+    loading: false,
+    currentQuery: query,
+    currentStatus: status
+  }
 }

 export function getAllServicesFailure (state, error) {
-  state.allServices = { error }
+  state.allServices = {
+    ...state.allServices,
+    loading: false,
+    error,
+    endReached: error.message.includes('invalid request: page:')
+  }
 }

 export function getAllServicesClear (state) {