lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-06-03 03:11:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore/query performance fixes and improvements (#32747)

Browse Source 
* 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
2025-01-13 23:29:28 +08:00
committed by GitHub
parent ef2ba4a1fc
commit 559236dbd0
3 changed files with 77 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx
View File

@@ -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_>