Data fetching OK

web/src/router/index.js

@@ -217,6 +217,18 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "wifi-stats" */ '../views/WifiStats.vue')
   },
+  {
+    path: '/access-points/stats',
+    name: 'access-points-stats',
+    meta: {
+      title: 'Status dos Access Points',
+      roles: ['superAdmin']
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "access-points-stats" */ '../views/AccessPoints/stats.vue'
+      )
+  },
 
   {
     path: '/access-points/:id/clients',

web/src/views/AccessPoints/index.vue

@@ -62,6 +62,15 @@
         hide-details
         :label="`Somente ${me.campusFull}`"
       />
+      <v-btn
+        class="ml-2"
+        text
+        color="secondary"
+        :to="{ name: 'access-points-stats' }"
+      >
+        <v-icon left>mdi-chart-line</v-icon>
+        Status
+      </v-btn>
     </v-toolbar>
 
     <v-data-table

web/src/views/AccessPoints/stats.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <v-toolbar dense flat>
+      <v-select
+        class="mr-2"
+        :items="subnetSelectItems"
+        v-model="subnet"
+        style="max-width: 250px"
+        hide-details
+        outlined
+        dense
+        prepend-inner-icon="mdi-home-group"
+      />
+
+      <v-spacer />
+      <v-select
+        class="mr-2"
+        v-model="orderBy"
+        style="max-width: 250px"
+        :items="orderByOptions"
+        hide-details
+        outlined
+        dense
+        prepend-inner-icon="mdi-sort"
+      />
+      <v-select
+        v-model="minutesIn"
+        style="max-width: 250px"
+        :items="minutesInItems"
+        hide-details
+        outlined
+        dense
+        prepend-inner-icon="mdi-timer-outline"
+      />
+    </v-toolbar>
+
+    {{ accessPoints }}
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+export default {
+  name: 'AccessPointsStats',
+  data() {
+    return {
+      subnet: null,
+      minutesIn: 1440,
+      minutesInItems: [
+        {
+          text: 'Última hora',
+          value: 60
+        },
+        {
+          text: 'Últimas 3 horas',
+          value: 180
+        },
+        {
+          text: 'Últimas 6 horas',
+          value: 360
+        },
+        {
+          text: 'Últimas 12 horas',
+          value: 720
+        },
+        {
+          text: 'Últimas 24 horas',
+          value: 1440
+        },
+        {
+          text: 'Últimos 7 dias',
+          value: 10080
+        },
+        {
+          text: 'Últimos 30 dias',
+          value: 43200
+        }
+      ],
+      orderByOptions: [
+        'Alfabética',
+        'Clientes atualmente',
+        'Pico de clientes',
+        'Menor quantidade de clientes',
+        'Média de clientes'
+      ],
+      orderBy: 'Pico de clientes'
+    }
+  },
+  computed: {
+    subnetSelectItems() {
+      return this.subnets?.map(network => {
+        return {
+          text: network.name,
+          value: network.shortName
+        }
+      })
+    }
+  },
+
+  apollo: {
+    me: {
+      query: gql`
+        {
+          me {
+            campus
+          }
+        }
+      `,
+      result({ data }) {
+        this.subnet = data?.me.campus
+      }
+    },
+    subnets: {
+      query: gql`
+        {
+          subnets {
+            shortName
+            name
+            cidr
+          }
+        }
+      `
+    },
+    accessPoints: {
+      skip() {
+        return !this.subnet
+      },
+      query: gql`
+        query accessPoints($networkShortName: String!, $minutesIn: Int!) {
+          accessPoints(networkShortName: $networkShortName) {
+            id
+            mac
+            subnetInfo {
+              shortName
+            }
+            stats(minutesIn: $minutesIn) {
+              timestamp
+              id
+              clients
+              avgUsage
+              sumUsage
+            }
+          }
+        }
+      `,
+      variables() {
+        return {
+          networkShortName: this.subnet,
+          minutesIn: this.minutesIn
+        }
+      }
+    }
+  }
+}
+</script>