From e1b00ebec4ce2ed4a342ff729bae1cfa1158ae7b Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Wed, 30 Mar 2022 00:59:28 +0200
Subject: [PATCH] fix: log line centering, added more filters for postgres
 errors

---
 .../DatabasePostgresColumnRender.tsx          |  6 +++---
 .../Settings/Logs/Logs.constants.ts           | 10 +++++++--
 .../Settings/Logs/LogsFormatters.tsx          | 21 ++++++++-----------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabasePostgresColumnRender.tsx b/studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabasePostgresColumnRender.tsx
index 1aef0f580fc..64ac9837e7b 100644
--- a/studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabasePostgresColumnRender.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabasePostgresColumnRender.tsx
@@ -4,13 +4,13 @@ import { SeverityFormatter } from '../LogsFormatters'
 export default [
   {
     formatter: (data: any) => (
-      <div className="flex w-full items-center gap-2">
-        <div className="flex items-center gap-2">
+      <div className="flex w-full items-center gap-2 h-full">
+        <div className="flex items-center gap-2 h-full">
           <span className="w-24 flex items-center gap-1">
             <span className="text-xs">{dayjs(data?.row?.timestamp / 1000).format('DD MMM')}</span>
             <span className="text-xs">{dayjs(data?.row?.timestamp / 1000).format('HH:mm:ss')}</span>
           </span>
-          <div className="w-16 flex">
+          <div className="w-16 flex items-center">
             <SeverityFormatter value={data?.row?.metadata[0].parsed[0].error_severity} />
           </div>
         </div>
diff --git a/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index d99ca218849..d105adf6496 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
@@ -230,7 +230,8 @@ LIMIT 100
 
 export const SQL_FILTER_TEMPLATES: any = {
   postgres_logs: {
-    'severity.error': `metadataParsed.error_severity = 'ERROR'`,
+    'severity.error': `metadataParsed.error_severity in ('ERROR', 'FATAL', 'PANIC')`,
+    'severity.noError': `metadataParsed.error_severity not in ('ERROR', 'FATAL', 'PANIC')`,
     'severity.log': `metadataParsed.error_severity = 'LOG'`,
   },
   edge_logs: {
@@ -334,7 +335,12 @@ export const FILTER_OPTIONS: FilterOptions = {
         {
           key: 'error',
           label: 'Error',
-          description: 'Show all events that have error severity',
+          description: 'Show all events with ERROR, PANIC, or FATAL',
+        },
+        {
+          key: 'noError',
+          label: 'No Error',
+          description: 'Show all non-error events',
         },
         {
           key: 'log',
diff --git a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
index c7c3f4dc96b..04304e51975 100644
--- a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
@@ -102,10 +102,12 @@ export const SeverityFormatter = ({ value }: { value: string }) => {
     )
   }
 
-  value = value.toLowerCase()
+  value = value.toUpperCase()
 
   switch (value) {
-    case 'error':
+    case 'PANIC':
+    case 'FATAL':
+    case 'ERROR':
       return (
         <div className="flex items-center h-full gap-1">
           <div className=" p-0.5 rounded !text-red-900">
@@ -116,9 +118,9 @@ export const SeverityFormatter = ({ value }: { value: string }) => {
       )
       break
 
-    case 'info':
+    case 'INFO':
 
-    case 'debug':
+    case 'DEBUG':
       return (
         <div className="flex items-center h-full gap-1">
           <div className=" p-0.5 rounded !text-blue-900">
@@ -129,7 +131,7 @@ export const SeverityFormatter = ({ value }: { value: string }) => {
       )
       break
 
-    case 'log':
+    case 'LOG':
       return (
         <div className="flex items-center h-full gap-1">
           <div className=" p-0.5 rounded !text-blue-900">
@@ -140,7 +142,7 @@ export const SeverityFormatter = ({ value }: { value: string }) => {
       )
       break
 
-    case 'warning':
+    case 'WARNING':
       return (
         <div className="flex items-center h-full gap-1">
           <div className=" p-0.5 rounded !text-amber-900">
@@ -155,12 +157,7 @@ export const SeverityFormatter = ({ value }: { value: string }) => {
     default:
       return (
         <div className="flex items-center h-full">
-          <div
-            className="relative rounded px-2 py-1 text-center h-6 flex justify-center items-center
-            bg-scale-300
-            
-            "
-          >
+          <div className="relative rounded px-2 py-1 text-center h-6 flex justify-center items-center bg-scale-300">
             <label className="block font-mono text-sm text-scale-900">{value}</label>
           </div>
         </div>