Minor UI changes

server/src/lib/wifiDevices.js

@@ -5,12 +5,14 @@ import * as ciscoController from './ciscoController'
 import prisma from '../prisma'
 
 import { pubsub, USER_PRESENCE_UPDATED, ACCESS_POINTS_UPDATED } from '../pubsub'
-import { logError, logSuccess } from './logger'
+import { logError, logInfo, logLow, logSuccess } from './logger'
 
 import { performance } from 'perf_hooks'
 
 const RECENT_THRESHOLD_IN_MINUTES = 2
 
+const OLD_DEVICES_THRESHOLD_IN_DAYS = 90
+
 const TIMEOUT_IN_MILLISECONDS = process.env.TASK_TIMEOUT || 120000
 
 let working = false
@@ -225,4 +227,30 @@ function updateDevicesInfo() {
   })
 }
 
-export { updateDevicesInfo }
+// Delete devices that are offline for more than OLD_DEVICES_THRESHOLD_IN_DAYS days
+async function deleteOldDevices() {
+  const oldDevicesThresholdInMilliseconds = OLD_DEVICES_THRESHOLD_IN_DAYS * 24 * 60 * 60 * 1000
+
+  const oldDevices = await prisma.wifiDevice.deleteMany({
+    where: {
+      lastSeen: {
+        lt: new Date(Date.now() - oldDevicesThresholdInMilliseconds)
+      },
+      status: 'OFFLINE'
+    }
+  })
+
+  if (oldDevices.count > 0)
+    logInfo({
+      tags: ['wifiDevices', 'deleteOldDevices'],
+      message: `${oldDevices.count} dispositivos Wi-Fi não vistos há mais de ${OLD_DEVICES_THRESHOLD_IN_DAYS} dias foram excluídos.`,
+      data: { oldDevices }
+    })
+  else
+    logInfo({
+      tags: ['wifiDevices', 'deleteOldDevices'],
+      message: `Nenhum dispositivo Wi-Fi não visto há mais de ${OLD_DEVICES_THRESHOLD_IN_DAYS} dias foi encontrado.`
+    })
+}
+
+export { updateDevicesInfo, deleteOldDevices }

server/src/resolvers/Query/wifiDevices.js

@@ -7,6 +7,8 @@ export async function wifiDevices(parent, { take = 50, skip = 0, search, sortBy,
 
   if (!onlineOnly) onlineOnly = undefined
 
+  console.log(sortBy, sortDesc);
+
   const where = {
     OR: [
       { hostname: { contains: search, mode } },
@@ -29,8 +31,8 @@ export async function wifiDevices(parent, { take = 50, skip = 0, search, sortBy,
     data: prisma.wifiDevice.findMany({
       where,
       orderBy: [
-        { status: 'asc' },
+        { [sortBy || 'hostname']: sortDesc ? 'desc' : 'asc' },
-        { [sortBy || 'hostname']: sortDesc ? 'desc' : 'asc' }],
+      ],
       include: { user: true, accessPoint: true },
       take,
       skip

web/src/components/DataTables/AccessPointClientsDataTable.vue

@@ -13,12 +13,12 @@
         <UserTD :user="user" />
       </template>
 
-      <template #[`item.mac`]="{ item: { mac } }">
+      <template #[`item.ip`]="{ item: { ip, mac } }">
+        <span class="monospace" @click="setClipboard(ip)">{{ ip }}</span>
+        <br />
+        <small>
           <code @click="setClipboard(mac)">{{ mac }}</code>
-      </template>
+        </small>
-
-      <template #[`item.ip`]="{ item: { ip } }">
-        <code @click="setClipboard(ip)">{{ ip }}</code>
       </template>
 
       <template #[`item.uptime`]="{ item: { uptime } }">
@@ -73,8 +73,7 @@ export default {
   data: () => ({
     headers: [
       { text: 'Hostname', value: 'hostname' },
-      { text: 'MAC', value: 'mac' },
+      { text: 'IP / MAC', value: 'ip' },
-      { text: 'IP', value: 'ip' },
       { text: 'ESSID', value: 'essid' },
       { text: 'Uptime', value: 'uptime' },
       { text: 'Usuário', value: 'combinedUser' },
@@ -102,4 +101,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style scoped>
+td {
+  white-space: nowrap;
+}
+</style>

web/src/components/DataTables/UserWifiDevicesDataTable.vue

@@ -19,12 +19,14 @@
         <v-chip v-else color="grey" dark x-small>Offline</v-chip>
       </template>
 
-      <template #[`item.ip`]="{ item: { ip } }">
+      <template #[`item.ip`]="{ item: { ip, mac } }">
-        <code> {{ ip }}</code>
+        <span class="monospace" @click="setClipboard(ip)">{{ ip }}</span>
-      </template>
+        <br />
-      <template #[`item.mac`]="{ item: { mac } }">
+        <small>
-        <code> {{ mac }}</code>
+          <code @click="setClipboard(mac)">{{ mac }}</code>
+        </small>
       </template>
+
       <template #[`item.essid`]="{ item: { essid } }">
         <small>{{ essid }}</small>
       </template>
@@ -53,9 +55,6 @@
         >
           {{ item.apName }}
         </router-link>
-        <span v-if="item.accessPoint.local">
-          ({{ item.accessPoint.local }})
-        </span>
       </template>
       <template #[`item.uptime`]="{ item }">
         <span v-if="item.uptime > 0">
@@ -85,8 +84,7 @@ export default {
     search: '',
     headers: [
       { text: 'Hostname', value: 'hostname' },
-      { text: 'IP', value: 'ip' },
+      { text: 'IP / MAC', value: 'ip' },
-      { text: 'MAC', value: 'mac' },
       { text: 'Status', value: 'status' },
       { text: 'ESSID', value: 'essid' },
       { text: 'Sinal', value: 'signalStrength' },
@@ -109,7 +107,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 td {
   white-space: nowrap;
 }

web/src/components/DataTables/WifiDevicesDataTable.vue

@@ -17,16 +17,16 @@
         <UserTD :user="user" />
       </template>
 
-      <template #[`item.mac`]="{ item: { mac } }">
-        <code @click="setClipboard(mac)">{{ mac }}</code>
-      </template>
-
       <template #[`item.essid`]="{ item: { essid } }">
         <small class="text-no-wrap">{{ essid }}</small>
       </template>
 
-      <template #[`item.ip`]="{ item: { ip } }">
+      <template #[`item.ip`]="{ item: { ip, mac } }">
-        <code @click="setClipboard(ip)">{{ ip }}</code>
+        <span class="monospace" @click="setClipboard(ip)">{{ ip }}</span>
+        <br />
+        <small>
+          <code @click="setClipboard(mac)">{{ mac }}</code>
+        </small>
       </template>
 
       <template #[`item.uptime`]="{ item: { uptime } }">
@@ -66,6 +66,14 @@
           </small>
         </router-link>
       </template>
+
+      <template #[`item.lastSeen`]="{ item: { lastSeen } }">
+        <small>
+          {{ lastSeen | shortDate }}
+          <br />
+          {{ lastSeen | from }}
+        </small>
+      </template>
     </v-data-table>
   </div>
 </template>
@@ -98,8 +106,7 @@ export default {
   data: () => ({
     headers: [
       { text: 'Hostname', value: 'hostname' },
-      { text: 'MAC', value: 'mac' },
+      { text: 'IP / MAC', value: 'ip' },
-      { text: 'IP', value: 'ip' },
       { text: 'ESSID', value: 'essid' },
       { text: 'Uptime', value: 'uptime' },
       { text: 'Usuário', value: 'user', sortable: false },
@@ -108,6 +115,7 @@ export default {
       { text: 'Protocolo', value: 'protocol' },
       { text: 'Velocidade', value: 'speed', align: 'end' },
       { text: 'Uso', value: 'usage', align: 'end' },
+      { text: 'Visto por último', value: 'lastSeen', align: 'end' },
       { text: 'Access Point', value: 'apName' }
     ],
     sortBy: 'hostname',
@@ -121,7 +129,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 td {
   white-space: nowrap;
 }

web/src/scss/style.scss

@@ -35,3 +35,8 @@
 .light-shadow {
   box-shadow: 1.5px 1.5px 12px rgba(0, 0, 0, 0.05) !important;
 }
+
+.monospace {
+  font-family: monospace;
+  font-size: 0.8em;
+}

web/src/views/WifiDevices.vue

@@ -96,7 +96,7 @@ export default {
     itemsPerPage: 10,
     sortBy: 'signalStrength',
     sortDesc: false,
-    onlineOnly: false
+    onlineOnly: true
   }),
   computed: {
     computedWifiDevices() {