Show AP clients dialog

server/src/resolvers/Query/accessPoint.js

@@ -3,6 +3,12 @@ import prisma from '../../prisma'
 export async function accessPoint(parent, { id }, context, info) {
   return prisma.accessPoint.findUnique({
     where: { id: parseInt(id) },
-    include: { wifiDevices: true }
+    include: {
+      wifiDevices: {
+        where: {
+          status: 'ONLINE'
+        }
+      }
+    }
   })
 }

web/src/router/index.js

@@ -177,8 +177,22 @@ const routes = [
     },
     component: () =>
       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'
+          )
+      }
+    ]
   },
 
   {

web/src/views/AccessPoints/index.vue

@@ -1,5 +1,6 @@
 <template>
   <v-container class="access-points" fluid>
+    <router-view />
     <v-toolbar class="mb-2" flat outlined>
       <v-menu
         offset-y
@@ -73,6 +74,7 @@
             class="client-chip"
             :color="loadColor(item.clients) + ' lighten-5'"
             pill
+            @click="navigateToAccessPoint(item)"
           >
             <v-icon left :color="loadColor(item.clients)">
               {{ loadIcon(item.clients) }}
@@ -109,7 +111,7 @@
 
 <script>
 import gql from 'graphql-tag'
-import ApIcon from '../components/ApIcon.vue'
+import ApIcon from '@/components/ApIcon.vue'
 
 export default {
   name: 'AccessPoints',
@@ -149,9 +151,7 @@ export default {
       { text: 'Última atualização', value: 'updatedAt', width: 160 }
     ]
   }),
-  mounted() {
+
-    this.resetDefaultHeaders()
-  },
   computed: {
     headers() {
       return this.allHeaders.filter(header => header.active)
@@ -163,12 +163,21 @@ export default {
       }))
     }
   },
+  mounted() {
+    this.resetDefaultHeaders()
+  },
   methods: {
+    navigateToAccessPoint(accessPoint) {
+      this.$router.push({
+        name: 'access-point',
+        params: { id: accessPoint.id }
+      })
+    },
     readableUptime(uptime) {
       return Math.floor(uptime / 3600)
     },
     load(connectedClients) {
-      const MAX_LOAD = 70
+      const MAX_LOAD = 60
       const load = Math.floor((connectedClients / MAX_LOAD) * 100)
       return load < 100 ? load : 100
     },

web/src/views/AccessPoints/single.vue

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