feat: add Delivery Insights (DORA metrics) UI at namespace, project, and component levels - #724
Draft
LakshanSS wants to merge 9 commits into
Draft
feat: add Delivery Insights (DORA metrics) UI at namespace, project, and component levels#724LakshanSS wants to merge 9 commits into
LakshanSS wants to merge 9 commits into
Conversation
…and component levels Adds an Insights tab to the domain (Namespace), system (Project), and component entity pages, backed by the observer's new DORA read API (openchoreo#3668). The tab hosts two inner views per the Insights design: - Delivery Insights: four DORA KPI tiles (value, DORA classification, delta vs previous window, sparkline), trend charts with range (7d/30d/90d/12mo) and granularity (daily/weekly/monthly) controls, an environment filter, a one-level-down breakdown table (namespace: by project, project: by component, component: by environment) with row drill-down into the child's Insights tab (environment rows apply the env filter instead), per-environment metric cards, and a how-it-is-calculated footnote. - Cost Insights: embeds the existing FinOps cost analysis at project level (drill-down preserved under /insights/cost); other levels point to the project pages until cost lands there. Supporting changes: getDoraMetrics/getDoraDeployments on the observability API client, and namespace-level observer URL resolution (resolve-urls without environmentName resolves through the namespace's environments) for the cross-environment scopes. Signed-off-by: LakshanSS <lakshan230897@gmail.com>
The sparkline is absolutely positioned in the tile's bottom-right corner, so long footer text (e.g. the lead-time coverage line) flowed underneath it. Reserve the sparkline's width as footer padding and let the text wrap. Signed-off-by: LakshanSS <lakshan230897@gmail.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughAdds DORA Delivery Insights across catalog entity pages. The change includes typed observability APIs, namespace-level URL resolution, DORA data hooks, KPI and trend visualizations, breakdowns, environment metrics, filtering, drill-downs, and project-level Cost Insights. ChangesDORA data and URL resolution
Insights page
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant CatalogEntityPage
participant ObservabilityInsightsPage
participant InsightsContent
participant useDoraInsights
participant ObservabilityApi
participant ObservabilityUrlResolver
CatalogEntityPage->>ObservabilityInsightsPage: render /insights
ObservabilityInsightsPage->>InsightsContent: provide DORA scope
InsightsContent->>useDoraInsights: request metrics
useDoraInsights->>ObservabilityApi: getDoraMetrics
ObservabilityApi->>ObservabilityUrlResolver: resolve namespace/environment URLs
ObservabilityUrlResolver-->>ObservabilityApi: observer URL
ObservabilityApi-->>useDoraInsights: DoraMetricsResponse
useDoraInsights-->>InsightsContent: metrics and loading state
InsightsContent-->>CatalogEntityPage: render tiles and charts
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
plugins/openchoreo-observability/src/components/Insights/useDoraBreakdown.ts (1)
144-166: 🚀 Performance & Scalability | 🔵 TrivialConsider the scaling limits of per-child metric fan-out.
For each breakdown level, this hook issues one
getDoraMetricscall per catalog child in parallel, with no limit oncatalogApi.getEntities. In namespaces or projects with a large number of systems or components, this fans out into a large burst of concurrent observability requests on every render of the Insights page. Consider capping the number of children fetched per view, or requesting a batch/aggregate DORA endpoint from the observer API for the breakdown use case once available.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/openchoreo-observability/src/components/Insights/useDoraBreakdown.ts` around lines 144 - 166, The useDoraBreakdown flow currently fans out one getDoraMetrics request per child without a concurrency or result limit. Update fetchSummary and the Promise.all processing for children and envChildren to enforce an appropriate per-view cap or bounded concurrency, preserving the existing row fallback behavior for failed requests; use a batch/aggregate observability endpoint instead if one is available.plugins/openchoreo-observability/src/components/Insights/DoraTrendChart.tsx (1)
110-128: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd a
Legendfor multi-series charts.The lead-time chart passes three series (
p50Ms,p75Ms,p95Ms) with distinct colors, but noLegendis rendered. A user cannot map a line color to a percentile without hovering. RenderLegendwhenseries.length > 1.♻️ Proposed change
-import { - Bar, - BarChart, - CartesianGrid, - Line, - LineChart, - ResponsiveContainer, - Tooltip, - XAxis, - YAxis, -} from 'recharts'; +import { + Bar, + BarChart, + CartesianGrid, + Legend, + Line, + LineChart, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from 'recharts';<Tooltip formatter={renderTooltipValue} /> + {series.length > 1 && <Legend />} {series.map(s => ( <Line🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/openchoreo-observability/src/components/Insights/DoraTrendChart.tsx` around lines 110 - 128, Add a Recharts Legend to the LineChart rendering in DoraTrendChart, rendering it only when series.length is greater than 1 so multi-series lines expose their labels and colors while single-series charts remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/openchoreo-client-node/src/observability-url-resolver.ts`:
- Around line 148-156: Update resolveForNamespace so namespace cache entries are
partitioned by the caller’s authorization identity rather than using only
`namespaceName` in `cacheKey`; derive the key from the authenticated principal
represented by token, or validate authorization before returning a cached
result. Preserve caching for the same principal and add coverage with two users
having different namespace access to ensure one user cannot receive the other’s
cached observability URL.
In
`@plugins/openchoreo-observability/src/components/Insights/InsightsContent.tsx`:
- Around line 67-86: Update useDoraBreakdown so every generated
project/component child scope preserves the parent scope’s environment value
when one is set, keeping the breakdown table consistent with effectiveScope and
the KPI/chart data. Retain existing namespace, project, and child-name scope
construction for unfiltered requests.
- Around line 173-185: Update the Deployment Frequency value formatting in the
DoraMetricTile usage to round frequency.perDay to two decimal places before
appending “/day”, while preserving the existing fallback when frequency is
unavailable.
In
`@plugins/openchoreo-observability/src/components/Insights/useDoraBreakdown.ts`:
- Around line 50-52: Update the child scope construction in useDoraBreakdown to
copy scope.environment for domain- and system-level breakdown rows, preserving
the inherited environment filter. Include scope.environment in scopeKey so the
breakdown effect recalculates when only the environment changes.
---
Nitpick comments:
In `@plugins/openchoreo-observability/src/components/Insights/DoraTrendChart.tsx`:
- Around line 110-128: Add a Recharts Legend to the LineChart rendering in
DoraTrendChart, rendering it only when series.length is greater than 1 so
multi-series lines expose their labels and colors while single-series charts
remain unchanged.
In
`@plugins/openchoreo-observability/src/components/Insights/useDoraBreakdown.ts`:
- Around line 144-166: The useDoraBreakdown flow currently fans out one
getDoraMetrics request per child without a concurrency or result limit. Update
fetchSummary and the Promise.all processing for children and envChildren to
enforce an appropriate per-view cap or bounded concurrency, preserving the
existing row fallback behavior for failed requests; use a batch/aggregate
observability endpoint instead if one is available.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1a373ae8-b42d-4553-99d1-b3a40e5e526c
📒 Files selected for processing (20)
.changeset/delivery-insights-dora-ui.mdpackages/openchoreo-client-node/src/observability-url-resolver.tspackages/portal-app/src/components/catalog/EntityPage.tsxplugins/openchoreo-observability-backend/src/router.tsplugins/openchoreo-observability-backend/src/services/ObservabilityService.tsplugins/openchoreo-observability/src/api/ObservabilityApi.tsplugins/openchoreo-observability/src/api/ObserverUrlCache.tsplugins/openchoreo-observability/src/components/Insights/DoraBreakdownTable.tsxplugins/openchoreo-observability/src/components/Insights/DoraEnvironmentCards.tsxplugins/openchoreo-observability/src/components/Insights/DoraMetricTile.tsxplugins/openchoreo-observability/src/components/Insights/DoraTrendChart.tsxplugins/openchoreo-observability/src/components/Insights/InsightsContent.tsxplugins/openchoreo-observability/src/components/Insights/ObservabilityInsightsPage.tsxplugins/openchoreo-observability/src/components/Insights/index.tsplugins/openchoreo-observability/src/components/Insights/useDoraBreakdown.tsplugins/openchoreo-observability/src/components/Insights/useDoraInsights.tsplugins/openchoreo-observability/src/components/Insights/utils.tsplugins/openchoreo-observability/src/index.tsplugins/openchoreo-observability/src/plugin.tsplugins/openchoreo-observability/src/types.ts
Signed-off-by: LakshanSS <lakshan230897@gmail.com>
The test asserted the pre-namespace-resolution error message
('namespaceName and environmentName are required'), but environmentName
has been optional since resolve-urls gained namespace-level resolution.
Also adds coverage for the omitted-environmentName success path.
Signed-off-by: LakshanSS <lakshan230897@gmail.com>
resolveForNamespace cached results keyed only by namespaceName, so a namespace result resolved for one user could be served to a different user who cannot access that namespace or its environments. Scope the cache key to the caller's token, matching per-request authorization. Signed-off-by: LakshanSS <lakshan230897@gmail.com>
InsightsContent's environment filter narrowed the KPI tiles/charts but not the project/component breakdown table: useDoraBreakdown rebuilt each child scope without scope.environment, so the table always showed all environments. Also include environment in scopeKey so the breakdown effect refires when only the environment filter changes. Signed-off-by: LakshanSS <lakshan230897@gmail.com>
An unrounded rate (e.g. 1.1428571428571428) printed the raw float in the KPI tile instead of a formatted value like 1.14/day. Signed-off-by: LakshanSS <lakshan230897@gmail.com>
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
Resolves conflicts with the cost insights view (openchoreo#723): both PRs independently added new types/methods to ObservabilityApi.ts and types.ts, kept both sides. Signed-off-by: LakshanSS <lakshan230897@gmail.com>
Contributor
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
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
1 participant
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.
Summary
POST /api/v1alpha1/insights/dora/query), tracked in openchoreo/openchoreo#4248 (not yet merged — see note below).getDoraMetrics/getDoraDeploymentsadded to the observability API client; namespace-level observer URL resolution (resolveForNamespace, resolves through the namespace's environments when noenvironmentNameis given).upstream/maininto this branch to keep it up to date (no conflicts).Status
Draft — this depends on openchoreo/openchoreo#4248, which is intentionally held open until the full Delivery Insights feature (events pipeline, WorkloadSource, MCP tool) lands. Opening this now for visibility/early review; not ready to merge until the backend PR does.
Test plan
laki-obsobserver/controller branch: real (non-seeded) DORA data from an actual deployment success + a deliberate failure shows up correctly in the Insights tab's charts and KPI tiles.oc-delivery-insights/local-demo) across namespace/project/component levels and the environment filter/drill-down.Summary by CodeRabbit
New Features
Documentation