adjusted logs styling, added swr for data fetching

studio/components/ui/Logs/LogPanel.tsx

@@ -1,28 +1,38 @@
 import React from 'react'
 import { Button, Icon, Typography } from '@supabase/ui'
+import Panel from 'components/to-be-cleaned/Panel'
+
 interface Props {
-  title: string
   onRefresh?: () => void
   isLoading: boolean
+  children?: JSX.Element
   heading?: JSX.Element
 }
 
 /**
  * Logs control panel header + wrapper
  */
-const LogPanel = ({ onRefresh, isLoading, heading }: Props) => (
-  <div className="flex items-center justify-between w-full">
-    <div>
-      {heading}
-    </div>
-    <Button
-      type="outline"
-      loading={isLoading}
-      disabled={isLoading ? true : false}
-      onClick={onRefresh}
-    >
-      Refresh
-    </Button>
-  </div>
+const LogPanel = ({ onRefresh, isLoading, heading, children }: Props) => (
+  <Panel
+    title={
+      <div
+        className="flex items-center justify-between w-full"
+      >
+        <Button type="secondary">Recent - All</Button>
+        <div>
+          <Button
+            type="outline"
+            loading={isLoading}
+            disabled={isLoading ? true : false}
+            onClick={onRefresh}
+          >
+            Refresh
+          </Button>
+        </div>
+      </div>
+    }
+    footer={children}
+  >
+  </Panel>
 )
 export default LogPanel

studio/components/ui/Logs/LogTable.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import Table from 'components/to-be-cleaned/Table'
 import { Tab } from '@headlessui/react'
+import { Typography } from '@supabase/ui'
 
 interface Props {
-  data: LogData[]
+  data: LogData[] | null
 }
 
 interface LogData extends LogDataCommon {
@@ -18,8 +19,17 @@ interface LogDataCommon {
 /**
  * Logs table view
  */
-const LogTable = ({ data=[] }: Props) => {
+const LogTable = ({ data }: Props) => {
   const columns = ["timestamp", "event_message"]
+
+  if (!data) {
+    return null
+  }
+
+  if (data === []) {
+    return <Typography.Text className="text-center">No data returned from query</Typography.Text>
+  }
+
   return (
     <Table containerClassName="mx-auto container"
       head={columns.map(c => <Table.th>{c}</Table.th>)}

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

@@ -6,29 +6,36 @@ 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 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
  */
 const LogPage = () => {
   const router = useRouter()
   const { ref, type } = router.query
-  const title = LOG_TYPE_LABEL_MAPPING[type]
-  const [loading, setLoading] = useState(false)
-  const [data, setData] = useState(null)
+  const title = LOG_TYPE_LABEL_MAPPING[type as string]
 
-  useEffect(() => {
-    handleFetch()
-  }, [])
-  const handleFetch = async () => {
-    setLoading(true)
-    const result = await get(`${process.env.NEXT_PUBLIC_PLATFORM_API_URL}/projects/${ref}/logs?type=${type}`)
-    console.log('handleFetch', data)
-    setData(result)
-    setLoading(false)
-  }
+  // handle log fetching
+  const {
+    data,
+    isValidating: isLoading,
+    mutate,
+  } = useSWR<{ data: LogsResponse, error: any }>(`${API_URL}/projects/${ref}/logs?type=${type}`, get)
+
+  const { data: logData, error } = data || {}
   return (
-    <SettingsLayout title={title}>
-      <LogPanel isLoading={loading} onRefresh={handleFetch} />
+    <SettingsLayout title={title} className="p-4">
+      <LogPanel isLoading={isLoading} onRefresh={() => mutate()} />
+      {error && (<Typography.Text className="text-center w-full block">Could not fetch data</Typography.Text>)}
+      <LogTable data={logData} />
     </SettingsLayout>
   )
 }