Improved logs

web/src/plugins/date.js

@@ -18,6 +18,9 @@ function time(date) {
   return format(new Date(date), 'HH:mm', { locale })
 }
 
+function conciseDate(date) {
+  return format(new Date(date), 'yy/MM/dd HH:mm:ss')
+}
 Vue.filter('dateAndTime', dateAndTime)
 
 Vue.filter('shortDate', shortDate)
@@ -26,4 +29,6 @@ Vue.filter('from', from)
 
 Vue.filter('time', time)
 
+Vue.filter('conciseDate', conciseDate)
+
 export { dateAndTime, shortDate, from, time }

web/src/views/Logs.vue

@@ -1,14 +1,66 @@
 <template>
   <div>
-    <v-toolbar> <v-text-field v-model="search" /> </v-toolbar>
+    <v-toolbar flat height="115">
+      <v-text-field
+        v-model="search"
+        rounded
+        outlined
+        dense
+        hide-details
+        label="Pesquisar"
+      />
+      <v-btn icon @click="$apollo.queries.logs.refetch()">
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
+    </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] }"
-        dense
-      ></v-data-table>
+      >
+        <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-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
+          }}</v-chip>
+        </template>
+
+        <template slot="item.data" slot-scope="{ item }">
+          <v-dialog>
+            <template #activator="{ on }">
+              <v-btn icon v-on="on"><v-icon>mdi-magnify</v-icon> </v-btn>
+            </template>
+            <v-card>
+              <v-card-title>
+                {{ item.message }}
+              </v-card-title>
+              <v-card-text>
+                <vue-json-pretty
+                  :data="item"
+                  :show-double-quotes="false"
+                  highlight-mouseover-node
+                  show-line
+                  show-length
+              /></v-card-text>
+            </v-card>
+          </v-dialog>
+        </template>
+      </v-data-table>
     </div>
   </div>
 </template>
@@ -16,7 +68,13 @@
 <script>
 import gql from 'graphql-tag'
 import { format } from 'date-fns'
+
+import VueJsonPretty from 'vue-json-pretty'
+
+import 'vue-json-pretty/lib/styles.css'
+
 export default {
+  components: { VueJsonPretty },
   data: () => ({
     search: '',
     showLow: true,
@@ -30,17 +88,21 @@ export default {
         text: 'Timestamp',
         value: 'timestamp'
       },
-      {
-        text: 'Tags',
-        value: 'tags'
-      },
       {
         text: 'Mensagem',
         value: 'message'
       },
+      {
+        text: 'Tags',
+        value: 'tags'
+      },
       {
         text: 'Severidade',
         value: 'level'
+      },
+      {
+        text: 'Detalhes',
+        value: 'data'
       }
     ]
   }),
@@ -48,7 +110,7 @@ export default {
     items() {
       return this.logs?.map(log => ({
         ...log,
-        timestamp: format(new Date(log.timestamp), 'yy/MM/dd HH:mm:ss')
+        data: JSON.parse(log.data)
       }))
     }
   },