feat: move app overview to dashboard #3008
Conversation
Elessar1802
requested review from
vikramdevtron and
vivek-devtron
as code owners
|
Some linked issues are invalid. Please update the issue links:\nIssue # in is not found or invalid (HTTP }404).\n |
github-actions
bot
added
the
PR:Issue-verification-failed
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Application Management Overview dashboard that consolidates key metrics and insights about applications, workflows, builds, and deployments. The feature provides at-a-glance summaries, workflow statistics, DORA metrics visualization, and pipeline trigger insights.
Key Changes:
- Added comprehensive overview dashboard with multiple metric sections including projects, applications, environments, workflow statistics, DORA metrics, and build/deployment analytics
- Implemented interactive charts and visualizations for tracking build/deployment triggers, average build times, and pipeline insights
- Integrated new routing for the overview page into the application navigation structure
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/common/navigation/NavigationRoutes.tsx | Added route configuration for the new Application Management Overview page |
| src/Pages-Devtron-2.0/ApplicationManagement/index.ts | Exported ApplicationManagementOverview component for use in routing |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/types.ts | Defined TypeScript interfaces and types for all overview components including metrics, DORA metrics, and pipeline insights |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/utils.ts | Implemented utility functions for formatting metric values, parsing time units, and processing activity trends |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/styles.scss | Added CSS styles for grid layouts and spacing for overview components |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/services.ts | Created React Query hooks for fetching glance metrics, workflow overview, DORA metrics, and pipeline insights data |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/index.ts | Exported Overview component as module entry point |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/constants.ts | Defined configuration objects for metrics cards and default time window settings |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/WorkflowOverview.tsx | Implemented workflow overview section displaying build pipelines, deployment pipelines, and GitOps compliance metrics |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/OverviewPageHeader.tsx | Created page header component with breadcrumb navigation |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/Overview.tsx | Main overview page component that orchestrates all dashboard sections |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/Overview.components.tsx | Shared UI components including metric cards, loading states, empty states, and chart elements |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/Glance.tsx | Implemented "At a Glance" section showing projects, applications, and environments count |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/utils.ts | Utility function for determining badge variants based on DORA metric trends |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/types.ts | Type definitions specific to build and deployment metrics components |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/tooltipUtils.tsx | Implemented custom tooltip content generators for various chart types |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/index.ts | Exported BuildDeploymentMetrics component |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/constants.ts | Defined DORA metrics labels, colors, tooltip descriptions, and configuration values |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/TriggerBuildTimeChart.tsx | Interactive chart component for visualizing build/deployment triggers and average build times |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/PipelineTriggerInsights.tsx | Component showing most and least triggered pipelines with pagination and sorting |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/DoraMetrics.tsx | Comprehensive DORA metrics dashboard with pie charts showing performance level distribution |
| src/Pages-Devtron-2.0/ApplicationManagement/Overview/BuildDeploymentMetrics/BuildDeploymentMetrics.tsx | Container component organizing DORA metrics, trigger charts, and pipeline insights |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /** | ||
| * Indicates if a negative trend value is considered a positive factor | ||
| * @default false | ||
| */ |
There was a problem hiding this comment.
The JSDoc comment mentions "Indicates if a negative trend value is considered a positive factor" with a default value, but this property is not present in the DoraMetricsChartCardProps interface. This documentation appears to be orphaned or intended for a removed property.
| /** | |
| * Indicates if a negative trend value is considered a positive factor | |
| * @default false | |
| */ |
| const renderTotalBuildDeploymentChart = () => ( | ||
| <div className="p-16 h-300"> | ||
| <Chart | ||
| id={`${selectedChartTab}Chart"`} |
There was a problem hiding this comment.
Extra closing quote in the chart ID string. Should be ${selectedChartTab}Chart instead of ${selectedChartTab}Chart".
| id={`${selectedChartTab}Chart"`} | |
| id={`${selectedChartTab}Chart`} |
| [PerformanceLevel.ELITE]: 'Mean lead time is less than 1 day', | ||
| [PerformanceLevel.HIGH]: 'Mean lead time is between 1 day & 1 week', | ||
| [PerformanceLevel.MEDIUM]: 'Mean lead time is between 1 week & 1 month', | ||
| [PerformanceLevel.LOW]: 'Mean lead time is between 1 day & 6 months', |
There was a problem hiding this comment.
Inconsistency in the LOW performance level description. The message says "between 1 day & 6 months" but based on the pattern established by other metrics, this should likely be "between 1 month & 6 months" to be consistent with the range definitions.
| [PerformanceLevel.LOW]: 'Mean lead time is between 1 day & 6 months', | |
| [PerformanceLevel.LOW]: 'Mean lead time is between 1 month & 6 months', |
| if (hours > 24) { | ||
| const days = Math.floor(hours / 24) | ||
| const remainingHours = hours % 24 | ||
| return `${days}d ${remainingHours ? `${remainingHours}h` : ''}`.trim() | ||
| } |
There was a problem hiding this comment.
The condition if (hours > 24) means that exactly 24 hours will be displayed as "24h" rather than "1d". Consider changing this to if (hours >= 24) for consistency, so that 24 hours is displayed as "1d".
| return ( | ||
| <SectionEmptyState | ||
| title="DORA Metrics not available" | ||
| subtitle="No production deployments occured in the selected duration" |
There was a problem hiding this comment.
Typo in comment: "occured" should be "occurred".
| subtitle="No production deployments occured in the selected duration" | |
| subtitle="No production deployments occurred in the selected duration" |
| } | ||
|
|
||
| return ( | ||
| // Custom logic for height according to number of pipeliens, update when barThickness is added in chart |
There was a problem hiding this comment.
Typo in comment: "pipeliens" should be "pipelines".
| // Custom logic for height according to number of pipeliens, update when barThickness is added in chart | |
| // Custom logic for height according to number of pipelines, update when barThickness is added in chart |
| const { tooltip } = args | ||
| const { dataPoints } = tooltip | ||
| const { parsed, label, dataIndex, dataset } = dataPoints[0] | ||
| const performaceLevel = getPerformanceLevelByLabel(label) |
There was a problem hiding this comment.
Typo in variable name: "performaceLevel" should be "performanceLevel".
| <span> | ||
| {percentage}% {`(${parsed})`} deployment pipelines | ||
| </span> | ||
| <span>{DORA_METRIC_TOOLTIP_FOOTERS[metricKey][performaceLevel]}</span> |
There was a problem hiding this comment.
Typo in variable name: "performaceLevel" should be "performanceLevel".
Description
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
Fixes # (issue)
Type of change
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Checklist: