## Consolidate Table Editor grid header actions into a single row
https://github.com/user-attachments/assets/1020c385-8fa9-4ef1-b5e7-03983111508b
## Changes involved
- Index advisor, Realtime, and API docs are now behind a dropdown menu
button (Treated as secondary actions)
- Grid header actions shifted into the same row as filter bar (more
space for data grid)
- Header actions will hide while filter bar is in focus (remove
distractions, more space for filter bar)
## Changes to filter bar
- Filter bar will refocus when deleting a filter
- Clicking on the search icon will focus on the free form input of the
filter bar
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a “More” dropdown in grid actions to access Realtime, API docs,
and Index Advisor.
* New dialogs for enabling Index Advisor and toggling Realtime are now
consistently managed.
* **Improvements**
* Improved filter focus handling with auto-refocus when conditions
change and responsive header behavior.
* Adjusted popover alignment, separator visuals,
header/footer/pagination layout and sizing.
* Filter bar now supports programmatic focus; Connect button supports
icon-only mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
## Summary
- Coerces `before`/`after` cost values to `Number()` in
`QueryPanelScoreSection` and `calculateImprovement` before any
comparison or arithmetic
- Fixes contradictory index advisor display where correct cost numbers
showed 0% improvement and wrong arrow direction
## Root Cause
When `index_advisor_result` is prefetched from the Reports SQL query
(via `json_build_object`), cost values can arrive as strings instead of
numbers. JavaScript string comparison is lexicographic, producing wrong
results:
| Expression | Numbers | Strings |
|---|---|---|
| `after > before` (arrow) | `50 > 100` → `false` ✅ | `"50" > "100"` →
`true` ❌ |
| `costBefore <= costAfter` (improvement calc) | `100 <= 50` → `false` ✅
| `"100" <= "50"` → `true` ❌ |
The direct fetch path (`retrieve-index-advisor-result-query.ts`)
validates through Zod and is unaffected. Only the prefetched path lacks
validation.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved numeric value handling in query performance calculations to
ensure more accurate and reliable improvement metrics.
* **Refactor**
* Enhanced type safety and numeric coercion for query performance score
comparisons, resulting in more consistent and robust metric
calculations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
* feat: more generic observability banner on db report
* feat: try popup in corner
* feat: tidy up and fix up event as well
* feat: add event for dismiss as well
* feat: add supplementary link at bottom of reports
* fix: sizing of fonts
* feat: banner stack approach
* fix: isIndexAdvisorAvailable dep
* chore: remove unused import for old banner
* feat: remove unused isDismissed
* chore: remove unused cn
* chore: change prio on query perf page
* chore: remove unused sendEvent
* chore: better useEffect cleanup
* chore: remove unused index advisor notice
* fix: priority of banner stack
* fix: first time loader flickering
* chore: lowercase the word Free
* feat: add IS_PLATFORM to make sure metrics api banner is scoped to platform
* chore: another copy update for observability link
* fix: telemetry keys to match styleguide
* fix: use the correct way to apply events
* feat: add events for index advisor banner too
* chore: delete unused old banner
* fix: dismiss buttons not working
* feat: add extra event to enable index advisor
* feat: change the check to show index advisor tab at all times
* fix: hide add to log drains on export menu in query perf
* fix: small fallback for pathname check
* fix: query perf header block responsiveness
* feat: admonition for index advisor
* fix: add aria-describedby to query perf sheet
* feat: proper way to do sheet description
* chore: better title spacing in panel
* fix: indexes in use empty state
* fix: key in observability menu
* feat: better highlighting of index advisor issues
* feat: add docs button to empty indexes tab
* feat: remove unused code
* feat: use button tooltips for reset and refresh to gain space
* feat: add dismiss to index advisor banner
* feat: add warnings filter to query perf
* feat: filter all queries for warnings
* fix: selected state for warning rows
* fix: fallback for isLogs check
* fix: other instance of download button
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
* feat: setup chart area and tabs
This sets up the area where we can expect the insights chart as well as the tabs mechanism.
* feat: parse pg_stat_monitor logs as json
* feat: create query perf chart utils and move transfrom function
Created a utils file for our QueryPerformanceChart component. This moves the logs to JSON transform function there.
* feat: add timerange to chart
* feat: add date selector to query perf overview
This adds the selector to the top right of the page allowing the user to switch between last hour, 3 hours and 24 hours
* feat: modify chart component to accomodate hiding bits
* feat: add metrics to each tab
* chore: update to 60 min by default and some css
* feat: centralise data parsing for logs
* feat: clean up filters bar
This rewires the export to give you the aggregate pg_stat_monitor data. Also removes unused buttons and filters.
* feat: percentiles for query latency chart
* feat: filter out non evenets from pg_stat_monitor logs
* feat: utils for cache misses and hits
* feat: add selected query to chart on click
* feat: add click through to query panel
* chore: tidy up files
* chore: distinction between selected and open panel
* feat: move query performance fully into reports area
* fix: preserve query params on reports link
* fix: remove right icon syntax in report menu
* chore: remove cache misses from cache chart
* refactor: backwards compatibility for statements if right db version isnt available
* chore: delete randomly generated empty file
* chore: tidy up unused imports and vars
* chore: remove console logs
* chore: remove isMounted from query perf
* fix: cmd k query perf path
* feat: simplify query latency only p50 and p95
This seems to give us a more accurate reading as we can calculate these two
* fix: cache hit rate not showing inside query details
* chore: chart bg colour adjust
So it contrasts a little better on light mode.
* feat: show selected query on other verticals
* feat: bring back symlink in advisors
Joshen Lim