Web UI: Polling on tables

webui/.eslintrc.js

@@ -7,19 +7,22 @@ module.exports = {
   },
 
   env: {
-    browser: true
+    browser: true,
+    mocha: true
   },
 
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/essential',
-    '@vue/standard'
+    '@vue/standard',
+    'plugin:mocha/recommended'
   ],
 
   // required to lint *.vue files
   plugins: [
-    'vue'
+    'vue',
+    'mocha'
   ],
 
   globals: {

webui/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "transfer": "node dev/scripts/transfer.js",
     "lint": "eslint --ext .js,.vue src",
-    "test": "echo \"No test specified\" && exit 0",
+    "test-unit": "mocha-webpack --mode=production './src/**/*.spec.js'",
     "dev": "export APP_ENV='development' && quasar dev -m pwa",
     "build-quasar": "quasar build -m pwa",
     "build-staging": "export NODE_ENV='production' && export APP_ENV='development' && npm run build-quasar",
@@ -20,8 +20,8 @@
     "axios": "^0.19.0",
     "bowser": "^2.5.2",
     "chart.js": "^2.8.0",
-    "dot-prop": "5.2.0",
-    "lodash": "^4.17.15",
+    "dot-prop": "^5.2.0",
+    "lodash.isequal": "4.5.0",
     "moment": "^2.24.0",
     "quasar": "^1.4.4",
     "vh-check": "^2.0.5",
@@ -31,11 +31,16 @@
   "devDependencies": {
     "@quasar/app": "^1.2.4",
     "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-eslint": "^10.0.1",
+    "chai": "4.2.0",
     "eslint": "^5.10.0",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-prettier": "3.1.1",
+    "eslint-plugin-mocha": "6.2.1",
     "eslint-plugin-vue": "^5.0.0",
+    "mocha": "^6.2.2",
+    "mocha-webpack": "^2.0.0-beta.0",
     "node-sass": "^4.12.0",
     "prettier": "1.19.1",
     "sass-loader": "^7.1.0"

webui/quasar.conf.js

@@ -7,7 +7,6 @@ module.exports = function (ctx) {
     // --> boot files are part of "main.js"
     boot: [
       '_globals',
-      'lodash',
       'api',
       '_hacks',
       '_init'

webui/src/_helpers/Errors.js

@@ -1,5 +1,4 @@
 import { Notify } from 'quasar'
-import { APP } from './APP'
 
 class Errors {
   // Getters
@@ -12,7 +11,7 @@ class Errors {
   // ------------------------------------------------------------------------
 
   static showError (body) {
-    body = APP._.isString(body) ? JSON.parse(body) : body
+    body = typeof body === 'string' ? JSON.parse(body) : body
     Notify.create({
       color: 'negative',
       position: 'top',

webui/src/_helpers/Helps.js

@@ -1,4 +1,4 @@
-import { APP } from './APP'
+import { get } from 'dot-prop'
 
 class Helps {
   // Getters
@@ -11,7 +11,7 @@ class Helps {
   // ------------------------------------------------------------------------
 
   static get (obj, prop, def = undefined) {
-    return APP._.get(obj, prop, def)
+    return get(obj, prop, def)
   }
 
   static hasIn (obj, prop) {

webui/src/_helpers/Mutations.js

@@ -0,0 +1,44 @@
+import { set, get } from 'dot-prop'
+
+export const withPagination = (type, opts = {}) => (state, data) => {
+  const { isSameContext, statePath } = opts
+  const currentState = get(state, statePath)
+
+  let newState
+
+  switch (type) {
+    case 'request':
+      newState = {
+        ...currentState,
+        loading: true
+      }
+      break
+    case 'success':
+      const { body, page } = data
+      newState = {
+        ...currentState,
+        items: [
+          ...(isSameContext && currentState.items && page !== 1 ? currentState.items : []),
+          ...(body.data || [])
+        ],
+        currentPage: page,
+        total: isSameContext && currentState.items && page !== 1
+          ? body.total + currentState.total
+          : body.total,
+        loading: false
+      }
+      break
+    case 'failure':
+      newState = {
+        ...currentState,
+        loading: false,
+        error: data,
+        endReached: data.message.includes('invalid request: page:')
+      }
+      break
+  }
+
+  if (newState) {
+    set(state, statePath, newState)
+  }
+}

webui/src/_mixins/Pagination.js

@@ -0,0 +1,74 @@
+import { get } from 'dot-prop'
+
+export default function PaginationMixin (opts = {}) {
+  const { pollingIntervalTime, rowsPerPage = 10 } = opts
+  let listLength = 0
+  let currentPage = 1
+  let currentLimit = rowsPerPage
+
+  return {
+    methods: {
+      fetchWithInterval () {
+        this.initFetch({ limit: listLength })
+        this.pollingInterval = setInterval(
+          () => {
+            this.fetchMore({
+              limit: Math.ceil(listLength / rowsPerPage) * rowsPerPage, // round up to multiple of rowsPerPage
+              refresh: true
+            })
+          },
+          pollingIntervalTime
+        )
+      },
+      fetchMore ({ page = 1, limit = rowsPerPage, refresh, ...params } = {}) {
+        if (page === currentPage && limit === currentLimit && !refresh) {
+          return Promise.resolve()
+        }
+
+        currentPage = page
+        currentLimit = limit || rowsPerPage
+
+        const fetchMethod = get(this, opts.fetchMethod)
+
+        return fetchMethod({
+          ...params,
+          page,
+          limit: limit || rowsPerPage
+        }).then(res => {
+          listLength = page > 1
+            ? listLength += res.data.length
+            : res.data.length
+        })
+      },
+      initFetch (params) {
+        const scrollerRef = get(this.$refs, opts.scrollerRef)
+
+        if (scrollerRef) {
+          scrollerRef.stop()
+          scrollerRef.reset()
+        }
+
+        return this.fetchMore({
+          page: 1,
+          refresh: true,
+          ...params
+        }).then(() => {
+          if (scrollerRef) {
+            scrollerRef.resume()
+            scrollerRef.poll()
+          }
+        })
+      }
+    },
+    mounted () {
+      if (pollingIntervalTime) {
+        this.fetchWithInterval()
+      } else {
+        this.fetchMore()
+      }
+    },
+    beforeDestroy () {
+      clearInterval(this.pollingInterval)
+    }
+  }
+}

webui/src/boot/lodash.js

@@ -1,7 +0,0 @@
-import lodash from 'lodash'
-
-import { APP } from '../_helpers/APP'
-
-export default async ({ app, Vue }) => {
-  Vue.prototype.$_ = app._ = APP._ = lodash
-}

webui/src/components/_commons/ChartDoughnut.vue

@@ -1,5 +1,6 @@
 <script>
 import { Doughnut } from 'vue-chartjs'
+import isEqual from 'lodash.isequal'
 
 export default {
   extends: Doughnut,
@@ -16,8 +17,8 @@ export default {
   watch: {
     chartdata: function (newData, oldData) {
       // TODO - bug, 'update()' not update the chart, remplace for renderChart()
-      // console.log('new data from watcher...', newData, oldData, this.$_.isEqual(newData.datasets[0].data, oldData.datasets[0].data))
-      if (!this.$_.isEqual(newData.datasets[0].data, oldData.datasets[0].data)) {
+      // console.log('new data from watcher...', newData, oldData, isEqual(newData.datasets[0].data, oldData.datasets[0].data))
+      if (!isEqual(newData.datasets[0].data, oldData.datasets[0].data)) {
         // this.$data._chart.update()
         this.renderChart(this.chartdata, this.options)
       }

webui/src/components/dashboard/PanelFeature.vue

@@ -24,10 +24,10 @@ export default {
   props: ['featureKey', 'featureVal'],
   computed: {
     isString () {
-      return this.$_.isString(this.featureVal)
+      return typeof this.featureVal === 'string'
     },
     isBoolean () {
-      return this.$_.isBoolean(this.featureVal) || this.featureVal === ''
+      return typeof variable === 'boolean' || this.featureVal === ''
     },
     isTrue () {
       return this.isBoolean && this.featureVal === true

webui/src/pages/http/Middlewares.vue

@@ -27,13 +27,21 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import GetTablePropsMixin from '../../_mixins/GetTableProps'
+import PaginationMixin from '../../_mixins/Pagination'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageHTTPMiddlewares',
-  mixins: [GetTablePropsMixin],
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllMiddlewaresWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
   components: {
     PageDefault,
     ToolBarTable,
@@ -41,16 +49,8 @@ export default {
   },
   data () {
     return {
-      loading: true,
       filter: '',
-      status: '',
-      pagination: {
-        sortBy: '',
-        descending: true,
-        page: 1,
-        rowsPerPage: 10,
-        rowsNumber: 0
-      }
+      status: ''
     }
   },
   computed: {
@@ -58,18 +58,11 @@ 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()
-        }
+    getAllMiddlewaresWithParams (params) {
+      return this.getAllMiddlewares({
+        query: this.filter,
+        status: this.status,
+        ...params
       })
     },
     refreshAll () {
@@ -77,46 +70,20 @@ export default {
         return
       }
 
-      this.handleLoadMore({ page: 1 })
+      this.initFetch()
     },
     handleLoadMore ({ page = 1 } = {}) {
-      this.pagination.page = page
-      return this.onGetAll({
-        pagination: this.pagination,
-        filter: this.filter
-      })
-    },
-    onGetAll (props) {
-      let { page, rowsPerPage, sortBy, descending } = props.pagination
-
-      return this.getAllMiddlewares({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
-        .then(body => {
-          this.loading = false
-          console.log('Success -> http/middlewares', body)
-          // update rowsNumber with appropriate value
-          this.pagination.rowsNumber = body.total
-          // update local pagination object
-          this.pagination.page = page
-          this.pagination.rowsPerPage = rowsPerPage
-          this.pagination.sortBy = sortBy
-          this.pagination.descending = descending
-        })
+      return this.fetchMore({ page })
     }
   },
   watch: {
     'status' () {
-      this.initData()
+      this.refreshAll()
     },
     'filter' () {
-      this.initData()
+      this.refreshAll()
     }
   },
-  created () {
-
-  },
-  mounted () {
-    this.refreshAll()
-  },
   beforeDestroy () {
     this.$store.commit('http/getAllMiddlewaresClear')
   }

webui/src/pages/http/Routers.vue

@@ -27,13 +27,21 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import GetTablePropsMixin from '../../_mixins/GetTableProps'
+import PaginationMixin from '../../_mixins/Pagination'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageHTTPRouters',
-  mixins: [GetTablePropsMixin],
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllRoutersWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
   components: {
     PageDefault,
     ToolBarTable,
@@ -41,16 +49,8 @@ export default {
   },
   data () {
     return {
-      loading: true,
       filter: '',
-      status: '',
-      pagination: {
-        sortBy: '',
-        descending: true,
-        page: 1,
-        rowsPerPage: 10,
-        rowsNumber: 0
-      }
+      status: ''
     }
   },
   computed: {
@@ -58,18 +58,11 @@ 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()
-        }
+    getAllRoutersWithParams (params) {
+      return this.getAllRouters({
+        query: this.filter,
+        status: this.status,
+        ...params
       })
     },
     refreshAll () {
@@ -77,46 +70,20 @@ export default {
         return
       }
 
-      this.handleLoadMore({ page: 1 })
+      this.initFetch()
     },
     handleLoadMore ({ page = 1 } = {}) {
-      this.pagination.page = page
-      return this.onGetAll({
-        pagination: this.pagination,
-        filter: this.filter
-      })
-    },
-    onGetAll (props) {
-      let { page, rowsPerPage, sortBy, descending } = props.pagination
-
-      return this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
-        .then(body => {
-          this.loading = false
-          console.log('Success -> http/routers', body)
-          // update rowsNumber with appropriate value
-          this.pagination.rowsNumber = body.total
-          // update local pagination object
-          this.pagination.page = page
-          this.pagination.rowsPerPage = rowsPerPage
-          this.pagination.sortBy = sortBy
-          this.pagination.descending = descending
-        })
+      return this.fetchMore({ page })
     }
   },
   watch: {
     'status' () {
-      this.initData()
+      this.refreshAll()
     },
     'filter' () {
-      this.initData()
+      this.refreshAll()
     }
   },
-  created () {
-
-  },
-  mounted () {
-    this.refreshAll()
-  },
   beforeDestroy () {
     this.$store.commit('http/getAllRoutersClear')
   }

webui/src/pages/http/Services.vue

@@ -27,13 +27,21 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import GetTablePropsMixin from '../../_mixins/GetTableProps'
+import PaginationMixin from '../../_mixins/Pagination'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageHTTPServices',
-  mixins: [GetTablePropsMixin],
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllServicesWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
   components: {
     PageDefault,
     ToolBarTable,
@@ -41,16 +49,8 @@ export default {
   },
   data () {
     return {
-      loading: true,
       filter: '',
-      status: '',
-      pagination: {
-        sortBy: '',
-        descending: true,
-        page: 1,
-        rowsPerPage: 10,
-        rowsNumber: 0
-      }
+      status: ''
     }
   },
   computed: {
@@ -58,18 +58,11 @@ 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()
-        }
+    getAllServicesWithParams (params) {
+      return this.getAllServices({
+        query: this.filter,
+        status: this.status,
+        ...params
       })
     },
     refreshAll () {
@@ -77,46 +70,20 @@ export default {
         return
       }
 
-      this.handleLoadMore({ page: 1 })
+      this.initFetch()
     },
     handleLoadMore ({ page = 1 } = {}) {
-      this.pagination.page = page
-      return this.onGetAll({
-        pagination: this.pagination,
-        filter: this.filter
-      })
-    },
-    onGetAll (props) {
-      let { page, rowsPerPage, sortBy, descending } = props.pagination
-
-      return this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
-        .then(body => {
-          this.loading = false
-          console.log('Success -> http/services', body)
-          // update rowsNumber with appropriate value
-          this.pagination.rowsNumber = body.total
-          // update local pagination object
-          this.pagination.page = page
-          this.pagination.rowsPerPage = rowsPerPage
-          this.pagination.sortBy = sortBy
-          this.pagination.descending = descending
-        })
+      return this.fetchMore({ page })
     }
   },
   watch: {
     'status' () {
-      this.initData()
+      this.refreshAll()
     },
     'filter' () {
-      this.initData()
+      this.refreshAll()
     }
   },
-  created () {
-
-  },
-  mounted () {
-    this.refreshAll()
-  },
   beforeDestroy () {
     this.$store.commit('http/getAllServicesClear')
   }

webui/src/pages/tcp/Routers.vue

@@ -27,13 +27,21 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import GetTablePropsMixin from '../../_mixins/GetTableProps'
+import PaginationMixin from '../../_mixins/Pagination'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageTCPRouters',
-  mixins: [GetTablePropsMixin],
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllRoutersWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
   components: {
     PageDefault,
     ToolBarTable,
@@ -41,16 +49,8 @@ export default {
   },
   data () {
     return {
-      loading: true,
       filter: '',
-      status: '',
-      pagination: {
-        sortBy: '',
-        descending: true,
-        page: 1,
-        rowsPerPage: 10,
-        rowsNumber: 0
-      }
+      status: ''
     }
   },
   computed: {
@@ -58,18 +58,11 @@ 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()
-        }
+    getAllRoutersWithParams (params) {
+      return this.getAllRouters({
+        query: this.filter,
+        status: this.status,
+        ...params
       })
     },
     refreshAll () {
@@ -77,48 +70,22 @@ export default {
         return
       }
 
-      this.handleLoadMore({ page: 1 })
+      this.initFetch()
     },
     handleLoadMore ({ page = 1 } = {}) {
-      this.pagination.page = page
-      return this.onGetAll({
-        pagination: this.pagination,
-        filter: this.filter
-      })
-    },
-    onGetAll (props) {
-      let { page, rowsPerPage, sortBy, descending } = props.pagination
-
-      return this.getAllRouters({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
-        .then(body => {
-          this.loading = false
-          console.log('Success -> tcp/routers', body)
-          // update rowsNumber with appropriate value
-          this.pagination.rowsNumber = body.total
-          // update local pagination object
-          this.pagination.page = page
-          this.pagination.rowsPerPage = rowsPerPage
-          this.pagination.sortBy = sortBy
-          this.pagination.descending = descending
-        })
+      return this.fetchMore({ page })
     }
   },
   watch: {
     'status' () {
-      this.initData()
+      this.refreshAll()
     },
     'filter' () {
-      this.initData()
+      this.refreshAll()
     }
   },
-  created () {
-
-  },
-  mounted () {
-    this.refreshAll()
-  },
   beforeDestroy () {
-    this.$store.commit('tcp/getAllRoutersClear')
+    this.$store.commit('http/getAllRoutersClear')
   }
 }
 </script>

webui/src/pages/tcp/Services.vue

@@ -27,13 +27,21 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import GetTablePropsMixin from '../../_mixins/GetTableProps'
+import PaginationMixin from '../../_mixins/Pagination'
 import PageDefault from '../../components/_commons/PageDefault'
 import ToolBarTable from '../../components/_commons/ToolBarTable'
 import MainTable from '../../components/_commons/MainTable'
 
 export default {
   name: 'PageTCPServices',
-  mixins: [GetTablePropsMixin],
+  mixins: [
+    GetTablePropsMixin,
+    PaginationMixin({
+      fetchMethod: 'getAllServicesWithParams',
+      scrollerRef: 'mainTable.$refs.scroller',
+      pollingIntervalTime: 5000
+    })
+  ],
   components: {
     PageDefault,
     ToolBarTable,
@@ -41,16 +49,8 @@ export default {
   },
   data () {
     return {
-      loading: true,
       filter: '',
-      status: '',
-      pagination: {
-        sortBy: '',
-        descending: true,
-        page: 1,
-        rowsPerPage: 10,
-        rowsNumber: 0
-      }
+      status: ''
     }
   },
   computed: {
@@ -58,18 +58,11 @@ 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()
-        }
+    getAllServicesWithParams (params) {
+      return this.getAllServices({
+        query: this.filter,
+        status: this.status,
+        ...params
       })
     },
     refreshAll () {
@@ -77,48 +70,22 @@ export default {
         return
       }
 
-      this.handleLoadMore({ page: 1 })
+      this.initFetch()
     },
     handleLoadMore ({ page = 1 } = {}) {
-      this.pagination.page = page
-      return this.onGetAll({
-        pagination: this.pagination,
-        filter: this.filter
-      })
-    },
-    onGetAll (props) {
-      let { page, rowsPerPage, sortBy, descending } = props.pagination
-
-      return this.getAllServices({ query: props.filter, status: this.status, page, limit: rowsPerPage, sortBy, descending })
-        .then(body => {
-          this.loading = false
-          console.log('Success -> tcp/services', body)
-          // update rowsNumber with appropriate value
-          this.pagination.rowsNumber = body.total
-          // update local pagination object
-          this.pagination.page = page
-          this.pagination.rowsPerPage = rowsPerPage
-          this.pagination.sortBy = sortBy
-          this.pagination.descending = descending
-        })
+      return this.fetchMore({ page })
     }
   },
   watch: {
     'status' () {
-      this.initData()
+      this.refreshAll()
     },
     'filter' () {
-      this.initData()
+      this.refreshAll()
     }
   },
-  created () {
-
-  },
-  mounted () {
-    this.refreshAll()
-  },
   beforeDestroy () {
-    this.$store.commit('tcp/getAllServicesClear')
+    this.$store.commit('http/getAllServicesClear')
   }
 }
 </script>

webui/src/store/http/mutations.js

@@ -1,37 +1,33 @@
+import { withPagination } from '../../_helpers/Mutations'
+
 // ----------------------------
 // Get All Routers
 // ----------------------------
 export function getAllRoutersRequest (state) {
-  state.allRouters.loading = true
+  withPagination('request', { statePath: 'allRouters' })(state)
 }
 
 export function getAllRoutersSuccess (state, data) {
-  const { body, query = '', status = '', page } = data
+  const { query = '', status = '' } = data
   const currentState = state.allRouters
+  const { currentQuery = '', currentStatus = '' } = currentState
 
-  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+  const isSameContext = currentQuery === query && 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
   }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allRouters'
+  })(state, data)
 }
 
 export function getAllRoutersFailure (state, error) {
-  state.allRouters = {
-    ...state.allRouters,
-    loading: false,
-    error,
-    endReached: error.message.includes('invalid request: page:')
-  }
+  withPagination('failure', { statePath: 'allRouters' })(state, error)
 }
 
 export function getAllRoutersClear (state) {
@@ -61,36 +57,29 @@ export function getRouterByNameClear (state) {
 // Get All Services
 // ----------------------------
 export function getAllServicesRequest (state) {
-  state.allServices.loading = true
+  withPagination('request', { statePath: 'allServices' })(state)
 }
 
 export function getAllServicesSuccess (state, data) {
-  const { body, query = '', status = '', page } = data
+  const { query = '', status = '' } = 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
   }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allServices'
+  })(state, data)
 }
 
 export function getAllServicesFailure (state, error) {
-  state.allServices = {
-    ...state.allServices,
-    loading: false,
-    error,
-    endReached: error.message.includes('invalid request: page:')
-  }
+  withPagination('failure', { statePath: 'allServices' })(state, error)
 }
 
 export function getAllServicesClear (state) {
@@ -120,36 +109,29 @@ export function getServiceByNameClear (state) {
 // Get All Middlewares
 // ----------------------------
 export function getAllMiddlewaresRequest (state) {
-  state.allMiddlewares.loading = true
+  withPagination('request', { statePath: 'allMiddlewares' })(state)
 }
 
 export function getAllMiddlewaresSuccess (state, data) {
-  const { body, query = '', status = '', page } = data
+  const { query = '', status = '' } = 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
   }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allMiddlewares'
+  })(state, data)
 }
 
 export function getAllMiddlewaresFailure (state, error) {
-  state.allMiddlewares = {
-    ...state.allMiddlewares,
-    loading: false,
-    error,
-    endReached: error.message.includes('invalid request: page:')
-  }
+  withPagination('failure', { statePath: 'allMiddlewares' })(state, error)
 }
 
 export function getAllMiddlewaresClear (state) {

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

@@ -0,0 +1,292 @@
+import { expect } from 'chai'
+import store from './index.js'
+
+const {
+  getAllRoutersRequest,
+  getAllRoutersSuccess,
+  getAllRoutersFailure,
+  getAllServicesRequest,
+  getAllServicesSuccess,
+  getAllServicesFailure,
+  getAllMiddlewaresRequest,
+  getAllMiddlewaresSuccess,
+  getAllMiddlewaresFailure
+} = store.mutations
+
+describe('http mutations', function () {
+  /* Routers */
+  describe('http routers mutations', function () {
+    it('getAllRoutersRequest', function () {
+      const state = {
+        allRouters: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllRoutersRequest(state)
+
+      expect(state.allRouters.loading).to.equal(true)
+      expect(state.allRouters.items.length).to.equal(3)
+    })
+
+    it('getAllRoutersSuccess page 1', function () {
+      const state = {
+        allRouters: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllRoutersSuccess(state, data)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.total).to.equal(3)
+      expect(state.allRouters.items.length).to.equal(3)
+      expect(state.allRouters.currentPage).to.equal(1)
+      expect(state.allRouters.currentQuery).to.equal('test query')
+      expect(state.allRouters.currentStatus).to.equal('warning')
+    })
+
+    it('getAllRoutersSuccess page 2', function () {
+      const state = {
+        allRouters: {
+          loading: false,
+          items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          total: 3,
+          currentPage: 1,
+          currentQuery: 'test query',
+          currentStatus: 'warning'
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
+          total: 4
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 2
+      }
+
+      getAllRoutersSuccess(state, data)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.total).to.equal(7)
+      expect(state.allRouters.items.length).to.equal(7)
+      expect(state.allRouters.currentPage).to.equal(2)
+      expect(state.allRouters.currentQuery).to.equal('test query')
+      expect(state.allRouters.currentStatus).to.equal('warning')
+    })
+
+    it('getAllRoutersFailing', function () {
+      const state = {
+        allRouters: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllRoutersFailure(state, error)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.endReached).to.equal(true)
+      expect(state.allRouters.items.length).to.equal(3)
+    })
+  })
+
+  /* Services */
+  describe('http services mutations', function () {
+    it('getAllServicesRequest', function () {
+      const state = {
+        allServices: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllServicesRequest(state)
+
+      expect(state.allServices.loading).to.equal(true)
+      expect(state.allServices.items.length).to.equal(3)
+    })
+
+    it('getAllServicesSuccess page 1', function () {
+      const state = {
+        allServices: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllServicesSuccess(state, data)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.total).to.equal(3)
+      expect(state.allServices.items.length).to.equal(3)
+      expect(state.allServices.currentPage).to.equal(1)
+      expect(state.allServices.currentQuery).to.equal('test query')
+      expect(state.allServices.currentStatus).to.equal('warning')
+    })
+
+    it('getAllServicesSuccess page 2', function () {
+      const state = {
+        allServices: {
+          loading: false,
+          items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          total: 3,
+          currentPage: 1,
+          currentQuery: 'test query',
+          currentStatus: 'warning'
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
+          total: 4
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 2
+      }
+
+      getAllServicesSuccess(state, data)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.total).to.equal(7)
+      expect(state.allServices.items.length).to.equal(7)
+      expect(state.allServices.currentPage).to.equal(2)
+      expect(state.allServices.currentQuery).to.equal('test query')
+      expect(state.allServices.currentStatus).to.equal('warning')
+    })
+
+    it('getAllServicesFailing', function () {
+      const state = {
+        allServices: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllServicesFailure(state, error)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.endReached).to.equal(true)
+      expect(state.allServices.items.length).to.equal(3)
+    })
+  })
+
+  /* Middlewares */
+  describe('http middlewares mutations', function () {
+    it('getAllMiddlewaresRequest', function () {
+      const state = {
+        allMiddlewares: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllMiddlewaresRequest(state)
+
+      expect(state.allMiddlewares.loading).to.equal(true)
+      expect(state.allMiddlewares.items.length).to.equal(3)
+    })
+
+    it('getAllMiddlewaresSuccess page 1', function () {
+      const state = {
+        allMiddlewares: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllMiddlewaresSuccess(state, data)
+
+      expect(state.allMiddlewares.loading).to.equal(false)
+      expect(state.allMiddlewares.total).to.equal(3)
+      expect(state.allMiddlewares.items.length).to.equal(3)
+      expect(state.allMiddlewares.currentPage).to.equal(1)
+      expect(state.allMiddlewares.currentQuery).to.equal('test query')
+      expect(state.allMiddlewares.currentStatus).to.equal('warning')
+    })
+
+    it('getAllMiddlewaresSuccess page 2', function () {
+      const state = {
+        allMiddlewares: {
+          loading: false,
+          items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          total: 3,
+          currentPage: 1,
+          currentQuery: 'test query',
+          currentStatus: 'warning'
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
+          total: 4
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 2
+      }
+
+      getAllMiddlewaresSuccess(state, data)
+
+      expect(state.allMiddlewares.loading).to.equal(false)
+      expect(state.allMiddlewares.total).to.equal(7)
+      expect(state.allMiddlewares.items.length).to.equal(7)
+      expect(state.allMiddlewares.currentPage).to.equal(2)
+      expect(state.allMiddlewares.currentQuery).to.equal('test query')
+      expect(state.allMiddlewares.currentStatus).to.equal('warning')
+    })
+
+    it('getAllMiddlewaresFailing', function () {
+      const state = {
+        allMiddlewares: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllMiddlewaresFailure(state, error)
+
+      expect(state.allMiddlewares.loading).to.equal(false)
+      expect(state.allMiddlewares.endReached).to.equal(true)
+      expect(state.allMiddlewares.items.length).to.equal(3)
+    })
+  })
+})

webui/src/store/tcp/mutations.js

@@ -1,37 +1,32 @@
+import { withPagination } from '../../_helpers/Mutations'
+
 // ----------------------------
 // Get All Routers
 // ----------------------------
 export function getAllRoutersRequest (state) {
-  state.allRouters.loading = true
+  withPagination('request', { statePath: 'allRouters' })(state)
 }
 
 export function getAllRoutersSuccess (state, data) {
-  const { body, query = '', status = '', page } = data
+  const { query = '', status = '' } = 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
   }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allRouters'
+  })(state, data)
 }
 
 export function getAllRoutersFailure (state, error) {
-  state.allRouters = {
-    ...state.allRouters,
-    loading: false,
-    error,
-    endReached: error.message.includes('invalid request: page:')
-  }
+  withPagination('failure', { statePath: 'allRouters' })(state, error)
 }
 
 export function getAllRoutersClear (state) {
@@ -61,36 +56,29 @@ export function getRouterByNameClear (state) {
 // Get All Services
 // ----------------------------
 export function getAllServicesRequest (state) {
-  state.allServices.loading = true
+  withPagination('request', { statePath: 'allServices' })(state)
 }
 
 export function getAllServicesSuccess (state, data) {
-  const { body, query = '', status = '', page } = data
+  const { query = '', status = '' } = 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
   }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allServices'
+  })(state, data)
 }
 
 export function getAllServicesFailure (state, error) {
-  state.allServices = {
-    ...state.allServices,
-    loading: false,
-    error,
-    endReached: error.message.includes('invalid request: page:')
-  }
+  withPagination('failure', { statePath: 'allServices' })(state, error)
 }
 
 export function getAllServicesClear (state) {

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

@@ -0,0 +1,197 @@
+import { expect } from 'chai'
+import store from './index.js'
+
+const {
+  getAllRoutersRequest,
+  getAllRoutersSuccess,
+  getAllRoutersFailure,
+  getAllServicesRequest,
+  getAllServicesSuccess,
+  getAllServicesFailure
+} = store.mutations
+
+describe('tcp mutations', function () {
+  /* Routers */
+  describe('tcp routers mutations', function () {
+    it('getAllRoutersRequest', function () {
+      const state = {
+        allRouters: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllRoutersRequest(state)
+
+      expect(state.allRouters.loading).to.equal(true)
+      expect(state.allRouters.items.length).to.equal(3)
+    })
+
+    it('getAllRoutersSuccess page 1', function () {
+      const state = {
+        allRouters: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllRoutersSuccess(state, data)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.total).to.equal(3)
+      expect(state.allRouters.items.length).to.equal(3)
+      expect(state.allRouters.currentPage).to.equal(1)
+      expect(state.allRouters.currentQuery).to.equal('test query')
+      expect(state.allRouters.currentStatus).to.equal('warning')
+    })
+
+    it('getAllRoutersSuccess page 2', function () {
+      const state = {
+        allRouters: {
+          loading: false,
+          items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          total: 3,
+          currentPage: 1,
+          currentQuery: 'test query',
+          currentStatus: 'warning'
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
+          total: 4
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 2
+      }
+
+      getAllRoutersSuccess(state, data)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.total).to.equal(7)
+      expect(state.allRouters.items.length).to.equal(7)
+      expect(state.allRouters.currentPage).to.equal(2)
+      expect(state.allRouters.currentQuery).to.equal('test query')
+      expect(state.allRouters.currentStatus).to.equal('warning')
+    })
+
+    it('getAllRoutersFailing', function () {
+      const state = {
+        allRouters: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllRoutersFailure(state, error)
+
+      expect(state.allRouters.loading).to.equal(false)
+      expect(state.allRouters.endReached).to.equal(true)
+      expect(state.allRouters.items.length).to.equal(3)
+    })
+  })
+
+  /* Services */
+  describe('tcp services mutations', function () {
+    it('getAllServicesRequest', function () {
+      const state = {
+        allServices: {
+          items: [{}, {}, {}]
+        }
+      }
+
+      getAllServicesRequest(state)
+
+      expect(state.allServices.loading).to.equal(true)
+      expect(state.allServices.items.length).to.equal(3)
+    })
+
+    it('getAllServicesSuccess page 1', function () {
+      const state = {
+        allServices: {
+          loading: true
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{}, {}, {}],
+          total: 3
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 1
+      }
+
+      getAllServicesSuccess(state, data)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.total).to.equal(3)
+      expect(state.allServices.items.length).to.equal(3)
+      expect(state.allServices.currentPage).to.equal(1)
+      expect(state.allServices.currentQuery).to.equal('test query')
+      expect(state.allServices.currentStatus).to.equal('warning')
+    })
+
+    it('getAllServicesSuccess page 2', function () {
+      const state = {
+        allServices: {
+          loading: false,
+          items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+          total: 3,
+          currentPage: 1,
+          currentQuery: 'test query',
+          currentStatus: 'warning'
+        }
+      }
+
+      const data = {
+        body: {
+          data: [{ id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }],
+          total: 4
+        },
+        query: 'test query',
+        status: 'warning',
+        page: 2
+      }
+
+      getAllServicesSuccess(state, data)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.total).to.equal(7)
+      expect(state.allServices.items.length).to.equal(7)
+      expect(state.allServices.currentPage).to.equal(2)
+      expect(state.allServices.currentQuery).to.equal('test query')
+      expect(state.allServices.currentStatus).to.equal('warning')
+    })
+
+    it('getAllServicesFailing', function () {
+      const state = {
+        allServices: {
+          items: [{}, {}, {}],
+          loading: true
+        }
+      }
+
+      const error = { message: 'invalid request: page: 3, per_page: 10' }
+
+      getAllServicesFailure(state, error)
+
+      expect(state.allServices.loading).to.equal(false)
+      expect(state.allServices.endReached).to.equal(true)
+      expect(state.allServices.items.length).to.equal(3)
+    })
+  })
+})