Web UI: Polling on tables

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