feat(clusterView): Cluster dashboard / home page#753
Open
khelanmodi wants to merge 1 commit into
Open
Conversation
Adds a cluster overview dashboard that opens from the cluster tree node instead of the empty editor. Lists databases with storage size, collection count and index count, drills into a database to list collections with storage size, document count, average document size, index count and total index size. Live search, sortable columns, and create-database / create-collection flows that reuse the existing native AzureWizard commands (no bespoke webview dialog) so the tree and dashboard stay in sync. Built on the existing registry-driven React webview + tRPC router pattern (Fluent UI v9, VS Code theme tokens); metrics stream in per row with bounded concurrency and degrade to a placeholder when stats calls are denied or unsupported. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Cluster Overview (dashboard/home) webview that opens when a cluster is activated, replacing the previously empty editor experience. It adds a React/Fluent UI v9 dashboard with database and collection drill-in views, backed by new tRPC procedures and a small backend addition to fetch database-wide stats.
Changes:
- Added a new
clusterViewwebview (overview + drill-in) with reusable table, sorting/filtering, formatting utilities, and bounded-concurrency metric streaming. - Added
openClusterViewcommands and wiring so cluster activation (double-click/context/inline) opens the dashboard. - Extended backend integration with a
dbStats-basedgetDatabaseStatsmethod and a dedicated tRPC router for the dashboard’s data + create flows.
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/webviews/documentdb/clusterView/utils/sort.ts | Generic compare + filter/sort helpers for dashboard tables. |
| src/webviews/documentdb/clusterView/utils/sort.test.ts | Unit tests for sorting/filtering behavior (including undefined-last). |
| src/webviews/documentdb/clusterView/utils/format.ts | Byte/count formatting and metric-cell display helpers. |
| src/webviews/documentdb/clusterView/utils/format.test.ts | Unit tests for formatting helpers. |
| src/webviews/documentdb/clusterView/types.ts | Shared UI types for rows, metrics, sorting, and create results. |
| src/webviews/documentdb/clusterView/hooks/useBoundedMetrics.ts | Hook to stream per-row metrics with bounded concurrency + abort handling. |
| src/webviews/documentdb/clusterView/constants.ts | Shared dashboard constants (column widths, concurrency limit). |
| src/webviews/documentdb/clusterView/components/DatabaseList.tsx | Cluster overview page listing databases with streamed metrics + create/refresh. |
| src/webviews/documentdb/clusterView/components/DashboardTable.tsx | Shared sortable table implementation with column sizing + optional row activation. |
| src/webviews/documentdb/clusterView/components/CollectionList.tsx | Database drill-in page listing collections with streamed metrics + create/refresh. |
| src/webviews/documentdb/clusterView/components/Breadcrumb.tsx | Breadcrumb navigation between overview and drill-in. |
| src/webviews/documentdb/clusterView/clusterViewRouter.ts | tRPC backend integration surface for cluster dashboard (list/metrics/create). |
| src/webviews/documentdb/clusterView/clusterViewController.ts | Webview controller + tRPC context setup for cluster dashboard. |
| src/webviews/documentdb/clusterView/ClusterView.tsx | Top-level React view managing overview vs drill-in page state. |
| src/webviews/documentdb/clusterView/clusterView.scss | Styling for dashboard layout, toolbar, and table visuals. |
| src/webviews/_integration/WebviewRegistry.ts | Registers clusterView React entrypoint in the webview registry. |
| src/webviews/_integration/appRouter.ts | Mounts mongoClusters.clusterView into the app tRPC router. |
| src/tree/documentdb/ClusterItemBase.ts | Updates cluster tree item activation to open the cluster dashboard. |
| src/documentdb/ClustersExtension.ts | Registers clusterView commands (internal + double-click + context + inline). |
| src/documentdb/ClustersClient.ts | Adds getDatabaseStats() wrapper over dbStats for dashboard metrics. |
| src/commands/openClusterView/openClusterView.ts | New command to open cluster dashboard (tree node + internal entrypoint). |
| package.json | Contributes new commands and menus for opening cluster overview (context/inline). |
| l10n/bundle.l10n.json | Adds localized strings used by the new dashboard UI. |
Comment on lines
+164
to
+165
| tabIndex={interactive ? 0 : undefined} | ||
| role={interactive ? 'button' : undefined} |
Comment on lines
+173
to
+175
| {col.showSpinnerWhileLoading && loading ? ( | ||
| <Spinner size="tiny" aria-label={col.label} /> | ||
| ) : ( |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat(clusterView): Cluster dashboard / home page
Summary
Connecting to or selecting a cluster previously dropped users on VS Code's
empty editor. This PR adds a cluster overview dashboard webview that opens
in its place, lists all databases with at-a-glance metrics, and lets users
drill into a database to see its collections — with create flows for both.
Built entirely on the extension's existing patterns: the registry-driven React
webview + tRPC router stack, Fluent UI v9 primitives, and VS Code theme tokens.
No new connection path, no new UI toolkit, no new runtime dependencies.
What ships
Cluster overview (home page)
via the new
openClusterViewcommand instead of the empty editor.Database drill-in
size, Indexes, Total index size.
Create flows
the tree's right-click Create database / Create collection (native input
box, name validation, tree refresh). No bespoke webview dialog, so the tree
and dashboard stay in sync. A pre-flight "not signed in" state surfaces
inline; wizard-time errors surface natively.
Data layer
ClustersClient(getDatabaseStats→dbStats,getCollectionStats→
collStats). The cheaplistDatabases/listCollectionscalls renderrows immediately; metrics stream in per row with bounded concurrency
(
METRICS_CONCURRENCY_LIMIT).call degrades that row's cells to a "—" placeholder.
Architecture
All UI ↔ backend traffic flows through one file:
Each procedure is annotated with a
BACKEND INTEGRATION POINTblock. Procedures:getClusterInfo,listDatabases,getDatabaseMetrics,listCollections,getCollectionMetrics,createDatabase,createCollection.Fixed column widths are applied via Fluent's column-sizing feature so the
database and collection tables stay visually consistent regardless of column
count.
Files changed
src/webviews/documentdb/clusterView/(new)src/commands/openClusterView/(new)src/documentdb/ClustersClient.tsgetDatabaseStats(dbStats) for db-wide metrics.src/documentdb/ClustersExtension.tsopenClusterViewcommand.src/tree/documentdb/ClusterItemBase.tssrc/webviews/_integration/{appRouter,WebviewRegistry}.tsmongoClusters.clusterView+ registers the view.Verification
npm run l10nnpm run prettier-fixnpm run lintnpx jest --no-coverage(2024 passing)npm run buildnpm run webpack-prod