Use new data
This commit is contained in:
parent
93a36995fe
commit
1364c63f8a
|
@ -95,6 +95,7 @@ export async function getOnlineWifiDevices() {
|
||||||
|
|
||||||
const restructuredOnlineDevices = onlineDevices.map(client => ({
|
const restructuredOnlineDevices = onlineDevices.map(client => ({
|
||||||
user: client.Name == 'unknown' ? null : client.Name,
|
user: client.Name == 'unknown' ? null : client.Name,
|
||||||
|
identity: client.Name == 'unknown' ? null : client.Name,
|
||||||
oui: ouiFinder(client.macaddr),
|
oui: ouiFinder(client.macaddr),
|
||||||
mac: client.macaddr,
|
mac: client.macaddr,
|
||||||
hostname: client.HN == 'unknown' ? undefined : client.HN,
|
hostname: client.HN == 'unknown' ? undefined : client.HN,
|
||||||
|
|
|
@ -179,6 +179,7 @@ export async function getOnlineWifiDevices() {
|
||||||
|
|
||||||
const restructuredOnlineDevices = onlineDevices[0].map(client => ({
|
const restructuredOnlineDevices = onlineDevices[0].map(client => ({
|
||||||
user: client['1x_identity'] || null,
|
user: client['1x_identity'] || null,
|
||||||
|
identity: client['1x_identity'] || null,
|
||||||
oui: ouiFinder(client.mac),
|
oui: ouiFinder(client.mac),
|
||||||
mac: client.mac,
|
mac: client.mac,
|
||||||
hostname: client.hostname,
|
hostname: client.hostname,
|
||||||
|
@ -193,7 +194,7 @@ export async function getOnlineWifiDevices() {
|
||||||
signalStrength: client.signal,
|
signalStrength: client.signal,
|
||||||
frequency: null,
|
frequency: null,
|
||||||
protocol: null,
|
protocol: null,
|
||||||
speed: client.tx_rate,
|
speed: Math.floor(client.tx_rate / 1000),
|
||||||
usage: +client.tx_bytes + +client.rx_bytes
|
usage: +client.tx_bytes + +client.rx_bytes
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
|
|
@ -236,6 +236,11 @@ const typeDefs = gql`
|
||||||
apName: String
|
apName: String
|
||||||
status: Status
|
status: Status
|
||||||
accessPoint: AccessPoint
|
accessPoint: AccessPoint
|
||||||
|
signalStrength: Int
|
||||||
|
frequency: String
|
||||||
|
protocol: String
|
||||||
|
speed: Int
|
||||||
|
usage: Int
|
||||||
}
|
}
|
||||||
|
|
||||||
"A user that is on the Wi-Fi network reach"
|
"A user that is on the Wi-Fi network reach"
|
||||||
|
|
|
@ -8,6 +8,7 @@ import '@mdi/font/css/materialdesignicons.css'
|
||||||
import './scss/style.scss'
|
import './scss/style.scss'
|
||||||
|
|
||||||
import './plugins/date'
|
import './plugins/date'
|
||||||
|
import './plugins/format-bytes'
|
||||||
|
|
||||||
import { defaultApolloProvider } from './plugins/vue-apollo'
|
import { defaultApolloProvider } from './plugins/vue-apollo'
|
||||||
|
|
||||||
|
|
22
web/src/plugins/format-bytes.js
Normal file
22
web/src/plugins/format-bytes.js
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
function bytes(bytes, decimals, kib, maxUnit) {
|
||||||
|
console.log(bytes, decimals, kib, maxUnit)
|
||||||
|
kib = kib || false
|
||||||
|
if (bytes === 0) return '0 Bytes'
|
||||||
|
if (isNaN(parseFloat(bytes)) && !isFinite(bytes)) return ''
|
||||||
|
const k = kib ? 1024 : 1000
|
||||||
|
const dm =
|
||||||
|
decimals != null && !isNaN(decimals) && decimals >= 0 ? decimals : 2
|
||||||
|
const sizes = kib
|
||||||
|
? ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
|
||||||
|
: ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB']
|
||||||
|
var i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
|
if (maxUnit != undefined) {
|
||||||
|
const index = sizes.indexOf(maxUnit)
|
||||||
|
if (index != -1) i = index
|
||||||
|
}
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.filter('bytes', bytes)
|
|
@ -2,19 +2,27 @@
|
||||||
<div>
|
<div>
|
||||||
<v-dialog
|
<v-dialog
|
||||||
v-model="showDialog"
|
v-model="showDialog"
|
||||||
:fullscreen="$vuetify.breakpoint.mdAndDown"
|
fullscreen
|
||||||
transition="dialog-bottom-transition"
|
transition="dialog-bottom-transition"
|
||||||
|
scrollable
|
||||||
>
|
>
|
||||||
<v-card v-if="!accessPoint">
|
<v-card v-if="!accessPoint">
|
||||||
<v-skeleton-loader
|
<v-skeleton-loader
|
||||||
type="table-heading, list-item-two-line, image, table-tfoot"
|
type="table-heading, list-item-two-line, image, table-tfoot"
|
||||||
/>
|
/>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
||||||
<v-card v-else :loading="!accessPoint">
|
<v-card v-else :loading="!accessPoint">
|
||||||
<v-card-title class="font-weight-regular">
|
<v-card-title class="font-weight-regular">
|
||||||
|
<div>
|
||||||
|
<ApIcon class="mr-2" :controller="accessPoint.controller" />
|
||||||
{{ accessPoint.name || accessPoint.hostname }}
|
{{ accessPoint.name || accessPoint.hostname }}
|
||||||
<small> ({{ accessPoint.ip }}) </small>
|
<small> ({{ accessPoint.ip }}) </small>
|
||||||
<ApIcon class="mr-1" :controller="accessPoint.controller" />
|
<small v-if="accessPoint.local" class="font-weight-light">
|
||||||
|
<v-divider />
|
||||||
|
{{ accessPoint.local }}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="filter"
|
v-model="filter"
|
||||||
|
@ -22,12 +30,16 @@
|
||||||
prepend-inner-icon="mdi-magnify"
|
prepend-inner-icon="mdi-magnify"
|
||||||
single-line
|
single-line
|
||||||
hide-details
|
hide-details
|
||||||
|
style="max-width: 350px"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-btn icon @click="showDialog = false">
|
<v-btn class="ml-1" icon @click="showDialog = false">
|
||||||
<v-icon>mdi-close</v-icon>
|
<v-icon>mdi-close</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
|
<v-divider />
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-data-table
|
<v-data-table
|
||||||
sort-by="name"
|
sort-by="name"
|
||||||
|
@ -35,7 +47,8 @@
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
:search="filter"
|
:search="filter"
|
||||||
dense
|
dense
|
||||||
:footer-props="{ itemsPerPageOptions: [15, 25, 50, 100, 150] }"
|
hide-default-footer
|
||||||
|
disable-pagination
|
||||||
>
|
>
|
||||||
<template #[`item.user`]="{ item: { user } }">
|
<template #[`item.user`]="{ item: { user } }">
|
||||||
<span v-if="user">
|
<span v-if="user">
|
||||||
|
@ -48,8 +61,36 @@
|
||||||
<template #[`item.uptime`]="{ item: { uptime } }">
|
<template #[`item.uptime`]="{ item: { uptime } }">
|
||||||
{{ uptime | durationFromSeconds }}
|
{{ uptime | durationFromSeconds }}
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.signalStrength`]="{ item: { signalStrength } }">
|
||||||
|
<template v-if="signalStrength < 0">
|
||||||
|
<v-icon :color="signalStrengthColor(signalStrength)">
|
||||||
|
{{ signalStrengthIcon(signalStrength) }}
|
||||||
|
</v-icon>
|
||||||
|
{{ signalStrength }} dBm
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<v-icon>mdi-sine-wave</v-icon>
|
||||||
|
Aguarde...
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.speed`]="{ item: { speed } }">
|
||||||
|
{{ speed }} Mbps
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #[`item.usage`]="{ item: { usage } }">
|
||||||
|
{{ usage | bytes }}
|
||||||
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
<v-divider />
|
||||||
|
<v-card-actions>
|
||||||
|
<v-icon left>mdi-account-group</v-icon>
|
||||||
|
{{ accessPoint.wifiDevices.length }} clientes conectados
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn color="primary" @click="showDialog = false"> Voltar </v-btn>
|
||||||
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
</div>
|
</div>
|
||||||
|
@ -72,7 +113,12 @@ export default {
|
||||||
{ text: 'IP', value: 'ip' },
|
{ text: 'IP', value: 'ip' },
|
||||||
{ text: 'ESSID', value: 'essid' },
|
{ text: 'ESSID', value: 'essid' },
|
||||||
{ text: 'Uptime', value: 'uptime' },
|
{ text: 'Uptime', value: 'uptime' },
|
||||||
{ text: 'Usuário', value: 'user' }
|
{ text: 'Usuário', value: 'user' },
|
||||||
|
{ text: 'Sinal', value: 'signalStrength' },
|
||||||
|
{ text: 'Frequência', value: 'frequency' },
|
||||||
|
{ text: 'Protocolo', value: 'protocol' },
|
||||||
|
{ text: 'Velocidade', value: 'speed' },
|
||||||
|
{ text: 'Uso', value: 'usage' }
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -82,6 +128,24 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
signalStrengthIcon(signalStrength) {
|
||||||
|
if (signalStrength > -40) return 'mdi-network-strength-4'
|
||||||
|
if (signalStrength > -65) return 'mdi-network-strength-3'
|
||||||
|
if (signalStrength > -80) return 'mdi-network-strength-2'
|
||||||
|
return 'mdi-network-strength-1'
|
||||||
|
},
|
||||||
|
signalStrengthColor(signalStrength) {
|
||||||
|
if (signalStrength > -40) return 'green'
|
||||||
|
else if (signalStrength > -50) return 'light-green'
|
||||||
|
else if (signalStrength > -60) return 'lime'
|
||||||
|
else if (signalStrength > -75) return 'amber'
|
||||||
|
else if (signalStrength > -90) return 'orange'
|
||||||
|
else if (signalStrength > -105) return 'deep-orange'
|
||||||
|
else return 'red'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
apollo: {
|
apollo: {
|
||||||
accessPoint: {
|
accessPoint: {
|
||||||
pollInterval: 10000,
|
pollInterval: 10000,
|
||||||
|
@ -109,6 +173,11 @@ export default {
|
||||||
uptime
|
uptime
|
||||||
lastSeen
|
lastSeen
|
||||||
ip
|
ip
|
||||||
|
signalStrength
|
||||||
|
frequency
|
||||||
|
protocol
|
||||||
|
speed
|
||||||
|
usage
|
||||||
user {
|
user {
|
||||||
displayName
|
displayName
|
||||||
sAMAccountName
|
sAMAccountName
|
||||||
|
|
|
@ -65,9 +65,10 @@
|
||||||
:loading="!accessPoints"
|
:loading="!accessPoints"
|
||||||
:search="search"
|
:search="search"
|
||||||
calculate-widths
|
calculate-widths
|
||||||
class="elevation-1"
|
class="elevation-2 mb-2"
|
||||||
sort-by="name"
|
sort-by="name"
|
||||||
:footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, 150] }"
|
hide-default-footer
|
||||||
|
disable-pagination
|
||||||
:group-by="groupBy ? 'campus' : null"
|
:group-by="groupBy ? 'campus' : null"
|
||||||
>
|
>
|
||||||
<template
|
<template
|
||||||
|
@ -183,9 +184,6 @@
|
||||||
<small>{{ item.notes }}</small>
|
<small>{{ item.notes }}</small>
|
||||||
</template>
|
</template>
|
||||||
</v-data-table>
|
</v-data-table>
|
||||||
<v-alert class="mt-2" dismissible outlined type="success">
|
|
||||||
As informações são atualizadas automaticamente</v-alert
|
|
||||||
>
|
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user