Added log search

server/src/resolvers/Query/logs.js

@@ -1,8 +1,36 @@
+import { logError } from '../../lib/logger'
 import prisma from '../../prisma'
 
-export async function logs() {
-  return await prisma.log.findMany({
-    orderBy: { timestamp: 'desc' },
-    take: 500
-  })
+export async function logs(parent, { search, dateIn, dateOut, limit }) {
+  if (!dateOut) dateOut = new Date()
+
+  try {
+    const logs = await prisma.log.findMany({
+      where: {
+        timestamp: {
+          gte: new Date(dateIn),
+          lte: new Date(dateOut)
+        }
+      },
+      orderBy: { timestamp: 'desc' },
+      take: search ? undefined : limit
+    })
+
+    if (search) search = search.trim().toLowerCase()
+
+    return search
+      ? logs
+          .filter(
+            log =>
+              log.message.toLowerCase().includes(search) ||
+              log.tags.some(tag => tag.toLowerCase().includes(search))
+          )
+          .slice(0, limit)
+      : logs
+  } catch (e) {
+    console.error(e.message)
+    throw new Error(
+      'Não foi possível recuperar os logs com a entrada especificada.'
+    )
+  }
 }

server/src/typeDefs.js

@@ -48,9 +48,14 @@ const typeDefs = gql`
       @cacheControl(maxAge: 10, scope: PRIVATE)
 
     "Application Logs"
-    logs: [Log]!
+    logs(
+      search: String = ""
+      dateIn: String!
+      dateOut: String
+      limit: Int = 200
+    ): [Log]!
       @auth(roles: ["superAdmin"])
-      @cacheControl(maxAge: 5, scope: PRIVATE)
+      @cacheControl(maxAge: 2, scope: PRIVATE)
   }
 
   type Mutation {

web/src/views/Logs.vue

@@ -27,13 +27,15 @@
           </v-btn>
         </template>
       </v-tooltip>
+      <v-spacer />
+
+      <v-checkbox v-model="polling" label="Atualizar automaticamente" />
     </v-toolbar>
 
     <v-data-table
       :loading="$apollo.queries.logs.loading"
       :items="items"
       :headers="headers"
-      :search="search"
       calculate-widths
       :footer-props="{
         itemsPerPageOptions: [10, 15, 20, 40, 60, 80, 100]
@@ -83,22 +85,41 @@
 
 <script>
 import gql from 'graphql-tag'
-import { format } from 'date-fns'
+import { format, subDays } from 'date-fns'
 
 import VueJsonPretty from 'vue-json-pretty'
 
 import 'vue-json-pretty/lib/styles.css'
 
+const LOGS_QUERY = gql`
+  query($search: String, $dateIn: String!, $dateOut: String, $limit: Int) {
+    logs(search: $search, dateIn: $dateIn, dateOut: $dateOut, limit: $limit) {
+      id
+      timestamp
+      level
+      tags
+      message
+      data
+    }
+  }
+`
+
 export default {
   components: { VueJsonPretty },
   data: () => ({
-    search: '',
     showLow: true,
     showInfo: true,
     showWarning: true,
     showError: true,
     showSuccess: true,
 
+    search: '',
+    dateIn: new Date(),
+    dateOut: null,
+    limit: 100,
+
+    polling: false,
+
     headers: [
       {
         text: 'Timestamp',
@@ -135,21 +156,27 @@ export default {
       }))
     }
   },
+  watch: {
+    polling() {
+      if (this.polling) this.$apollo.queries.logs.startPolling(5000)
+      else this.$apollo.queries.logs.stopPolling()
+    }
+  },
   apollo: {
     logs: {
-      query: gql`
-        query {
-          logs {
-            id
-            timestamp
-            level
-            tags
-            message
-            data
-          }
+      query: LOGS_QUERY,
+      variables() {
+        return {
+          search: this.search,
+          dateIn: this.dateIn,
+          dateOut: this.dateOut,
+          limit: this.limit
         }
-      `
+      }
     }
+  },
+  beforeMount() {
+    this.dateIn = subDays(new Date(), 5).toISOString().substr(0, 10)
   }
 }
 </script>