mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
c7803b8b9b
## Context Initial work for Top for Postgres - adds a "Sessions" section under a new Observability segment "Database Connections" NOTE: All the copywriting and naming might change - not sure what's an ideal title for this We'll also be iteratively building on top of this UI, adding more actionable signals instead of just information Changes are featured flagged, off for public - This would essentially replace the "View ongoing queries" in the SQL Editor by providing a dedicated UI - It checks against `pg_stat_activity` as per the ongoing queries UI - We'll also subsequently deprecate the "Ongoing queries" UI in the SQL editor - Defaults into a "live mode" where the data is refreshed every 3 seconds via long-polling <img width="983" height="474" alt="image" src="https://github.com/user-attachments/assets/16402fe4-0b53-4f9e-9342-cdda26e3778a" /> - Supports filtering by state <img width="374" height="282" alt="image" src="https://github.com/user-attachments/assets/562f8fbe-2dc6-48e7-8ec0-de7ffb8348d1" /> - Users can also terminate queries through here <img width="247" height="164" alt="image" src="https://github.com/user-attachments/assets/23a639dc-8f96-473a-a823-605b0bab02ee" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit # Release Notes * **New Features** * Added an Observability **Database Connections** page with a live **Sessions** activity table (state/roles filtering, blocked-by details, session duration, and per-session termination with confirmation). * Included a **Live/Pause** toggle to control automatic refresh (~3 seconds). * **Enhancements** * Improved Reports selection filtering: supports optional option quantities, better popover styling, sorted apply behavior, and shows quantity inline. * Query performance duration formatting now supports configurable decimal precision. * Tooltips can now render richer content (string or React node). <!-- end of auto-generated comment: release notes by coderabbit.ai -->
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Check, Copy } from 'lucide-react'
|
|
import { useMemo, useState } from 'react'
|
|
import { Button, cn, copyToClipboard } from 'ui'
|
|
|
|
import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
|
|
|
|
type SqlMonacoBlockProps = {
|
|
value?: string
|
|
wrapperClassName?: string
|
|
}
|
|
|
|
// [Joshen] This is technically a duplicate of CodeBlock from `ui-patterns`
|
|
// Should decide which is the preferred and consolidate - although rendering CodeEditor
|
|
// is much heavier due to Monaco Editor. I'd rather we use CodeBlock (or improve that)
|
|
// for read-only rendering of code contents
|
|
export const SqlMonacoBlock = ({ value, wrapperClassName }: SqlMonacoBlockProps) => {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const content = useMemo(() => value ?? '', [value])
|
|
|
|
const handleCopy = (value: string) => {
|
|
setCopied(true)
|
|
copyToClipboard(value)
|
|
setTimeout(() => setCopied(false), 1000)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn('group relative border rounded-md overflow-hidden w-full', wrapperClassName)}
|
|
>
|
|
<CodeEditor
|
|
hideLineNumbers
|
|
language="pgsql"
|
|
value={content}
|
|
className="h-[322px] pl-2"
|
|
options={{ padding: { top: 12, bottom: 12 } }}
|
|
/>
|
|
|
|
<div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Button
|
|
variant="default"
|
|
className="px-1.5"
|
|
icon={copied ? <Check /> : <Copy />}
|
|
onClick={() => handleCopy(content)}
|
|
>
|
|
{copied ? 'Copied' : ''}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|