mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Chore/query performance fixes and improvements (#32747)
* Show tab max value in seconds if > 1000ms * Fix incorrect sort option in initial state with no URL state * Fix trim of undefined in Query Performance when retrieving index
This commit is contained in:
Joshen Lim authored and GitHub committed
1 parent
ef2ba4a1fc
commit
559236dbd0
3 files changed
+77
-53
No files matched your search
@@ -126,52 +126,67 @@ export const QueryPerformance = ({
|
||||
}}
|
||||
>
|
||||
<TabsList_Shadcn_ className={cn('flex gap-0 border-0 items-end z-10')}>
|
||||
{QUERY_PERFORMANCE_TABS.map((tab) => (
|
||||
<TabsTrigger_Shadcn_
|
||||
key={tab.id}
|
||||
value={tab.id}
|
||||
className={cn(
|
||||
'group relative',
|
||||
'px-6 py-3 border-b-0 flex flex-col items-start !shadow-none border-default border-t',
|
||||
'even:border-x last:border-r even:!border-x-strong last:!border-r-strong',
|
||||
tab.id === page ? '!bg-surface-200' : '!bg-surface-200/[33%]',
|
||||
'hover:!bg-surface-100',
|
||||
'data-[state=active]:!bg-surface-200',
|
||||
'hover:text-foreground-light',
|
||||
'transition'
|
||||
)}
|
||||
>
|
||||
{tab.id === page && (
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-foreground" />
|
||||
)}
|
||||
{QUERY_PERFORMANCE_TABS.map((tab) => {
|
||||
const tabMax = Number(tab.max)
|
||||
const maxValue =
|
||||
tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT
|
||||
? tabMax > 1000
|
||||
? (tabMax / 1000).toFixed(2)
|
||||
: tabMax.toLocaleString()
|
||||
: tabMax.toLocaleString()
|
||||
|
||||
<div className="flex items-center gap-x-2">
|
||||
<span className="">{tab.label}</span>
|
||||
<Tooltip_Shadcn_>
|
||||
<TooltipTrigger_Shadcn_ asChild>
|
||||
<InformationCircleIcon className="transition text-foreground-muted w-3 h-3 data-[state=delayed-open]:text-foreground-light" />
|
||||
</TooltipTrigger_Shadcn_>
|
||||
<TooltipContent_Shadcn_ side="top">{tab.description}</TooltipContent_Shadcn_>
|
||||
</Tooltip_Shadcn_>
|
||||
</div>
|
||||
{tab.isLoading ? (
|
||||
<ShimmeringLoader className="w-32 pt-1" />
|
||||
) : tab.max === undefined ? (
|
||||
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
|
||||
No data yet
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
|
||||
{Number(tab.max).toLocaleString()}
|
||||
{tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT ? 'ms' : ' calls'}
|
||||
</span>
|
||||
)}
|
||||
return (
|
||||
<TabsTrigger_Shadcn_
|
||||
key={tab.id}
|
||||
value={tab.id}
|
||||
className={cn(
|
||||
'group relative',
|
||||
'px-6 py-3 border-b-0 flex flex-col items-start !shadow-none border-default border-t',
|
||||
'even:border-x last:border-r even:!border-x-strong last:!border-r-strong',
|
||||
tab.id === page ? '!bg-surface-200' : '!bg-surface-200/[33%]',
|
||||
'hover:!bg-surface-100',
|
||||
'data-[state=active]:!bg-surface-200',
|
||||
'hover:text-foreground-light',
|
||||
'transition'
|
||||
)}
|
||||
>
|
||||
{tab.id === page && (
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-foreground" />
|
||||
)}
|
||||
|
||||
{tab.id === page && (
|
||||
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-surface-200"></div>
|
||||
)}
|
||||
</TabsTrigger_Shadcn_>
|
||||
))}
|
||||
<div className="flex items-center gap-x-2">
|
||||
<span className="">{tab.label}</span>
|
||||
<Tooltip_Shadcn_>
|
||||
<TooltipTrigger_Shadcn_ asChild>
|
||||
<InformationCircleIcon className="transition text-foreground-muted w-3 h-3 data-[state=delayed-open]:text-foreground-light" />
|
||||
</TooltipTrigger_Shadcn_>
|
||||
<TooltipContent_Shadcn_ side="top">{tab.description}</TooltipContent_Shadcn_>
|
||||
</Tooltip_Shadcn_>
|
||||
</div>
|
||||
{tab.isLoading ? (
|
||||
<ShimmeringLoader className="w-32 pt-1" />
|
||||
) : tab.max === undefined ? (
|
||||
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
|
||||
No data yet
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
|
||||
{/* {Number(tab.max).toLocaleString()} */}
|
||||
{maxValue}
|
||||
{tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT
|
||||
? tabMax > 1000
|
||||
? 's'
|
||||
: 'ms'
|
||||
: ' calls'}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{tab.id === page && (
|
||||
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-surface-200"></div>
|
||||
)}
|
||||
</TabsTrigger_Shadcn_>
|
||||
)
|
||||
})}
|
||||
</TabsList_Shadcn_>
|
||||
</Tabs_Shadcn_>
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@ export const QueryPerformanceFilterBar = ({
|
||||
}
|
||||
|
||||
function getSortButtonLabel() {
|
||||
if (defaultSortByValue?.order === 'desc') {
|
||||
if (sortByValue?.order === 'desc') {
|
||||
return 'Sorted by latency - high to low'
|
||||
} else {
|
||||
return 'Sorted by latency - low to high'
|
||||
|
||||
@@ -102,19 +102,28 @@ export const useGetIndexesFromSelectQuery = <TData = GetInvolvedIndexesFromSelec
|
||||
GetInvolvedIndexesFromSelectQueryError,
|
||||
TData
|
||||
> = {}
|
||||
) =>
|
||||
useQuery<GetInvolvedIndexesFromSelectQueryData, GetInvolvedIndexesFromSelectQueryError, TData>(
|
||||
) => {
|
||||
// [Joshen] Only get indexes for queries starting with these
|
||||
const isValidQueryForIndexing =
|
||||
query !== undefined &&
|
||||
(query.trim().toLowerCase().startsWith('select') ||
|
||||
query.trim().toLowerCase().startsWith('with pgrst_source'))
|
||||
|
||||
return useQuery<
|
||||
GetInvolvedIndexesFromSelectQueryData,
|
||||
GetInvolvedIndexesFromSelectQueryError,
|
||||
TData
|
||||
>(
|
||||
databaseKeys.indexesFromQuery(projectRef, query),
|
||||
() => getInvolvedIndexesInSelectQuery({ projectRef, connectionString, query }),
|
||||
{
|
||||
retry: false,
|
||||
enabled:
|
||||
(enabled &&
|
||||
typeof projectRef !== 'undefined' &&
|
||||
typeof query !== 'undefined' &&
|
||||
query !== undefined &&
|
||||
(query.startsWith('select') || query.startsWith('SELECT'))) ||
|
||||
query.trim().toLowerCase().startsWith('with pgrst_source'),
|
||||
enabled &&
|
||||
typeof projectRef !== 'undefined' &&
|
||||
typeof query !== 'undefined' &&
|
||||
isValidQueryForIndexing,
|
||||
...options,
|
||||
}
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user