chore: fix edge logs naming, move postgrest/pgbouncer pages

studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts

@@ -1,7 +1,5 @@
 import { Project } from 'types'
-import { IS_PLATFORM } from 'lib/constants'
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
-import { useFlag } from 'hooks'
 
 export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => {
   const ref = project?.ref ?? 'default'

studio/components/layouts/LogsLayout/LogsMenu.utils.ts

@@ -1,9 +1,14 @@
 import { Project } from 'types'
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
 import { IS_PLATFORM } from 'lib/constants'
+import { useFlag } from 'hooks'
 
 export const generateLogsMenu = (project?: Project): ProductMenuGroup[] => {
   const ref = project?.ref ?? 'default'
+
+  const logsPostgrest = useFlag('logsPostgrest')
+  const logsPgbouncer = useFlag('logsPgbouncer')
+
   return [
     ...(IS_PLATFORM
       ? [
@@ -15,18 +20,38 @@ export const generateLogsMenu = (project?: Project): ProductMenuGroup[] => {
                 url: `/project/${ref}/logs/explorer`,
                 items: [],
               },
+              {
+                name: 'Edge',
+                key: 'edge-logs',
+                url: `/project/${ref}/logs/edge-logs`,
+                items: [],
+              },
               {
                 name: 'Postgres',
                 key: 'postgres-logs',
                 url: `/project/${ref}/logs/postgres-logs`,
                 items: [],
               },
-              {
-                name: 'PostgREST',
-                key: 'postgrest-logs',
-                url: `/project/${ref}/logs/postgrest-logs`,
-                items: [],
-              },
+              ...(logsPostgrest
+                ? [
+                    {
+                      name: 'PostgREST',
+                      key: 'postgrest-logs',
+                      url: `/project/${ref}/logs/postgrest-logs`,
+                      items: [],
+                    },
+                  ]
+                : []),
+              ...(logsPgbouncer
+                ? [
+                    {
+                      name: 'PgBouncer',
+                      key: 'pgbouncer-logs',
+                      url: `/project/${ref}/logs/pgbouncer-logs`,
+                      items: [],
+                    },
+                  ]
+                : []),
               {
                 name: 'Auth',
                 key: 'auth-logs',

studio/pages/project/[ref]/logs/edge-logs.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { DatabaseLayout } from 'components/layouts'
+import { LogsLayout } 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()
@@ -14,12 +13,13 @@ export const LogPage: NextPageWithLayout = () => {
     <LogsPreviewer
       projectRef={ref as string}
       condensedLayout={true}
-      tableName={LogsTableName.POSTGREST}
-      queryType="postgrest"
+      // @ts-ignore
+      tableName={'edge_logs'}
+      queryType={'api'}
     />
   )
 }
 
-LogPage.getLayout = (page) => <DatabaseLayout title="Database">{page}</DatabaseLayout>
+LogPage.getLayout = (page) => <LogsLayout title="Database">{page}</LogsLayout>
 
 export default observer(LogPage)

studio/pages/project/[ref]/logs/pgbouncer-logs.tsx

@@ -15,7 +15,7 @@ export const LogPage: NextPageWithLayout = () => {
       projectRef={ref as string}
       condensedLayout={true}
       tableName={LogsTableName.PGBOUNCER}
-      queryType='pgbouncer'
+      queryType="pgbouncer"
     />
   )
 }

studio/pages/project/[ref]/logs/postgrest-logs.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { LogsLayout } from 'components/layouts'
+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()
@@ -13,13 +14,12 @@ export const LogPage: NextPageWithLayout = () => {
     <LogsPreviewer
       projectRef={ref as string}
       condensedLayout={true}
-      // @ts-ignore
-      tableName={'edge_logs'}
-      queryType={'api'}
+      tableName={LogsTableName.POSTGREST}
+      queryType="postgrest"
     />
   )
 }
 
-LogPage.getLayout = (page) => <LogsLayout title="Database">{page}</LogsLayout>
+LogPage.getLayout = (page) => <DatabaseLayout title="Database">{page}</DatabaseLayout>
 
 export default observer(LogPage)