91 lines
4.2 KiB
TypeScript
91 lines
4.2 KiB
TypeScript
// UpdateStrategyCard.tsx — 更新策略 + 历史版本/进度 卡片 (Q21 提取)
|
|
// 受控展示组件，接收 state 片段 + setter 回调。
|
|
import { RefreshCw, Clock } from 'lucide-react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import i18n from '@/i18n';
|
|
|
|
interface UpdateStrategyCardProps {
|
|
strategyType: 'RollingUpdate' | 'Recreate';
|
|
onStrategyTypeChange: (t: 'RollingUpdate' | 'Recreate') => void;
|
|
maxSurge: string;
|
|
onMaxSurgeChange: (v: string) => void;
|
|
maxUnavailable: string;
|
|
onMaxUnavailableChange: (v: string) => void;
|
|
revisionHistoryLimit: string;
|
|
onRevisionHistoryLimitChange: (v: string) => void;
|
|
progressDeadlineSeconds: string;
|
|
onProgressDeadlineSecondsChange: (v: string) => void;
|
|
}
|
|
|
|
export function UpdateStrategyCard({
|
|
strategyType, onStrategyTypeChange,
|
|
maxSurge, onMaxSurgeChange,
|
|
maxUnavailable, onMaxUnavailableChange,
|
|
revisionHistoryLimit, onRevisionHistoryLimitChange,
|
|
progressDeadlineSeconds, onProgressDeadlineSecondsChange,
|
|
}: UpdateStrategyCardProps) {
|
|
return (
|
|
<>
|
|
{/* 更新策略 */}
|
|
<Card className="dg-card">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
|
|
<RefreshCw className="h-4 w-4 dg-text-blue" />{i18n.t('k8s.editAdvanced.updateStrategy')}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0 space-y-3">
|
|
<div className="flex items-center gap-4">
|
|
<label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
|
|
<input type="radio" checked={strategyType === 'RollingUpdate'} onChange={() => onStrategyTypeChange('RollingUpdate')}
|
|
className="accent-blue-500" />
|
|
RollingUpdate（滚动更新）
|
|
</label>
|
|
<label className="flex items-center gap-1.5 text-xs text-[var(--dg-text-secondary)] cursor-pointer">
|
|
<input type="radio" checked={strategyType === 'Recreate'} onChange={() => onStrategyTypeChange('Recreate')}
|
|
className="accent-blue-500" />
|
|
Recreate（重建）
|
|
</label>
|
|
</div>
|
|
{strategyType === 'RollingUpdate' && (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label className="dg-text-muted text-xs">maxSurge（整数或百分比，超出期望副本数）</Label>
|
|
<Input value={maxSurge} onChange={e => onMaxSurgeChange(e.target.value)}
|
|
placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<Label className="dg-text-muted text-xs">maxUnavailable（整数或百分比，不可用上限）</Label>
|
|
<Input value={maxUnavailable} onChange={e => onMaxUnavailableChange(e.target.value)}
|
|
placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 历史版本 / 进度 */}
|
|
<Card className="dg-card">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
|
|
<Clock className="h-4 w-4 dg-text-yellow" />{i18n.t("common.historyVersion")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0 grid grid-cols-2 gap-3">
|
|
<div>
|
|
<Label className="dg-text-muted text-xs">revisionHistoryLimit（保留 RS 历史）</Label>
|
|
<Input type="number" value={revisionHistoryLimit} onChange={e => onRevisionHistoryLimitChange(e.target.value)}
|
|
className="h-8 mt-1 dg-input text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<Label className="dg-text-muted text-xs">progressDeadlineSeconds（升级超时秒数）</Label>
|
|
<Input type="number" value={progressDeadlineSeconds} onChange={e => onProgressDeadlineSecondsChange(e.target.value)}
|
|
className="h-8 mt-1 dg-input text-sm font-mono" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|