Added data browse to log page

web/src/views/Logs.vue

@@ -1,67 +1,83 @@
 <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
+        class="mt-6 search"
-        outlined
-        dense
-        hide-details
         label="Pesquisar"
+        prepend-icon="mdi-magnify"
+        clearable
+        outlined
+        rounded
+        style="max-width: 512px"
       />
-      <v-btn icon @click="$apollo.queries.logs.refetch()">
+
-        <v-icon>mdi-refresh</v-icon>
+      <v-tooltip bottom>
-      </v-btn>
+        <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] }"
-      >
-        <template slot="item.timestamp" slot-scope="{ item }">
-          <v-chip dense small>
-            {{ item.timestamp | conciseDate }}
-          </v-chip>
-        </template>
 
-        <template slot="item.level" slot-scope="{ item }">
+    <v-data-table
-          <v-alert border="left" dense dark :color="item.level.toLowerCase()">
+      :items="items"
-            {{ item.level.capitalize() }}
+      :headers="headers"
-          </v-alert>
+      :search="search"
-        </template>
+      calculate-widths
+      :footer-props="{
+        itemsPerPageOptions: [10, 15, 20, 40, 60, 80, 100]
+      }"
+    >
+      <template slot="item.timestamp" slot-scope="{ item }">
+        <v-chip dense small>
+          {{ item.timestamp | conciseDate }}
+        </v-chip>
+      </template>
 
-        <template slot="item.tags" slot-scope="{ item }">
+      <template slot="item.tags" slot-scope="{ item }">
-          <v-chip v-for="tag in item.tags" :key="tag" class="ml-1" small>{{
+        <v-chip v-for="tag in item.tags" :key="tag" class="ml-1" small>{{
-            tag
+          tag
-          }}</v-chip>
+        }}</v-chip>
-        </template>
+      </template>
 
-        <template slot="item.data" slot-scope="{ item }">
+      <template slot="item.data" slot-scope="{ item }">
-          <v-dialog>
+        <v-dialog>
-            <template #activator="{ on }">
+          <template #activator="{ on }">
-              <v-btn icon v-on="on"><v-icon>mdi-magnify</v-icon> </v-btn>
+            <v-btn icon v-on="on"><v-icon>mdi-magnify</v-icon> </v-btn>
-            </template>
+          </template>
-            <v-card>
+          <v-card>
-              <v-card-title>
+            <v-card-title>
-                {{ item.message }}
+              {{ item.message }}
-              </v-card-title>
+            </v-card-title>
-              <v-card-text>
+            <v-card-text>
-                <vue-json-pretty
+              <vue-json-pretty
-                  :data="item"
+                :data="item"
-                  :show-double-quotes="false"
+                :show-double-quotes="false"
-                  highlight-mouseover-node
+                highlight-mouseover-node
-                  show-line
+                show-line
-                  show-length
+                show-length
-              /></v-card-text>
+            /></v-card-text>
-            </v-card>
+          </v-card>
-          </v-dialog>
+        </v-dialog>
-        </template>
+      </template>
-      </v-data-table>
+
-    </div>
+      <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>