Added data browse to log page

web/src/views/Logs.vue

@@ -1,26 +1,43 @@
 <template>
   <div>
-    <v-toolbar flat height="115">
+    <v-toolbar height="115" class="align-content-center bottom-border" flat>
       <v-text-field
         v-model="search"
-        rounded
-        outlined
-        dense
-        hide-details
+        class="mt-6 search"
         label="Pesquisar"
+        prepend-icon="mdi-magnify"
+        clearable
+        outlined
+        rounded
+        style="max-width: 512px"
       />
-      <v-btn icon @click="$apollo.queries.logs.refetch()">
+
+      <v-tooltip bottom>
+        <span>Atualizar</span>
+        <template #activator="{ on }">
+          <v-btn
+            class="ml-2"
+            :loading="$apollo.queries.logs.loading"
+            icon
+            large
+            v-on="on"
+            @click="$apollo.queries.logs.refetch()"
+          >
             <v-icon>mdi-refresh</v-icon>
           </v-btn>
+        </template>
+      </v-tooltip>
     </v-toolbar>
     <v-progress-linear :indeterminate="$apollo.queries.logs.loading" />
-    <div>
+
     <v-data-table
       :items="items"
       :headers="headers"
       :search="search"
       calculate-widths
-        :footer-props="{ itemsPerPageOptions: [20, 40, 60, 80, 100] }"
+      :footer-props="{
+        itemsPerPageOptions: [10, 15, 20, 40, 60, 80, 100]
+      }"
     >
       <template slot="item.timestamp" slot-scope="{ item }">
         <v-chip dense small>
@@ -28,12 +45,6 @@
         </v-chip>
       </template>
 
-        <template slot="item.level" slot-scope="{ item }">
-          <v-alert border="left" dense dark :color="item.level.toLowerCase()">
-            {{ item.level.capitalize() }}
-          </v-alert>
-        </template>
-
       <template slot="item.tags" slot-scope="{ item }">
         <v-chip v-for="tag in item.tags" :key="tag" class="ml-1" small>{{
           tag
@@ -60,8 +71,13 @@
           </v-card>
         </v-dialog>
       </template>
-      </v-data-table>
+
+      <div slot="item.level" slot-scope="{ item }">
+        <v-alert class="ma-0 py-1" dense dark :type="item.level.toLowerCase()">
+          {{ item.level.capitalize() }}
+        </v-alert>
       </div>
+    </v-data-table>
   </div>
 </template>
 
@@ -86,7 +102,9 @@ export default {
     headers: [
       {
         text: 'Timestamp',
-        value: 'timestamp'
+        value: 'timestamp',
+        width: 150,
+        align: 'start'
       },
       {
         text: 'Mensagem',
@@ -98,11 +116,14 @@ export default {
       },
       {
         text: 'Severidade',
-        value: 'level'
+        value: 'level',
+        width: 150
       },
       {
         text: 'Detalhes',
-        value: 'data'
+        value: 'data',
+        width: 100,
+        align: 'center'
       }
     ]
   }),

web/src/views/WifiDevices.vue

@@ -22,7 +22,7 @@
             icon
             large
             v-on="on"
-            @click="$apollo.queries.wifiDevices.refresh()"
+            @click="$apollo.queries.wifiDevices.refetch()"
           >
             <v-icon>mdi-refresh</v-icon>
           </v-btn>

web/src/views/WifiUsers.vue

@@ -22,7 +22,7 @@
             icon
             large
             v-on="on"
-            @click="$apollo.queries.wifiUsers.refresh()"
+            @click="$apollo.queries.wifiUsers.refetch()"
           >
             <v-icon>mdi-refresh</v-icon>
           </v-btn>