WebUI: add udp pages

webui/src/store/index.js

@@ -5,6 +5,7 @@ import core from './core'
 import entrypoints from './entrypoints'
 import http from './http'
 import tcp from './tcp'
+import udp from './udp'
 
 Vue.use(Vuex)
 
@@ -19,7 +20,8 @@ export default function (/* { ssrContext } */) {
       core,
       entrypoints,
       http,
-      tcp
+      tcp,
+      udp
     },
 
     // enable strict mode (adds overhead!)

webui/src/store/udp/actions.js

@@ -0,0 +1,53 @@
+import UdpService from '../../_services/UdpService'
+
+export function getAllRouters ({ commit }, params) {
+  commit('getAllRoutersRequest')
+  return UdpService.getAllRouters(params)
+    .then(body => {
+      commit('getAllRoutersSuccess', { body, ...params })
+      return body
+    })
+    .catch(error => {
+      commit('getAllRoutersFailure', error)
+      return Promise.reject(error)
+    })
+}
+
+export function getRouterByName ({ commit }, name) {
+  commit('getRouterByNameRequest')
+  return UdpService.getRouterByName(name)
+    .then(body => {
+      commit('getRouterByNameSuccess', body)
+      return body
+    })
+    .catch(error => {
+      commit('getRouterByNameFailure', error)
+      return Promise.reject(error)
+    })
+}
+
+export function getAllServices ({ commit }, params) {
+  commit('getAllServicesRequest')
+  return UdpService.getAllServices(params)
+    .then(body => {
+      commit('getAllServicesSuccess', { body, ...params })
+      return body
+    })
+    .catch(error => {
+      commit('getAllServicesFailure', error)
+      return Promise.reject(error)
+    })
+}
+
+export function getServiceByName ({ commit }, name) {
+  commit('getServiceByNameRequest')
+  return UdpService.getServiceByName(name)
+    .then(body => {
+      commit('getServiceByNameSuccess', body)
+      return body
+    })
+    .catch(error => {
+      commit('getServiceByNameFailure', error)
+      return Promise.reject(error)
+    })
+}

webui/src/store/udp/getters.js

@@ -0,0 +1,27 @@
+// ----------------------------
+// all Routers
+// ----------------------------
+export function allRouters (state) {
+  return state.allRouters
+}
+
+// ----------------------------
+// Router by Name
+// ----------------------------
+export function routerByName (state) {
+  return state.routerByName
+}
+
+// ----------------------------
+// all Services
+// ----------------------------
+export function allServices (state) {
+  return state.allServices
+}
+
+// ----------------------------
+// Service by Name
+// ----------------------------
+export function serviceByName (state) {
+  return state.serviceByName
+}

webui/src/store/udp/index.js

@@ -0,0 +1,12 @@
+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  getters,
+  mutations,
+  actions,
+  state
+}

webui/src/store/udp/mutations.js

@@ -0,0 +1,105 @@
+import { withPagination } from '../../_helpers/Mutations'
+
+// ----------------------------
+// Get All Routers
+// ----------------------------
+export function getAllRoutersRequest (state) {
+  withPagination('request', { statePath: 'allRouters' })(state)
+}
+
+export function getAllRoutersSuccess (state, data) {
+  const { query = '', status = '' } = data
+  const currentState = state.allRouters
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allRouters = {
+    ...state.allRouters,
+    currentQuery: query,
+    currentStatus: status
+  }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allRouters'
+  })(state, data)
+}
+
+export function getAllRoutersFailure (state, error) {
+  withPagination('failure', { statePath: 'allRouters' })(state, error)
+}
+
+export function getAllRoutersClear (state) {
+  state.allRouters = {}
+}
+
+// ----------------------------
+// Get Router By Name
+// ----------------------------
+export function getRouterByNameRequest (state) {
+  state.routerByName.loading = true
+}
+
+export function getRouterByNameSuccess (state, body) {
+  state.routerByName = { item: body, loading: false }
+}
+
+export function getRouterByNameFailure (state, error) {
+  state.routerByName = { error }
+}
+
+export function getRouterByNameClear (state) {
+  state.routerByName = {}
+}
+
+// ----------------------------
+// Get All Services
+// ----------------------------
+export function getAllServicesRequest (state) {
+  withPagination('request', { statePath: 'allServices' })(state)
+}
+
+export function getAllServicesSuccess (state, data) {
+  const { query = '', status = '' } = data
+  const currentState = state.allServices
+
+  const isSameContext = currentState.currentQuery === query && currentState.currentStatus === status
+
+  state.allServices = {
+    ...state.allServices,
+    currentQuery: query,
+    currentStatus: status
+  }
+
+  withPagination('success', {
+    isSameContext,
+    statePath: 'allServices'
+  })(state, data)
+}
+
+export function getAllServicesFailure (state, error) {
+  withPagination('failure', { statePath: 'allServices' })(state, error)
+}
+
+export function getAllServicesClear (state) {
+  state.allServices = {}
+}
+
+// ----------------------------
+// Get Service By Name
+// ----------------------------
+export function getServiceByNameRequest (state) {
+  state.serviceByName.loading = true
+}
+
+export function getServiceByNameSuccess (state, body) {
+  state.serviceByName = { item: body, loading: false }
+}
+
+export function getServiceByNameFailure (state, error) {
+  state.serviceByName = { error }
+}
+
+export function getServiceByNameClear (state) {
+  state.serviceByName = {}
+}

webui/src/store/udp/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('udp mutations', function () {
+  /* Routers */
+  describe('udp 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('udp 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)
+    })
+  })
+})

webui/src/store/udp/state.js

@@ -0,0 +1,6 @@
+export default {
+  allRouters: {},
+  routerByName: {},
+  allServices: {},
+  serviceByName: {}
+}