Data fetching OK
This commit is contained in:
parent
cd8a18090f
commit
a5ba94ad25
|
@ -217,6 +217,18 @@ const routes = [
|
|||
component: () =>
|
||||
import(/* webpackChunkName: "wifi-stats" */ '../views/WifiStats.vue')
|
||||
},
|
||||
{
|
||||
path: '/access-points/stats',
|
||||
name: 'access-points-stats',
|
||||
meta: {
|
||||
title: 'Status dos Access Points',
|
||||
roles: ['superAdmin']
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "access-points-stats" */ '../views/AccessPoints/stats.vue'
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
path: '/access-points/:id/clients',
|
||||
|
|
|
@ -62,6 +62,15 @@
|
|||
hide-details
|
||||
:label="`Somente ${me.campusFull}`"
|
||||
/>
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
text
|
||||
color="secondary"
|
||||
:to="{ name: 'access-points-stats' }"
|
||||
>
|
||||
<v-icon left>mdi-chart-line</v-icon>
|
||||
Status
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-data-table
|
||||
|
|
155
web/src/views/AccessPoints/stats.vue
Normal file
155
web/src/views/AccessPoints/stats.vue
Normal file
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-toolbar dense flat>
|
||||
<v-select
|
||||
class="mr-2"
|
||||
:items="subnetSelectItems"
|
||||
v-model="subnet"
|
||||
style="max-width: 250px"
|
||||
hide-details
|
||||
outlined
|
||||
dense
|
||||
prepend-inner-icon="mdi-home-group"
|
||||
/>
|
||||
|
||||
<v-spacer />
|
||||
<v-select
|
||||
class="mr-2"
|
||||
v-model="orderBy"
|
||||
style="max-width: 250px"
|
||||
:items="orderByOptions"
|
||||
hide-details
|
||||
outlined
|
||||
dense
|
||||
prepend-inner-icon="mdi-sort"
|
||||
/>
|
||||
<v-select
|
||||
v-model="minutesIn"
|
||||
style="max-width: 250px"
|
||||
:items="minutesInItems"
|
||||
hide-details
|
||||
outlined
|
||||
dense
|
||||
prepend-inner-icon="mdi-timer-outline"
|
||||
/>
|
||||
</v-toolbar>
|
||||
|
||||
{{ accessPoints }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gql from 'graphql-tag'
|
||||
export default {
|
||||
name: 'AccessPointsStats',
|
||||
data() {
|
||||
return {
|
||||
subnet: null,
|
||||
minutesIn: 1440,
|
||||
minutesInItems: [
|
||||
{
|
||||
text: 'Última hora',
|
||||
value: 60
|
||||
},
|
||||
{
|
||||
text: 'Últimas 3 horas',
|
||||
value: 180
|
||||
},
|
||||
{
|
||||
text: 'Últimas 6 horas',
|
||||
value: 360
|
||||
},
|
||||
{
|
||||
text: 'Últimas 12 horas',
|
||||
value: 720
|
||||
},
|
||||
{
|
||||
text: 'Últimas 24 horas',
|
||||
value: 1440
|
||||
},
|
||||
{
|
||||
text: 'Últimos 7 dias',
|
||||
value: 10080
|
||||
},
|
||||
{
|
||||
text: 'Últimos 30 dias',
|
||||
value: 43200
|
||||
}
|
||||
],
|
||||
orderByOptions: [
|
||||
'Alfabética',
|
||||
'Clientes atualmente',
|
||||
'Pico de clientes',
|
||||
'Menor quantidade de clientes',
|
||||
'Média de clientes'
|
||||
],
|
||||
orderBy: 'Pico de clientes'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
subnetSelectItems() {
|
||||
return this.subnets?.map(network => {
|
||||
return {
|
||||
text: network.name,
|
||||
value: network.shortName
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
apollo: {
|
||||
me: {
|
||||
query: gql`
|
||||
{
|
||||
me {
|
||||
campus
|
||||
}
|
||||
}
|
||||
`,
|
||||
result({ data }) {
|
||||
this.subnet = data?.me.campus
|
||||
}
|
||||
},
|
||||
subnets: {
|
||||
query: gql`
|
||||
{
|
||||
subnets {
|
||||
shortName
|
||||
name
|
||||
cidr
|
||||
}
|
||||
}
|
||||
`
|
||||
},
|
||||
accessPoints: {
|
||||
skip() {
|
||||
return !this.subnet
|
||||
},
|
||||
query: gql`
|
||||
query accessPoints($networkShortName: String!, $minutesIn: Int!) {
|
||||
accessPoints(networkShortName: $networkShortName) {
|
||||
id
|
||||
mac
|
||||
subnetInfo {
|
||||
shortName
|
||||
}
|
||||
stats(minutesIn: $minutesIn) {
|
||||
timestamp
|
||||
id
|
||||
clients
|
||||
avgUsage
|
||||
sumUsage
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return {
|
||||
networkShortName: this.subnet,
|
||||
minutesIn: this.minutesIn
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in New Issue
Block a user