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

feat(ui): CheckpointsTable emits grid fragment + locale sub-line

Browse Source
This commit is contained in:
hsiegeln
2026-04-23 17:03:31 +02:00
parent 77f5c82dfe
commit 177673ba62
1 changed files with 88 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
ui/src/pages/AppsTab/AppDeploymentPage/CheckpointsTable.tsx
View File

@@ -38,91 +38,96 @@ export function CheckpointsTable({
const hidden = checkpoints.length - visible.length; const hidden = checkpoints.length - visible.length;
return ( return (
<div className={styles.checkpointsSection}> <>
<button <span className={styles.configLabel}>Checkpoints</span>
type="button" <div className={styles.checkpointsTriggerCell}>
className={styles.checkpointsHeader} <button
onClick={() => setOpen((v) => !v)} type="button"
aria-expanded={open} className={styles.checkpointsTrigger}
> onClick={() => setOpen((v) => !v)}
<span className={styles.checkpointsChevron}>{open ? '\u25BE' : '\u25B8'}</span> aria-expanded={open}
<span>Checkpoints</span> >
{' '} <span className={styles.checkpointsChevron}>{open ? '\u25BE' : '\u25B8'}</span>
<span className={styles.checkpointsCount}>({checkpoints.length})</span> {open ? 'Collapse' : 'Expand'} ({checkpoints.length})
</button> </button>
</div>
{open && ( {open && (
<div className={styles.checkpointsTable}> <div className={styles.checkpointsTableFullRow}>
<table> <div className={styles.checkpointsTable}>
<thead> <table>
<tr> <thead>
<th>Version</th> <tr>
<th>JAR</th> <th>Version</th>
<th>Deployed by</th> <th>JAR</th>
<th>Deployed</th> <th>Deployed by</th>
<th>Strategy</th> <th>Deployed</th>
<th>Outcome</th> <th>Strategy</th>
<th aria-label="open"></th> <th>Outcome</th>
</tr> <th aria-label="open"></th>
</thead> </tr>
<tbody> </thead>
{visible.map((d) => { <tbody>
const v = versionMap.get(d.appVersionId); {visible.map((d) => {
const archived = !v; const v = versionMap.get(d.appVersionId);
const strategyLabel = const archived = !v;
d.deploymentStrategy === 'BLUE_GREEN' ? 'blue/green' : 'rolling'; const strategyLabel =
return ( d.deploymentStrategy === 'BLUE_GREEN' ? 'blue/green' : 'rolling';
<tr return (
key={d.id} <tr
className={archived ? styles.checkpointArchived : undefined} key={d.id}
onClick={() => onSelect(d.id)} className={archived ? styles.checkpointArchived : undefined}
> onClick={() => onSelect(d.id)}
<td> >
<Badge label={v ? `v${v.version}` : '?'} color="auto" /> <td>
</td> <Badge label={v ? `v${v.version}` : '?'} color="auto" />
<td className={styles.jarCell}> </td>
{v ? ( <td className={styles.jarCell}>
<span className={styles.jarName}>{v.jarFilename}</span> {v ? (
) : ( <span className={styles.jarName}>{v.jarFilename}</span>
<> ) : (
<span className={styles.jarStrike}>JAR pruned</span> <>
<div className={styles.archivedHint}>archived — JAR pruned</div> <span className={styles.jarStrike}>JAR pruned</span>
</> <div className={styles.archivedHint}>archived — JAR pruned</div>
)} </>
</td> )}
<td> </td>
{d.createdBy ?? <span className={styles.muted}>—</span>} <td>
</td> {d.createdBy ?? <span className={styles.muted}>—</span>}
<td> </td>
{d.deployedAt && timeAgo(d.deployedAt)} <td>
<div className={styles.isoSubline}>{d.deployedAt}</div> {d.deployedAt && timeAgo(d.deployedAt)}
</td> <div className={styles.isoSubline}>
<td> {d.deployedAt && new Date(d.deployedAt).toLocaleString()}
<span className={styles.strategyPill}>{strategyLabel}</span> </div>
</td> </td>
<td> <td>
<span <span className={styles.strategyPill}>{strategyLabel}</span>
className={`${styles.outcomePill} ${styles[`outcome-${d.status}` as keyof typeof styles] || ''}`} </td>
> <td>
{d.status} <span
</span> className={`${styles.outcomePill} ${styles[`outcome-${d.status}` as keyof typeof styles] || ''}`}
</td> >
<td className={styles.chevron}>›</td> {d.status}
</tr> </span>
); </td>
})} <td className={styles.chevron}>›</td>
</tbody> </tr>
</table> );
{hidden > 0 && !expanded && ( })}
<button </tbody>
type="button" </table>
className={styles.showOlderBtn} {hidden > 0 && !expanded && (
onClick={() => setExpanded(true)} <button
> type="button"
Show older ({hidden}) — archived, postmortem only className={styles.showOlderBtn}
</button> onClick={() => setExpanded(true)}
)} >
Show older ({hidden}) — archived, postmortem only
</button>
)}
</div>
</div> </div>
)} )}
</div> </>
); );
} }