Data fetching OK
This commit is contained in:
parent
cd8a18090f
commit
a5ba94ad25
|
@ -217,6 +217,18 @@ const routes = [
|
||||||
component: () =>
|
component: () =>
|
||||||
import(/* webpackChunkName: "wifi-stats" */ '../views/WifiStats.vue')
|
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',
|
path: '/access-points/:id/clients',
|
||||||
|
|
|
@ -62,6 +62,15 @@
|
||||||
hide-details
|
hide-details
|
||||||
:label="`Somente ${me.campusFull}`"
|
: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-toolbar>
|
||||||
|
|
||||||
<v-data-table
|
<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