cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

ui(deploy): surface deployment failure reason in StatusCard

Browse Source 
DeploymentExecutor already persists errorMessage on FAILED transitions
but the UI never rendered it — users saw "FAILED" with no explanation.
Add a bordered error block above the action row when a deployment is
FAILED, preserving whitespace and wrapping long Docker error bodies
(e.g. 409 conflict JSON).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-23 00:49:29 +02:00
parent e5eb48b0fa
commit 9c54313ff1
2 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
View File

@@ -252,6 +252,26 @@
.statusCardGrid { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; font-size: 13px; } .statusCardGrid { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; font-size: 13px; }
.statusCardActions { display: flex; gap: 8px; } .statusCardActions { display: flex; gap: 8px; }
.statusCardError {
padding: 10px 12px;
background: var(--error-bg);
border: 1px solid var(--error-border);
border-radius: 6px;
color: var(--text-primary);
font-size: 13px;
font-family: var(--font-mono);
white-space: pre-wrap;
word-break: break-word;
}
.statusCardErrorLabel {
font-family: var(--font-sans);
color: var(--error);
font-weight: 600;
display: block;
margin-bottom: 4px;
}
/* DeploymentTab */ /* DeploymentTab */
.deploymentTab { .deploymentTab {
display: flex; display: flex;

7
ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/StatusCard.tsx
View File

@@ -50,6 +50,13 @@ export function StatusCard({ deployment, version, externalUrl, onStop, onStart }
<span>Deployed</span><span>{deployment.deployedAt ? timeAgo(deployment.deployedAt) : '—'}</span> <span>Deployed</span><span>{deployment.deployedAt ? timeAgo(deployment.deployedAt) : '—'}</span>
</div> </div>
{deployment.status === 'FAILED' && deployment.errorMessage && (
<div className={styles.statusCardError}>
<span className={styles.statusCardErrorLabel}>Failure reason</span>
{deployment.errorMessage}
</div>
)}
<div className={styles.statusCardActions}> <div className={styles.statusCardActions}>
{(deployment.status === 'RUNNING' || deployment.status === 'STARTING' || deployment.status === 'DEGRADED') {(deployment.status === 'RUNNING' || deployment.status === 'STARTING' || deployment.status === 'DEGRADED')
&& <Button size="sm" variant="danger" onClick={onStop}>Stop</Button>} && <Button size="sm" variant="danger" onClick={onStop}>Stop</Button>}