diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx index 14274aeb8e8c6..ab58f60630ab4 100644 --- a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx +++ b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx @@ -14,8 +14,8 @@ export const OverviewLearnMore = () => { const LearnMoreCards = [ { label: 'Docs', - title: 'Authentication docs', - description: 'Read more on authentication and the benefits of using Supabase policies.', + title: 'Auth docs', + description: 'Read more on Supabase auth, managing users and more.', image: `${BASE_PATH}/img/auth-overview/auth-overview-docs.jpg`, actions: [ { @@ -27,7 +27,7 @@ export const OverviewLearnMore = () => { }, { label: 'Assistant', - title: 'Explain authentication errors', + title: 'Explain auth errors', description: 'Our Assistant can help you debug and fix authentication errors.', image: `${BASE_PATH}/img/auth-overview/auth-overview-assistant.jpg`, actions: [ @@ -35,9 +35,10 @@ export const OverviewLearnMore = () => { label: 'Ask Assistant', onClick: () => { aiSnap.newChat({ - name: 'Authentication Help', + name: 'Auth Help', open: true, - initialInput: 'Help me debug and fix authentication errors in my Supabase project', + initialInput: + 'Look at my logs related to Supabase Auth and help me debug the recent errors.', suggestions: { title: 'I can help you with authentication issues. Here are some common problems:', prompts: [ @@ -68,7 +69,7 @@ export const OverviewLearnMore = () => { { label: 'Logs', title: 'Dive into the logs', - description: 'Authentication logs provide a deeper view into your auth requests.', + description: 'Auth logs provide a deeper view into your auth requests.', image: `${BASE_PATH}/img/auth-overview/auth-overview-logs.jpg`, actions: [ { diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx index fc8122627a063..e8e3c87ee0b80 100644 --- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx +++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx @@ -33,11 +33,48 @@ import { } from './QueryPerformance.constants' import { useQueryPerformanceSort } from './hooks/useQueryPerformanceSort' import { formatDuration } from './QueryPerformance.utils' +import { GetIndexAdvisorResultResponse } from 'data/database/retrieve-index-advisor-result-query' interface QueryPerformanceGridProps { queryPerformanceQuery: DbQueryHook } +interface QueryPerformanceRow { + query: string + prop_total_time: number + total_time: number + calls: number + max_time: number + mean_time: number + min_time: number + rows_read: number + cache_hit_rate: string + rolname: string + index_advisor_result: GetIndexAdvisorResultResponse | null +} + +const calculateTimeConsumedWidth = (data: QueryPerformanceRow[]) => { + if (!data || data.length === 0) return 150 + + let maxWidth = 150 + + data.forEach((row) => { + const percentage = row.prop_total_time || 0 + const totalTime = row.total_time || 0 + + if (percentage && totalTime) { + const percentageText = `${percentage.toFixed(1)}%` + const durationText = formatDuration(totalTime) + const fullText = `${percentageText} / ${durationText}` + const estimatedWidth = fullText.length * 8 + 40 + + maxWidth = Math.max(maxWidth, estimatedWidth) + } + }) + + return Math.min(maxWidth, 300) +} + export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformanceGridProps) => { const { sort, setSortConfig } = useQueryPerformanceSort() const gridRef = useRef(null) @@ -57,7 +94,8 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance name: col.name, cellClass: `column-${col.id}`, resizable: true, - minWidth: col.minWidth ?? 120, + minWidth: + col.id === 'prop_total_time' ? calculateTimeConsumedWidth(data ?? []) : col.minWidth ?? 120, sortable: !nonSortableColumns.includes(col.id), headerCellClass: 'first:pl-6 cursor-pointer', renderHeaderCell: () => {