homelab/traefik
1
0
Fork 0
Code Activity

Added router priority to webui's list and detail page

Browse source
This commit is contained in:
bendre90 2023-01-09 17:24:05 +01:00 • committed by GitHub
parent cd90b9761a
commit 8cd4923e72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 2913 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

26
webui/src/_mixins/GetTableProps.js
View file

@ -11,6 +11,7 @@ const allColumns = [
required: true,
label: 'Status',
align: 'left',
sortable: true,
fieldToProps: row => ({
state: row.status === 'enabled' ? 'positive' : 'negative'
}),
@ -20,6 +21,7 @@ const allColumns = [
name: 'tls',
align: 'left',
label: 'TLS',
sortable: false,
fieldToProps: row => ({ isTLS: row.tls }),
component: TLSState
},
@ -27,6 +29,7 @@ const allColumns = [
name: 'rule',
align: 'left',
label: 'Rule',
sortable: true,
component: QChip,
fieldToProps: () => ({ class: 'app-chip app-chip-rule', dense: true }),
content: row => row.rule
@ -35,6 +38,7 @@ const allColumns = [
name: 'entryPoints',
align: 'left',
label: 'Entrypoints',
sortable: true,
component: Chips,
fieldToProps: row => ({
classNames: 'app-chip app-chip-entry-points',
@ -46,6 +50,7 @@ const allColumns = [
name: 'name',
align: 'left',
label: 'Name',
sortable: true,
component: QChip,
fieldToProps: () => ({ class: 'app-chip app-chip-name', dense: true }),
content: row => row.name
@ -54,6 +59,7 @@ const allColumns = [
name: 'type',
align: 'left',
label: 'Type',
sortable: true,
component: QChip,
fieldToProps: () => ({
class: 'app-chip app-chip-entry-points',
@ -65,6 +71,7 @@ const allColumns = [
name: 'servers',
align: 'right',
label: 'Servers',
sortable: true,
fieldToProps: () => ({ class: 'servers-label' }),
content: function (value) {
if (value.loadBalancer && value.loadBalancer.servers) {
@ -78,6 +85,7 @@ const allColumns = [
align: 'left',
label: 'Service',
component: QChip,
sortable: true,
fieldToProps: () => ({ class: 'app-chip app-chip-service', dense: true }),
content: row => row.service
},
@ -85,8 +93,23 @@ const allColumns = [
name: 'provider',
align: 'center',
label: 'Provider',
sortable: true,
fieldToProps: row => ({ name: row.provider }),
component: ProviderIcon
},
{
name: 'priority',
align: 'left',
label: 'Priority',
sortable: true,
component: QChip,
fieldToProps: () => ({ class: 'app-chip app-chip-accent', dense: true }),
content: row => {
return {
short: String(row.priority).length > 10 ? String(row.priority).substring(0, 10) + '...' : row.priority,
long: row.priority
}
}
}
]
@ -98,7 +121,8 @@ const columnsByResource = {
'name',
'service',
'tls',
'provider'
'provider',
'priority'
],
udpRouters: ['status', 'entryPoints', 'name', 'service', 'provider'],
services: ['status', 'name', 'type', 'servers', 'provider'],

6
webui/src/_services/HttpService.js
View file

@ -4,7 +4,7 @@ import { getTotal } from './utils'
const apiBase = '/http'
function getAllRouters (params) {
return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}&serviceName=${params.serviceName}&middlewareName=${params.middlewareName}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)
@ -22,7 +22,7 @@ function getRouterByName (name) {
}
function getAllServices (params) {
return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)
@ -40,7 +40,7 @@ function getServiceByName (name) {
}
function getAllMiddlewares (params) {
return APP.api.get(`${apiBase}/middlewares?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
return APP.api.get(`${apiBase}/middlewares?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)

6
webui/src/_services/TcpService.js
View file

@ -4,7 +4,7 @@ import { getTotal } from './utils'
const apiBase = '/tcp'
function getAllRouters (params) {
return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}&serviceName=${params.serviceName}&middlewareName=${params.middlewareName}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)
@ -22,7 +22,7 @@ function getRouterByName (name) {
}
function getAllServices (params) {
return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)
@ -40,7 +40,7 @@ function getServiceByName (name) {
}
function getAllMiddlewares (params) {
return APP.api.get(`${apiBase}/middlewares?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
return APP.api.get(`${apiBase}/middlewares?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)

4
webui/src/_services/UdpService.js
View file

@ -4,7 +4,7 @@ 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}`)
return APP.api.get(`${apiBase}/routers?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}&serviceName=${params.serviceName}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)
@ -22,7 +22,7 @@ function getRouterByName (name) {
}
function getAllServices (params) {
return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}`)
return APP.api.get(`${apiBase}/services?search=${params.query}&status=${params.status}&per_page=${params.limit}&page=${params.page}&sortBy=${params.sortBy}&direction=${params.direction}`)
.then(response => {
const { data = [], headers } = response
const total = getTotal(headers, params)

37
webui/src/components/_commons/MainTable.vue
View file

@ -6,9 +6,12 @@
<tr class="table-header">
<th
v-for="column in columns"
v-bind:class="`text-${column.align}`"
v-bind:key="column.name">
v-bind:class="getColumn(column.name).sortable ? `text-${column.align} cursor-pointer`: `text-${column.align}`"
v-bind:key="column.name"
@click="getColumn(column.name).sortable ? onSortClick(column.name) : null">
{{ column.label }}
<i v-if="currentSort === column.name" class="material-icons">{{currentSortDir === 'asc' ? 'arrow_drop_down' : 'arrow_drop_up'}}</i>
<i v-else style="opacity: 0" class="material-icons">{{currentSortDir === 'asc' ? 'arrow_drop_down' : 'arrow_drop_up'}}</i>
</th>
</tr>
</thead>
@ -27,9 +30,19 @@
v-bind:is="getColumn(column.name).component"
v-bind="getColumn(column.name).fieldToProps(row)"
>
<template v-if="getColumn(column.name).content">
<template v-if="getColumn(column.name).content && column.name !== 'priority'">
{{ getColumn(column.name).content(row) }}
</template>
<template v-if="getColumn(column.name).content && column.name === 'priority'">
<div>
{{ getColumn(column.name).content(row).short }}
</div>
<q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">
<div class="priority-tooltip">
{{ getColumn(column.name).content(row).long }}
</div>
</q-tooltip>
</template>
</component>
</td>
<td
@ -72,6 +85,12 @@ export default {
QSpinnerDots,
QPageScroller
},
data () {
return {
currentSort: 'name',
currentSortDir: 'asc'
}
},
methods: {
getColumn (columnName) {
return this.columns.find(c => c.name === columnName) || {}
@ -80,6 +99,14 @@ export default {
this.onLoadMore({ page: index })
.then(() => done())
.catch(() => done(true))
},
onSortClick (s) {
if (s === this.currentSort) {
this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc'
}
this.currentSort = s
this.$emit('update:currentSort', s)
this.$emit('update:currentSortDir', this.currentSortDir)
}
}
}
@ -127,4 +154,8 @@ export default {
font-size: 14px;
font-weight: 600;
}
.priority-tooltip{
font-size: larger;
}
</style>

12
webui/src/components/_commons/PanelRouterDetails.vue
View file

@ -73,6 +73,18 @@
</div>
</div>
</q-card-section>
<q-card-section v-if="data.priority">
<div class="row items-start no-wrap">
<div class="col">
<div class="text-subtitle2">PRIORITY</div>
<q-chip
dense
class="app-chip app-chip-entry-points">
{{ data.priority }}
</q-chip>
</div>
</div>
</q-card-section>
<q-card-section v-if="data.error">
<div class="row items-start no-wrap">
<div class="col">

64
webui/src/pages/_commons/MiddlewareDetail.vue
View file

@ -44,12 +44,15 @@
<div class="row items-center q-col-gutter-lg">
<div class="col-12">
<main-table
:data="allRouters"
v-bind="getTableProps({ type: `${protocol}-routers` })"
:data="allRouters"
:onLoadMore="onGetAll"
:request="()=>{}"
:loading="routersLoading"
:pagination.sync="routersPagination"
:filter="routersFilter"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -91,7 +94,11 @@ export default {
page: 1,
rowsPerPage: 1000,
rowsNumber: 0
}
},
filter: '',
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -108,11 +115,14 @@ export default {
},
getRouterByName () {
return this[`${this.protocol}_getRouterByName`]
},
getAllRouters () {
return this[`${this.protocol}_getAllRouters`]
}
},
methods: {
...mapActions('http', { http_getMiddlewareByName: 'getMiddlewareByName', http_getRouterByName: 'getRouterByName' }),
...mapActions('tcp', { tcp_getMiddlewareByName: 'getMiddlewareByName', tcp_getRouterByName: 'getRouterByName' }),
...mapActions('http', { http_getMiddlewareByName: 'getMiddlewareByName', http_getRouterByName: 'getRouterByName', http_getAllRouters: 'getAllRouters' }),
...mapActions('tcp', { tcp_getMiddlewareByName: 'getMiddlewareByName', tcp_getRouterByName: 'getRouterByName', tcp_getAllRouters: 'getAllRouters' }),
refreshAll () {
if (this.middlewareByName.loading) {
return
@ -127,22 +137,26 @@ export default {
return
}
// Get routers
if (body.usedBy) {
for (const router in body.usedBy) {
if (body.usedBy.hasOwnProperty(router)) {
this.getRouterByName(body.usedBy[router])
.then(body => {
if (body) {
this.routersLoading = false
this.allRouters.push(body)
}
})
.catch(error => {
console.log('Error -> routers/byName', error)
})
this.getAllRouters({
query: this.filter,
status: this.status,
page: 1,
limit: 1000,
middlewareName: this.name,
serviceName: '',
sortBy: this.sortBy,
direction: this.sortDir
})
.then(body => {
this.allRouters = []
if (body) {
this.routersLoading = false
this.allRouters.push(...body.data)
}
}
}
})
.catch(error => {
console.log('Error -> routers/byName', error)
})
clearTimeout(this.timeOutGetAll)
this.timeOutGetAll = setTimeout(() => {
this.loading = false
@ -153,12 +167,18 @@ export default {
})
}
},
watch: {
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
created () {
this.refreshAll()
},
mounted () {
},
mounted () {},
beforeDestroy () {
clearInterval(this.timeOutGetAll)
this.$store.commit('http/getMiddlewareByNameClear')

66
webui/src/pages/_commons/ServiceDetail.vue
View file

@ -112,12 +112,15 @@
<div class="row items-center q-col-gutter-lg">
<div class="col-12">
<main-table
:data="allRouters"
v-bind="getTableProps({ type: `${protocol}-routers` })"
:data="allRouters"
:onLoadMore="onGetAll"
:request="()=>{}"
:loading="routersLoading"
:pagination.sync="routersPagination"
:filter="routersFilter"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -167,7 +170,11 @@ export default {
page: 1,
rowsPerPage: 1000,
rowsNumber: 0
}
},
filter: '',
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -185,12 +192,15 @@ export default {
},
getRouterByName () {
return this[`${this.protocol}_getRouterByName`]
},
getAllRouters () {
return this[`${this.protocol}_getAllRouters`]
}
},
methods: {
...mapActions('http', { http_getServiceByName: 'getServiceByName', http_getRouterByName: 'getRouterByName' }),
...mapActions('tcp', { tcp_getServiceByName: 'getServiceByName', tcp_getRouterByName: 'getRouterByName' }),
...mapActions('udp', { udp_getServiceByName: 'getServiceByName', udp_getRouterByName: 'getRouterByName' }),
...mapActions('http', { http_getServiceByName: 'getServiceByName', http_getRouterByName: 'getRouterByName', http_getAllRouters: 'getAllRouters' }),
...mapActions('tcp', { tcp_getServiceByName: 'getServiceByName', tcp_getRouterByName: 'getRouterByName', tcp_getAllRouters: 'getAllRouters' }),
...mapActions('udp', { udp_getServiceByName: 'getServiceByName', udp_getRouterByName: 'getRouterByName', udp_getAllRouters: 'getAllRouters' }),
refreshAll () {
if (this.serviceByName.loading) {
return
@ -205,22 +215,26 @@ export default {
return
}
// Get routers
if (body.usedBy) {
for (const router in body.usedBy) {
if (body.usedBy.hasOwnProperty(router)) {
this.getRouterByName(body.usedBy[router])
.then(body => {
if (body) {
this.routersLoading = false
this.allRouters.push(body)
}
})
.catch(error => {
console.log('Error -> routers/byName', error)
})
this.getAllRouters({
query: this.filter,
status: this.status,
page: 1,
limit: 1000,
middlewareName: '',
serviceName: this.name,
sortBy: this.sortBy,
direction: this.sortDir
})
.then(body => {
this.allRouters = []
if (body) {
this.routersLoading = false
this.allRouters.push(...body.data)
}
}
}
})
.catch(error => {
console.log('Error -> getAllRouters', error)
})
clearTimeout(this.timeOutGetAll)
this.timeOutGetAll = setTimeout(() => {
this.loading = false
@ -231,12 +245,18 @@ export default {
})
}
},
watch: {
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
created () {
this.refreshAll()
},
mounted () {
},
mounted () {},
beforeDestroy () {
clearInterval(this.timeOutGetAll)
this.$store.commit('http/getServiceByNameClear')

14
webui/src/pages/http/Middlewares.vue
View file

@ -15,6 +15,8 @@
:onLoadMore="handleLoadMore"
:endReached="allMiddlewares.endReached"
:loading="allMiddlewares.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -50,7 +52,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -62,6 +66,8 @@ export default {
return this.getAllMiddlewares({
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
...params
})
},
@ -82,6 +88,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {

16
webui/src/pages/http/Routers.vue
View file

@ -15,6 +15,8 @@
:onLoadMore="handleLoadMore"
:endReached="allRouters.endReached"
:loading="allRouters.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -50,7 +52,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -60,8 +64,12 @@ export default {
...mapActions('http', { getAllRouters: 'getAllRouters' }),
getAllRoutersWithParams (params) {
return this.getAllRouters({
serviceName: '',
middlewareName: '',
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
...params
})
},
@ -82,6 +90,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {

14
webui/src/pages/http/Services.vue
View file

@ -15,6 +15,8 @@
:onLoadMore="handleLoadMore"
:endReached="allServices.endReached"
:loading="allServices.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -50,7 +52,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -62,6 +66,8 @@ export default {
return this.getAllServices({
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
...params
})
},
@ -82,6 +88,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {

14
webui/src/pages/tcp/Middlewares.vue
View file

@ -15,6 +15,8 @@
:onLoadMore="handleLoadMore"
:endReached="allMiddlewares.endReached"
:loading="allMiddlewares.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -50,7 +52,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -62,6 +66,8 @@ export default {
return this.getAllMiddlewares({
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
...params
})
},
@ -82,6 +88,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {

16
webui/src/pages/tcp/Routers.vue
View file

@ -15,6 +15,8 @@
:onLoadMore="handleLoadMore"
:endReached="allRouters.endReached"
:loading="allRouters.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -50,7 +52,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -60,8 +64,12 @@ export default {
...mapActions('tcp', { getAllRouters: 'getAllRouters' }),
getAllRoutersWithParams (params) {
return this.getAllRouters({
serviceName: '',
middlewareName: '',
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
...params
})
},
@ -82,6 +90,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {

14
webui/src/pages/tcp/Services.vue
View file

@ -15,6 +15,8 @@
:onLoadMore="handleLoadMore"
:endReached="allServices.endReached"
:loading="allServices.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -50,7 +52,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -62,6 +66,8 @@ export default {
return this.getAllServices({
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
...params
})
},
@ -82,6 +88,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {

16
webui/src/pages/udp/Routers.vue
View file

@ -14,6 +14,8 @@
:onLoadMore="handleLoadMore"
:endReached="allRouters.endReached"
:loading="allRouters.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -49,7 +51,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -61,6 +65,10 @@ export default {
return this.getAllRouters({
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
serviceName: '',
middlewareName: '',
...params
})
},
@ -81,6 +89,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {

14
webui/src/pages/udp/Services.vue
View file

@ -15,6 +15,8 @@
:onLoadMore="handleLoadMore"
:endReached="allServices.endReached"
:loading="allServices.loading"
:currentSort.sync="sortBy"
:currentSortDir.sync="sortDir"
/>
</div>
</div>
@ -50,7 +52,9 @@ export default {
data () {
return {
filter: '',
status: ''
status: '',
sortBy: 'name',
sortDir: 'asc'
}
},
computed: {
@ -62,6 +66,8 @@ export default {
return this.getAllServices({
query: this.filter,
status: this.status,
sortBy: this.sortBy,
direction: this.sortDir,
...params
})
},
@ -82,6 +88,12 @@ export default {
},
'filter' () {
this.refreshAll()
},
'sortBy' () {
this.refreshAll()
},
'sortDir' () {
this.refreshAll()
}
},
beforeDestroy () {