Improved tagging

server/prisma/migrations/20210105173319_alter_tags/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Log" ALTER COLUMN "tags" SET DATA TYPE TEXT;

server/prisma/schema.prisma

@@ -100,7 +100,7 @@ model Log {
   id        Int      @id @default(autoincrement())
   timestamp DateTime @default(now())
   level     LogLevel @default(LOW)
-  tags      Json?
+  tags      String?
   message   String
   data      Json?
 }

server/src/lib/logger.js

@@ -26,7 +26,7 @@ async function log({ level, tags = [], message = '', data }, store = true) {
         data: {
           timestamp: now,
           level,
-          tags,
+          tags: tags.toString(),
           message,
           data
         }

server/src/resolvers/Log.js

@@ -1,7 +1,7 @@
 const Log = {
+  timestamp: parent => parent.timestamp?.toISOString(),
   data: parent => JSON.stringify(parent.data),
-
-  timestamp: parent => parent.timestamp?.toISOString()
+  tags: parent => parent.tags?.split(',')
 }
 
 export { Log }

server/src/resolvers/Query/logs.js

@@ -2,30 +2,28 @@ import prisma from '../../prisma'
 
 const MAX_RESULT = 5000
 
-export async function logs(parent, { search, dateIn, dateOut, limit }) {
+export async function logs(parent, { search, dateIn, dateOut, limit = 100 }) {
   try {
-    const logs = await prisma.log.findMany({
+    if (search) search = search.trim()
+
+    if (limit > MAX_RESULT) limit = MAX_RESULT
+
+    return prisma.log.findMany({
       where: {
         timestamp: {
           gte: dateIn ? new Date(dateIn) : undefined,
           lte: dateOut ? new Date(dateOut) : undefined
-        }
+        },
+        OR: search
+          ? [
+              { message: { contains: search, mode: 'insensitive' } },
+              { tags: { contains: search, mode: 'insensitive' } }
+            ]
+          : undefined
       },
       orderBy: { timestamp: 'desc' },
-      take: search ? MAX_RESULT : limit
+      take: 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(

web/src/components/Logs.vue

@@ -28,6 +28,7 @@
         </template>
       </v-tooltip>
       <v-spacer />
+
       <DateTimePicker v-model="dateIn" class="ma-2" label="Início" :max="max" />
       <DateTimePicker
         v-model="dateOut"
@@ -48,7 +49,7 @@
       }"
     >
       <template slot="item.timestamp" slot-scope="{ item }">
-        <v-chip dense small>
+        <v-chip dense small outlined>
           {{ item.timestamp | conciseDate }}
         </v-chip>
       </template>
@@ -87,7 +88,18 @@
       </div>
     </v-data-table>
     <v-footer>
+      <v-slider
+        v-model="limit"
+        color="primary"
+        track-color="grey"
+        min="10"
+        max="500"
+        label="Limite"
+        thumb-label
+        hide-details
+      />
       <v-spacer />
+
       <v-switch v-model="polling" label="Atualizar automaticamente" />
     </v-footer>
   </div>
@@ -188,6 +200,7 @@ export default {
   apollo: {
     logs: {
       query: LOGS_QUERY,
+      debounce: 400,
       variables() {
         return {
           search: this.search,