b6e54db6ec
Resources tab: add a hint under the Deploy Strategy dropdown that explains the blue-green vs rolling trade-off (resource peak, failure semantics), switching text based on the current selection. StatusCard: show the active deployment's strategy inline in the info grid so users can tell at a glance which path was taken for a given deployment. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { Badge, StatusDot, MonoText } from '@cameleer/design-system';
|
|
import type { Deployment, AppVersion } from '../../../../api/queries/admin/apps';
|
|
import { timeAgo } from '../../../../utils/format-utils';
|
|
import styles from '../AppDeploymentPage.module.css';
|
|
|
|
const STATUS_COLORS = {
|
|
RUNNING: 'success', STARTING: 'warning', FAILED: 'error',
|
|
STOPPED: 'auto', DEGRADED: 'warning', STOPPING: 'auto',
|
|
} as const;
|
|
|
|
const DEPLOY_STATUS_DOT = {
|
|
RUNNING: 'live', STARTING: 'running', DEGRADED: 'stale',
|
|
STOPPING: 'stale', STOPPED: 'dead', FAILED: 'error',
|
|
} as const;
|
|
|
|
interface Props {
|
|
deployment: Deployment;
|
|
version: AppVersion | null;
|
|
externalUrl: string;
|
|
}
|
|
|
|
export function StatusCard({ deployment, version, externalUrl }: Props) {
|
|
const running = deployment.replicaStates?.filter((r) => r.status === 'RUNNING').length ?? 0;
|
|
const total = deployment.replicaStates?.length ?? 0;
|
|
|
|
return (
|
|
<div className={styles.statusCard}>
|
|
<div className={styles.statusCardHeader}>
|
|
<StatusDot variant={DEPLOY_STATUS_DOT[deployment.status as keyof typeof DEPLOY_STATUS_DOT] ?? 'dead'} />
|
|
<Badge label={deployment.status} color={STATUS_COLORS[deployment.status as keyof typeof STATUS_COLORS] ?? 'auto'} />
|
|
{version && <Badge label={`v${version.version}`} color="auto" />}
|
|
</div>
|
|
|
|
<div className={styles.statusCardGrid}>
|
|
{version && <><span>JAR</span><MonoText size="sm">{version.jarFilename}</MonoText></>}
|
|
{version && <><span>Checksum</span><MonoText size="xs">{version.jarChecksum.substring(0, 12)}</MonoText></>}
|
|
<span>Replicas</span><span>{running}/{total}</span>
|
|
<span>Strategy</span><span>{deployment.deploymentStrategy ?? '—'}</span>
|
|
<span>URL</span>
|
|
{deployment.status === 'RUNNING'
|
|
? <a href={externalUrl} target="_blank" rel="noreferrer"><MonoText size="sm">{externalUrl}</MonoText></a>
|
|
: <MonoText size="sm">{externalUrl}</MonoText>}
|
|
<span>Deployed</span><span>{deployment.deployedAt ? timeAgo(deployment.deployedAt) : '—'}</span>
|
|
</div>
|
|
|
|
{deployment.status === 'FAILED' && deployment.errorMessage && (
|
|
<div className={styles.statusCardError}>
|
|
<span className={styles.statusCardErrorLabel}>Failure reason</span>
|
|
{deployment.errorMessage}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|