Skip to content

Commit c75d25a

Browse files
joshenlimibixler
joshenlim
authored and
ibixler
committed
Chore/query performance fixes and improvements (supabase#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
1 parent 43edc93 commit c75d25a

File tree

3 files changed

+77
-53
lines changed

3 files changed

+77
-53
lines changed

‎apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx

+59-44
Original file line numberDiff line numberDiff line change
@@ -126,52 +126,67 @@ export const QueryPerformance = ({
126126
}}
127127
>
128128
<TabsList_Shadcn_ className={cn('flex gap-0 border-0 items-end z-10')}>
129-
{QUERY_PERFORMANCE_TABS.map((tab) => (
130-
<TabsTrigger_Shadcn_
131-
key={tab.id}
132-
value={tab.id}
133-
className={cn(
134-
'group relative',
135-
'px-6 py-3 border-b-0 flex flex-col items-start !shadow-none border-default border-t',
136-
'even:border-x last:border-r even:!border-x-strong last:!border-r-strong',
137-
tab.id === page ? '!bg-surface-200' : '!bg-surface-200/[33%]',
138-
'hover:!bg-surface-100',
139-
'data-[state=active]:!bg-surface-200',
140-
'hover:text-foreground-light',
141-
'transition'
142-
)}
143-
>
144-
{tab.id === page && (
145-
<div className="absolute top-0 left-0 w-full h-[1px] bg-foreground" />
146-
)}
129+
{QUERY_PERFORMANCE_TABS.map((tab) => {
130+
const tabMax = Number(tab.max)
131+
const maxValue =
132+
tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT
133+
? tabMax > 1000
134+
? (tabMax / 1000).toFixed(2)
135+
: tabMax.toLocaleString()
136+
: tabMax.toLocaleString()
147137

148-
<div className="flex items-center gap-x-2">
149-
<span className="">{tab.label}</span>
150-
<Tooltip_Shadcn_>
151-
<TooltipTrigger_Shadcn_ asChild>
152-
<InformationCircleIcon className="transition text-foreground-muted w-3 h-3 data-[state=delayed-open]:text-foreground-light" />
153-
</TooltipTrigger_Shadcn_>
154-
<TooltipContent_Shadcn_ side="top">{tab.description}</TooltipContent_Shadcn_>
155-
</Tooltip_Shadcn_>
156-
</div>
157-
{tab.isLoading ? (
158-
<ShimmeringLoader className="w-32 pt-1" />
159-
) : tab.max === undefined ? (
160-
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
161-
No data yet
162-
</span>
163-
) : (
164-
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
165-
{Number(tab.max).toLocaleString()}
166-
{tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT ? 'ms' : ' calls'}
167-
</span>
168-
)}
138+
return (
139+
<TabsTrigger_Shadcn_
140+
key={tab.id}
141+
value={tab.id}
142+
className={cn(
143+
'group relative',
144+
'px-6 py-3 border-b-0 flex flex-col items-start !shadow-none border-default border-t',
145+
'even:border-x last:border-r even:!border-x-strong last:!border-r-strong',
146+
tab.id === page ? '!bg-surface-200' : '!bg-surface-200/[33%]',
147+
'hover:!bg-surface-100',
148+
'data-[state=active]:!bg-surface-200',
149+
'hover:text-foreground-light',
150+
'transition'
151+
)}
152+
>
153+
{tab.id === page && (
154+
<div className="absolute top-0 left-0 w-full h-[1px] bg-foreground" />
155+
)}
169156

170-
{tab.id === page && (
171-
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-surface-200"></div>
172-
)}
173-
</TabsTrigger_Shadcn_>
174-
))}
157+
<div className="flex items-center gap-x-2">
158+
<span className="">{tab.label}</span>
159+
<Tooltip_Shadcn_>
160+
<TooltipTrigger_Shadcn_ asChild>
161+
<InformationCircleIcon className="transition text-foreground-muted w-3 h-3 data-[state=delayed-open]:text-foreground-light" />
162+
</TooltipTrigger_Shadcn_>
163+
<TooltipContent_Shadcn_ side="top">{tab.description}</TooltipContent_Shadcn_>
164+
</Tooltip_Shadcn_>
165+
</div>
166+
{tab.isLoading ? (
167+
<ShimmeringLoader className="w-32 pt-1" />
168+
) : tab.max === undefined ? (
169+
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
170+
No data yet
171+
</span>
172+
) : (
173+
<span className="text-xs text-foreground-muted group-hover:text-foreground-lighter group-data-[state=active]:text-foreground-lighter transition">
174+
{/* {Number(tab.max).toLocaleString()} */}
175+
{maxValue}
176+
{tab.id !== QUERY_PERFORMANCE_REPORT_TYPES.MOST_FREQUENT
177+
? tabMax > 1000
178+
? 's'
179+
: 'ms'
180+
: ' calls'}
181+
</span>
182+
)}
183+
184+
{tab.id === page && (
185+
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-surface-200"></div>
186+
)}
187+
</TabsTrigger_Shadcn_>
188+
)
189+
})}
175190
</TabsList_Shadcn_>
176191
</Tabs_Shadcn_>
177192

‎apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export const QueryPerformanceFilterBar = ({
7373
}
7474

7575
function getSortButtonLabel() {
76-
if (defaultSortByValue?.order === 'desc') {
76+
if (sortByValue?.order === 'desc') {
7777
return 'Sorted by latency - high to low'
7878
} else {
7979
return 'Sorted by latency - low to high'

‎apps/studio/data/database/retrieve-index-from-select-query.ts

+17-8
Original file line numberDiff line numberDiff line change
@@ -102,19 +102,28 @@ export const useGetIndexesFromSelectQuery = <TData = GetInvolvedIndexesFromSelec
102102
GetInvolvedIndexesFromSelectQueryError,
103103
TData
104104
> = {}
105-
) =>
106-
useQuery<GetInvolvedIndexesFromSelectQueryData, GetInvolvedIndexesFromSelectQueryError, TData>(
105+
) => {
106+
// [Joshen] Only get indexes for queries starting with these
107+
const isValidQueryForIndexing =
108+
query !== undefined &&
109+
(query.trim().toLowerCase().startsWith('select') ||
110+
query.trim().toLowerCase().startsWith('with pgrst_source'))
111+
112+
return useQuery<
113+
GetInvolvedIndexesFromSelectQueryData,
114+
GetInvolvedIndexesFromSelectQueryError,
115+
TData
116+
>(
107117
databaseKeys.indexesFromQuery(projectRef, query),
108118
() => getInvolvedIndexesInSelectQuery({ projectRef, connectionString, query }),
109119
{
110120
retry: false,
111121
enabled:
112-
(enabled &&
113-
typeof projectRef !== 'undefined' &&
114-
typeof query !== 'undefined' &&
115-
query !== undefined &&
116-
(query.startsWith('select') || query.startsWith('SELECT'))) ||
117-
query.trim().toLowerCase().startsWith('with pgrst_source'),
122+
enabled &&
123+
typeof projectRef !== 'undefined' &&
124+
typeof query !== 'undefined' &&
125+
isValidQueryForIndexing,
118126
...options,
119127
}
120128
)
129+
}

0 commit comments

Comments
 (0)