From a45d6baf80640fa8df7dc4208cd1ce3ad01c1b3a Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Tue, 30 Nov 2021 02:53:20 +0800
Subject: [PATCH] added log line rendering in table view

---
 studio/components/ui/Logs/LogTable.tsx        | 24 ++++++++++++-------
 .../project/[ref]/settings/logs/[type].tsx    |  8 ++-----
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/studio/components/ui/Logs/LogTable.tsx b/studio/components/ui/Logs/LogTable.tsx
index 07a34bec28a..deb6d6dbad7 100644
--- a/studio/components/ui/Logs/LogTable.tsx
+++ b/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>)}
     />
   )
 }
diff --git a/studio/pages/project/[ref]/settings/logs/[type].tsx b/studio/pages/project/[ref]/settings/logs/[type].tsx
index f34e8872e32..a890f5587bb 100644
--- a/studio/pages/project/[ref]/settings/logs/[type].tsx
+++ b/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)