fix: log line centering, added more filters for postgres errors

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>

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',

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>