feat: implement UI pages for postgrest and pgbouncer logs

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 }) => {

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'
 

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

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)

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)