From acc14fd3cb8b8ea3a2b681179effea88cc1d44ba Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Tue, 11 Oct 2022 16:44:16 -0230 Subject: [PATCH] Move logs explorer to new logs route --- studio/__mocks__/components/layouts.js | 2 +- .../Settings/Logs/LogsNavigation.tsx | 4 +- .../DatabaseLayout/DatabaseMenu.utils.ts | 22 ----- .../LogsExplorerLayout/LogsExplorerLayout.tsx | 64 -------------- .../layouts/LogsLayout/LogsLayout.tsx | 47 ++++++++++ .../layouts/LogsLayout/LogsMenu.utils.ts | 88 +++++++++++++++++++ .../NavigationBar/NavigationBar.utils.tsx | 4 +- studio/components/layouts/index.ts | 4 +- .../components/ui/Logs/LogsExplorerHeader.tsx | 23 +++++ .../explorer}/index.tsx | 14 +-- .../explorer}/recent.tsx | 10 ++- .../explorer}/saved.tsx | 12 +-- .../explorer}/templates.tsx | 10 ++- .../{database => logs}/postgres-logs.tsx | 4 +- 14 files changed, 195 insertions(+), 113 deletions(-) delete mode 100644 studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx create mode 100644 studio/components/layouts/LogsLayout/LogsLayout.tsx create mode 100644 studio/components/layouts/LogsLayout/LogsMenu.utils.ts create mode 100644 studio/components/ui/Logs/LogsExplorerHeader.tsx rename studio/pages/project/[ref]/{logs-explorer => logs/explorer}/index.tsx (94%) rename studio/pages/project/[ref]/{logs-explorer => logs/explorer}/recent.tsx (87%) rename studio/pages/project/[ref]/{logs-explorer => logs/explorer}/saved.tsx (85%) rename studio/pages/project/[ref]/{logs-explorer => logs/explorer}/templates.tsx (88%) rename studio/pages/project/[ref]/{database => logs}/postgres-logs.tsx (80%) diff --git a/studio/__mocks__/components/layouts.js b/studio/__mocks__/components/layouts.js index 3f5dde5e8c8..3fd60166088 100644 --- a/studio/__mocks__/components/layouts.js +++ b/studio/__mocks__/components/layouts.js @@ -1,3 +1,3 @@ const MockLayout = jest.fn().mockImplementation(({ children }) => <>{children}) -export const LogsExplorerLayout = MockLayout +export const LogsLayout = MockLayout export default MockLayout diff --git a/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx b/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx index 5303b742a96..8662d71e792 100644 --- a/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx +++ b/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx @@ -8,7 +8,7 @@ interface TabItem { } const LogsNavigation = () => { const router = useRouter() - const activeRoute = router.pathname.split('/')[4] + const activeRoute = router.pathname.split('/')[5] const { ref } = router.query const indexRoute = 'query' @@ -27,7 +27,7 @@ const LogsNavigation = () => { size="medium" activeId={!activeRoute ? indexRoute : activeRoute} onClick={(e: string) => { - router.push(`/project/${ref}/logs-explorer/${e === indexRoute ? '' : e}`) + router.push(`/project/${ref}/logs/explorer/${e === indexRoute ? '' : e}`) }} > {tabs.map((item) => ( diff --git a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts index 9a6cce9ada7..de59453733d 100644 --- a/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts +++ b/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.ts @@ -63,12 +63,6 @@ export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => { { title: 'Logs and Usage', items: [ - { - name: 'API logs', - key: 'api-logs', - url: `/project/${ref}/database/api-logs`, - items: [], - }, ...(reportsOverview ? [ { @@ -79,22 +73,6 @@ export const generateDatabaseMenu = (project?: Project): ProductMenuGroup[] => { }, ] : []), - { - name: 'Postgres logs', - key: 'postgres-logs', - url: `/project/${ref}/database/postgres-logs`, - items: [], - }, - ...(logsRealtime - ? [ - { - name: 'Realtime logs', - key: 'realtime-logs', - url: `/project/${ref}/database/realtime-logs`, - items: [], - }, - ] - : []), ], }, ] diff --git a/studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx b/studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx deleted file mode 100644 index 6ddd5e9555e..00000000000 --- a/studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { FC, useEffect, ReactNode } from 'react' -import { observer } from 'mobx-react-lite' -import { Badge, IconList, Loading } from 'ui' -import { PermissionAction } from '@supabase/shared-types/out/constants' - -import { checkPermissions, useStore, withAuth } from 'hooks' -import BaseLayout from 'components/layouts' -import NoPermission from 'components/ui/NoPermission' -import LogsNavigation from 'components/interfaces/Settings/Logs/LogsNavigation' - -interface Props { - subtitle?: ReactNode - children?: ReactNode -} - -const PageLayout: FC = ({ subtitle, children }) => { - const canUseLogsExplorer = checkPermissions(PermissionAction.ANALYTICS_READ, 'logflare') - - if (!canUseLogsExplorer) { - return ( - -
- -
- - ) - } - - return ( - -
-
-
-
- -
-

Logs Explorer

- {subtitle && {subtitle}} -
- -
-
- {children} -
-
- - ) -} - -export default withAuth(observer(PageLayout)) diff --git a/studio/components/layouts/LogsLayout/LogsLayout.tsx b/studio/components/layouts/LogsLayout/LogsLayout.tsx new file mode 100644 index 00000000000..f13b031e8b5 --- /dev/null +++ b/studio/components/layouts/LogsLayout/LogsLayout.tsx @@ -0,0 +1,47 @@ +import { FC, ReactNode } from 'react' +import { observer } from 'mobx-react-lite' +import { PermissionAction } from '@supabase/shared-types/out/constants' +import { useRouter } from 'next/router' +import { checkPermissions, useStore, withAuth } from 'hooks' +import BaseLayout from 'components/layouts' +import NoPermission from 'components/ui/NoPermission' +import { generateLogsMenu } from './LogsMenu.utils' +import ProductMenu from 'components/ui/ProductMenu' + +interface Props { + subtitle?: ReactNode + children?: ReactNode +} + +const LogsLayout: FC = ({ subtitle, children }) => { + const { ui } = useStore() + const router = useRouter() + const page = router.pathname.split('/')[4] + + const project = ui.selectedProject + + const canUseLogsExplorer = checkPermissions(PermissionAction.ANALYTICS_READ, 'logflare') + + if (!canUseLogsExplorer) { + return ( + +
+ +
+ + ) + } + + return ( + } + > +
+ {children} +
+ + ) +} + +export default withAuth(observer(LogsLayout)) diff --git a/studio/components/layouts/LogsLayout/LogsMenu.utils.ts b/studio/components/layouts/LogsLayout/LogsMenu.utils.ts new file mode 100644 index 00000000000..4c461031b31 --- /dev/null +++ b/studio/components/layouts/LogsLayout/LogsMenu.utils.ts @@ -0,0 +1,88 @@ +import { Project } from 'types' +import { IS_PLATFORM } from 'lib/constants' +import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types' +import { useFlag } from 'hooks' + +export const generateLogsMenu = (project?: Project): ProductMenuGroup[] => { + const ref = project?.ref ?? 'default' + const logsRealtime = useFlag('logsRealtime') + + return [ + { + title: 'Logs', + items: [ + { + name: 'Explorer', + key: 'explorer', + url: `/project/${ref}/logs/explorer`, + items: [], + }, + { + name: 'Postgres logs', + key: 'postgres-logs', + url: `/project/${ref}/logs/postgres-logs`, + items: [], + }, + { + name: 'Query logs(?)', + key: 'api-logs', + url: `/project/${ref}/database/insights?`, + items: [], + }, + { + name: 'PostgREST logs', + key: 'api-logs', + url: `/project/${ref}/database/api-logs`, + items: [], + }, + { + name: 'API logs(?)', + key: 'api-logs', + url: `/project/${ref}/database/api-logs`, + items: [], + }, + ...(IS_PLATFORM + ? [ + { + name: 'Auth logs', + key: 'logs', + url: `/project/${ref}/auth/logs`, + items: [], + }, + ] + : []), + ...(IS_PLATFORM + ? [ + { + name: 'Auth audit logs(?)', + key: 'logs', + url: `/project/${ref}/auth/logs`, + items: [], + }, + ] + : []), + ...(IS_PLATFORM + ? [ + { + name: 'Storage logs', + key: 'logs', + url: `/project/${ref}/storage/logs`, + items: [], + }, + ] + : []), + + ...(logsRealtime + ? [ + { + name: 'Realtime logs', + key: 'realtime-logs', + url: `/project/${ref}/database/realtime-logs`, + items: [], + }, + ] + : []), + ], + }, + ] +} diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx index e61f44eaa9b..d28104bcd95 100644 --- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx +++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx @@ -104,10 +104,10 @@ export const generateOtherRoutes = (ref?: string, project?: ProjectBase): Route[ ...(IS_PLATFORM ? [ { - key: 'logs-explorer', + key: 'explorer', label: 'Logs', icon: , - link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs-explorer`), + link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs/explorer`), }, ] : []), diff --git a/studio/components/layouts/index.ts b/studio/components/layouts/index.ts index a7cd8c77950..195a2fb3054 100644 --- a/studio/components/layouts/index.ts +++ b/studio/components/layouts/index.ts @@ -12,7 +12,7 @@ import WizardLayout from './WizardLayout' import { WizardLayoutWithoutAuth } from './WizardLayout' import VercelIntegrationLayout from './VercelIntegrationLayout' import BillingLayout from './BillingLayout' -import LogsExplorerLayout from './LogsExplorerLayout/LogsExplorerLayout' +import LogsLayout from './LogsLayout/LogsLayout' export { ProjectLayoutWithAuth, @@ -29,7 +29,7 @@ export { WizardLayoutWithoutAuth, VercelIntegrationLayout, BillingLayout, - LogsExplorerLayout, + LogsLayout, } export default ProjectLayout diff --git a/studio/components/ui/Logs/LogsExplorerHeader.tsx b/studio/components/ui/Logs/LogsExplorerHeader.tsx new file mode 100644 index 00000000000..552bbf81763 --- /dev/null +++ b/studio/components/ui/Logs/LogsExplorerHeader.tsx @@ -0,0 +1,23 @@ +import LogsNavigation from 'components/interfaces/Settings/Logs/LogsNavigation' +import { IconList } from 'ui' + +const LogsExplorerHeader = () => { + return ( +
+
+
+ +
+

Logs Explorer

+ {/* {subtitle && {subtitle}} */} +
+ +
+ ) +} + +export default LogsExplorerHeader diff --git a/studio/pages/project/[ref]/logs-explorer/index.tsx b/studio/pages/project/[ref]/logs/explorer/index.tsx similarity index 94% rename from studio/pages/project/[ref]/logs-explorer/index.tsx rename to studio/pages/project/[ref]/logs/explorer/index.tsx index 573c6840730..f660c7f2ce8 100644 --- a/studio/pages/project/[ref]/logs-explorer/index.tsx +++ b/studio/pages/project/[ref]/logs/explorer/index.tsx @@ -3,13 +3,13 @@ import toast from 'react-hot-toast' import { useEffect, useState } from 'react' import { useRouter } from 'next/router' import { observer } from 'mobx-react-lite' -import { Input, Modal, Form, Button } from 'ui' +import { Input, Modal, Form, Button, Badge, IconList } from 'ui' import { useStore } from 'hooks' import useLogsQuery from 'hooks/analytics/useLogsQuery' import { NextPageWithLayout, UserContent } from 'types' import { uuidv4 } from 'lib/helpers' -import { LogsExplorerLayout } from 'components/layouts' +import { LogsLayout } from 'components/layouts' import CodeEditor from 'components/ui/CodeEditor' import ShimmerLine from 'components/ui/ShimmerLine' import LoadingOpacity from 'components/ui/LoadingOpacity' @@ -24,6 +24,8 @@ import { TEMPLATES, } from 'components/interfaces/Settings/Logs' import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt' +import LogsNavigation from 'components/interfaces/Settings/Logs/LogsNavigation' +import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader' export const LogsExplorerPage: NextPageWithLayout = () => { const router = useRouter() @@ -119,7 +121,9 @@ export const LogsExplorerPage: NextPageWithLayout = () => { } return ( - <> +
+ +
{ )} - +
) } -LogsExplorerPage.getLayout = (page) => {page} +LogsExplorerPage.getLayout = (page) => {page} export default observer(LogsExplorerPage) diff --git a/studio/pages/project/[ref]/logs-explorer/recent.tsx b/studio/pages/project/[ref]/logs/explorer/recent.tsx similarity index 87% rename from studio/pages/project/[ref]/logs-explorer/recent.tsx rename to studio/pages/project/[ref]/logs/explorer/recent.tsx index 48eb03ca5c4..6fb5a0cf981 100644 --- a/studio/pages/project/[ref]/logs-explorer/recent.tsx +++ b/studio/pages/project/[ref]/logs/explorer/recent.tsx @@ -4,11 +4,12 @@ import { observer } from 'mobx-react-lite' import { Button, IconClock, IconSave, Loading } from 'ui' import { useStore, withAuth } from 'hooks' import RecentQueriesItem from 'components/interfaces/Settings/Logs/RecentQueriesItem' -import LogsExplorerLayout from 'components/layouts/LogsExplorerLayout/LogsExplorerLayout' +import LogsLayout from 'components/layouts/LogsLayout/LogsLayout' import Table from 'components/to-be-cleaned/Table' import { useRouter } from 'next/router' import { LogSqlSnippets, NextPageWithLayout } from 'types' +import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader' export const LogsSavedPage: NextPageWithLayout = () => { const { content, ui } = useStore() @@ -21,7 +22,8 @@ export const LogsSavedPage: NextPageWithLayout = () => { const recent = content.recentLogSqlSnippets.slice().reverse() return ( - <> +
+ {recent.length > 0 && ( { )} - + ) } -LogsSavedPage.getLayout = (page) => {page} +LogsSavedPage.getLayout = (page) => {page} export default observer(LogsSavedPage) diff --git a/studio/pages/project/[ref]/logs-explorer/saved.tsx b/studio/pages/project/[ref]/logs/explorer/saved.tsx similarity index 85% rename from studio/pages/project/[ref]/logs-explorer/saved.tsx rename to studio/pages/project/[ref]/logs/explorer/saved.tsx index d42d917df4b..871c513cbe4 100644 --- a/studio/pages/project/[ref]/logs-explorer/saved.tsx +++ b/studio/pages/project/[ref]/logs/explorer/saved.tsx @@ -4,11 +4,12 @@ import { observer } from 'mobx-react-lite' import { IconSave, Loading } from 'ui' import { useStore } from 'hooks' import { LogsSavedQueriesItem } from 'components/interfaces/Settings/Logs' -import { LogsExplorerLayout } from 'components/layouts' +import { LogsLayout } from 'components/layouts' import Table from 'components/to-be-cleaned/Table' import { useRouter } from 'next/router' import { NextPageWithLayout } from 'types' +import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader' export const LogsSavedPage: NextPageWithLayout = () => { const { content, ui } = useStore() @@ -24,8 +25,9 @@ export const LogsSavedPage: NextPageWithLayout = () => { } const saved = content.savedLogSqlSnippets() return ( - <> -
+
+ +
{saved.length > 0 && (
{

)} - + ) } -LogsSavedPage.getLayout = (page) => {page} +LogsSavedPage.getLayout = (page) => {page} export default observer(LogsSavedPage) diff --git a/studio/pages/project/[ref]/logs-explorer/templates.tsx b/studio/pages/project/[ref]/logs/explorer/templates.tsx similarity index 88% rename from studio/pages/project/[ref]/logs-explorer/templates.tsx rename to studio/pages/project/[ref]/logs/explorer/templates.tsx index e52d487cfd0..6ee18397a3e 100644 --- a/studio/pages/project/[ref]/logs-explorer/templates.tsx +++ b/studio/pages/project/[ref]/logs/explorer/templates.tsx @@ -3,17 +3,19 @@ import { useRouter } from 'next/router' import { observer, useStaticRendering } from 'mobx-react-lite' import { IconCode, Badge, Collapsible, Button, Popover } from 'ui' import { TEMPLATES } from 'components/interfaces/Settings/Logs' -import LogsExplorerLayout from 'components/layouts/LogsExplorerLayout/LogsExplorerLayout' +import LogsLayout from 'components/layouts/LogsLayout/LogsLayout' import CardButton from 'components/ui/CardButton' import { NextPageWithLayout } from 'types' +import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader' export const LogsTemplatesPage: NextPageWithLayout = () => { const router = useRouter() const { ref } = router.query return ( -
-
+
+ +
{TEMPLATES.filter((template) => template.mode === 'custom').map((template, i) => { const [showPreview, setShowPreview] = useState(false) return ( @@ -72,6 +74,6 @@ export const LogsTemplatesPage: NextPageWithLayout = () => { ) } -LogsTemplatesPage.getLayout = (page) => {page} +LogsTemplatesPage.getLayout = (page) => {page} export default observer(LogsTemplatesPage) diff --git a/studio/pages/project/[ref]/database/postgres-logs.tsx b/studio/pages/project/[ref]/logs/postgres-logs.tsx similarity index 80% rename from studio/pages/project/[ref]/database/postgres-logs.tsx rename to studio/pages/project/[ref]/logs/postgres-logs.tsx index 604a36e2189..147cae85344 100644 --- a/studio/pages/project/[ref]/database/postgres-logs.tsx +++ b/studio/pages/project/[ref]/logs/postgres-logs.tsx @@ -1,7 +1,7 @@ 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' @@ -20,6 +20,6 @@ export const LogPage: NextPageWithLayout = () => { ) } -LogPage.getLayout = (page) => {page} +LogPage.getLayout = (page) => {page} export default observer(LogPage)