Skip to content

feat(organization-overview): improve cluster summary#2627

Merged
RemiBonnet merged 5 commits intonew-navigationfrom
feat/new-nav/orga-overview-clusters
Apr 24, 2026
Merged

feat(organization-overview): improve cluster summary#2627
RemiBonnet merged 5 commits intonew-navigationfrom
feat/new-nav/orga-overview-clusters

Conversation

@RemiBonnet
Copy link
Copy Markdown
Member

@RemiBonnet RemiBonnet commented Apr 23, 2026

Summary

Add new cluster section for the organization overview

Screenshots / Recordings

https://www.loom.com/share/b64e51dad52b4289aebaf5ab7f770d17

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

@RemiBonnet RemiBonnet marked this pull request as ready for review April 23, 2026 14:28
@RemiBonnet RemiBonnet added the V5 label Apr 23, 2026
@RemiBonnet RemiBonnet force-pushed the feat/new-nav/orga-overview-clusters branch from d21e883 to c75189b Compare April 23, 2026 14:49
@TheoGrandin74
Copy link
Copy Markdown
Contributor

Yop @RemiBonnet, some quick feedbacks I've spotted:

  • Having a bit a trouble with very long name, either we need a stricter truncate or just maybe we need to have the tag on a second line. Or just have a way of reducing the big tag like "Qovery managed" "EKS (Karpenter)"
image - Btw we have this same issue on the cluster page... Here I think we can just put the bages in the same position as we have them in the service overview, it should do the trick image - For the hover on the card I don't really like the bg-surface-neutral-subtle, I think the border change can be enough. If we want to accentuate it, we can also change the icon container to bg-surface-[semantic]-component on hover I think it could work

Copy link
Copy Markdown
Contributor

@rmnbrd rmnbrd left a comment

Choose a reason for hiding this comment

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

UI-wise, it looks good to me. But we're adding a lot of extra logic that, imo, should not be on the front-end.

Comment on lines +125 to +137
const [hasRunningStatusTimedOut, setHasRunningStatusTimedOut] = useState(false)
useEffect(() => {
setHasRunningStatusTimedOut(false)
const timeoutId = setTimeout(() => setHasRunningStatusTimedOut(true), RUNNING_STATUS_TIMEOUT_MS)
return () => clearTimeout(timeoutId)
}, [runningStatusScopeKey])

const runningStatusQueries = useClusterRunningStatuses({ clusters })

// Keep the skeleton up until every cluster has reported a running status
// (real payload or explicit 'NotFound'), or the timeout fires as a safety net
const hasAllRunningStatuses = clusters.length === 0 || runningStatusQueries.every((query) => query.data !== undefined)
const isReady = hasAllRunningStatuses || hasRunningStatusTimedOut
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

If I understand this part correctly, it seems like some back-end work could be done to avoid having this workaround on the front-end, right?

Comment on lines +75 to +110
export function getClusterHealthIssues({
cluster,
deploymentStatus,
runningStatus,
hasRunningStatusTimedOut,
}: GetClusterHealthIssuesInput): ClusterHealthIssueKind[] {
const issues: ClusterHealthIssueKind[] = []

const status = deploymentStatus?.status
const isStopped = status === 'STOPPED'
const isDeployed = Boolean(deploymentStatus?.is_deployed)

if (status && FAILED_DEPLOYMENT_STATUSES.has(status)) {
issues.push('deploy-failed')
}

if (isDeployed && !isStopped) {
const isRunningStatusObject = runningStatus && typeof runningStatus === 'object'

if (isRunningStatusObject && runningStatus.computed_status?.global_status === 'ERROR') {
issues.push('running-error')
}

const isStatusUnavailable = runningStatus === 'NotFound' || (hasRunningStatusTimedOut && runningStatus == null)

if (isStatusUnavailable) {
issues.push('status-unavailable')
}
}

if (cluster.deployment_status === 'OUT_OF_DATE' && !isStopped) {
issues.push('update-available')
}

return issues
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

To me, all of this logic should live on the back-end, not on the front-end

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 24, 2026

Codecov Report

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

Files with missing lines Patch % Lines
...tus-indicator/cluster-running-status-indicator.tsx 0.00% 28 Missing ⚠️
...s-modal/cluster-production-health-issues-modal.tsx 0.00% 4 Missing ⚠️
...ry-card/cluster-production-health-summary-card.tsx 94.33% 0 Missing and 3 partials ⚠️
...status-socket/use-cluster-running-status-socket.ts 0.00% 3 Missing ⚠️
Additional details and impacted files
@@                Coverage Diff                @@
##             new-navigation    #2627   +/-   ##
=================================================
  Coverage                  ?   44.68%           
=================================================
  Files                     ?      729           
  Lines                     ?    17800           
  Branches                  ?     5263           
=================================================
  Hits                      ?     7954           
  Misses                    ?     8457           
  Partials                  ?     1389           
Flag Coverage Δ
unittests 44.68% <68.85%> (?)

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.

@RemiBonnet RemiBonnet merged commit de07b78 into new-navigation Apr 24, 2026
11 checks passed
@RemiBonnet RemiBonnet deleted the feat/new-nav/orga-overview-clusters branch April 24, 2026 09:06
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.

3 participants