From 5cf8f30e23c2008b3ff5cd9b7028fec5048971e4 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Mon, 22 Apr 2024 09:38:41 +0200 Subject: [PATCH] chore: Remove obsolete flags (#22915) * Remove showS3Connection flag. * Remove showAnonUserFilter flag. * Remove enableVercelConnectionsConfig flag. * Remove indexAdvisor flag. * Remove queryPerformanceV2 flag. * Remove unused files. * Remove unneeded packages. * Remove the v2 suffix from the query performance folder. --- .../interfaces/Auth/Users/Users.tsx | 13 +- .../IndexAdvisorDisabledState.tsx | 0 .../IndexEfficiencyNotice.tsx | 0 .../QueryDetail.tsx | 0 .../QueryIndexes.tsx | 0 .../QueryPanel.tsx | 0 .../QueryPerformance.constants.ts | 0 .../QueryPerformance/QueryPerformance.tsx | 449 +++++++++--------- .../QueryPerformanceFilterBar.tsx | 61 +-- .../QueryPerformanceGrid.tsx | 5 +- .../QueryPerformance/ResetAnalysisNotice.tsx | 53 --- .../TextSearchPopover.tsx | 0 .../QueryPerformanceV2/IndexSuggestion.tsx | 10 - .../QueryPerformanceV2/QueryPerformance.tsx | 245 ---------- .../ReportQueryPerformanceTableRow.tsx | 51 -- .../VercelIntegrationConnectionForm.tsx | 16 +- .../GitHubIntegrationWindowLayout.tsx | 24 - .../Reports/Reports.constants.ts | 19 - .../to-be-cleaned/Reports/Reports.utils.ts | 24 - apps/studio/components/ui/ConditionalWrap.tsx | 12 - apps/studio/package.json | 3 - .../[ref]/database/query-performance.tsx | 41 +- .../pages/project/[ref]/settings/storage.tsx | 5 +- package-lock.json | 23 - 24 files changed, 257 insertions(+), 797 deletions(-) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/IndexAdvisorDisabledState.tsx (100%) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/IndexEfficiencyNotice.tsx (100%) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/QueryDetail.tsx (100%) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/QueryIndexes.tsx (100%) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/QueryPanel.tsx (100%) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/QueryPerformance.constants.ts (100%) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/QueryPerformanceFilterBar.tsx (75%) rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/QueryPerformanceGrid.tsx (97%) delete mode 100644 apps/studio/components/interfaces/QueryPerformance/ResetAnalysisNotice.tsx rename apps/studio/components/interfaces/{QueryPerformanceV2 => QueryPerformance}/TextSearchPopover.tsx (100%) delete mode 100644 apps/studio/components/interfaces/QueryPerformanceV2/IndexSuggestion.tsx delete mode 100644 apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformance.tsx delete mode 100644 apps/studio/components/interfaces/Reports/ReportQueryPerformanceTableRow.tsx delete mode 100644 apps/studio/components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout.tsx delete mode 100644 apps/studio/components/to-be-cleaned/Reports/Reports.constants.ts delete mode 100644 apps/studio/components/to-be-cleaned/Reports/Reports.utils.ts delete mode 100644 apps/studio/components/ui/ConditionalWrap.tsx diff --git a/apps/studio/components/interfaces/Auth/Users/Users.tsx b/apps/studio/components/interfaces/Auth/Users/Users.tsx index 47ca94f66cb..a3c286eab1e 100644 --- a/apps/studio/components/interfaces/Auth/Users/Users.tsx +++ b/apps/studio/components/interfaces/Auth/Users/Users.tsx @@ -7,19 +7,18 @@ import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeatureP import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import APIDocsButton from 'components/ui/APIDocsButton' import NoPermission from 'components/ui/NoPermission' +import { authKeys } from 'data/auth/keys' import { useUsersQuery } from 'data/auth/users-query' -import { useCheckPermissions, useFlag, usePermissionsLoaded } from 'hooks' +import { useCheckPermissions, usePermissionsLoaded } from 'hooks' import { Button, IconRefreshCw, IconSearch, IconX, Input, Listbox } from 'ui' import AddUserDropdown from './AddUserDropdown' import UsersList from './UsersList' -import { authKeys } from 'data/auth/keys' const Users = () => { const queryClient = useQueryClient() const { project } = useProjectContext() const { ref: projectRef } = useParams() const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled() - const showAnonUserFilter = useFlag('showAnonUserFilter') const [page, setPage] = useState(1) const [search, setSearch] = useState('') @@ -114,11 +113,9 @@ const Users = () => { Un-Verified Users - {showAnonUserFilter && ( - - Anonymous Users - - )} + + Anonymous Users +
diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/IndexAdvisorDisabledState.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisorDisabledState.tsx similarity index 100% rename from apps/studio/components/interfaces/QueryPerformanceV2/IndexAdvisorDisabledState.tsx rename to apps/studio/components/interfaces/QueryPerformance/IndexAdvisorDisabledState.tsx diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/IndexEfficiencyNotice.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexEfficiencyNotice.tsx similarity index 100% rename from apps/studio/components/interfaces/QueryPerformanceV2/IndexEfficiencyNotice.tsx rename to apps/studio/components/interfaces/QueryPerformance/IndexEfficiencyNotice.tsx diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/QueryDetail.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx similarity index 100% rename from apps/studio/components/interfaces/QueryPerformanceV2/QueryDetail.tsx rename to apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/QueryIndexes.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx similarity index 100% rename from apps/studio/components/interfaces/QueryPerformanceV2/QueryIndexes.tsx rename to apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPanel.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPanel.tsx similarity index 100% rename from apps/studio/components/interfaces/QueryPerformanceV2/QueryPanel.tsx rename to apps/studio/components/interfaces/QueryPerformance/QueryPanel.tsx diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformance.constants.ts b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.constants.ts similarity index 100% rename from apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformance.constants.ts rename to apps/studio/components/interfaces/QueryPerformance/QueryPerformance.constants.ts diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx index 0a302a2646c..b6b8c845417 100644 --- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx +++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx @@ -1,262 +1,245 @@ +import { InformationCircleIcon } from '@heroicons/react/16/solid' import { useRouter } from 'next/router' +import { useMemo, useState } from 'react' +import toast from 'react-hot-toast' -import Table from 'components/to-be-cleaned/Table' +import { useParams } from 'common' +import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' +import { executeSql } from 'data/sql/execute-sql-query' import { DbQueryHook } from 'hooks/analytics/useDbQuery' -import { Tabs } from 'ui' -import { Markdown } from '../Markdown' -import ReportQueryPerformanceTableRow from '../Reports/ReportQueryPerformanceTableRow' -import { PresetHookResult } from '../Reports/Reports.utils' -import { QueryPerformanceFilterBar } from '../QueryPerformanceV2/QueryPerformanceFilterBar' -import { ResetAnalysisNotice } from './ResetAnalysisNotice' +import { + Button, + TabsList_Shadcn_, + TabsTrigger_Shadcn_, + Tabs_Shadcn_, + TooltipContent_Shadcn_, + TooltipTrigger_Shadcn_, + Tooltip_Shadcn_, + cn, +} from 'ui' +import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog' import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' -import { QUERY_PERFORMANCE_REPORT_TYPES } from '../QueryPerformanceV2/QueryPerformance.constants' - -type QueryPerformancePreset = 'time' | 'frequent' | 'slowest' - -const panelClassNames = 'text-sm max-w-none flex flex-col gap-4' - -const TimeConsumingHelperText = `This table lists queries ordered by their cumulative total execution time. - -It displays the total time a query has spent running and the proportion of total execution time the query has consumed. -` - -const MostFrequentHelperText = `This table lists queries in order of their execution count, providing insights into the most frequently executed queries. - -Pay attention to queries with high max_time or mean_time values that are called frequently, as they may benefit from optimization. -` - -const SlowestExecutionHelperText = `This table lists queries ordered by their maximum execution time. It shows outliers with high execution times. - -Look for queries with high or mean execution times as these are often good candidates for optimization. -` +import { Markdown } from '../Markdown' +import { useQueryPerformanceQuery } from '../Reports/Reports.queries' +import { PresetHookResult } from '../Reports/Reports.utils' +import { QUERY_PERFORMANCE_REPORT_TYPES } from './QueryPerformance.constants' +import { QueryPerformanceFilterBar } from './QueryPerformanceFilterBar' +import { QueryPerformanceGrid } from './QueryPerformanceGrid' +import { useLocalStorageQuery } from 'hooks' +import { LOCAL_STORAGE_KEYS } from 'lib/constants' +import { X } from 'lucide-react' interface QueryPerformanceProps { queryHitRate: PresetHookResult queryPerformanceQuery: DbQueryHook } -const QueryPerformanceLoadingRow = ({ colSpan }: { colSpan: number }) => { - return ( - <> - {Array(4) - .fill('') - .map((_, i) => ( - - - - - - ))} - - ) -} - export const QueryPerformance = ({ queryHitRate, queryPerformanceQuery, }: QueryPerformanceProps) => { const router = useRouter() + const { preset } = useParams() + const { project } = useProjectContext() + const [page, setPage] = useState( + (preset as QUERY_PERFORMANCE_REPORT_TYPES) ?? QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING + ) + const [showResetgPgStatStatements, setShowResetgPgStatStatements] = useState(false) - const handleRefresh = async () => { + const [showBottomSection, setShowBottomSection] = useLocalStorageQuery( + LOCAL_STORAGE_KEYS.QUERY_PERF_SHOW_BOTTOM_SECTION, + true + ) + + const handleRefresh = () => { queryPerformanceQuery.runQuery() queryHitRate.runQuery() } + const { data: mostTimeConsumingQueries, isLoading: isLoadingMTC } = useQueryPerformanceQuery({ + preset: 'mostTimeConsuming', + }) + const { data: mostFrequentlyInvoked, isLoading: isLoadingMFI } = useQueryPerformanceQuery({ + preset: 'mostFrequentlyInvoked', + }) + const { data: slowestExecutionTime, isLoading: isLoadingMMF } = useQueryPerformanceQuery({ + preset: 'slowestExecutionTime', + }) + + const QUERY_PERFORMANCE_TABS = useMemo(() => { + return [ + { + id: QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING, + label: 'Most time consuming', + description: 'Lists queries ordered by their cumulative total execution time.', + isLoading: isLoadingMTC, + max: + (mostTimeConsumingQueries ?? []).length > 0 + ? Math.max(...(mostTimeConsumingQueries ?? []).map((x: any) => x.total_time)).toFixed(2) + : undefined, + }, + { + id: QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT, + label: 'Most frequent', + description: 'Lists queries in order of their execution count', + isLoading: isLoadingMFI, + max: + (mostFrequentlyInvoked ?? []).length > 0 + ? Math.max(...(mostFrequentlyInvoked ?? []).map((x: any) => x.calls)).toFixed(2) + : undefined, + }, + { + id: QUERY_PERFORMANCE_REPORT_TYPES.SLOWEST_EXECUTION, + label: 'Slowest execution', + description: 'Lists queries ordered by their maximum execution time', + isLoading: isLoadingMMF, + max: + (slowestExecutionTime ?? []).length > 0 + ? Math.max(...(slowestExecutionTime ?? []).map((x: any) => x.max_time)).toFixed(2) + : undefined, + }, + ] + }, [ + isLoadingMFI, + isLoadingMMF, + isLoadingMTC, + mostFrequentlyInvoked, + mostTimeConsumingQueries, + slowestExecutionTime, + ]) + return ( - { - // To reset the search and sort query params when switching tabs - const { sort, search, ...rest } = router.query - router.push({ - ...router, - query: { - ...rest, - preset: e, - }, - }) - }} - > - + { + setPage(value as QUERY_PERFORMANCE_REPORT_TYPES) + const { sort, search, ...rest } = router.query + router.push({ ...router, query: { ...rest, preset: value } }) + }} > -
- - -
- - - Role - Query - Calls - Time Consumed - Total Latency - - } - body={ - !queryPerformanceQuery.isLoading ? ( - queryPerformanceQuery?.data?.map((item, i) => { - return ( - - - {item.rolname} - - -

{item.query}

- - {item.calls} - {item.prop_total_time} - - {item.total_time.toFixed(2)}ms - - - ) - }) - ) : ( - - ) - } - /> - - - - + {QUERY_PERFORMANCE_TABS.map((tab) => ( + + {tab.id === page && ( +
+ )} + +
+ {tab.label} + + + + + {tab.description} + +
+ {tab.isLoading ? ( + + ) : tab.max === undefined ? ( + + No data yet + + ) : ( + + {Number(tab.max).toLocaleString()} + {tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT ? 'ms' : ' calls'} + + )} + + {tab.id === page && ( +
+ )} + + ))} + + + +
+ { + setShowResetgPgStatStatements(true) + }} + /> +
+ + + +
-
- - -
- -
- Role - Query - Avg. Roles - Calls - Max Time - Mean Time - Min Time - Total Latency - - } - body={ - queryPerformanceQuery.isLoading ? ( - - ) : ( - queryPerformanceQuery.data?.map((item, i) => { - return ( - - - {item.rolname} - - -

{item.query}

- - {item.avg_rows} - {item.calls} - - {item.max_time?.toFixed(2)}ms - - - {item.mean_time?.toFixed(2)}ms - - - {item.min_time?.toFixed(2)}ms - - - {item.total_time?.toFixed(2)}ms - - - ) - }) - ) - } - /> - + +
+

Reset report

+

+ Consider resetting the analysis after optimizing any queries +

+
- - -
+
+

How is this report generated?

- -
- -
- Role - Query - Avg Rows - Calls - Max Time - Mean Time - Min Time - Total Latency - - } - body={ - queryPerformanceQuery.isLoading ? ( - - ) : ( - queryPerformanceQuery.data?.map((item, i) => { - return ( - - - {item.rolname} - - -

{item.query}

- - {item.avg_rows} - {item.calls} - {item.max_time?.toFixed(2)}ms - {item.mean_time?.toFixed(2)}ms - {item.min_time?.toFixed(2)}ms - {item.total_time?.toFixed(2)}ms - - ) - }) - ) - } - /> - - - + + + setShowResetgPgStatStatements(false)} + onSelectConfirm={async () => { + try { + await executeSql({ + projectRef: project?.ref, + connectionString: project?.connectionString, + sql: `SELECT pg_stat_statements_reset();`, + }) + handleRefresh() + setShowResetgPgStatStatements(false) + } catch (error: any) { + toast.error(`Failed to reset analysis: ${error.message}`) + } + }} + /> + ) } diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformanceFilterBar.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx similarity index 75% rename from apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformanceFilterBar.tsx rename to apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx index d4f6414507e..514b38331a2 100644 --- a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformanceFilterBar.tsx +++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx @@ -1,12 +1,13 @@ -import { ArrowDown, ArrowUp, Info, RefreshCw } from 'lucide-react' +import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react' import { useRouter } from 'next/router' import { useState } from 'react' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { FilterPopover } from 'components/ui/FilterPopover' import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query' -import { useFlag, useLocalStorageQuery } from 'hooks' +import { useLocalStorageQuery } from 'hooks' import { DbQueryHook } from 'hooks/analytics/useDbQuery' +import { LOCAL_STORAGE_KEYS } from 'lib/constants' import { Button, DropdownMenu, @@ -15,9 +16,8 @@ import { DropdownMenuRadioItem, DropdownMenuTrigger, } from 'ui' -import { TextSearchPopover } from './TextSearchPopover' import { QueryPerformanceSort } from '../Reports/Reports.queries' -import { LOCAL_STORAGE_KEYS } from 'lib/constants' +import { TextSearchPopover } from './TextSearchPopover' export const QueryPerformanceFilterBar = ({ queryPerformanceQuery, @@ -28,7 +28,6 @@ export const QueryPerformanceFilterBar = ({ }) => { const router = useRouter() const { project } = useProjectContext() - const enableQueryPerformanceV2 = useFlag('queryPerformanceV2') const [showBottomSection, setShowBottomSection] = useLocalStorageQuery( LOCAL_STORAGE_KEYS.QUERY_PERF_SHOW_BOTTOM_SECTION, true @@ -101,37 +100,27 @@ export const QueryPerformanceFilterBar = ({ /> - {!enableQueryPerformanceV2 && ( - <> -
- - - - - - onSortChange(value)} - > - - Sort by latency - high to low - - - Sort by latency - low to high - - - - - - )} +
+ + + + + + onSortChange(value)} + > + + Sort by latency - high to low + + + Sort by latency - low to high + + + +
diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx similarity index 97% rename from apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformanceGrid.tsx rename to apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx index c67d120d7ea..85ed9bf35c8 100644 --- a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformanceGrid.tsx +++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx @@ -24,7 +24,6 @@ import { QUERY_PERFORMANCE_REPORTS, QUERY_PERFORMANCE_REPORT_TYPES, } from './QueryPerformance.constants' -import { useFlag } from 'hooks' interface QueryPerformanceGridProps { queryPerformanceQuery: DbQueryHook @@ -33,7 +32,6 @@ interface QueryPerformanceGridProps { export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformanceGridProps) => { const router = useRouter() const gridRef = useRef(null) - const showIndexAdvisor = useFlag('indexAdvisor') const { preset, sort: urlSort, order, roles, search } = useParams() const { isLoading } = queryPerformanceQuery @@ -94,8 +92,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance const selectedQuery = selectedRow !== undefined ? queryPerformanceQuery.data?.[selectedRow]['query'] : undefined - const showIndexSuggestions = - showIndexAdvisor && (selectedQuery ?? '').trim().toLowerCase().startsWith('select') + const showIndexSuggestions = (selectedQuery ?? '').trim().toLowerCase().startsWith('select') const onSortChange = (column: string) => { let updatedSort = undefined diff --git a/apps/studio/components/interfaces/QueryPerformance/ResetAnalysisNotice.tsx b/apps/studio/components/interfaces/QueryPerformance/ResetAnalysisNotice.tsx deleted file mode 100644 index 44df82f2578..00000000000 --- a/apps/studio/components/interfaces/QueryPerformance/ResetAnalysisNotice.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { useState } from 'react' -import toast from 'react-hot-toast' - -import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' -import { executeSql } from 'data/sql/execute-sql-query' -import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui' -import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog' - -export const ResetAnalysisNotice = ({ handleRefresh }: { handleRefresh: () => void }) => { - const { project } = useProjectContext() - const [showResetgPgStatStatements, setShowResetgPgStatStatements] = useState(false) - - return ( - <> - - - Consider resetting the analysis after optimizing any queries - - - This will ensure that the performance metrics are updated with the latest changes - - - - - setShowResetgPgStatStatements(false)} - onSelectConfirm={async () => { - try { - await executeSql({ - projectRef: project?.ref, - connectionString: project?.connectionString, - sql: `SELECT pg_stat_statements_reset();`, - }) - handleRefresh() - setShowResetgPgStatStatements(false) - } catch (error: any) { - toast.error(`Failed to reset analysis: ${error.message}`) - } - }} - /> - - ) -} diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/TextSearchPopover.tsx b/apps/studio/components/interfaces/QueryPerformance/TextSearchPopover.tsx similarity index 100% rename from apps/studio/components/interfaces/QueryPerformanceV2/TextSearchPopover.tsx rename to apps/studio/components/interfaces/QueryPerformance/TextSearchPopover.tsx diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/IndexSuggestion.tsx b/apps/studio/components/interfaces/QueryPerformanceV2/IndexSuggestion.tsx deleted file mode 100644 index bb3267ee000..00000000000 --- a/apps/studio/components/interfaces/QueryPerformanceV2/IndexSuggestion.tsx +++ /dev/null @@ -1,10 +0,0 @@ -export const IndexSuggestion = () => { - return ( -
-
-

Add new index

-

Hello

-
-
- ) -} diff --git a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformance.tsx b/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformance.tsx deleted file mode 100644 index b6b8c845417..00000000000 --- a/apps/studio/components/interfaces/QueryPerformanceV2/QueryPerformance.tsx +++ /dev/null @@ -1,245 +0,0 @@ -import { InformationCircleIcon } from '@heroicons/react/16/solid' -import { useRouter } from 'next/router' -import { useMemo, useState } from 'react' -import toast from 'react-hot-toast' - -import { useParams } from 'common' -import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' -import { executeSql } from 'data/sql/execute-sql-query' -import { DbQueryHook } from 'hooks/analytics/useDbQuery' -import { - Button, - TabsList_Shadcn_, - TabsTrigger_Shadcn_, - Tabs_Shadcn_, - TooltipContent_Shadcn_, - TooltipTrigger_Shadcn_, - Tooltip_Shadcn_, - cn, -} from 'ui' -import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog' -import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' -import { Markdown } from '../Markdown' -import { useQueryPerformanceQuery } from '../Reports/Reports.queries' -import { PresetHookResult } from '../Reports/Reports.utils' -import { QUERY_PERFORMANCE_REPORT_TYPES } from './QueryPerformance.constants' -import { QueryPerformanceFilterBar } from './QueryPerformanceFilterBar' -import { QueryPerformanceGrid } from './QueryPerformanceGrid' -import { useLocalStorageQuery } from 'hooks' -import { LOCAL_STORAGE_KEYS } from 'lib/constants' -import { X } from 'lucide-react' - -interface QueryPerformanceProps { - queryHitRate: PresetHookResult - queryPerformanceQuery: DbQueryHook -} - -export const QueryPerformance = ({ - queryHitRate, - queryPerformanceQuery, -}: QueryPerformanceProps) => { - const router = useRouter() - const { preset } = useParams() - const { project } = useProjectContext() - const [page, setPage] = useState( - (preset as QUERY_PERFORMANCE_REPORT_TYPES) ?? QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING - ) - const [showResetgPgStatStatements, setShowResetgPgStatStatements] = useState(false) - - const [showBottomSection, setShowBottomSection] = useLocalStorageQuery( - LOCAL_STORAGE_KEYS.QUERY_PERF_SHOW_BOTTOM_SECTION, - true - ) - - const handleRefresh = () => { - queryPerformanceQuery.runQuery() - queryHitRate.runQuery() - } - - const { data: mostTimeConsumingQueries, isLoading: isLoadingMTC } = useQueryPerformanceQuery({ - preset: 'mostTimeConsuming', - }) - const { data: mostFrequentlyInvoked, isLoading: isLoadingMFI } = useQueryPerformanceQuery({ - preset: 'mostFrequentlyInvoked', - }) - const { data: slowestExecutionTime, isLoading: isLoadingMMF } = useQueryPerformanceQuery({ - preset: 'slowestExecutionTime', - }) - - const QUERY_PERFORMANCE_TABS = useMemo(() => { - return [ - { - id: QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING, - label: 'Most time consuming', - description: 'Lists queries ordered by their cumulative total execution time.', - isLoading: isLoadingMTC, - max: - (mostTimeConsumingQueries ?? []).length > 0 - ? Math.max(...(mostTimeConsumingQueries ?? []).map((x: any) => x.total_time)).toFixed(2) - : undefined, - }, - { - id: QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT, - label: 'Most frequent', - description: 'Lists queries in order of their execution count', - isLoading: isLoadingMFI, - max: - (mostFrequentlyInvoked ?? []).length > 0 - ? Math.max(...(mostFrequentlyInvoked ?? []).map((x: any) => x.calls)).toFixed(2) - : undefined, - }, - { - id: QUERY_PERFORMANCE_REPORT_TYPES.SLOWEST_EXECUTION, - label: 'Slowest execution', - description: 'Lists queries ordered by their maximum execution time', - isLoading: isLoadingMMF, - max: - (slowestExecutionTime ?? []).length > 0 - ? Math.max(...(slowestExecutionTime ?? []).map((x: any) => x.max_time)).toFixed(2) - : undefined, - }, - ] - }, [ - isLoadingMFI, - isLoadingMMF, - isLoadingMTC, - mostFrequentlyInvoked, - mostTimeConsumingQueries, - slowestExecutionTime, - ]) - - return ( - <> - { - setPage(value as QUERY_PERFORMANCE_REPORT_TYPES) - const { sort, search, ...rest } = router.query - router.push({ ...router, query: { ...rest, preset: value } }) - }} - > - - {QUERY_PERFORMANCE_TABS.map((tab) => ( - - {tab.id === page && ( -
- )} - -
- {tab.label} - - - - - {tab.description} - -
- {tab.isLoading ? ( - - ) : tab.max === undefined ? ( - - No data yet - - ) : ( - - {Number(tab.max).toLocaleString()} - {tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT ? 'ms' : ' calls'} - - )} - - {tab.id === page && ( -
- )} - - ))} - - - -
- { - setShowResetgPgStatStatements(true) - }} - /> -
- - - -
- -
-

Reset report

-

- Consider resetting the analysis after optimizing any queries -

- -
-
-

How is this report generated?

- -
-
- - setShowResetgPgStatStatements(false)} - onSelectConfirm={async () => { - try { - await executeSql({ - projectRef: project?.ref, - connectionString: project?.connectionString, - sql: `SELECT pg_stat_statements_reset();`, - }) - handleRefresh() - setShowResetgPgStatStatements(false) - } catch (error: any) { - toast.error(`Failed to reset analysis: ${error.message}`) - } - }} - /> - - ) -} diff --git a/apps/studio/components/interfaces/Reports/ReportQueryPerformanceTableRow.tsx b/apps/studio/components/interfaces/Reports/ReportQueryPerformanceTableRow.tsx deleted file mode 100644 index 83cec5b027a..00000000000 --- a/apps/studio/components/interfaces/Reports/ReportQueryPerformanceTableRow.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import Table from 'components/to-be-cleaned/Table' -import React from 'react' -import { cn } from 'ui' -import { Editor } from '@monaco-editor/react' - -type Props = { - sql: string - colSpan: number - children: React.ReactNode -} - -const ReportQueryPerformanceTableRow = ({ sql, colSpan, children }: Props) => { - const [expanded, setExpanded] = React.useState(false) - - return ( - <> - setExpanded(!expanded)}>{children} -
- {expanded && ( - - )} - - - ) -} - -export default ReportQueryPerformanceTableRow diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx index 493d1bbf1be..d24d6f2ce8d 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx @@ -23,7 +23,6 @@ import type { IntegrationProjectConnection, } from 'data/integrations/integrations.types' import { useVercelConnectionUpdateMutation } from 'data/integrations/vercel-connection-update-mutate' -import { useFlag } from 'hooks' const VercelIntegrationConnectionForm = ({ connection, @@ -32,7 +31,6 @@ const VercelIntegrationConnectionForm = ({ connection: IntegrationProjectConnection integration: Integration }) => { - const enableVercelConnectionsConfig = useFlag('enableVercelConnectionsConfig') const config = connection.metadata.supabaseConfig const FormSchema = z.object({ @@ -61,11 +59,6 @@ const VercelIntegrationConnectionForm = ({ }) function onSubmit(data: z.infer) { - /** - * remove this hardcoded if statement when we are ready to enable this feature - */ - if (!enableVercelConnectionsConfig) return - const metadata = { ...connection.metadata, } @@ -101,10 +94,7 @@ const VercelIntegrationConnectionForm = ({ -
+
{/* {isUpdatingVercelConnection && 'isUpdatingVercelConnection'} */}
@@ -124,7 +114,6 @@ const VercelIntegrationConnectionForm = ({
{ field.onChange(e) @@ -151,7 +140,6 @@ const VercelIntegrationConnectionForm = ({
{ field.onChange(e) @@ -182,7 +170,6 @@ const VercelIntegrationConnectionForm = ({ { field.onChange(e) @@ -208,7 +195,6 @@ const VercelIntegrationConnectionForm = ({ { field.onChange(e) diff --git a/apps/studio/components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout.tsx b/apps/studio/components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout.tsx deleted file mode 100644 index f08a6ca6c0e..00000000000 --- a/apps/studio/components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { PropsWithChildren } from 'react' - -import { BASE_PATH } from 'lib/constants' -import IntegrationWindowLayout from './IntegrationWindowLayout' - -const GITHUB_ICON = ( -
- GitHub Icon -
-) - -const GitHubIntegrationWindowLayout = ({ children }: PropsWithChildren<{}>) => { - return ( - - {children} - - ) -} - -export default GitHubIntegrationWindowLayout diff --git a/apps/studio/components/to-be-cleaned/Reports/Reports.constants.ts b/apps/studio/components/to-be-cleaned/Reports/Reports.constants.ts deleted file mode 100644 index bcb6cd0a382..00000000000 --- a/apps/studio/components/to-be-cleaned/Reports/Reports.constants.ts +++ /dev/null @@ -1,19 +0,0 @@ -export const NEW_REPORT_SKELETON = { - name: 'new report', - description: '', - type: 'report', - visibility: 'project', - content: { - schema_version: 1, - period_start: { - time_period: '7d', - date: '', - }, - period_end: { - time_period: 'today', - date: '', - }, - interval: '1d', - layout: [], - }, -} diff --git a/apps/studio/components/to-be-cleaned/Reports/Reports.utils.ts b/apps/studio/components/to-be-cleaned/Reports/Reports.utils.ts deleted file mode 100644 index 95f69d1d70f..00000000000 --- a/apps/studio/components/to-be-cleaned/Reports/Reports.utils.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useProjectContentStore } from 'stores/projectContentStore' -import { NEW_REPORT_SKELETON } from './Reports.constants' - -/* - * createReport() - * - * Creates a new report with a basic skeleton - * also pushes route to new report - * - * returns :object - */ -export const createReport = async ({ router }: any) => { - const { ref } = router.query - // [Alaister] despite it's name, useProjectContentStore is not a real react hook - // so we can safely disable the eslint rule here - // eslint-disable-next-line react-hooks/rules-of-hooks - const contentStore = useProjectContentStore(ref) - const { data: newReport, error } = await contentStore.create(NEW_REPORT_SKELETON) - - if (error) throw error - - await contentStore.load() - router.push(`/project/${ref}/reports/${newReport[0].id}`) -} diff --git a/apps/studio/components/ui/ConditionalWrap.tsx b/apps/studio/components/ui/ConditionalWrap.tsx deleted file mode 100644 index 65afdda1e1b..00000000000 --- a/apps/studio/components/ui/ConditionalWrap.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { cloneElement } from 'react' - -type ConditionalWrapProps = { - condition: boolean - wrap: (children: JSX.Element | null) => JSX.Element - children: JSX.Element | null -} - -const ConditionalWrap = ({ condition, children, wrap }: ConditionalWrapProps) => - condition ? cloneElement(wrap(children)) : children - -export default ConditionalWrap diff --git a/apps/studio/package.json b/apps/studio/package.json index 8c5c8925f76..49dba5fe13d 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -29,7 +29,6 @@ "@radix-ui/react-tooltip": "^1.0.7", "@scaleleap/pg-format": "^1.0.0", "@sentry/nextjs": "^7.108.0", - "@serafin/schema-builder": "^0.18.2", "@stripe/react-stripe-js": "^2.5.0", "@stripe/stripe-js": "^3.0.5", "@supabase/auth-helpers-react": "^0.4.2", @@ -42,7 +41,6 @@ "@zip.js/zip.js": "^2.7.29", "ai": "^2.2.31", "ai-commands": "*", - "ajv": "^8.6.3", "awesome-debounce-promise": "^2.1.0", "clsx": "^1.2.1", "common": "*", @@ -58,7 +56,6 @@ "immutability-helper": "^3.1.1", "ip-num": "^1.5.1", "json-logic-js": "^2.0.2", - "jsonrepair": "^3.2.3", "lodash": "^4.17.21", "lucide-react": "^0.338.0", "markdown-table": "^3.0.3", diff --git a/apps/studio/pages/project/[ref]/database/query-performance.tsx b/apps/studio/pages/project/[ref]/database/query-performance.tsx index cc08219b7d0..983a1e418f0 100644 --- a/apps/studio/pages/project/[ref]/database/query-performance.tsx +++ b/apps/studio/pages/project/[ref]/database/query-performance.tsx @@ -1,9 +1,8 @@ import { useRouter } from 'next/router' import { useParams } from 'common' -import { QueryPerformance as QueryPerformanceV1 } from 'components/interfaces/QueryPerformance/QueryPerformance' -import { QueryPerformance } from 'components/interfaces/QueryPerformanceV2/QueryPerformance' -import { QUERY_PERFORMANCE_REPORT_TYPES } from 'components/interfaces/QueryPerformanceV2/QueryPerformance.constants' +import { QueryPerformance } from 'components/interfaces/QueryPerformance/QueryPerformance' +import { QUERY_PERFORMANCE_REPORT_TYPES } from 'components/interfaces/QueryPerformance/QueryPerformance.constants' import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants' import { QueryPerformanceSort, @@ -15,12 +14,10 @@ import { DatabaseLayout } from 'components/layouts' import { FormHeader } from 'components/ui/Forms' import { useFlag } from 'hooks' import type { NextPageWithLayout } from 'types' -import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' const QueryPerformanceReport: NextPageWithLayout = () => { const router = useRouter() const { ref: projectRef } = useParams() - const enableQueryPerformanceV2 = useFlag('queryPerformanceV2') // [Joshen] Has been false on configcat for a long time const tableIndexEfficiencyEnabled = useFlag('tableIndexEfficiency') @@ -53,34 +50,12 @@ const QueryPerformanceReport: NextPageWithLayout = () => { {/* [Joshen] Need to double check what this is about and if it's still relevant */} {/* {tableIndexEfficiencyEnabled && } */} - {enableQueryPerformanceV2 ? ( - <> - - - - ) : ( - - - - - - - )} + + ) } diff --git a/apps/studio/pages/project/[ref]/settings/storage.tsx b/apps/studio/pages/project/[ref]/settings/storage.tsx index 8895ab41832..e81f27a41d4 100644 --- a/apps/studio/pages/project/[ref]/settings/storage.tsx +++ b/apps/studio/pages/project/[ref]/settings/storage.tsx @@ -1,16 +1,13 @@ import { SettingsLayout } from 'components/layouts' import { StorageSettings } from 'components/to-be-cleaned/Storage' import { S3Connection } from 'components/to-be-cleaned/Storage/StorageSettings/S3Connection' -import { useFlag } from 'hooks' import type { NextPageWithLayout } from 'types' const PageLayout: NextPageWithLayout = () => { - const showS3Connection = useFlag('showS3Connection') - return (
- {showS3Connection && } +
) } diff --git a/package-lock.json b/package-lock.json index 1337bcca2cf..86254fa53c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2112,7 +2112,6 @@ "@radix-ui/react-tooltip": "^1.0.7", "@scaleleap/pg-format": "^1.0.0", "@sentry/nextjs": "^7.108.0", - "@serafin/schema-builder": "^0.18.2", "@stripe/react-stripe-js": "^2.5.0", "@stripe/stripe-js": "^3.0.5", "@supabase/auth-helpers-react": "^0.4.2", @@ -2125,7 +2124,6 @@ "@zip.js/zip.js": "^2.7.29", "ai": "^2.2.31", "ai-commands": "*", - "ajv": "^8.6.3", "awesome-debounce-promise": "^2.1.0", "clsx": "^1.2.1", "common": "*", @@ -2141,7 +2139,6 @@ "immutability-helper": "^3.1.1", "ip-num": "^1.5.1", "json-logic-js": "^2.0.2", - "jsonrepair": "^3.2.3", "lodash": "^4.17.21", "lucide-react": "^0.338.0", "markdown-table": "^3.0.3", @@ -3132,21 +3129,6 @@ "node": ">=0.4.0" } }, - "apps/studio/node_modules/ajv": { - "version": "8.12.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", - "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, "apps/studio/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -3317,11 +3299,6 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, - "apps/studio/node_modules/json-schema-traverse": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", - "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" - }, "apps/studio/node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-
- -
-