fix: standardize logs previewer column rendering

studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabaseApiColumnRender.tsx

@@ -1,16 +1,19 @@
-import { ResponseCodeFormatter, TimestampLocalFormatter } from '../LogsFormatters'
+import {
+  ResponseCodeFormatter,
+  RowLayout,
+  TextFormatter,
+  TimestampLocalFormatter,
+} from '../LogsFormatters'
 
 export default [
   {
     formatter: (data: any) => (
-      <div className="flex h-full w-full items-center justify-between gap-3">
+      <RowLayout>
         <TimestampLocalFormatter value={data.row.timestamp!} />
-        <div className="flex h-full w-full items-center gap-4">
-          <ResponseCodeFormatter value={data.row.status_code} />
-          <span className="text-xs w-14">{data.row.method}</span>
-          <span className="font-mono text-xs">{data.row.path}</span>
-        </div>
-      </div>
+        <ResponseCodeFormatter row={data} value={data.row.status_code} />
+        <TextFormatter className="w-20" value={data.row.method} />
+        <TextFormatter className="w-full" value={data.row.path} />
+      </RowLayout>
     ),
   },
 ]

studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabasePostgresColumnRender.tsx

@@ -1,19 +1,18 @@
-import { SeverityFormatter, TimestampLocalFormatter } from '../LogsFormatters'
+import {
+  RowLayout,
+  SeverityFormatter,
+  TextFormatter,
+  TimestampLocalFormatter,
+} from '../LogsFormatters'
 
 export default [
   {
     formatter: (data: any) => (
-      <div className="flex w-full items-center gap-2 h-full">
-        <div className="flex items-center gap-2 h-full">
-          <TimestampLocalFormatter className="w-24" value={data.row.timestamp!} />
-          <div className="w-16 flex items-center">
-            <SeverityFormatter value={data.row.error_severity} />
-          </div>
-        </div>
-        <div className="flex truncate">
-          <span className="font-mono text-xs truncate">{data.row.event_message}</span>
-        </div>
-      </div>
+      <RowLayout>
+        <TimestampLocalFormatter value={data.row.timestamp!} />
+        <SeverityFormatter value={data.row.error_severity} />
+        <TextFormatter className="w-full" value={data.row.event_message} />
+      </RowLayout>
     ),
   },
 ]

studio/components/interfaces/Settings/Logs/LogColumnRenderers/DefaultPreviewColumnRenderer.tsx

@@ -1,16 +1,13 @@
 import { PreviewLogData } from '..'
-import { TimestampLocalFormatter } from '../LogsFormatters'
+import { RowLayout, TextFormatter, TimestampLocalFormatter } from '../LogsFormatters'
 
-const DefaultPreviewColumnRenderer = [
+export default [
   {
-    formatter: (data: { row: PreviewLogData }) => {
-      return (
-        <div className="flex w-full justify-start items-center gap-4 h-full">
-          <TimestampLocalFormatter value={data.row.timestamp!} />
-          <span className="font-mono text-xs truncate">{data.row.event_message}</span>
-        </div>
-      )
-    },
+    formatter: (data: { row: PreviewLogData }) => (
+      <RowLayout>
+        <TimestampLocalFormatter value={data.row.timestamp!} />
+        <TextFormatter className="w-full" value={data.row.event_message} />
+      </RowLayout>
+    ),
   },
 ]
-export default DefaultPreviewColumnRenderer

studio/components/interfaces/Settings/Logs/LogColumnRenderers/FunctionsEdgeColumnRender.tsx

@@ -1,36 +1,19 @@
-import { HeaderFormmater, ResponseCodeFormatter, TimestampLocalFormatter } from '../LogsFormatters'
+import {
+  ResponseCodeFormatter,
+  RowLayout,
+  TextFormatter,
+  TimestampLocalFormatter,
+} from '../LogsFormatters'
 
 export default [
   {
-    key: 'timestamp',
-    headerRenderer: () => (
-      <div className="flex w-full justify-end h-full">
-        <HeaderFormmater value={'timestamp'} />
-      </div>
+    formatter: (data: any) => (
+      <RowLayout>
+        <TimestampLocalFormatter value={data.row.timestamp!} />
+        <ResponseCodeFormatter row={data} value={data.row.status_code} />
+        <TextFormatter value={data.row.method} />
+        <TextFormatter value={data.row.id} />
+      </RowLayout>
     ),
-    name: 'timestamp',
-    formatter: (data: any) => <TimestampLocalFormatter value={data.row.timestamp!} />,
-    width: 128,
-  },
-  {
-    key: 'status_code',
-    headerRenderer: () => <HeaderFormmater value={'Status'} />,
-    name: 'status_code',
-    formatter: (data: any) => <ResponseCodeFormatter row={data} value={data.row.status_code} />,
-
-    width: 0,
-    resizable: true,
-  },
-  {
-    key: 'method',
-    headerRenderer: () => <HeaderFormmater value={'method'} />,
-    width: 0,
-    resizable: true,
-  },
-  {
-    key: 'id',
-    headerRenderer: () => <HeaderFormmater value={'id'} />,
-    name: 'id',
-    resizable: true,
   },
 ]

studio/components/interfaces/Settings/Logs/LogColumnRenderers/FunctionsLogsColumnRender.tsx

@@ -1,36 +1,22 @@
-import { HeaderFormmater, SeverityFormatter, TimestampLocalFormatter } from '../LogsFormatters'
+import {
+  RowLayout,
+  SeverityFormatter,
+  TextFormatter,
+  TimestampLocalFormatter,
+} from '../LogsFormatters'
 
 export default [
   {
-    key: 'timestamp',
-    headerRenderer: () => (
-      <div className="flex w-full justify-end h-full">
-        <HeaderFormmater value={'timestamp'} />
-      </div>
-    ),
-    name: 'timestamp',
     formatter: (data: any) => (
-      <TimestampLocalFormatter className="!text-scale-1100" value={data.row.timestamp!} />
+      <RowLayout>
+        <TimestampLocalFormatter value={data.row.timestamp!} />
+        {data.row.event_type === 'uncaughtException' ? (
+          <SeverityFormatter value={data.row.event_type} uppercase={false} />
+        ) : (
+          <SeverityFormatter value={data.row.level} />
+        )}
+        <TextFormatter className="w-full" value={data.row.event_message} />
+      </RowLayout>
     ),
-    width: 128,
-    resizable: true,
-  },
-  {
-    key: 'level',
-    headerRenderer: () => <HeaderFormmater value={'Level'} />,
-    name: 'level',
-    formatter: (data: any) => {
-      if (data.row.event_type === 'uncaughtException') {
-        return <SeverityFormatter value={data.row.event_type} uppercase={false} />
-      }
-      return <SeverityFormatter value={data.row.level} />
-    },
-    width: 24,
-    resizable: true,
-  },
-  {
-    key: 'event_message',
-    headerRenderer: () => <HeaderFormmater value={'Event message'} />,
-    resizable: true,
   },
 ]

studio/components/interfaces/Settings/Logs/LogsFormatters.tsx

@@ -6,8 +6,18 @@
 
 import { IconAlertCircle, IconInfo } from '@supabase/ui'
 import dayjs from 'dayjs'
+import React from 'react'
 import { isUnixMicro, unixMicroToIsoTimestamp } from '.'
 
+export const RowLayout: React.FC = ({ children }) => (
+  <div className="flex h-full w-full items-center gap-4">{children}</div>
+)
+
+export const TextFormatter: React.FC<{ className?: string; value: string }> = ({
+  value,
+  className,
+}) => <span className={'font-mono text-xs truncate ' + className}>{value}</span>
+
 export const ResponseCodeFormatter = ({ value }: any) => {
   if (!value) {
     return (
@@ -109,6 +119,9 @@ export const SeverityFormatter = ({
 
   const uppercasedValue = value.toUpperCase()
   const text = uppercase ? uppercasedValue : value
+  const Layout: React.FC<{ className?: string }> = ({ className, children }) => (
+    <div className={`w-24 flex items-center h-full ${className}`}>{children}</div>
+  )
 
   switch (uppercasedValue) {
     case 'UNCAUGHTEXCEPTION':
@@ -116,12 +129,12 @@ export const SeverityFormatter = ({
     case 'FATAL':
     case 'ERROR':
       return (
-        <div className="flex items-center h-full gap-1">
+        <Layout className="gap-1">
           <div className=" p-0.5 rounded !text-red-900">
             <IconAlertCircle size={14} strokeWidth={2} />
           </div>
           <span className="!text-red-900 !block titlecase">{text}</span>
-        </div>
+        </Layout>
       )
       break
 
@@ -129,45 +142,45 @@ export const SeverityFormatter = ({
 
     case 'DEBUG':
       return (
-        <div className="flex items-center h-full gap-1">
+        <Layout className="gap-1">
           <div className=" p-0.5 rounded !text-blue-900">
             <IconAlertCircle size={14} strokeWidth={2} />
           </div>
           <span className="!text-blue-900 !block titlecase">{text}</span>
-        </div>
+        </Layout>
       )
       break
 
     case 'LOG':
       return (
-        <div className="flex items-center h-full gap-1">
+        <Layout className="gap-1">
           <div className=" p-0.5 rounded !text-blue-900">
             <IconInfo size={14} strokeWidth={2} />
           </div>
           <span className="!text-blue-900 !block titlecase">{text}</span>
-        </div>
+        </Layout>
       )
       break
 
     case 'WARNING':
       return (
-        <div className="flex items-center h-full gap-1">
+        <Layout className="gap-1">
           <div className=" p-0.5 rounded !text-amber-900">
             <IconAlertCircle size={14} strokeWidth={2} />
           </div>
           <span className="!text-amber-900 !block titlecase">{text}</span>
-        </div>
+        </Layout>
       )
       break
 
     // All other responses
     default:
       return (
-        <div className="flex items-center h-full">
+        <Layout>
           <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">{text}</label>
           </div>
-        </div>
+        </Layout>
       )
       break
   }