From 760c03ef9bace83e44f73a8252cf0bc7cdbe07e2 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 13 Oct 2022 04:04:43 +0800
Subject: [PATCH] feat: implement UI pages for postgrest and pgbouncer logs

---
 .../Settings/Logs/Logs.constants.ts           | 12 +++++++++
 .../interfaces/Settings/Logs/Logs.types.ts    |  2 ++
 .../DatabaseLayout/DatabaseMenu.utils.ts      |  1 -
 .../project/[ref]/database/pgbouncer-logs.tsx | 25 +++++++++++++++++++
 .../project/[ref]/database/postgrest-logs.tsx | 25 +++++++++++++++++++
 5 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 studio/pages/project/[ref]/database/pgbouncer-logs.tsx
 create mode 100644 studio/pages/project/[ref]/database/postgrest-logs.tsx

diff --git a/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index 540e4d91103..b6c27b117e7 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
@@ -271,6 +271,12 @@ export const SQL_FILTER_TEMPLATES: any = {
   storage_logs: {
     ..._SQL_FILTER_COMMON,
   },
+  postgrest_logs: {
+    ..._SQL_FILTER_COMMON,
+  },
+  pgbouncer_logs: {
+    ..._SQL_FILTER_COMMON,
+  }
 }
 
 export enum LogsTableName {
@@ -281,6 +287,8 @@ export enum LogsTableName {
   AUTH = 'auth_logs',
   REALTIME = 'realtime_logs',
   STORAGE = 'storage_logs',
+  PGBOUNCER = "pgbouncer_logs",
+  POSTGREST = "postgrest_logs"
 }
 
 export const LOGS_TABLES = {
@@ -291,6 +299,8 @@ export const LOGS_TABLES = {
   auth: LogsTableName.AUTH,
   realtime: LogsTableName.REALTIME,
   storage: LogsTableName.STORAGE,
+  postgrest: LogsTableName.POSTGREST,
+  pgbouncer: LogsTableName.PGBOUNCER
 }
 
 export const LOGS_SOURCE_DESCRIPTION = {
@@ -301,6 +311,8 @@ export const LOGS_SOURCE_DESCRIPTION = {
   [LogsTableName.AUTH]: 'Authentication logs from GoTrue',
   [LogsTableName.REALTIME]: 'Realtime server for Postgres logical replication broadcasting',
   [LogsTableName.STORAGE]: 'Object storage logs',
+  [LogsTableName.PGBOUNCER]: 'Postgres connection pooler logs',
+  [LogsTableName.POSTGREST]: 'RESTful API web server logs',
 }
 
 export const genQueryParams = (params: { [k: string]: string }) => {
diff --git a/studio/components/interfaces/Settings/Logs/Logs.types.ts b/studio/components/interfaces/Settings/Logs/Logs.types.ts
index cb52408d712..cc10f35be77 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.types.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.types.ts
@@ -84,6 +84,8 @@ export type QueryType =
   | 'auth'
   | 'realtime'
   | 'storage'
+  | "pgbouncer"
+  | "postgrest"
 
 export type Mode = 'simple' | 'custom'
 
diff --git a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts
index 954c094af28..2a3889277c5 100644
--- a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts
+++ b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts
@@ -5,7 +5,6 @@ import { useFlag } from 'hooks'
 
 export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => {
   const ref = project?.ref ?? 'default'
-  const productReports = useFlag('productReports')
 
   const HOOKS_RELEASED = '2021-07-30T15:33:54.383Z'
   const showHooksRoute = project?.inserted_at ? project.inserted_at > HOOKS_RELEASED : false
diff --git a/studio/pages/project/[ref]/database/pgbouncer-logs.tsx b/studio/pages/project/[ref]/database/pgbouncer-logs.tsx
new file mode 100644
index 00000000000..b8bd4023d61
--- /dev/null
+++ b/studio/pages/project/[ref]/database/pgbouncer-logs.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import { observer } from 'mobx-react-lite'
+import { DatabaseLayout } from 'components/layouts'
+import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import { NextPageWithLayout } from 'types'
+import { LogsTableName } from 'components/interfaces/Settings/Logs'
+
+export const LogPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = router.query
+
+  return (
+    <LogsPreviewer
+      projectRef={ref as string}
+      condensedLayout={true}
+      tableName={LogsTableName.PGBOUNCER}
+      queryType='pgbouncer'
+    />
+  )
+}
+
+LogPage.getLayout = (page) => <DatabaseLayout title="Database">{page}</DatabaseLayout>
+
+export default observer(LogPage)
diff --git a/studio/pages/project/[ref]/database/postgrest-logs.tsx b/studio/pages/project/[ref]/database/postgrest-logs.tsx
new file mode 100644
index 00000000000..78efcdc97f6
--- /dev/null
+++ b/studio/pages/project/[ref]/database/postgrest-logs.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import { observer } from 'mobx-react-lite'
+import { DatabaseLayout } from 'components/layouts'
+import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import { NextPageWithLayout } from 'types'
+import { LogsTableName } from 'components/interfaces/Settings/Logs'
+
+export const LogPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = router.query
+
+  return (
+    <LogsPreviewer
+      projectRef={ref as string}
+      condensedLayout={true}
+      tableName={LogsTableName.POSTGREST}
+      queryType="postgrest"
+    />
+  )
+}
+
+LogPage.getLayout = (page) => <DatabaseLayout title="Database">{page}</DatabaseLayout>
+
+export default observer(LogPage)