Skip to content

Comments

feat(service-overview): add new ui#2412

Open
RemiBonnet wants to merge 14 commits intonew-navigationfrom
feat/new-nav/service-overview
Open

feat(service-overview): add new ui#2412
RemiBonnet wants to merge 14 commits intonew-navigationfrom
feat/new-nav/service-overview

Conversation

@RemiBonnet
Copy link
Member

@RemiBonnet RemiBonnet commented Feb 23, 2026

Summary

Add new page Service Overview

Missing two points:

  • I kept the ServiceActionToolbar for now
  • We don't have RunningStatus for the Cluster

Screenshots / Recordings

https://www.loom.com/share/57f1ff51d3a24dc28b9e332cb519fad7

Testing

  • Changes tested locally in the relevant Console's pages and Storybooks
  • yarn test or yarn test -u (if you need to regenerate snapshots)
  • yarn format
  • yarn lint

PR Checklist

  • I followed naming, styling, and TypeScript rules (see .cursor/rules)
  • I performed a self-review (diff inspected, dead code removed)
  • I titled the PR using Conventional Commits with a scope when possible (e.g. feat(service): add new Terraform service) - required for semantic-release
  • I only kept necessary comments, written in English (watch for useless AI comments)
  • I involved a designer to validate UI changes if I am not a designer
  • I covered new business logic with tests (unit)
  • I confirmed CI is green (Codecov red can be accepted)
  • I reviewed and executed locally any AI-assisted code

Note

Medium Risk
Touches routing/navigation and migrates several service UI components from react-router-dom to @tanstack/react-router, which can break deep links or param handling if miswired. The rest is largely UI refactors and component reshaping with updated tests/snapshots.

Overview
Adds a new service-level route hierarchy under /organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId, including an index redirect to a new overview page, and wires it into the generated routeTree plus a new service navigation context with dedicated tabs.

Introduces the new ServiceOverview UI (exported from @qovery/domains/services/feature) with optional observability callout, Terraform resources panel, and metrics WebSocket listening; updates service list links and several service components to use @tanstack/react-router params/navigation.

Refactors Terraform resources/trees and various service widgets to new design tokens/components (EmptyState, InputSearch, table styling), adjusts commit-fetching hooks to support conditional querying, and removes legacy ServiceDetails and PodStatusesCallout (with snapshot/test updates).

Written by Cursor Bugbot for commit e82b3b6. This will update automatically on new commits. Configure here.

@RemiBonnet RemiBonnet added the V5 label Feb 23, 2026
@RemiBonnet
Copy link
Member Author

Qovery Preview

Qovery can create a Preview Environment for this PR.
To trigger its creation, please post a comment with one of the following command.

Command Blueprint environment
/qovery preview 15d69f24-9bc1-4a8d-80fe-d1bb1b2bcd00 New Navigation
/qovery preview {all|UUID1,UUID2,...} To preview multiple environments

This comment has been generated from Qovery AI 🤖.
Below, a word from its wisdom :

Take rest sometimes

…rview, deployment, monitoring, logs, variables, and settings
…servability features and improve UI consistency

- Replaced ServiceOverviewFeature with ServiceOverview and added ObservabilityCallout for enhanced observability integration.
- Introduced MetricsWebSocketListener for real-time metrics updates.
- Updated styling for various components to ensure consistency across the UI.
- Refactored error handling and loading states in TerraformResourcesSection and ResourceDetails components.
- Enhanced user feedback in ResourceTreeList and AutoDeployBadge components with improved class names and visual cues.
@RemiBonnet RemiBonnet force-pushed the feat/new-nav/service-overview branch from 59ed103 to de66ab5 Compare February 24, 2026 17:02
… associated tests

- Deleted the PodStatusesCallout component and its test file to streamline the codebase.
- Removed related snapshot files to ensure no unused artifacts remain.
- Updated ServiceOverview to remove references to PodStatusesCallout, improving clarity and maintainability.
- Updated the margin of the job execution information section in the ServiceInstance component to improve layout and visual consistency.
…from index.ts

- Removed the export statement for PodStatusesCallout to streamline the codebase following its deletion in a previous commit.
@RemiBonnet RemiBonnet marked this pull request as ready for review February 24, 2026 17:32
…ences

- Consolidated route imports in routeTree.gen.ts by removing unnecessary imports and reorganizing existing ones for better clarity.
- Updated ServiceOverview component to eliminate the cluster prop, enhancing its simplicity and focus on relevant data.
- Adjusted ResourceDetails component's table styling for improved visual consistency.
- Adjusted various component snapshots to enhance styling, including updates to table and button classes for better visual consistency.
- Replaced instances of `fa-solid` with `fa-regular` for icon classes to align with design standards.
- Improved search input button accessibility by adding title and aria-label attributes.
- Refactored table components to eliminate unnecessary overflow styles and ensure a more streamlined appearance.
… handling

- Updated routeTree.gen.ts to streamline route imports, adding new routes for better organization and clarity.
- Modified AutoDeployBadge and NeedRedeployFlag components to improve parameter handling, ensuring consistency in serviceId usage.
- Adjusted PodDetails component styling for improved layout and visual consistency.
- Enhanced InstanceMetricsTable and TerraformVariablesLoadingState components for better user experience and accessibility.
- Adjusted the class names in the instance-metrics snapshot to enhance the table layout and visual consistency.
- Ensured proper border and rounding styles for table rows to align with design standards.
- Modified table snapshot styles across various components to replace border styles with divide classes for enhanced layout.
- Ensured consistent use of thead elements without unnecessary class attributes, aligning with design standards.
…up unused queries

- Added environment prop to ApplicationSettingsResources for better context handling.
- Removed the useEnvironment hook and its associated query to streamline the component.
- Updated PageSettingsResources to utilize the environment data directly, enhancing data flow and component clarity.
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

@codecov
Copy link

codecov bot commented Feb 24, 2026

Codecov Report

❌ Patch coverage is 48.67925% with 136 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (new-navigation@cd3fed9). Learn more about missing BASE report.

Files with missing lines Patch % Lines
...service-overview/service-header/service-header.tsx 64.40% 17 Missing and 4 partials ⚠️
...ice-overview/service-instance/service-instance.tsx 60.86% 13 Missing and 5 partials ⚠️
...ervice-last-deployment/service-last-deployment.tsx 48.27% 10 Missing and 5 partials ⚠️
...keda/scaled-object-status/scaled-object-status.tsx 0.00% 14 Missing ⚠️
.../util-services/src/lib/get-service-state-colors.ts 0.00% 10 Missing ⚠️
.../src/lib/last-commit-author/last-commit-author.tsx 0.00% 9 Missing ⚠️
...src/lib/service-overview/observability-callout.tsx 0.00% 9 Missing ⚠️
...e-last-deployed-commit/use-last-deployed-commit.ts 22.22% 0 Missing and 7 partials ⚠️
...ture/src/lib/service-overview/service-overview.tsx 78.78% 2 Missing and 5 partials ⚠️
...re/src/lib/auto-deploy-badge/auto-deploy-badge.tsx 0.00% 6 Missing ⚠️
... and 14 more
Additional details and impacted files
@@                Coverage Diff                @@
##             new-navigation    #2412   +/-   ##
=================================================
  Coverage                  ?   43.80%           
=================================================
  Files                     ?      975           
  Lines                     ?    18917           
  Branches                  ?     5562           
=================================================
  Hits                      ?     8287           
  Misses                    ?     9114           
  Partials                  ?     1516           
Flag Coverage Δ
unittests 43.80% <48.67%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…ew and enhance tests

- Added NeedRedeployFlag component to ServiceOverview for improved service management visibility.
- Updated tests for NeedRedeployFlag to verify serviceId is passed correctly from route parameters.
- Mocked NeedRedeployFlag in ServiceOverview tests to ensure proper rendering and integration.
…prove component rendering

- Refactored the ServiceOverview component to enhance layout and readability by restructuring JSX elements.
- Integrated NeedRedeployFlag more effectively within the component.
- Improved conditional rendering for database metrics and instances, ensuring clearer presentation of service information.
- Updated sections for last deployment and output variables to maintain consistency across different service types.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant