Use new data

server/src/lib/ciscoController.js

@@ -95,6 +95,7 @@ export async function getOnlineWifiDevices() {
 
   const restructuredOnlineDevices = onlineDevices.map(client => ({
     user: client.Name == 'unknown' ? null : client.Name,
+    identity: client.Name == 'unknown' ? null : client.Name,
     oui: ouiFinder(client.macaddr),
     mac: client.macaddr,
     hostname: client.HN == 'unknown' ? undefined : client.HN,

server/src/lib/unifiController.js

@@ -179,6 +179,7 @@ export async function getOnlineWifiDevices() {
 
     const restructuredOnlineDevices = onlineDevices[0].map(client => ({
       user: client['1x_identity'] || null,
+      identity: client['1x_identity'] || null,
       oui: ouiFinder(client.mac),
       mac: client.mac,
       hostname: client.hostname,
@@ -193,7 +194,7 @@ export async function getOnlineWifiDevices() {
       signalStrength: client.signal,
       frequency: null,
       protocol: null,
-      speed: client.tx_rate,
+      speed: Math.floor(client.tx_rate / 1000),
       usage: +client.tx_bytes + +client.rx_bytes
     }))
 

server/src/typeDefs.js

@@ -236,6 +236,11 @@ const typeDefs = gql`
     apName: String
     status: Status
     accessPoint: AccessPoint
+    signalStrength: Int
+    frequency: String
+    protocol: String
+    speed: Int
+    usage: Int
   }
 
   "A user that is on the Wi-Fi network reach"

web/src/main.js

@@ -8,6 +8,7 @@ import '@mdi/font/css/materialdesignicons.css'
 import './scss/style.scss'
 
 import './plugins/date'
+import './plugins/format-bytes'
 
 import { defaultApolloProvider } from './plugins/vue-apollo'
 

web/src/plugins/format-bytes.js

@@ -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)

web/src/views/AccessPoints/clients.vue

@@ -2,19 +2,27 @@
   <div>
     <v-dialog
       v-model="showDialog"
-      :fullscreen="$vuetify.breakpoint.mdAndDown"
+      fullscreen
       transition="dialog-bottom-transition"
+      scrollable
     >
       <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">
+          <div>
+            <ApIcon class="mr-2" :controller="accessPoint.controller" />
             {{ accessPoint.name || accessPoint.hostname }}
             <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-text-field
             v-model="filter"
@@ -22,12 +30,16 @@
             prepend-inner-icon="mdi-magnify"
             single-line
             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-btn>
         </v-card-title>
+        <v-divider />
         <v-card-text>
           <v-data-table
             sort-by="name"
@@ -35,7 +47,8 @@
             :headers="headers"
             :search="filter"
             dense
-            :footer-props="{ itemsPerPageOptions: [15, 25, 50, 100, 150] }"
+            hide-default-footer
+            disable-pagination
           >
             <template #[`item.user`]="{ item: { user } }">
               <span v-if="user">
@@ -48,8 +61,36 @@
             <template #[`item.uptime`]="{ item: { uptime } }">
               {{ uptime | durationFromSeconds }}
             </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-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-dialog>
   </div>
@@ -72,7 +113,12 @@ export default {
       { text: 'IP', value: 'ip' },
       { text: 'ESSID', value: 'essid' },
       { 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: {
@@ -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: {
     accessPoint: {
       pollInterval: 10000,
@@ -109,6 +173,11 @@ export default {
               uptime
               lastSeen
               ip
+              signalStrength
+              frequency
+              protocol
+              speed
+              usage
               user {
                 displayName
                 sAMAccountName

web/src/views/AccessPoints/index.vue

@@ -65,9 +65,10 @@
       :loading="!accessPoints"
       :search="search"
       calculate-widths
-      class="elevation-1"
+      class="elevation-2 mb-2"
       sort-by="name"
-      :footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, 150] }"
+      hide-default-footer
+      disable-pagination
       :group-by="groupBy ? 'campus' : null"
     >
       <template
@@ -183,9 +184,6 @@
         <small>{{ item.notes }}</small>
       </template>
     </v-data-table>
-    <v-alert class="mt-2" dismissible outlined type="success">
-      As informações são atualizadas automaticamente</v-alert
-    >
   </v-container>
 </template>