Commit Graph
5 Commits
Author SHA1 Message Date
Joshen Lim cf7da58eb3 Add overview section for database connections (#48147)
## Context

Building on top of "Database Connections" - this adds a top summary
section, again from `pg_stat_activity`
<img width="948" height="324" alt="image"
src="https://github.com/user-attachments/assets/f4968193-0a5f-4754-a630-40685b747999"
/>

Each block comes with a tooltip in hopes to educate the significance of
each metric
- Connections: Spread of connections per database role
<img width="313" height="164" alt="image"
src="https://github.com/user-attachments/assets/8ceeab5d-b960-4be3-9a5b-8600bd5cf303"
/>
- Active queries: Rough representative of activity
<img width="350" height="196" alt="image"
src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674"
/>
- Idle in transaction: Important to identify as this indicates locks
(Suggests root cause)
<img width="350" height="196" alt="image"
src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674"
/>
- Blocked queries: Also important to identify stuck queries
<img width="335" height="183" alt="image"
src="https://github.com/user-attachments/assets/57255fb8-24f6-4ddd-aa54-850a77173b5c"
/>
- Longest running query: Might be useful to identify unusually long
queries
- Will be `text-warning` if exceeds 30 seconds for active queries,
`text-destructive` if exceeds 10 seconds for queries idle in transaction
<img width="342" height="119" alt="image"
src="https://github.com/user-attachments/assets/f6783b43-058a-4a32-a40c-0bc64f23d2ce"
/>

"Summarize activity" CTA leverages on the Assistant to give a quick
overview - highlights any potential issues for quick reference
<img width="1918" height="958" alt="image"
src="https://github.com/user-attachments/assets/340121fe-3186-48a5-8023-fbac2a93397a"
/>

## Other changes
- Hides "View running queries" in SQL Editor if `topForPostgres` feature
flag is enabled (since this UI is meant to replace that)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a Database Connections observability overview with metric cards
(connections, longest-running, active, blocked, idle-in-transaction) and
an interactive “Longest running” PID selector.
* Added a “Summarize activity” AI assistant dropdown that starts a
timestamped, activity-aware summary chat.
* **Improvements**
* Enhanced live activity refresh (including window-focus updates) and
standardized duration warning thresholds for active and
idle-in-transaction sessions.
* Improved hover details for query previews and allowed richer tooltip
content for metric labels.
* **Feature Changes**
  * Gated the “View running queries” bottom panel behind a feature flag.
* **Bug Fixes**
* Refined running-too-long badge and warning styling for
idle-in-transaction cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-22 17:25:56 +08:00
Joshen Lim c7803b8b9b Chore/add sessions database connections (#48094)
## 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 -->
2026-07-21 16:52:03 +08:00
Alaister YoungandAlaister Young b9c8857394 fix(studio): TanStack route parity fixes from Next comparison audit (#48028)
Audited every TanStack route (~300 files) against its Next.js
pages-router counterpart — layout wrapping, root providers, API routes,
and deploy config — and fixed the divergences found. Same bug class as
#48024, plus a few setup-level gaps.

**Fixed (user-visible):**
- `routes/__root.tsx` was missing `TimezoneProvider` + the
`TimestampInfoProvider` bridge, so the stored timezone preference was
silently ignored app-wide (timestamps always rendered in browser-local
time)
- `routes/_auth.tsx` wrapped all 10 auth pages in `AuthenticationLayout`
(status banners + extra full-screen scroll container); in Next only
`/sign-in` has it via getLayout. The parent is now a passthrough and
sign-in wraps at the leaf
- `routes/project/$ref/integrations.tsx` hardcoded
`ProjectIntegrationsLayout`; the Next pages use
`ProjectIntegrationsLayoutDispatch`, which switches to the Marketplace
layout when that flag is enabled
- `GlobalShortcuts` wasn't mounted, so the shortcuts-reference sheet
(`?`) and its command-menu entry were unreachable
- `routes/join.tsx` added a full-screen wrapper the Next page doesn't
have (double `min-h-screen` around `InterstitialLayout`)

**Fixed (behavior/config):**
- ConfigCat flags lost the `plan` custom attribute, so plan-targeted
flags could evaluate differently
- `vercel.ts`: `api/server.js` had no `maxDuration` (Next sets up to
300s per route — stripe-sync, AI streaming); added the
`/.well-known/vercel/flags` rewrite + JSON content-type (Flags Explorer
endpoint previously fell through to the HTML shell); added
`img`/`favicon` cache-control headers
- `routes/api/v1/.../functions/$slug/body.ts` (bespoke reimplementation)
dropped `apiWrapper`'s global catch — errors now get Sentry capture +
the same 500 `{ error }` body
- Reverted migration drift in `__root.tsx`: tooltip `delayDuration` 0 →
Radix default (matching Next), `og:image` back to `supabase-og.png`
- lodash → lodash-es for the whole SSR module graph (#48029, merged into
this branch): the lodash CJS build's named-export interop yields
non-functions under the Vite SSR module runner, which 500'd every page
once `GlobalShortcuts` (or anything calling lodash during SSR render)
mounted. An `options.ssr`-gated `resolveId` plugin in `vite.config.ts`
serves `lodash-es` (same version, real ESM) to app source, workspace
packages, and deps alike; client bundles untouched. Note: dev servers
need a restart after pulling this (config change)

Also corrected two stale route comments claiming the CLI/Stripe login
pages inline `APIAuthorizationLayout` (they inline
`InterstitialLayout`).

**Not changed (audited, intentionally left):**
- Redirect-only pages briefly flash `DefaultLayout` chrome under
TanStack (normally unreachable — router-level redirects fire first)
- Org pages inherit an inert `AppLayout` div via `routes/_app.tsx`
(visually a no-op; Next org pages don't have it)
- Adapter-level differences: framework 405s instead of Next's
`Allow`-header JSON, `bodyParser.sizeLimit` not enforced on two routes,
narrower favicon non-prod detection (commented as known)
- Known pre-existing dev console error (also on Next master): closing
the shortcuts sheet logs a setState-in-render warning —
`@tanstack/react-hotkeys@0.10.0` calls `setOptions` in the
`useHotkeySequence` render body, notifying `useHotkeyRegistrations`
subscribers mid-render. Worth an upstream report/dep bump as a follow-up

## To test

Verified on the local TanStack dev server via Playwright (all pass):
- Set a timezone in the account dropdown → log timestamps show that
timezone's row in the hover tooltip
- `?` opens the shortcuts sheet; `⌘K` → "Show all keyboard shortcuts"
does too
- `/sign-in` still shows banners/window chrome; `/sign-up`,
`/sign-in-sso`, `/forgot-password`, `/cli/login` render without the
extra wrapper
- `/project/<ref>/integrations` renders (legacy sidebar when marketplace
flag off)
- `/join` renders a single centered interstitial
- `og:image` meta is `supabase-og.png`
- Vercel deploy-button new-project page renders the consolidated #47995
form inside the window chrome
- `vercel.ts` changes are deploy-config only — verify Flags Explorer +
function timeout on a preview deploy

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
  - Added timezone-aware timestamp handling across Studio.
  - Added support for global keyboard shortcuts.
- Updated authentication page layouts for a more consistent sign-in
experience.
  - Refreshed social sharing imagery.

- **Bug Fixes**
- Improved error reporting and responses when loading function source
files fails.
  - Improved handling of integration page layouts.
  - Fixed Vercel routing for feature configuration requests.

- **Performance**
  - Added caching for static images and favicons.
  - Increased server execution time for longer-running requests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-17 16:42:10 +08:00
4129c8954d feat(studio): TanStack project routes — auth/logs/settings/functions (stack 5.2/6, from #46424) (#47118)
**Stack 5.2/6** of the TanStack Start migration (#46424) — second half
of the project routes (S5 was split for CodeRabbit's 150-file cap).
Stacked on **#47117** (5.1).

> [!NOTE]
> Same shape as 5.1 — thin route wrappers over the existing pages-router
components. With this PR every route is present, so `routeTree.gen.ts`
is now **byte-identical to the migration branch**.

## What's in this PR
- **Remaining project routes:** auth, logs, settings, observability,
functions, advisors, project-level integrations.
- **Supporting edits:** hoist `EdgeFunctionsIndexPageWrapper` out of
`getLayout`, `functions/secrets`, and move `DefaultLayout` to the root
for the logs page.
- `routeTree.gen.ts` regenerated for the full set.

## Verification
On top of S1–5.1: `studio` typecheck ✓, lint (0 errors) ✓, **Next build
✓ (181/181 pages)**.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Reorganized internal routing and page structure to improve navigation
and maintainability across project settings, logs, functions,
authentication, integrations, and observability sections.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-07-06 18:31:18 +08:00
7d3f72ec7d feat(studio): TanStack project routes — data surfaces (stack 5.1/6, from #46424) (#47117)
**Stack 5.1/6** of the TanStack Start migration (#46424). The original
S5 (174 files) was over CodeRabbit's 150-file review cap, so it's split
into 5.1 + 5.2 by product. Stacked on **#47113** (S4).

> [!NOTE]
> Thin route wrappers rendering the existing pages-router components via
compat shims. Next-safe (full Next build run). The TanStack app isn't
functional end-to-end until 5.2 + the matrix flip.

## What's in this PR
- **Data-cluster project routes:** database, editor, sql, storage,
realtime, branches.
- **Top-level / onboarding routes:** `authorize`, `join`, `logout`,
`redeem`, `verify-email`, `claim-project`, aws-marketplace,
Vercel/GitHub integration entrypoints; `_app`/`_auth` layout shells;
`/org/_` + `/project/_` catch-alls.
- **Supporting edits:** hoist `BranchesPageWrapper` out of `getLayout`,
`ConnectStepsSection` `import.meta.glob`, `api/server.js`.
- `routeTree.gen.ts` regenerated for the routes present so far.

## Verification
On top of S1–S4: `studio` typecheck ✓, lint (0 errors) ✓, **Next build ✓
(181/181 pages)**.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Restructured application routing infrastructure for improved code
organization and maintainability.
* Extracted and refactored layout wrapper components for enhanced
reusability across different sections of the application.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-07-03 21:22:06 +08:00