Skip to content

Fix Query Stats tab stuck on loading spinner#6

Merged
antarr merged 1 commit into
mainfrom
fix/query-stats-loading-spinner
Apr 11, 2026
Merged

Fix Query Stats tab stuck on loading spinner#6
antarr merged 1 commit into
mainfrom
fix/query-stats-loading-spinner

Conversation

@antarr

@antarr antarr commented Apr 11, 2026

Copy link
Copy Markdown
Owner

Summary

The Query Stats tab was stuck showing its loading spinner indefinitely. Root cause: the sort dropdown and refresh button in _tab_query_stats.html.erb were commented out (in commit 79a17f7, when sortable column headers were introduced as a replacement), but the JavaScript that reads el('qstats-sort').value and attaches listeners to #qstats-refresh / #qstats-sort was left in place. When the tab loaded, loadQueryStats() showed the spinner, then threw TypeError: Cannot read properties of null (reading 'value') on the dropdown read — the fetch was never issued and the spinner stayed up forever.

The Dashboard tab's "Top 5 expensive queries" widget was unaffected because it uses its own ajaxGet(ROUTES.query_stats, { sort: 'total_time', limit: 5 }, ...) call that doesn't touch the removed DOM elements.

Fix

  • Remove the commented-out <!--div>...</div--> block from _tab_query_stats.html.erb
  • Remove the var sort = el('qstats-sort').value; line from loadQueryStats() in index.html.erb
  • Hardcode sort: 'total_time' in the ajaxGet call (matches the controller's default)
  • Remove the two addEventListener calls for the non-existent elements

Client-side sortable column headers (added in 79a17f7) continue to provide sort UX after the data loads.

Context

Originally committed as 37dbf8e on the feature/mysql-genius-core-phase-1a branch (PR #5) where it was a pre-existing-bug drive-by fix uncovered during testing. Cherry-picked here as a standalone PR so the fix can land on main independently of the larger Phase 1a refactor. When PR #5 merges, git's 3-way merge will detect the identical change already on main and merge cleanly without conflict or duplication.

Test Plan

  • Click the Query Stats tab in a host app that uses mysql_genius
  • Verify the table loads with the top 50 queries by total time
  • Verify column headers are clickable for client-side sorting
  • Verify no JavaScript errors in the browser console

Pre-existing bug unrelated to Phase 1a. The sort dropdown and refresh
button in the Query Stats tab partial were commented out (likely in
79a17f7 when sortable column headers replaced the dropdown-based
sorting), but the JavaScript that reads their values and attaches
event listeners was left in place. When the tab loaded, the JS threw
TypeError on the null element, killing loadQueryStats() mid-flight
after it showed the spinner but before it issued the fetch — so the
spinner sat forever.

Fix: delete the commented-out div from _tab_query_stats.html.erb,
delete the dead var sort = el('qstats-sort').value line, hardcode
sort: 'total_time' in the ajaxGet call (matches the controller's
default), and delete the two addEventListener calls for the removed
elements. Client-side sortable column headers continue to provide
sort UX after data loads.

The Dashboard tab's "Top 5 expensive queries" widget was unaffected
because it uses its own ajaxGet with hardcoded sort params, which is
how Query Stats JSON data was still coming back over the wire even
though the UI was broken.
@antarr antarr merged commit 55287b3 into main Apr 11, 2026
32 checks passed
@antarr antarr deleted the fix/query-stats-loading-spinner branch April 11, 2026 03:35
@antarr antarr self-assigned this Apr 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant