feat(organization-overview): improve cluster summary#2627
feat(organization-overview): improve cluster summary#2627RemiBonnet merged 5 commits intonew-navigationfrom
Conversation
d21e883 to
c75189b
Compare
|
Yop @RemiBonnet, some quick feedbacks I've spotted:
- 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
- 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
|
rmnbrd
left a comment
There was a problem hiding this comment.
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.
| 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 |
There was a problem hiding this comment.
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?
| 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 | ||
| } |
There was a problem hiding this comment.
To me, all of this logic should live on the back-end, not on the front-end
There was a problem hiding this comment.
Good point, I created a ticket for it https://qovery.atlassian.net/jira/software/c/projects/QOV/boards/55?assignee=712020%3A06ffe3b7-272d-4787-b750-04468533b84b&selectedIssue=QOV-1861
…isplay with tooltip
…nd enhance performance with memoization
…Event and improve accessibility checks
Codecov Report❌ Patch coverage is 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
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|


Summary
Add new cluster section for the organization overview
Screenshots / Recordings
https://www.loom.com/share/b64e51dad52b4289aebaf5ab7f770d17
Testing
yarn testoryarn test -u(if you need to regenerate snapshots)yarn formatyarn lintPR Checklist
.cursor/rules)feat(service): add new Terraform service) - required for semantic-release