Web UI: Table infinite scroll

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",

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)
   }
 

webui/src/components/_commons/MainTable.vue

@@ -1,94 +1,114 @@
 <template>
   <div class="table-wrapper">
-    <q-table
+    <q-infinite-scroll @load="handleLoadMore" :offset="250" ref="scroller">
-      :data="data"
+      <q-markup-table>
-      :columns="columns"
+        <thead>
-      row-key="name"
+          <tr class="table-header">
-      :pagination.sync="syncPagination"
+            <th
-      :rows-per-page-options="[10, 20, 40, 80, 100, 0]"
+              v-for="column in getColumns()"
-      :loading="loading"
+              v-bind:class="`text-${column.align}`"
-      :filter="filter"
+              v-bind:key="column.name">
-      @request="request"
+              {{ column.label }}
-      binary-state-sort
+            </th>
-      :visible-columns="visibleColumns"
+          </tr>
-      color="primary"
+        </thead>
-      table-header-class="table-header">
+        <tfoot v-if="!data.length">
-
+          <tr>
-      <template v-slot:body="props">
+            <td colspan="100%">
-        <q-tr :props="props" class="cursor-pointer" @click.native="$router.push({ path: `/${getPath}/${props.row.name}`})">
+              <q-icon name="warning" style="font-size: 1.5rem"/> No data available
-          <q-td key="status" :props="props" auto-width>
+            </td>
-            <avatar-state :state="props.row.status | status "/>
+          </tr>
-          </q-td>
+        </tfoot>
-          <q-td key="tls" :props="props" auto-width>
+        <tbody>
-            <t-l-s-state :is-t-l-s="props.row.tls"/>
+          <tr v-for="row in data" :key="row.name" class="cursor-pointer" @click="$router.push({ path: `/${getPath}/${row.name}`})">
-          </q-td>
+            <td v-if="hasColumn('status')" v-bind:class="`text-${getColumn('status').align}`">
-          <q-td key="rule" :props="props">
+              <avatar-state :state="row.status | status "/>
-            <q-chip
+            </td>
-              v-if="props.row.rule"
+            <td v-if="hasColumn('tls')" v-bind:class="`text-${getColumn('tls').align}`">
-              dense
+              <t-l-s-state :is-t-l-s="row.tls"/>
-              class="app-chip app-chip-rule">
+            </td>
-              {{ props.row.rule }}
+            <td v-if="hasColumn('rule')" v-bind:class="`text-${getColumn('rule').align}`">
-            </q-chip>
-          </q-td>
-          <q-td key="entryPoints" :props="props">
-            <div v-if="props.row.using">
               <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>
+            </td>
-          </q-td>
+            <td v-if="hasColumn('servers')" v-bind:class="`text-${getColumn('servers').align}`">
-          <q-td key="name" :props="props">
+              <span class="servers-label">{{ row | servers }}</span>
-            <q-chip
+            </td>
-              v-if="props.row.name"
+            <td v-if="hasColumn('service')" v-bind:class="`text-${getColumn('service').align}`">
-              dense
+              <q-chip
-              class="app-chip app-chip-name">
+                v-if="row.service"
-              {{ props.row.name }}
+                dense
-            </q-chip>
+                class="app-chip app-chip-service">
-          </q-td>
+                {{ row.service }}
-          <q-td key="type" :props="props">
+              </q-chip>
-            <q-chip
+            </td>
-              v-if="props.row.type"
+            <td v-if="hasColumn('provider')" v-bind:class="`text-${getColumn('provider').align}`">
-              dense
+              <q-avatar class="provider-logo">
-              class="app-chip app-chip-entry-points">
+                <q-icon :name="`img:statics/providers/${row.provider}.svg`" />
-              {{ props.row.type }}
+              </q-avatar>
-            </q-chip>
+            </td>
-          </q-td>
+          </tr>
-          <q-td key="servers" :props="props">
+        </tbody>
-            <span class="servers-label">{{ props.row | servers }}</span>
+      </q-markup-table>
-          </q-td>
+      <template v-slot:loading v-if="loading">
-          <q-td key="service" :props="props">
+        <div class="row justify-center q-my-md">
-            <q-chip
+          <q-spinner-dots color="app-grey" size="40px" />
-              v-if="props.row.service"
+        </div>
-              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>
       </template>
-
+    </q-infinite-scroll>
-    </q-table>
+    <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{

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;
     }

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">

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 () {

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 () {

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 () {

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 () {

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 () {

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

webui/src/store/http/mutations.js

@@ -5,12 +5,33 @@ export function getAllRoutersRequest (state) {
   state.allRouters.loading = true
 }
 
-export function getAllRoutersSuccess (state, body) {
+export function getAllRoutersSuccess (state, data) {
-  state.allRouters = { items: body.data, total: body.total, loading: false }
+  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) {
+export function getAllServicesSuccess (state, data) {
-  state.allServices = { items: body.data, total: body.total, loading: false }
+  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) {
+export function getAllMiddlewaresSuccess (state, data) {
-  state.allMiddlewares = { items: body.data, total: body.total, loading: false }
+  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) {

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

webui/src/store/tcp/mutations.js

@@ -5,12 +5,33 @@ export function getAllRoutersRequest (state) {
   state.allRouters.loading = true
 }
 
-export function getAllRoutersSuccess (state, body) {
+export function getAllRoutersSuccess (state, data) {
-  state.allRouters = { items: body.data, total: body.total, loading: false }
+  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) {
+export function getAllServicesSuccess (state, data) {
-  state.allServices = { items: body.data, total: body.total, loading: false }
+  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) {