61 lines
2.6 KiB
TypeScript
61 lines
2.6 KiB
TypeScript
|
import { Badge, StatusDot, MonoText, Button } 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;
|
||
|
|
|
||
|
|
function formatBytes(bytes: number): string {
|
||
|
|
if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB`;
|
||
|
|
if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||
|
|
return `${bytes} B`;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
deployment: Deployment;
|
||
|
|
version: AppVersion | null;
|
||
|
|
externalUrl: string;
|
||
|
|
onStop: () => void;
|
||
|
|
onStart: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StatusCard({ deployment, version, externalUrl, onStop, onStart }: 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>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>
|
||
|
|
|
||
|
|
<div className={styles.statusCardActions}>
|
||
|
|
{(deployment.status === 'RUNNING' || deployment.status === 'STARTING' || deployment.status === 'DEGRADED')
|
||
|
|
&& <Button size="sm" variant="danger" onClick={onStop}>Stop</Button>}
|
||
|
|
{deployment.status === 'STOPPED' && <Button size="sm" variant="secondary" onClick={onStart}>Start</Button>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|