Web UI: Polling on tables
This commit is contained in:
Matthieu Hostache
Traefiker Bot
parent
7f085df240
commit
b3c9a50ead
20 changed files with 2028 additions and 361 deletions
|
|
@ -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: {
|
||||
|
|
|
|||
1257
webui/package-lock.json
generated
1257
webui/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ module.exports = function (ctx) {
|
|||
// --> boot files are part of "main.js"
|
||||
boot: [
|
||||
'_globals',
|
||||
'lodash',
|
||||
'api',
|
||||
'_hacks',
|
||||
'_init'
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
44
webui/src/_helpers/Mutations.js
Normal file
44
webui/src/_helpers/Mutations.js
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
74
webui/src/_mixins/Pagination.js
Normal file
74
webui/src/_mixins/Pagination.js
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import lodash from 'lodash'
|
||||
|
||||
import { APP } from '../_helpers/APP'
|
||||
|
||||
export default async ({ app, Vue }) => {
|
||||
Vue.prototype.$_ = app._ = APP._ = lodash
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
292
webui/src/store/http/mutations.spec.js
Normal file
292
webui/src/store/http/mutations.spec.js
Normal file
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
197
webui/src/store/tcp/mutations.spec.js
Normal file
197
webui/src/store/tcp/mutations.spec.js
Normal file
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue