47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
|
import styles from './DeploymentProgress.module.css';
|
||
|
|
|
||
|
|
const STAGES = [
|
||
|
|
{ key: 'PRE_FLIGHT', label: 'Pre-flight' },
|
||
|
|
{ key: 'PULL_IMAGE', label: 'Pull' },
|
||
|
|
{ key: 'CREATE_NETWORK', label: 'Network' },
|
||
|
|
{ key: 'START_REPLICAS', label: 'Start' },
|
||
|
|
{ key: 'HEALTH_CHECK', label: 'Health' },
|
||
|
|
{ key: 'SWAP_TRAFFIC', label: 'Swap' },
|
||
|
|
{ key: 'COMPLETE', label: 'Done' },
|
||
|
|
];
|
||
|
|
|
||
|
|
interface DeploymentProgressProps {
|
||
|
|
currentStage: string | null;
|
||
|
|
failed?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function DeploymentProgress({ currentStage, failed }: DeploymentProgressProps) {
|
||
|
|
if (!currentStage) return null;
|
||
|
|
|
||
|
|
const currentIndex = STAGES.findIndex((s) => s.key === currentStage);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.container}>
|
||
|
|
{STAGES.map((stage, i) => {
|
||
|
|
const isCompleted = i < currentIndex;
|
||
|
|
const isActive = i === currentIndex && !failed;
|
||
|
|
const isFailed = i === currentIndex && failed;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div key={stage.key} className={styles.step}>
|
||
|
|
{i > 0 && (
|
||
|
|
<div className={`${styles.line} ${isCompleted || isActive || isFailed ? styles.lineCompleted : ''}`} />
|
||
|
|
)}
|
||
|
|
<div className={styles.stepColumn}>
|
||
|
|
<div className={`${styles.dot} ${isCompleted ? styles.dotCompleted : ''} ${isActive ? styles.dotActive : ''} ${isFailed ? styles.dotFailed : ''}`} />
|
||
|
|
<span className={`${styles.label} ${isActive ? styles.labelActive : ''} ${isFailed ? styles.labelFailed : ''}`}>
|
||
|
|
{stage.label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|