vasceannie/supabase
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

feat(studio): combine time consumed cols in query perf (#38920)

Browse Source 
* chore: remove forgotten dayjs helper

* feat: combined time consumed column
This commit is contained in:
kemal.earth
2025-09-22 14:54:24 +01:00
committed by GitHub
parent 2a0911379e
commit 73b0b21bb7
3 changed files with 55 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx
View File

@@ -2,7 +2,6 @@ import { Lightbulb } from 'lucide-react'
import { useEffect, useState } from 'react'
import dynamic from 'next/dynamic'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import { formatSql } from 'lib/formatSql'
import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button, cn } from 'ui'
@@ -97,43 +96,31 @@ export const QueryDetail = ({ selectedRow, onClickViewSuggestion }: QueryDetailP
: 'n/a'
if (x.id === 'prop_total_time') {
const percentage = selectedRow?.prop_total_time || 0
const totalTime = selectedRow?.total_time || 0
return (
<li key={x.id} className="flex justify-between pt-3 text-sm">
<p className="text-foreground-light">{x.name}</p>
{rawValue ? (
<p
className={cn(
'tabular-nums',
rawValue.toFixed(1) === '0.0' && 'text-foreground-lighter'
)}
>
{rawValue.toFixed(1)}%
</p>
) : (
<p className="text-muted">&ndash;</p>
)}
</li>
)
}
if (x.id == 'total_time') {
return (
<li key={x.id} className="flex justify-between pt-3 text-sm">
<p className="text-foreground-light">
{x.name + ' '}
<span className="text-foreground-lighter">latency</span>
</p>
{isTime &&
typeof rawValue === 'number' &&
!isNaN(rawValue) &&
isFinite(rawValue) ? (
<p
className={cn(
'tabular-nums',
formatDuration(rawValue / 1000) === '0.0s' && 'text-foreground-lighter'
)}
>
{formatDuration(rawValue / 1000)}
{percentage && totalTime ? (
<p className="flex items-center gap-x-1.5">
<span
className={cn(
'tabular-nums',
percentage.toFixed(1) === '0.0' && 'text-foreground-lighter'
)}
>
{percentage.toFixed(1)}%
</span>{' '}
<span className="text-muted">/</span>{' '}
<span
className={cn(
'tabular-nums',
formatDuration(rawValue / 1000) === '0.00s' && 'text-foreground-lighter'
)}
>
{formatDuration(totalTime / 1000)}
</span>
</p>
) : (
<p className="text-muted">&ndash;</p>

3
apps/studio/components/interfaces/QueryPerformance/QueryPerformance.constants.ts
View File

@@ -14,8 +14,7 @@ export const QUERY_PERFORMANCE_PRESET_MAP = {
export const QUERY_PERFORMANCE_COLUMNS = [
{ id: 'query', name: 'Query', description: undefined, minWidth: 500 },
{ id: 'prop_total_time', name: 'Time consumed', description: undefined, minWidth: 130 },
{ id: 'total_time', name: 'Total time', description: 'latency', minWidth: 150 },
{ id: 'prop_total_time', name: 'Time consumed', description: undefined, minWidth: 150 },
{ id: 'calls', name: 'Count', description: undefined, minWidth: 100 },
{ id: 'max_time', name: 'Max time', description: undefined, minWidth: 100 },
{ id: 'mean_time', name: 'Mean time', description: undefined, minWidth: 100 },

67
apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
View File

@@ -141,30 +141,6 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
)
}
if (col.id === 'prop_total_time') {
const percentage = props.row.prop_total_time || 0
const fillWidth = Math.min(percentage, 100)
return (
<div className="w-full flex flex-col justify-center text-xs text-right tabular-nums font-mono">
<div
className={`absolute inset-0 bg-foreground transition-all duration-200 z-0`}
style={{
width: `${fillWidth}%`,
opacity: 0.04,
}}
/>
{value ? (
<p className={cn(value.toFixed(1) === '0.0' && 'text-foreground-lighter')}>
{value.toFixed(1)}%
</p>
) : (
<p className="text-muted">&ndash;</p>
)}
</div>
)
}
const isTime = col.name.includes('time')
const formattedValue =
!!value && typeof value === 'number' && !isNaN(value) && isFinite(value)
@@ -173,19 +149,40 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
: value.toLocaleString()
: ''
if (col.id === 'total_time') {
if (col.id === 'prop_total_time') {
const percentage = props.row.prop_total_time || 0
const totalTime = props.row.total_time || 0
const fillWidth = Math.min(percentage, 100)
return (
<div className="w-full flex flex-col justify-center text-xs text-right tabular-nums font-mono">
{isTime && typeof value === 'number' && !isNaN(value) && isFinite(value) ? (
<p
className={cn((value / 1000).toFixed(2) === '0.00' && 'text-foreground-lighter')}
>
{(value / 1000).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
s
</p>
<div
className="absolute inset-0 bg-foreground transition-all duration-200 z-0"
style={{
width: `${fillWidth}%`,
opacity: 0.04,
}}
/>
{percentage && totalTime ? (
<span className="flex items-center justify-end gap-x-1.5">
<span
className={cn(percentage.toFixed(1) === '0.0' && 'text-foreground-lighter')}
>
{percentage.toFixed(1)}%
</span>{' '}
<span className="text-muted">/</span>
<span
className={cn(
(totalTime / 1000).toFixed(2) === '0.00' && 'text-foreground-lighter'
)}
>
{(totalTime / 1000).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}
s
</span>
</span>
) : (
<p className="text-muted">&ndash;</p>
)}