IS-11630 DevOps Dashboard plugin: page structure and a Database Clients placeholder (Milestone 1) - #309
Open
aleixsuau wants to merge 1 commit into
Conversation
This was referenced Sep 1, 2026
aleixsuau
changed the title
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The newly added Backstage intro documentation contains broken references and examples/diagrams that don’t match the current code, and should be corrected before merge.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Introduces a new devops-dashboard Backstage frontend plugin and wires it into the DevOps Dashboard Backstage app via package discovery, providing a new sidebar entry/page with a “Database Clients” tab placeholder for future GraphQL-backed data.
Changes:
- Added a new
@internal/backstage-plugin-devops-dashboardfrontend plugin (page + sub-page tab, i18n, placeholder UI, basic tests, dev harness, README). - Registered the plugin in the app by adding it as a dependency (
packages/app/package.json) and updating lockfile accordingly. - Bumped Prettier to v3 and applied a small formatting change (HTML doctype), plus updated the app title.
File summaries
| File | Description |
|---|---|
| src/devops-dashboard-backstage-app/yarn.lock | Lockfile updates for the new plugin dependency and related package/version changes (incl. Prettier v3). |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/setupTests.ts | Adds jest-dom test setup for the plugin package. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/routes.ts | Defines route refs for the plugin’s root and db-clients sub-page. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/plugin.tsx | Implements the plugin page and sub-page (tab) using Backstage frontend blueprints. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/plugin.test.ts | Basic sanity test ensuring the plugin export exists. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/index.ts | Exposes the plugin as the package default export for discovery/loading. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/i18n/index.ts | Adds translation ref and default message(s) for user-facing text. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/src/db-clients/feature/DbClientsSection.tsx | Placeholder “Database Clients” section rendering translated description text. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/README.md | Documents the plugin purpose and installation/discovery options. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/package.json | Defines the plugin package metadata, deps, and Backstage role/pluginId. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/dev/index.tsx | Adds a minimal dev app harness to run the plugin in isolation. |
| src/devops-dashboard-backstage-app/plugins/devops-dashboard/.eslintrc.js | Enables standard Backstage CLI ESLint config for the plugin package. |
| src/devops-dashboard-backstage-app/packages/app/public/index.html | Reformat-only change to HTML doctype casing (Prettier). |
| src/devops-dashboard-backstage-app/packages/app/package.json | Adds the new plugin as a workspace dependency so discovery loads it. |
| src/devops-dashboard-backstage-app/package.json | Bumps Prettier dependency to v3. |
| src/devops-dashboard-backstage-app/docs/backstage-intro.md | Adds an intro document explaining Backstage concepts and this plugin’s structure. |
| src/devops-dashboard-backstage-app/app-config.yaml | Updates the app title to “DevOps Dashboard Backstage App”. |
Review details
Suppressed comments (1)
src/devops-dashboard-backstage-app/docs/backstage-intro.md:62
- The Extension Tree diagram includes
api: config/api: graphql, but those API extensions aren’t part of the plugin yet (the current plugin exports only the page + db-clients sub-page). The diagram should match the current milestone to avoid confusion.
db["sub-page: db-clients<br/><i>Database Clients tab</i>"]
page["page:devops-dashboard<br/><i>the dashboard page</i>"]
api1["api: config"]
api2["api: graphql"]
end
- Files reviewed: 16/17 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+33
to
+37
| export const devopsDashboardPlugin = createFrontendPlugin({ | ||
| pluginId: 'devops-dashboard', | ||
| extensions: [homePage, dbClientsSubPage, configApi, graphQLApi], | ||
| routes: { root: rootRouteRef, dbClients: dbClientsRouteRef }, | ||
| }); |
|
|
||
| Each extension declares its accepted config via a schema (Zod), defaults included. Integrators tune it in `app-config.yaml`. Provided config replaces, never merges. | ||
|
|
||
| The contract — the plugin declares its config shape in [`config.d.ts`](../plugins/devops-dashboard/config.d.ts) (`@visibility frontend` makes a key readable in the browser): |
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.
Jira: https://curity.atlassian.net/browse/IS-11630
🎯 Purpose & Context
Creates the
devops-dashboardfrontend plugin: a DevOps Dashboard sidebar entry, its page, and a Database Clients tab. The tab shows a placeholder description; the live table arrives in the follow-up GraphQL PR. This PR fixes the plugin's structure and layout (subdomain × layer, as in our other ui-kit apps) so later PRs only add files. Also bumps prettier to v3 to match editor format-on-save; those changes are reformat-only.📐 Architecture & Data Flow
The app never registers the plugin in code:
app.packages: allinapp-config.yamlenables package discovery, which scanspackages/app/package.jsondependencies and loads each Backstage package through its default export. That is why this PR adds the plugin as an app dependency.🎨 Visual & Behavioral Changes
🧪 How to Test & Review
git checkout feature/dev/IS-11630-devops-dashboard-pagesyarn install && yarn start, then open http://localhost:3000 (guest sign-in — Curity is not needed yet)