Refactoring

server/src/resolvers/Query/wifiDevices.js

@@ -25,7 +25,9 @@ export async function wifiDevices(parent, { take = 50, skip = 0, search, sortBy,
     }),
     data: prisma.wifiDevice.findMany({
       where,
-      orderBy: [{ [sortBy || 'hostname']: sortDesc ? 'desc' : 'asc' }, { ip: 'asc' }],
+      orderBy: [
+        { status: 'asc' },
+        { [sortBy || 'hostname']: sortDesc ? 'desc' : 'asc' }],
       include: { user: true, accessPoint: true },
       take,
       skip

web/src/components/Avatar.vue

@@ -1,8 +1,8 @@
 <template>
   <v-avatar :size="size" class="avatar" :class="{ left, right }">
     <v-img v-if="src" :src="src" class="avatar--img" />
-    <v-icon v-else-if="noAuth" :size="size">mdi-account-cancel</v-icon>
-    <v-icon v-else :size="size">mdi-account-check</v-icon>
+    <v-icon v-else-if="noAuth" :size="size">mdi-account-off</v-icon>
+    <v-icon v-else :size="size">mdi-account-circle</v-icon>
   </v-avatar>
 </template>
 

web/src/components/DataTables/AccessPointClientsDataTable.vue

@@ -2,19 +2,15 @@
   <div>
     <v-data-table
       sort-by="signalStrength"
-      :items="wifiDevices"
-      :headers="pickedHeaders"
+      :items="items"
+      :headers="headers"
       :search="filter"
       :hide-default-footer="!paginate"
       :disable-pagination="!paginate"
       no-data-text="Nenhum cliente conectado à este AP"
     >
-      <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 #[`item.combinedUser`]="{ item: { user } }">
+        <UserTD :user="user" />
       </template>
 
       <template #[`item.mac`]="{ item: { mac } }">
@@ -38,7 +34,7 @@
       </template>
 
       <template #[`item.usage`]="{ item: { usage } }">
-        {{ usage | bytes }}
+        <Bytes :value="usage" />
       </template>
 
       <template #[`item.protocol`]="{ item: { protocol } }">
@@ -54,11 +50,12 @@
 </template>
 
 <script>
-import Avatar from '../Avatar.vue'
 import SignalStrength from '../signalStrength.vue'
+import UserTD from './UserTD.vue'
+import Bytes from '../ui/Bytes.vue'
 
 export default {
-  components: { Avatar, SignalStrength },
+  components: { Bytes, UserTD, SignalStrength, Bytes },
   props: {
     wifiDevices: {
       type: Array,
@@ -71,32 +68,16 @@ export default {
     paginate: {
       type: Boolean,
       default: false
-    },
-    headers: {
-      type: Array,
-      default: () => [
-        'hostname',
-        'mac',
-        'ip',
-        'essid',
-        'uptime',
-        'user',
-        'signalStrength',
-        'frequency',
-        'protocol',
-        'speed',
-        'usage'
-      ]
     }
   },
   data: () => ({
-    availableHeaders: [
+    headers: [
       { text: 'Hostname', value: 'hostname' },
       { text: 'MAC', value: 'mac' },
       { text: 'IP', value: 'ip' },
       { text: 'ESSID', value: 'essid' },
       { text: 'Uptime', value: 'uptime' },
-      { text: 'Usuário', value: 'user' },
+      { text: 'Usuário', value: 'combinedUser' },
       { text: 'Sinal', value: 'signalStrength' },
       { text: 'Frequência', value: 'frequency', align: 'end' },
       { text: 'Protocolo', value: 'protocol' },
@@ -105,12 +86,14 @@ export default {
     ]
   }),
   computed: {
-    pickedHeaders() {
-      return this.availableHeaders.filter(({ value }) =>
-        this.headers.includes(value)
-      )
+    items() {
+      return this.wifiDevices.map(item => ({
+        ...item,
+        combinedUser: `${item.user?.displayName} ${item.user?.sAMAccountName}` // For search purposes only
+      }))
     }
   },
+
   methods: {
     setClipboard(text) {
       navigator.clipboard.writeText(text)

web/src/components/DataTables/UserTD.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-if="user" class="d-flex">
+    <Avatar
+      class="flex-column center-block"
+      left
+      :src="user.thumbnailPhoto"
+      size="28"
+    />
+    <small class="d-block text-no-wrap">
+      {{ user.displayName }} <br />
+      {{ user.sAMAccountName }}
+    </small>
+  </div>
+  <span v-else>
+    <Avatar left size="28" no-auth /><small>Não autenticado</small>
+  </span>
+</template>
+
+<script>
+import Avatar from '../Avatar.vue'
+
+export default {
+  components: { Avatar },
+  props: {
+    user: {
+      type: Object
+    }
+  }
+}
+</script>
+
+<style></style>

web/src/components/DataTables/UserWifiDevicesDataTable.vue

@@ -28,11 +28,11 @@
       <template #[`item.essid`]="{ item: { essid } }">
         <small>{{ essid }}</small>
       </template>
-      <template #[`item.signalStrength`]="{ item: { signalStrength } }">
-        <SignalStrength :value="signalStrength" no-signal-text="" />
+      <template #[`item.signalStrength`]="{ item: { signalStrength, status } }">
+        <SignalStrength :value="signalStrength" :offline="status != 'ONLINE'" />
       </template>
       <template #[`item.usage`]="{ item: { usage } }">
-        {{ usage | bytes }}
+        <Bytes :value="usage" />
       </template>
       <template #[`item.oui`]="{ item: { oui } }">
         <small> {{ oui }}</small>
@@ -71,9 +71,10 @@
 
 <script>
 import SignalStrength from '../signalStrength.vue'
+import Bytes from '../ui/Bytes.vue'
 
 export default {
-  components: { SignalStrength },
+  components: { SignalStrength, Bytes },
   props: {
     wifiDevices: {
       type: Array,
@@ -94,7 +95,7 @@ export default {
       { text: 'Primeira aparição', value: 'firstSeen' },
       { text: 'Última aparição', value: 'lastSeen' },
       { text: 'AccessPoint', value: 'apName' },
-      { text: 'Uso', value: 'usage' }
+      { text: 'Uso', value: 'usage', align: 'end' }
     ]
   }),
   computed: {

web/src/components/DataTables/WifiDevicesDataTable.vue

@@ -14,21 +14,7 @@
       @update:sort-desc="$emit('update:sort-desc', $event)"
     >
       <template #[`item.user`]="{ item: { user } }">
-        <div v-if="user" class="d-flex">
-          <Avatar
-            class="flex-column center-block"
-            left
-            :src="user.thumbnailPhoto"
-            size="28"
-          />
-          <small class="d-block text-no-wrap">
-            {{ user.displayName }} <br />
-            {{ user.sAMAccountName }}
-          </small>
-        </div>
-        <span v-else>
-          <Avatar left size="28" no-auth /><small>Não autenticado</small>
-        </span>
+        <UserTD :user="user" />
       </template>
 
       <template #[`item.mac`]="{ item: { mac } }">
@@ -47,8 +33,8 @@
         <small> {{ uptime | durationFromSeconds }}</small>
       </template>
 
-      <template #[`item.signalStrength`]="{ item: { signalStrength } }">
-        <SignalStrength :value="signalStrength" />
+      <template #[`item.signalStrength`]="{ item: { signalStrength, status } }">
+        <SignalStrength :offline="status != 'ONLINE'" :value="signalStrength" />
       </template>
 
       <template #[`item.speed`]="{ item: { speed } }">
@@ -56,7 +42,7 @@
       </template>
 
       <template #[`item.usage`]="{ item: { usage } }">
-        <span> {{ usage | bytes }}</span>
+        <Bytes :value="usage" />
       </template>
 
       <template #[`item.protocol`]="{ item: { protocol } }">
@@ -88,11 +74,12 @@
 </template>
 
 <script>
-import Avatar from '../Avatar.vue'
 import SignalStrength from '../signalStrength.vue'
+import UserTD from './UserTD.vue'
+import Bytes from '../ui/Bytes.vue'
 
 export default {
-  components: { Avatar, SignalStrength },
+  components: { SignalStrength, UserTD, Bytes },
   props: {
     wifiDevices: {
       type: Array,

web/src/components/signalStrength.vue

@@ -5,7 +5,7 @@
     open-delay="400"
   >
     <template #activator="{ on, attrs }">
-      <template v-if="value < 0">
+      <template v-if="value < 0 && !offline">
         <v-chip
           :color="signalStrengthColor(value) + ' lighten-5'"
           small
@@ -22,7 +22,8 @@
       <template v-else>
         <v-chip small color="grey lighten-4">
           <v-icon small left color="grey">mdi-signal-off</v-icon>
-          <small>{{ noSignalText }}</small>
+          <small v-if="offline">Offline</small>
+          <small v-else>{{ noSignalText }}</small>
         </v-chip>
       </template>
     </template>
@@ -40,6 +41,10 @@ export default {
     noSignalText: {
       type: String,
       default: 'Aguarde...'
+    },
+    offline: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {

web/src/components/ui/Bytes.vue

@@ -0,0 +1,33 @@
+<template>
+  <span>
+    {{ amount }} <small>{{ unit }}</small>
+  </span>
+</template>
+
+<script>
+import { destructedBytes } from '../../plugins/format-bytes'
+
+export default {
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    destructedBytes() {
+      return destructedBytes(this.value)
+    },
+
+    amount() {
+      return this.destructedBytes.amount
+    },
+
+    unit() {
+      return this.destructedBytes.unit
+    }
+  }
+}
+</script>
+
+<style></style>

web/src/plugins/format-bytes.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-function bytes(bytes, kib, maxUnit) {
+export function destructedBytes(bytes, kib, maxUnit) {
   const decimals = 1
 
   kib = kib || false
@@ -24,7 +24,16 @@ function bytes(bytes, kib, maxUnit) {
     if (index != -1) i = index
   }
 
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i]
+  return {
+    amount: parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)),
+    unit: sizes[i]
+  }
+}
+
+function bytes(bytes) {
+  const bytesObject = destructedBytes(bytes)
+
+  return `${bytesObject.amount} ${bytesObject.unit}`
 }
 
 Vue.filter('bytes', bytes)

web/src/views/AccessPoints/clients.vue

@@ -76,7 +76,7 @@ export default {
   watch: {
     showDialog() {
       this.filter = ''
-      this.$router.push({ name: 'access-points' })
+      this.$router.back()
     }
   },
 

web/src/views/WifiDevices.vue

@@ -121,7 +121,7 @@ export default {
   },
   apollo: {
     wifiDevices: {
-      fetchPolicy: 'cache-and-network',
+      fetchPolicy: 'network-only',
       pollInterval: 10000,
       query: gql`
         query wifiDevices(
@@ -140,12 +140,6 @@ export default {
           ) {
             total
             data {
-              accessPoint {
-                id
-                name
-                hostname
-                local
-              }
               id
               hostname
               essid
@@ -158,11 +152,20 @@ export default {
               protocol
               speed
               usage
+              status
+
               user {
                 displayName
                 sAMAccountName
                 thumbnailPhoto
               }
+
+              accessPoint {
+                id
+                name
+                hostname
+                local
+              }
             }
           }
         }

web/src/views/WifiUsers.vue

@@ -106,7 +106,10 @@
             </v-expansion-panel-header>
             <v-expansion-panel-content>
               <v-expansion-panels accordion>
-                <UserWifiDevicesDataTable :wifi-devices="user.wifiDevices" />
+                <UserWifiDevicesDataTable
+                  class="grow"
+                  :wifi-devices="user.wifiDevices"
+                />
               </v-expansion-panels>
             </v-expansion-panel-content>
           </v-expansion-panel>