Show AP clients dialog
This commit is contained in:
parent
637bc55a78
commit
000d033648
|
@ -3,6 +3,12 @@ import prisma from '../../prisma'
|
||||||
export async function accessPoint(parent, { id }, context, info) {
|
export async function accessPoint(parent, { id }, context, info) {
|
||||||
return prisma.accessPoint.findUnique({
|
return prisma.accessPoint.findUnique({
|
||||||
where: { id: parseInt(id) },
|
where: { id: parseInt(id) },
|
||||||
include: { wifiDevices: true }
|
include: {
|
||||||
|
wifiDevices: {
|
||||||
|
where: {
|
||||||
|
status: 'ONLINE'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -177,8 +177,22 @@ const routes = [
|
||||||
},
|
},
|
||||||
component: () =>
|
component: () =>
|
||||||
import(
|
import(
|
||||||
/* webpackChunkName: "access-points" */ '../views/AccessPoints.vue'
|
/* webpackChunkName: "access-points" */ '../views/AccessPoints/index.vue'
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: ':id/clients',
|
||||||
|
name: 'access-point',
|
||||||
|
meta: {
|
||||||
|
title: 'Access Point',
|
||||||
|
roles: ['superAdmin']
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "access-points" */ '../views/AccessPoints/single.vue'
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<v-container class="access-points" fluid>
|
<v-container class="access-points" fluid>
|
||||||
|
<router-view />
|
||||||
<v-toolbar class="mb-2" flat outlined>
|
<v-toolbar class="mb-2" flat outlined>
|
||||||
<v-menu
|
<v-menu
|
||||||
offset-y
|
offset-y
|
||||||
|
@ -73,6 +74,7 @@
|
||||||
class="client-chip"
|
class="client-chip"
|
||||||
:color="loadColor(item.clients) + ' lighten-5'"
|
:color="loadColor(item.clients) + ' lighten-5'"
|
||||||
pill
|
pill
|
||||||
|
@click="navigateToAccessPoint(item)"
|
||||||
>
|
>
|
||||||
<v-icon left :color="loadColor(item.clients)">
|
<v-icon left :color="loadColor(item.clients)">
|
||||||
{{ loadIcon(item.clients) }}
|
{{ loadIcon(item.clients) }}
|
||||||
|
@ -109,7 +111,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import ApIcon from '../components/ApIcon.vue'
|
import ApIcon from '@/components/ApIcon.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AccessPoints',
|
name: 'AccessPoints',
|
||||||
|
@ -149,9 +151,7 @@ export default {
|
||||||
{ text: 'Última atualização', value: 'updatedAt', width: 160 }
|
{ text: 'Última atualização', value: 'updatedAt', width: 160 }
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
mounted() {
|
|
||||||
this.resetDefaultHeaders()
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
headers() {
|
headers() {
|
||||||
return this.allHeaders.filter(header => header.active)
|
return this.allHeaders.filter(header => header.active)
|
||||||
|
@ -163,12 +163,21 @@ export default {
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.resetDefaultHeaders()
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
navigateToAccessPoint(accessPoint) {
|
||||||
|
this.$router.push({
|
||||||
|
name: 'access-point',
|
||||||
|
params: { id: accessPoint.id }
|
||||||
|
})
|
||||||
|
},
|
||||||
readableUptime(uptime) {
|
readableUptime(uptime) {
|
||||||
return Math.floor(uptime / 3600)
|
return Math.floor(uptime / 3600)
|
||||||
},
|
},
|
||||||
load(connectedClients) {
|
load(connectedClients) {
|
||||||
const MAX_LOAD = 70
|
const MAX_LOAD = 60
|
||||||
const load = Math.floor((connectedClients / MAX_LOAD) * 100)
|
const load = Math.floor((connectedClients / MAX_LOAD) * 100)
|
||||||
return load < 100 ? load : 100
|
return load < 100 ? load : 100
|
||||||
},
|
},
|
111
web/src/views/AccessPoints/single.vue
Normal file
111
web/src/views/AccessPoints/single.vue
Normal file
|
@ -0,0 +1,111 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-dialog v-model="showDialog">
|
||||||
|
<v-card v-if="!accessPoint">
|
||||||
|
<v-skeleton-loader
|
||||||
|
type="table-heading, list-item-two-line, image, table-tfoot"
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
<v-card v-else :loading="!accessPoint">
|
||||||
|
<v-card-title class="font-weight-regular">
|
||||||
|
{{ accessPoint.name || accessPoint.hostname }}
|
||||||
|
<small> ({{ accessPoint.ip }}) </small>
|
||||||
|
<ApIcon class="mr-1" :controller="accessPoint.controller" />
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn icon @click="showDialog = false">
|
||||||
|
<v-icon>mdi-close</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-data-table
|
||||||
|
sort-by="name"
|
||||||
|
:items="accessPoint.wifiDevices"
|
||||||
|
:headers="headers"
|
||||||
|
dense
|
||||||
|
:footer-props="{ itemsPerPageOptions: [15, 25, 50, 100, 150] }"
|
||||||
|
>
|
||||||
|
<template #[`item.user`]="{ item: { user } }">
|
||||||
|
<span v-if="user">
|
||||||
|
<Avatar left :src="user.thumbnailPhoto" size="24" />
|
||||||
|
{{ user.displayName }} ({{ user.sAMAccountName }})
|
||||||
|
</span>
|
||||||
|
<span v-else><Avatar left size="24" /> Não logado</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.uptime`]="{ item: { uptime } }">
|
||||||
|
{{ uptime | durationFromSeconds }}
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import gql from 'graphql-tag'
|
||||||
|
import Avatar from '../../components/Avatar.vue'
|
||||||
|
import ApIcon from '../../components/ApIcon.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SingleAccessPoint',
|
||||||
|
components: { Avatar, ApIcon },
|
||||||
|
data: () => ({
|
||||||
|
showDialog: true,
|
||||||
|
headers: [
|
||||||
|
{ text: 'Hostname', value: 'hostname' },
|
||||||
|
{ text: 'MAC', value: 'mac' },
|
||||||
|
{ text: 'ESSID', value: 'essid' },
|
||||||
|
{ text: 'Uptime', value: 'uptime' },
|
||||||
|
{ text: 'Usuário', value: 'user' }
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
watch: {
|
||||||
|
showDialog() {
|
||||||
|
this.$router.push({ name: 'access-points' })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
apollo: {
|
||||||
|
accessPoint: {
|
||||||
|
query: gql`
|
||||||
|
query accessPoint($id: ID!) {
|
||||||
|
accessPoint(id: $id) {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
hostname
|
||||||
|
ip
|
||||||
|
mac
|
||||||
|
local
|
||||||
|
clients
|
||||||
|
uptime
|
||||||
|
model
|
||||||
|
controller
|
||||||
|
notes
|
||||||
|
updatedAt
|
||||||
|
wifiDevices {
|
||||||
|
id
|
||||||
|
hostname
|
||||||
|
essid
|
||||||
|
mac
|
||||||
|
uptime
|
||||||
|
lastSeen
|
||||||
|
user {
|
||||||
|
displayName
|
||||||
|
sAMAccountName
|
||||||
|
thumbnailPhoto
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables() {
|
||||||
|
return {
|
||||||
|
id: this.$route.params.id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
Loading…
Reference in New Issue
Block a user