mirror of
https://github.com/containous/traefik.git
synced 2024-12-22 13:34:03 +03:00
WebUI: add udp pages
This commit is contained in:
parent
336dd1d5ba
commit
7a5d2a3bd9
@ -32,6 +32,7 @@ type features struct {
|
|||||||
type overview struct {
|
type overview struct {
|
||||||
HTTP schemeOverview `json:"http"`
|
HTTP schemeOverview `json:"http"`
|
||||||
TCP schemeOverview `json:"tcp"`
|
TCP schemeOverview `json:"tcp"`
|
||||||
|
UDP schemeOverview `json:"udp"`
|
||||||
Features features `json:"features,omitempty"`
|
Features features `json:"features,omitempty"`
|
||||||
Providers []string `json:"providers,omitempty"`
|
Providers []string `json:"providers,omitempty"`
|
||||||
}
|
}
|
||||||
@ -47,6 +48,10 @@ func (h Handler) getOverview(rw http.ResponseWriter, request *http.Request) {
|
|||||||
Routers: getTCPRouterSection(h.runtimeConfiguration.TCPRouters),
|
Routers: getTCPRouterSection(h.runtimeConfiguration.TCPRouters),
|
||||||
Services: getTCPServiceSection(h.runtimeConfiguration.TCPServices),
|
Services: getTCPServiceSection(h.runtimeConfiguration.TCPServices),
|
||||||
},
|
},
|
||||||
|
UDP: schemeOverview{
|
||||||
|
Routers: getUDPRouterSection(h.runtimeConfiguration.UDPRouters),
|
||||||
|
Services: getUDPServiceSection(h.runtimeConfiguration.UDPServices),
|
||||||
|
},
|
||||||
Features: getFeatures(h.staticConfig),
|
Features: getFeatures(h.staticConfig),
|
||||||
Providers: getProviders(h.staticConfig),
|
Providers: getProviders(h.staticConfig),
|
||||||
}
|
}
|
||||||
@ -155,6 +160,44 @@ func getTCPServiceSection(services map[string]*runtime.TCPServiceInfo) *section
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func getUDPRouterSection(routers map[string]*runtime.UDPRouterInfo) *section {
|
||||||
|
var countErrors int
|
||||||
|
var countWarnings int
|
||||||
|
for _, rt := range routers {
|
||||||
|
switch rt.Status {
|
||||||
|
case runtime.StatusDisabled:
|
||||||
|
countErrors++
|
||||||
|
case runtime.StatusWarning:
|
||||||
|
countWarnings++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return §ion{
|
||||||
|
Total: len(routers),
|
||||||
|
Warnings: countWarnings,
|
||||||
|
Errors: countErrors,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
func getUDPServiceSection(services map[string]*runtime.UDPServiceInfo) *section {
|
||||||
|
var countErrors int
|
||||||
|
var countWarnings int
|
||||||
|
for _, svc := range services {
|
||||||
|
switch svc.Status {
|
||||||
|
case runtime.StatusDisabled:
|
||||||
|
countErrors++
|
||||||
|
case runtime.StatusWarning:
|
||||||
|
countWarnings++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return §ion{
|
||||||
|
Total: len(services),
|
||||||
|
Warnings: countWarnings,
|
||||||
|
Errors: countErrors,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
func getProviders(conf static.Configuration) []string {
|
func getProviders(conf static.Configuration) []string {
|
||||||
if conf.Providers == nil {
|
if conf.Providers == nil {
|
||||||
return nil
|
return nil
|
||||||
|
12
pkg/api/testdata/overview-dynamic.json
vendored
12
pkg/api/testdata/overview-dynamic.json
vendored
@ -32,5 +32,17 @@
|
|||||||
"total": 3,
|
"total": 3,
|
||||||
"warnings": 1
|
"warnings": 1
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"udp": {
|
||||||
|
"routers": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
12
pkg/api/testdata/overview-empty.json
vendored
12
pkg/api/testdata/overview-empty.json
vendored
@ -32,5 +32,17 @@
|
|||||||
"total": 0,
|
"total": 0,
|
||||||
"warnings": 0
|
"warnings": 0
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"udp": {
|
||||||
|
"routers": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
12
pkg/api/testdata/overview-features.json
vendored
12
pkg/api/testdata/overview-features.json
vendored
@ -32,5 +32,17 @@
|
|||||||
"total": 0,
|
"total": 0,
|
||||||
"warnings": 0
|
"warnings": 0
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"udp": {
|
||||||
|
"routers": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
12
pkg/api/testdata/overview-providers.json
vendored
12
pkg/api/testdata/overview-providers.json
vendored
@ -41,5 +41,17 @@
|
|||||||
"total": 0,
|
"total": 0,
|
||||||
"warnings": 0
|
"warnings": 0
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"udp": {
|
||||||
|
"routers": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"errors": 0,
|
||||||
|
"total": 0,
|
||||||
|
"warnings": 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -100,6 +100,7 @@ const columnsByResource = {
|
|||||||
'tls',
|
'tls',
|
||||||
'provider'
|
'provider'
|
||||||
],
|
],
|
||||||
|
udpRouters: ['status', 'entryPoints', 'name', 'service', 'provider'],
|
||||||
services: ['status', 'name', 'type', 'servers', 'provider'],
|
services: ['status', 'name', 'type', 'servers', 'provider'],
|
||||||
middlewares: ['status', 'name', 'type', 'provider']
|
middlewares: ['status', 'name', 'type', 'provider']
|
||||||
}
|
}
|
||||||
@ -111,12 +112,18 @@ const propsByType = {
|
|||||||
'tcp-routers': {
|
'tcp-routers': {
|
||||||
columns: columnsByResource.routers
|
columns: columnsByResource.routers
|
||||||
},
|
},
|
||||||
|
'udp-routers': {
|
||||||
|
columns: columnsByResource.udpRouters
|
||||||
|
},
|
||||||
'http-services': {
|
'http-services': {
|
||||||
columns: columnsByResource.services
|
columns: columnsByResource.services
|
||||||
},
|
},
|
||||||
'tcp-services': {
|
'tcp-services': {
|
||||||
columns: columnsByResource.services
|
columns: columnsByResource.services
|
||||||
},
|
},
|
||||||
|
'udp-services': {
|
||||||
|
columns: columnsByResource.services
|
||||||
|
},
|
||||||
'http-middlewares': {
|
'http-middlewares': {
|
||||||
columns: columnsByResource.middlewares
|
columns: columnsByResource.middlewares
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,7 @@ function getAllRouters (params) {
|
|||||||
.then(response => {
|
.then(response => {
|
||||||
const { data = [], headers } = response
|
const { data = [], headers } = response
|
||||||
const total = getTotal(headers, params)
|
const total = getTotal(headers, params)
|
||||||
console.log('Success -> HttpService -> getAllRouters', response.data)
|
console.log('Success -> TcpService -> getAllRouters', response.data)
|
||||||
return { data, total }
|
return { data, total }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -16,7 +16,7 @@ function getAllRouters (params) {
|
|||||||
function getRouterByName (name) {
|
function getRouterByName (name) {
|
||||||
return APP.api.get(`${apiBase}/routers/${name}`)
|
return APP.api.get(`${apiBase}/routers/${name}`)
|
||||||
.then(body => {
|
.then(body => {
|
||||||
console.log('Success -> HttpService -> getRouterByName', body.data)
|
console.log('Success -> TcpService -> getRouterByName', body.data)
|
||||||
return body.data
|
return body.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -26,7 +26,7 @@ function getAllServices (params) {
|
|||||||
.then(response => {
|
.then(response => {
|
||||||
const { data = [], headers } = response
|
const { data = [], headers } = response
|
||||||
const total = getTotal(headers, params)
|
const total = getTotal(headers, params)
|
||||||
console.log('Success -> HttpService -> getAllServices', response.data)
|
console.log('Success -> TcpService -> getAllServices', response.data)
|
||||||
return { data, total }
|
return { data, total }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -34,7 +34,7 @@ function getAllServices (params) {
|
|||||||
function getServiceByName (name) {
|
function getServiceByName (name) {
|
||||||
return APP.api.get(`${apiBase}/services/${name}`)
|
return APP.api.get(`${apiBase}/services/${name}`)
|
||||||
.then(body => {
|
.then(body => {
|
||||||
console.log('Success -> HttpService -> getServiceByName', body.data)
|
console.log('Success -> TcpService -> getServiceByName', body.data)
|
||||||
return body.data
|
return body.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
47
webui/src/_services/UdpService.js
Normal file
47
webui/src/_services/UdpService.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { APP } from '../_helpers/APP'
|
||||||
|
import { getTotal } from './utils'
|
||||||
|
|
||||||
|
const apiBase = '/udp'
|
||||||
|
|
||||||
|
function getAllRouters (params) {
|
||||||
|
return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
|
||||||
|
.then(response => {
|
||||||
|
const { data = [], headers } = response
|
||||||
|
const total = getTotal(headers, params)
|
||||||
|
console.log('Success -> UdpService -> getAllRouters', response.data)
|
||||||
|
return { data, total }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRouterByName (name) {
|
||||||
|
return APP.api.get(`${apiBase}/routers/${name}`)
|
||||||
|
.then(body => {
|
||||||
|
console.log('Success -> UdpService -> getRouterByName', body.data)
|
||||||
|
return body.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAllServices (params) {
|
||||||
|
return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
|
||||||
|
.then(response => {
|
||||||
|
const { data = [], headers } = response
|
||||||
|
const total = getTotal(headers, params)
|
||||||
|
console.log('Success -> UdpService -> getAllServices', response.data)
|
||||||
|
return { data, total }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getServiceByName (name) {
|
||||||
|
return APP.api.get(`${apiBase}/services/${name}`)
|
||||||
|
.then(body => {
|
||||||
|
console.log('Success -> UdpService -> getServiceByName', body.data)
|
||||||
|
return body.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getAllRouters,
|
||||||
|
getRouterByName,
|
||||||
|
getAllServices,
|
||||||
|
getServiceByName
|
||||||
|
}
|
@ -10,6 +10,7 @@
|
|||||||
<q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
|
<q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
|
||||||
<q-route-tab to="/http" icon="eva-globe-outline" no-caps label="HTTP" />
|
<q-route-tab to="/http" icon="eva-globe-outline" no-caps label="HTTP" />
|
||||||
<q-route-tab to="/tcp" icon="eva-globe-2-outline" no-caps label="TCP" />
|
<q-route-tab to="/tcp" icon="eva-globe-2-outline" no-caps label="TCP" />
|
||||||
|
<q-route-tab to="/udp" icon="eva-globe-2-outline" no-caps label="UDP" />
|
||||||
</q-tabs>
|
</q-tabs>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
|
<q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<q-scroll-area :thumb-style="appThumbStyle" style="height:100%;">
|
<q-scroll-area :thumb-style="appThumbStyle" style="height:100%;">
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="row items-start no-wrap">
|
<div class="row items-start no-wrap">
|
||||||
<div class="col-3">
|
<div class="col-3" v-if="showStatus">
|
||||||
<div class="text-subtitle2 text-table">Status</div>
|
<div class="text-subtitle2 text-table">Status</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-9">
|
<div class="col-9">
|
||||||
@ -15,7 +15,7 @@
|
|||||||
<div v-for="(server, index) in data.loadBalancer.servers" :key="index">
|
<div v-for="(server, index) in data.loadBalancer.servers" :key="index">
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="row items-center no-wrap">
|
<div class="row items-center no-wrap">
|
||||||
<div class="col-3">
|
<div class="col-3" v-if="showStatus">
|
||||||
<div class="block-right-text">
|
<div class="block-right-text">
|
||||||
<avatar-state v-if="data.serverStatus" :state="data.serverStatus[server.url || server.address] | status "/>
|
<avatar-state v-if="data.serverStatus" :state="data.serverStatus[server.url || server.address] | status "/>
|
||||||
<avatar-state v-if="!data.serverStatus" :state="'DOWN' | status"/>
|
<avatar-state v-if="!data.serverStatus" :state="'DOWN' | status"/>
|
||||||
@ -41,13 +41,16 @@ import AvatarState from './AvatarState'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PanelServers',
|
name: 'PanelServers',
|
||||||
props: ['data', 'dense'],
|
props: ['data', 'dense', 'hasStatus'],
|
||||||
components: {
|
components: {
|
||||||
AvatarState
|
AvatarState
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isDense () {
|
isDense () {
|
||||||
return this.dense !== undefined
|
return this.dense !== undefined
|
||||||
|
},
|
||||||
|
showStatus () {
|
||||||
|
return this.hasStatus !== undefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
|
@ -109,7 +109,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 col-md-4 q-mb-lg path-block">
|
<div class="col-12 col-md-4 q-mb-lg path-block" v-if="protocol !== 'udp'">
|
||||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||||
<q-icon name="eva-shield"></q-icon>
|
<q-icon name="eva-shield"></q-icon>
|
||||||
<div class="app-title-label">TLS</div>
|
<div class="app-title-label">TLS</div>
|
||||||
@ -192,6 +192,7 @@ export default {
|
|||||||
},
|
},
|
||||||
...mapGetters('http', { http_routerByName: 'routerByName' }),
|
...mapGetters('http', { http_routerByName: 'routerByName' }),
|
||||||
...mapGetters('tcp', { tcp_routerByName: 'routerByName' }),
|
...mapGetters('tcp', { tcp_routerByName: 'routerByName' }),
|
||||||
|
...mapGetters('udp', { udp_routerByName: 'routerByName' }),
|
||||||
hasMiddlewares () {
|
hasMiddlewares () {
|
||||||
return this.$route.meta.protocol === 'http' && this.middlewares.length > 0
|
return this.$route.meta.protocol === 'http' && this.middlewares.length > 0
|
||||||
},
|
},
|
||||||
@ -208,6 +209,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
...mapActions('http', { http_getRouterByName: 'getRouterByName', getMiddlewareByName: 'getMiddlewareByName' }),
|
...mapActions('http', { http_getRouterByName: 'getRouterByName', getMiddlewareByName: 'getMiddlewareByName' }),
|
||||||
...mapActions('tcp', { tcp_getRouterByName: 'getRouterByName' }),
|
...mapActions('tcp', { tcp_getRouterByName: 'getRouterByName' }),
|
||||||
|
...mapActions('udp', { udp_getRouterByName: 'getRouterByName' }),
|
||||||
...mapActions('entrypoints', { getEntrypointsByName: 'getByName' }),
|
...mapActions('entrypoints', { getEntrypointsByName: 'getByName' }),
|
||||||
refreshAll () {
|
refreshAll () {
|
||||||
if (this.routerByName.loading) {
|
if (this.routerByName.loading) {
|
||||||
@ -274,6 +276,7 @@ export default {
|
|||||||
clearInterval(this.timeOutGetAll)
|
clearInterval(this.timeOutGetAll)
|
||||||
this.$store.commit('http/getRouterByNameClear')
|
this.$store.commit('http/getRouterByNameClear')
|
||||||
this.$store.commit('tcp/getRouterByNameClear')
|
this.$store.commit('tcp/getRouterByNameClear')
|
||||||
|
this.$store.commit('udp/getRouterByNameClear')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -54,7 +54,7 @@
|
|||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row items-start q-col-gutter-md">
|
<div class="row items-start q-col-gutter-md">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<panel-servers dense :data="serviceByName.item"/>
|
<panel-servers dense :data="serviceByName.item" :hasStatus="serviceByName.item.serverStatus"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -173,6 +173,7 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
...mapGetters('http', { http_serviceByName: 'serviceByName' }),
|
...mapGetters('http', { http_serviceByName: 'serviceByName' }),
|
||||||
...mapGetters('tcp', { tcp_serviceByName: 'serviceByName' }),
|
...mapGetters('tcp', { tcp_serviceByName: 'serviceByName' }),
|
||||||
|
...mapGetters('udp', { udp_serviceByName: 'serviceByName' }),
|
||||||
protocol () {
|
protocol () {
|
||||||
return this.$route.meta.protocol
|
return this.$route.meta.protocol
|
||||||
},
|
},
|
||||||
@ -189,6 +190,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
...mapActions('http', { http_getServiceByName: 'getServiceByName', http_getRouterByName: 'getRouterByName' }),
|
...mapActions('http', { http_getServiceByName: 'getServiceByName', http_getRouterByName: 'getRouterByName' }),
|
||||||
...mapActions('tcp', { tcp_getServiceByName: 'getServiceByName', tcp_getRouterByName: 'getRouterByName' }),
|
...mapActions('tcp', { tcp_getServiceByName: 'getServiceByName', tcp_getRouterByName: 'getRouterByName' }),
|
||||||
|
...mapActions('udp', { udp_getServiceByName: 'getServiceByName', udp_getRouterByName: 'getRouterByName' }),
|
||||||
refreshAll () {
|
refreshAll () {
|
||||||
if (this.serviceByName.loading) {
|
if (this.serviceByName.loading) {
|
||||||
return
|
return
|
||||||
@ -238,6 +240,8 @@ export default {
|
|||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
clearInterval(this.timeOutGetAll)
|
clearInterval(this.timeOutGetAll)
|
||||||
this.$store.commit('http/getServiceByNameClear')
|
this.$store.commit('http/getServiceByNameClear')
|
||||||
|
this.$store.commit('tcp/getServiceByNameClear')
|
||||||
|
this.$store.commit('udp/getServiceByNameClear')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -70,6 +70,29 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="app-section">
|
||||||
|
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
|
||||||
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||||
|
<q-icon name="eva-globe-3"></q-icon>
|
||||||
|
<div class="app-title-label">UDP</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="!loadingOverview" class="row items-center q-col-gutter-lg">
|
||||||
|
<div
|
||||||
|
v-for="(overviewUDP, index) in allUDP" :key="index"
|
||||||
|
class="col-12 col-sm-6 col-md-4">
|
||||||
|
<panel-chart :name="index" :data="overviewUDP" type="udp"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="row items-center q-col-gutter-lg">
|
||||||
|
<div class="col-12 col-sm-6 col-md-4">
|
||||||
|
<p v-for="n in 6" :key="n" class="flex">
|
||||||
|
<SkeletonBox :min-width="15" :max-width="15" style="margin-right: 2%"/> <SkeletonBox :min-width="50" :max-width="83"/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="app-section">
|
<section class="app-section">
|
||||||
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
|
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-lg q-pb-lg">
|
||||||
<div class="row no-wrap items-center q-mb-lg app-title">
|
<div class="row no-wrap items-center q-mb-lg app-title">
|
||||||
@ -157,6 +180,9 @@ export default {
|
|||||||
allTCP () {
|
allTCP () {
|
||||||
return this.overviewAll.items.tcp
|
return this.overviewAll.items.tcp
|
||||||
},
|
},
|
||||||
|
allUDP () {
|
||||||
|
return this.overviewAll.items.udp
|
||||||
|
},
|
||||||
allFeatures () {
|
allFeatures () {
|
||||||
return this.overviewAll.items.features
|
return this.overviewAll.items.features
|
||||||
},
|
},
|
||||||
|
94
webui/src/pages/udp/Routers.vue
Normal file
94
webui/src/pages/udp/Routers.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<page-default>
|
||||||
|
<section class="app-section">
|
||||||
|
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl">
|
||||||
|
<div class="row no-wrap items-center q-mb-lg">
|
||||||
|
<tool-bar-table :status.sync="status" :filter.sync="filter"/>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center q-col-gutter-lg">
|
||||||
|
<div class="col-12">
|
||||||
|
<main-table
|
||||||
|
ref="mainTable"
|
||||||
|
v-bind="getTableProps({ type: 'udp-routers' })"
|
||||||
|
:data="allRouters.items"
|
||||||
|
:onLoadMore="handleLoadMore"
|
||||||
|
:endReached="allRouters.endReached"
|
||||||
|
:loading="allRouters.loading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</page-default>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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: 'PageUDPRouters',
|
||||||
|
mixins: [
|
||||||
|
GetTablePropsMixin,
|
||||||
|
PaginationMixin({
|
||||||
|
fetchMethod: 'getAllRoutersWithParams',
|
||||||
|
scrollerRef: 'mainTable.$refs.scroller',
|
||||||
|
pollingIntervalTime: 5000
|
||||||
|
})
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
PageDefault,
|
||||||
|
ToolBarTable,
|
||||||
|
MainTable
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
filter: '',
|
||||||
|
status: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters('udp', { allRouters: 'allRouters' })
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('udp', { getAllRouters: 'getAllRouters' }),
|
||||||
|
getAllRoutersWithParams (params) {
|
||||||
|
return this.getAllRouters({
|
||||||
|
query: this.filter,
|
||||||
|
status: this.status,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
refreshAll () {
|
||||||
|
if (this.allRouters.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.initFetch()
|
||||||
|
},
|
||||||
|
handleLoadMore ({ page = 1 } = {}) {
|
||||||
|
return this.fetchMore({ page })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'status' () {
|
||||||
|
this.refreshAll()
|
||||||
|
},
|
||||||
|
'filter' () {
|
||||||
|
this.refreshAll()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
this.$store.commit('http/getAllRoutersClear')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
95
webui/src/pages/udp/Services.vue
Normal file
95
webui/src/pages/udp/Services.vue
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<page-default>
|
||||||
|
|
||||||
|
<section class="app-section">
|
||||||
|
<div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-xl">
|
||||||
|
<div class="row no-wrap items-center q-mb-lg">
|
||||||
|
<tool-bar-table :status.sync="status" :filter.sync="filter"/>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center q-col-gutter-lg">
|
||||||
|
<div class="col-12">
|
||||||
|
<main-table
|
||||||
|
ref="mainTable"
|
||||||
|
v-bind="getTableProps({ type: 'udp-services' })"
|
||||||
|
:data="allServices.items"
|
||||||
|
:onLoadMore="handleLoadMore"
|
||||||
|
:endReached="allServices.endReached"
|
||||||
|
:loading="allServices.loading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</page-default>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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: 'PageUDPServices',
|
||||||
|
mixins: [
|
||||||
|
GetTablePropsMixin,
|
||||||
|
PaginationMixin({
|
||||||
|
fetchMethod: 'getAllServicesWithParams',
|
||||||
|
scrollerRef: 'mainTable.$refs.scroller',
|
||||||
|
pollingIntervalTime: 5000
|
||||||
|
})
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
PageDefault,
|
||||||
|
ToolBarTable,
|
||||||
|
MainTable
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
filter: '',
|
||||||
|
status: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters('udp', { allServices: 'allServices' })
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('udp', { getAllServices: 'getAllServices' }),
|
||||||
|
getAllServicesWithParams (params) {
|
||||||
|
return this.getAllServices({
|
||||||
|
query: this.filter,
|
||||||
|
status: this.status,
|
||||||
|
...params
|
||||||
|
})
|
||||||
|
},
|
||||||
|
refreshAll () {
|
||||||
|
if (this.allServices.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.initFetch()
|
||||||
|
},
|
||||||
|
handleLoadMore ({ page = 1 } = {}) {
|
||||||
|
return this.fetchMore({ page })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'status' () {
|
||||||
|
this.refreshAll()
|
||||||
|
},
|
||||||
|
'filter' () {
|
||||||
|
this.refreshAll()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
this.$store.commit('http/getAllServicesClear')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
@ -158,6 +158,65 @@ const routes = [
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/udp',
|
||||||
|
redirect: '/udp/routers',
|
||||||
|
component: LayoutDefault,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'routers',
|
||||||
|
name: 'udpRouters',
|
||||||
|
components: {
|
||||||
|
default: () => import('pages/udp/Routers.vue'),
|
||||||
|
NavBar: () => import('components/_commons/ToolBar.vue')
|
||||||
|
},
|
||||||
|
props: { default: true, NavBar: true },
|
||||||
|
meta: {
|
||||||
|
protocol: 'udp',
|
||||||
|
title: 'TCP Routers'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'routers/:name',
|
||||||
|
name: 'udpRouterDetail',
|
||||||
|
components: {
|
||||||
|
default: () => import('pages/_commons/RouterDetail.vue'),
|
||||||
|
NavBar: () => import('components/_commons/ToolBar.vue')
|
||||||
|
},
|
||||||
|
props: { default: true, NavBar: true },
|
||||||
|
meta: {
|
||||||
|
protocol: 'udp',
|
||||||
|
title: 'TCP Router Detail'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'services',
|
||||||
|
name: 'udpServices',
|
||||||
|
components: {
|
||||||
|
default: () => import('pages/udp/Services.vue'),
|
||||||
|
NavBar: () => import('components/_commons/ToolBar.vue')
|
||||||
|
},
|
||||||
|
props: { default: true, NavBar: true },
|
||||||
|
meta: {
|
||||||
|
protocol: 'udp',
|
||||||
|
title: 'TCP Services'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'services/:name',
|
||||||
|
name: 'udpServiceDetail',
|
||||||
|
components: {
|
||||||
|
default: () => import('pages/_commons/ServiceDetail.vue'),
|
||||||
|
NavBar: () => import('components/_commons/ToolBar.vue')
|
||||||
|
},
|
||||||
|
props: { default: true, NavBar: true },
|
||||||
|
meta: {
|
||||||
|
protocol: 'udp',
|
||||||
|
title: 'TCP Service Detail'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -5,6 +5,7 @@ import core from './core'
|
|||||||
import entrypoints from './entrypoints'
|
import entrypoints from './entrypoints'
|
||||||
import http from './http'
|
import http from './http'
|
||||||
import tcp from './tcp'
|
import tcp from './tcp'
|
||||||
|
import udp from './udp'
|
||||||
|
|
||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
|
|
||||||
@ -19,7 +20,8 @@ export default function (/* { ssrContext } */) {
|
|||||||
core,
|
core,
|
||||||
entrypoints,
|
entrypoints,
|
||||||
http,
|
http,
|
||||||
tcp
|
tcp,
|
||||||
|
udp
|
||||||
},
|
},
|
||||||
|
|
||||||
// enable strict mode (adds overhead!)
|
// enable strict mode (adds overhead!)
|
||||||
|
53
webui/src/store/udp/actions.js
Normal file
53
webui/src/store/udp/actions.js
Normal file
@ -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)
|
||||||
|
})
|
||||||
|
}
|
27
webui/src/store/udp/getters.js
Normal file
27
webui/src/store/udp/getters.js
Normal file
@ -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
|
||||||
|
}
|
12
webui/src/store/udp/index.js
Normal file
12
webui/src/store/udp/index.js
Normal file
@ -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
|
||||||
|
}
|
105
webui/src/store/udp/mutations.js
Normal file
105
webui/src/store/udp/mutations.js
Normal file
@ -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 = {}
|
||||||
|
}
|
197
webui/src/store/udp/mutations.spec.js
Normal file
197
webui/src/store/udp/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('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)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
6
webui/src/store/udp/state.js
Normal file
6
webui/src/store/udp/state.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
allRouters: {},
|
||||||
|
routerByName: {},
|
||||||
|
allServices: {},
|
||||||
|
serviceByName: {}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user