added log line rendering in table view

studio/components/ui/Logs/LogTable.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import Table from 'components/to-be-cleaned/Table'
-import { Tab } from '@headlessui/react'
 import { Typography } from '@supabase/ui'
+import dayjs from 'dayjs'
 
 interface Props {
-  data: LogData[] | null
+  data: LogData[] | null | undefined
 }
 
-interface LogData extends LogDataCommon {
-  [key: string]: string | number
+interface Metadata {
+  [key: string]: string | number | Object | Object[]
 }
-interface LogDataCommon {
+export interface LogData {
+  id: string
   timestamp: number
   event_message: string
+  metadata: Metadata
 }
 
 
@@ -33,10 +35,14 @@ const LogTable = ({ data }: Props) => {
   return (
     <Table containerClassName="mx-auto container"
       head={columns.map((c) => <Table.th key={c}>{c}</Table.th>)}
-      body={data.map(d => (
-        <Table.tr>
-          {columns.map(c => <Table.td key={c}>{d[c]}</Table.td>)}
-        </Table.tr>))}
+      body={data.map(d =>
+        <Table.tr key={d.id}>
+          {columns.map(c => <Table.td key={c} >
+            {c === "timestamp" &&
+              <Typography.Text className="block bg-green-800" code>{dayjs(d[c] / 1000).toString()}</Typography.Text>}
+            {c === "event_message" && <Typography.Text className="block" code>{d[c]}</Typography.Text>}
+          </Table.td>)}
+        </Table.tr>)}
     />
   )
 }

studio/pages/project/[ref]/settings/logs/[type].tsx

@@ -6,15 +6,11 @@ import { LOG_TYPE_LABEL_MAPPING } from 'lib/constants'
 import { observer } from 'mobx-react-lite'
 import { withAuth } from 'hooks'
 import { get } from "lib/common/fetch"
-import LogTable from 'components/ui/Logs/LogTable'
+import LogTable, {LogData} from 'components/ui/Logs/LogTable'
 import useSWR from 'swr'
 import { API_URL } from 'lib/constants'
 import { Typography } from '@supabase/ui'
 
-interface LogsResponse {
-  data: any
-  error: any
-}
 /**
  * Acts as a container component for the entire log display
  */
@@ -28,7 +24,7 @@ const LogPage = () => {
     data,
     isValidating: isLoading,
     mutate,
-  } = useSWR<{ data: LogsResponse, error: any }>(`${API_URL}/projects/${ref}/logs?type=${type}`, get, {
+  } = useSWR<{ data: LogData[],  count: number, error: any }>(`${API_URL}/projects/${ref}/logs?type=${type}`, get, {
     revalidateOnFocus: false,
   })
   console.log(data)