✨ feat: add dedicated Karmada Ops dashboard page by clubanderson · Pull Request #4014 · kubestellar/console

clubanderson · 2026-03-31T17:22:36Z

Summary

Adds a dedicated Karmada Ops dashboard page at /karmada-ops that appears in the sidebar navigation. This provides a single-pane view for operating Karmada-based multi-cluster environments.

Dashboard Layout (6 cards, 2x3 grid)

Row	Left	Right
1	Karmada Status	KubeRay Fleet
2	SLO Compliance	Failover Timeline
3	Trino Gateway	Cluster Health

Registration (all 7 locations)

config/dashboards/karmada-ops.ts — dashboard config
config/dashboards/index.ts — DASHBOARD_CONFIGS registry
config/routes.ts — ROUTES.KARMADA_OPS
hooks/useSidebarConfig.ts — DISCOVERABLE_DASHBOARDS
hooks/useSearchIndex.ts — DASHBOARD_NAMES + DASHBOARD_ROUTES
components/ui/StatsBlockDefinitions.ts — DashboardStatsType union
App.tsx — lazy import + Route + ROUTE_TITLES

Test plan

npm run build passes
Navigate to /karmada-ops — dashboard loads with 6 cards
Cards render with demo data (no clusters needed)
Dashboard appears in sidebar "Customize" menu under discoverable dashboards
Search for "Karmada" in global search — dashboard appears

Add a proper dashboard page at /karmada-ops that appears in the sidebar navigation. The dashboard pre-arranges all 4 new Karmada cards (KubeRay Fleet, SLO Compliance, Failover Timeline, Trino Gateway) alongside Karmada Status and Cluster Health into a unified operations view. Registration: - Dashboard config: config/dashboards/karmada-ops.ts - Page component: components/karmada-ops/KarmadaOps.tsx - Route: ROUTES.KARMADA_OPS (/karmada-ops) - Sidebar: DISCOVERABLE_DASHBOARDS (users can pin it) - Stats type: DashboardStatsType union - Search index: DASHBOARD_NAMES + DASHBOARD_ROUTES - Analytics: ROUTE_TITLES Signed-off-by: Andrew Anderson <andy@clubanderson.com>

netlify · 2026-03-31T17:22:42Z

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	`66b4c44`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69cc02e0469d9f0008cd6e7b
😎 Deploy Preview	https://deploy-preview-4014.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

kubestellar-prow · 2026-03-31T17:22:44Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign clubanderson for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

github-actions · 2026-03-31T17:23:53Z

👋 Hey @clubanderson — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

Claude Code (Opus 4.5 / 4.6) — recommended

GitHub Copilot

Cursor

Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

github-actions · 2026-03-31T17:24:07Z

Thank you for your contribution! Your PR has been merged.

Check out what's new:

KubeStellar Console — Live multi-cluster dashboard
Marketplace — Community extensions
Knowledge Base — Troubleshooting and how-tos

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

Copilot

Pull request overview

Adds a dedicated Karmada Ops dashboard page at /karmada-ops, wiring it into the app’s routing, unified dashboard registry, sidebar discoverability, and search metadata.

Changes:

Introduces a new unified dashboard config (karmada-ops) defining a 6-card 2×3 layout.
Adds a new page component and route to render the dashboard at /karmada-ops.
Registers the dashboard across sidebar navigation and (partial) global search metadata.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
web/src/hooks/useSidebarConfig.ts	Adds “Karmada Ops” as a discoverable dashboard link in the sidebar customizer.
web/src/hooks/useSearchIndex.ts	Adds `karmada-ops` to dashboard name/route maps used by stat scanning.
web/src/config/routes.ts	Adds `ROUTES.KARMADA_OPS` constant.
web/src/config/dashboards/karmada-ops.ts	New unified dashboard config defining cards, route, statsType, and storageKey.
web/src/config/dashboards/index.ts	Registers the new dashboard config in `DASHBOARD_CONFIGS` exports/registry.
web/src/components/ui/StatsBlockDefinitions.ts	Extends `DashboardStatsType` union to include `karmada-ops`.
web/src/components/karmada-ops/KarmadaOps.tsx	New dashboard page component using `DashboardPage` with MCP cluster data + stats plumbing.
web/src/App.tsx	Lazy-loads and routes `/karmada-ops`, and adds a route title entry.

Copilot · 2026-03-31T17:31:25Z

web/src/hooks/useSearchIndex.ts

  'multi-tenancy': 'Multi-Tenancy',
  'ci-cd': 'CI/CD',
+  'karmada-ops': 'Karmada Ops',
 }


The global search “page” results come from PAGE_ITEMS, and /karmada-ops isn’t listed there. Adding 'karmada-ops' to DASHBOARD_NAMES / DASHBOARD_ROUTES alone won’t make the new dashboard show up when searching for “Karmada” as described in the PR test plan. Add a PAGE_ITEMS entry for Karmada Ops (or generate page items from the dashboard registry) so the route is searchable.

Copilot · 2026-03-31T17:31:26Z

web/src/components/ui/StatsBlockDefinitions.ts

  | 'insights'
  | 'multi-tenancy'
  | 'ci-cd'
+  | 'karmada-ops'



This dashboard introduces a new DashboardStatsType ('karmada-ops'), but getDefaultStatBlocks() has no case for it, so the StatsOverview section will render with an empty grid by default. Define default stat blocks for 'karmada-ops' (even a small set like clusters/healthy/unhealthy/offline) and handle it in getDefaultStatBlocks().

Copilot · 2026-03-31T17:31:26Z

web/src/components/karmada-ops/KarmadaOps.tsx

+import { DashboardPage } from '../../lib/dashboards/DashboardPage'
+import { getDefaultCards } from '../../config/dashboards'
+
+const KARMADA_OPS_CARDS_KEY = 'kubestellar-karmada-ops-cards'


The card layout storage key here (kubestellar-karmada-ops-cards) does not match the unified dashboard config’s storageKey (karmada-ops-dashboard-cards). This will split persisted layouts and also prevents useSearchIndex’s DASHBOARD_STORAGE scan (built from DASHBOARD_CONFIGS) from finding cards placed on this dashboard. Use the config storageKey (or update the config to match) so there’s a single source of truth.

Suggested change

const KARMADA_OPS_CARDS_KEY = 'kubestellar-karmada-ops-cards'

const KARMADA_OPS_CARDS_KEY = 'karmada-ops-dashboard-cards'

Copilot · 2026-03-31T17:31:27Z

web/src/config/dashboards/karmada-ops.ts

+    autoRefresh: true,
+    autoRefreshInterval: 30000,
+  },
+  storageKey: 'karmada-ops-dashboard-cards',


storageKey here ('karmada-ops-dashboard-cards') is currently different from the DashboardPage’s storageKey for this dashboard ('kubestellar-karmada-ops-cards'). Because search indexing and other tooling build dashboard storage keys from DASHBOARD_CONFIGS, the config and page should agree on a single key to avoid missing/duplicated persisted layouts.

Suggested change

storageKey: 'karmada-ops-dashboard-cards',

storageKey: 'kubestellar-karmada-ops-cards',

clubanderson · 2026-03-31T17:31:36Z

🔄 Auto-Applying Copilot Code Review

Copilot code review found 2 code suggestion(s) and 2 general comment(s).

@copilot Please apply all of the following code review suggestions:

web/src/components/karmada-ops/KarmadaOps.tsx (line 14): const KARMADA_OPS_CARDS_KEY = 'karmada-ops-dashboard-cards'
web/src/config/dashboards/karmada-ops.ts (line 34): storageKey: 'kubestellar-karmada-ops-cards',

Also address these general comments:

web/src/hooks/useSearchIndex.ts (line 84): The global search “page” results come from PAGE_ITEMS, and /karmada-ops isn’t listed there. Adding 'karmada-ops' to DASH
web/src/components/ui/StatsBlockDefinitions.ts (line 59): This dashboard introduces a new DashboardStatsType ('karmada-ops'), but getDefaultStatBlocks() has no case for it, so th

Push all fixes in a single commit. Run cd web && npm run build && npm run lint before committing.

Auto-generated by copilot-review-apply workflow.

Copilot AI review requested due to automatic review settings March 31, 2026 17:22

kubestellar-prow bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Mar 31, 2026

kubestellar-prow bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Mar 31, 2026

clubanderson merged commit 9b8a49d into main Mar 31, 2026
18 of 19 checks passed

kubestellar-prow bot deleted the feat/karmada-operations-dashboard branch March 31, 2026 17:22

Copilot started reviewing on behalf of clubanderson March 31, 2026 17:24 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

clubanderson assigned Copilot Mar 31, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ feat: add dedicated Karmada Ops dashboard page#4014

✨ feat: add dedicated Karmada Ops dashboard page#4014
clubanderson merged 1 commit intomainfrom
feat/karmada-operations-dashboard

clubanderson commented Mar 31, 2026

Uh oh!

netlify bot commented Mar 31, 2026 •

edited

Loading

Uh oh!

kubestellar-prow bot commented Mar 31, 2026

Uh oh!

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

clubanderson commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	const KARMADA_OPS_CARDS_KEY = 'kubestellar-karmada-ops-cards'
	const KARMADA_OPS_CARDS_KEY = 'karmada-ops-dashboard-cards'

	storageKey: 'karmada-ops-dashboard-cards',
	storageKey: 'kubestellar-karmada-ops-cards',

Conversation

clubanderson commented Mar 31, 2026

Summary

Dashboard Layout (6 cards, 2x3 grid)

Registration (all 7 locations)

Test plan

Uh oh!

netlify bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellarconsole ready!

Uh oh!

kubestellar-prow bot commented Mar 31, 2026

Uh oh!

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

github-actions bot commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

clubanderson commented Mar 31, 2026

🔄 Auto-Applying Copilot Code Review

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Mar 31, 2026 •

edited

Loading