fix(i18n): 回退到稳定的 32% 覆盖率状态 (tsc + Vite 构建通过)

批量转换脚本引入的语法错误已回退,保留稳定的 i18n 转换:
- 翻译词典: 22 namespaces, 3600+ keys
- 已接入: 145+ 文件 (Dashboard/Login/K8s 主页面/Monitor/System/Deploy)
- 语言切换器在 Header 中可用 (🇨🇳/🇺🇸)
- tsc 零错误, Vite 构建成功
This commit is contained in:
attacker committed 2026-07-03 02:02:29 +08:00
1 parent ecec73989b
commit 72bfb0e12d
191 files changed
+5054 -7589

No files matched your search

+21 -23
View File
@@ -28,10 +28,8 @@ import {
} from './agentAlertHelper'; } from './agentAlertHelper';
import { AgentRuleDialog } from './AgentRuleDialog'; import { AgentRuleDialog } from './AgentRuleDialog';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function AgentAlerts() { export function AgentAlerts() {
const { t } = useTranslation();
const confirm = useConfirm(); const confirm = useConfirm();
const [activeTab, setActiveTab] = useState('events'); const [activeTab, setActiveTab] = useState('events');
const [alerts, setAlerts] = useState<JsonData[]>([]); const [alerts, setAlerts] = useState<JsonData[]>([]);
@@ -54,7 +52,7 @@ export function AgentAlerts() {
setRules(asList(rulesRes)); setRules(asList(rulesRes));
} catch (err) { } catch (err) {
console.error(err); console.error(err);
toast.error(t('agent.agentalerts.s7ffaa4')); toast.error('加载告警数据失败');
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -66,14 +64,14 @@ export function AgentAlerts() {
// ============ 告警事件 ============ // ============ 告警事件 ============
const handleResolve = async (id: number) => { const handleResolve = async (id: number) => {
const ok = await confirm({ title: t('agent.agentalerts.sd56d01'), description: t('agent.agentalerts.s99f0fb'), confirmText: t('common.resume') }); const ok = await confirm({ title: '恢复告警', description: '确定将此告警标记为已恢复?', confirmText: '恢复' });
if (!ok) return; if (!ok) return;
try { try {
await agentApi.resolveAlert(id); await agentApi.resolveAlert(id);
toast.success(t('agent.agentalerts.s0e2352')); toast.success('告警已恢复');
loadData(); loadData();
} catch (err) { } catch (err) {
toast.error(err?.message || t('common.operationFailed')); toast.error(err?.message || '操作失败');
} }
}; };
@@ -89,14 +87,14 @@ export function AgentAlerts() {
}; };
const handleDeleteRule = async (id: number) => { const handleDeleteRule = async (id: number) => {
const ok = await confirm({ title: t('alert.deleteRule'), description: t('agent.agentalerts.sd30155'), confirmText: t('common.delete'), variant: 'destructive' }); const ok = await confirm({ title: '删除规则', description: '确定删除此告警规则?', confirmText: '删除', variant: 'destructive' });
if (!ok) return; if (!ok) return;
try { try {
await agentApi.deleteRule(id); await agentApi.deleteRule(id);
toast.success(t('agent.agentalerts.s8b2798')); toast.success('规则已删除');
loadData(); loadData();
} catch (err) { } catch (err) {
toast.error(err?.message || t('common.deleteFailed')); toast.error(err?.message || '删除失败');
} }
}; };
@@ -105,7 +103,7 @@ export function AgentAlerts() {
await agentApi.updateRule(rule.id, { ...rule, enabled: !rule.enabled }); await agentApi.updateRule(rule.id, { ...rule, enabled: !rule.enabled });
loadData(); loadData();
} catch (err) { } catch (err) {
toast.error(err?.message || t('common.operationFailed')); toast.error(err?.message || '操作失败');
} }
}; };
@@ -114,8 +112,8 @@ export function AgentAlerts() {
{/* 页头 */} {/* 页头 */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">{t('agent.agentalerts.s87efbd')}</h2> <h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">Agent 告警</h2>
<p className="text-sm dg-text-secondary mt-0.5">{t('agent.agentalerts.s03a08c')}</p> <p className="text-sm dg-text-secondary mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
</div> </div>
<Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]"> <Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
<RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} /> <RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
@@ -125,8 +123,8 @@ export function AgentAlerts() {
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]"> <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
<TabsTrigger value="events" className="data-[state=active]:bg-[var(--dg-bg-active)]">{t('agent.agentalerts.s0e5b83')}</TabsTrigger> <TabsTrigger value="events" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警事件</TabsTrigger>
<TabsTrigger value="rules" className="data-[state=active]:bg-[var(--dg-bg-active)]">{t('alert.tab.rules')}</TabsTrigger> <TabsTrigger value="rules" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警规则</TabsTrigger>
</TabsList> </TabsList>
{/* ========== 告警事件 ========== */} {/* ========== 告警事件 ========== */}
@@ -154,14 +152,14 @@ export function AgentAlerts() {
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="flex items-center justify-center py-16"> <CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" /> <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
<span className="ml-2 dg-text-secondary">{t('common.loading')}</span> <span className="ml-2 dg-text-secondary">加载中...</span>
</CardContent> </CardContent>
</Card> </Card>
) : alerts.length === 0 ? ( ) : alerts.length === 0 ? (
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="flex flex-col items-center justify-center py-16"> <CardContent className="flex flex-col items-center justify-center py-16">
<CheckCircle className="h-10 w-10 text-emerald-500 mb-3" /> <CheckCircle className="h-10 w-10 text-emerald-500 mb-3" />
<p className="dg-text-secondary">{resolvedView ? t('agent.agentalerts.se459f4') : t('agent.agentalerts.s778455')}</p> <p className="dg-text-secondary">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警,一切正常'}</p>
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
@@ -177,20 +175,20 @@ export function AgentAlerts() {
<div className="min-w-0"> <div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
{severityBadge(alert.severity)} {severityBadge(alert.severity)}
<span className="font-medium text-[var(--dg-text-primary)]">{alert.rule_name || alert.name || alert.title || t('dashboard.stat.alerts')}</span> <span className="font-medium text-[var(--dg-text-primary)]">{alert.rule_name || alert.name || alert.title || '告警'}</span>
</div> </div>
<p className="text-sm dg-text-secondary mt-1">{alert.message || alert.description || t('agent.agentalerts.sddab4a')}</p> <p className="text-sm dg-text-secondary mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
<div className="flex items-center gap-4 mt-2 text-xs dg-text-muted flex-wrap"> <div className="flex items-center gap-4 mt-2 text-xs dg-text-muted flex-wrap">
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<Cpu className="h-3 w-3" /> <Cpu className="h-3 w-3" />
{alert.hostname || '--'} {alert.hostname || '--'}
</span> </span>
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<span className="dg-text-secondary">{t('agent.agentalerts.sbfdcf2')}</span> {getMetricLabel(alert.metric)} <span className="dg-text-secondary">指标:</span> {getMetricLabel(alert.metric)}
</span> </span>
{alert.value != null && ( {alert.value != null && (
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<span className="dg-text-secondary">{t('agent.agentalerts.s2d1376')}</span> {alert.value} <span className="dg-text-secondary">当前值:</span> {alert.value}
</span> </span>
)} )}
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
@@ -232,14 +230,14 @@ export function AgentAlerts() {
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="flex items-center justify-center py-16"> <CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" /> <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
<span className="ml-2 dg-text-secondary">{t('common.loading')}</span> <span className="ml-2 dg-text-secondary">加载中...</span>
</CardContent> </CardContent>
</Card> </Card>
) : rules.length === 0 ? ( ) : rules.length === 0 ? (
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="flex flex-col items-center justify-center py-16"> <CardContent className="flex flex-col items-center justify-center py-16">
<Bell className="h-10 w-10 dg-text-muted mb-3" /> <Bell className="h-10 w-10 dg-text-muted mb-3" />
<p className="dg-text-secondary">{t('alert.noRules')}</p> <p className="dg-text-secondary">暂无告警规则</p>
<Button size="sm" onClick={openCreateRule} className="mt-4 bg-blue-600 hover:bg-blue-700 text-white"> <Button size="sm" onClick={openCreateRule} className="mt-4 bg-blue-600 hover:bg-blue-700 text-white">
<Plus className="h-4 w-4 mr-1.5" /> <Plus className="h-4 w-4 mr-1.5" />
创建第一条规则 创建第一条规则
@@ -263,7 +261,7 @@ export function AgentAlerts() {
<span className="font-medium text-[var(--dg-text-primary)]">{rule.name}</span> <span className="font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
{severityBadge(rule.severity)} {severityBadge(rule.severity)}
{rule.enabled === false && ( {rule.enabled === false && (
<Badge className="bg-[var(--dg-bg-active)] dg-text-secondary border border-[var(--dg-border-hover)]">{t('alert.disabled')}</Badge> <Badge className="bg-[var(--dg-bg-active)] dg-text-secondary border border-[var(--dg-border-hover)]">已禁用</Badge>
)} )}
</div> </div>
<div className="flex items-center gap-3 mt-1.5 text-xs dg-text-muted flex-wrap"> <div className="flex items-center gap-3 mt-1.5 text-xs dg-text-muted flex-wrap">
+21 -24
View File
@@ -23,7 +23,6 @@ import {
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { import {
import { useTranslation } from 'react-i18next';
Cpu, Cpu,
MemoryStick, MemoryStick,
HardDrive, HardDrive,
@@ -42,7 +41,6 @@ import { useTranslation } from 'react-i18next';
// ============ 组件 ============ // ============ 组件 ============
export function AgentMonitor() { export function AgentMonitor() {
const { t } = useTranslation();
const [hosts, setHosts] = useState<AgentHostRecord[]>([]); const [hosts, setHosts] = useState<AgentHostRecord[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
@@ -70,7 +68,7 @@ export function AgentMonitor() {
if (fresh) setSelectedHost(fresh); if (fresh) setSelectedHost(fresh);
} }
} catch (err) { } catch (err) {
if (!silent) toast.error(t('agent.agentmonitor.s5760f6')); if (!silent) toast.error('加载主机列表失败');
console.error(err); console.error(err);
} finally { } finally {
setLoading(false); setLoading(false);
@@ -99,7 +97,7 @@ export function AgentMonitor() {
// 提交远程命令(直连 SSH 即时返回) // 提交远程命令(直连 SSH 即时返回)
const submitCommand = async () => { const submitCommand = async () => {
if (!cmdCommand.trim()) { if (!cmdCommand.trim()) {
toast.error(t('agent.agentmonitor.s9358aa')); toast.error('请输入要执行的命令');
return; return;
} }
setCmdSubmitting(true); setCmdSubmitting(true);
@@ -113,11 +111,11 @@ export function AgentMonitor() {
const resData = (res?.data ?? {}) as Record<string, unknown>; const resData = (res?.data ?? {}) as Record<string, unknown>;
setCmdResult({ setCmdResult({
status: res?.code === 200 ? 'completed' : 'failed', status: res?.code === 200 ? 'completed' : 'failed',
result: (resData.output as string) || (res?.message as string) || t('agent.agentmonitor.s26d45b'), result: (resData.output as string) || (res?.message as string) || '无输出',
error: resData.error as string | undefined, error: resData.error as string | undefined,
}); });
} catch (err) { } catch (err) {
setCmdResult({ status: 'failed', result: err?.message || t('automation.scriptFailed') }); setCmdResult({ status: 'failed', result: err?.message || '执行失败' });
} finally { } finally {
setCmdSubmitting(false); setCmdSubmitting(false);
loadLatest(true); loadLatest(true);
@@ -131,9 +129,9 @@ export function AgentMonitor() {
const onlineCount = hosts.filter((h) => isOnline(h.last_report || h.last_reported_at || h.updated_at)).length; const onlineCount = hosts.filter((h) => isOnline(h.last_report || h.last_reported_at || h.updated_at)).length;
const stats = [ const stats = [
{ label: t('agent.agentmonitor.sd94cd2'), value: hosts.length, icon: Server, color: 'dg-text-blue' }, { label: '主机总数', value: hosts.length, icon: Server, color: 'dg-text-blue' },
{ label: t('common.online'), value: onlineCount, icon: Wifi, color: 'dg-text-green' }, { label: '在线', value: onlineCount, icon: Wifi, color: 'dg-text-green' },
{ label: t('common.offline'), value: hosts.length - onlineCount, icon: WifiOff, color: 'dg-text-red' }, { label: '离线', value: hosts.length - onlineCount, icon: WifiOff, color: 'dg-text-red' },
]; ];
return ( return (
@@ -141,8 +139,8 @@ export function AgentMonitor() {
{/* 页头 */} {/* 页头 */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">{t('agent.agentMonitor')}</h2> <h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">Agent 监控</h2>
<p className="text-sm dg-text-secondary mt-0.5">{t('agent.agentmonitor.sa75d75')}</p> <p className="text-sm dg-text-secondary mt-0.5">实时监控 Agent 上报的主机指标</p>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
@@ -188,14 +186,14 @@ export function AgentMonitor() {
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="flex items-center justify-center py-16"> <CardContent className="flex items-center justify-center py-16">
<Loader2 className="h-6 w-6 animate-spin dg-text-muted" /> <Loader2 className="h-6 w-6 animate-spin dg-text-muted" />
<span className="ml-2 dg-text-secondary">{t('common.loading')}</span> <span className="ml-2 dg-text-secondary">加载中...</span>
</CardContent> </CardContent>
</Card> </Card>
) : hosts.length === 0 ? ( ) : hosts.length === 0 ? (
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="flex flex-col items-center justify-center py-16"> <CardContent className="flex flex-col items-center justify-center py-16">
<Server className="h-10 w-10 dg-text-muted mb-3" /> <Server className="h-10 w-10 dg-text-muted mb-3" />
<p className="dg-text-secondary">{t('agent.noAgentData')}</p> <p className="dg-text-secondary">暂无 Agent 上报数据</p>
<Button <Button
size="sm" size="sm"
onClick={() => setWizardOpen(true)} onClick={() => setWizardOpen(true)}
@@ -242,8 +240,8 @@ export function AgentMonitor() {
{/* 指标条 */} {/* 指标条 */}
<div className="space-y-2"> <div className="space-y-2">
<MetricBar icon={Cpu} label="CPU" value={cpu} /> <MetricBar icon={Cpu} label="CPU" value={cpu} />
<MetricBar icon={MemoryStick} label=t('k8s.pods.memory') value={mem} /> <MetricBar icon={MemoryStick} label="内存" value={mem} />
<MetricBar icon={HardDrive} label=t('dashboard.topUsage.disk') value={disk} /> <MetricBar icon={HardDrive} label="磁盘" value={disk} />
</div> </div>
{/* 端口 & 时间 */} {/* 端口 & 时间 */}
@@ -309,7 +307,7 @@ export function AgentMonitor() {
<div className="space-y-3"> <div className="space-y-3">
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.installTarget')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">目标主机</Label>
<Input <Input
value={cmdHost} value={cmdHost}
onChange={(e) => setCmdHost(e.target.value)} onChange={(e) => setCmdHost(e.target.value)}
@@ -320,18 +318,18 @@ export function AgentMonitor() {
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('system.terminalCommand')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">命令</Label>
<Textarea <Textarea
value={cmdCommand} value={cmdCommand}
onChange={(e) => setCmdCommand(e.target.value)} onChange={(e) => setCmdCommand(e.target.value)}
placeholder=t('agent.agentmonitor.s6e62a5') placeholder="例如:free -m && df -h"
rows={3} rows={3}
className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm resize-none" className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm resize-none"
/> />
</div> </div>
<div className="w-40 space-y-1.5"> <div className="w-40 space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('monitor.probeTimeout')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">超时(秒)</Label>
<Input <Input
type="number" type="number"
value={cmdTimeout} value={cmdTimeout}
@@ -344,7 +342,7 @@ export function AgentMonitor() {
{cmdResult && ( {cmdResult && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('automation.execResult')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">执行结果</Label>
<Badge <Badge
className={ className={
cmdResult.status === 'success' || cmdResult.status === 'done' || cmdResult.status === 'completed' cmdResult.status === 'success' || cmdResult.status === 'done' || cmdResult.status === 'completed'
@@ -358,7 +356,7 @@ export function AgentMonitor() {
</Badge> </Badge>
</div> </div>
<pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg p-3 max-h-48 overflow-auto"> <pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg p-3 max-h-48 overflow-auto">
{cmdResult.result || cmdResult.output || cmdResult.error || t('agent.agentmonitor.s26d45b')} {cmdResult.result || cmdResult.output || cmdResult.error || '无输出'}
</pre> </pre>
</div> </div>
)} )}
@@ -374,9 +372,9 @@ export function AgentMonitor() {
className="bg-blue-600 hover:bg-blue-700 text-white" className="bg-blue-600 hover:bg-blue-700 text-white"
> >
{cmdSubmitting ? ( {cmdSubmitting ? (
<><Loader2 className="h-4 w-4 mr-1.5 animate-spin" />{t('common.executing')}</> <><Loader2 className="h-4 w-4 mr-1.5 animate-spin" />执行中</>
) : ( ) : (
<><Terminal className="h-4 w-4 mr-1.5" />{t('common.execute')}</> <><Terminal className="h-4 w-4 mr-1.5" />执行</>
)} )}
</Button> </Button>
</DialogFooter> </DialogFooter>
@@ -391,7 +389,6 @@ export function AgentMonitor() {
// ============ 指标条子组件 ============ // ============ 指标条子组件 ============
function MetricBar({ icon: Icon, label, value }: { icon: ComponentType<{ className?: string }>; label: string; value: number }) { function MetricBar({ icon: Icon, label, value }: { icon: ComponentType<{ className?: string }>; label: string; value: number }) {
const { t } = useTranslation();
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Icon className="h-3.5 w-3.5 dg-text-muted shrink-0" /> <Icon className="h-3.5 w-3.5 dg-text-muted shrink-0" />
@@ -24,7 +24,6 @@ import {
import { Loader2 } from 'lucide-react'; import { Loader2 } from 'lucide-react';
import { METRIC_OPTIONS, OPERATOR_OPTIONS, SEVERITY_OPTIONS } from './agentAlertHelper'; import { METRIC_OPTIONS, OPERATOR_OPTIONS, SEVERITY_OPTIONS } from './agentAlertHelper';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface Props { interface Props {
open: boolean; open: boolean;
@@ -46,7 +45,6 @@ const DEFAULT_FORM = {
}; };
export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }: Props) { export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }: Props) {
const { t } = useTranslation();
const [ruleForm, setRuleForm] = useState({ ...DEFAULT_FORM }); const [ruleForm, setRuleForm] = useState({ ...DEFAULT_FORM });
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -71,7 +69,7 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
const handleSave = async () => { const handleSave = async () => {
if (!ruleForm.name.trim()) { if (!ruleForm.name.trim()) {
toast.error(t('agent.agentruledialog.s40f3f1')); toast.error('请输入规则名称');
return; return;
} }
setSaving(true); setSaving(true);
@@ -90,15 +88,15 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
} }
if (editingRule) { if (editingRule) {
await agentApi.updateRule(editingRule.id, payload); await agentApi.updateRule(editingRule.id, payload);
toast.success(t('agent.agentruledialog.sa716ef')); toast.success('规则已更新');
} else { } else {
await agentApi.createRule(payload); await agentApi.createRule(payload);
toast.success(t('agent.agentruledialog.s5702a3')); toast.success('规则已创建');
} }
onOpenChange(false); onOpenChange(false);
onSuccess(); onSuccess();
} catch (err) { } catch (err) {
toast.error(err?.message || t('common.saveFailed')); toast.error(err?.message || '保存失败');
} finally { } finally {
setSaving(false); setSaving(false);
} }
@@ -108,24 +106,24 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
<Dialog open={open} onOpenChange={(v) => { if (!v) onOpenChange(false); }}> <Dialog open={open} onOpenChange={(v) => { if (!v) onOpenChange(false); }}>
<DialogContent className="max-w-md dg-card text-[var(--dg-text-primary)]"> <DialogContent className="max-w-md dg-card text-[var(--dg-text-primary)]">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]">{editingRule ? t('monitor.editRule') : t('agent.agentruledialog.sf10ed4')}</DialogTitle> <DialogTitle className="text-[var(--dg-text-primary)]">{editingRule ? '编辑规则' : '新建规则'}</DialogTitle>
<DialogDescription className="dg-text-secondary">{t('agent.agentruledialog.s0cc0f6')}</DialogDescription> <DialogDescription className="dg-text-secondary">配置 Agent 指标告警规则</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('monitor.ruleName')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">规则名称</Label>
<Input <Input
value={ruleForm.name} value={ruleForm.name}
onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })} onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
placeholder=t('agent.agentruledialog.s5a0f7e') placeholder="例如:CPU 使用率告警"
className="h-9 dg-input" className="h-9 dg-input"
/> />
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.agentruledialog.s9a51fb')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">监控指标</Label>
<Select value={ruleForm.metric} onValueChange={(v) => setRuleForm({ ...ruleForm, metric: v })}> <Select value={ruleForm.metric} onValueChange={(v) => setRuleForm({ ...ruleForm, metric: v })}>
<SelectTrigger className="h-9 dg-input"> <SelectTrigger className="h-9 dg-input">
<SelectValue /> <SelectValue />
@@ -138,7 +136,7 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
</Select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('monitor.ruleSeverity')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">严重程度</Label>
<Select value={ruleForm.severity} onValueChange={(v) => setRuleForm({ ...ruleForm, severity: v })}> <Select value={ruleForm.severity} onValueChange={(v) => setRuleForm({ ...ruleForm, severity: v })}>
<SelectTrigger className="h-9 dg-input"> <SelectTrigger className="h-9 dg-input">
<SelectValue /> <SelectValue />
@@ -155,7 +153,7 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
{ruleForm.metric !== 'offline' && ( {ruleForm.metric !== 'offline' && (
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.agentruledialog.sd52f2c')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">比较运算符</Label>
<Select value={ruleForm.operator} onValueChange={(v) => setRuleForm({ ...ruleForm, operator: v })}> <Select value={ruleForm.operator} onValueChange={(v) => setRuleForm({ ...ruleForm, operator: v })}>
<SelectTrigger className="h-9 dg-input"> <SelectTrigger className="h-9 dg-input">
<SelectValue /> <SelectValue />
@@ -181,39 +179,39 @@ export function AgentRuleDialog({ open, onOpenChange, editingRule, onSuccess }:
{ruleForm.metric === 'port_down' && ( {ruleForm.metric === 'port_down' && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.agentruledialog.s4d1348')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">监控端口</Label>
<Input <Input
type="number" type="number"
value={ruleForm.port} value={ruleForm.port}
onChange={(e) => setRuleForm({ ...ruleForm, port: e.target.value })} onChange={(e) => setRuleForm({ ...ruleForm, port: e.target.value })}
placeholder=t('agent.agentruledialog.s77565e') placeholder="例如:8080"
className="h-9 dg-input" className="h-9 dg-input"
/> />
</div> </div>
)} )}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.agentruledialog.sb1551d')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">持续时间(秒)</Label>
<Input <Input
type="number" type="number"
value={ruleForm.duration} value={ruleForm.duration}
onChange={(e) => setRuleForm({ ...ruleForm, duration: e.target.value })} onChange={(e) => setRuleForm({ ...ruleForm, duration: e.target.value })}
placeholder=t('agent.agentruledialog.sd140c7') placeholder="指标持续超限多久后告警"
className="h-9 dg-input" className="h-9 dg-input"
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.agentruledialog.sfd2ea0')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">启用规则</Label>
<Switch checked={ruleForm.enabled} onCheckedChange={(v) => setRuleForm({ ...ruleForm, enabled: v })} /> <Switch checked={ruleForm.enabled} onCheckedChange={(v) => setRuleForm({ ...ruleForm, enabled: v })} />
</div> </div>
</div> </div>
<DialogFooter className="gap-2"> <DialogFooter className="gap-2">
<Button variant="outline" onClick={() => onOpenChange(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">取消</Button>
<Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-700 text-white"> <Button onClick={handleSave} disabled={saving} className="bg-blue-600 hover:bg-blue-700 text-white">
{saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null} {saving ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" /> : null}
{editingRule ? i18n.t('common.save') : i18n.t('common.create')} {editingRule ? '保存' : '创建'}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
+21 -23
View File
@@ -14,7 +14,6 @@ import { Label } from '@/components/ui/label';
import { Copy, Check, Terminal, Download, Settings, Play, Cpu, Zap, Loader2, Server, Shield } from 'lucide-react'; import { Copy, Check, Terminal, Download, Settings, Play, Cpu, Zap, Loader2, Server, Shield } from 'lucide-react';
import { serverApi } from '@/api'; import { serverApi } from '@/api';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
interface AgentWizardProps { interface AgentWizardProps {
open: boolean; open: boolean;
@@ -41,7 +40,6 @@ function detectServerAddress() {
} }
export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled, onFailed }: AgentWizardProps) { export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled, onFailed }: AgentWizardProps) {
const { t } = useTranslation();
const token = useUserStore((s) => s.token) || '<YOUR_TOKEN>'; const token = useUserStore((s) => s.token) || '<YOUR_TOKEN>';
const origin = detectServerAddress(); const origin = detectServerAddress();
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
@@ -106,10 +104,10 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
if (success) { if (success) {
setCopied(true); setCopied(true);
toast.success(t('agent.agentwizard.s19ee00')); toast.success('安装命令已复制到剪贴板,粘贴到目标主机执行');
setTimeout(() => setCopied(false), 3000); setTimeout(() => setCopied(false), 3000);
} else { } else {
toast.error(t('agent.agentwizard.s7ac41b')); toast.error('自动复制失败,请在下方手动全选复制 (Ctrl+A → Ctrl+C)');
setShowManualInput(true); setShowManualInput(true);
} }
}; };
@@ -119,19 +117,19 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
const manualSteps = [ const manualSteps = [
{ {
icon: Download, icon: Download,
title: t('agent.agentwizard.s8c59e0'), title: '1. 下载二进制',
commands: [ commands: [
`curl -fsSL ${binaryUrl} -o /usr/local/bin/aiops-agent`, `curl -fsSL ${binaryUrl} -o /usr/local/bin/aiops-agent`,
], ],
}, },
{ {
icon: Settings, icon: Settings,
title: t('agent.agentwizard.s2f17bf'), title: '2. 赋予执行权限',
commands: ['chmod +x /usr/local/bin/aiops-agent'], commands: ['chmod +x /usr/local/bin/aiops-agent'],
}, },
{ {
icon: Cpu, icon: Cpu,
title: t('agent.agentwizard.s03fa00'), title: '3. 创建 systemd 服务',
commands: [ commands: [
`cat > /etc/systemd/system/aiops-agent.service << 'EOF'`, `cat > /etc/systemd/system/aiops-agent.service << 'EOF'`,
`[Unit]`, `[Unit]`,
@@ -151,7 +149,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
}, },
{ {
icon: Play, icon: Play,
title: t('agent.agentwizard.s84bd81'), title: '4. 启动并设置开机自启',
commands: [ commands: [
'systemctl daemon-reload', 'systemctl daemon-reload',
'systemctl enable --now aiops-agent', 'systemctl enable --now aiops-agent',
@@ -165,7 +163,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
const handleSshInstall = async () => { const handleSshInstall = async () => {
if (!server || !token) return; if (!server || !token) return;
if (needsCreds && !sshPassword && !sshKey) { if (needsCreds && !sshPassword && !sshKey) {
toast.error(t('agent.agentwizard.s6cfe96')); toast.error('请填写 SSH 登录凭据(密码或密钥)');
return; return;
} }
setSshInstalling(true); setSshInstalling(true);
@@ -184,11 +182,11 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
: undefined; : undefined;
// 优先尝试异步批量接口,即使单台也后台执行 // 优先尝试异步批量接口,即使单台也后台执行
await serverApi.batchInstallAgent([server.id], token, credentials); await serverApi.batchInstallAgent([server.id], token, credentials);
toast.success(t('agent.agentwizard.s4c0811', { server.hostname: server.hostname })); toast.success(`${server.hostname}: 已提交 Agent 安装任务,后台执行中…`);
onInstalled?.(server.id); onInstalled?.(server.id);
onOpenChange(false); onOpenChange(false);
} catch (e) { } catch (e) {
const msg = e?.message || t('agent.installFailed'); const msg = e?.message || '安装失败';
toast.error(`${server.hostname} ${msg}`); toast.error(`${server.hostname} ${msg}`);
onFailed?.(server.id, msg); onFailed?.(server.id, msg);
} finally { } finally {
@@ -201,12 +199,12 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
<DialogContent className="max-w-2xl dg-card text-[var(--dg-text-primary)]"> <DialogContent className="max-w-2xl dg-card text-[var(--dg-text-primary)]">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]"> <DialogTitle className="text-[var(--dg-text-primary)]">
{server ? t('agent.agentwizard.s78196e', { server.hostname: server.hostname }) : t('agent.agentwizard.s812cc1')} {server ? `部署 Agent → ${server.hostname}` : '部署 Agent'}
</DialogTitle> </DialogTitle>
<DialogDescription className="dg-text-secondary"> <DialogDescription className="dg-text-secondary">
{server {server
? t('agent.agentwizard.s94a807', { server.hostname: server.hostname, server.ip: server.ip }) ? `目标主机 ${server.hostname} (${server.ip}),选择安装方式:`
: t('agent.agentwizard.sed0c1b') : '在目标主机上执行以下命令即可完成 Agent 安装与注册'
} }
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
@@ -248,7 +246,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
variant="ghost" variant="ghost"
onClick={handleCopy} onClick={handleCopy}
className="absolute top-2 right-2 h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]" className="absolute top-2 right-2 h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
title=t('agent.agentwizard.s564be0') title="复制到剪贴板"
> >
{copied ? <Check className="h-4 w-4 dg-text-green" /> : <Copy className="h-4 w-4" />} {copied ? <Check className="h-4 w-4 dg-text-green" /> : <Copy className="h-4 w-4" />}
</Button> </Button>
@@ -281,8 +279,8 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
{!server ? ( {!server ? (
<div className="text-center py-12 dg-text-secondary"> <div className="text-center py-12 dg-text-secondary">
<Server className="h-10 w-10 mx-auto mb-3 opacity-50" /> <Server className="h-10 w-10 mx-auto mb-3 opacity-50" />
<p className="text-sm font-medium mb-1">{t('agent.agentwizard.sc9b7ee')}</p> <p className="text-sm font-medium mb-1">未选择目标主机</p>
<p className="text-xs">{t('agent.agentwizard.s12a111')}</p> <p className="text-xs">请先在主机列表中勾选一台主机,再点击「安装 Agent」打开此页面</p>
</div> </div>
) : ( ) : (
<> <>
@@ -300,11 +298,11 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
<div className="mb-4 p-3 rounded-lg bg-amber-950/30 border border-amber-800/40 space-y-3"> <div className="mb-4 p-3 rounded-lg bg-amber-950/30 border border-amber-800/40 space-y-3">
<div className="flex items-center gap-2 text-xs text-amber-300/80"> <div className="flex items-center gap-2 text-xs text-amber-300/80">
<Shield className="h-3.5 w-3.5" /> <Shield className="h-3.5 w-3.5" />
<span>{t('agent.agentwizard.seb55df')}</span> <span>该服务器未配置 SSH 凭据,请填写以下信息(首次连接成功后自动保存)</span>
</div> </div>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<div> <div>
<Label className="text-xs dg-text-secondary">{t('login.username')}</Label> <Label className="text-xs dg-text-secondary">用户名</Label>
<Input <Input
value={sshUsername} value={sshUsername}
onChange={e => setSshUsername(e.target.value)} onChange={e => setSshUsername(e.target.value)}
@@ -314,7 +312,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
</div> </div>
<div className="flex items-end gap-1"> <div className="flex items-end gap-1">
<div className="flex-1"> <div className="flex-1">
<Label className="text-xs dg-text-secondary">{t('login.password')}</Label> <Label className="text-xs dg-text-secondary">密码</Label>
<Input <Input
type="password" type="password"
value={sshPassword} value={sshPassword}
@@ -323,7 +321,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
className="h-8 text-sm dg-input text-[var(--dg-text-primary)] mt-1" className="h-8 text-sm dg-input text-[var(--dg-text-primary)] mt-1"
/> />
</div> </div>
<span className="text-xs dg-text-muted px-1 pb-1">{t('common.logicalOr')}</span> <span className="text-xs dg-text-muted px-1 pb-1">或</span>
<Button variant="ghost" size="sm" <Button variant="ghost" size="sm"
onClick={() => { setAuthType('key'); setSshPassword(''); }} onClick={() => { setAuthType('key'); setSshPassword(''); }}
className={`text-xs h-7 px-2 ${authType==='key'?'dg-text-blue':'dg-text-muted'}`}> className={`text-xs h-7 px-2 ${authType==='key'?'dg-text-blue':'dg-text-muted'}`}>
@@ -333,7 +331,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
</div> </div>
{authType === 'key' && ( {authType === 'key' && (
<div> <div>
<Label className="text-xs dg-text-secondary">{t('agent.agentwizard.s749be3')}</Label> <Label className="text-xs dg-text-secondary">SSH 私钥(PEM 格式)</Label>
<textarea <textarea
value={sshKey} value={sshKey}
onChange={e => setSshKey(e.target.value)} onChange={e => setSshKey(e.target.value)}
@@ -362,7 +360,7 @@ export function AgentWizard({ open, onOpenChange, server, onStart, onInstalled,
) : ( ) : (
<> <>
<Zap className="h-4 w-4 mr-2" /> <Zap className="h-4 w-4 mr-2" />
{needsCreds ? t('agent.agentwizard.sce2f53') : t('agent.agentwizard.s9866eb')} {needsCreds ? '连接并安装 Agent(凭据将自动保存)' : '一键安装 Agent'}
</> </>
)} )}
</Button> </Button>
@@ -30,7 +30,6 @@ import {
ResponsiveContainer, ResponsiveContainer,
} from 'recharts'; } from 'recharts';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function HostDetailDialog({ export function HostDetailDialog({
host, host,
@@ -41,7 +40,6 @@ export function HostDetailDialog({
onClose: () => void; onClose: () => void;
onCommand: (hostname: string) => void; onCommand: (hostname: string) => void;
}) { }) {
const { t } = useTranslation();
const [history, setHistory] = useState<JsonData[]>([]); const [history, setHistory] = useState<JsonData[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [hours, setHours] = useState(1); const [hours, setHours] = useState(1);
@@ -80,21 +78,21 @@ export function HostDetailDialog({
<Server className="h-5 w-5 dg-text-blue" /> <Server className="h-5 w-5 dg-text-blue" />
{host.hostname} {host.hostname}
{online ? ( {online ? (
<Badge className="bg-emerald-500/15 dg-text-green border border-emerald-500/30">{t('common.online')}</Badge> <Badge className="bg-emerald-500/15 dg-text-green border border-emerald-500/30">在线</Badge>
) : ( ) : (
<Badge className="bg-red-500/15 dg-text-red border border-red-500/30">{t('common.offline')}</Badge> <Badge className="bg-red-500/15 dg-text-red border border-red-500/30">离线</Badge>
)} )}
</DialogTitle> </DialogTitle>
<DialogDescription className="sr-only">{t('agent.hostdetaildialog.sffa4f7')}</DialogDescription> <DialogDescription className="sr-only">查看主机详情和指标趋势</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
{/* 基本信息 */} {/* 基本信息 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
<InfoCell label=t('agent.agentIp') value={host.ip || '--'} /> <InfoCell label="IP 地址" value={host.ip || '--'} />
<InfoCell label=t('server.csv.os') value={host.os || host.platform || '--'} /> <InfoCell label="操作系统" value={host.os || host.platform || '--'} />
<InfoCell label=t('agent.agentLastSeen') value={timeAgo(host.last_report || host.last_reported_at || host.updated_at)} /> <InfoCell label="最后上报" value={timeAgo(host.last_report || host.last_reported_at || host.updated_at)} />
<InfoCell label=t('agent.hostdetaildialog.s6ad4fc') value={String(ports.length)} /> <InfoCell label="端口数" value={String(ports.length)} />
</div> </div>
{/* 趋势图 */} {/* 趋势图 */}
@@ -109,9 +107,9 @@ export function HostDetailDialog({
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
<SelectItem value="1">{t('agent.hostdetaildialog.s3851af')}</SelectItem> <SelectItem value="1">最近 1 小时</SelectItem>
<SelectItem value="6">{t('agent.hostdetaildialog.s2d59b1')}</SelectItem> <SelectItem value="6">最近 6 小时</SelectItem>
<SelectItem value="24">{t('agent.hostdetaildialog.s768a1b')}</SelectItem> <SelectItem value="24">最近 24 小时</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -121,7 +119,7 @@ export function HostDetailDialog({
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" /> <Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
</div> </div>
) : chartData.length === 0 ? ( ) : chartData.length === 0 ? (
<div className="h-full flex items-center justify-center text-sm dg-text-muted">{t('agent.hostdetaildialog.sdc73db')}</div> <div className="h-full flex items-center justify-center text-sm dg-text-muted">暂无历史数据</div>
) : ( ) : (
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}> <AreaChart data={chartData} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}>
@@ -146,8 +144,8 @@ export function HostDetailDialog({
contentStyle={{ backgroundColor: '#0f172a', border: '1px solid #1e293b', borderRadius: '6px', color: '#f8fafc', fontSize: '12px' }} contentStyle={{ backgroundColor: '#0f172a', border: '1px solid #1e293b', borderRadius: '6px', color: '#f8fafc', fontSize: '12px' }}
/> />
<Area type="monotone" dataKey="cpu" stroke="#3b82f6" fill="url(#gCpu)" name="CPU" /> <Area type="monotone" dataKey="cpu" stroke="#3b82f6" fill="url(#gCpu)" name="CPU" />
<Area type="monotone" dataKey="mem" stroke="#10b981" fill="url(#gMem)" name=t('k8s.pods.memory') /> <Area type="monotone" dataKey="mem" stroke="#10b981" fill="url(#gMem)" name="内存" />
<Area type="monotone" dataKey="disk" stroke="#f59e0b" fill="url(#gDisk)" name=t('dashboard.topUsage.disk') /> <Area type="monotone" dataKey="disk" stroke="#f59e0b" fill="url(#gDisk)" name="磁盘" />
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
)} )}
@@ -161,7 +159,7 @@ export function HostDetailDialog({
端口发现 ({ports.length}) 端口发现 ({ports.length})
</span> </span>
{ports.length === 0 ? ( {ports.length === 0 ? (
<p className="text-xs dg-text-muted">{t('agent.hostdetaildialog.se7887d')}</p> <p className="text-xs dg-text-muted">暂无端口数据</p>
) : ( ) : (
<div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto"> <div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto">
{ports.map((p, idx) => ( {ports.map((p, idx) => (
@@ -193,7 +191,6 @@ export function HostDetailDialog({
} }
function InfoCell({ label, value }: { label: string; value: string }) { function InfoCell({ label, value }: { label: string; value: string }) {
const { t } = useTranslation();
return ( return (
<div className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg px-3 py-2"> <div className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg px-3 py-2">
<div className="text-xs dg-text-muted">{label}</div> <div className="text-xs dg-text-muted">{label}</div>
@@ -5,43 +5,42 @@ import {
Activity, Gauge, Timer, Activity, Gauge, Timer,
} from 'lucide-react'; } from 'lucide-react';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import i18n from '@/i18n';
// 主机监控指标(与后端 alert_engine 对齐)// Logan.Li // 主机监控指标(与后端 alert_engine 对齐)// Logan.Li
export const METRIC_OPTIONS = [ export const METRIC_OPTIONS = [
{ value: 'cpu', label: i18n.t('monitor.hostCpu'), icon: Cpu }, { value: 'cpu', label: 'CPU 使用率', icon: Cpu },
{ value: 'cpu_iowait', label: i18n.t('agent.agentalerthelper.sc1eec3'), icon: Cpu }, { value: 'cpu_iowait', label: 'CPU IO 等待', icon: Cpu },
{ value: 'mem', label: i18n.t('monitor.hostMemory'), icon: MemoryStick }, { value: 'mem', label: '内存使用率', icon: MemoryStick },
{ value: 'mem_available', label: i18n.t('agent.agentalerthelper.sa23fcd'), icon: MemoryStick }, { value: 'mem_available', label: '可用内存(GB)', icon: MemoryStick },
{ value: 'swap', label: i18n.t('agent.agentalerthelper.sa2f910'), icon: MemoryStick }, { value: 'swap', label: 'Swap 使用率', icon: MemoryStick },
{ value: 'load1', label: i18n.t('agent.agentalerthelper.sf23ce8'), icon: Gauge }, { value: 'load1', label: '1分钟负载', icon: Gauge },
{ value: 'disk', label: i18n.t('monitor.hostDisk'), icon: HardDrive }, { value: 'disk', label: '磁盘使用率', icon: HardDrive },
{ value: 'disk_inode', label: i18n.t('agent.agentalerthelper.sf7eade'), icon: HardDrive }, { value: 'disk_inode', label: 'Inode 使用率', icon: HardDrive },
{ value: 'disk_io_util', label: i18n.t('agent.agentalerthelper.s565a0e'), icon: HardDrive }, { value: 'disk_io_util', label: '磁盘 IO 利用率', icon: HardDrive },
{ value: 'tcp_established', label: i18n.t('agent.agentalerthelper.s6d9639'), icon: Network }, { value: 'tcp_established', label: 'TCP 已建立', icon: Network },
{ value: 'tcp_time_wait', label: 'TCP TIME_WAIT', icon: Network }, { value: 'tcp_time_wait', label: 'TCP TIME_WAIT', icon: Network },
{ value: 'tcp_close_wait', label: 'TCP CLOSE_WAIT', icon: Network }, { value: 'tcp_close_wait', label: 'TCP CLOSE_WAIT', icon: Network },
{ value: 'net_rx_bps', label: i18n.t('monitor.hostNetIn'), icon: Network }, { value: 'net_rx_bps', label: '入网带宽', icon: Network },
{ value: 'net_tx_bps', label: i18n.t('monitor.hostNetOut'), icon: Network }, { value: 'net_tx_bps', label: '出网带宽', icon: Network },
{ value: 'net_rx_errors', label: i18n.t('agent.agentalerthelper.s8d73bf'), icon: Network }, { value: 'net_rx_errors', label: '入网错误', icon: Network },
{ value: 'fd', label: i18n.t('monitor.hostFileDescriptor'), icon: Activity }, { value: 'fd', label: '文件描述符', icon: Activity },
{ value: 'offline', label: i18n.t('agent.agentalerthelper.s8ed49a'), icon: WifiOff }, { value: 'offline', label: '主机离线', icon: WifiOff },
{ value: 'port_down', label: i18n.t('agent.agentalerthelper.sf62ce6'), icon: Network }, { value: 'port_down', label: '端口不通', icon: Network },
{ value: 'health_probe', label: i18n.t('kubernetes.container.probes'), icon: Timer }, { value: 'health_probe', label: '健康探针', icon: Timer },
]; ];
export const OPERATOR_OPTIONS = [ export const OPERATOR_OPTIONS = [
{ value: '>', label: i18n.t('agent.agentalerthelper.s552612') }, { value: '>', label: '> 大于' },
{ value: '<', label: i18n.t('agent.agentalerthelper.sdd29ed') }, { value: '<', label: '< 小于' },
{ value: '>=', label: i18n.t('agent.agentalerthelper.sef2679') }, { value: '>=', label: '≥ 大于等于' },
{ value: '<=', label: i18n.t('agent.agentalerthelper.s847d07') }, { value: '<=', label: '≤ 小于等于' },
{ value: '==', label: i18n.t('agent.agentalerthelper.s9cd6c2') }, { value: '==', label: '= 等于' },
]; ];
export const SEVERITY_OPTIONS = [ export const SEVERITY_OPTIONS = [
{ value: 'critical', label: i18n.t('monitor.critical'), color: 'bg-red-500/15 dg-text-red border-red-500/30' }, { value: 'critical', label: '严重', color: 'bg-red-500/15 dg-text-red border-red-500/30' },
{ value: 'warning', label: i18n.t('common.warning'), color: 'bg-amber-500/15 dg-text-yellow border-amber-500/30' }, { value: 'warning', label: '警告', color: 'bg-amber-500/15 dg-text-yellow border-amber-500/30' },
{ value: 'info', label: i18n.t('common.info'), color: 'bg-blue-500/15 dg-text-blue border-blue-500/30' }, { value: 'info', label: '提示', color: 'bg-blue-500/15 dg-text-blue border-blue-500/30' },
]; ];
export function getMetricLabel(metric: string) { export function getMetricLabel(metric: string) {
@@ -28,6 +28,7 @@ import { AutoFixDialog } from './AutoFixDialog';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
// Parse LLM JSON response (may have markdown fences) into AIAnalysis // Parse LLM JSON response (may have markdown fences) into AIAnalysis
function parseAIResponse(raw: string, fallback: AIAnalysis): AIAnalysis { function parseAIResponse(raw: string, fallback: AIAnalysis): AIAnalysis {
@@ -50,6 +51,7 @@ function parseAIResponse(raw: string, fallback: AIAnalysis): AIAnalysis {
} }
export function AIAlertAnalyzer() { export function AIAlertAnalyzer() {
const { t } = useTranslation();
const [alerts, setAlerts] = useState<AlertItem[]>([]); const [alerts, setAlerts] = useState<AlertItem[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [selectedAlert, setSelectedAlert] = useState<AlertItem | null>(null); const [selectedAlert, setSelectedAlert] = useState<AlertItem | null>(null);
@@ -96,8 +98,8 @@ export function AIAlertAnalyzer() {
返回 JSON 格式(字段名用 snake_case): 返回 JSON 格式(字段名用 snake_case):
{ {
"root_cause": "根因分析(2-3句)", "root_cause": t('aiops.rootCauseSent'),
"impact": "影响评估(1-2句)", "impact": t('aiops.impactSent'),
"recommendations": ["建议1", "建议2", "建议3"], "recommendations": ["建议1", "建议2", "建议3"],
"auto_fix_script": "#!/bin/bash\\n...\\n(可选的自动修复脚本,无则 null)", "auto_fix_script": "#!/bin/bash\\n...\\n(可选的自动修复脚本,无则 null)",
"similar_cases": 数字(类似案例数预估), "similar_cases": 数字(类似案例数预估),
@@ -140,15 +142,15 @@ export function AIAlertAnalyzer() {
return ( return (
<PageShell <PageShell
variant="workspace" variant="workspace"
title="AI 告警智能分析" title={t('aiops.aiAlertAnalysis')}
subtitle="基于大模型的告警根因分析和自动修复建议" subtitle={t('aiops.alertRootCauseAnalysis')}
icon={<Brain className="h-5 w-5" />} icon={<Brain className="h-5 w-5" />}
loading={loading} loading={loading}
metrics={( metrics={(
<StatStrip <StatStrip
items={[ items={[
{ label: '告警总数', value: alerts.length, color: 'blue' }, { label: t('aiops.alertTotal'), value: alerts.length, color: 'blue' },
{ label: '活跃', value: activeCount, color: 'red' }, { label: t('common.active'), value: activeCount, color: 'red' },
]} ]}
/> />
)} )}
@@ -165,7 +167,7 @@ export function AIAlertAnalyzer() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2"> <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<AlertTriangle className="h-5 w-5 dg-text-yellow" /> <AlertTriangle className="h-5 w-5 dg-text-yellow" />
活跃告警 {t('dashboard.ops.firingAlerts')}
</CardTitle> </CardTitle>
<Badge className="bg-red-500/10 dg-text-red border-red-500/30"> <Badge className="bg-red-500/10 dg-text-red border-red-500/30">
{alerts.filter(a => a.status === 'active').length} 个活跃 {alerts.filter(a => a.status === 'active').length} 个活跃
@@ -177,12 +179,12 @@ export function AIAlertAnalyzer() {
{loading ? ( {loading ? (
<div className="flex flex-col items-center justify-center h-32"> <div className="flex flex-col items-center justify-center h-32">
<Loader2 className="h-6 w-6 animate-spin dg-text-muted mb-2" /> <Loader2 className="h-6 w-6 animate-spin dg-text-muted mb-2" />
<p className="text-sm dg-text-muted">加载告警数据...</p> <p className="text-sm dg-text-muted">{t('aiops.loadAlertsDot')}</p>
</div> </div>
) : alerts.length === 0 ? ( ) : alerts.length === 0 ? (
<div className="flex flex-col items-center justify-center h-32 dg-text-muted"> <div className="flex flex-col items-center justify-center h-32 dg-text-muted">
<CheckCircle className="h-8 w-8 mb-2 opacity-50" /> <CheckCircle className="h-8 w-8 mb-2 opacity-50" />
<p className="text-sm">暂无告警事件</p> <p className="text-sm">{t('dashboard.alerts.empty')}</p>
</div> </div>
) : ( ) : (
alerts.map((alert) => ( alerts.map((alert) => (
@@ -27,6 +27,8 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
const defaultConfig: LLMConfigData = { const defaultConfig: LLMConfigData = {
provider: 'openai', provider: 'openai',
@@ -45,9 +47,9 @@ const defaultConfig: LLMConfigData = {
async function loadAlertsContext(): Promise<string> { async function loadAlertsContext(): Promise<string> {
const res = await alertApi.getAlerts({ page: 1, page_size: 20 }); const res = await alertApi.getAlerts({ page: 1, page_size: 20 });
const alerts: JsonData[] = (res as JsonData)?.list || []; const alerts: JsonData[] = (res as JsonData)?.list || [];
if (!alerts.length) return '(当前无告警事件)'; if (!alerts.length) return i18n.t('aiops.noAlertsNow');
const lines = alerts.slice(0, 15).map((a, i) => const lines = alerts.slice(0, 15).map((a, i) =>
`${i + 1}. [${a.severity || '未知'}|${a.status || '-'}] ${a.rule_name || '告警'} → 目标:${a.target || '-'} 值:${a.value ?? '-'} 时间:${(a.started_at || '').slice(0, 16)}`, `${i + 1}. [${a.severity || i18n.t('common.unknown')}|${a.status || '-'}] ${a.rule_name || i18n.t('dashboard.stat.alerts')} → 目标:${a.target || '-'} 值:${a.value ?? '-'} 时间:${(a.started_at || '').slice(0, 16)}`,
); );
const firing = alerts.filter((a) => a.status === 'firing').length; const firing = alerts.filter((a) => a.status === 'firing').length;
return `共 ${alerts.length} 条告警(firing ${firing} 条),前 ${Math.min(15, alerts.length)} 条:\n${lines.join('\n')}`; return `共 ${alerts.length} 条告警(firing ${firing} 条),前 ${Math.min(15, alerts.length)} 条:\n${lines.join('\n')}`;
@@ -57,7 +59,7 @@ async function loadAlertsContext(): Promise<string> {
async function loadMetricsContext(): Promise<string> { async function loadMetricsContext(): Promise<string> {
const res = await agentApi.getLatest(); const res = await agentApi.getLatest();
const hosts: JsonData[] = Array.isArray(res) ? res : (res as JsonData)?.list || []; const hosts: JsonData[] = Array.isArray(res) ? res : (res as JsonData)?.list || [];
if (!hosts.length) return '(当前无 Agent 上报数据,可能未部署监控 Agent)'; if (!hosts.length) return i18n.t('aiops.noAgentData');
const lines = hosts.slice(0, 20).map((h, i) => { const lines = hosts.slice(0, 20).map((h, i) => {
const cpu = h.cpu_usage ?? '-'; const cpu = h.cpu_usage ?? '-';
const mem = h.mem_usage ?? '-'; const mem = h.mem_usage ?? '-';
@@ -84,7 +86,7 @@ async function loadReportContext(): Promise<string> {
const releaseList: JsonData[] = Array.isArray(releases) ? releases : (releases as JsonData)?.list || []; const releaseList: JsonData[] = Array.isArray(releases) ? releases : (releases as JsonData)?.list || [];
const alertLines = alertList.slice(0, 10).map((a, i) => `${i + 1}.[${a.severity || '?'}|${a.status || '?'}] ${a.rule_name || '-'} → ${a.target || '-'}`); const alertLines = alertList.slice(0, 10).map((a, i) => `${i + 1}.[${a.severity || '?'}|${a.status || '?'}] ${a.rule_name || '-'} → ${a.target || '-'}`);
const releaseLines = releaseList.slice(0, 10).map((r, i) => `${i + 1}.${r.app_name || '-'} ${r.version || ''} [${r.environment || '-'}/${r.status || '-'}] by ${r.author || '-'}`); const releaseLines = releaseList.slice(0, 10).map((r, i) => `${i + 1}.${r.app_name || '-'} ${r.version || ''} [${r.environment || '-'}/${r.status || '-'}] by ${r.author || '-'}`);
return `平台概览:${overview}\n\n最近告警:\n${alertLines.join('\n') || '(无)'}\n\n最近发布:\n${releaseLines.join('\n') || '(无)'}`; return `平台概览:${overview}\n\n最近告警:\n${alertLines.join('\n') || i18n.t('aiops.noneFallback')}\n\n最近发布:\n${releaseLines.join('\n') || i18n.t('aiops.noneFallback')}`;
} }
// 快捷操作类型(contextLoader 可选,支持未来无数据加载的纯文本操作) // Logan.Li // 快捷操作类型(contextLoader 可选,支持未来无数据加载的纯文本操作) // Logan.Li
@@ -98,10 +100,10 @@ interface QuickAction {
// 快捷操作(已配置 LLM 时自动拉取真实平台数据注入上下文后发送) // Logan.Li // 快捷操作(已配置 LLM 时自动拉取真实平台数据注入上下文后发送) // Logan.Li
const quickActions: QuickAction[] = [ const quickActions: QuickAction[] = [
{ id: 'alerts', name: '分析今日告警', icon: AlertTriangle, prompt: '帮我分析以下最近的告警事件,给出根因分析和处置建议(按严重程度排序,给出具体处置步骤)', contextLoader: loadAlertsContext }, { id: 'alerts', name: i18n.t('aiops.analyzeTodayAlerts'), icon: AlertTriangle, prompt: i18n.t('aiops.analyzeAlertsPrompt'), contextLoader: loadAlertsContext },
{ id: 'performance', name: '性能瓶颈分析', icon: Activity, prompt: '分析以下主机实时指标,找出 CPU/内存使用率最高的主机并给出性能优化建议', contextLoader: loadMetricsContext }, { id: 'performance', name: i18n.t('aiops.perfAnalysis'), icon: Activity, prompt: i18n.t('aiops.perfBottleneckPrompt'), contextLoader: loadMetricsContext },
{ id: 'report', name: '生成运维报告', icon: FileText, prompt: '基于以下平台实时数据,生成一份简洁的今日运维报告,包括资源概览、告警情况和发布状态,用 Markdown 格式输出', contextLoader: loadReportContext }, { id: 'report', name: i18n.t('aiops.dailyOpsReport'), icon: FileText, prompt: i18n.t('aiops.opsReportPrompt'), contextLoader: loadReportContext },
{ id: 'optimize', name: '资源优化建议', icon: TrendingUp, prompt: '根据以下主机资源使用数据,提供成本优化和容量规划建议(识别闲置/过载主机,给出缩容/扩容建议)', contextLoader: loadMetricsContext }, { id: 'optimize', name: i18n.t('aiops.resourceOptAdvice'), icon: TrendingUp, prompt: i18n.t('aiops.capacityPlanPrompt'), contextLoader: loadMetricsContext },
]; ];
interface Message { interface Message {
@@ -120,11 +122,12 @@ function fmtTime(iso: string): string {
} }
export function AIOpsAssistant() { export function AIOpsAssistant() {
const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [input, setInput] = useState(''); const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
// 用于中止流式生成(点击"停止"按钮时 abort) // Logan.Li // 用于中止流式生成(点击t('common.stop')按钮时 abort) // Logan.Li
const abortRef = useRef<AbortController | null>(null); const abortRef = useRef<AbortController | null>(null);
// 组件卸载时中止进行中的流式请求,避免 setState on unmounted // Logan.Li // 组件卸载时中止进行中的流式请求,避免 setState on unmounted // Logan.Li
useEffect(() => () => abortRef.current?.abort(), []); useEffect(() => () => abortRef.current?.abort(), []);
@@ -200,7 +203,7 @@ export function AIOpsAssistant() {
// 创建 AbortController 以支持\"停止生成\" // Logan.Li // 创建 AbortController 以支持\"停止生成\" // Logan.Li
const controller = new AbortController(); const controller = new AbortController();
abortRef.current = controller; abortRef.current = controller;
// 用于在收到第一个 chunk 前显示"思考中"占位 // 用于在收到第一个 chunk 前显示t('aiops.thinking')占位
let firstChunkArrived = false; let firstChunkArrived = false;
try { try {
// 仅保留最近 10 条上下文避免 token 超限(不含刚插入的空助手消息) // Logan.Li // 仅保留最近 10 条上下文避免 token 超限(不含刚插入的空助手消息) // Logan.Li
@@ -224,14 +227,14 @@ export function AIOpsAssistant() {
m.id === assistantId m.id === assistantId
? { ? {
...m, ...m,
content: m.content || '(已停止生成)', content: m.content || t('aiops.stopGenerateParen'),
isStopped: true, isStopped: true,
} }
: m, : m,
), ),
); );
} else { } else {
const errMsg = e instanceof Error ? e.message : '对话失败'; const errMsg = e instanceof Error ? e.message : t('aiops.taskFailed');
setMessages((prev) => setMessages((prev) =>
prev.map((m) => prev.map((m) =>
m.id === assistantId m.id === assistantId
@@ -272,7 +275,7 @@ export function AIOpsAssistant() {
try { try {
context = await action.contextLoader(); context = await action.contextLoader();
} catch { } catch {
context = '(平台数据加载失败,请稍后重试或检查后端服务)'; context = t('aiops.platformDataFail');
} finally { } finally {
setContextLoading(null); setContextLoading(null);
} }
@@ -291,15 +294,15 @@ export function AIOpsAssistant() {
setSessionId(newSid); setSessionId(newSid);
setMessages([]); setMessages([]);
setInput(''); setInput('');
toast.success('已开始新对话'); toast.success(t('aiops.newConversationStarted'));
}; };
return ( return (
<PageShell <PageShell
variant="workspace" variant="workspace"
title="AIOps 智能助手" title={t('aiops.assistantTitle')}
subtitle="AI 驱动的智能运维助手" subtitle={t('aiops.aiDrivenAssistant')}
icon={<Brain className="h-5 w-5" />} icon={<Brain className="h-5 w-5" />}
actions={configReady ? ( actions={configReady ? (
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10"> <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
@@ -312,7 +315,7 @@ export function AIOpsAssistant() {
<div className="col-span-1 space-y-4"> <div className="col-span-1 space-y-4">
<Card className="dg-card"> <Card className="dg-card">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="text-sm text-[var(--dg-text-secondary)]">快速操作</CardTitle> <CardTitle className="text-sm text-[var(--dg-text-secondary)]">{t('aiops.quickActions')}</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-2"> <CardContent className="space-y-2">
{quickActions.map((action) => ( {quickActions.map((action) => (
@@ -330,7 +333,7 @@ export function AIOpsAssistant() {
)} )}
<span className="text-sm">{action.name}</span> <span className="text-sm">{action.name}</span>
{configReady && action.contextLoader && ( {configReady && action.contextLoader && (
<span className="ml-auto text-[10px] dg-text-green/60 shrink-0">实时</span> <span className="ml-auto text-[10px] dg-text-green/60 shrink-0">{t('common.realtime')}</span>
)} )}
</Button> </Button>
))} ))}
@@ -344,11 +347,11 @@ export function AIOpsAssistant() {
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="flex items-center gap-2 text-sm dg-text-secondary"> <div className="flex items-center gap-2 text-sm dg-text-secondary">
<AlertTriangle className="h-4 w-4 dg-text-yellow" /> <AlertTriangle className="h-4 w-4 dg-text-yellow" />
<span>智能告警分析</span> <span>{t('aiops.alertAnalysisTitle')}</span>
</div> </div>
<div className="flex items-center gap-2 text-sm dg-text-secondary"> <div className="flex items-center gap-2 text-sm dg-text-secondary">
<Activity className="h-4 w-4 dg-text-blue" /> <Activity className="h-4 w-4 dg-text-blue" />
<span>性能瓶颈识别</span> <span>{t('aiops.performanceBottleneck')}</span>
</div> </div>
<div className="flex items-center gap-2 text-sm dg-text-secondary"> <div className="flex items-center gap-2 text-sm dg-text-secondary">
<FileText className="h-4 w-4 dg-text-green" /> <FileText className="h-4 w-4 dg-text-green" />
@@ -356,7 +359,7 @@ export function AIOpsAssistant() {
</div> </div>
<div className="flex items-center gap-2 text-sm dg-text-secondary"> <div className="flex items-center gap-2 text-sm dg-text-secondary">
<Terminal className="h-4 w-4 dg-text-purple" /> <Terminal className="h-4 w-4 dg-text-purple" />
<span>脚本自动生成</span> <span>{t('aiops.autoScriptGenerated')}</span>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -368,19 +371,19 @@ export function AIOpsAssistant() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Bot className="h-5 w-5 dg-text-purple" /> <Bot className="h-5 w-5 dg-text-purple" />
<span className="font-medium text-[var(--dg-text-primary)]">AI 助手</span> <span className="font-medium text-[var(--dg-text-primary)]">{t('aiops.aiAssistantShort')}</span>
{configReady ? ( {configReady ? (
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10 text-xs"> <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10 text-xs">
<span className="w-2 h-2 rounded-full bg-emerald-400 mr-1 animate-pulse" /> <span className="w-2 h-2 rounded-full bg-emerald-400 mr-1 animate-pulse" />
在线 {t('common.online')}
</Badge> </Badge>
) : ( ) : (
<Badge variant="outline" className="border-[var(--dg-border-hover)] dg-text-secondary text-xs">离线</Badge> <Badge variant="outline" className="border-[var(--dg-border-hover)] dg-text-secondary text-xs">{t('common.offline')}</Badge>
)} )}
</div> </div>
<Button variant="ghost" size="sm" className="dg-text-secondary" onClick={handleNewChat} disabled={messages.length === 0}> <Button variant="ghost" size="sm" className="dg-text-secondary" onClick={handleNewChat} disabled={messages.length === 0}>
<RotateCw className="h-4 w-4 mr-1" /> <RotateCw className="h-4 w-4 mr-1" />
新对话 {t('aiops.newConversation')}
</Button> </Button>
</div> </div>
</CardHeader> </CardHeader>
@@ -390,7 +393,7 @@ export function AIOpsAssistant() {
{messages.length === 0 && !isLoading && ( {messages.length === 0 && !isLoading && (
<div className="flex flex-col items-center justify-center py-16 dg-text-muted"> <div className="flex flex-col items-center justify-center py-16 dg-text-muted">
<MessageSquare className="h-10 w-10 mb-3 opacity-30" /> <MessageSquare className="h-10 w-10 mb-3 opacity-30" />
<p>{configReady ? '暂无对话记录,输入问题开始与 AI 助手对话' : 'AI 助手尚未配置大模型'}</p> <p>{configReady ? t('aiops.emptyConvHint') : t('aiops.aiNotConfigured')}</p>
{!configReady && ( {!configReady && (
<Button <Button
variant="outline" variant="outline"
@@ -399,13 +402,13 @@ export function AIOpsAssistant() {
onClick={() => navigate('/ai-llm-config')} onClick={() => navigate('/ai-llm-config')}
> >
<Settings className="h-4 w-4 mr-1" /> <Settings className="h-4 w-4 mr-1" />
前往配置 {t('monitor.dashboard.zabbix.goConfig')}
</Button> </Button>
)} )}
</div> </div>
)} )}
{messages.map((message) => { {messages.map((message) => {
// 流式中:助手消息内容为空且正在加载时显示"思考中"占位 // Logan.Li // 流式中:助手消息内容为空且正在加载时显示t('aiops.thinking')占位 // Logan.Li
const isStreaming = isLoading && message.role === 'assistant' && message.content === ''; const isStreaming = isLoading && message.role === 'assistant' && message.content === '';
return ( return (
<div key={message.id} className={`flex gap-3 ${message.role === 'user' ? 'flex-row-reverse' : ''}`}> <div key={message.id} className={`flex gap-3 ${message.role === 'user' ? 'flex-row-reverse' : ''}`}>
@@ -427,7 +430,7 @@ export function AIOpsAssistant() {
{isStreaming ? ( {isStreaming ? (
<div className="flex items-center gap-2 dg-text-secondary"> <div className="flex items-center gap-2 dg-text-secondary">
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
<span className="text-sm">思考中...</span> <span className="text-sm">{t('aiops.thinking')}</span>
</div> </div>
) : ( ) : (
message.content message.content
@@ -439,13 +442,13 @@ export function AIOpsAssistant() {
</div> </div>
<div className="text-xs dg-text-muted mt-1"> <div className="text-xs dg-text-muted mt-1">
{fmtTime(message.timestamp)} {fmtTime(message.timestamp)}
{message.isStopped && <span className="ml-2 dg-text-muted">(已停止)</span>} {message.isStopped && <span className="ml-2 dg-text-muted">{t('aiops.stoppedParen')}</span>}
</div> </div>
</div> </div>
</div> </div>
); );
})} })}
{/* 流式输出时占位气泡已包含"思考中"提示,无需独立 spinner */} {/* 流式输出时占位气泡已包含t('aiops.thinking')提示,无需独立 spinner */}
<div ref={messagesEndRef} /> <div ref={messagesEndRef} />
</div> </div>
</ScrollArea> </ScrollArea>
@@ -456,7 +459,7 @@ export function AIOpsAssistant() {
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSend()} onKeyDown={(e) => e.key === 'Enter' && handleSend()}
placeholder={configReady ? '输入运维问题,或选择左侧快速操作...' : '请先配置大模型...'} placeholder={configReady ? t('aiops.assistantPlaceholder') : t('aiops.configLlmFirst')}
className="flex-1 dg-input" className="flex-1 dg-input"
disabled={isLoading} disabled={isLoading}
/> />
@@ -469,7 +472,7 @@ export function AIOpsAssistant() {
variant="outline" variant="outline"
className="border-red-500/40 dg-text-red hover:bg-red-500/10" className="border-red-500/40 dg-text-red hover:bg-red-500/10"
onClick={() => abortRef.current?.abort()} onClick={() => abortRef.current?.abort()}
title="停止生成" title={t('aiops.stopGenerate')}
> >
<Square className="h-4 w-4" /> <Square className="h-4 w-4" />
</Button> </Button>
@@ -36,11 +36,13 @@ import {
} from './predictUtils'; } from './predictUtils';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
// 重新导出 CapacityForecast,兼容已有 import 路径 './AIPredictiveAnalytics' // 重新导出 CapacityForecast,兼容已有 import 路径 './AIPredictiveAnalytics'
export type { CapacityForecast }; export type { CapacityForecast };
export function AIPredictiveAnalytics() { export function AIPredictiveAnalytics() {
const { t } = useTranslation();
const [selectedTimeRange, setSelectedTimeRange] = useState('24h'); const [selectedTimeRange, setSelectedTimeRange] = useState('24h');
const [isAnalyzing, setIsAnalyzing] = useState(false); const [isAnalyzing, setIsAnalyzing] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -106,16 +108,16 @@ export function AIPredictiveAnalytics() {
}; };
const pageTabs = [ const pageTabs = [
{ id: 'metrics', label: '指标预测' }, { id: 'metrics', label: t('aiops.metricPredict') },
{ id: 'capacity', label: '容量规划' }, { id: 'capacity', label: t('aiops.predictiveCapacity') },
{ id: 'anomaly', label: '异常预测' }, { id: 'anomaly', label: t('aiops.alertAnalysisPredict') },
]; ];
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title="AI 预测分析" title={t('aiops.aiPredictiveAnalysis')}
subtitle="基于实时指标时序数据的线性回归预测与容量规划" subtitle={t('aiops.capacityPredictDesc')}
icon={<Brain className="h-5 w-5" />} icon={<Brain className="h-5 w-5" />}
tabs={pageTabs} tabs={pageTabs}
activeTab={activeTab} activeTab={activeTab}
@@ -123,10 +125,10 @@ export function AIPredictiveAnalytics() {
metrics={( metrics={(
<StatStrip <StatStrip
items={[ items={[
{ label: '置信度', value: `${accuracy}%`, color: 'emerald' }, { label: t('aiops.assistantConfidence'), value: `${accuracy}%`, color: 'emerald' },
{ label: '高风险', value: predictedAlertCount, color: 'amber' }, { label: t('aiops.predictiveHighRisk'), value: predictedAlertCount, color: 'amber' },
{ label: '容量预警', value: capacityWarningCount, color: 'red' }, { label: t('aiops.capacityWarning'), value: capacityWarningCount, color: 'red' },
{ label: '指标', value: predictions.length, color: 'purple' }, { label: t('cloud.colMetric'), value: predictions.length, color: 'purple' },
]} ]}
/> />
)} )}
@@ -138,10 +140,10 @@ export function AIPredictiveAnalytics() {
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
<SelectItem value="1h">1小时</SelectItem> <SelectItem value="1h">{t('monitor.traceMgr.hour1')}</SelectItem>
<SelectItem value="24h">24小时</SelectItem> <SelectItem value="24h">{t('monitor.traceMgr.hour24')}</SelectItem>
<SelectItem value="7d">7天</SelectItem> <SelectItem value="7d">{t('monitor.traceMgr.day7')}</SelectItem>
<SelectItem value="30d">30天</SelectItem> <SelectItem value="30d">{t('monitor.siteProtocol.ssl.ref30days')}</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<Button variant="outline" className="dg-btn-secondary" onClick={handleRefresh}> <Button variant="outline" className="dg-btn-secondary" onClick={handleRefresh}>
@@ -171,7 +173,7 @@ export function AIPredictiveAnalytics() {
<Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载指标数据... <Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载指标数据...
</div> </div>
) : predictions.length === 0 ? ( ) : predictions.length === 0 ? (
<div className="text-center py-12 dg-text-muted">暂无指标数据</div> <div className="text-center py-12 dg-text-muted">{t('aiops.noMetricData')}</div>
) : ( ) : (
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{predictions.map((prediction, idx) => ( {predictions.map((prediction, idx) => (
@@ -194,7 +196,7 @@ export function AIPredictiveAnalytics() {
<div className="grid grid-cols-2 gap-4 mb-3"> <div className="grid grid-cols-2 gap-4 mb-3">
<div> <div>
<p className="text-xs dg-text-muted mb-1">当前值</p> <p className="text-xs dg-text-muted mb-1">{t('monitor.alertValue')}</p>
<p className="text-lg font-bold text-[var(--dg-text-primary)]"> <p className="text-lg font-bold text-[var(--dg-text-primary)]">
{prediction.current} {prediction.current}
{prediction.unit} {prediction.unit}
@@ -211,7 +213,7 @@ export function AIPredictiveAnalytics() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-xs dg-text-secondary">置信度</span> <span className="text-xs dg-text-secondary">{t('aiops.assistantConfidence')}</span>
<div className="w-16 h-1.5 bg-[var(--dg-bg-active)] rounded-full overflow-hidden"> <div className="w-16 h-1.5 bg-[var(--dg-bg-active)] rounded-full overflow-hidden">
<div <div
className="h-full bg-gradient-to-r from-blue-500 to-purple-500" className="h-full bg-gradient-to-r from-blue-500 to-purple-500"
@@ -239,18 +241,18 @@ export function AIPredictiveAnalytics() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2"> <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<AlertTriangle className="h-5 w-5 dg-text-red" /> <AlertTriangle className="h-5 w-5 dg-text-red" />
异常事件预测 {t('aiops.anomalyEventPredict')}
</CardTitle> </CardTitle>
<span className="text-xs dg-text-muted">基于告警规则阈值与实时趋势概率推算</span> <span className="text-xs dg-text-muted">{t('aiops.anomalyBasis')}</span>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loading ? ( {loading ? (
<div className="flex items-center justify-center py-12 dg-text-muted"> <div className="flex items-center justify-center py-12 dg-text-muted">
<Loader2 className="h-5 w-5 animate-spin mr-2" /> 加载异常预测... <Loader2 className="h-5 w-5 animate-spin mr-2" /> {t('aiops.loadAnomalyDot')}
</div> </div>
) : dedupedAnomalies.length === 0 ? ( ) : dedupedAnomalies.length === 0 ? (
<div className="text-center py-12 dg-text-muted">暂无异常预测数据</div> <div className="text-center py-12 dg-text-muted">{t('aiops.noAnomalyData')}</div>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-3">
{dedupedAnomalies.map((anomaly, idx) => ( {dedupedAnomalies.map((anomaly, idx) => (
@@ -327,7 +329,7 @@ export function AIPredictiveAnalytics() {
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<Zap className="h-4 w-4 dg-text-green mt-0.5" /> <Zap className="h-4 w-4 dg-text-green mt-0.5" />
<div> <div>
<span className="text-sm dg-text-secondary">建议操作:</span> <span className="text-sm dg-text-secondary">{t('aiops.suggestedActions')}</span>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">{anomaly.suggestedAction}</p> <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{anomaly.suggestedAction}</p>
</div> </div>
</div> </div>
+57 -54
View File
@@ -20,6 +20,8 @@ import AgentCLIHistory from './AgentCLIHistory';
import { AgentChatTimeline, type ChatItem } from './AgentCLIMessages'; import { AgentChatTimeline, type ChatItem } from './AgentCLIMessages';
import type { AgentCliSession } from '@/api/aiops/agent-cli'; import type { AgentCliSession } from '@/api/aiops/agent-cli';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
// WS 事件类型(后端 wsEvent 对应) // Logan.Li // WS 事件类型(后端 wsEvent 对应) // Logan.Li
interface WsEvent { interface WsEvent {
@@ -42,39 +44,39 @@ interface WsEvent {
// 四大核心模块说明(灯泡 Popover) // Logan.Li // 四大核心模块说明(灯泡 Popover) // Logan.Li
const TIPS = [ const TIPS = [
{ icon: Cpu, title: 'LLM + 工具层', color: 'text-sky-400', { icon: Cpu, title: i18n.t('aiops.llmToolLayer'), color: 'text-sky-400',
desc: 'OpenAI 兼容 LLM;工具含 ssh_execute(远程执行)与 analyze_output(输出分析)。' }, desc: i18n.t('aiops.llmToolDesc') },
{ icon: Shield, title: '安全 + Prompt', color: 'dg-text-yellow', { icon: Shield, title: i18n.t('aiops.safetyPrompt'), color: 'dg-text-yellow',
desc: '五级风险评估 + 三级安全模式;危险命令硬性拒绝,高危命令弹框确认。' }, desc: i18n.t('aiops.safetyFrameworkDesc') },
{ icon: Brain, title: 'ReAct 核心引擎', color: 'dg-text-purple', { icon: Brain, title: i18n.t('aiops.reactEngine'), color: 'dg-text-purple',
desc: '思考→行动→观察循环(最多 16 轮),失败换法重试,循环检测防死循环。' }, desc: i18n.t('aiops.reactDesc') },
{ icon: Database, title: '自进化引擎', color: 'dg-text-green', { icon: Database, title: i18n.t('aiops.selfEvolveEngine'), color: 'dg-text-green',
desc: '四层记忆异步学习,同类任务自动注入历史经验,越用越聪明。' }, desc: i18n.t('aiops.selfEvolveDesc') },
]; ];
// 安全模式说明(灯泡 Popover 展示) // Logan.Li // 安全模式说明(灯泡 Popover 展示) // Logan.Li
const SAFETY_MODES = [ const SAFETY_MODES = [
{ {
value: 'strict', value: 'strict',
label: '严格', label: i18n.t('aiops.safetyStrict'),
short: '中风险+确认', short: i18n.t('aiops.safetyMidRiskConfirm'),
desc: 'chmod、文件修改、服务重启等中风险及以上命令均需弹框确认。适合生产环境或不熟悉的主机。', desc: i18n.t('aiops.safetyMidDesc'),
examples: 'chmod、mv、systemctl restart', examples: 'chmod、mv、systemctl restart',
}, },
{ {
value: 'balanced', value: 'balanced',
label: '均衡', label: i18n.t('aiops.safetyBalanced'),
short: '高风险+确认', short: i18n.t('aiops.safetyHighRiskConfirm'),
desc: '日常排障命令(查看日志、ps、df)自动执行;删除文件、重启服务等高风险操作才需确认。推荐日常使用。', desc: i18n.t('aiops.safetyBalancedDesc'),
examples: 'cat/grep/df 自动 · rm/reboot 确认', examples: 'cat/grep/df 自动 · rm/reboot 确认',
recommended: true, recommended: true,
}, },
{ {
value: 'permissive', value: 'permissive',
label: '宽松', label: i18n.t('aiops.safetyLoose'),
short: '仅拦截危险', short: i18n.t('aiops.safetyBlockDanger'),
desc: '除 rm -rf /、mkfs 等危险命令硬性拦截外,其余全部自动执行。仅适合隔离测试环境。', desc: i18n.t('aiops.safetyStrictDesc'),
examples: 'rm -rf / 拦截 · 其余自动', examples: i18n.t('aiops.safetyAutoExcept'),
}, },
] as const; ] as const;
@@ -84,6 +86,7 @@ function formatServerLabel(s: { hostname: string; ip: string }) {
} }
export default function AgentCLI() { export default function AgentCLI() {
const { t } = useTranslation();
const confirm = useConfirm(); const confirm = useConfirm();
const [servers, setServers] = useState<{ id: number; hostname: string; ip: string }[]>([]); const [servers, setServers] = useState<{ id: number; hostname: string; ip: string }[]>([]);
@@ -137,7 +140,7 @@ export default function AgentCLI() {
const connectTimer = window.setTimeout(() => { const connectTimer = window.setTimeout(() => {
if (active && !everConnected && ws.readyState !== WebSocket.OPEN) { if (active && !everConnected && ws.readyState !== WebSocket.OPEN) {
push({ kind: 'error', content: '连接主机超时:后端长时间未响应,请检查后端服务状态、SSH 凭据与大模型配置后重试。' }); push({ kind: 'error', content: t('aiops.connectHostTimeout') });
try { ws.close(); } catch { /* noop */ } try { ws.close(); } catch { /* noop */ }
} }
}, 8000); }, 8000);
@@ -149,9 +152,9 @@ export default function AgentCLI() {
setConnected(false); setConnected(false);
setRunning(false); setRunning(false);
if (!everConnected) { if (!everConnected) {
push({ kind: 'error', content: '主机连接被拒绝:常见为该主机未关联可用的 SSH 凭据(密码或密钥),或大模型未启用。请到「服务器管理」确认该主机凭据、到「大模型设置」确认已启用模型后重试。' }); push({ kind: 'error', content: t('aiops.hostConnectRefused') });
} else if (!viewMode) { } else if (!viewMode) {
push({ kind: 'info', content: '连接已关闭' }); push({ kind: 'info', content: t('aiops.connClosed') });
} }
}; };
ws.onerror = () => { setConnected(false); }; ws.onerror = () => { setConnected(false); };
@@ -277,7 +280,7 @@ export default function AgentCLI() {
return [...next, { return [...next, {
id: nextId(), id: nextId(),
kind: 'done', kind: 'done',
content: text || '任务已完成,请查看上方工具执行结果。', content: text || t('aiops.taskDone'),
round: ev.round, round: ev.round,
}]; }];
}); });
@@ -299,10 +302,10 @@ export default function AgentCLI() {
// 高危命令确认(后端驱动 → 弹框 → 回传) // Logan.Li // 高危命令确认(后端驱动 → 弹框 → 回传) // Logan.Li
const handleConfirm = async (ev: WsEvent) => { const handleConfirm = async (ev: WsEvent) => {
const ok = await confirm({ const ok = await confirm({
title: '⚠️ 确认执行高危操作', title: t('aiops.confirmHighRisk'),
description: `工具:${ev.tool_name}\n风险:${ev.risk}\n命令:${ev.command || '(无)'}`, description: `工具:${ev.tool_name}\n风险:${ev.risk}\n命令:${ev.command || t('system.none')}`,
confirmText: '确认执行', confirmText: t('aiops.assistantConfirmExec'),
cancelText: '拒绝', cancelText: t('common.deny'),
variant: 'destructive', variant: 'destructive',
}); });
wsRef.current?.send(JSON.stringify({ type: ok ? 'confirm' : 'deny', confirm_id: ev.confirm_id })); wsRef.current?.send(JSON.stringify({ type: ok ? 'confirm' : 'deny', confirm_id: ev.confirm_id }));
@@ -313,9 +316,9 @@ export default function AgentCLI() {
const send = () => { const send = () => {
const q = input.trim(); const q = input.trim();
if (!q) return; if (!q) return;
if (!serverId) { toast.error('请先选择目标主机'); return; } if (!serverId) { toast.error(t('aiops.selectTargetHostFirst')); return; }
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) { if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
toast.error('连接未就绪,请检查大模型配置或刷新页面重试'); toast.error(t('aiops.notConnectedHint'));
return; return;
} }
if (running) return; if (running) return;
@@ -350,7 +353,7 @@ export default function AgentCLI() {
const resumeHistorySession = () => { const resumeHistorySession = () => {
if (!viewSession) return; if (!viewSession) return;
if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) { if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
toast.error('连接未就绪,请稍后重试'); toast.error(t('aiops.notConnectedRetry'));
return; return;
} }
wsRef.current.send(JSON.stringify({ type: 'resume', session_id: viewSession.id })); wsRef.current.send(JSON.stringify({ type: 'resume', session_id: viewSession.id }));
@@ -373,7 +376,7 @@ export default function AgentCLI() {
<PageShell <PageShell
variant="workspace" variant="workspace"
title="Agent CLI" title="Agent CLI"
subtitle="自然语言驱动 SSH 自主排障与部署" subtitle={t('aiops.agentCliSubtitle')}
icon={<Bot className="h-5 w-5" />} icon={<Bot className="h-5 w-5" />}
className="h-full" className="h-full"
contentClassName="h-full flex flex-col min-h-0 gap-2" contentClassName="h-full flex flex-col min-h-0 gap-2"
@@ -383,7 +386,7 @@ export default function AgentCLI() {
<Select value={serverId} onValueChange={setServerId}> <Select value={serverId} onValueChange={setServerId}>
<SelectTrigger className="w-80 max-w-[22rem] h-8 text-xs dg-input min-w-0"> <SelectTrigger className="w-80 max-w-[22rem] h-8 text-xs dg-input min-w-0">
<Server className="w-3.5 h-3.5 mr-1.5 dg-text-secondary shrink-0" /> <Server className="w-3.5 h-3.5 mr-1.5 dg-text-secondary shrink-0" />
<SelectValue placeholder="选择目标主机" className="truncate"> <SelectValue placeholder={t('automation.remoteSelectHost')} className="truncate">
{selectedServer ? formatServerLabel(selectedServer) : undefined} {selectedServer ? formatServerLabel(selectedServer) : undefined}
</SelectValue> </SelectValue>
</SelectTrigger> </SelectTrigger>
@@ -410,14 +413,14 @@ export default function AgentCLI() {
</Select> </Select>
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-yellow hover:bg-[var(--dg-bg-hover)]" title="安全模式说明"> <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-yellow hover:bg-[var(--dg-bg-hover)]" title={t('aiops.safetyModeDesc')}>
<Lightbulb className="w-4 h-4" /> <Lightbulb className="w-4 h-4" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start" className="w-80 dg-input p-3 space-y-2.5"> <PopoverContent align="start" className="w-80 dg-input p-3 space-y-2.5">
<div className="text-sm font-medium text-[var(--dg-text-primary)]">安全模式说明</div> <div className="text-sm font-medium text-[var(--dg-text-primary)]">{t('aiops.safetyModeDesc')}</div>
<p className="text-[11px] dg-text-muted leading-relaxed"> <p className="text-[11px] dg-text-muted leading-relaxed">
控制 AI 执行远程命令前是否需要你确认。危险命令(如 rm -rf /)任何模式均硬性拦截。 {t('aiops.safetyModeHint')}
</p> </p>
{SAFETY_MODES.map((m) => ( {SAFETY_MODES.map((m) => (
<div <div
@@ -432,7 +435,7 @@ export default function AgentCLI() {
<span className="font-medium text-[var(--dg-text-primary)]">{m.label}</span> <span className="font-medium text-[var(--dg-text-primary)]">{m.label}</span>
<span className="text-[10px] dg-text-muted">{m.short}</span> <span className="text-[10px] dg-text-muted">{m.short}</span>
{'recommended' in m && m.recommended && ( {'recommended' in m && m.recommended && (
<Badge className="text-[9px] px-1 py-0 bg-violet-500/15 dg-text-purple border-violet-500/30">推荐</Badge> <Badge className="text-[9px] px-1 py-0 bg-violet-500/15 dg-text-purple border-violet-500/30">{t('common.recommended')}</Badge>
)} )}
</div> </div>
<p className="dg-text-secondary leading-relaxed mt-1">{m.desc}</p> <p className="dg-text-secondary leading-relaxed mt-1">{m.desc}</p>
@@ -448,7 +451,7 @@ export default function AgentCLI() {
size="sm" size="sm"
className="h-8 px-2 text-xs dg-text-secondary" className="h-8 px-2 text-xs dg-text-secondary"
onClick={() => setHistoryOpen((v) => !v)} onClick={() => setHistoryOpen((v) => !v)}
title={historyOpen ? '收起历史任务' : '展开历史任务'} title={historyOpen ? t('aiops.collapseHistory') : t('aiops.expandHistory')}
> >
{historyOpen ? <PanelLeftClose className="w-3.5 h-3.5 mr-1" /> : <History className="w-3.5 h-3.5 mr-1" />} {historyOpen ? <PanelLeftClose className="w-3.5 h-3.5 mr-1" /> : <History className="w-3.5 h-3.5 mr-1" />}
历史 历史
@@ -458,14 +461,14 @@ export default function AgentCLI() {
{connected && ( {connected && (
<Badge className="h-6 text-[10px] bg-emerald-500/15 dg-text-green border-emerald-500/30"> <Badge className="h-6 text-[10px] bg-emerald-500/15 dg-text-green border-emerald-500/30">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1" />已连接 <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1" />{t('common.connected')}
</Badge> </Badge>
)} )}
{viewMode && ( {viewMode && (
<Badge className="h-6 text-[10px] bg-amber-500/15 dg-text-yellow border-amber-500/30">查看记录</Badge> <Badge className="h-6 text-[10px] bg-amber-500/15 dg-text-yellow border-amber-500/30">{t('aiops.viewRecord')}</Badge>
)} )}
{canContinue && !running && !viewMode && ( {canContinue && !running && !viewMode && (
<Badge className="h-6 text-[10px] bg-violet-500/15 dg-text-purple border-violet-500/30">可追问</Badge> <Badge className="h-6 text-[10px] bg-violet-500/15 dg-text-purple border-violet-500/30">{t('aiops.canFollowup')}</Badge>
)} )}
{running && ( {running && (
<Badge className="h-6 text-[10px] bg-blue-500/15 dg-text-blue border-blue-500/30"> <Badge className="h-6 text-[10px] bg-blue-500/15 dg-text-blue border-blue-500/30">
@@ -475,12 +478,12 @@ export default function AgentCLI() {
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 dg-text-muted hover:dg-text-secondary" title="核心能力说明"> <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-muted hover:dg-text-secondary" title={t('aiops.coreAbilityTitle')}>
<Lightbulb className="w-4 h-4" /> <Lightbulb className="w-4 h-4" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="end" className="w-80 dg-input p-3 space-y-2"> <PopoverContent align="end" className="w-80 dg-input p-3 space-y-2">
<div className="text-sm font-medium text-[var(--dg-text-primary)]">核心能力</div> <div className="text-sm font-medium text-[var(--dg-text-primary)]">{t('aiops.coreAbility')}</div>
{TIPS.map((t) => ( {TIPS.map((t) => (
<div key={t.title} className="flex gap-2 p-2 rounded-md bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)]"> <div key={t.title} className="flex gap-2 p-2 rounded-md bg-[var(--dg-bg-tertiary)]/40 border border-[var(--dg-border)]">
<t.icon className={`w-4 h-4 mt-0.5 shrink-0 ${t.color}`} /> <t.icon className={`w-4 h-4 mt-0.5 shrink-0 ${t.color}`} />
@@ -514,11 +517,11 @@ export default function AgentCLI() {
</span> </span>
{canResumeView && ( {canResumeView && (
<Button size="sm" variant="outline" className="h-7 text-xs" onClick={resumeHistorySession}> <Button size="sm" variant="outline" className="h-7 text-xs" onClick={resumeHistorySession}>
继续追问 {t('aiops.continueTask')}
</Button> </Button>
)} )}
<Button size="sm" variant="ghost" className="h-7 text-xs" onClick={handleNewTask}> <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={handleNewTask}>
新建任务 {t('aiops.newTask')}
</Button> </Button>
</div> </div>
)} )}
@@ -533,15 +536,15 @@ export default function AgentCLI() {
<Terminal className="w-10 h-10 opacity-40" /> <Terminal className="w-10 h-10 opacity-40" />
{!serverId ? ( {!serverId ? (
<> <>
<div className="text-sm">请先选择一台目标主机</div> <div className="text-sm">{t('aiops.selectOneHostFirst')}</div>
{servers.length === 0 && ( {servers.length === 0 && (
<div className="text-xs dg-text-muted">暂无主机,请先前往「资产管理」添加服务器</div> <div className="text-xs dg-text-muted">{t('aiops.noHostsHint')}</div>
)} )}
</> </>
) : !connected ? ( ) : !connected ? (
<> <>
<Loader2 className="w-6 h-6 animate-spin dg-text-blue" /> <Loader2 className="w-6 h-6 animate-spin dg-text-blue" />
<div className="text-sm">正在连接主机...</div> <div className="text-sm">{t('aiops.connectingHost')}</div>
</> </>
) : ( ) : (
<div className="text-sm text-center max-w-md"> <div className="text-sm text-center max-w-md">
@@ -564,7 +567,7 @@ export default function AgentCLI() {
className="h-8 w-8 rounded-full shadow-md border border-[var(--dg-border)] bg-[var(--surface-raised)]/95 opacity-90 hover:opacity-100" className="h-8 w-8 rounded-full shadow-md border border-[var(--dg-border)] bg-[var(--surface-raised)]/95 opacity-90 hover:opacity-100"
onClick={scrollToTop} onClick={scrollToTop}
disabled={scrollAtTop} disabled={scrollAtTop}
title="去顶部" title={t('common.goTop')}
> >
<Rocket className="h-3.5 w-3.5 -rotate-45" /> <Rocket className="h-3.5 w-3.5 -rotate-45" />
</Button> </Button>
@@ -575,7 +578,7 @@ export default function AgentCLI() {
className="h-8 w-8 rounded-full shadow-md border border-[var(--dg-border)] bg-[var(--surface-raised)]/95 opacity-90 hover:opacity-100" className="h-8 w-8 rounded-full shadow-md border border-[var(--dg-border)] bg-[var(--surface-raised)]/95 opacity-90 hover:opacity-100"
onClick={scrollToBottom} onClick={scrollToBottom}
disabled={scrollAtBottom} disabled={scrollAtBottom}
title="去底部" title={t('common.goBottom')}
> >
<Rocket className="h-3.5 w-3.5 rotate-[135deg]" /> <Rocket className="h-3.5 w-3.5 rotate-[135deg]" />
</Button> </Button>
@@ -590,23 +593,23 @@ export default function AgentCLI() {
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }} onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
placeholder={ placeholder={
viewMode ? '查看模式中,点击「继续追问」或「新建任务」' viewMode ? t('aiops.viewModeHint')
: canContinue ? '继续追问,回车发送(Shift+回车换行)' : canContinue ? t('aiops.followupPlaceholder')
: serverId ? '输入任务描述,回车发送(Shift+回车换行)' : '请先选择目标主机' : serverId ? t('aiops.inputPlaceholderAgent') : t('aiops.selectTargetHostFirst')
} }
rows={3} rows={3}
disabled={viewMode} disabled={viewMode}
className="w-full resize-none dg-input min-h-[5rem] max-h-40 text-sm leading-relaxed disabled:opacity-50" className="w-full resize-none dg-input min-h-[5rem] max-h-40 text-sm leading-relaxed disabled:opacity-50"
/> />
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<span className="text-[10px] dg-text-muted">Shift+回车换行 · 回车发送</span> <span className="text-[10px] dg-text-muted">{t('aiops.shiftEnterHint')}</span>
{running ? ( {running ? (
<Button variant="destructive" size="sm" onClick={stop} className="bg-red-600 hover:bg-red-700"> <Button variant="destructive" size="sm" onClick={stop} className="bg-red-600 hover:bg-red-700">
<Square className="w-3.5 h-3.5 mr-1" /> 停止 <Square className="w-3.5 h-3.5 mr-1" /> {t('common.stop')}
</Button> </Button>
) : ( ) : (
<Button size="sm" onClick={send} disabled={!input.trim() || viewMode} className="bg-blue-600 hover:bg-blue-700"> <Button size="sm" onClick={send} disabled={!input.trim() || viewMode} className="bg-blue-600 hover:bg-blue-700">
<Send className="w-3.5 h-3.5 mr-1" /> 执行 <Send className="w-3.5 h-3.5 mr-1" /> {t('common.execute')}
</Button> </Button>
)} )}
</div> </div>
+65 -62
View File
@@ -16,6 +16,8 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import { aiApi, type LLMConfigData, type LLMTestResult } from '@/api'; import { aiApi, type LLMConfigData, type LLMTestResult } from '@/api';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
// 单个提供商配置:默认 endpoint、候选模型、套餐/充值引导链接 // Logan.Li // 单个提供商配置:默认 endpoint、候选模型、套餐/充值引导链接 // Logan.Li
interface ProviderMeta { interface ProviderMeta {
@@ -39,81 +41,81 @@ const CLOUD_GENERAL_PROVIDERS: ProviderMeta[] = [
id: 'deepseek', name: 'DeepSeek', endpoint: 'https://api.deepseek.com/v1', id: 'deepseek', name: 'DeepSeek', endpoint: 'https://api.deepseek.com/v1',
models: ['deepseek-v4-pro', 'deepseek-v4-flash', 'deepseek-reasoner', 'deepseek-chat'], models: ['deepseek-v4-pro', 'deepseek-v4-flash', 'deepseek-reasoner', 'deepseek-chat'],
planUrl: 'https://platform.deepseek.com', planUrl: 'https://platform.deepseek.com',
planLabel: '获取 API Key', planLabel: i18n.t('aiops.getApiKey'),
planHint: '在 DeepSeek 开放平台注册并充值后创建 API Key', planHint: i18n.t('aiops.deepseekHint'),
}, },
{ {
id: 'glm', name: '智谱 GLM (通用)', endpoint: 'https://open.bigmodel.cn/api/paas/v4', id: 'glm', name: i18n.t('aiops.zhipuGeneral'), endpoint: 'https://open.bigmodel.cn/api/paas/v4',
models: ['glm-4.5', 'glm-4.6', 'glm-4-flash', 'glm-4-air', 'glm-4-plus'], models: ['glm-4.5', 'glm-4.6', 'glm-4-flash', 'glm-4-air', 'glm-4-plus'],
planUrl: 'https://open.bigmodel.cn/', planUrl: 'https://open.bigmodel.cn/',
planLabel: '智谱开放平台', planLabel: i18n.t('aiops.zhipuOpenPlatform'),
planHint: '注册智谱账号并开通模型服务后获取 API Key', planHint: i18n.t('aiops.zhipuGetKey'),
}, },
{ {
id: 'moonshot', name: 'Kimi (Moonshot)', endpoint: 'https://api.moonshot.cn/v1', id: 'moonshot', name: 'Kimi (Moonshot)', endpoint: 'https://api.moonshot.cn/v1',
models: ['kimi-latest', 'moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k'], models: ['kimi-latest', 'moonshot-v1-8k', 'moonshot-v1-32k', 'moonshot-v1-128k'],
planUrl: 'https://www.kimi.com/membership/pricing', planUrl: 'https://www.kimi.com/membership/pricing',
planLabel: '购买 Kimi 套餐', planLabel: i18n.t('aiops.buyKimiPlan'),
planHint: 'Kimi 通用 API 需在会员页开通并充值', planHint: i18n.t('aiops.kimiGeneralHint'),
}, },
{ {
id: 'minimax', name: 'MiniMax (按量)', endpoint: 'https://api.minimaxi.com/v1', id: 'minimax', name: i18n.t('aiops.minimaxPayg'), endpoint: 'https://api.minimaxi.com/v1',
models: ['MiniMax-M3', 'MiniMax-M2.7', 'MiniMax-M2.7-highspeed', 'MiniMax-M2.5', 'MiniMax-M2.5-highspeed'], models: ['MiniMax-M3', 'MiniMax-M2.7', 'MiniMax-M2.7-highspeed', 'MiniMax-M2.5', 'MiniMax-M2.5-highspeed'],
planUrl: 'https://platform.minimaxi.com/user-center/basic-information/interface-key', planUrl: 'https://platform.minimaxi.com/user-center/basic-information/interface-key',
planLabel: '获取按量 API Key', planLabel: i18n.t('aiops.getPaygApiKey'),
planHint: '按 Token 计费,在开放平台创建接口密钥(与编码套餐订阅密钥不同)', planHint: i18n.t('aiops.byTokenBilling'),
}, },
{ {
id: 'mimo', name: '小米 MiMo', endpoint: 'https://api.mimo.mi.com/v1', id: 'mimo', name: i18n.t('aiops.mimoXiaomi'), endpoint: 'https://api.mimo.mi.com/v1',
models: ['mimo-v2', 'mimo-v2-flash'], models: ['mimo-v2', 'mimo-v2-flash'],
planUrl: 'https://mimo.mi.com/', planUrl: 'https://mimo.mi.com/',
planLabel: 'MiMo 开放平台', planLabel: i18n.t('aiops.mimoPlatform'),
}, },
{ {
id: 'siliconflow', name: '硅基流动', endpoint: 'https://api.siliconflow.cn/v1', id: 'siliconflow', name: i18n.t('aiops.providerSiliconflow'), endpoint: 'https://api.siliconflow.cn/v1',
models: ['deepseek-ai/DeepSeek-V3', 'Qwen/Qwen2.5-72B-Instruct', 'Pro/deepseek-ai/DeepSeek-R1'], models: ['deepseek-ai/DeepSeek-V3', 'Qwen/Qwen2.5-72B-Instruct', 'Pro/deepseek-ai/DeepSeek-R1'],
planUrl: 'https://cloud.siliconflow.cn/', planUrl: 'https://cloud.siliconflow.cn/',
planLabel: '硅基流动控制台', planLabel: i18n.t('aiops.siliconflowConsole'),
planHint: '国内模型聚合平台,一个 Key 可调用多家开源模型', planHint: i18n.t('aiops.siliconflowHint'),
}, },
{ {
id: 'openai', name: 'OpenAI', endpoint: 'https://api.openai.com/v1', id: 'openai', name: 'OpenAI', endpoint: 'https://api.openai.com/v1',
models: ['gpt-4o', 'gpt-4o-mini', 'gpt-4.1', 'gpt-4.1-mini', 'o3-mini', 'o4-mini', 'o1-mini'], models: ['gpt-4o', 'gpt-4o-mini', 'gpt-4.1', 'gpt-4.1-mini', 'o3-mini', 'o4-mini', 'o1-mini'],
planUrl: 'https://platform.openai.com/api-keys', planUrl: 'https://platform.openai.com/api-keys',
planLabel: '创建 API Key', planLabel: i18n.t('system.createApiKey'),
planHint: '在 platform.openai.com 注册并充值后创建 API Key;国内需自备网络', planHint: i18n.t('aiops.openaiHint'),
}, },
{ {
id: 'anthropic', name: 'Anthropic Claude', endpoint: 'https://api.anthropic.com', id: 'anthropic', name: 'Anthropic Claude', endpoint: 'https://api.anthropic.com',
models: ['claude-sonnet-4-6', 'claude-opus-4-8', 'claude-haiku-4-5'], models: ['claude-sonnet-4-6', 'claude-opus-4-8', 'claude-haiku-4-5'],
planUrl: 'https://console.anthropic.com/settings/billing', planUrl: 'https://console.anthropic.com/settings/billing',
planLabel: 'Anthropic 账单', planLabel: i18n.t('aiops.anthropicBill'),
planHint: '国内直连可能受限,需自备网络或使用「大模型自定义」接入兼容代理', planHint: i18n.t('aiops.customProxyHint'),
}, },
]; ];
// 编码套餐 Coding Plan(固定月费,适合 Agent CLI 高频调用) // Logan.Li // 编码套餐 Coding Plan(固定月费,适合 Agent CLI 高频调用) // Logan.Li
const CLOUD_CODING_PROVIDERS: ProviderMeta[] = [ const CLOUD_CODING_PROVIDERS: ProviderMeta[] = [
{ {
id: 'glm-coding', name: '智谱 GLM 编码套餐', endpoint: 'https://open.bigmodel.cn/api/anthropic', id: 'glm-coding', name: i18n.t('aiops.zhipuCoding'), endpoint: 'https://open.bigmodel.cn/api/anthropic',
models: ['GLM-5.2', 'GLM-5.1'], models: ['GLM-5.2', 'GLM-5.1'],
planUrl: 'https://bigmodel.cn/glm-coding', planUrl: 'https://bigmodel.cn/glm-coding',
planLabel: '购买 GLM 编码套餐', planLabel: i18n.t('aiops.buyGlmCoding'),
planHint: '需单独购买编码套餐,走 Anthropic 协议;Key 与通用 GLM 不互通', planHint: i18n.t('aiops.zhipuCodingHint'),
}, },
{ {
id: 'kimi', name: 'Kimi 编码套餐', endpoint: 'https://api.kimi.com/coding/v1', id: 'kimi', name: i18n.t('aiops.kimiCoding'), endpoint: 'https://api.kimi.com/coding/v1',
models: ['kimi-for-coding', 'kimi-coding-latest'], models: ['kimi-for-coding', 'kimi-coding-latest'],
planUrl: 'https://www.kimi.com/membership/pricing', planUrl: 'https://www.kimi.com/membership/pricing',
planLabel: '购买 Kimi 套餐', planLabel: i18n.t('aiops.buyKimiPlan'),
planHint: 'Kimi 编码会员专用端点,适合编程与 Agent 场景', planHint: i18n.t('aiops.kimiCodingEndpoint'),
}, },
{ {
id: 'minimax-coding', name: 'MiniMax 编码套餐', endpoint: 'https://api.minimaxi.com/anthropic', id: 'minimax-coding', name: i18n.t('aiops.minimaxCoding'), endpoint: 'https://api.minimaxi.com/anthropic',
models: ['MiniMax-M3', 'MiniMax-M3[1m]', 'MiniMax-M2.7'], models: ['MiniMax-M3', 'MiniMax-M3[1m]', 'MiniMax-M2.7'],
planUrl: 'https://platform.minimaxi.com/user-center/payment/token-plan', planUrl: 'https://platform.minimaxi.com/user-center/payment/token-plan',
planLabel: '购买 Token 套餐', planLabel: i18n.t('aiops.buyTokenPack'),
planHint: '使用订阅密钥(Subscription Key),走 Anthropic 协议;与按量 API Key 不互通', planHint: i18n.t('aiops.anthropicSubHint'),
}, },
]; ];
@@ -122,21 +124,21 @@ const CLOUD_PROVIDERS: ProviderMeta[] = [...CLOUD_GENERAL_PROVIDERS, ...CLOUD_CO
// 自定义接入:手动填请求地址 + API Key + 模型名(OpenAI 兼容) // Logan.Li // 自定义接入:手动填请求地址 + API Key + 模型名(OpenAI 兼容) // Logan.Li
const CUSTOM_PROVIDERS: ProviderMeta[] = [ const CUSTOM_PROVIDERS: ProviderMeta[] = [
{ {
id: 'custom', name: '大模型自定义', endpoint: '', models: [], id: 'custom', name: i18n.t('aiops.customProvider'), endpoint: '', models: [],
apiKeyOptional: true, apiKeyOptional: true,
planHint: '填写 OpenAI 兼容的请求地址、API Key(无鉴权可留空)和模型名;适用于 OpenRouter、内网代理、其他未列出的服务', planHint: i18n.t('aiops.customProviderDesc'),
}, },
]; ];
// 本地/自建模型(API Key 可选,置于列表底部) // Logan.Li // 本地/自建模型(API Key 可选,置于列表底部) // Logan.Li
const LOCAL_PROVIDERS: ProviderMeta[] = [ const LOCAL_PROVIDERS: ProviderMeta[] = [
{ {
id: 'ollama', name: 'Ollama 本地', endpoint: 'http://localhost:11434/v1', id: 'ollama', name: i18n.t('aiops.ollamaLocal'), endpoint: 'http://localhost:11434/v1',
models: ['qwen2.5:7b', 'llama3.2', 'deepseek-r1:7b'], models: ['qwen2.5:7b', 'llama3.2', 'deepseek-r1:7b'],
apiKeyOptional: true, apiKeyOptional: true,
}, },
{ {
id: 'vllm', name: 'vLLM 自建', endpoint: 'http://localhost:8000/v1', id: 'vllm', name: i18n.t('aiops.vllmSelfHosted'), endpoint: 'http://localhost:8000/v1',
models: [], models: [],
apiKeyOptional: true, apiKeyOptional: true,
}, },
@@ -164,6 +166,7 @@ const defaultCfg: LLMConfigData = {
}; };
export default function LLMConfigPage() { export default function LLMConfigPage() {
const { t } = useTranslation();
const [cfg, setCfg] = useState<LLMConfigData>(defaultCfg); const [cfg, setCfg] = useState<LLMConfigData>(defaultCfg);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -201,30 +204,30 @@ export default function LLMConfigPage() {
const save = async () => { const save = async () => {
if (!isVerified) { if (!isVerified) {
toast.error('请先测试连接并通过验证'); toast.error(t('system.testBeforeSave'));
return; return;
} }
setSaving(true); setSaving(true);
try { try {
await aiApi.saveConfig(cfg); await aiApi.saveConfig(cfg);
toast.success('配置已保存'); toast.success(t('aiops.llmSaved'));
} }
catch { toast.error('保存失败'); } catch { toast.error(t('common.saveFailed')); }
finally { setSaving(false); } finally { setSaving(false); }
}; };
const test = async () => { const test = async () => {
const keyOptional = prov?.apiKeyOptional ?? false; const keyOptional = prov?.apiKeyOptional ?? false;
if (!keyOptional && !cfg.api_key?.trim()) { if (!keyOptional && !cfg.api_key?.trim()) {
toast.error('请先填写 API Key'); toast.error(t('system.fillApiKeyFirst'));
return; return;
} }
if (!cfg.model?.trim()) { if (!cfg.model?.trim()) {
toast.error('请先填写模型名'); toast.error(t('system.fillModelFirst'));
return; return;
} }
if (!cfg.endpoint?.trim()) { if (!cfg.endpoint?.trim()) {
toast.error('请先填写接口地址'); toast.error(t('system.fillEndpointFirst'));
return; return;
} }
setTesting(true); setTesting(true);
@@ -233,7 +236,7 @@ export default function LLMConfigPage() {
const res = await aiApi.testConnection(cfg); const res = await aiApi.testConnection(cfg);
setTestResult(res); setTestResult(res);
setVerifiedSnapshot(currentSnapshot); setVerifiedSnapshot(currentSnapshot);
toast.success('连接验证通过,可以保存'); toast.success(t('system.connVerified'));
} }
catch { catch {
setVerifiedSnapshot(null); setVerifiedSnapshot(null);
@@ -282,24 +285,24 @@ export default function LLMConfigPage() {
<PageShell <PageShell
variant="config" variant="config"
maxWidth="3xl" maxWidth="3xl"
title="大模型设置" title={t('aiops.llmConfig')}
subtitle="Agent CLI 与智能助手共用此配置" subtitle={t('aiops.agentCliSharedConfig')}
icon={<Brain className="h-5 w-5" />} icon={<Brain className="h-5 w-5" />}
loading={loading} loading={loading}
loadingLabel="加载配置..." loadingLabel={t('common.loadConfigDot')}
> >
<Card className="dg-card"> <Card className="dg-card">
<CardHeader><CardTitle className="text-[var(--dg-text-primary)] text-base">模型与凭证</CardTitle></CardHeader> <CardHeader><CardTitle className="text-[var(--dg-text-primary)] text-base">{t('aiops.providerAndCredential')}</CardTitle></CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">提供商</Label> <Label className="text-[var(--dg-text-secondary)]">{t('aiops.providerLabel')}</Label>
<Select value={cfg.provider} onValueChange={onProvider}> <Select value={cfg.provider} onValueChange={onProvider}>
<SelectTrigger className="dg-input"><SelectValue /></SelectTrigger> <SelectTrigger className="dg-input"><SelectValue /></SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
{unknownProvider && ( {unknownProvider && (
<SelectGroup> <SelectGroup>
<SelectLabel>已保存</SelectLabel> <SelectLabel>{t('deploy.toast.saved')}</SelectLabel>
<SelectItem value={cfg.provider}>{cfg.provider}</SelectItem> <SelectItem value={cfg.provider}>{cfg.provider}</SelectItem>
</SelectGroup> </SelectGroup>
)} )}
@@ -310,7 +313,7 @@ export default function LLMConfigPage() {
))} ))}
</SelectGroup> </SelectGroup>
<SelectGroup> <SelectGroup>
<SelectLabel>编码套餐 Coding Plan</SelectLabel> <SelectLabel>{t('aiops.codingPlan')}</SelectLabel>
{CLOUD_CODING_PROVIDERS.map((p) => ( {CLOUD_CODING_PROVIDERS.map((p) => (
<SelectItem key={p.id} value={p.id}>{p.name}</SelectItem> <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
))} ))}
@@ -322,7 +325,7 @@ export default function LLMConfigPage() {
))} ))}
</SelectGroup> </SelectGroup>
<SelectGroup> <SelectGroup>
<SelectLabel>本地 / 自建</SelectLabel> <SelectLabel>{t('aiops.localSelfHosted')}</SelectLabel>
{LOCAL_PROVIDERS.map((p) => ( {LOCAL_PROVIDERS.map((p) => (
<SelectItem key={p.id} value={p.id}>{p.name}</SelectItem> <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
))} ))}
@@ -331,19 +334,19 @@ export default function LLMConfigPage() {
</Select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">模型</Label> <Label className="text-[var(--dg-text-secondary)]">{t('aiops.modelLabel')}</Label>
{manualModel || modelMode === 'input' ? ( {manualModel || modelMode === 'input' ? (
<Input value={cfg.model} onChange={(e) => set('model', e.target.value)} <Input value={cfg.model} onChange={(e) => set('model', e.target.value)}
placeholder={isCustom ? '如 deepseek/deepseek-chat 或 gpt-4o' : '手动输入模型名'} placeholder={isCustom ? t('aiops.modelPlaceholder') : t('aiops.manualInputModel')}
className="dg-input" /> className="dg-input" />
) : ( ) : (
<Select value={cfg.model} onValueChange={onModel}> <Select value={cfg.model} onValueChange={onModel}>
<SelectTrigger className="dg-input"> <SelectTrigger className="dg-input">
<SelectValue placeholder="选择模型" /> <SelectValue placeholder={t('aiops.selectModel')} />
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
{models.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)} {models.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
<SelectItem value="__manual">手动输入</SelectItem> <SelectItem value="__manual">{t('system.manualInput')}</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
)} )}
@@ -370,7 +373,7 @@ export default function LLMConfigPage() {
rel="noreferrer" rel="noreferrer"
className="inline-flex items-center gap-1 text-xs dg-text-blue hover:underline" className="inline-flex items-center gap-1 text-xs dg-text-blue hover:underline"
> >
{prov.planLabel || '前往开通'} {prov.planLabel || t('aiops.goEnable')}
<ExternalLink className="w-3 h-3" /> <ExternalLink className="w-3 h-3" />
</a> </a>
</div> </div>
@@ -387,16 +390,16 @@ export default function LLMConfigPage() {
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)] flex items-center gap-1"> <Label className="text-[var(--dg-text-secondary)] flex items-center gap-1">
<KeyRound className="w-3.5 h-3.5" /> <KeyRound className="w-3.5 h-3.5" />
API Key{apiKeyOptional && <span className="text-xs dg-text-muted font-normal">(可选)</span>} API Key{apiKeyOptional && <span className="text-xs dg-text-muted font-normal">{t('system.optionalParen')}</span>}
</Label> </Label>
<Input type="password" value={cfg.api_key} onChange={(e) => set('api_key', e.target.value)} <Input type="password" value={cfg.api_key} onChange={(e) => set('api_key', e.target.value)}
placeholder={apiKeyOptional ? '无鉴权可留空' : 'sk-...'} className="dg-input" /> placeholder={apiKeyOptional ? t('aiops.noAuthBlank') : 'sk-...'} className="dg-input" />
{apiKeyOptional && ( {apiKeyOptional && (
<p className="text-xs dg-text-muted">本地或内网自建通常无需密钥;若网关启用了鉴权再填写。</p> <p className="text-xs dg-text-muted">{t('aiops.localNoKeyHint')}</p>
)} )}
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">接口地址(Endpoint)</Label> <Label className="text-[var(--dg-text-secondary)]">{t('aiops.endpointLabel')}</Label>
<Input value={cfg.endpoint} onChange={(e) => set('endpoint', e.target.value)} <Input value={cfg.endpoint} onChange={(e) => set('endpoint', e.target.value)}
placeholder={endpointPlaceholder(cfg.provider)} className="dg-input" /> placeholder={endpointPlaceholder(cfg.provider)} className="dg-input" />
{prov?.planHint && !prov.planUrl && ( {prov?.planHint && !prov.planUrl && (
@@ -415,7 +418,7 @@ export default function LLMConfigPage() {
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="text-sm text-[var(--dg-text-secondary)]">启用推理模式</div> <div className="text-sm text-[var(--dg-text-secondary)]">{t('aiops.enableReasoning')}</div>
<div className="text-xs dg-text-muted"> <div className="text-xs dg-text-muted">
适用于 OpenAI o-series / DeepSeek R1 / Claude 3.7 Sonnet 等推理模型;普通模型开启后可能报错。 适用于 OpenAI o-series / DeepSeek R1 / Claude 3.7 Sonnet 等推理模型;普通模型开启后可能报错。
</div> </div>
@@ -428,7 +431,7 @@ export default function LLMConfigPage() {
<div className="flex flex-wrap items-center gap-3"> <div className="flex flex-wrap items-center gap-3">
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]"> <div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
<Switch checked={cfg.enabled} onCheckedChange={(v) => set('enabled', v)} /> <Switch checked={cfg.enabled} onCheckedChange={(v) => set('enabled', v)} />
<span>启用 LLM 服务</span> <span>{t('aiops.enableLlm')}</span>
</div> </div>
<Button variant="outline" onClick={test} disabled={testing || !canTest} className="dg-btn-secondary"> <Button variant="outline" onClick={test} disabled={testing || !canTest} className="dg-btn-secondary">
{testing {testing
@@ -447,7 +450,7 @@ export default function LLMConfigPage() {
<CheckCircle2 className="w-3.5 h-3.5" />已验证,可保存 <CheckCircle2 className="w-3.5 h-3.5" />已验证,可保存
</span> </span>
) : ( ) : (
<span className="text-xs dg-text-muted">切换提供商或修改凭证后,请先测试连接</span> <span className="text-xs dg-text-muted">{t('system.switchProviderTest')}</span>
)} )}
</div> </div>
@@ -461,14 +464,14 @@ export default function LLMConfigPage() {
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap leading-relaxed"> <div className="text-sm text-[var(--dg-text-secondary)] whitespace-pre-wrap leading-relaxed">
{testResult.answer || '(模型未返回内容)'} {testResult.answer || t('aiops.noModelContent')}
</div> </div>
<div className="flex flex-wrap gap-3 text-xs dg-text-muted"> <div className="flex flex-wrap gap-3 text-xs dg-text-muted">
<span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">模型: {testResult.model || '未知'}</span> <span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">模型: {testResult.model || t('common.unknown')}</span>
<span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">提供商: {testResult.provider}</span> <span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">提供商: {testResult.provider}</span>
<span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">消耗 Token: {testResult.tokens_used ?? '-'}</span> <span className="bg-[var(--dg-bg-tertiary)] px-2 py-1 rounded">消耗 Token: {testResult.tokens_used ?? '-'}</span>
{testResult.reasoning_enabled && ( {testResult.reasoning_enabled && (
<span className="bg-amber-900/40 dg-text-yellow px-2 py-1 rounded">推理模式已开启</span> <span className="bg-amber-900/40 dg-text-yellow px-2 py-1 rounded">{t('aiops.reasoningOn')}</span>
)} )}
</div> </div>
</CardContent> </CardContent>
@@ -23,7 +23,6 @@ import { toast } from 'sonner';
import { billingApi } from '@/api'; import { billingApi } from '@/api';
import { providerLabels } from './CloudBillingHelpers'; import { providerLabels } from './CloudBillingHelpers';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
const emptyRecord = { const emptyRecord = {
provider: 'aliyun', provider: 'aliyun',
@@ -43,7 +42,6 @@ interface Props {
} }
export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSuccess }: Props) { export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSuccess }: Props) {
const { t } = useTranslation();
const [form, setForm] = useState<JsonData>(emptyRecord); const [form, setForm] = useState<JsonData>(emptyRecord);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
@@ -67,7 +65,7 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
const handleSave = async () => { const handleSave = async () => {
if (!form.provider || !form.billing_date || !form.cost) { if (!form.provider || !form.billing_date || !form.cost) {
toast.error(t('cloud.billingrecorddialog.sd8a97c')); toast.error('请填写必填字段');
return; return;
} }
setSubmitting(true); setSubmitting(true);
@@ -81,9 +79,9 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
} }
onOpenChange(false); onOpenChange(false);
onSuccess(); onSuccess();
toast(t('common.savedSuccessfully')); toast('保存成功');
} catch (e) { } catch (e) {
toast.error(t('common.saveFailed'), { description: (e as JsonData).message }); toast.error('保存失败', { description: (e as JsonData).message });
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
@@ -93,13 +91,13 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md"> <DialogContent className="max-w-md">
<DialogHeader> <DialogHeader>
<DialogTitle>{editingRecord ? t('cloud.billingrecorddialog.s3c91e4') : t('cloud.recordCost')}</DialogTitle> <DialogTitle>{editingRecord ? '编辑成本记录' : '记录成本'}</DialogTitle>
<DialogDescription>{t('cloud.billingrecorddialog.s09e541')}</DialogDescription> <DialogDescription>记录一条每日云资源成本</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-3"> <div className="space-y-3">
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.billingrecorddialog.sb11d84')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">厂商 *</Label>
<Select value={form.provider} onValueChange={(v) => setForm({ ...form, provider: v })}> <Select value={form.provider} onValueChange={(v) => setForm({ ...form, provider: v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger> <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@@ -110,37 +108,37 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
</Select> </Select>
</div> </div>
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.billingrecorddialog.s3abdef')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">日期 *</Label>
<Input type="date" className="mt-1" value={form.billing_date} onChange={(e) => setForm({ ...form, billing_date: e.target.value })} /> <Input type="date" className="mt-1" value={form.billing_date} onChange={(e) => setForm({ ...form, billing_date: e.target.value })} />
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.billingrecorddialog.s6f2526')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">费用(元) *</Label>
<Input type="number" step="0.01" className="mt-1" placeholder="0.00" value={form.cost} onChange={(e) => setForm({ ...form, cost: e.target.value })} /> <Input type="number" step="0.01" className="mt-1" placeholder="0.00" value={form.cost} onChange={(e) => setForm({ ...form, cost: e.target.value })} />
</div> </div>
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.colService')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">服务</Label>
<Input className="mt-1" placeholder="ECS, RDS..." value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })} /> <Input className="mt-1" placeholder="ECS, RDS..." value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })} />
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.colRegion')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">区域</Label>
<Input className="mt-1" placeholder="cn-hangzhou" value={form.region} onChange={(e) => setForm({ ...form, region: e.target.value })} /> <Input className="mt-1" placeholder="cn-hangzhou" value={form.region} onChange={(e) => setForm({ ...form, region: e.target.value })} />
</div> </div>
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.accountName')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">账号名称</Label>
<Input className="mt-1" placeholder=t('cloud.billingrecorddialog.s001079') value={form.account_name} onChange={(e) => setForm({ ...form, account_name: e.target.value })} /> <Input className="mt-1" placeholder="主账号" value={form.account_name} onChange={(e) => setForm({ ...form, account_name: e.target.value })} />
</div> </div>
</div> </div>
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('common.remark')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">备注</Label>
<Input className="mt-1" placeholder=t('common.optional') value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /> <Input className="mt-1" placeholder="可选" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
<Button onClick={handleSave} disabled={submitting}> <Button onClick={handleSave} disabled={submitting}>
{submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />} {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
保存 保存
@@ -24,7 +24,6 @@ import { toast } from 'sonner';
import { billingApi } from '@/api'; import { billingApi } from '@/api';
import { providerLabels } from './CloudBillingHelpers'; import { providerLabels } from './CloudBillingHelpers';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
const emptyRule = { name: '', provider: '', metric: 'daily', threshold: '', operator: '>', enabled: true }; const emptyRule = { name: '', provider: '', metric: 'daily', threshold: '', operator: '>', enabled: true };
@@ -36,7 +35,6 @@ interface Props {
} }
export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }: Props) { export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }: Props) {
const { t } = useTranslation();
const [form, setForm] = useState<JsonData>(emptyRule); const [form, setForm] = useState<JsonData>(emptyRule);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
@@ -59,7 +57,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
const handleSave = async () => { const handleSave = async () => {
if (!form.name || !form.threshold) { if (!form.name || !form.threshold) {
toast.error(t('cloud.billingruledialog.sd36855')); toast.error('请填写规则名称和阈值');
return; return;
} }
setSubmitting(true); setSubmitting(true);
@@ -72,9 +70,9 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
} }
onOpenChange(false); onOpenChange(false);
onSuccess(); onSuccess();
toast(t('common.savedSuccessfully')); toast('保存成功');
} catch (e) { } catch (e) {
toast.error(t('common.saveFailed'), { description: (e as JsonData).message }); toast.error('保存失败', { description: (e as JsonData).message });
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
@@ -84,21 +82,21 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md"> <DialogContent className="max-w-md">
<DialogHeader> <DialogHeader>
<DialogTitle>{editingRule ? t('cloud.billingruledialog.sb8cfa0') : t('cloud.billingruledialog.sd58c54')}</DialogTitle> <DialogTitle>{editingRule ? '编辑预警规则' : '添加预警规则'}</DialogTitle>
<DialogDescription>{t('cloud.billingruledialog.s75227f')}</DialogDescription> <DialogDescription>设置成本阈值,超标时自动预警</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.billingruledialog.s34fe90')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">规则名称 *</Label>
<Input className="mt-1" placeholder=t('cloud.billingruledialog.sc147ac') value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /> <Input className="mt-1" placeholder="如:日成本超 500 元预警" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('common.vendor')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">厂商</Label>
<Select value={form.provider || 'all'} onValueChange={(v) => setForm({ ...form, provider: v === 'all' ? '' : v })}> <Select value={form.provider || 'all'} onValueChange={(v) => setForm({ ...form, provider: v === 'all' ? '' : v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger> <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">{t('cloud.billingruledialog.sc356f1')}</SelectItem> <SelectItem value="all">全部厂商</SelectItem>
{Object.entries(providerLabels).map(([k, v]) => ( {Object.entries(providerLabels).map(([k, v]) => (
<SelectItem key={k} value={k}>{v}</SelectItem> <SelectItem key={k} value={k}>{v}</SelectItem>
))} ))}
@@ -106,41 +104,41 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
</Select> </Select>
</div> </div>
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.colMetric')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">指标</Label>
<Select value={form.metric} onValueChange={(v) => setForm({ ...form, metric: v })}> <Select value={form.metric} onValueChange={(v) => setForm({ ...form, metric: v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger> <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="daily">{t('cloud.dailyCost')}</SelectItem> <SelectItem value="daily">日成本</SelectItem>
<SelectItem value="monthly">{t('cloud.monthlyAccumulated')}</SelectItem> <SelectItem value="monthly">月累计</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.billingruledialog.sd7650e')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">比较</Label>
<Select value={form.operator} onValueChange={(v) => setForm({ ...form, operator: v })}> <Select value={form.operator} onValueChange={(v) => setForm({ ...form, operator: v })}>
<SelectTrigger className="mt-1"><SelectValue /></SelectTrigger> <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value=">">{t('cloud.billingruledialog.s3dba97')}</SelectItem> <SelectItem value=">">大于 &gt;</SelectItem>
<SelectItem value=">=">{t('cloud.billingruledialog.s8e1e26')}</SelectItem> <SelectItem value=">=">大于等于 &ge;</SelectItem>
<SelectItem value="<">{t('cloud.billingruledialog.s0196c1')}</SelectItem> <SelectItem value="<">小于 &lt;</SelectItem>
<SelectItem value="<=">{t('cloud.billingruledialog.s45c301')}</SelectItem> <SelectItem value="<=">小于等于 &le;</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div> <div>
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('cloud.billingruledialog.s11f9fb')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">阈值(元) *</Label>
<Input type="number" step="0.01" className="mt-1" placeholder="500.00" value={form.threshold} onChange={(e) => setForm({ ...form, threshold: e.target.value })} /> <Input type="number" step="0.01" className="mt-1" placeholder="500.00" value={form.threshold} onChange={(e) => setForm({ ...form, threshold: e.target.value })} />
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch checked={form.enabled} onCheckedChange={(v) => setForm({ ...form, enabled: v })} /> <Switch checked={form.enabled} onCheckedChange={(v) => setForm({ ...form, enabled: v })} />
<Label className="text-sm text-[var(--dg-text-secondary)]">{t('common.enable')}</Label> <Label className="text-sm text-[var(--dg-text-secondary)]">启用</Label>
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
<Button onClick={handleSave} disabled={submitting}> <Button onClick={handleSave} disabled={submitting}>
{submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />} {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
保存 保存
@@ -1,14 +1,12 @@
import { type ReactNode } from 'react'; import { type ReactNode } from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react'; import { TrendingUp, TrendingDown } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
// 云厂商中文标签(主组件 + 弹窗共享) // Logan.Li // 云厂商中文标签(主组件 + 弹窗共享) // Logan.Li
export const providerLabels: Record<string, string> = { export const providerLabels: Record<string, string> = {
aliyun: i18n.t('cloud.aliyun'), aliyun: '阿里云',
tencent: i18n.t('cloud.tencent'), tencent: '腾讯云',
aws: 'AWS', aws: 'AWS',
huawei: i18n.t('cloud.huawei'), huawei: '华为云',
azure: 'Azure', azure: 'Azure',
}; };
@@ -31,7 +29,6 @@ export const providerColors: Record<string, string> = {
}; };
export function ProviderDot({ provider, className = 'w-2 h-2' }: { provider: string; className?: string }) { export function ProviderDot({ provider, className = 'w-2 h-2' }: { provider: string; className?: string }) {
const { t } = useTranslation();
return ( return (
<span <span
className={`rounded-full shrink-0 ${className}`} className={`rounded-full shrink-0 ${className}`}
@@ -52,7 +49,6 @@ export function StatCard({ icon, label, value, trend, trendLabel, alert }: {
trendLabel?: string; trendLabel?: string;
alert?: boolean; alert?: boolean;
}) { }) {
const { t } = useTranslation();
return ( return (
<div className={alert ? 'dg-alert-banner' : 'rounded-lg border border-[var(--border-default)] bg-[var(--surface-raised)]/50 p-4'}> <div className={alert ? 'dg-alert-banner' : 'rounded-lg border border-[var(--border-default)] bg-[var(--surface-raised)]/50 p-4'}>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
@@ -72,9 +68,8 @@ export function StatCard({ icon, label, value, trend, trendLabel, alert }: {
} }
export function TrendChart({ data }: { data: { date: string; cost: number }[] }) { export function TrendChart({ data }: { data: { date: string; cost: number }[] }) {
const { t } = useTranslation();
if (data.length === 0) { if (data.length === 0) {
return <p className="text-sm dg-text-muted py-8 text-center">{t('common.noData')}</p>; return <p className="text-sm dg-text-muted py-8 text-center">暂无数据</p>;
} }
const max = Math.max(...data.map((d) => d.cost), 1); const max = Math.max(...data.map((d) => d.cost), 1);
const recent = data.slice(-30); const recent = data.slice(-30);
@@ -36,13 +36,11 @@ import { PageLoading } from '@/components/layout/PageLoading';
import { PageEmpty } from '@/components/layout/PageEmpty'; import { PageEmpty } from '@/components/layout/PageEmpty';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
const typeLabels: Record<string, string> = { const typeLabels: Record<string, string> = {
public: i18n.t('cloud.platformmanager.s7ef31a'), public: '公有云',
private: i18n.t('cloud.privateCloud'), private: '私有云',
hybrid: i18n.t('cloud.hybridCloud'), hybrid: '混合云',
}; };
const typeColors: Record<string, string> = { const typeColors: Record<string, string> = {
@@ -52,7 +50,6 @@ const typeColors: Record<string, string> = {
}; };
export function PlatformManager() { export function PlatformManager() {
const { t } = useTranslation();
const [platforms, setPlatforms] = useState<JsonData[]>([]); const [platforms, setPlatforms] = useState<JsonData[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@@ -140,7 +137,7 @@ export function PlatformManager() {
<div className="relative w-72"> <div className="relative w-72">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input <Input
placeholder=t('cloud.platformmanager.s783a51') placeholder="搜索平台名称或编码..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 dg-input" className="pl-9 h-9 dg-input"
@@ -151,10 +148,10 @@ export function PlatformManager() {
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">{t('deploy.label.allType')}</SelectItem> <SelectItem value="all">全部类型</SelectItem>
<SelectItem value="public">{t('cloud.platformmanager.s7ef31a')}</SelectItem> <SelectItem value="public">公有云</SelectItem>
<SelectItem value="private">{t('cloud.privateCloud')}</SelectItem> <SelectItem value="private">私有云</SelectItem>
<SelectItem value="hybrid">{t('cloud.hybridCloud')}</SelectItem> <SelectItem value="hybrid">混合云</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -163,16 +160,16 @@ export function PlatformManager() {
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('cloud.title') title="云平台管理"
subtitle=t('cloud.platformmanager.s701204') subtitle="管理公有云、私有云与混合云平台信息"
icon={<CloudCog className="h-5 w-5" />} icon={<CloudCog className="h-5 w-5" />}
metrics={ metrics={
!loading ? ( !loading ? (
<StatStrip <StatStrip
items={[ items={[
{ label: t('common.total'), value: stats.total, color: 'blue' }, { label: '总计', value: stats.total, color: 'blue' },
{ label: t('common.enable'), value: stats.active, color: 'green' }, { label: '启用', value: stats.active, color: 'green' },
{ label: t('cloud.platformmanager.s7ef31a'), value: stats.public, color: 'cyan' }, { label: '公有云', value: stats.public, color: 'cyan' },
]} ]}
/> />
) : undefined ) : undefined
@@ -196,7 +193,7 @@ export function PlatformManager() {
) : filtered.length === 0 ? ( ) : filtered.length === 0 ? (
<PageEmpty <PageEmpty
icon={<CloudCog className="h-12 w-12" />} icon={<CloudCog className="h-12 w-12" />}
title=t('cloud.platformmanager.sb9f478') title="暂无云平台数据"
action={( action={(
<Button size="sm" className="dg-btn-primary" onClick={openCreate}> <Button size="sm" className="dg-btn-primary" onClick={openCreate}>
<Plus className="h-4 w-4 mr-1" /> <Plus className="h-4 w-4 mr-1" />
@@ -263,26 +260,26 @@ export function PlatformManager() {
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}> <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{editingItem ? t('cloud.platformmanager.sf83734') : t('cloud.platformmanager.s3f6f0c')}</DialogTitle> <DialogTitle>{editingItem ? '编辑云平台' : '添加云平台'}</DialogTitle>
<DialogDescription className="sr-only">{t('common.description')}</DialogDescription> <DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-2"> <div className="space-y-4 py-2">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label>{t('cloud.platformmanager.seac7fc')}</Label> <Label>平台名称 *</Label>
<Input <Input
value={formData.name} value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })} onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder=t('cloud.platformmanager.sa39d96') placeholder="如:阿里云"
className="dg-input" className="dg-input"
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label>{t('cloud.platformmanager.se21e27')}</Label> <Label>编码 *</Label>
<Input <Input
value={formData.code} value={formData.code}
onChange={(e) => setFormData({ ...formData, code: e.target.value })} onChange={(e) => setFormData({ ...formData, code: e.target.value })}
placeholder=t('cloud.platformmanager.s7b09b0') placeholder="如:aliyun"
className="dg-input" className="dg-input"
disabled={!!editingItem} disabled={!!editingItem}
/> />
@@ -290,33 +287,33 @@ export function PlatformManager() {
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label>{t('common.type')}</Label> <Label>类型</Label>
<Select value={formData.type} onValueChange={(v) => setFormData({ ...formData, type: v })}> <Select value={formData.type} onValueChange={(v) => setFormData({ ...formData, type: v })}>
<SelectTrigger className="dg-input"> <SelectTrigger className="dg-input">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="public">{t('cloud.platformmanager.s7ef31a')}</SelectItem> <SelectItem value="public">公有云</SelectItem>
<SelectItem value="private">{t('cloud.privateCloud')}</SelectItem> <SelectItem value="private">私有云</SelectItem>
<SelectItem value="hybrid">{t('cloud.hybridCloud')}</SelectItem> <SelectItem value="hybrid">混合云</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label>{t('common.status')}</Label> <Label>状态</Label>
<Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}> <Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
<SelectTrigger className="dg-input"> <SelectTrigger className="dg-input">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="active">{t('common.enable')}</SelectItem> <SelectItem value="active">启用</SelectItem>
<SelectItem value="inactive">{t('common.disable')}</SelectItem> <SelectItem value="inactive">禁用</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label>{t('cloud.platformmanager.saf587e')}</Label> <Label>官网地址</Label>
<Input <Input
value={formData.website} value={formData.website}
onChange={(e) => setFormData({ ...formData, website: e.target.value })} onChange={(e) => setFormData({ ...formData, website: e.target.value })}
@@ -325,20 +322,20 @@ export function PlatformManager() {
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label>{t('common.description')}</Label> <Label>描述</Label>
<Input <Input
value={formData.description} value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })} onChange={(e) => setFormData({ ...formData, description: e.target.value })}
placeholder=t('cloud.platformmanager.sc44dd4') placeholder="平台描述..."
className="dg-input" className="dg-input"
/> />
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={() => setDialogOpen(false)}>{t('common.cancel')}</Button> <Button variant="ghost" onClick={() => setDialogOpen(false)}>取消</Button>
<Button onClick={handleSubmit} disabled={submitting || !formData.name.trim() || !formData.code.trim()}> <Button onClick={handleSubmit} disabled={submitting || !formData.name.trim() || !formData.code.trim()}>
{submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />} {submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
{editingItem ? t('common.save') : t('common.create')} {editingItem ? '保存' : '创建'}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -348,13 +345,13 @@ export function PlatformManager() {
<Dialog open={deleteId !== null} onOpenChange={(v) => !v && setDeleteId(null)}> <Dialog open={deleteId !== null} onOpenChange={(v) => !v && setDeleteId(null)}>
<DialogContent className="max-w-sm"> <DialogContent className="max-w-sm">
<DialogHeader> <DialogHeader>
<DialogTitle>{t('k8s.actionModal.confirmDelete')}</DialogTitle> <DialogTitle>确认删除</DialogTitle>
<DialogDescription className="sr-only">{t('common.description')}</DialogDescription> <DialogDescription className="sr-only">描述</DialogDescription>
</DialogHeader> </DialogHeader>
<p className="text-sm dg-text-secondary">{t('cloud.platformmanager.s452abb')}</p> <p className="text-sm dg-text-secondary">确定删除此云平台?此操作不可撤销。</p>
<DialogFooter> <DialogFooter>
<Button variant="ghost" onClick={() => setDeleteId(null)}>{t('common.cancel')}</Button> <Button variant="ghost" onClick={() => setDeleteId(null)}>取消</Button>
<Button variant="destructive" onClick={confirmDelete}>{t('common.delete')}</Button> <Button variant="destructive" onClick={confirmDelete}>删除</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -14,7 +14,6 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog'; import { useConfirm } from '@/components/ui/confirm-dialog';
import { buildNodeApi, serverApi, type BuildNode } from '@/api'; import { buildNodeApi, serverApi, type BuildNode } from '@/api';
import { useTranslation } from 'react-i18next';
interface ServerItem { interface ServerItem {
id: number; id: number;
@@ -24,7 +23,6 @@ interface ServerItem {
// 构建节点管理(Jenkins Agent 风格 SSH 节点) // Logan.Li // 构建节点管理(Jenkins Agent 风格 SSH 节点) // Logan.Li
export default function BuildNodesManager({ embedded = false }: { embedded?: boolean }) { export default function BuildNodesManager({ embedded = false }: { embedded?: boolean }) {
const { t } = useTranslation();
const confirm = useConfirm(); const confirm = useConfirm();
const [nodes, setNodes] = useState<BuildNode[]>([]); const [nodes, setNodes] = useState<BuildNode[]>([]);
const [master, setMaster] = useState({ name: 'Master', max_executors: 2, running_count: 0 }); const [master, setMaster] = useState({ name: 'Master', max_executors: 2, running_count: 0 });
@@ -60,7 +58,7 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
const srvList = (srvRes as { list?: ServerItem[] })?.list || []; const srvList = (srvRes as { list?: ServerItem[] })?.list || [];
setServers(srvList); setServers(srvList);
} catch { } catch {
toast.error(t('deploy.buildnodesmanager.sb9faa2')); toast.error('加载构建节点失败');
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -92,7 +90,7 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
const handleSubmit = async () => { const handleSubmit = async () => {
if (!name.trim() || !serverId) { if (!name.trim() || !serverId) {
toast.error(t('deploy.buildnodesmanager.sda51a7')); toast.error('请填写名称并选择服务器');
return; return;
} }
setSubmitting(true); setSubmitting(true);
@@ -107,29 +105,29 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
}; };
if (editNode) { if (editNode) {
await buildNodeApi.update(editNode.id, payload); await buildNodeApi.update(editNode.id, payload);
toast.success(t('deploy.toast.updated')); toast.success('已更新');
} else { } else {
await buildNodeApi.create(payload); await buildNodeApi.create(payload);
toast.success(t('deploy.toast.created')); toast.success('已创建');
} }
setDialogOpen(false); setDialogOpen(false);
load(); load();
} catch { } catch {
toast.error(t('common.operationFailed')); toast.error('操作失败');
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
}; };
const handleDelete = async (node: BuildNode) => { const handleDelete = async (node: BuildNode) => {
const ok = await confirm({ title: t('k8s.topology.deleteNode'), description: t('deploy.buildnodesmanager.s359e74', { node.name: node.name }) }); const ok = await confirm({ title: '删除节点', description: `确定删除构建节点「${node.name}」?` });
if (!ok) return; if (!ok) return;
try { try {
await buildNodeApi.delete(node.id); await buildNodeApi.delete(node.id);
toast.success(t('alert.deleted')); toast.success('已删除');
load(); load();
} catch { } catch {
toast.error(t('deploy.buildnodesmanager.s577b18')); toast.error('删除失败,请确认无流水线绑定');
} }
}; };
@@ -138,12 +136,12 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
try { try {
const res = await buildNodeApi.test(node.id) as { success?: boolean; message?: string }; const res = await buildNodeApi.test(node.id) as { success?: boolean; message?: string };
if (res?.success) { if (res?.success) {
toast.success(t('deploy.buildnodesmanager.s1c5ca7', { res.message || '': res.message || '' })); toast.success(`连通成功: ${res.message || ''}`);
} else { } else {
toast.error(res?.message || t('aiops.llmTestFailed')); toast.error(res?.message || '连接失败');
} }
} catch { } catch {
toast.error(t('deploy.buildnodesmanager.s9710d9')); toast.error('测试失败');
} finally { } finally {
setTestingId(null); setTestingId(null);
} }
@@ -154,14 +152,14 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
await buildNodeApi.update(node.id, { enabled: !node.enabled }); await buildNodeApi.update(node.id, { enabled: !node.enabled });
load(); load();
} catch { } catch {
toast.error(t('alert.updateFailed')); toast.error('更新失败');
} }
}; };
const handleSaveMaster = async () => { const handleSaveMaster = async () => {
const n = Number(masterMax); const n = Number(masterMax);
if (!n || n < 1) { if (!n || n < 1) {
toast.error(t('deploy.buildnodesmanager.s5f25f4')); toast.error('并发数至少为 1');
return; return;
} }
setSavingMaster(true); setSavingMaster(true);
@@ -173,9 +171,9 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
max_executors: m?.max_executors ?? n, max_executors: m?.max_executors ?? n,
running_count: m?.running_count ?? prev.running_count, running_count: m?.running_count ?? prev.running_count,
})); }));
toast.success(t('deploy.buildnodesmanager.scb1ab6')); toast.success('Master 并发已更新');
} catch { } catch {
toast.error(t('alert.updateFailed')); toast.error('更新失败');
} finally { } finally {
setSavingMaster(false); setSavingMaster(false);
} }
@@ -186,7 +184,7 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
<ContentPanel <ContentPanel
toolbar={( toolbar={(
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{t('pipeline.buildNode')}</span> <span className="text-sm font-medium text-[var(--dg-text-primary)]">构建节点</span>
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="ghost" size="sm" onClick={load} disabled={loading}> <Button variant="ghost" size="sm" onClick={load} disabled={loading}>
<RefreshCw className={`h-3.5 w-3.5 mr-1${loading ? ' animate-spin' : ''}`} />刷新 <RefreshCw className={`h-3.5 w-3.5 mr-1${loading ? ' animate-spin' : ''}`} />刷新
@@ -202,14 +200,14 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Cpu className="h-4 w-4 text-[var(--dg-text-muted)]" /> <Cpu className="h-4 w-4 text-[var(--dg-text-muted)]" />
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{t('deploy.buildnodesmanager.sae7536')}</span> <span className="text-sm font-medium text-[var(--dg-text-primary)]">Master(内置)</span>
<Badge variant="outline" className="text-[10px]">{t('deploy.buildnodesmanager.sa419fe')}</Badge> <Badge variant="outline" className="text-[10px]">默认调度</Badge>
<span className="text-xs text-[var(--dg-text-muted)]"> <span className="text-xs text-[var(--dg-text-muted)]">
占用 {master.running_count}/{master.max_executors} 占用 {master.running_count}/{master.max_executors}
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Label className="text-xs text-[var(--dg-text-muted)] shrink-0">{t('deploy.buildnodesmanager.s8e408e')}</Label> <Label className="text-xs text-[var(--dg-text-muted)] shrink-0">最大并发</Label>
<Input <Input
type="number" type="number"
min={1} min={1}
@@ -219,7 +217,7 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
className="h-7 w-16 text-xs dg-input" className="h-7 w-16 text-xs dg-input"
/> />
<Button size="sm" className="h-7 text-xs" onClick={handleSaveMaster} disabled={savingMaster}> <Button size="sm" className="h-7 text-xs" onClick={handleSaveMaster} disabled={savingMaster}>
{savingMaster ? t('deploy.buildnodesmanager.s7cbf2d') : t('common.save')} {savingMaster ? '保存中' : '保存'}
</Button> </Button>
</div> </div>
</div> </div>
@@ -230,9 +228,9 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
{nodes.length === 0 ? ( {nodes.length === 0 ? (
<PageEmpty <PageEmpty
title=t('deploy.buildnodesmanager.s2795bd') title="暂无远程构建节点"
description=t('deploy.buildnodesmanager.s90fb5e') description="关联服务器资产添加 SSH 节点,将重型构建任务调度到高性能机器"
action={<Button size="sm" onClick={openCreate}><Plus className="h-3.5 w-3.5 mr-1" />{t('k8s.topology.addNode')}</Button>} action={<Button size="sm" onClick={openCreate}><Plus className="h-3.5 w-3.5 mr-1" />添加节点</Button>}
/> />
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
@@ -245,7 +243,7 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<span className="font-medium text-sm text-[var(--dg-text-primary)]">{node.name}</span> <span className="font-medium text-sm text-[var(--dg-text-primary)]">{node.name}</span>
<Badge variant={node.enabled ? 'default' : 'secondary'} className="text-[10px]"> <Badge variant={node.enabled ? 'default' : 'secondary'} className="text-[10px]">
{node.enabled ? t('common.enable') : t('common.disable')} {node.enabled ? '启用' : '禁用'}
</Badge> </Badge>
<span className="text-[10px] text-[var(--dg-text-muted)] font-mono"> <span className="text-[10px] text-[var(--dg-text-muted)] font-mono">
{node.hostname || node.ip || `server#${node.server_id}`} {node.hostname || node.ip || `server#${node.server_id}`}
@@ -259,10 +257,10 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
</div> </div>
<div className="flex items-center gap-1 shrink-0"> <div className="flex items-center gap-1 shrink-0">
<Button variant="ghost" size="sm" className="h-7 text-xs" disabled={testingId === node.id} onClick={() => handleTest(node)}> <Button variant="ghost" size="sm" className="h-7 text-xs" disabled={testingId === node.id} onClick={() => handleTest(node)}>
{testingId === node.id ? t('deploy.buildnodesmanager.sf85549') : t('common.test')} {testingId === node.id ? '测试中' : '测试'}
</Button> </Button>
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggle(node)}> <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggle(node)}>
{node.enabled ? t('common.disable') : t('common.enable')} {node.enabled ? '禁用' : '启用'}
</Button> </Button>
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(node)}> <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(node)}>
<Pencil className="h-3.5 w-3.5" /> <Pencil className="h-3.5 w-3.5" />
@@ -283,22 +281,22 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}> <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-md bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"> <DialogContent className="max-w-md bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
<DialogHeader> <DialogHeader>
<DialogTitle>{editNode ? t('k8s.topology.editNode') : t('k8s.topology.addNode')}</DialogTitle> <DialogTitle>{editNode ? '编辑节点' : '添加节点'}</DialogTitle>
<DialogDescription className="text-[var(--dg-text-muted)]"> <DialogDescription className="text-[var(--dg-text-muted)]">
基于服务器 SSH 凭据注册构建 Agent,流水线可绑定或自动调度 基于服务器 SSH 凭据注册构建 Agent,流水线可绑定或自动调度
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('k8s.topology.nodeName')}</Label> <Label className="text-xs">节点名称</Label>
<Input value={name} onChange={(e) => setName(e.target.value)} className="h-8 text-xs dg-input" placeholder="build-node-01" /> <Input value={name} onChange={(e) => setName(e.target.value)} className="h-8 text-xs dg-input" placeholder="build-node-01" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('deploy.buildnodesmanager.sdfdaf1')}</Label> <Label className="text-xs">关联服务器</Label>
<Select value={serverId || '__none'} onValueChange={(v) => setServerId(v === '__none' ? '' : v)}> <Select value={serverId || '__none'} onValueChange={(v) => setServerId(v === '__none' ? '' : v)}>
<SelectTrigger className="h-8 text-xs dg-input"><SelectValue placeholder=t('deploy.buildnodesmanager.s030235') /></SelectTrigger> <SelectTrigger className="h-8 text-xs dg-input"><SelectValue placeholder="选择服务器" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="__none">{t('common.selectPlaceholder')}</SelectItem> <SelectItem value="__none">请选择</SelectItem>
{servers.map((s) => ( {servers.map((s) => (
<SelectItem key={s.id} value={String(s.id)}> <SelectItem key={s.id} value={String(s.id)}>
{s.hostname} ({s.ip}) {s.hostname} ({s.ip})
@@ -309,25 +307,25 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
</div> </div>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('deploy.buildnodesmanager.s8e408e')}</Label> <Label className="text-xs">最大并发</Label>
<Input value={maxExecutors} onChange={(e) => setMaxExecutors(e.target.value)} type="number" min={1} className="h-8 text-xs dg-input" /> <Input value={maxExecutors} onChange={(e) => setMaxExecutors(e.target.value)} type="number" min={1} className="h-8 text-xs dg-input" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('deploy.buildnodesmanager.sbcfcd0')}</Label> <Label className="text-xs">工作区路径</Label>
<Input value={workspacePath} onChange={(e) => setWorkspacePath(e.target.value)} className="h-8 text-xs font-mono dg-input" /> <Input value={workspacePath} onChange={(e) => setWorkspacePath(e.target.value)} className="h-8 text-xs font-mono dg-input" />
</div> </div>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('common.tag')} <span className="text-[var(--dg-text-muted)]">{t('deploy.buildnodesmanager.s6c9a78')}</span></Label> <Label className="text-xs">标签 <span className="text-[var(--dg-text-muted)]">(可选)</span></Label>
<Input value={labels} onChange={(e) => setLabels(e.target.value)} className="h-8 text-xs dg-input" placeholder="linux,docker,high-mem" /> <Input value={labels} onChange={(e) => setLabels(e.target.value)} className="h-8 text-xs dg-input" placeholder="linux,docker,high-mem" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('common.description')}</Label> <Label className="text-xs">描述</Label>
<Input value={description} onChange={(e) => setDescription(e.target.value)} className="h-8 text-xs dg-input" /> <Input value={description} onChange={(e) => setDescription(e.target.value)} className="h-8 text-xs dg-input" />
</div> </div>
<div className="flex justify-end gap-2 pt-2"> <div className="flex justify-end gap-2 pt-2">
<Button variant="outline" onClick={() => setDialogOpen(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
<Button onClick={handleSubmit} disabled={submitting}>{submitting ? i18n.t('deploy.buildnodesmanager.s7cbf2d') : i18n.t('common.save')}</Button> <Button onClick={handleSubmit} disabled={submitting}>{submitting ? '保存中' : '保存'}</Button>
</div> </div>
</div> </div>
</DialogContent> </DialogContent>
@@ -344,7 +342,7 @@ export default function BuildNodesManager({ embedded = false }: { embedded?: boo
} }
return ( return (
<PageShell title=i18n.t('pipeline.buildNode') subtitle=i18n.t('deploy.buildnodesmanager.sb2b825')> <PageShell title="构建节点" subtitle="Master 与远程 SSH 构建节点">
{panel} {panel}
{dialog} {dialog}
</PageShell> </PageShell>
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
@@ -10,7 +11,6 @@ import { Plus, Key, Globe, Container } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { credentialApi, deployApi } from '@/api'; import { credentialApi, deployApi } from '@/api';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface Repo { interface Repo {
id: number; name: string; url: string; credential_id: number | null; id: number; name: string; url: string; credential_id: number | null;
@@ -89,7 +89,7 @@ export default function CredentialFormDialog({ open, onOpenChange, type, editId,
} }
onOpenChange(false); onOpenChange(false);
onSave(); onSave();
} catch { toast.error(t('common.saveFailed')); } } catch { toast.error(t('deploy.toast.saveFailed')); }
finally { setSaving(false); } finally { setSaving(false); }
}; };
@@ -101,20 +101,20 @@ export default function CredentialFormDialog({ open, onOpenChange, type, editId,
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2"> <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<CredIcon className="h-5 w-5 text-[var(--dg-blue)]" /> <CredIcon className="h-5 w-5 text-[var(--dg-blue)]" />
{editId ? t('common.edit') : t('deploy.credentialformdialog.s66ab5e')}{isRepo ? t('deploy.credentialformdialog.s0b7cb4') : t('deploy.credentialformdialog.s7f34a8')} {editId ? t('common.edit') : t('common.add')} {isRepo ? t('deploy.credForm.gitRepo') : t('deploy.credForm.imageRegistry')}
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-2"> <div className="space-y-4 py-2">
<div className="space-y-1"><Label>{t('deploy.form.nameStar')}</Label> <div className="space-y-1"><Label>{t('deploy.form.nameStar')}</Label>
<Input value={name} onChange={e => setName(e.target.value)} placeholder={isRepo ? t('deploy.credentialformdialog.se9548a') : t('deploy.credentialformdialog.sa4d9ef')} className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /></div> <Input value={name} onChange={e => setName(e.target.value)} placeholder={isRepo ? t('deploy.credForm.repoNamePlaceholder') : t('deploy.credForm.registryNamePlaceholder')} className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /></div>
<div className="space-y-1"><Label>{isRepo ? t('deploy.form.repoUrlStar') : 'Registry URL *'}</Label> <div className="space-y-1"><Label>{isRepo ? t('deploy.form.repoUrlStar') : 'Registry URL *'}</Label>
<Input value={url} onChange={e => setUrl(e.target.value)} placeholder={isRepo ? 'http://10.10.10.72:9000/group/repo.git' : 'http://10.10.10.72'} className="font-mono text-sm bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /></div> <Input value={url} onChange={e => setUrl(e.target.value)} placeholder={isRepo ? 'http://10.10.10.72:9000/group/repo.git' : 'http://10.10.10.72'} className="font-mono text-sm bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /></div>
{!isRepo && <div className="space-y-1"><Label>{t('deploy.form.defaultNamespace')}</Label> {!isRepo && <div className="space-y-1"><Label>{t('deploy.form.defaultNamespace')}</Label>
<Input value={namespace} onChange={e => setNamespace(e.target.value)} placeholder=t('deploy.credentialformdialog.s2a8bb1') className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /></div>} <Input value={namespace} onChange={e => setNamespace(e.target.value)} placeholder={t('deploy.credForm.namespacePlaceholder')} className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /></div>}
{/* 关联凭证 */} {/* 关联凭证 */}
<div className="space-y-1"> <div className="space-y-1">
<Label>{t('deploy.cred.linkedCred')} <span className="text-xs text-[var(--dg-text-secondary)] opacity-70">{t('deploy.credentialformdialog.s30220a')}</span></Label> <Label>{t('deploy.cred.linkedCred')} <span className="text-xs text-[var(--dg-text-secondary)] opacity-70">{t('deploy.credForm.credHint')}</span></Label>
<Select value={String(credentialId)} onValueChange={v => setCredentialId(v === '__none' ? '' : v)}> <Select value={String(credentialId)} onValueChange={v => setCredentialId(v === '__none' ? '' : v)}>
<SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"> <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
<SelectValue placeholder={isRepo ? t('deploy.cred.selectApiCred') : t('deploy.cred.selectDockerPwd')} /> <SelectValue placeholder={isRepo ? t('deploy.cred.selectApiCred') : t('deploy.cred.selectDockerPwd')} />
@@ -134,14 +134,14 @@ export default function CredentialFormDialog({ open, onOpenChange, type, editId,
{filteredCredentials.length === 0 && ( {filteredCredentials.length === 0 && (
<p className="text-xs dg-text-yellow flex items-center gap-1 mt-1"> <p className="text-xs dg-text-yellow flex items-center gap-1 mt-1">
<Plus className="h-3 w-3" /> <Plus className="h-3 w-3" />
暂无{isRepo ? '' : t('pipeline.dockerPassword')}类型凭证,请在凭证配置页面新增 {t('deploy.credForm.noCredHint', { type: isRepo ? '' : t('deploy.credForm.dockerPwd') })}
</p> </p>
)} )}
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button>
<Button onClick={handleSave} disabled={saving}>{saving ? i18n.t('k8s.topology.saving') : i18n.t('common.save')}</Button> <Button onClick={handleSave} disabled={saving}>{saving ? t('deploy.pipeline.saving') : t('common.save')}</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Plus, Pencil, Trash2, RefreshCw, GitBranch, Container, Globe, Settings2 } from 'lucide-react'; import { Plus, Pencil, Trash2, RefreshCw, GitBranch, Container, Globe, Settings2 } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@@ -18,7 +19,6 @@ import { deployApi } from '@/api';
import CredentialFormDialog from './CredentialFormDialog'; import CredentialFormDialog from './CredentialFormDialog';
import ToolConfigTab from './ToolConfigTab'; import ToolConfigTab from './ToolConfigTab';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface Repo { interface Repo {
id: number; name: string; description: string; url: string; id: number; name: string; description: string; url: string;
@@ -67,31 +67,31 @@ function EnvFormDialog({ open, onClose, onSaved, editData }: { open: boolean; on
toast.success(editData ? t('deploy.toast.updated') : t('deploy.toast.created')); toast.success(editData ? t('deploy.toast.updated') : t('deploy.toast.created'));
onSaved(); onSaved();
onClose(); onClose();
} catch { toast.error(t('common.operationFailed')); } } catch { toast.error(t('deploy.toast.operationFailed')); }
finally { setSubmitting(false); } finally { setSubmitting(false); }
}; };
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose}>
<DialogContent> <DialogContent>
<DialogHeader><DialogTitle>{editData ? t('pipeline.editEnv') : t('pipeline.addEnv')}</DialogTitle></DialogHeader> <DialogHeader><DialogTitle>{editData ? t('deploy.env.editEnv') : t('deploy.env.addEnv')}</DialogTitle></DialogHeader>
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1"><Label>{t('pipeline.envLabel')}</Label><Input value={name} onChange={e => setName(e.target.value)} placeholder="production" /></div> <div className="space-y-1"><Label>{t('deploy.env.envLabel')}</Label><Input value={name} onChange={e => setName(e.target.value)} placeholder="production" /></div>
<div className="space-y-1"><Label>{t('system.userDisplayName')}</Label><Input value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder=t('pipeline.prodEnv') /></div> <div className="space-y-1"><Label>{t('deploy.table.displayName')}</Label><Input value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder={t('deploy.env.prodEnv')} /></div>
<div className="space-y-1"><Label>{t('pipeline.envType')}</Label> <div className="space-y-1"><Label>{t('deploy.env.envType')}</Label>
<Select value={envType} onValueChange={setEnvType}> <Select value={envType} onValueChange={setEnvType}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="production">{t('pipeline.prodEnv')}</SelectItem> <SelectItem value="production">{t('deploy.env.prodEnv')}</SelectItem>
<SelectItem value="staging">{t('pipeline.staging')}</SelectItem> <SelectItem value="staging">{t('deploy.env.staging')}</SelectItem>
<SelectItem value="testing">{t('pipeline.testEnv')}</SelectItem> <SelectItem value="testing">{t('deploy.env.testEnv')}</SelectItem>
<SelectItem value="development">{t('pipeline.devEnv')}</SelectItem> <SelectItem value="development">{t('deploy.env.devEnv')}</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="space-y-1"><Label>{t('deploy.deploycredentials.sc06ac4')}</Label><Input value={color} onChange={e => setColor(e.target.value)} type="color" className="w-16 h-9 p-1" /></div> <div className="space-y-1"><Label>{t('deploy.table.color')}</Label><Input value={color} onChange={e => setColor(e.target.value)} type="color" className="w-16 h-9 p-1" /></div>
<div className="space-y-1"><Label>{t('deploy.deploycredentials.s65dd48')}</Label><Input value={sortOrder} onChange={e => setSortOrder(Number(e.target.value))} type="number" /></div> <div className="space-y-1"><Label>{t('deploy.table.sortOrder')}</Label><Input value={sortOrder} onChange={e => setSortOrder(Number(e.target.value))} type="number" /></div>
<div className="space-y-1"><Label>{t('common.description')}</Label><Input value={description} onChange={e => setDescription(e.target.value)} placeholder=t('common.optional') /></div> <div className="space-y-1"><Label>{t('deploy.form.desc')}</Label><Input value={description} onChange={e => setDescription(e.target.value)} placeholder={t('common.optional')} /></div>
</div> </div>
<div className="flex justify-end gap-2 mt-4"> <div className="flex justify-end gap-2 mt-4">
<Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button> <Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button>
@@ -136,32 +136,32 @@ export default function DeployCredentials() {
useEffect(() => { fetchAll(); }, []); useEffect(() => { fetchAll(); }, []);
const handleDelete = async (type: 'repo' | 'registry' | 'env', item: JsonData) => { const handleDelete = async (type: 'repo' | 'registry' | 'env', item: JsonData) => {
const ok = await _confirm({ title: t('common.delete'), description: t('deploy.deploycredentials.s999d97', { item.name || item.display_name: item.name || item.display_name }), confirmText: t('common.delete'), variant: 'destructive' }); const ok = await _confirm({ title: t('common.delete'), description: t('deploy.toast.deleteConfirm', { name: item.name || item.display_name }), confirmText: t('common.delete'), variant: 'destructive' });
if (!ok) return; if (!ok) return;
try { try {
if (type === 'repo') await deployApi.deleteRepo(item.id); if (type === 'repo') await deployApi.deleteRepo(item.id);
else if (type === 'registry') await deployApi.deleteRegistry(item.id); else if (type === 'registry') await deployApi.deleteRegistry(item.id);
else await deployApi.deleteEnvironment(item.id); else await deployApi.deleteEnvironment(item.id);
toast.success(t('alert.deleted')); toast.success(t('deploy.toast.deleted'));
fetchAll(); fetchAll();
} catch { toast.error(t('common.deleteFailed')); } } catch { toast.error(t('deploy.toast.deleteFailed')); }
}; };
const envTypeLabel: Record<string, string> = { production: t('pipeline.production'), staging: t('pipeline.staging'), testing: t('common.test'), development: t('pipeline.development') }; const envTypeLabel: Record<string, string> = { production: t('deploy.env.production'), staging: t('deploy.env.staging'), testing: t('deploy.env.testing'), development: t('deploy.env.development') };
const pageTabs = [ const pageTabs = [
{ id: 'repos', label: t('deploy.deploycredentials.sd71d03'), badge: repos.length || undefined }, { id: 'repos', label: t('deploy.credForm.gitRepo'), badge: repos.length || undefined },
{ id: 'registries', label: t('pipeline.registry'), badge: registries.length || undefined }, { id: 'registries', label: t('deploy.credForm.imageRegistry'), badge: registries.length || undefined },
{ id: 'environments', label: t('pipeline.envManage'), badge: environments.length || undefined }, { id: 'environments', label: t('deploy.label.envManage'), badge: environments.length || undefined },
{ id: 'build-nodes', label: t('pipeline.buildNode') }, { id: 'build-nodes', label: t('deploy.deployNav.buildNodes') },
{ id: 'tools', label: t('deploy.tool.title') }, { id: 'tools', label: t('deploy.tool.title') },
]; ];
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('menu.deployConfig') title={t('deploy.label.releaseConfig')}
subtitle=t('deploy.deploycredentials.s15a730') subtitle={t('deploy.credForm.pageSubtitle')}
icon={<Settings2 className="h-5 w-5" />} icon={<Settings2 className="h-5 w-5" />}
loading={loading} loading={loading}
tabs={pageTabs} tabs={pageTabs}
@@ -170,13 +170,13 @@ export default function DeployCredentials() {
actions={activeTab === 'build-nodes' ? undefined : ( actions={activeTab === 'build-nodes' ? undefined : (
<> <>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchAll}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchAll}>
<RefreshCw className="w-4 h-4 mr-1" />刷新 <RefreshCw className="w-4 h-4 mr-1" />{t('common.refresh')}
</Button> </Button>
<Button size="sm" className="dg-btn-primary" onClick={() => { setEditType('repo'); setEditingId(null); setEditorOpen(true); }}> <Button size="sm" className="dg-btn-primary" onClick={() => { setEditType('repo'); setEditingId(null); setEditorOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新增 Git 仓库 <Plus className="w-4 h-4 mr-1" />{t('deploy.credForm.newRepo')}
</Button> </Button>
<Button size="sm" variant="secondary" onClick={() => { setEditType('registry'); setEditingId(null); setEditorOpen(true); }}> <Button size="sm" variant="secondary" onClick={() => { setEditType('registry'); setEditingId(null); setEditorOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新增镜像仓库 <Plus className="w-4 h-4 mr-1" />{t('deploy.credForm.newRegistry')}
</Button> </Button>
</> </>
)} )}
@@ -184,17 +184,17 @@ export default function DeployCredentials() {
> >
{activeTab === 'repos' && ( {activeTab === 'repos' && (
repos.length === 0 ? ( repos.length === 0 ? (
<PageEmpty icon={<GitBranch className="h-10 w-10" />} title=t('deploy.deploycredentials.sb19733') /> <PageEmpty icon={<GitBranch className="h-10 w-10" />} title={t('deploy.credForm.noRepo')} />
) : ( ) : (
<ContentPanel noPadding> <ContentPanel noPadding>
<div className="overflow-hidden"> <div className="overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]"> <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr> <tr>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.name')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.name')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden md:table-cell">{t('deploy.table.repoUrl')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden md:table-cell">{t('deploy.table.repoUrl')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.cred.authMethod')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.cred.authMethod')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.status')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.status')}</th>
<th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th> <th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th>
</tr> </tr>
</thead> </thead>
@@ -224,18 +224,18 @@ export default function DeployCredentials() {
{activeTab === 'registries' && ( {activeTab === 'registries' && (
registries.length === 0 ? ( registries.length === 0 ? (
<PageEmpty icon={<Container className="h-10 w-10" />} title=t('deploy.deploycredentials.sdf33f0') /> <PageEmpty icon={<Container className="h-10 w-10" />} title={t('deploy.credForm.noRegistry')} />
) : ( ) : (
<ContentPanel noPadding> <ContentPanel noPadding>
<div className="overflow-hidden"> <div className="overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]"> <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr> <tr>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.name')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.name')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden md:table-cell">Registry URL</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden md:table-cell">Registry URL</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden sm:table-cell">{t('k8s.column.namespace')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden sm:table-cell">{t('deploy.credForm.namespace')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.deploycredentials.sb7158a')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.cred.authMethod')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.status')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.status')}</th>
<th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th> <th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th>
</tr> </tr>
</thead> </thead>
@@ -274,8 +274,8 @@ export default function DeployCredentials() {
{environments.length === 0 ? ( {environments.length === 0 ? (
<PageEmpty <PageEmpty
icon={<Globe className="h-10 w-10" />} icon={<Globe className="h-10 w-10" />}
title=t('pipeline.noEnv') title="暂无环境配置"
description=t('deploy.deploycredentials.sac4fb6') description='点击"新增环境"创建'
action={( action={(
<Button size="sm" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}> <Button size="sm" onClick={() => { setEditEnv(null); setEnvDialogOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新增环境 <Plus className="w-4 h-4 mr-1" />新增环境
@@ -288,13 +288,13 @@ export default function DeployCredentials() {
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]"> <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr> <tr>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('pipeline.envLabel')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">环境标识</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('system.userDisplayName')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">显示名称</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.type')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">类型</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.color')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">颜色</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.sort')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">排序</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.status')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">状态</th>
<th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th> <th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -311,7 +311,7 @@ export default function DeployCredentials() {
<td className="px-3 py-2"><div className="w-6 h-6 rounded border" style={{ backgroundColor: env.color }} /></td> <td className="px-3 py-2"><div className="w-6 h-6 rounded border" style={{ backgroundColor: env.color }} /></td>
<td className="px-3 py-2 text-[var(--dg-text-secondary)]">{env.sort_order}</td> <td className="px-3 py-2 text-[var(--dg-text-secondary)]">{env.sort_order}</td>
<td className="px-3 py-2"> <td className="px-3 py-2">
<Badge className={env.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{env.enabled ? t('common.enable') : t('common.disable')}</Badge> <Badge className={env.enabled ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]'}>{env.enabled ? '启用' : '禁用'}</Badge>
</td> </td>
<td className="px-3 py-2 text-right"> <td className="px-3 py-2 text-right">
<div className="flex justify-end gap-1"> <div className="flex justify-end gap-1">
+42 -45
View File
@@ -17,8 +17,6 @@ import UserGroupsManager from './UserGroupsManager';
import { JobRoleCreateDialog } from './deploy-rbac/JobRoleCreateDialog'; import { JobRoleCreateDialog } from './deploy-rbac/JobRoleCreateDialog';
import { matchPipelines, pipelineDisplayLabel, type PipelineMatchItem } from './deploy-rbac/matchPipeline'; import { matchPipelines, pipelineDisplayLabel, type PipelineMatchItem } from './deploy-rbac/matchPipeline';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
interface ItemRole { interface ItemRole {
id: number; id: number;
@@ -39,16 +37,15 @@ interface AssignedUser {
} }
const ROLE_LABEL: Record<string, string> = { const ROLE_LABEL: Record<string, string> = {
owner: i18n.t('common.owner'), owner: '拥有者',
editor: i18n.t('pipeline.editor'), editor: '编辑者',
viewer: i18n.t('pipeline.viewer'), viewer: '查看者',
}; };
const RBAC_TABS = ['roles', 'users', 'preview', 'groups'] as const; const RBAC_TABS = ['roles', 'users', 'preview', 'groups'] as const;
// 发布 Job 权限 — 正则匹配 code / job_name,Jenkins Role Strategy 风格 // Logan.Li // 发布 Job 权限 — 正则匹配 code / job_name,Jenkins Role Strategy 风格 // Logan.Li
export default function DeployRBAC() { export default function DeployRBAC() {
const { t } = useTranslation();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const tabFromUrl = searchParams.get('tab'); const tabFromUrl = searchParams.get('tab');
const [roles, setRoles] = useState<ItemRole[]>([]); const [roles, setRoles] = useState<ItemRole[]>([]);
@@ -113,7 +110,7 @@ export default function DeployRBAC() {
const handleCreate = async () => { const handleCreate = async () => {
if (!newName.trim() || !newCode.trim() || !newPattern.trim()) { if (!newName.trim() || !newCode.trim() || !newPattern.trim()) {
toast.error(t('deploy.deployrbac.sf6e80b')); return; toast.error('请填写名称、标识与正则'); return;
} }
setSaving(true); setSaving(true);
try { try {
@@ -124,84 +121,84 @@ export default function DeployRBAC() {
role: newRole, role: newRole,
description: newDesc, description: newDesc,
}); });
toast.success(t('deploy.toast.created')); toast.success('已创建');
setCreateOpen(false); setCreateOpen(false);
setNewName(''); setNewCode(''); setNewPattern(''); setNewRole('editor'); setNewDesc(''); setNewName(''); setNewCode(''); setNewPattern(''); setNewRole('editor'); setNewDesc('');
loadData(); loadData();
} catch (e: unknown) { } catch (e: unknown) {
toast.error((e as Error)?.message || t('monitor.quickSetupFailed')); toast.error((e as Error)?.message || '创建失败');
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
const handleUpdate = async (id: number) => { const handleUpdate = async (id: number) => {
if (!editPattern.trim()) { toast.error(t('pipeline.regexEmpty')); return; } if (!editPattern.trim()) { toast.error('正则不能为空'); return; }
setSaving(true); setSaving(true);
try { try {
await deployApi.updateItemRole(id, { pattern: editPattern, role: editRole }); await deployApi.updateItemRole(id, { pattern: editPattern, role: editRole });
toast.success(t('deploy.toast.updated')); toast.success('已更新');
setEditing(null); setEditing(null);
loadData(); loadData();
} catch (e: unknown) { } catch (e: unknown) {
toast.error((e as Error)?.message || t('alert.updateFailed')); toast.error((e as Error)?.message || '更新失败');
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
const handleDelete = async (role: ItemRole) => { const handleDelete = async (role: ItemRole) => {
const ok = await _confirm({ const ok = await _confirm({
title: t('deploy.deployrbac.s5d79e4'), title: '删除权限',
description: t('deploy.deployrbac.s2c1ef5', { role.name: role.name, matchCount[role.id]?.length || 0: matchCount[role.id]?.length || 0 }), description: `确定删除「${role.name}」?将影响 ${matchCount[role.id]?.length || 0} 个发布任务`,
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
try { await deployApi.deleteItemRole(role.id); toast.success(t('alert.deleted')); loadData(); } try { await deployApi.deleteItemRole(role.id); toast.success('已删除'); loadData(); }
catch { toast.error(t('common.deleteFailed')); } catch { toast.error('删除失败'); }
}; };
const handleToggleStatus = async (role: ItemRole) => { const handleToggleStatus = async (role: ItemRole) => {
try { try {
await deployApi.updateItemRole(role.id, { status: role.status ? 0 : 1 }); await deployApi.updateItemRole(role.id, { status: role.status ? 0 : 1 });
toast.success(role.status ? t('alert.disabled') : t('alert.enabled')); toast.success(role.status ? '已禁用' : '已启用');
loadData(); loadData();
} catch { toast.error(t('common.operationFailed')); } } catch { toast.error('操作失败'); }
}; };
const handleAssign = async () => { const handleAssign = async () => {
if (!selectedUserId || !assignRoleId) { toast.error(t('deploy.deployrbac.s0fc539')); return; } if (!selectedUserId || !assignRoleId) { toast.error('请选择用户和权限'); return; }
setAssignLoading(true); setAssignLoading(true);
try { try {
await deployApi.assignItemRole(Number(selectedUserId), { await deployApi.assignItemRole(Number(selectedUserId), {
user_id: Number(selectedUserId), user_id: Number(selectedUserId),
item_role_id: Number(assignRoleId), item_role_id: Number(assignRoleId),
}); });
toast.success(t('common.assigned')); toast.success('已分配');
setAssignRoleId(''); setAssignRoleId('');
loadAssignments(); loadAssignments();
} catch (e: unknown) { } catch (e: unknown) {
toast.error((e as Error)?.message || t('deploy.rbac.assignFail')); toast.error((e as Error)?.message || '分配失败');
} finally { setAssignLoading(false); } } finally { setAssignLoading(false); }
}; };
const handleRevoke = async (id: number) => { const handleRevoke = async (id: number) => {
try { try {
await deployApi.removeItemRole(Number(selectedUserId), id); await deployApi.removeItemRole(Number(selectedUserId), id);
toast.success(t('deploy.toast.revoked')); toast.success('已撤销');
loadAssignments(); loadAssignments();
} catch { toast.error(t('deploy.toast.revokeFailed')); } } catch { toast.error('撤销失败'); }
}; };
const selectedUser = users.find((u) => String(u.id) === selectedUserId); const selectedUser = users.find((u) => String(u.id) === selectedUserId);
const pageTabs = [ const pageTabs = [
{ id: 'roles', label: t('deploy.deployrbac.s93ef07'), badge: roles.length || undefined }, { id: 'roles', label: '权限策略', badge: roles.length || undefined },
{ id: 'users', label: t('deploy.deployrbac.s2de895') }, { id: 'users', label: '用户授权' },
{ id: 'groups', label: t('pipeline.userGroup') }, { id: 'groups', label: '用户组' },
{ id: 'preview', label: t('pipeline.matchPreview') }, { id: 'preview', label: '命中预览' },
]; ];
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('deploy.deployNav.jobPermission') title="Job 权限"
subtitle=t('deploy.deployrbac.sa596d6') subtitle="按流水线 code / Job 名称正则分配发布权限"
icon={<Shield className="h-5 w-5" />} icon={<Shield className="h-5 w-5" />}
loading={loading} loading={loading}
tabs={pageTabs} tabs={pageTabs}
@@ -218,9 +215,9 @@ export default function DeployRBAC() {
roles.length === 0 ? ( roles.length === 0 ? (
<PageEmpty <PageEmpty
icon={<Shield className="h-10 w-10" />} icon={<Shield className="h-10 w-10" />}
title=t('deploy.deployrbac.sca578c') title="暂无 Job 权限策略"
description=t('deploy.deployrbac.s5ac382') description="创建策略后,用户将按正则自动获得匹配流水线的访问权限"
action={<Button onClick={() => setCreateOpen(true)}><Plus className="h-4 w-4 mr-1" />{t('deploy.deployrbac.s605884')}</Button>} action={<Button onClick={() => setCreateOpen(true)}><Plus className="h-4 w-4 mr-1" />新建权限</Button>}
/> />
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
@@ -234,7 +231,7 @@ export default function DeployRBAC() {
<Badge variant="outline" className="text-[10px] border-[var(--dg-border)]"> <Badge variant="outline" className="text-[10px] border-[var(--dg-border)]">
{ROLE_LABEL[role.role] || role.role} {ROLE_LABEL[role.role] || role.role}
</Badge> </Badge>
{role.status === 0 && <Badge variant="outline" className="text-[10px]">{t('alert.disabled')}</Badge>} {role.status === 0 && <Badge variant="outline" className="text-[10px]">已禁用</Badge>}
<Badge <Badge
variant="outline" variant="outline"
className="text-[10px] cursor-pointer border-[var(--dg-border)]" className="text-[10px] cursor-pointer border-[var(--dg-border)]"
@@ -255,9 +252,9 @@ export default function DeployRBAC() {
<Select value={editRole} onValueChange={setEditRole}> <Select value={editRole} onValueChange={setEditRole}>
<SelectTrigger className="h-7 w-20 text-xs"><SelectValue /></SelectTrigger> <SelectTrigger className="h-7 w-20 text-xs"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="owner">{t('common.owner')}</SelectItem> <SelectItem value="owner">拥有者</SelectItem>
<SelectItem value="editor">{t('pipeline.editor')}</SelectItem> <SelectItem value="editor">编辑者</SelectItem>
<SelectItem value="viewer">{t('pipeline.viewer')}</SelectItem> <SelectItem value="viewer">查看者</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button> <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
@@ -265,8 +262,8 @@ export default function DeployRBAC() {
</> </>
) : ( ) : (
<> <>
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => { setEditing(role.id); setEditPattern(role.pattern); setEditRole(role.role); }}>{t('common.edit')}</Button> <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => { setEditing(role.id); setEditPattern(role.pattern); setEditRole(role.role); }}>编辑</Button>
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggleStatus(role)}>{role.status ? t('common.disable') : t('common.enable')}</Button> <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggleStatus(role)}>{role.status ? '禁用' : '启用'}</Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-red)]" onClick={() => handleDelete(role)}><Trash2 className="w-3.5 h-3.5" /></Button> <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-red)]" onClick={() => handleDelete(role)}><Trash2 className="w-3.5 h-3.5" /></Button>
</> </>
)} )}
@@ -284,9 +281,9 @@ export default function DeployRBAC() {
<CardContent className="p-4 space-y-4"> <CardContent className="p-4 space-y-4">
<div className="flex flex-wrap gap-3 items-end"> <div className="flex flex-wrap gap-3 items-end">
<div className="space-y-1 flex-1 min-w-[200px]"> <div className="space-y-1 flex-1 min-w-[200px]">
<Label className="text-xs">{t('system.roleUsers')}</Label> <Label className="text-xs">用户</Label>
<Select value={selectedUserId} onValueChange={setSelectedUserId}> <Select value={selectedUserId} onValueChange={setSelectedUserId}>
<SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder=t('deploy.rbac.selectUser') /></SelectTrigger> <SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder="选择用户" /></SelectTrigger>
<SelectContent className="max-h-60"> <SelectContent className="max-h-60">
{users.map((u) => ( {users.map((u) => (
<SelectItem key={u.id as number} value={String(u.id)}> <SelectItem key={u.id as number} value={String(u.id)}>
@@ -297,9 +294,9 @@ export default function DeployRBAC() {
</Select> </Select>
</div> </div>
<div className="space-y-1 w-48"> <div className="space-y-1 w-48">
<Label className="text-xs">{t('deploy.deployrbac.s93ef07')}</Label> <Label className="text-xs">权限策略</Label>
<Select value={assignRoleId} onValueChange={setAssignRoleId}> <Select value={assignRoleId} onValueChange={setAssignRoleId}>
<SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder=t('kubernetes.hpa.selectPolicy') /></SelectTrigger> <SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder="选择策略" /></SelectTrigger>
<SelectContent> <SelectContent>
{roles.filter((r) => r.status === 1).map((r) => ( {roles.filter((r) => r.status === 1).map((r) => (
<SelectItem key={r.id} value={String(r.id)}>{r.name} ({ROLE_LABEL[r.role]})</SelectItem> <SelectItem key={r.id} value={String(r.id)}>{r.name} ({ROLE_LABEL[r.role]})</SelectItem>
@@ -314,7 +311,7 @@ export default function DeployRBAC() {
</div> </div>
{selectedUser ? ( {selectedUser ? (
assignments.length === 0 ? ( assignments.length === 0 ? (
<p className="text-xs text-[var(--dg-text-muted)]">{t('deploy.deployrbac.sef9548')}</p> <p className="text-xs text-[var(--dg-text-muted)]">该用户尚未分配 Job 权限</p>
) : ( ) : (
<div className="space-y-1.5"> <div className="space-y-1.5">
{assignments.map((a) => { {assignments.map((a) => {
@@ -335,7 +332,7 @@ export default function DeployRBAC() {
</div> </div>
) )
) : ( ) : (
<p className="text-xs text-[var(--dg-text-muted)] flex items-center gap-1"><Users className="w-3.5 h-3.5" />{t('deploy.deployrbac.s9be00c')}</p> <p className="text-xs text-[var(--dg-text-muted)] flex items-center gap-1"><Users className="w-3.5 h-3.5" />选择用户后查看已分配权限</p>
)} )}
</CardContent> </CardContent>
</Card> </Card>
@@ -370,7 +367,7 @@ export default function DeployRBAC() {
</Badge> </Badge>
))} ))}
{previewRoleId !== null && previewMatches.length === 0 && ( {previewRoleId !== null && previewMatches.length === 0 && (
<span className="text-xs text-[var(--dg-text-muted)]">{t('deploy.deployrbac.s64096f')}</span> <span className="text-xs text-[var(--dg-text-muted)]">无匹配 — 请调整正则</span>
)} )}
</div> </div>
</CardContent> </CardContent>
@@ -1,4 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -19,7 +20,6 @@ import {
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { pipelineApi } from '@/api'; import { pipelineApi } from '@/api';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
import { useTranslation } from 'react-i18next';
interface FileItem { interface FileItem {
name: string; name: string;
@@ -58,12 +58,12 @@ export function FileBrowserDialog({
runId, runId,
buildNumber, buildNumber,
}: FileBrowserDialogProps) { }: FileBrowserDialogProps) {
const { t } = useTranslation();
const [listing, setListing] = useState<ListingData | null>(null); const [listing, setListing] = useState<ListingData | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
const [currentPath, setCurrentPath] = useState(''); const [currentPath, setCurrentPath] = useState('');
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
const { t } = useTranslation();
// 加载目录 // 加载目录
const loadDir = async (path: string) => { const loadDir = async (path: string) => {
@@ -75,7 +75,7 @@ export function FileBrowserDialog({
setListing(data); setListing(data);
setCurrentPath(data?.current || ''); setCurrentPath(data?.current || '');
} catch (err) { } catch (err) {
setError(err?.message || t('common.loadFailed')); setError(err?.message || t('deploy.toast.loadFailed'));
setListing(null); setListing(null);
} finally { } finally {
setLoading(false); setLoading(false);
@@ -115,7 +115,7 @@ export function FileBrowserDialog({
)} )}
style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '700px', width: '85vw' }} style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '700px', width: '85vw' }}
> >
<DialogTitle className="sr-only">文件浏览器 #{buildNumber}</DialogTitle> <DialogTitle className="sr-only">{t('deploy.pipeline.fileBrowser', { buildNumber })}</DialogTitle>
<DialogDescription className="sr-only">{t('deploy.pipeline.buildDirFiles')}</DialogDescription> <DialogDescription className="sr-only">{t('deploy.pipeline.buildDirFiles')}</DialogDescription>
{/* Header */} {/* Header */}
@@ -123,7 +123,7 @@ export function FileBrowserDialog({
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
<FolderOpen className="h-4 w-4 text-[var(--dg-text-secondary)] shrink-0" /> <FolderOpen className="h-4 w-4 text-[var(--dg-text-secondary)] shrink-0" />
<span className="text-[var(--dg-text-primary)] font-medium text-sm"> <span className="text-[var(--dg-text-primary)] font-medium text-sm">
#{buildNumber} 工作区文件 #{buildNumber} {t('deploy.fileBrowser.workspaceFiles')}
</span> </span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@@ -172,7 +172,7 @@ export function FileBrowserDialog({
<div className="overflow-y-auto" style={{ height: fullscreen ? 'calc(100vh - 110px)' : '420px' }}> <div className="overflow-y-auto" style={{ height: fullscreen ? 'calc(100vh - 110px)' : '420px' }}>
{loading && ( {loading && (
<div className="flex items-center justify-center h-full text-[var(--dg-text-muted)] text-sm"> <div className="flex items-center justify-center h-full text-[var(--dg-text-muted)] text-sm">
加载中... {t('common.loading')}
</div> </div>
)} )}
@@ -186,7 +186,7 @@ export function FileBrowserDialog({
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="sticky top-0 bg-[var(--dg-bg-primary)] border-b border-[var(--dg-border)]"> <thead className="sticky top-0 bg-[var(--dg-bg-primary)] border-b border-[var(--dg-border)]">
<tr className="text-left text-[var(--dg-text-muted)] text-xs"> <tr className="text-left text-[var(--dg-text-muted)] text-xs">
<th className="py-2 pl-4 pr-2 font-medium">{t('common.name')}</th> <th className="py-2 pl-4 pr-2 font-medium">{t('deploy.table.name')}</th>
<th className="py-2 px-2 font-medium w-24 text-right">{t('deploy.table.size')}</th> <th className="py-2 px-2 font-medium w-24 text-right">{t('deploy.table.size')}</th>
<th className="py-2 pr-4 pl-2 font-medium w-40 hidden sm:table-cell">{t('deploy.table.modifyTime')}</th> <th className="py-2 pr-4 pl-2 font-medium w-40 hidden sm:table-cell">{t('deploy.table.modifyTime')}</th>
<th className="py-2 pr-4 pl-2 font-medium w-16" /> <th className="py-2 pr-4 pl-2 font-medium w-16" />
@@ -245,7 +245,7 @@ export function FileBrowserDialog({
<button <button
onClick={(e) => { e.stopPropagation(); downloadFile(file); }} onClick={(e) => { e.stopPropagation(); downloadFile(file); }}
className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] hover:text-white" className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] hover:text-white"
title=t('common.download') title={t('deploy.label.download')}
> >
<Download className="h-3.5 w-3.5" /> <Download className="h-3.5 w-3.5" />
</button> </button>
@@ -77,7 +77,7 @@ export function PipelineDetailDialog({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-[var(--dg-text-secondary)] w-6">{index + 1}</span> <span className="text-[var(--dg-text-secondary)] w-6">{index + 1}</span>
{getStageStatusIcon(stage.status)} {getStageStatusIcon(stage.status, t)}
<span className="text-[var(--dg-text-primary)]">{stage.name}</span> <span className="text-[var(--dg-text-primary)]">{stage.name}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -144,7 +144,7 @@ export function PipelineDetailDialog({
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{getStatusBadge(run.status)} {getStatusBadge(run.status, t)}
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"> <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs">
<GitBranch className="h-3 w-3 mr-1" /> <GitBranch className="h-3 w-3 mr-1" />
{run.branch || 'main'} {run.branch || 'main'}
@@ -13,7 +13,7 @@ import {
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { pipelineTemplates } from './pipeline-helpers'; import { getPipelineTemplates } from './pipeline-helpers';
// 表单数据结构 // Logan.Li // 表单数据结构 // Logan.Li
export type PipelineFormData = { export type PipelineFormData = {
@@ -91,7 +91,7 @@ export function PipelineFormDialog({
<div> <div>
<Label className="text-[var(--dg-text-secondary)]">{t('deploy.template.selectTemplate')}</Label> <Label className="text-[var(--dg-text-secondary)]">{t('deploy.template.selectTemplate')}</Label>
<div className="grid grid-cols-2 gap-3 mt-1"> <div className="grid grid-cols-2 gap-3 mt-1">
{pipelineTemplates.map((template) => ( {getPipelineTemplates(t).map((template) => (
<Card <Card
key={template.id} key={template.id}
className={`cursor-pointer transition-all ${ className={`cursor-pointer transition-all ${
@@ -1,5 +1,6 @@
import { useState, useEffect, useRef, useCallback } from 'react'; import { useState, useEffect, useRef, useCallback } from 'react';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { import {
Play, Square, RefreshCw, Clock, User, AlertCircle, CheckCircle2, Play, Square, RefreshCw, Clock, User, AlertCircle, CheckCircle2,
@@ -15,17 +16,15 @@ import { FileBrowserDialog } from './FileBrowserDialog';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
// ═══════════ 阶段定义 (与 PipelineManager 共用) ═══════════ // ═══════════ 阶段定义 (与 PipelineManager 共用) ═══════════
const STAGE_DEFS = [ const STAGE_DEFS = [
{ key: 'checkout', label: i18n.t('pipeline.checkout'), icon: GitBranch, color: '#6366F1', order: 1 }, { key: 'checkout', label: '代码检出', icon: GitBranch, color: '#6366F1', order: 1 },
{ key: 'build', label: i18n.t('pipeline.build'), icon: Box, color: '#F59E0B', order: 2 }, { key: 'build', label: '构建', icon: Box, color: '#F59E0B', order: 2 },
{ key: 'test', label: i18n.t('common.test'), icon: CheckCircle2,color: '#10B981', order: 3 }, { key: 'test', label: '测试', icon: CheckCircle2,color: '#10B981', order: 3 },
{ key: 'image', label: i18n.t('deploy.stage.image'), icon: Container, color: '#06B6D4', order: 4 }, { key: 'image', label: '镜像打包', icon: Container, color: '#06B6D4', order: 4 },
{ key: 'deploy', label: i18n.t('pipeline.deploy'), icon: Rocket, color: '#EF4444', order: 5 }, { key: 'deploy', label: '部署', icon: Rocket, color: '#EF4444', order: 5 },
{ key: 'verify', label: i18n.t('common.validate'), icon: ShieldCheck, color: '#3B82F6', order: 6 }, { key: 'verify', label: '验证', icon: ShieldCheck, color: '#3B82F6', order: 6 },
].sort((a, b) => a.order - b.order); ].sort((a, b) => a.order - b.order);
interface PipelineRun { interface PipelineRun {
@@ -76,10 +75,10 @@ const STATUS_ICONS: JsonData = {
function formatDuration(seconds: number): string { function formatDuration(seconds: number): string {
if (!seconds) return '-'; if (!seconds) return '-';
if (seconds < 60) return i18n.t('deploy.pipelinerundetail.sbe383c', { seconds: seconds }); if (seconds < 60) return `${seconds}秒`;
const m = Math.floor(seconds / 60); const m = Math.floor(seconds / 60);
const s = seconds % 60; const s = seconds % 60;
return i18n.t('deploy.pipelinerundetail.s084409', { m: m, s: s }); return `${m}分${s}秒`;
} }
function formatTime(ts: string): string { function formatTime(ts: string): string {
@@ -134,6 +133,19 @@ function getStageLogSummary(logs: LogEntry[], stageKey: string): string {
export default function PipelineRunDetail() { export default function PipelineRunDetail() {
const { t } = useTranslation(); const { t } = useTranslation();
const { code: pipelineCode } = useParams<{ code: string }>(); const { code: pipelineCode } = useParams<{ code: string }>();
// 阶段名称国际化映射
const stageLabel = (key: string) => {
const map: Record<string, string> = {
checkout: t('deploy.stage.checkout'),
build: t('deploy.stage.build'),
test: t('deploy.stage.test'),
image: t('deploy.stage.image'),
deploy: t('deploy.stage.deploy'),
verify: t('common.verify'),
};
return map[key] || key;
};
const [pipeline, setPipeline] = useState<JsonData>(null); const [pipeline, setPipeline] = useState<JsonData>(null);
const [runs, setRuns] = useState<PipelineRun[]>([]); const [runs, setRuns] = useState<PipelineRun[]>([]);
const [selectedRun, setSelectedRun] = useState<PipelineRun | null>(null); const [selectedRun, setSelectedRun] = useState<PipelineRun | null>(null);
@@ -168,7 +180,7 @@ export default function PipelineRunDetail() {
if (!selectedRun && list.length > 0) { if (!selectedRun && list.length > 0) {
setSelectedRun(list[0]); setSelectedRun(list[0]);
} }
} catch { toast.error(t('deploy.pipelinerundetail.sa4e14e')); } } catch { toast.error(t('deploy.runDetail.fetchRunsFailed')); }
finally { setLoading(false); } finally { setLoading(false); }
}, [pipelineCode, pageSize]); }, [pipelineCode, pageSize]);
@@ -239,18 +251,18 @@ export default function PipelineRunDetail() {
const triggerRun = async () => { const triggerRun = async () => {
try { try {
await pipelineApi.triggerByCode(pipelineCode); await pipelineApi.triggerByCode(pipelineCode);
toast.success(t('automation.triggered')); toast.success(t('deploy.toast.triggered'));
fetchRuns(); fetchRuns();
} catch { toast.error(t('automation.triggerFailed')); } } catch { toast.error(t('deploy.toast.triggerFailed')); }
}; };
// 停止 // 停止
const stopRun = async (runId: number) => { const stopRun = async (runId: number) => {
try { try {
await pipelineApi.stopRunByCode(pipelineCode, runId); await pipelineApi.stopRunByCode(pipelineCode, runId);
toast.success(t('common.stopped')); toast.success(t('deploy.toast.stopped'));
fetchRuns(); fetchRuns();
} catch { toast.error(t('pipeline.stopFailed')); } } catch { toast.error(t('deploy.toast.stopFailed')); }
}; };
// 批量删除 // 批量删除
@@ -259,10 +271,10 @@ export default function PipelineRunDetail() {
setDeleting(true); setDeleting(true);
try { try {
await pipelineApi.batchDeleteRuns(pipelineCode, Array.from(selectedIds)); await pipelineApi.batchDeleteRuns(pipelineCode, Array.from(selectedIds));
toast.success(t('deploy.pipelinerundetail.s4b340c', { selectedIds.size: selectedIds.size })); toast.success(t('deploy.runDetail.deletedCount', { count: selectedIds.size }));
setSelectedIds(new Set()); setSelectedIds(new Set());
fetchRuns(); fetchRuns();
} catch { toast.error(t('cloud.batchDeleteFailed')); } } catch { toast.error(t('deploy.toast.batchDeleteFailed')); }
finally { setDeleting(false); } finally { setDeleting(false); }
}; };
@@ -302,15 +314,15 @@ export default function PipelineRunDetail() {
<PageShell <PageShell
variant="workspace" variant="workspace"
title={pipeline?.name || t('deploy.pipeline.detail')} title={pipeline?.name || t('deploy.pipeline.detail')}
subtitle={selectedRun ? t('deploy.pipelinerundetail.se9940a', { selectedRun.build_number: selectedRun.build_number }) : (pipeline?.code ? `code: ${pipeline.code}` : t('deploy.pipelinerundetail.sefc52b'))} subtitle={selectedRun ? t('deploy.pipeline.release', { number: selectedRun.build_number }) : (pipeline?.code ? `code: ${pipeline.code}` : t('deploy.runDetail.recordsAndLogs'))}
icon={<History className="h-5 w-5" />} icon={<History className="h-5 w-5" />}
contentClassName="space-y-4 h-full flex flex-col" contentClassName="space-y-4 h-full flex flex-col"
metrics={( metrics={(
<StatStrip <StatStrip
items={[ items={[
{ label: t('deploy.pipelinerundetail.s9b409b'), value: runs.length, color: 'blue' }, { label: t('deploy.runDetail.execRecords'), value: runs.length, color: 'blue' },
{ label: t('common.success'), value: successCount, color: 'emerald' }, { label: t('deploy.status.success'), value: successCount, color: 'emerald' },
{ label: t('common.executing'), value: runningCount, color: 'amber' }, { label: t('deploy.runDetail.executing'), value: runningCount, color: 'amber' },
]} ]}
/> />
)} )}
@@ -326,7 +338,7 @@ export default function PipelineRunDetail() {
)} )}
{selectedIds.size > 0 && ( {selectedIds.size > 0 && (
<Button variant="destructive" size="sm" onClick={batchDelete} disabled={deleting}> <Button variant="destructive" size="sm" onClick={batchDelete} disabled={deleting}>
<Trash2 className="w-4 h-4 mr-1" />删除 ({selectedIds.size}) <Trash2 className="w-4 h-4 mr-1" />{t('common.delete')} ({selectedIds.size})
</Button> </Button>
)} )}
<select <select
@@ -334,15 +346,15 @@ export default function PipelineRunDetail() {
onChange={e => setPageSize(Number(e.target.value))} onChange={e => setPageSize(Number(e.target.value))}
className="h-8 px-2 text-xs rounded border border-[var(--dg-border)] dg-input" className="h-8 px-2 text-xs rounded border border-[var(--dg-border)] dg-input"
> >
<option value={10}>{t('deploy.pipelinerundetail.s8776a1')}</option> <option value={10}>10{t('deploy.runDetail.perPage')}</option>
<option value={20}>{t('deploy.pipelinerundetail.s96dbf3')}</option> <option value={20}>20{t('deploy.runDetail.perPage')}</option>
<option value={30}>{t('deploy.pipelinerundetail.s074a81')}</option> <option value={30}>30{t('deploy.runDetail.perPage')}</option>
</select> </select>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchRuns}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchRuns}>
<RefreshCw className="w-4 h-4 mr-1" />刷新 <RefreshCw className="w-4 h-4 mr-1" />{t('common.refresh')}
</Button> </Button>
<Button size="sm" className="dg-btn-primary" onClick={triggerRun}> <Button size="sm" className="dg-btn-primary" onClick={triggerRun}>
<Play className="w-4 h-4 mr-1" />立即执行 <Play className="w-4 h-4 mr-1" />{t('deploy.pipeline.runNow')}
</Button> </Button>
</> </>
)} )}
@@ -383,7 +395,7 @@ export default function PipelineRunDetail() {
<div key={def.key} className="flex items-center"> <div key={def.key} className="flex items-center">
<button <button
onClick={() => setSelectedStage(selectedStage === def.key ? null : def.key)} onClick={() => setSelectedStage(selectedStage === def.key ? null : def.key)}
title={`${def.label}${status ? ` (${status})t('deploy.pipelinerundetail.sdaf2bb')} title={`${stageLabel(def.key)}${status ? ` (${status})` : ''} — ${t('deploy.runDetail.clickToViewLog')}`}
className={`flex items-center gap-1.5 px-3 py-2 text-[12px] font-semibold border shadow-sm transition-all cursor-pointer className={`flex items-center gap-1.5 px-3 py-2 text-[12px] font-semibold border shadow-sm transition-all cursor-pointer
${isActive ? 'ring-1 ring-offset-0 scale-[1.02]' : 'hover:brightness-110'}`} ${isActive ? 'ring-1 ring-offset-0 scale-[1.02]' : 'hover:brightness-110'}`}
style={{ style={{
@@ -394,7 +406,7 @@ export default function PipelineRunDetail() {
}} }}
> >
{icon} {icon}
<span>{def.label}</span> <span>{stageLabel(def.key)}</span>
</button> </button>
{!isLast && ( {!isLast && (
<div className="flex items-center justify-center w-5 h-5 -mx-px z-10"> <div className="flex items-center justify-center w-5 h-5 -mx-px z-10">
@@ -406,7 +418,7 @@ export default function PipelineRunDetail() {
})} })}
{selectedRun && ( {selectedRun && (
<span className="ml-auto text-[10px] text-[var(--dg-text-secondary)] opacity-40 shrink-0 pl-3 whitespace-nowrap"> <span className="ml-auto text-[10px] text-[var(--dg-text-secondary)] opacity-40 shrink-0 pl-3 whitespace-nowrap">
{selectedStage ? STAGE_DEFS.find(d => d.key === selectedStage)?.label : t('pipeline.allStages')} {selectedStage ? stageLabel(selectedStage) : t('deploy.pipeline.allStages')}
</span> </span>
)} )}
</div> </div>
@@ -418,7 +430,7 @@ export default function PipelineRunDetail() {
{loading && runs.length === 0 ? ( {loading && runs.length === 0 ? (
<div className="text-center py-12"> <div className="text-center py-12">
<Loader2 className="w-6 h-6 animate-spin mx-auto mb-2 text-[var(--dg-text-muted)]" /> <Loader2 className="w-6 h-6 animate-spin mx-auto mb-2 text-[var(--dg-text-muted)]" />
加载中... {t('common.loading')}
</div> </div>
) : runs.length === 0 ? ( ) : runs.length === 0 ? (
<div className="text-center py-12 border border-dashed border-[var(--dg-border)] rounded-lg m-4"> <div className="text-center py-12 border border-dashed border-[var(--dg-border)] rounded-lg m-4">
@@ -433,12 +445,12 @@ export default function PipelineRunDetail() {
<input type="checkbox" checked={selectedIds.size === runs.length && runs.length > 0} <input type="checkbox" checked={selectedIds.size === runs.length && runs.length > 0}
onChange={toggleAll} className="rounded" /> onChange={toggleAll} className="rounded" />
</th> </th>
<th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)] w-16">{t('pipeline.build')}</th> <th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)] w-16">{t('deploy.pipeline.buildNumber')}</th>
<th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)] w-20">{t('common.status')}</th> <th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)] w-20">{t('deploy.table.status')}</th>
<th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.trigger')}</th> <th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.trigger')}</th>
<th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)]">{t('system.roleUsers')}</th> <th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.user')}</th>
<th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.elapsed')}</th> <th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.duration')}</th>
<th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)] hidden md:table-cell">{t('monitor.logTime')}</th> <th className="px-3 py-2.5 text-left font-medium text-[var(--dg-text-secondary)] hidden md:table-cell">{t('common.createdAt')}</th>
<th className="px-3 py-2.5 text-right font-medium text-[var(--dg-text-secondary)] w-32">{t('common.actions')}</th> <th className="px-3 py-2.5 text-right font-medium text-[var(--dg-text-secondary)] w-32">{t('common.actions')}</th>
</tr> </tr>
</thead> </thead>
@@ -460,10 +472,10 @@ export default function PipelineRunDetail() {
<td className="px-3 py-2.5"> <td className="px-3 py-2.5">
<Badge className={`text-xs ${STATUS_BADGES[run.status] || ''} flex items-center gap-1 w-fit`}> <Badge className={`text-xs ${STATUS_BADGES[run.status] || ''} flex items-center gap-1 w-fit`}>
<StatusIcon className={`w-3 h-3 ${run.status === 'running' ? 'animate-spin' : ''}`} /> <StatusIcon className={`w-3 h-3 ${run.status === 'running' ? 'animate-spin' : ''}`} />
{run.status === 'success' ? t('common.success') {run.status === 'success' ? t('deploy.status.success')
: run.status === 'failed' ? t('common.failed') : run.status === 'failed' ? t('deploy.status.failed')
: run.status === 'running' ? t('common.executing') : run.status === 'running' ? t('deploy.runDetail.executing')
: run.status === 'cancelled' ? t('deploy.toast.cancelled') : run.status === 'cancelled' ? t('deploy.status.cancelled')
: t('deploy.status.pending')} : t('deploy.status.pending')}
</Badge> </Badge>
</td> </td>
@@ -477,7 +489,7 @@ export default function PipelineRunDetail() {
<td className="px-3 py-2.5 text-[var(--dg-text-secondary)] font-mono text-xs"> <td className="px-3 py-2.5 text-[var(--dg-text-secondary)] font-mono text-xs">
{run.status === 'running' ? ( {run.status === 'running' ? (
<span className="flex items-center gap-1 dg-text-blue"> <span className="flex items-center gap-1 dg-text-blue">
<Loader2 className="w-3 h-3 animate-spin" />执行中... <Loader2 className="w-3 h-3 animate-spin" />{t('deploy.pipeline.executing')}
</span> </span>
) : formatDuration(run.duration)} ) : formatDuration(run.duration)}
</td> </td>
@@ -488,11 +500,11 @@ export default function PipelineRunDetail() {
<div className="flex justify-end gap-1"> <div className="flex justify-end gap-1">
<Button variant="ghost" size="sm" className="h-7 text-xs" <Button variant="ghost" size="sm" className="h-7 text-xs"
onClick={() => setSelectedRun(run)}> onClick={() => setSelectedRun(run)}>
日志 {t('deploy.label.log')}
</Button> </Button>
<Button variant="ghost" size="sm" className="h-7 text-xs" <Button variant="ghost" size="sm" className="h-7 text-xs"
onClick={() => { setBrowserRun({ id: run.id, buildNumber: run.build_number }); setBrowserOpen(true); }}> onClick={() => { setBrowserRun({ id: run.id, buildNumber: run.build_number }); setBrowserOpen(true); }}>
<FolderOpen className="w-3.5 h-3.5 mr-1" />浏览 <FolderOpen className="w-3.5 h-3.5 mr-1" />{t('deploy.label.browse')}
</Button> </Button>
{run.status === 'running' && ( {run.status === 'running' && (
<Button variant="ghost" size="icon" className="h-7 w-7 text-red-500" <Button variant="ghost" size="icon" className="h-7 w-7 text-red-500"
@@ -520,19 +532,19 @@ export default function PipelineRunDetail() {
</CardTitle> </CardTitle>
{selectedRun.status === 'running' && ( {selectedRun.status === 'running' && (
<Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-xs"> <Badge className="bg-blue-500/20 dg-text-blue border-blue-500/30 text-xs">
<Loader2 className="w-3 h-3 animate-spin mr-1" />实时 <Loader2 className="w-3 h-3 animate-spin mr-1" />{t('deploy.runDetail.realtime')}
</Badge> </Badge>
)} )}
{selectedStage && ( {selectedStage && (
<Badge className="text-xs border-[var(--dg-border)]" variant="outline"> <Badge className="text-xs border-[var(--dg-border)]" variant="outline">
{STAGE_DEFS.find(d => d.key === selectedStage)?.label || selectedStage} {stageLabel(selectedStage)}
</Badge> </Badge>
)} )}
</div> </div>
<div className="flex items-center gap-2 text-xs text-[var(--dg-text-muted)]"> <div className="flex items-center gap-2 text-xs text-[var(--dg-text-muted)]">
<span>触发: {triggerLabel(selectedRun)} ({selectedRun.triggered_by || 'admin'})</span> <span>{t('deploy.runDetail.trigger')}: {triggerLabel(selectedRun)} ({selectedRun.triggered_by || 'admin'})</span>
<span className="opacity-40">|</span> <span className="opacity-40">|</span>
<span>分支: {selectedRun.branch || '-'}</span> <span>{t('deploy.run.branch')}: {selectedRun.branch || '-'}</span>
{selectedRun.commit_id && ( {selectedRun.commit_id && (
<> <>
<span className="opacity-40">|</span> <span className="opacity-40">|</span>
@@ -557,7 +569,7 @@ export default function PipelineRunDetail() {
<div className="px-4 py-2 border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/30"> <div className="px-4 py-2 border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]/30">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[11px] font-semibold text-[var(--dg-text-secondary)]"> <span className="text-[11px] font-semibold text-[var(--dg-text-secondary)]">
[{STAGE_DEFS.find(d => d.key === selectedStage)?.label || selectedStage}] [{stageLabel(selectedStage)}]
</span> </span>
{(() => { {(() => {
const st = stageStats.get(selectedStage); const st = stageStats.get(selectedStage);
@@ -64,11 +64,11 @@ export function ReleaseApplyDialog({ open, onOpenChange, onSuccess }: ReleaseApp
commit_msg: form.commitMsg.trim(), commit_msg: form.commitMsg.trim(),
description: form.description.trim(), description: form.description.trim(),
}); });
toast.success(t('deploy.release.submitFail')); toast.success(t('deploy.toast.releaseSubmitted'));
onOpenChange(false); onOpenChange(false);
onSuccess?.(); onSuccess?.();
} catch { } catch {
toast.error(t('monitor.quickSetupFailed')); toast.error(t('deploy.toast.createFailed'));
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
@@ -78,22 +78,22 @@ export function ReleaseApplyDialog({ open, onOpenChange, onSuccess }: ReleaseApp
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl"> <DialogContent className="max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle>{t('pipeline.newRelease')}</DialogTitle> <DialogTitle>{t('deploy.release.newRelease')}</DialogTitle>
<DialogDescription>{t('deploy.release.createNew')}</DialogDescription> <DialogDescription>{t('deploy.release.createNew')}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 py-4">
<div> <div>
<Label>{t('pipeline.releaseApp')}</Label> <Label>{t('deploy.release.appName')}</Label>
<Input <Input
value={form.appName} value={form.appName}
onChange={(e) => setForm({ ...form, appName: e.target.value })} onChange={(e) => setForm({ ...form, appName: e.target.value })}
placeholder=t('deploy.releaseCreate.appPlaceholder') placeholder={t('deploy.releaseCreate.appPlaceholder')}
className="mt-1" className="mt-1"
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<Label>{t('pipeline.releaseVersion')}</Label> <Label>{t('deploy.release.versionNo')}</Label>
<Input <Input
value={form.version} value={form.version}
onChange={(e) => setForm({ ...form, version: e.target.value })} onChange={(e) => setForm({ ...form, version: e.target.value })}
@@ -102,7 +102,7 @@ export function ReleaseApplyDialog({ open, onOpenChange, onSuccess }: ReleaseApp
/> />
</div> </div>
<div> <div>
<Label>{t('pipeline.targetEnv')}</Label> <Label>{t('deploy.release.targetEnv')}</Label>
<Select <Select
value={form.environment} value={form.environment}
onValueChange={(value) => setForm({ ...form, environment: value })} onValueChange={(value) => setForm({ ...form, environment: value })}
@@ -111,10 +111,10 @@ export function ReleaseApplyDialog({ open, onOpenChange, onSuccess }: ReleaseApp
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="dev">{t('pipeline.devEnv')}</SelectItem> <SelectItem value="dev">{t('deploy.env.devEnv')}</SelectItem>
<SelectItem value="test">{t('pipeline.testEnv')}</SelectItem> <SelectItem value="test">{t('deploy.env.testEnv')}</SelectItem>
<SelectItem value="staging">{t('pipeline.stagingEnv')}</SelectItem> <SelectItem value="staging">{t('deploy.env.stagingEnv')}</SelectItem>
<SelectItem value="prod">{t('pipeline.prodEnv')}</SelectItem> <SelectItem value="prod">{t('deploy.env.prodEnv')}</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -134,28 +134,28 @@ export function ReleaseApplyDialog({ open, onOpenChange, onSuccess }: ReleaseApp
<Input <Input
value={form.commitMsg} value={form.commitMsg}
onChange={(e) => setForm({ ...form, commitMsg: e.target.value })} onChange={(e) => setForm({ ...form, commitMsg: e.target.value })}
placeholder=t('deploy.releaseCreate.commitMsgPlaceholder') placeholder={t('deploy.releaseCreate.commitMsgPlaceholder')}
className="mt-1" className="mt-1"
/> />
</div> </div>
</div> </div>
<div> <div>
<Label>{t('pipeline.releaseDesc')}</Label> <Label>{t('deploy.release.releaseDesc')}</Label>
<Textarea <Textarea
value={form.description} value={form.description}
onChange={(e) => setForm({ ...form, description: e.target.value })} onChange={(e) => setForm({ ...form, description: e.target.value })}
placeholder=t('deploy.releaseCreate.descPlaceholder') placeholder={t('deploy.releaseCreate.descPlaceholder')}
className="mt-1" className="mt-1"
/> />
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}> <Button variant="outline" onClick={() => onOpenChange(false)}>
取消 {t('common.cancel')}
</Button> </Button>
<Button onClick={handleSubmit} disabled={submitting}> <Button onClick={handleSubmit} disabled={submitting}>
{submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : null} {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : null}
提交申请 {t('deploy.release.submitApp')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -1,5 +1,6 @@
// 发布管理 - 审批/驳回弹窗(自包含提交逻辑) // Logan.Li // 发布管理 - 审批/驳回弹窗(自包含提交逻辑) // Logan.Li
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -13,7 +14,6 @@ import { AlertCircle, X, Check, Loader2 } from 'lucide-react';
import { releaseApi } from '@/api'; import { releaseApi } from '@/api';
import { toast } from 'sonner'; import { toast } from 'sonner';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface ReleaseApproveDialogProps { interface ReleaseApproveDialogProps {
release: JsonData | null; release: JsonData | null;
@@ -37,7 +37,7 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
try { try {
if (approved) { if (approved) {
await releaseApi.approveRelease(release.id); await releaseApi.approveRelease(release.id);
toast.success(t('approval.flow.approveTitle')); toast.success(t('deploy.release.approvePassed'));
} else { } else {
await releaseApi.rejectRelease(release.id); await releaseApi.rejectRelease(release.id);
toast.success(t('deploy.toast.rejected')); toast.success(t('deploy.toast.rejected'));
@@ -45,7 +45,7 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
onOpenChange(false); onOpenChange(false);
onSuccess?.(); onSuccess?.();
} catch { } catch {
toast.error(approved ? t('approval.msg.approveFailed') : t('deploy.release.rejectFail')); toast.error(approved ? t('deploy.toast.approveFailed') : t('deploy.toast.rejectFailed'));
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
@@ -55,7 +55,7 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{t('pipeline.approve')}</DialogTitle> <DialogTitle>{t('deploy.release.approve')}</DialogTitle>
<DialogDescription> <DialogDescription>
{release?.app_name} - {release?.version} {release?.app_name} - {release?.version}
</DialogDescription> </DialogDescription>
@@ -63,13 +63,13 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
<div className="py-4"> <div className="py-4">
{release?.description && ( {release?.description && (
<div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] mb-4"> <div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] mb-4">
<p className="text-xs text-[var(--dg-text-secondary)] mb-1">{t('pipeline.releaseDesc')}</p> <p className="text-xs text-[var(--dg-text-secondary)] mb-1">{t('deploy.release.releaseDesc')}</p>
<p className="text-sm text-[var(--dg-text-primary)]">{release.description}</p> <p className="text-sm text-[var(--dg-text-primary)]">{release.description}</p>
</div> </div>
)} )}
<div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]"> <div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
<AlertCircle className="h-4 w-4" /> <AlertCircle className="h-4 w-4" />
确认审批后将进入部署就绪状态 {t('deploy.release.approveHint')}
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
@@ -80,7 +80,7 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
onClick={() => handleApprove(false)} onClick={() => handleApprove(false)}
> >
<X className="h-4 w-4 mr-2" /> <X className="h-4 w-4 mr-2" />
驳回 {t('deploy.release.reject')}
</Button> </Button>
<Button <Button
className="bg-emerald-600 hover:bg-emerald-700" className="bg-emerald-600 hover:bg-emerald-700"
@@ -88,7 +88,7 @@ export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }:
onClick={() => handleApprove(true)} onClick={() => handleApprove(true)}
> >
{submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />} {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />}
通过 {t('common.approve')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { RefreshCw, Loader2, Download, CheckCircle, XCircle, Clock, Settings2, ChevronDown, Trash2 } from 'lucide-react'; import { RefreshCw, Loader2, Download, CheckCircle, XCircle, Clock, Settings2, ChevronDown, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -8,7 +9,6 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { deployApi } from '@/api'; import { deployApi } from '@/api';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface ToolConfig { interface ToolConfig {
id: number; name: string; display_name: string; description: string; id: number; name: string; display_name: string; description: string;
@@ -79,7 +79,7 @@ export default function ToolConfigTab() {
} }
setVersionDialog({ tool, versions }); setVersionDialog({ tool, versions });
const preferred = versions.find((v) => v.version === 'lts')?.version const preferred = versions.find((v) => v.version === 'lts')?.version
|| versions.find((v) => v.label.includes(t('common.recommended')))?.version || versions.find((v) => v.label.includes('推荐'))?.version
|| tool.default_version || tool.default_version
|| versions[0]?.version || versions[0]?.version
|| ''; || '';
@@ -95,21 +95,21 @@ export default function ToolConfigTab() {
try { try {
const v = version || tool.default_version; const v = version || tool.default_version;
await deployApi.installTool(tool.id, v); await deployApi.installTool(tool.id, v);
toast.success(`${tool.display_name}${v ? ` (${v})t('deploy.toolconfigtab.s5002c0')); toast.success(t('deploy.tool.installTriggered', { name: tool.display_name, version: v || '' }));
setVersionDialog(null); setVersionDialog(null);
setInstalling(null); setInstalling(null);
void fetchTools(); void fetchTools();
} catch { } catch {
toast.error(t('deploy.toolconfigtab.se80fdc')); toast.error(t('deploy.tool.installTriggerFailed'));
setInstalling(null); setInstalling(null);
} }
}; };
const handleUninstall = async (tool: ToolConfig) => { const handleUninstall = async (tool: ToolConfig) => {
const ok = await confirm({ const ok = await confirm({
title: t('agent.uninstallTool'), title: t('deploy.tool.uninstallTool'),
description: t('deploy.toolconfigtab.s8d9b47', { tool.display_name: tool.display_name }), description: t('deploy.tool.uninstallConfirm', { name: tool.display_name }),
confirmText: t('agent.uninstall'), confirmText: t('deploy.tool.uninstall'),
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
@@ -117,10 +117,10 @@ export default function ToolConfigTab() {
setUninstalling(tool.id); setUninstalling(tool.id);
try { try {
await deployApi.uninstallTool(tool.id); await deployApi.uninstallTool(tool.id);
toast.success(t('deploy.toolconfigtab.sda0cb3', { tool.display_name: tool.display_name })); toast.success(t('deploy.tool.uninstalled', { name: tool.display_name }));
void fetchTools(); void fetchTools();
} catch { } catch {
toast.error(t('agent.uninstallFailed')); toast.error(t('deploy.tool.uninstallFailed'));
} finally { } finally {
setUninstalling(null); setUninstalling(null);
} }
@@ -129,9 +129,9 @@ export default function ToolConfigTab() {
const handleCheckStatus = async (tool: ToolConfig) => { const handleCheckStatus = async (tool: ToolConfig) => {
try { try {
const res: JsonData = await deployApi.checkTool(tool.id); const res: JsonData = await deployApi.checkTool(tool.id);
toast.success(res?.available ? t('deploy.toolconfigtab.sa5b175', { tool.display_name: tool.display_name }) : t('deploy.toolconfigtab.sf13096', { tool.display_name: tool.display_name })); toast.success(res?.available ? t('deploy.tool.available', { name: tool.display_name }) : t('deploy.tool.notAvailable', { name: tool.display_name }));
fetchTools(); fetchTools();
} catch { toast.error(t('deploy.toolconfigtab.s6bc0fb')); } } catch { toast.error(t('deploy.tool.detectFailed')); }
}; };
// 检测工具安装状态(磁盘验证)// Logan.Li // 检测工具安装状态(磁盘验证)// Logan.Li
@@ -142,14 +142,14 @@ export default function ToolConfigTab() {
const res: JsonData = await deployApi.checkTool(tool.id); const res: JsonData = await deployApi.checkTool(tool.id);
const elapsed = ((Date.now() - start) / 1000).toFixed(1); const elapsed = ((Date.now() - start) / 1000).toFixed(1);
if (res?.available) { if (res?.available) {
toast.success(t('deploy.toolconfigtab.s0ac554', { tool.display_name: tool.display_name }) (${res.version})` : ''} (${elapsed}s)`); toast.success(t('deploy.tool.ready', { name: tool.display_name, version: res.version || '', elapsed }));
} else { } else {
const errMsg = (res?.tool as ToolConfig | undefined)?.error_msg; const errMsg = (res?.tool as ToolConfig | undefined)?.error_msg;
toast(t('deploy.toolconfigtab.s258f2b', { tool.display_name: tool.display_name }), { description: errMsg || t('deploy.toolconfigtab.s6f0fef') }); toast(t('deploy.tool.notInstalledOrAvail', { name: tool.display_name }), { description: errMsg || t('deploy.tool.clickInstallHint') });
} }
fetchTools(); fetchTools();
} catch { } catch {
toast.error(t('deploy.toolconfigtab.s8c74ac', { tool.display_name: tool.display_name })); toast.error(t('deploy.tool.detectFailed', { name: tool.display_name }));
} }
setTesting(null); setTesting(null);
}; };
@@ -158,29 +158,29 @@ export default function ToolConfigTab() {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-xs text-[var(--dg-text-secondary)]"> <p className="text-xs text-[var(--dg-text-secondary)]">
管理 DevOps 工具的安装策略:预装在镜像中、首次使用自动下载(懒加载)、或禁用不安装 {t('deploy.tool.subtitle')}
</p> </p>
<Button variant="outline" size="sm" onClick={fetchTools}> <Button variant="outline" size="sm" onClick={fetchTools}>
<RefreshCw className="w-3.5 h-3.5 mr-1" />刷新 <RefreshCw className="w-3.5 h-3.5 mr-1" />{t('common.refresh')}
</Button> </Button>
</div> </div>
{loading ? ( {loading ? (
<div className="text-center py-12 text-[var(--dg-text-secondary)]"> <div className="text-center py-12 text-[var(--dg-text-secondary)]">
<Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />加载中... <Loader2 className="w-5 h-5 animate-spin mx-auto mb-2" />{t('common.loading')}
</div> </div>
) : tools.length === 0 ? ( ) : tools.length === 0 ? (
<div className="text-center py-12 text-[var(--dg-text-secondary)]"> <div className="text-center py-12 text-[var(--dg-text-secondary)]">
暂无工具配置,请检查后端种子数据 {t('deploy.tool.noConfig')}
</div> </div>
) : ( ) : (
<div className="rounded-md border border-[var(--dg-border)] overflow-hidden"> <div className="rounded-md border border-[var(--dg-border)] overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]"> <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
<tr> <tr>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('pipeline.tool')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.tool.title')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden sm:table-cell">{t('common.category')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden sm:table-cell">{t('deploy.table.category')}</th>
<th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('common.status')}</th> <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">{t('deploy.table.status')}</th>
<th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th> <th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th>
</tr> </tr>
</thead> </thead>
@@ -204,25 +204,25 @@ export default function ToolConfigTab() {
</td> </td>
<td className="px-3 py-2 hidden sm:table-cell"> <td className="px-3 py-2 hidden sm:table-cell">
<Badge className={`text-xs ${categoryColor[tool.category] || categoryColor.other}`}> <Badge className={`text-xs ${categoryColor[tool.category] || categoryColor.other}`}>
{categoryLabelKey[tool.category] || tool.category} {categoryLabelKey[tool.category] ? t(categoryLabelKey[tool.category]) : tool.category}
</Badge> </Badge>
</td> </td>
<td className="px-3 py-2"> <td className="px-3 py-2">
{tool.status === 'installed' ? ( {tool.status === 'installed' ? (
<Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-xs gap-1"> <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-xs gap-1">
<CheckCircle className="w-3 h-3" />已安装 <CheckCircle className="w-3 h-3" />{t('deploy.tool.installed')}
</Badge> </Badge>
) : tool.status === 'installing' ? ( ) : tool.status === 'installing' ? (
<Badge className="bg-amber-500/20 dg-text-yellow border-amber-500/30 text-xs gap-1"> <Badge className="bg-amber-500/20 dg-text-yellow border-amber-500/30 text-xs gap-1">
<Loader2 className="w-3 h-3 animate-spin" />安装中 <Loader2 className="w-3 h-3 animate-spin" />{t('deploy.tool.installing')}
</Badge> </Badge>
) : tool.status === 'failed' ? ( ) : tool.status === 'failed' ? (
<Badge className="bg-red-500/20 dg-text-red border-red-500/30 text-xs gap-1"> <Badge className="bg-red-500/20 dg-text-red border-red-500/30 text-xs gap-1">
<XCircle className="w-3 h-3" />失败 <XCircle className="w-3 h-3" />{t('deploy.status.failed')}
</Badge> </Badge>
) : ( ) : (
<Badge className="bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)] text-xs gap-1"> <Badge className="bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)] text-xs gap-1">
<Clock className="w-3 h-3" />未安装 <Clock className="w-3 h-3" />{t('deploy.tool.notInstalled')}
</Badge> </Badge>
)} )}
</td> </td>
@@ -239,7 +239,7 @@ export default function ToolConfigTab() {
) : ( ) : (
<Trash2 className="w-3 h-3 mr-1" /> <Trash2 className="w-3 h-3 mr-1" />
)} )}
卸载 {t('deploy.tool.uninstall')}
</Button> </Button>
)} )}
{tool.install_method === 'lazy' && tool.status !== 'installed' && tool.status !== 'installing' && ( {tool.install_method === 'lazy' && tool.status !== 'installed' && tool.status !== 'installing' && (
@@ -254,7 +254,7 @@ export default function ToolConfigTab() {
) : ( ) : (
<Download className="w-3 h-3 mr-1" /> <Download className="w-3 h-3 mr-1" />
)} )}
安装 {t('deploy.tool.install')}
</Button> </Button>
) : ( ) : (
<Button <Button
@@ -267,7 +267,7 @@ export default function ToolConfigTab() {
) : ( ) : (
<Download className="w-3 h-3 mr-1" /> <Download className="w-3 h-3 mr-1" />
)} )}
安装 {t('deploy.tool.install')}
</Button> </Button>
) )
)} )}
@@ -282,10 +282,10 @@ export default function ToolConfigTab() {
) : ( ) : (
<ChevronDown className="w-3 h-3 mr-1" /> <ChevronDown className="w-3 h-3 mr-1" />
)} )}
测试 {t('deploy.tool.test')}
</Button> </Button>
)} )}
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleCheckStatus(tool)} title=t('common.detect')> <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleCheckStatus(tool)} title={t('deploy.tool.detect')}>
<Settings2 className="w-3.5 h-3.5" /> <Settings2 className="w-3.5 h-3.5" />
</Button> </Button>
</div> </div>
@@ -304,8 +304,8 @@ export default function ToolConfigTab() {
<DialogHeader> <DialogHeader>
<DialogTitle>{t('deploy.tool.selectVersion')}</DialogTitle> <DialogTitle>{t('deploy.tool.selectVersion')}</DialogTitle>
<DialogDescription> <DialogDescription>
{versionDialog?.tool.display_name} — 请选择要安装的版本 {t('deploy.tool.versionPrompt', { name: versionDialog?.tool.display_name })}
{versionDialog?.tool.name === 'nodejs' && t('deploy.toolconfigtab.se0142a')} {versionDialog?.tool.name === 'nodejs' && t('deploy.tool.nodejsLtsHint')}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-2"> <div className="space-y-4 py-2">
@@ -337,7 +337,7 @@ export default function ToolConfigTab() {
) : ( ) : (
<Download className="w-3.5 h-3.5 mr-1" /> <Download className="w-3.5 h-3.5 mr-1" />
)} )}
安装 {t('deploy.tool.install')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -13,7 +13,6 @@ import { toast } from 'sonner';
import { useConfirm } from '@/components/ui/confirm-dialog'; import { useConfirm } from '@/components/ui/confirm-dialog';
import { deployApi } from '@/api'; import { deployApi } from '@/api';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface Group { interface Group {
id: number; name: string; description: string; id: number; name: string; description: string;
@@ -24,7 +23,6 @@ interface GroupMember {
} }
export default function UserGroupsManager({ embedded = false }: { embedded?: boolean }) { export default function UserGroupsManager({ embedded = false }: { embedded?: boolean }) {
const { t } = useTranslation();
const _confirm = useConfirm(); const _confirm = useConfirm();
const [groups, setGroups] = useState<Group[]>([]); const [groups, setGroups] = useState<Group[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -43,43 +41,43 @@ export default function UserGroupsManager({ embedded = false }: { embedded?: boo
const loadGroups = async () => { const loadGroups = async () => {
setLoading(true); setLoading(true);
try { const res = await deployApi.getGroups(); setGroups((res as JsonData)?.list || []); } try { const res = await deployApi.getGroups(); setGroups((res as JsonData)?.list || []); }
catch { toast.error(t('common.loadFailed')); } catch { toast.error('加载失败'); }
finally { setLoading(false); } finally { setLoading(false); }
}; };
useEffect(() => { loadGroups(); }, []); useEffect(() => { loadGroups(); }, []);
const handleSave = async () => { const handleSave = async () => {
if (!formName.trim()) { toast.error(t('deploy.rbac.groupPlaceholder')); return; } if (!formName.trim()) { toast.error('请输入组名'); return; }
setSaving(true); setSaving(true);
try { try {
if (editId) await deployApi.updateGroup(editId, { name: formName, description: formDesc }); if (editId) await deployApi.updateGroup(editId, { name: formName, description: formDesc });
else await deployApi.createGroup({ name: formName, description: formDesc }); else await deployApi.createGroup({ name: formName, description: formDesc });
toast.success(editId ? t('deploy.toast.updated') : t('deploy.toast.created')); toast.success(editId ? '已更新' : '已创建');
setFormOpen(false); loadGroups(); setFormOpen(false); loadGroups();
} catch { toast.error(t('common.operationFailed')); } } catch { toast.error('操作失败'); }
finally { setSaving(false); } finally { setSaving(false); }
}; };
const handleDelete = async (g: Group) => { const handleDelete = async (g: Group) => {
const ok = await _confirm({ title: t('deploy.rbac.deleteGroup'), description: t('deploy.usergroupsmanager.se76125', { g.name: g.name }), variant: 'destructive' }); const ok = await _confirm({ title: '删除用户组', description: `确定删除「${g.name}」?所有成员和流水线授权将同时移除。`, variant: 'destructive' });
if (!ok) return; if (!ok) return;
try { await deployApi.deleteGroup(g.id); toast.success(t('alert.deleted')); loadGroups(); } try { await deployApi.deleteGroup(g.id); toast.success('已删除'); loadGroups(); }
catch { toast.error(t('common.deleteFailed')); } catch { toast.error('删除失败'); }
}; };
const handleAddMember = async (groupId: number) => { const handleAddMember = async (groupId: number) => {
const username = (memberUsers[groupId] || '').trim(); const username = (memberUsers[groupId] || '').trim();
if (!username) { toast.error(t('pipeline.usernamePlaceholder')); return; } if (!username) { toast.error('输入用户名'); return; }
try { await deployApi.addGroupMember(groupId, { username }); toast.success(t('deploy.toast.added')); loadGroups(); setMemberUsers(prev => ({ ...prev, [groupId]: '' })); } try { await deployApi.addGroupMember(groupId, { username }); toast.success('已添加'); loadGroups(); setMemberUsers(prev => ({ ...prev, [groupId]: '' })); }
catch { toast.error(t('deploy.toast.addFailed')); } catch { toast.error('添加失败'); }
}; };
const handleRemoveMember = async (groupId: number, memberId: number, username: string) => { const handleRemoveMember = async (groupId: number, memberId: number, username: string) => {
const ok = await _confirm({ title: t('pipeline.removeMember'), description: t('deploy.usergroupsmanager.s9270e4', { username: username }) }); const ok = await _confirm({ title: '移除成员', description: `确定从组中移除「${username}」?` });
if (!ok) return; if (!ok) return;
try { await deployApi.removeGroupMember(groupId, memberId); toast.success(t('deploy.rbac.removed')); loadGroups(); } try { await deployApi.removeGroupMember(groupId, memberId); toast.success('已移除'); loadGroups(); }
catch { toast.error(t('deploy.rbac.removeFail')); } catch { toast.error('移除失败'); }
}; };
const toggleExpand = (gid: number) => setExpanded(p => ({ ...p, [gid]: !p[gid] })); const toggleExpand = (gid: number) => setExpanded(p => ({ ...p, [gid]: !p[gid] }));
@@ -100,8 +98,8 @@ export default function UserGroupsManager({ embedded = false }: { embedded?: boo
const listBody = !loading && groups.length === 0 ? ( const listBody = !loading && groups.length === 0 ? (
<PageEmpty <PageEmpty
icon={<Users className="h-10 w-10" />} icon={<Users className="h-10 w-10" />}
title=t('deploy.usergroupsmanager.sd1edd8') title="暂无用户组"
description=t('deploy.usergroupsmanager.scf9865') description="点击「新建用户组」创建第一个用户组"
action={( action={(
<Button size="sm" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}> <Button size="sm" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
<Plus className="w-4 h-4 mr-1" />新建用户组 <Plus className="w-4 h-4 mr-1" />新建用户组
@@ -117,7 +115,7 @@ export default function UserGroupsManager({ embedded = false }: { embedded?: boo
<Shield className="w-5 h-5 dg-text-blue" /> <Shield className="w-5 h-5 dg-text-blue" />
<div> <div>
<div className="font-medium text-[var(--dg-text-primary)]">{g.name}</div> <div className="font-medium text-[var(--dg-text-primary)]">{g.name}</div>
<div className="text-xs text-[var(--dg-text-secondary)]">{g.description || t('pipeline.desc2')} · {(g.members || []).length} 位成员</div> <div className="text-xs text-[var(--dg-text-secondary)]">{g.description || '暂无描述'} · {(g.members || []).length} 位成员</div>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -134,14 +132,14 @@ export default function UserGroupsManager({ embedded = false }: { embedded?: boo
<div className="border-t border-[var(--dg-border)] px-4 py-3 space-y-3"> <div className="border-t border-[var(--dg-border)] px-4 py-3 space-y-3">
{/* Add member */} {/* Add member */}
<div className="flex items-end gap-2"> <div className="flex items-end gap-2">
<div className="flex-1 space-y-1"><Label className="text-xs">{t('system.addUser')}</Label> <div className="flex-1 space-y-1"><Label className="text-xs">添加用户</Label>
<Input value={memberUsers[g.id] || ''} onChange={e => setMemberUsers(prev => ({ ...prev, [g.id]: e.target.value }))} placeholder=t('pipeline.usernamePlaceholder') className="h-8 text-sm" onKeyDown={e => e.key === 'Enter' && handleAddMember(g.id)} /> <Input value={memberUsers[g.id] || ''} onChange={e => setMemberUsers(prev => ({ ...prev, [g.id]: e.target.value }))} placeholder="输入用户名" className="h-8 text-sm" onKeyDown={e => e.key === 'Enter' && handleAddMember(g.id)} />
</div> </div>
<Button size="sm" className="h-8" onClick={() => handleAddMember(g.id)}><UserPlus className="w-3.5 h-3.5 mr-1" />{t('common.add')}</Button> <Button size="sm" className="h-8" onClick={() => handleAddMember(g.id)}><UserPlus className="w-3.5 h-3.5 mr-1" />添加</Button>
</div> </div>
{/* Members list */} {/* Members list */}
{(g.members || []).length === 0 ? ( {(g.members || []).length === 0 ? (
<div className="text-xs text-[var(--dg-text-secondary)] py-2">{t('deploy.rbac.noMembers')}</div> <div className="text-xs text-[var(--dg-text-secondary)] py-2">暂无成员</div>
) : ( ) : (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{(g.members || []).map(m => ( {(g.members || []).map(m => (
@@ -164,14 +162,14 @@ export default function UserGroupsManager({ embedded = false }: { embedded?: boo
const formDialog = ( const formDialog = (
<Dialog open={formOpen} onOpenChange={setFormOpen}> <Dialog open={formOpen} onOpenChange={setFormOpen}>
<DialogContent> <DialogContent>
<DialogHeader><DialogTitle>{editId ? t('deploy.rbac.groupEditTitle') : t('pipeline.newGroup')}</DialogTitle></DialogHeader> <DialogHeader><DialogTitle>{editId ? '编辑用户组' : '新建用户组'}</DialogTitle></DialogHeader>
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1"><Label>{t('monitor.groupName')}</Label><Input value={formName} onChange={e => setFormName(e.target.value)} placeholder=t('deploy.usergroupsmanager.s5a5632') /></div> <div className="space-y-1"><Label>组名</Label><Input value={formName} onChange={e => setFormName(e.target.value)} placeholder="例如: 后端开发组" /></div>
<div className="space-y-1"><Label>{t('common.description')}</Label><Input value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder=t('common.optional') /></div> <div className="space-y-1"><Label>描述</Label><Input value={formDesc} onChange={e => setFormDesc(e.target.value)} placeholder="可选" /></div>
</div> </div>
<div className="flex justify-end gap-2 mt-4 pt-4 border-t"> <div className="flex justify-end gap-2 mt-4 pt-4 border-t">
<Button variant="outline" onClick={() => setFormOpen(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => setFormOpen(false)}>取消</Button>
<Button onClick={handleSave} disabled={saving}>{saving ? '...' : t('common.save')}</Button> <Button onClick={handleSave} disabled={saving}>{saving ? '...' : '保存'}</Button>
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -190,15 +188,15 @@ export default function UserGroupsManager({ embedded = false }: { embedded?: boo
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('menu.deploy') title="应用发布"
subtitle=t('deploy.usergroupsmanager.sf80ecf') subtitle="用户组 — 批量授权流水线访问权限"
icon={<Users className="h-5 w-5" />} icon={<Users className="h-5 w-5" />}
loading={loading} loading={loading}
metrics={( metrics={(
<StatStrip <StatStrip
items={[ items={[
{ label: t('pipeline.userGroup'), value: groups.length, color: 'blue' }, { label: '用户组', value: groups.length, color: 'blue' },
{ label: t('deploy.usergroupsmanager.sdf2b42'), value: memberCount, color: 'purple' }, { label: '成员总数', value: memberCount, color: 'purple' },
]} ]}
/> />
)} )}
@@ -1,4 +1,5 @@
import { useRef, useEffect, useState } from 'react'; import { useRef, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -13,7 +14,6 @@ import { cn } from '@/lib/utils';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
import { pipelineApi } from '@/api'; import { pipelineApi } from '@/api';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface WorkspaceTermDialogProps { interface WorkspaceTermDialogProps {
open: boolean; open: boolean;
@@ -104,11 +104,11 @@ export function WorkspaceTermDialog({
ws.onclose = () => { ws.onclose = () => {
setConnected(false); setConnected(false);
term.write(t('deploy.workspacetermdialog.safab20')); term.write(`\r\n\x1b[31m${t('deploy.runDetail.connectionClosed')}\x1b[0m\r\n`);
}; };
ws.onerror = () => { ws.onerror = () => {
term.write(t('deploy.workspacetermdialog.sc81077')); term.write(`\r\n\x1b[31m${t('deploy.runDetail.connectionError')}\x1b[0m\r\n`);
}; };
return () => { return () => {
@@ -160,14 +160,14 @@ export function WorkspaceTermDialog({
)} )}
style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '900px', width: '90vw' }} style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '900px', width: '90vw' }}
> >
<DialogTitle className="sr-only">Workspace 终端 #{buildNumber}</DialogTitle> <DialogTitle className="sr-only">{t('deploy.pipeline.workspaceTerminal', { buildNumber })}</DialogTitle>
<DialogDescription className="sr-only">{t('deploy.pipeline.buildDir')}</DialogDescription> <DialogDescription className="sr-only">{t('deploy.pipeline.buildDir')}</DialogDescription>
<div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]"> <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
<div className="flex items-center gap-2 text-sm min-w-0"> <div className="flex items-center gap-2 text-sm min-w-0">
<div className={cn('w-2 h-2 rounded-full shrink-0', connected ? 'bg-emerald-400' : 'bg-red-400')} /> <div className={cn('w-2 h-2 rounded-full shrink-0', connected ? 'bg-emerald-400' : 'bg-red-400')} />
<FolderOpen className="h-4 w-4 text-[var(--dg-text-secondary)] shrink-0" /> <FolderOpen className="h-4 w-4 text-[var(--dg-text-secondary)] shrink-0" />
<span className="text-[var(--dg-text-primary)] font-medium truncate"> <span className="text-[var(--dg-text-primary)] font-medium truncate">
#{buildNumber} 构建目录 #{buildNumber} {t('deploy.runDetail.buildDir')}
</span> </span>
{workspace && ( {workspace && (
<span className="text-[var(--dg-text-muted)] text-xs truncate hidden sm:inline"> <span className="text-[var(--dg-text-muted)] text-xs truncate hidden sm:inline">
@@ -11,7 +11,6 @@ import { toast } from 'sonner';
import { useCredentialDetail } from '@/hooks/api'; import { useCredentialDetail } from '@/hooks/api';
import type { SecretType } from './types'; import type { SecretType } from './types';
import { TYPE_CONFIG, TYPE_BADGE_CLASS } from './constants'; import { TYPE_CONFIG, TYPE_BADGE_CLASS } from './constants';
import { useTranslation } from 'react-i18next';
export interface CredDetailDialogProps { export interface CredDetailDialogProps {
open: boolean; open: boolean;
@@ -21,14 +20,13 @@ export interface CredDetailDialogProps {
// 凭据详情弹窗 // Logan.Li // 凭据详情弹窗 // Logan.Li
export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProps) { export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProps) {
const { t } = useTranslation();
const [showMap, setShowMap] = useState<Record<string, boolean>>({}); const [showMap, setShowMap] = useState<Record<string, boolean>>({});
const { data: detail, isLoading: loading } = useCredentialDetail(credId, open); const { data: detail, isLoading: loading } = useCredentialDetail(credId, open);
if (!open || !credId) return null; if (!open || !credId) return null;
const toggleShow = (key: string) => setShowMap(prev => ({ ...prev, [key]: !prev[key] })); const toggleShow = (key: string) => setShowMap(prev => ({ ...prev, [key]: !prev[key] }));
const copyValue = (val: string) => { navigator.clipboard.writeText(val); toast.success(t('common.copied')); }; const copyValue = (val: string) => { navigator.clipboard.writeText(val); toast.success('已复制'); };
const st = detail?.secret_type as SecretType; const st = detail?.secret_type as SecretType;
const cfg = TYPE_CONFIG[st]; const cfg = TYPE_CONFIG[st];
@@ -79,39 +77,39 @@ export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProp
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
{loading ? ( {loading ? (
<div className="text-center py-8 text-[var(--dg-text-muted)]">{t('common.loading')}</div> <div className="text-center py-8 text-[var(--dg-text-muted)]">加载中...</div>
) : detail ? ( ) : detail ? (
<div className="space-y-4"> <div className="space-y-4">
{/* 基本信息 // Logan.Li */} {/* 基本信息 // Logan.Li */}
<div className="grid grid-cols-2 gap-3 text-sm"> <div className="grid grid-cols-2 gap-3 text-sm">
<div><span className="text-[var(--dg-text-muted)]">{t('deploy.creddetaildialog.s5b4786')}</span><span className="text-[var(--dg-text-primary)] font-medium">{detailRecord?.name as string}</span></div> <div><span className="text-[var(--dg-text-muted)]">名称:</span><span className="text-[var(--dg-text-primary)] font-medium">{detailRecord?.name as string}</span></div>
<div><span className="text-[var(--dg-text-muted)]">{t('deploy.creddetaildialog.se91f5a')}</span> <div><span className="text-[var(--dg-text-muted)]">类型:</span>
<Badge variant="outline" className={`text-xs ml-1 ${TYPE_BADGE_CLASS[st] || ''}`}>{cfg?.label || st}</Badge> <Badge variant="outline" className={`text-xs ml-1 ${TYPE_BADGE_CLASS[st] || ''}`}>{cfg?.label || st}</Badge>
</div> </div>
<div><span className="text-[var(--dg-text-muted)]">{t('approval.detail.statusLabel')}</span> <div><span className="text-[var(--dg-text-muted)]">状态:</span>
{detailRecord?.is_active {detailRecord?.is_active
? <Badge className="bg-green-500/20 dg-text-green text-xs ml-1"><CheckCircle2 className="h-3 w-3 mr-0.5" />{t('common.enable')}</Badge> ? <Badge className="bg-green-500/20 dg-text-green text-xs ml-1"><CheckCircle2 className="h-3 w-3 mr-0.5" />启用</Badge>
: <Badge className="bg-red-500/20 dg-text-red text-xs ml-1"><XCircle className="h-3 w-3 mr-0.5" />{t('common.disable')}</Badge>} : <Badge className="bg-red-500/20 dg-text-red text-xs ml-1"><XCircle className="h-3 w-3 mr-0.5" />禁用</Badge>}
{detailRecord?.expires_at && new Date(detailRecord.expires_at as string) < new Date() && ( {detailRecord?.expires_at && new Date(detailRecord.expires_at as string) < new Date() && (
<Badge className="bg-yellow-500/20 dg-text-yellow text-xs ml-1"><AlertTriangle className="h-3 w-3 mr-0.5" />{t('monitor.sslExpired')}</Badge> <Badge className="bg-yellow-500/20 dg-text-yellow text-xs ml-1"><AlertTriangle className="h-3 w-3 mr-0.5" />已过期</Badge>
)} )}
</div> </div>
<div className="col-span-2 cursor-pointer" onClick={() => copyValue((detailRecord?.env_prefix as string) || '')}> <div className="col-span-2 cursor-pointer" onClick={() => copyValue((detailRecord?.env_prefix as string) || '')}>
<span className="text-[var(--dg-text-muted)]">{t('deploy.cred.refIdLabel')}</span> <span className="text-[var(--dg-text-muted)]">引用ID:</span>
<code className="text-[var(--dg-blue)] font-mono text-xs">{detailRecord?.env_prefix as string || t('common.none')}</code> <code className="text-[var(--dg-blue)] font-mono text-xs">{detailRecord?.env_prefix as string || '无'}</code>
<Copy className="h-3 w-3 inline ml-1 text-[var(--dg-text-muted)]" /> <Copy className="h-3 w-3 inline ml-1 text-[var(--dg-text-muted)]" />
</div> </div>
{(detailRecord?.tags as string[])?.length > 0 && ( {(detailRecord?.tags as string[])?.length > 0 && (
<div className="col-span-2"> <div className="col-span-2">
<span className="text-[var(--dg-text-muted)]">{t('deploy.creddetaildialog.s1655dd')}</span> <span className="text-[var(--dg-text-muted)]">标签:</span>
{(detailRecord?.tags as string[]).map((t: string) => ( {(detailRecord?.tags as string[]).map((t: string) => (
<Badge key={t} variant="outline" className="text-xs ml-1 border-[var(--dg-border)]">{t}</Badge> <Badge key={t} variant="outline" className="text-xs ml-1 border-[var(--dg-border)]">{t}</Badge>
))} ))}
</div> </div>
)} )}
<div className="col-span-2"><span className="text-[var(--dg-text-muted)]">{t('deploy.creddetaildialog.s4a4e3b')}</span><span className="text-[var(--dg-text-secondary)]">{(detailRecord?.description as string) || t('common.none')}</span></div> <div className="col-span-2"><span className="text-[var(--dg-text-muted)]">描述:</span><span className="text-[var(--dg-text-secondary)]">{(detailRecord?.description as string) || '无'}</span></div>
<div><span className="text-[var(--dg-text-muted)]">{t('deploy.creddetaildialog.s76d768')}</span><span className="text-[var(--dg-text-secondary)] text-xs">{new Date(detailRecord?.created_at as string).toLocaleString()}</span></div> <div><span className="text-[var(--dg-text-muted)]">创建:</span><span className="text-[var(--dg-text-secondary)] text-xs">{new Date(detailRecord?.created_at as string).toLocaleString()}</span></div>
<div><span className="text-[var(--dg-text-muted)]">{t('deploy.creddetaildialog.s3820b7')}</span><span className="text-[var(--dg-text-secondary)] text-xs">{new Date(detailRecord?.updated_at as string).toLocaleString()}</span></div> <div><span className="text-[var(--dg-text-muted)]">更新:</span><span className="text-[var(--dg-text-secondary)] text-xs">{new Date(detailRecord?.updated_at as string).toLocaleString()}</span></div>
</div> </div>
{/* 密钥数据 // Logan.Li */} {/* 密钥数据 // Logan.Li */}
@@ -120,41 +118,41 @@ export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProp
<Key className="h-4 w-4 text-yellow-500" />密钥数据 <Key className="h-4 w-4 text-yellow-500" />密钥数据
</div> </div>
<div className="p-3 rounded-md bg-yellow-500/5 border border-yellow-500/20 mb-3"> <div className="p-3 rounded-md bg-yellow-500/5 border border-yellow-500/20 mb-3">
<p className="text-xs dg-text-yellow/80">{t('deploy.creddetaildialog.s03b218')}</p> <p className="text-xs dg-text-yellow/80">以下内容包含敏感信息,请妥善保管,不要泄露给他人。</p>
</div> </div>
{st === 'ssh' && <> {st === 'ssh' && <>
<Field label=t('deploy.creddetaildialog.s2272f5') value={content.ssh_user} /> <Field label="SSH 用户" value={content.ssh_user} />
<Field label=t('deploy.creddetaildialog.s3f284a') value={content.ssh_port} /> <Field label="SSH 端口" value={content.ssh_port} />
<Field label=t('system.sshPassword') value={content.password} sensitive fieldKey="ssh_password" /> <Field label="SSH 密码" value={content.password} sensitive fieldKey="ssh_password" />
<Field label=t('system.sshPrivateKey') value={content.private_key} sensitive fieldKey="ssh_private_key" /> <Field label="私钥" value={content.private_key} sensitive fieldKey="ssh_private_key" />
<Field label=t('system.sshPublicKey') value={content.public_key} fieldKey="ssh_public_key" /> <Field label="公钥" value={content.public_key} fieldKey="ssh_public_key" />
</>} </>}
{st === 'docker' && <> {st === 'docker' && <>
<Field label=t('deploy.form.registryAddr') value={content.server} /> <Field label="Registry 地址" value={content.server} />
<Field label=t('login.username') value={content.username} /> <Field label="用户名" value={content.username} />
<Field label=t('login.password') value={content.password} sensitive fieldKey="docker_password" /> <Field label="密码" value={content.password} sensitive fieldKey="docker_password" />
</>} </>}
{st === 'tls' && <> {st === 'tls' && <>
<Field label=t('deploy.creddetaildialog.sd40b51') value={content.cert} sensitive fieldKey="tls_cert" /> <Field label="证书" value={content.cert} sensitive fieldKey="tls_cert" />
<Field label=t('system.sshPrivateKey') value={content.key} sensitive fieldKey="tls_key" /> <Field label="私钥" value={content.key} sensitive fieldKey="tls_key" />
<Field label=t('deploy.creddetaildialog.sa24356') value={content.ca} sensitive fieldKey="tls_ca" /> <Field label="CA 证书" value={content.ca} sensitive fieldKey="tls_ca" />
</>} </>}
{st === 'aksk' && <> {st === 'aksk' && <>
<Field label="Access Key ID" value={content.access_key} /> <Field label="Access Key ID" value={content.access_key} />
<Field label="Secret Access Key" value={content.secret_key} sensitive fieldKey="aksk_secret_key" /> <Field label="Secret Access Key" value={content.secret_key} sensitive fieldKey="aksk_secret_key" />
</>} </>}
{st === 'database' && <> {st === 'database' && <>
<Field label=t('deploy.creddetaildialog.s84b916') value={String(content.db_type || '').toUpperCase()} /> <Field label="数据库类型" value={String(content.db_type || '').toUpperCase()} />
<Field label=t('agent.agentHost') value={content.host} /> <Field label="主机" value={content.host} />
<Field label=t('server.csv.port') value={content.port} /> <Field label="端口" value={content.port} />
<Field label=t('deploy.creddetaildialog.s5ccbbd') value={content.db_name} /> <Field label="数据库名" value={content.db_name} />
<Field label=t('login.username') value={content.username} /> <Field label="用户名" value={content.username} />
<Field label=t('login.password') value={content.password} sensitive fieldKey="db_password" /> <Field label="密码" value={content.password} sensitive fieldKey="db_password" />
</>} </>}
{st === 'api' && <> {st === 'api' && <>
<Field label="API Key" value={content.api_key} sensitive fieldKey="api_key" /> <Field label="API Key" value={content.api_key} sensitive fieldKey="api_key" />
<Field label=t('deploy.creddetaildialog.s48ec34') value={content.endpoint} /> <Field label="API 端点" value={content.endpoint} />
</>} </>}
{st === 'generic' && <> {st === 'generic' && <>
<Field label="Key" value={content.generic_key} /> <Field label="Key" value={content.generic_key} />
@@ -164,17 +162,17 @@ export function CredDetailDialog({ open, onClose, credId }: CredDetailDialogProp
{/* 引用提示 // Logan.Li */} {/* 引用提示 // Logan.Li */}
<div className="border-t border-[var(--dg-border)] pt-3"> <div className="border-t border-[var(--dg-border)] pt-3">
<div className="text-xs text-[var(--dg-text-muted)] mb-2">{t('deploy.cred.refHint')}</div> <div className="text-xs text-[var(--dg-text-muted)] mb-2">在流水线/脚本中引用此凭据:</div>
<code className="text-xs bg-[var(--dg-bg-tertiary)] px-3 py-1.5 rounded block text-[var(--dg-blue)]"> <code className="text-xs bg-[var(--dg-bg-tertiary)] px-3 py-1.5 rounded block text-[var(--dg-blue)]">
{'${'}{String(detailRecord?.variable_name || String(detailRecord?.name || '').toUpperCase().replace(/[^A-Z0-9]/g, '_'))}{'}'} {'${'}{String(detailRecord?.variable_name || String(detailRecord?.name || '').toUpperCase().replace(/[^A-Z0-9]/g, '_'))}{'}'}
</code> </code>
</div> </div>
</div> </div>
) : ( ) : (
<div className="text-center py-8 text-[var(--dg-text-muted)]">{t('deploy.cred.noCredData')}</div> <div className="text-center py-8 text-[var(--dg-text-muted)]">未找到凭据数据</div>
)} )}
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={onClose}>{t('common.close')}</Button> <Button variant="outline" onClick={onClose}>关闭</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -9,7 +9,6 @@ import { toast } from 'sonner';
import { credentialApi } from '@/api'; import { credentialApi } from '@/api';
import type { Credential, SecretType } from './types'; import type { Credential, SecretType } from './types';
import { TYPE_CONFIG } from './constants'; import { TYPE_CONFIG } from './constants';
import { useTranslation } from 'react-i18next';
export interface CredFormDialogProps { export interface CredFormDialogProps {
open: boolean; open: boolean;
@@ -20,7 +19,6 @@ export interface CredFormDialogProps {
// 凭据新增/编辑弹窗 // Logan.Li // 凭据新增/编辑弹窗 // Logan.Li
export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDialogProps) { export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDialogProps) {
const { t } = useTranslation();
const isEdit = !!editData; const isEdit = !!editData;
const [name, setName] = useState(''); const [name, setName] = useState('');
const [varName, setVarName] = useState(''); const [varName, setVarName] = useState('');
@@ -97,7 +95,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
const toggleShow = (key: string) => setShowMap(prev => ({ ...prev, [key]: !prev[key] })); const toggleShow = (key: string) => setShowMap(prev => ({ ...prev, [key]: !prev[key] }));
const handleSubmit = async () => { const handleSubmit = async () => {
if (!name.trim()) { toast.error(t('deploy.cred.nameRequired')); return; } if (!name.trim()) { toast.error('请填写凭据名称'); return; }
setSubmitting(true); setSubmitting(true);
try { try {
const payload: Record<string, unknown> = { const payload: Record<string, unknown> = {
@@ -143,16 +141,16 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
if (isEdit) { if (isEdit) {
await credentialApi.update(editData!.id, payload); await credentialApi.update(editData!.id, payload);
toast.success(t('deploy.toast.updated')); toast.success('已更新');
} else { } else {
await credentialApi.create(payload); await credentialApi.create(payload);
toast.success(t('deploy.toast.created')); toast.success('已创建');
} }
onSaved(); onSaved();
onClose(); onClose();
} catch (e: unknown) { } catch (e: unknown) {
const err = e as { response?: { data?: { message?: string } } }; const err = e as { response?: { data?: { message?: string } } };
toast.error(err?.response?.data?.message || t('common.operationFailed')); toast.error(err?.response?.data?.message || '操作失败');
} finally { setSubmitting(false); } } finally { setSubmitting(false); }
}; };
@@ -192,25 +190,25 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2"> <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
<TIicon className={`h-5 w-5 ${TI?.color || ''}`} /> <TIicon className={`h-5 w-5 ${TI?.color || ''}`} />
{isEdit ? t('pipeline.editCred') : t('pipeline.addCred')} {isEdit ? '编辑凭据' : '新增凭据'}
</DialogTitle> </DialogTitle>
<DialogDescription className="text-[var(--dg-text-muted)] text-xs"> <DialogDescription className="text-[var(--dg-text-muted)] text-xs">
{TI?.desc || t('deploy.cred.descDefault')} {TI?.desc || '管理敏感凭据信息'}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-2"> <div className="space-y-4 py-2">
{/* 基本信息 // Logan.Li */} {/* 基本信息 // Logan.Li */}
<div className="border-b border-[var(--dg-border)] pb-3"> <div className="border-b border-[var(--dg-border)] pb-3">
<div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2">{t('deploy.label.basicInfo')}</div> <div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2">基本信息</div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('pipeline.credName')} <span className="dg-text-red">*</span></Label> <Label className="text-[var(--dg-text-secondary)] text-xs">凭据名称 <span className="dg-text-red">*</span></Label>
<Input value={name} onChange={e => setName(e.target.value)} placeholder=t('deploy.credformdialog.s97afec') <Input value={name} onChange={e => setName(e.target.value)} placeholder="如:生产环境 SSH"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('pipeline.varAlias')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">变量别名</Label>
<Input value={varName} onChange={e => setVarName(e.target.value)} placeholder=t('deploy.credformdialog.s92c3a5') <Input value={varName} onChange={e => setVarName(e.target.value)} placeholder="如:MYSQL_PROD"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono text-sm" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
@@ -229,14 +227,14 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
</Select> </Select>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('common.tag')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">标签</Label>
<Input value={tags} onChange={e => setTags(e.target.value)} placeholder=t('deploy.credformdialog.s29e67e') <Input value={tags} onChange={e => setTags(e.target.value)} placeholder="生产环境, 阿里云"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
</div> </div>
<div className="mt-2 space-y-1"> <div className="mt-2 space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('common.description')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">描述</Label>
<Input value={description} onChange={e => setDescription(e.target.value)} placeholder=t('deploy.credformdialog.s9216f1') <Input value={description} onChange={e => setDescription(e.target.value)} placeholder="可选备注信息"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
</div> </div>
@@ -245,32 +243,32 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
<div> <div>
<div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2 flex items-center gap-2"> <div className="text-xs font-medium text-[var(--dg-text-secondary)] mb-2 flex items-center gap-2">
<TIicon className="h-3.5 w-3.5" />{TI?.label || secretType} 配置 <TIicon className="h-3.5 w-3.5" />{TI?.label || secretType} 配置
{isEdit && <span className="text-[var(--dg-text-muted)]">{t('deploy.credformdialog.s088965')}</span>} {isEdit && <span className="text-[var(--dg-text-muted)]">(仅填写需要修改的字段)</span>}
</div> </div>
{secretType === 'ssh' && ( {secretType === 'ssh' && (
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('deploy.credformdialog.s2272f5')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">SSH 用户</Label>
<Input value={sshUser} onChange={e => setSshUser(e.target.value)} placeholder="root" <Input value={sshUser} onChange={e => setSshUser(e.target.value)} placeholder="root"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('deploy.credformdialog.s3f284a')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">SSH 端口</Label>
<Input value={sshPort} onChange={e => setSshPort(e.target.value)} placeholder="22" type="number" <Input value={sshPort} onChange={e => setSshPort(e.target.value)} placeholder="22" type="number"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<FieldWithToggle label=t('system.sshPassword') value={sshPassword} onChange={setSshPassword} <FieldWithToggle label="SSH 密码" value={sshPassword} onChange={setSshPassword}
placeholder=t('deploy.credformdialog.se98d4e') fieldKey="ssh_pwd" /> placeholder="密码(或留空用密钥)" fieldKey="ssh_pwd" />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<FieldWithToggle label=t('deploy.credformdialog.sfcef97') value={sshPrivateKey} onChange={setSshPrivateKey} <FieldWithToggle label="私钥内容" value={sshPrivateKey} onChange={setSshPrivateKey}
placeholder=t('deploy.credformdialog.s824277') fieldKey="ssh_pk" isLong /> placeholder="粘贴 SSH 私钥..." fieldKey="ssh_pk" isLong />
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<FieldWithToggle label=t('deploy.credformdialog.s6fc01d') value={sshPublicKey} onChange={setSshPublicKey} <FieldWithToggle label="公钥内容" value={sshPublicKey} onChange={setSshPublicKey}
placeholder=t('deploy.credformdialog.s5eccd4') fieldKey="ssh_pub" isLong /> placeholder="粘贴 SSH 公钥..." fieldKey="ssh_pub" isLong />
</div> </div>
</div> </div>
)} )}
@@ -278,28 +276,28 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
{secretType === 'docker' && ( {secretType === 'docker' && (
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="col-span-2 space-y-1"> <div className="col-span-2 space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('deploy.form.registryAddr')} <span className="dg-text-red">*</span></Label> <Label className="text-[var(--dg-text-secondary)] text-xs">Registry 地址 <span className="dg-text-red">*</span></Label>
<Input value={dockerServer} onChange={e => setDockerServer(e.target.value)} placeholder="registry.example.com" <Input value={dockerServer} onChange={e => setDockerServer(e.target.value)} placeholder="registry.example.com"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('login.username')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">用户名</Label>
<Input value={dockerUsername} onChange={e => setDockerUsername(e.target.value)} placeholder="admin" <Input value={dockerUsername} onChange={e => setDockerUsername(e.target.value)} placeholder="admin"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
<div><FieldWithToggle label=t('login.password') value={dockerPassword} onChange={setDockerPassword} <div><FieldWithToggle label="密码" value={dockerPassword} onChange={setDockerPassword}
placeholder=t('deploy.credformdialog.s929297') fieldKey="docker_pwd" required /></div> placeholder="Registry 密码" fieldKey="docker_pwd" required /></div>
</div> </div>
)} )}
{secretType === 'tls' && ( {secretType === 'tls' && (
<div className="space-y-3"> <div className="space-y-3">
<FieldWithToggle label=t('deploy.credformdialog.s3391e4') value={tlsCert} onChange={setTlsCert} <FieldWithToggle label="证书 (PEM)" value={tlsCert} onChange={setTlsCert}
placeholder="-----BEGIN CERTIFICATE-----" fieldKey="tls_cert" isLong required /> placeholder="-----BEGIN CERTIFICATE-----" fieldKey="tls_cert" isLong required />
<FieldWithToggle label=t('deploy.credformdialog.s517151') value={tlsKey} onChange={setTlsKey} <FieldWithToggle label="私钥 (PEM)" value={tlsKey} onChange={setTlsKey}
placeholder="-----BEGIN PRIVATE KEY-----" fieldKey="tls_key" isLong required /> placeholder="-----BEGIN PRIVATE KEY-----" fieldKey="tls_key" isLong required />
<FieldWithToggle label=t('deploy.credformdialog.sa24356') value={tlsCa} onChange={setTlsCa} <FieldWithToggle label="CA 证书" value={tlsCa} onChange={setTlsCa}
placeholder=t('deploy.credformdialog.s7db02d') fieldKey="tls_ca" isLong /> placeholder="CA 证书内容..." fieldKey="tls_ca" isLong />
</div> </div>
)} )}
@@ -312,7 +310,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<FieldWithToggle label="Secret Access Key" value={akskSecretKey} onChange={setAkskSecretKey} <FieldWithToggle label="Secret Access Key" value={akskSecretKey} onChange={setAkskSecretKey}
placeholder=t('deploy.credformdialog.sdef8f6') fieldKey="aksk_sk" required /> placeholder="输入 Secret Key" fieldKey="aksk_sk" required />
</div> </div>
</div> </div>
)} )}
@@ -320,7 +318,7 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
{secretType === 'database' && ( {secretType === 'database' && (
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('deploy.credformdialog.s84b916')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">数据库类型</Label>
<Select value={dbType} onValueChange={setDbType}> <Select value={dbType} onValueChange={setDbType}>
<SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"> <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
<SelectValue /> <SelectValue />
@@ -336,34 +334,34 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
</Select> </Select>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.agentHost')} <span className="dg-text-red">*</span></Label> <Label className="text-[var(--dg-text-secondary)] text-xs">主机 <span className="dg-text-red">*</span></Label>
<Input value={dbHost} onChange={e => setDbHost(e.target.value)} placeholder="10.0.0.1" <Input value={dbHost} onChange={e => setDbHost(e.target.value)} placeholder="10.0.0.1"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('server.csv.port')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">端口</Label>
<Input value={dbPort} onChange={e => setDbPort(e.target.value)} placeholder="3306" type="number" <Input value={dbPort} onChange={e => setDbPort(e.target.value)} placeholder="3306" type="number"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('deploy.credformdialog.s5ccbbd')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">数据库名</Label>
<Input value={dbName} onChange={e => setDbName(e.target.value)} placeholder="aiops" <Input value={dbName} onChange={e => setDbName(e.target.value)} placeholder="aiops"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('login.username')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">用户名</Label>
<Input value={dbUsername} onChange={e => setDbUsername(e.target.value)} placeholder="root" <Input value={dbUsername} onChange={e => setDbUsername(e.target.value)} placeholder="root"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
</div> </div>
<div><FieldWithToggle label=t('login.password') value={dbPassword} onChange={setDbPassword} <div><FieldWithToggle label="密码" value={dbPassword} onChange={setDbPassword}
placeholder=t('deploy.credformdialog.s58b49c') fieldKey="db_pwd" /></div> placeholder="数据库密码" fieldKey="db_pwd" /></div>
</div> </div>
)} )}
{secretType === 'api' && ( {secretType === 'api' && (
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('deploy.credformdialog.s48ec34')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">API 端点</Label>
<Input value={apiEndpoint} onChange={e => setApiEndpoint(e.target.value)} placeholder="https://api.example.com" <Input value={apiEndpoint} onChange={e => setApiEndpoint(e.target.value)} placeholder="https://api.example.com"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div> </div>
@@ -380,15 +378,15 @@ export function CredFormDialog({ open, onClose, onSaved, editData }: CredFormDia
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" /> className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] font-mono" />
</div> </div>
<FieldWithToggle label="Value" value={genericValue} onChange={setGenericValue} <FieldWithToggle label="Value" value={genericValue} onChange={setGenericValue}
placeholder=t('deploy.credformdialog.s63ec0a') fieldKey="generic_val" required /> placeholder="密钥值" fieldKey="generic_val" required />
</div> </div>
)} )}
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button> <Button variant="outline" onClick={onClose}>取消</Button>
<Button onClick={handleSubmit} disabled={submitting} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/80"> <Button onClick={handleSubmit} disabled={submitting} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/80">
{submitting ? i18n.t('k8s.topology.saving') : (isEdit ? i18n.t('common.update') : i18n.t('common.create'))} {submitting ? '保存中...' : (isEdit ? '更新' : '创建')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -4,16 +4,15 @@ import {
Key, Server, Container, Shield, Cloud, Database, FileText, Globe, Key, Server, Container, Shield, Cloud, Database, FileText, Globe,
} from 'lucide-react'; } from 'lucide-react';
import type { SecretType } from './types'; import type { SecretType } from './types';
import i18n from '@/i18n';
export const TYPE_CONFIG: Record<SecretType, { label: string; icon: typeof Key; color: string; desc: string }> = { export const TYPE_CONFIG: Record<SecretType, { label: string; icon: typeof Key; color: string; desc: string }> = {
ssh: { label: i18n.t('system.sshKey'), icon: Server, color: 'dg-text-yellow', desc: i18n.t('deploy.constants.sedc7f9') }, ssh: { label: 'SSH 密钥', icon: Server, color: 'dg-text-yellow', desc: 'SSH 私钥/公钥/密码' },
docker: { label: i18n.t('pipeline.dockerCred'), icon: Container, color: 'dg-text-cyan', desc: i18n.t('deploy.constants.sbd6cf1') }, docker: { label: 'Docker 凭证', icon: Container, color: 'dg-text-cyan', desc: 'Docker Registry 登录凭据' },
tls: { label: i18n.t('deploy.constants.sfa5a64'), icon: Shield, color: 'dg-text-green', desc: i18n.t('deploy.constants.s43f00c') }, tls: { label: 'TLS 证书', icon: Shield, color: 'dg-text-green', desc: 'TLS/SSL 证书与私钥' },
aksk: { label: i18n.t('deploy.constants.sb82698'), icon: Cloud, color: 'dg-text-purple', desc: i18n.t('deploy.constants.s564e98') }, aksk: { label: 'AKSK 密钥', icon: Cloud, color: 'dg-text-purple', desc: '云服务 AccessKey/SecretKey' },
database: { label: i18n.t('system.dbCredential'), icon: Database, color: 'dg-text-blue', desc: i18n.t('deploy.constants.se47498') }, database: { label: '数据库凭证', icon: Database, color: 'dg-text-blue', desc: '数据库连接信息' },
api: { label: i18n.t('system.apiKeys'), icon: Globe, color: 'dg-text-orange', desc: i18n.t('deploy.constants.sb3edf0') }, api: { label: 'API 密钥', icon: Globe, color: 'dg-text-orange', desc: 'API Token/Key + 端点' },
generic: { label: i18n.t('deploy.constants.s1d319b'), icon: FileText, color: 'dg-text-secondary', desc: i18n.t('deploy.constants.s51b5b2') }, generic: { label: '通用凭证', icon: FileText, color: 'dg-text-secondary', desc: '自定义 Key/Value 键值对' },
}; };
export const TYPE_BADGE_CLASS: Record<SecretType, string> = { export const TYPE_BADGE_CLASS: Record<SecretType, string> = {
@@ -1,6 +1,6 @@
import type { TFunction } from 'i18next';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { CheckCircle, XCircle, Loader2 } from 'lucide-react'; import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
import i18n from '@/i18n';
// 流水线阶段定义 // Logan.Li // 流水线阶段定义 // Logan.Li
export interface PipelineStage { export interface PipelineStage {
@@ -12,12 +12,58 @@ export interface PipelineStage {
} }
// 流水线模板(新建时快捷选择) // Logan.Li // 流水线模板(新建时快捷选择) // Logan.Li
export const pipelineTemplates = [ export function getPipelineTemplates(t: TFunction) {
{ id: 'template-1', name: i18n.t('deploy.template.nodejs'), description: i18n.t('deploy.template.nodejsDesc'), stages: [i18n.t('pipeline.checkout'), i18n.t('pipeline.depInstall'), i18n.t('pipeline.testDesc'), i18n.t('pipeline.buildDesc'), i18n.t('pipeline.deploy')] }, return [
{ id: 'template-2', name: i18n.t('deploy.template.go'), description: i18n.t('deploy.template.goDesc'), stages: [i18n.t('pipeline.checkout'), i18n.t('pipeline.unitTest'), i18n.t('pipeline.build'), i18n.t('deploy.releaseHelpers.pipelineStep.buildImage'), i18n.t('pipeline.deploy')] }, {
{ id: 'template-3', name: i18n.t('deploy.template.java'), description: i18n.t('deploy.template.javaDesc'), stages: [i18n.t('pipeline.checkout'), i18n.t('deploy.template.mavenBuild'), i18n.t('pipeline.unitTest'), i18n.t('pipeline.package'), i18n.t('pipeline.deploy')] }, id: 'template-1',
{ id: 'template-4', name: i18n.t('deploy.template.python'), description: i18n.t('deploy.template.pythonDesc'), stages: [i18n.t('pipeline.checkout'), i18n.t('pipeline.depInstall'), i18n.t('pipeline.testDesc'), i18n.t('common.test'), i18n.t('pipeline.deploy')] }, name: t('deploy.template.nodejs'),
]; description: t('deploy.template.nodejsDesc'),
stages: [
t('deploy.stage.checkout'),
t('deploy.template.dependencyInstall'),
t('deploy.releaseHelpers.pipelineStep.codeCheck'),
t('deploy.stage.buildDesc'),
t('deploy.stage.deploy'),
],
},
{
id: 'template-2',
name: t('deploy.template.go'),
description: t('deploy.template.goDesc'),
stages: [
t('deploy.stage.checkout'),
t('deploy.template.unitTest'),
t('deploy.stage.build'),
t('deploy.releaseHelpers.pipelineStep.buildImage'),
t('deploy.stage.deploy'),
],
},
{
id: 'template-3',
name: t('deploy.template.java'),
description: t('deploy.template.javaDesc'),
stages: [
t('deploy.stage.checkout'),
t('deploy.template.mavenBuild'),
t('deploy.template.unitTest'),
t('deploy.template.package'),
t('deploy.stage.deploy'),
],
},
{
id: 'template-4',
name: t('deploy.template.python'),
description: t('deploy.template.pythonDesc'),
stages: [
t('deploy.stage.checkout'),
t('deploy.template.dependencyInstall'),
t('deploy.releaseHelpers.pipelineStep.codeCheck'),
t('deploy.stage.test'),
t('deploy.stage.deploy'),
],
},
];
}
// 解析 stages 字段(兼容 JSON 数组 / 逗号分隔字符串) // Logan.Li // 解析 stages 字段(兼容 JSON 数组 / 逗号分隔字符串) // Logan.Li
export function parseStages( stages: string): PipelineStage[] { export function parseStages( stages: string): PipelineStage[] {
@@ -43,40 +89,40 @@ export function nameToCode(name: string): string {
} }
// 状态徽章(使用后端 last_status 字段) // Logan.Li // 状态徽章(使用后端 last_status 字段) // Logan.Li
export function getStatusBadge( status: string) { export function getStatusBadge(status: string, t: TFunction) {
switch (status) { switch (status) {
case 'success': case 'success':
return ( return (
<Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10"> <Badge variant="outline" className="border-emerald-500/30 dg-text-green bg-emerald-500/10">
<CheckCircle className="h-3 w-3 mr-1" /> <CheckCircle className="h-3 w-3 mr-1" />
成功 {t('deploy.status.success')}
</Badge> </Badge>
); );
case 'failed': case 'failed':
return ( return (
<Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10"> <Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
<XCircle className="h-3 w-3 mr-1" /> <XCircle className="h-3 w-3 mr-1" />
失败 {t('deploy.status.failed')}
</Badge> </Badge>
); );
case 'running': case 'running':
return ( return (
<Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse"> <Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10 animate-pulse">
<Loader2 className="h-3 w-3 mr-1 animate-spin" /> <Loader2 className="h-3 w-3 mr-1 animate-spin" />
运行中 {t('deploy.status.running')}
</Badge> </Badge>
); );
default: default:
return ( return (
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"> <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
从未运行 {t('deploy.pipeline.neverRun')}
</Badge> </Badge>
); );
} }
} }
// 阶段状态图标 // Logan.Li // 阶段状态图标 // Logan.Li
export function getStageStatusIcon(status: PipelineStage['status']) { export function getStageStatusIcon(status: PipelineStage['status'], t: TFunction) {
switch (status) { switch (status) {
case 'success': case 'success':
return <CheckCircle className="h-4 w-4 dg-text-green" />; return <CheckCircle className="h-4 w-4 dg-text-green" />;
@@ -85,8 +131,8 @@ export function getStageStatusIcon(status: PipelineStage['status']) {
case 'running': case 'running':
return <Loader2 className="h-4 w-4 dg-text-blue animate-spin" />; return <Loader2 className="h-4 w-4 dg-text-blue animate-spin" />;
case 'skipped': case 'skipped':
return <span className="text-[var(--dg-text-secondary)] text-xs">{i18n.t('deploy.pipelineHelpers.s92636e')}</span>; return <span className="text-[var(--dg-text-secondary)] text-xs">{t('deploy.stageStatus.skipped')}</span>;
default: default:
return <span className="text-[var(--dg-text-secondary)] opacity-60 text-xs">{i18n.t('deploy.status.pending')}</span>; return <span className="text-[var(--dg-text-secondary)] opacity-60 text-xs">{t('deploy.status.pending')}</span>;
} }
} }
@@ -8,7 +8,6 @@ import { Search, Server, Network, Loader2, Check } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { serverApi, kubernetesApi } from '@/api'; import { serverApi, kubernetesApi } from '@/api';
import { getPublicApiBase } from '@/utils/request'; import { getPublicApiBase } from '@/utils/request';
import { useTranslation } from 'react-i18next';
export interface DeployTargetValue { export interface DeployTargetValue {
deployTarget: 'ssh' | 'k8s'; deployTarget: 'ssh' | 'k8s';
@@ -50,7 +49,6 @@ interface DeploymentItem {
// 发布目标选择:SSH 关联主机 / K8s 关联 Deployment // Logan.Li // 发布目标选择:SSH 关联主机 / K8s 关联 Deployment // Logan.Li
export function DeployTargetFields({ value, onChange, requireTarget = true }: DeployTargetFieldsProps) { export function DeployTargetFields({ value, onChange, requireTarget = true }: DeployTargetFieldsProps) {
const { t } = useTranslation();
const [servers, setServers] = useState<ServerItem[]>([]); const [servers, setServers] = useState<ServerItem[]>([]);
const [clusters, setClusters] = useState<ClusterItem[]>([]); const [clusters, setClusters] = useState<ClusterItem[]>([]);
const [deployments, setDeployments] = useState<DeploymentItem[]>([]); const [deployments, setDeployments] = useState<DeploymentItem[]>([]);
@@ -150,8 +148,8 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
<div className="space-y-3"> <div className="space-y-3">
<div className="flex gap-1 p-1 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]"> <div className="flex gap-1 p-1 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
{([ {([
{ key: 'ssh' as const, label: t('deploy.deploytargetfields.secf819'), icon: Server }, { key: 'ssh' as const, label: '主机发布', icon: Server },
{ key: 'k8s' as const, label: t('deploy.deploytargetfields.s7ff062'), icon: Network }, { key: 'k8s' as const, label: 'Kubernetes 发布', icon: Network },
]).map((item) => { ]).map((item) => {
const active = value.deployTarget === item.key; const active = value.deployTarget === item.key;
const Icon = item.icon; const Icon = item.icon;
@@ -201,7 +199,7 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
<Input <Input
value={serverSearch} value={serverSearch}
onChange={(e) => setServerSearch(e.target.value)} onChange={(e) => setServerSearch(e.target.value)}
placeholder=t('deploy.deploytargetfields.sc76249') placeholder="搜索主机名或 IP"
className="pl-8 h-8 text-xs dg-input" className="pl-8 h-8 text-xs dg-input"
/> />
</div> </div>
@@ -211,7 +209,7 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
<Loader2 className="h-4 w-4 animate-spin mr-1.5" />加载中 <Loader2 className="h-4 w-4 animate-spin mr-1.5" />加载中
</div> </div>
) : filteredServers.length === 0 ? ( ) : filteredServers.length === 0 ? (
<p className="text-xs text-[var(--dg-text-muted)] text-center py-8">{t('deploy.deploytargetfields.sb42401')}</p> <p className="text-xs text-[var(--dg-text-muted)] text-center py-8">暂无可用主机</p>
) : ( ) : (
<div className="p-1.5 space-y-1"> <div className="p-1.5 space-y-1">
{filteredServers.map((srv) => { {filteredServers.map((srv) => {
@@ -243,10 +241,10 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
</div> </div>
)} )}
</ScrollArea> </ScrollArea>
<p className="text-[10px] text-[var(--dg-text-muted)]">{t('deploy.deploytargetfields.sb2b6db')}</p> <p className="text-[10px] text-[var(--dg-text-muted)]">构建完成后 SCP 上传 jar/tar.gz 到远程目录并执行部署命令</p>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('deploy.deploytargetfields.s5ca05a')}</Label> <Label className="text-xs">远程目录</Label>
<Input <Input
value={value.deployRemotePath} value={value.deployRemotePath}
onChange={(e) => onChange({ deployRemotePath: e.target.value })} onChange={(e) => onChange({ deployRemotePath: e.target.value })}
@@ -255,7 +253,7 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
/> />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('deploy.deploytargetfields.s65b20b')}</Label> <Label className="text-xs">部署命令</Label>
<Input <Input
value={value.deployScript} value={value.deployScript}
onChange={(e) => onChange({ deployScript: e.target.value })} onChange={(e) => onChange({ deployScript: e.target.value })}
@@ -282,10 +280,10 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
})} })}
> >
<SelectTrigger className="h-8 text-xs dg-input"> <SelectTrigger className="h-8 text-xs dg-input">
<SelectValue placeholder=t('k8s.topology.selectCluster') /> <SelectValue placeholder="选择集群" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="__none">{t('common.selectPlaceholder')}</SelectItem> <SelectItem value="__none">请选择</SelectItem>
{clusters.map((c) => ( {clusters.map((c) => (
<SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem> <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>
))} ))}
@@ -293,11 +291,11 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
</Select> </Select>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('deploy.deploytargetfields.s806e4e')}</Label> <Label className="text-xs">已选 Deployment</Label>
<Input <Input
readOnly readOnly
value={value.k8sDeployment ? `${value.k8sNamespace}/${value.k8sDeployment}` : ''} value={value.k8sDeployment ? `${value.k8sNamespace}/${value.k8sDeployment}` : ''}
placeholder=t('deploy.deploytargetfields.sbb1671') placeholder="从下方列表选择"
className="h-8 text-xs dg-input font-mono" className="h-8 text-xs dg-input font-mono"
/> />
</div> </div>
@@ -309,7 +307,7 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
<Input <Input
value={depSearch} value={depSearch}
onChange={(e) => setDepSearch(e.target.value)} onChange={(e) => setDepSearch(e.target.value)}
placeholder=t('deploy.deploytargetfields.saa98b2') placeholder="搜索 Deployment 或命名空间"
className="pl-8 h-8 text-xs dg-input" className="pl-8 h-8 text-xs dg-input"
/> />
</div> </div>
@@ -319,7 +317,7 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
<Loader2 className="h-4 w-4 animate-spin mr-1.5" />加载 Deployment <Loader2 className="h-4 w-4 animate-spin mr-1.5" />加载 Deployment
</div> </div>
) : filteredDeployments.length === 0 ? ( ) : filteredDeployments.length === 0 ? (
<p className="text-xs text-[var(--dg-text-muted)] text-center py-8">{t('deploy.deploytargetfields.s5689d3')}</p> <p className="text-xs text-[var(--dg-text-muted)] text-center py-8">暂无 Deployment</p>
) : ( ) : (
<div className="p-1.5 space-y-1"> <div className="p-1.5 space-y-1">
{filteredDeployments.map((dep) => { {filteredDeployments.map((dep) => {
@@ -350,11 +348,11 @@ export function DeployTargetFields({ value, onChange, requireTarget = true }: De
)} )}
</ScrollArea> </ScrollArea>
<div className="space-y-1"> <div className="space-y-1">
<Label className="text-xs">{t('kubernetes.pod.containerName')} <span className="text-[var(--dg-text-muted)]">{t('deploy.deploytargetfields.s7f5a1e')}</span></Label> <Label className="text-xs">容器名 <span className="text-[var(--dg-text-muted)]">(多容器时填写)</span></Label>
<Input <Input
value={value.k8sContainerName} value={value.k8sContainerName}
onChange={(e) => onChange({ k8sContainerName: e.target.value })} onChange={(e) => onChange({ k8sContainerName: e.target.value })}
placeholder=t('deploy.deploytargetfields.s389076') placeholder="默认首个容器"
className="h-8 text-xs font-mono dg-input" className="h-8 text-xs font-mono dg-input"
/> />
</div> </div>
@@ -80,7 +80,7 @@ export function PipelineCard({
#{String(pipeline.run_count)} #{String(pipeline.run_count)}
</Badge> </Badge>
)} )}
{getStatusBadge(String(pipeline.last_status))} {getStatusBadge(String(pipeline.last_status), t)}
{environment && ( {environment && (
<Badge <Badge
style={{ backgroundColor: `${environment.color}20`, color: environment.color as string }} style={{ backgroundColor: `${environment.color}20`, color: environment.color as string }}
@@ -13,7 +13,6 @@ import {
import { pipelineApi } from '@/api'; import { pipelineApi } from '@/api';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { fmtDuration, type LogEntry } from './constants'; import { fmtDuration, type LogEntry } from './constants';
import { useTranslation } from 'react-i18next';
interface PipelineRunPanelProps { interface PipelineRunPanelProps {
pipeline: Record<string, unknown>; pipeline: Record<string, unknown>;
@@ -24,7 +23,6 @@ interface PipelineRunPanelProps {
// 流水线队列面板(Jenkins 风格) // Logan.Li // 流水线队列面板(Jenkins 风格) // Logan.Li
function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> }) { function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> }) {
const { t } = useTranslation();
const [queue, setQueue] = useState<Record<string, unknown> | null>(null); const [queue, setQueue] = useState<Record<string, unknown> | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const code = (pipeline.code || pipeline.id) as string; const code = (pipeline.code || pipeline.id) as string;
@@ -51,10 +49,10 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
const handleCancel = async (runId: number) => { const handleCancel = async (runId: number) => {
try { try {
await pipelineApi.removeFromQueue(code, runId); await pipelineApi.removeFromQueue(code, runId);
toast.success(t('deploy.toast.cancelled')); toast.success('已取消');
loadQueue(); loadQueue();
} catch { } catch {
toast.error(t('deploy.toast.cancelFailed')); toast.error('取消失败');
} }
}; };
@@ -70,7 +68,7 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
return ( return (
<div className="px-4 py-2 space-y-2"> <div className="px-4 py-2 space-y-2">
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<span className="text-[var(--dg-text-secondary)]">{t('deploy.run.buildStatus')}</span> <span className="text-[var(--dg-text-secondary)]">构建执行状态</span>
<span className="font-bold text-[var(--dg-text-primary)]">{running}/{max}</span> <span className="font-bold text-[var(--dg-text-primary)]">{running}/{max}</span>
{queued > 0 && ( {queued > 0 && (
<span className="text-[var(--dg-text-secondary)] ml-2"> <span className="text-[var(--dg-text-secondary)] ml-2">
@@ -118,7 +116,6 @@ function PipelineQueuePanel({ pipeline }: { pipeline: Record<string, unknown> })
// 展开后的运行列表面板 // Logan.Li // 展开后的运行列表面板 // Logan.Li
export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStopRun }: PipelineRunPanelProps) { export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStopRun }: PipelineRunPanelProps) {
const { t } = useTranslation();
const [logOpen, setLogOpen] = useState(false); const [logOpen, setLogOpen] = useState(false);
const [logRun, setLogRun] = useState<Record<string, unknown> | null>(null); const [logRun, setLogRun] = useState<Record<string, unknown> | null>(null);
const [logs, setLogs] = useState<LogEntry[]>([]); const [logs, setLogs] = useState<LogEntry[]>([]);
@@ -144,17 +141,17 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
<Loader2 className="h-5 w-5 animate-spin text-[var(--dg-text-secondary)]" /> <Loader2 className="h-5 w-5 animate-spin text-[var(--dg-text-secondary)]" />
</div> </div>
) : pipelineRuns.length === 0 ? ( ) : pipelineRuns.length === 0 ? (
<div className="py-6 text-center text-[var(--dg-text-secondary)] text-sm">{t('pipeline.noRecords')}</div> <div className="py-6 text-center text-[var(--dg-text-secondary)] text-sm">暂无执行记录</div>
) : ( ) : (
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead className="border-b border-[var(--dg-border)]"> <thead className="border-b border-[var(--dg-border)]">
<tr className="bg-[var(--dg-bg-tertiary)]"> <tr className="bg-[var(--dg-bg-tertiary)]">
<th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">#</th> <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">#</th>
<th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">{t('common.status')}</th> <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">状态</th>
<th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">{t('pipeline.triggerBy')}</th> <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">触发人</th>
<th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">{t('common.elapsed')}</th> <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">耗时</th>
<th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">{t('monitor.logTime')}</th> <th className="px-4 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">时间</th>
<th className="px-4 py-2 text-right text-xs font-medium text-[var(--dg-text-secondary)]">{t('common.actions')}</th> <th className="px-4 py-2 text-right text-xs font-medium text-[var(--dg-text-secondary)]">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -220,7 +217,7 @@ export function PipelineRunPanel({ pipeline, pipelineRuns, isLoadingRuns, onStop
</div> </div>
<div className="bg-[var(--dg-bg-primary)] rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs"> <div className="bg-[var(--dg-bg-primary)] rounded-md p-3 max-h-[50vh] overflow-y-auto font-mono text-xs">
{logs.length === 0 ? ( {logs.length === 0 ? (
<div className="dg-text-muted py-4 text-center">{t('pipeline.noLog')}</div> <div className="dg-text-muted py-4 text-center">暂无日志</div>
) : ( ) : (
logs.map((l, i) => ( logs.map((l, i) => (
<div key={i} className="flex gap-2 py-0.5"> <div key={i} className="flex gap-2 py-0.5">
@@ -1,5 +1,4 @@
import { import {
import i18n from '@/i18n';
GitBranch, GitBranch,
Box, Box,
CheckCircle, CheckCircle,
@@ -10,12 +9,12 @@ import i18n from '@/i18n';
// 流水线阶段定义(固定顺序) // Logan.Li // 流水线阶段定义(固定顺序) // Logan.Li
export const STAGE_DEFS = [ export const STAGE_DEFS = [
{ key: 'checkout', label: i18n.t('pipeline.checkout'), icon: GitBranch, color: '#6366F1', order: 1, needs: ['repo'], desc: i18n.t('deploy.constants.s4769ce') }, { key: 'checkout', label: '代码检出', icon: GitBranch, color: '#6366F1', order: 1, needs: ['repo'], desc: '从 Git 仓库拉取代码' },
{ key: 'build', label: i18n.t('pipeline.build'), icon: Box, color: '#F59E0B', order: 2, needs: [], desc: i18n.t('deploy.constants.s3318af') }, { key: 'build', label: '构建', icon: Box, color: '#F59E0B', order: 2, needs: [], desc: '编译/打包项目' },
{ key: 'test', label: i18n.t('common.test'), icon: CheckCircle, color: '#10B981', order: 3, needs: [], desc: i18n.t('deploy.constants.s350a98') }, { key: 'test', label: '测试', icon: CheckCircle, color: '#10B981', order: 3, needs: [], desc: '运行单元/集成测试' },
{ key: 'image', label: i18n.t('deploy.stage.image'), icon: Container, color: '#06B6D4', order: 4, needs: ['registry'], desc: i18n.t('deploy.constants.s98ea11') }, { key: 'image', label: '镜像打包', icon: Container, color: '#06B6D4', order: 4, needs: ['registry'], desc: 'Docker 构建 & 推送' },
{ key: 'deploy', label: i18n.t('pipeline.deploy'), icon: Rocket, color: '#EF4444', order: 5, needs: [], desc: i18n.t('deploy.constants.s45f0eb') }, { key: 'deploy', label: '部署', icon: Rocket, color: '#EF4444', order: 5, needs: [], desc: '部署到目标环境' },
{ key: 'verify', label: i18n.t('common.validate'), icon: ShieldCheck, color: '#3B82F6', order: 6, needs: [], desc: i18n.t('deploy.constants.seb164c') }, { key: 'verify', label: '验证', icon: ShieldCheck, color: '#3B82F6', order: 6, needs: [], desc: '部署后健康检查' },
].sort((a, b) => a.order - b.order); ].sort((a, b) => a.order - b.order);
// 运行日志条目 // Logan.Li // 运行日志条目 // Logan.Li
@@ -32,7 +31,7 @@ export function fmtDuration(s: number | undefined): string {
if (s < 60) return `${s}s`; if (s < 60) return `${s}s`;
const m = Math.floor(s / 60); const m = Math.floor(s / 60);
const sec = s % 60; const sec = s % 60;
return sec > 0 ? i18n.t('deploy.constants.s3ae00c', { m: m, sec: sec }) : i18n.t('deploy.constants.s45c7e1', { m: m }); return sec > 0 ? `${m}分${sec}秒` : `${m}分`;
} }
// 解析 stages 字段 // Logan.Li // 解析 stages 字段 // Logan.Li
@@ -13,10 +13,8 @@ import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel'; import { ContentPanel } from '@/components/layout/ContentPanel';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export default function CapacityPage() { export default function CapacityPage() {
const { t } = useTranslation();
const { clusterCode } = useParams<{ clusterCode: string }>(); const { clusterCode } = useParams<{ clusterCode: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -78,8 +76,8 @@ export default function CapacityPage() {
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('kubernetes.capacitypage.s4e67a9') title="资源容量分析"
subtitle={clusterName ? t('kubernetes.capacitypage.sd54408', { clusterName: clusterName }) : t('kubernetes.capacitypage.s6a1128')} subtitle={clusterName ? `${clusterName} · Deployment 资源请求与限制` : 'Deployment 资源请求与限制'}
icon={<BarChart3 className="h-5 w-5" />} icon={<BarChart3 className="h-5 w-5" />}
actions={( actions={(
<> <>
@@ -90,9 +88,9 @@ export default function CapacityPage() {
</SelectContent> </SelectContent>
</Select> </Select>
<Select value={selectedNs} onValueChange={setSelectedNs}> <Select value={selectedNs} onValueChange={setSelectedNs}>
<SelectTrigger className="w-32 h-9 dg-input"><SelectValue placeholder=t('kubernetes.capacitypage.s58173b') /></SelectTrigger> <SelectTrigger className="w-32 h-9 dg-input"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">{t('kubernetes.capacitypage.s58173b')}</SelectItem> <SelectItem value="all">所有命名空间</SelectItem>
{namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)} {namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
</SelectContent> </SelectContent>
</Select> </Select>
@@ -111,9 +109,9 @@ export default function CapacityPage() {
<Table> <Table>
<TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">Deployment</TableHead> <TableHead className="dg-text-secondary">Deployment</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.column.namespace')}</TableHead> <TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">{t('kubernetes.capacitypage.s0428b3')}</TableHead> <TableHead className="dg-text-secondary">副本</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.pods.containers')}</TableHead> <TableHead className="dg-text-secondary">容器</TableHead>
<TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Req</TableHead> <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Req</TableHead>
<TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Lim</TableHead> <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU Lim</TableHead>
<TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Req</TableHead> <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Mem Req</TableHead>
@@ -26,12 +26,10 @@ import {
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
const CHART_COLORS = ['#3B82F6', '#207060', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316']; const CHART_COLORS = ['#3B82F6', '#207060', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316'];
export default function ClusterComparePage() { export default function ClusterComparePage() {
const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [data, setData] = useState<JsonData>(null); const [data, setData] = useState<JsonData>(null);
@@ -44,7 +42,7 @@ export default function ClusterComparePage() {
const res: JsonData = await kubernetesApi.getMultiClusterComparison(); const res: JsonData = await kubernetesApi.getMultiClusterComparison();
setData(res || null); setData(res || null);
} catch (e) { } catch (e) {
setError(e?.message || t('common.loadFailed')); setError(e?.message || '加载失败');
setData(null); setData(null);
} finally { } finally {
setLoading(false); setLoading(false);
@@ -68,16 +66,16 @@ export default function ClusterComparePage() {
const usageBarData = clusters.map((c: JsonData) => ({ const usageBarData = clusters.map((c: JsonData) => ({
name: c.code || c.name, name: c.code || c.name,
'CPU %': Number((c.cpu_usage || 0).toFixed(1)), 'CPU %': Number((c.cpu_usage || 0).toFixed(1)),
t('kubernetes.clustercomparepage.sbe9d77'): Number((c.memory_usage || 0).toFixed(1)), '内存 %': Number((c.memory_usage || 0).toFixed(1)),
})); }));
const radarData = clusters.length > 0 ? [ const radarData = clusters.length > 0 ? [
{ metric: t('kubernetes.cluster.nodeCount'), ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, c.node_count || 0])) }, { metric: '节点数', ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, c.node_count || 0])) },
{ metric: t('kubernetes.clustercomparepage.s5fe4af'), ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, Math.min(c.pod_count || 0, 100)])) }, { metric: 'Pod数', ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, Math.min(c.pod_count || 0, 100)])) },
{ metric: t('kubernetes.clustercomparepage.s7d207a'), ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, c.deployment_count || 0])) }, { metric: '部署数', ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, c.deployment_count || 0])) },
{ metric: t('kubernetes.clustercomparepage.s020267'), ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, Number((c.cpu_usage || 0).toFixed(1))])) }, { metric: 'CPU使用', ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, Number((c.cpu_usage || 0).toFixed(1))])) },
{ metric: t('kubernetes.clustercomparepage.s5d9ce3'), ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, Number((c.memory_usage || 0).toFixed(1))])) }, { metric: '内存使用', ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, Number((c.memory_usage || 0).toFixed(1))])) },
{ metric: t('kubernetes.clustercomparepage.sbdb608'), ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, c.total_cpu_cores || 0])) }, { metric: 'CPU核数', ...Object.fromEntries(clusters.map((c: JsonData) => [c.code || c.name, c.total_cpu_cores || 0])) },
] : []; ] : [];
const nodeRolePie = clusters.flatMap((c: JsonData) => [ const nodeRolePie = clusters.flatMap((c: JsonData) => [
@@ -99,7 +97,7 @@ export default function ClusterComparePage() {
// 格式化同步时间 // 格式化同步时间
const fmtTime = (t: string | null | undefined) => { const fmtTime = (t: string | null | undefined) => {
if (!t) return t('kubernetes.clustercomparepage.s910982'); if (!t) return '从未同步';
try { try {
const d = new Date(t); const d = new Date(t);
return d.toLocaleString('zh-CN', { hour12: false }); return d.toLocaleString('zh-CN', { hour12: false });
@@ -113,8 +111,8 @@ export default function ClusterComparePage() {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Layers className="h-5 w-5 dg-text-blue" /> <Layers className="h-5 w-5 dg-text-blue" />
<div> <div>
<h1 className="text-lg font-semibold">{t('kubernetes.clustercomparepage.s5a25a6')}</h1> <h1 className="text-lg font-semibold">多集群资源对比看板</h1>
<p className="text-xs dg-text-muted">{t('kubernetes.clustercomparepage.s9807a2')}</p> <p className="text-xs dg-text-muted">跨集群资源用量、节点分布、健康状态对比</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -141,8 +139,8 @@ export default function ClusterComparePage() {
{/* 概览卡片 */} {/* 概览卡片 */}
<StatStrip <StatStrip
items={[ items={[
{ label: t('kubernetes.clustercomparepage.s85fe50'), value: totals.cluster_count || 0, color: 'blue' }, { label: '集群', value: totals.cluster_count || 0, color: 'blue' },
{ label: t('k8s.tab.nodes'), value: totals.node_count || 0, color: 'emerald' }, { label: '节点', value: totals.node_count || 0, color: 'emerald' },
{ label: 'Pod', value: totals.pod_count || 0, color: 'purple' }, { label: 'Pod', value: totals.pod_count || 0, color: 'purple' },
{ label: 'Deploy', value: totals.deployment_count || 0, color: 'amber' }, { label: 'Deploy', value: totals.deployment_count || 0, color: 'amber' },
{ label: 'Service', value: totals.service_count || 0, color: 'cyan' }, { label: 'Service', value: totals.service_count || 0, color: 'cyan' },
@@ -153,7 +151,7 @@ export default function ClusterComparePage() {
<Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]"> <Card className="bg-[var(--dg-bg-secondary)]/60 border-[var(--dg-border)]">
<CardContent className="py-12 text-center"> <CardContent className="py-12 text-center">
<Cloud className="h-12 w-12 dg-text-muted mx-auto mb-3" /> <Cloud className="h-12 w-12 dg-text-muted mx-auto mb-3" />
<p className="dg-text-muted">{t('kubernetes.clustercomparepage.s4f921c')}</p> <p className="dg-text-muted">暂无集群数据,请先添加 Kubernetes 集群并同步</p>
<Link to="/kubernetes" className="inline-block mt-3"> <Link to="/kubernetes" className="inline-block mt-3">
<Button variant="outline" size="sm" className="border-[var(--dg-border)]"> <Button variant="outline" size="sm" className="border-[var(--dg-border)]">
去添加集群 <ChevronRight className="h-3.5 w-3.5 ml-1" /> 去添加集群 <ChevronRight className="h-3.5 w-3.5 ml-1" />
@@ -171,7 +169,7 @@ export default function ClusterComparePage() {
<CardContent className="p-5"> <CardContent className="p-5">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<Layers className="h-4 w-4 dg-text-blue" /> <Layers className="h-4 w-4 dg-text-blue" />
<h3 className="text-sm font-semibold">{t('kubernetes.clustercomparepage.se37201')}</h3> <h3 className="text-sm font-semibold">资源数量对比</h3>
</div> </div>
<ResponsiveContainer width="100%" height={280}> <ResponsiveContainer width="100%" height={280}>
<BarChart data={resourceBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}> <BarChart data={resourceBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}>
@@ -180,7 +178,7 @@ export default function ClusterComparePage() {
<YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} /> <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} />
<Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} /> <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
<Legend wrapperStyle={{ fontSize: 11 }} /> <Legend wrapperStyle={{ fontSize: 11 }} />
<Bar dataKey=t('k8s.tab.nodes') fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} /> <Bar dataKey="节点" fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} />
<Bar dataKey="Pod" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} /> <Bar dataKey="Pod" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} />
<Bar dataKey="Deployment" fill={CHART_COLORS[2]} radius={[3, 3, 0, 0]} /> <Bar dataKey="Deployment" fill={CHART_COLORS[2]} radius={[3, 3, 0, 0]} />
<Bar dataKey="Service" fill={CHART_COLORS[5]} radius={[3, 3, 0, 0]} /> <Bar dataKey="Service" fill={CHART_COLORS[5]} radius={[3, 3, 0, 0]} />
@@ -193,7 +191,7 @@ export default function ClusterComparePage() {
<CardContent className="p-5"> <CardContent className="p-5">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<Activity className="h-4 w-4 dg-text-green" /> <Activity className="h-4 w-4 dg-text-green" />
<h3 className="text-sm font-semibold">{t('kubernetes.clustercomparepage.s8af9cf')}</h3> <h3 className="text-sm font-semibold">CPU / 内存使用率对比</h3>
</div> </div>
<ResponsiveContainer width="100%" height={280}> <ResponsiveContainer width="100%" height={280}>
<BarChart data={usageBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}> <BarChart data={usageBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}>
@@ -203,7 +201,7 @@ export default function ClusterComparePage() {
<Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} /> <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
<Legend wrapperStyle={{ fontSize: 11 }} /> <Legend wrapperStyle={{ fontSize: 11 }} />
<Bar dataKey="CPU %" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} /> <Bar dataKey="CPU %" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} />
<Bar dataKey=t('kubernetes.clustercomparepage.sbe9d77') fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} /> <Bar dataKey="内存 %" fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} />
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</CardContent> </CardContent>
@@ -217,7 +215,7 @@ export default function ClusterComparePage() {
<CardContent className="p-5"> <CardContent className="p-5">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<TrendingUp className="h-4 w-4 dg-text-purple" /> <TrendingUp className="h-4 w-4 dg-text-purple" />
<h3 className="text-sm font-semibold">{t('kubernetes.clustercomparepage.sc7d7a7')}</h3> <h3 className="text-sm font-semibold">资源雷达对比</h3>
</div> </div>
<ResponsiveContainer width="100%" height={320}> <ResponsiveContainer width="100%" height={320}>
<RadarChart data={radarData}> <RadarChart data={radarData}>
@@ -244,7 +242,7 @@ export default function ClusterComparePage() {
<CardContent className="p-5"> <CardContent className="p-5">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<Server className="h-4 w-4 dg-text-yellow" /> <Server className="h-4 w-4 dg-text-yellow" />
<h3 className="text-sm font-semibold">{t('kubernetes.clustercomparepage.sefdd7a')}</h3> <h3 className="text-sm font-semibold">节点角色分布</h3>
</div> </div>
{nodeRolePie.length > 0 ? ( {nodeRolePie.length > 0 ? (
<ResponsiveContainer width="100%" height={320}> <ResponsiveContainer width="100%" height={320}>
@@ -262,7 +260,7 @@ export default function ClusterComparePage() {
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
) : ( ) : (
<div className="h-[320px] flex items-center justify-center dg-text-muted text-sm">{t('kubernetes.clustercomparepage.s394f38')}</div> <div className="h-[320px] flex items-center justify-center dg-text-muted text-sm">无节点角色数据</div>
)} )}
</CardContent> </CardContent>
</Card> </Card>
@@ -274,25 +272,25 @@ export default function ClusterComparePage() {
<CardContent className="p-5"> <CardContent className="p-5">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
<HardDrive className="h-4 w-4 dg-text-cyan" /> <HardDrive className="h-4 w-4 dg-text-cyan" />
<h3 className="text-sm font-semibold">{t('kubernetes.clustercomparepage.s3e920c')}</h3> <h3 className="text-sm font-semibold">详细对比</h3>
<span className="text-xs dg-text-muted ml-2">{t('kubernetes.clustercomparepage.sbcb4f0')}</span> <span className="text-xs dg-text-muted ml-2">点击行可进入集群概览</span>
</div> </div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">{t('kubernetes.clustercomparepage.s85fe50')}</TableHead> <TableHead className="dg-text-secondary">集群</TableHead>
<TableHead className="dg-text-secondary">{t('common.status')}</TableHead> <TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary text-right">{t('k8s.tab.nodes')}</TableHead> <TableHead className="dg-text-secondary text-right">节点</TableHead>
<TableHead className="dg-text-secondary text-right">Pod</TableHead> <TableHead className="dg-text-secondary text-right">Pod</TableHead>
<TableHead className="dg-text-secondary text-right">Deployment</TableHead> <TableHead className="dg-text-secondary text-right">Deployment</TableHead>
<TableHead className="dg-text-secondary text-right">Service</TableHead> <TableHead className="dg-text-secondary text-right">Service</TableHead>
<TableHead className="dg-text-secondary text-right">{t('kubernetes.clustercomparepage.s2e32ab')}</TableHead> <TableHead className="dg-text-secondary text-right">CPU 核数</TableHead>
<TableHead className="dg-text-secondary text-right">{t('k8s.pods.memory')}</TableHead> <TableHead className="dg-text-secondary text-right">内存</TableHead>
<TableHead className="dg-text-secondary text-right">{t('monitor.hostCpu')}</TableHead> <TableHead className="dg-text-secondary text-right">CPU 使用率</TableHead>
<TableHead className="dg-text-secondary text-right">{t('monitor.hostMemory')}</TableHead> <TableHead className="dg-text-secondary text-right">内存使用率</TableHead>
<TableHead className="dg-text-secondary">{t('pipeline.role')}</TableHead> <TableHead className="dg-text-secondary">角色</TableHead>
<TableHead className="dg-text-secondary">{t('cloud.syncTime')}</TableHead> <TableHead className="dg-text-secondary">同步时间</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -307,7 +305,7 @@ export default function ClusterComparePage() {
</TableCell> </TableCell>
<TableCell> <TableCell>
<Badge variant="outline" className={`text-xs ${statusColorMap[c.status] || statusColorMap.error}`}> <Badge variant="outline" className={`text-xs ${statusColorMap[c.status] || statusColorMap.error}`}>
{c.status === 'healthy' ? t('kubernetes.clustercomparepage.s33108c') : c.status === 'warning' ? t('kubernetes.clustercomparepage.s5ddbdd') : t('kubernetes.clustercomparepage.sc94103')} {c.status === 'healthy' ? '✓ 健康' : c.status === 'warning' ? '⚠ 警告' : '✗ 异常'}
</Badge> </Badge>
</TableCell> </TableCell>
<TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.node_count}</TableCell> <TableCell className="text-right font-mono text-[var(--dg-text-secondary)]">{c.node_count}</TableCell>
@@ -25,7 +25,6 @@ import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel'; import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
const NAMESPACE_ICON: Record<string, React.ComponentType<Record<string, unknown>>> = { const NAMESPACE_ICON: Record<string, React.ComponentType<Record<string, unknown>>> = {
'kube-system': Server, 'kube-system': Server,
@@ -35,7 +34,6 @@ const NAMESPACE_ICON: Record<string, React.ComponentType<Record<string, unknown>
}; };
export default function ClusterOverviewPage() { export default function ClusterOverviewPage() {
const { t } = useTranslation();
const { clusterCode } = useParams<{ clusterCode: string }>(); const { clusterCode } = useParams<{ clusterCode: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const { toast } = useToast(); const { toast } = useToast();
@@ -55,7 +53,7 @@ export default function ClusterOverviewPage() {
const current = list.find((c: JsonData) => (c.code || String(c.id)) === clusterCode); const current = list.find((c: JsonData) => (c.code || String(c.id)) === clusterCode);
setClusterInfo(current || null); setClusterInfo(current || null);
if (!current && list.length > 0 && clusterCode) { if (!current && list.length > 0 && clusterCode) {
toast({ title: t('kubernetes.clusteroverviewpage.s9ff765'), description: t('kubernetes.clusteroverviewpage.s59f69c', { clusterCode: clusterCode }), variant: 'destructive' }); toast({ title: '集群未找到', description: `找不到集群 ${clusterCode}`, variant: 'destructive' });
} }
} catch { setClusters([]); } } catch { setClusters([]); }
}, [clusterCode]); }, [clusterCode]);
@@ -85,15 +83,15 @@ export default function ClusterOverviewPage() {
return ( return (
<PageShell <PageShell
variant="default" variant="default"
title={clusterCode || t('kubernetes.clusteroverviewpage.s066c0a')} title={clusterCode || '集群概览'}
subtitle={clusterInfo?.version ? t('kubernetes.clusteroverviewpage.s966b2d', { clusterInfo.version: clusterInfo.version }) : t('kubernetes.clusteroverviewpage.s066c0a')} subtitle={clusterInfo?.version ? `集群概览 · Kubernetes ${clusterInfo.version}` : '集群概览'}
icon={<Server className="h-5 w-5" />} icon={<Server className="h-5 w-5" />}
metrics={!loading ? ( metrics={!loading ? (
<StatStrip <StatStrip
items={[ items={[
{ label: t('k8s.tab.nodes'), value: nodes.length, color: 'blue' }, { label: '节点', value: nodes.length, color: 'blue' },
{ label: t('k8s.column.namespace'), value: namespaces.length, color: 'green' }, { label: '命名空间', value: namespaces.length, color: 'green' },
{ label: t('common.version'), value: clusterInfo?.version || '-', color: 'muted' }, { label: '版本', value: clusterInfo?.version || '-', color: 'muted' },
]} ]}
/> />
) : undefined} ) : undefined}
@@ -113,21 +111,21 @@ export default function ClusterOverviewPage() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.name')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">名称</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('pipeline.role')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">角色</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.status')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">IP</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">IP</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">OS</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">OS</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">Kubelet</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">Kubelet</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">CPU</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">CPU</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('k8s.pods.memory')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">内存</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{loading ? ( {loading ? (
<TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />{t('common.loading')}</TableCell></TableRow> <TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
) : nodes.length === 0 ? ( ) : nodes.length === 0 ? (
<TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Cpu className="h-8 w-8 mx-auto mb-2 opacity-50" />{t('k8s.topology.noNodes')}</TableCell></TableRow> <TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Cpu className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无节点</TableCell></TableRow>
) : ( ) : (
nodes.map((n: JsonData) => { nodes.map((n: JsonData) => {
const cpuCores = n.cpu || 0; const cpuCores = n.cpu || 0;
@@ -16,10 +16,8 @@ import { DeploymentHpaTab } from './deployment-detail/DeploymentHpaTab';
import { DeploymentPodModals } from './deployment-detail/DeploymentPodModals'; import { DeploymentPodModals } from './deployment-detail/DeploymentPodModals';
import { YamlViewer } from './YamlViewer'; import { YamlViewer } from './YamlViewer';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBack }: DeploymentDetailProps) { export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBack }: DeploymentDetailProps) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const confirm = useConfirm(); const confirm = useConfirm();
const [deployment, setDeployment] = useState<JsonData>(null); const [deployment, setDeployment] = useState<JsonData>(null);
@@ -62,7 +60,7 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
setPods(allPods.filter((p: JsonData) => p.namespace === namespace && p.name.startsWith(deploymentName))); setPods(allPods.filter((p: JsonData) => p.namespace === namespace && p.name.startsWith(deploymentName)));
setHpas(allHpas.filter((h: JsonData) => h.target_name === deploymentName && h.namespace === namespace)); setHpas(allHpas.filter((h: JsonData) => h.target_name === deploymentName && h.namespace === namespace));
} catch (e) { } catch (e) {
console.error(t('kubernetes.deploymentdetail.sb46ea9'), e); console.error('加载详情失败:', e);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -76,10 +74,10 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
setActionLoading('scale'); setActionLoading('scale');
try { try {
await kubernetesApi.scaleDeployment(clusterCode, namespace, deploymentName, newReplicas); await kubernetesApi.scaleDeployment(clusterCode, namespace, deploymentName, newReplicas);
toast({ title: t('kubernetes.deploymentdetail.s0b3ea1'), description: t('kubernetes.deploymentdetail.sacbcbd', { newReplicas: newReplicas }) }); toast({ title: '扩缩容成功', description: `副本数已设置为 ${newReplicas}` });
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('common.operationFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '操作失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
@@ -87,9 +85,9 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
setActionLoading('restart'); setActionLoading('restart');
try { try {
await kubernetesApi.restartDeployment(clusterCode, namespace, deploymentName); await kubernetesApi.restartDeployment(clusterCode, namespace, deploymentName);
toast({ title: t('kubernetes.deploymentdetail.s68a700'), description: t('kubernetes.deploymentdetail.sd18761') }); toast({ title: '重启指令已下发', description: 'Deployment 正在滚动重启' });
} catch (e) { } catch (e) {
toast({ title: t('kubernetes.deployment.restartFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '重启失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
@@ -98,28 +96,28 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
setActionLoading('image'); setActionLoading('image');
try { try {
await kubernetesApi.updateDeploymentImage(clusterCode, namespace, deploymentName, newImage); await kubernetesApi.updateDeploymentImage(clusterCode, namespace, deploymentName, newImage);
toast({ title: t('kubernetes.deploymentdetail.s6df3c3'), description: t('kubernetes.deploymentdetail.sa982c3', { newImage: newImage }) }); toast({ title: '镜像更新成功', description: `正在滚动更新为 ${newImage}` });
setShowImageUpdate(false); setShowImageUpdate(false);
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('alert.updateFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '更新失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
const handleHpaToggle = async (hpa: JsonData) => { const handleHpaToggle = async (hpa: JsonData) => {
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.hpa.deleteHpa'), title: '删除 HPA',
description: t('kubernetes.deploymentdetail.s209f7e', { hpa.name: hpa.name }), description: `确定删除 HPA "${hpa.name}"?`,
confirmText: t('common.delete'), confirmText: '删除',
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
try { try {
await kubernetesApi.deleteHPA(clusterCode, namespace, hpa.name); await kubernetesApi.deleteHPA(clusterCode, namespace, hpa.name);
toast({ title: t('kubernetes.deploymentdetail.s0f958f') }); toast({ title: 'HPA 已删除' });
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('common.deleteFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '删除失败', description: e?.message || String(e), variant: 'destructive' });
} }
}; };
@@ -128,7 +126,7 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-12 text-center"> <CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" /> <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3">{t('common.loading')}</p> <p className="dg-text-muted mt-3">加载中...</p>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -140,7 +138,7 @@ export function DeploymentDetail({ clusterCode, namespace, deploymentName, onBac
<CardContent className="p-12 text-center"> <CardContent className="p-12 text-center">
<XCircle className="h-8 w-8 mx-auto dg-text-red" /> <XCircle className="h-8 w-8 mx-auto dg-text-red" />
<p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p> <p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p>
<Button variant="outline" className="mt-4" onClick={onBack}>{t('common.back')}</Button> <Button variant="outline" className="mt-4" onClick={onBack}>返回</Button>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -15,7 +15,6 @@ import { saveDeploymentManifest } from './deployment-manifest-save';
import { SchedulingSection, type ScheduleMode } from './deployment-edit-advanced/SchedulingSection'; import { SchedulingSection, type ScheduleMode } from './deployment-edit-advanced/SchedulingSection';
import { DnsHostSection } from './deployment-edit-advanced/DnsHostSection'; import { DnsHostSection } from './deployment-edit-advanced/DnsHostSection';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface Props { interface Props {
clusterCode: string; clusterCode: string;
@@ -35,7 +34,6 @@ interface Toleration {
} }
export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: Props) { export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: Props) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [loading, setLoading] = useState(!manifest); const [loading, setLoading] = useState(!manifest);
@@ -313,10 +311,10 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
else delete podSpec.dnsConfig; else delete podSpec.dnsConfig;
await saveDeploymentManifest(clusterCode, namespace, deploymentName, base); await saveDeploymentManifest(clusterCode, namespace, deploymentName, base);
toast({ title: t('kubernetes.deploymenteditadvanced.s9762d0'), description: t('kubernetes.deploymenteditadvanced.s1952a7', { deploymentName: deploymentName }) }); toast({ title: '高级设置已保存', description: `${deploymentName} 更新已提交` });
onSaved(base); onSaved(base);
} catch (e) { } catch (e) {
toast({ title: t('common.saveFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '保存失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
@@ -325,7 +323,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-12 text-center"> <CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" /> <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">{t('common.loading')}</p> <p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -366,12 +364,12 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
{strategyType === 'RollingUpdate' && ( {strategyType === 'RollingUpdate' && (
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="dg-text-muted text-xs">{t('kubernetes.deploymenteditadvanced.s282929')}</Label> <Label className="dg-text-muted text-xs">maxSurge(整数或百分比,超出期望副本数)</Label>
<Input value={maxSurge} onChange={e => setMaxSurge(e.target.value)} <Input value={maxSurge} onChange={e => setMaxSurge(e.target.value)}
placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" /> placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
</div> </div>
<div> <div>
<Label className="dg-text-muted text-xs">{t('kubernetes.deploymenteditadvanced.s7754b7')}</Label> <Label className="dg-text-muted text-xs">maxUnavailable(整数或百分比,不可用上限)</Label>
<Input value={maxUnavailable} onChange={e => setMaxUnavailable(e.target.value)} <Input value={maxUnavailable} onChange={e => setMaxUnavailable(e.target.value)}
placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" /> placeholder="25%" className="h-8 mt-1 dg-input text-sm font-mono" />
</div> </div>
@@ -389,12 +387,12 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
</CardHeader> </CardHeader>
<CardContent className="pt-0 grid grid-cols-2 gap-3"> <CardContent className="pt-0 grid grid-cols-2 gap-3">
<div> <div>
<Label className="dg-text-muted text-xs">{t('kubernetes.deploymenteditadvanced.s0d8e53')}</Label> <Label className="dg-text-muted text-xs">revisionHistoryLimit(保留 RS 历史)</Label>
<Input type="number" value={revisionHistoryLimit} onChange={e => setRevisionHistoryLimit(e.target.value)} <Input type="number" value={revisionHistoryLimit} onChange={e => setRevisionHistoryLimit(e.target.value)}
className="h-8 mt-1 dg-input text-sm font-mono" /> className="h-8 mt-1 dg-input text-sm font-mono" />
</div> </div>
<div> <div>
<Label className="dg-text-muted text-xs">{t('kubernetes.deploymenteditadvanced.scd3a9b')}</Label> <Label className="dg-text-muted text-xs">progressDeadlineSeconds(升级超时秒数)</Label>
<Input type="number" value={progressDeadlineSeconds} onChange={e => setProgressDeadlineSeconds(e.target.value)} <Input type="number" value={progressDeadlineSeconds} onChange={e => setProgressDeadlineSeconds(e.target.value)}
className="h-8 mt-1 dg-input text-sm font-mono" /> className="h-8 mt-1 dg-input text-sm font-mono" />
</div> </div>
@@ -405,7 +403,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
<Card className="dg-card"> <Card className="dg-card">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-sm text-[var(--dg-text-primary)]">{t('kubernetes.deploymenteditadvanced.s13a831')}</CardTitle> <CardTitle className="text-sm text-[var(--dg-text-primary)]">容忍 (Tolerations)</CardTitle>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs"
onClick={() => setTolerations(prev => [...prev, { key: '', operator: 'Equal', value: '', effect: 'NoSchedule', tolerationSeconds: '' }])}> onClick={() => setTolerations(prev => [...prev, { key: '', operator: 'Equal', value: '', effect: 'NoSchedule', tolerationSeconds: '' }])}>
<Plus className="h-3 w-3 mr-1" />添加 <Plus className="h-3 w-3 mr-1" />添加
@@ -413,7 +411,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-2"> <CardContent className="pt-0 space-y-2">
{tolerations.length === 0 && <p className="text-xs dg-text-muted">{t('kubernetes.deploymenteditadvanced.s8bc06b')}</p>} {tolerations.length === 0 && <p className="text-xs dg-text-muted">未配置容忍</p>}
{tolerations.map((t, i) => ( {tolerations.map((t, i) => (
<div key={i} className="grid grid-cols-[1fr_80px_1fr_100px_80px_auto] gap-2 items-center"> <div key={i} className="grid grid-cols-[1fr_80px_1fr_100px_80px_auto] gap-2 items-center">
<Input value={t.key} placeholder="key" onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, key: e.target.value } : x))} <Input value={t.key} placeholder="key" onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, key: e.target.value } : x))}
@@ -428,12 +426,12 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
className="h-7 dg-input text-xs font-mono" /> className="h-7 dg-input text-xs font-mono" />
<select value={t.effect} onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, effect: e.target.value } : x))} <select value={t.effect} onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, effect: e.target.value } : x))}
className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1"> className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1">
<option value="">{t('kubernetes.deploymenteditadvanced.s2a6eb2')}</option> <option value="">任意</option>
<option value="NoSchedule">NoSchedule</option> <option value="NoSchedule">NoSchedule</option>
<option value="PreferNoSchedule">PreferNoSchedule</option> <option value="PreferNoSchedule">PreferNoSchedule</option>
<option value="NoExecute">NoExecute</option> <option value="NoExecute">NoExecute</option>
</select> </select>
<Input value={t.tolerationSeconds} placeholder=t('common.second') disabled={t.effect !== 'NoExecute'} <Input value={t.tolerationSeconds} placeholder="秒" disabled={t.effect !== 'NoExecute'}
onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, tolerationSeconds: e.target.value } : x))} onChange={e => setTolerations(prev => prev.map((x, idx) => idx === i ? { ...x, tolerationSeconds: e.target.value } : x))}
className="h-7 dg-input text-xs font-mono" /> className="h-7 dg-input text-xs font-mono" />
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red" onClick={() => setTolerations(prev => prev.filter((_, idx) => idx !== i))}> <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red" onClick={() => setTolerations(prev => prev.filter((_, idx) => idx !== i))}>
@@ -580,7 +578,7 @@ export function DeploymentEditAdvanced({ clusterCode, namespace, deploymentName,
{/* 操作栏 */} {/* 操作栏 */}
<div className="flex justify-end gap-2 pt-2"> <div className="flex justify-end gap-2 pt-2">
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>{t('common.cancel')}</Button> <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}> <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />} {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存 保存
@@ -10,7 +10,6 @@ import { Badge } from '@/components/ui/badge';
import { Plus, Trash2, Save, Loader2, Tags, FileText, Hash, Lock } from 'lucide-react'; import { Plus, Trash2, Save, Loader2, Tags, FileText, Hash, Lock } from 'lucide-react';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { saveDeploymentManifest } from './deployment-manifest-save'; import { saveDeploymentManifest } from './deployment-manifest-save';
import { useTranslation } from 'react-i18next';
interface DeploymentEditBasicProps { interface DeploymentEditBasicProps {
clusterCode: string; clusterCode: string;
@@ -39,7 +38,6 @@ function kvToObj(arr: Array<{ key: string; value: string }>): Record<string, str
} }
export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel, isCreate = false }: DeploymentEditBasicProps) { export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel, isCreate = false }: DeploymentEditBasicProps) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [loading, setLoading] = useState(!manifest); const [loading, setLoading] = useState(!manifest);
@@ -95,7 +93,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
const merged = { ...kvToObj(prev), ...sel }; const merged = { ...kvToObj(prev), ...sel };
return Object.entries(merged).map(([key, value]) => ({ key, value })); return Object.entries(merged).map(([key, value]) => ({ key, value }));
}); });
toast({ title: t('kubernetes.deploymenteditbasic.s8bf97a'), description: t('kubernetes.deploymenteditbasic.s841d0d') }); toast({ title: '已同步', description: 'Selector 标签已合并到 Pod 模板标签' });
}; };
const save = async () => { const save = async () => {
@@ -108,7 +106,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
base.metadata = base.metadata || {}; base.metadata = base.metadata || {};
if (isCreate) { if (isCreate) {
const trimmed = resName.trim(); const trimmed = resName.trim();
if (!trimmed) throw new Error(t('kubernetes.deploymenteditbasic.sdf09ff')); if (!trimmed) throw new Error('名称不能为空');
base.metadata.name = trimmed; base.metadata.name = trimmed;
base.metadata.namespace = namespace; base.metadata.namespace = namespace;
} }
@@ -129,10 +127,10 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
delete base.spec.template.metadata.labels; delete base.spec.template.metadata.labels;
} }
const savedName = await saveDeploymentManifest(clusterCode, namespace, deploymentName, base); const savedName = await saveDeploymentManifest(clusterCode, namespace, deploymentName, base);
toast({ title: isCreate ? t('monitor.dashboard.custom.toastCreateSuccess') : t('kubernetes.deploymenteditbasic.sa59c4d'), description: isCreate ? t('kubernetes.deploymenteditbasic.s220fce', { savedName: savedName }) : t('kubernetes.deploymenteditbasic.s253b77', { savedName: savedName }) }); toast({ title: isCreate ? '创建成功' : '基本信息已保存', description: isCreate ? `${savedName} 已创建` : `${savedName} 更新已提交` });
onSaved(base); onSaved(base);
} catch (e) { } catch (e) {
toast({ title: t('common.saveFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '保存失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
@@ -141,7 +139,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-12 text-center"> <CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" /> <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">{t('common.loading')}</p> <p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -176,7 +174,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
onChange={e => setReplicas(Math.max(0, Number(e.target.value) || 0))} onChange={e => setReplicas(Math.max(0, Number(e.target.value) || 0))}
className="w-32 dg-input" className="w-32 dg-input"
/> />
<span className="text-xs dg-text-muted">{t('kubernetes.deploymenteditbasic.s6e47fc')}</span> <span className="text-xs dg-text-muted">期望运行的 Pod 实例数量</span>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -186,12 +184,12 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2"> <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Lock className="h-4 w-4 dg-text-muted" /> <Lock className="h-4 w-4 dg-text-muted" />
{isCreate ? t('kubernetes.deploymenteditbasic.sc8de32') : t('kubernetes.deploymenteditbasic.sc4d9eb')} {isCreate ? '基本标识' : '基本标识(只读)'}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0 grid grid-cols-2 gap-4"> <CardContent className="pt-0 grid grid-cols-2 gap-4">
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.deploymenteditbasic.sab7247')}</Label> <Label className="dg-text-secondary text-xs">名称 (name)</Label>
<Input <Input
value={isCreate ? resName : deploymentName} value={isCreate ? resName : deploymentName}
readOnly={!isCreate} readOnly={!isCreate}
@@ -200,7 +198,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
/> />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.deploymenteditbasic.s00e648')}</Label> <Label className="dg-text-secondary text-xs">命名空间 (namespace)</Label>
<Input value={namespace} readOnly <Input value={namespace} readOnly
className="mt-1 bg-[var(--dg-bg-primary)] border-[var(--dg-border)] dg-text-muted font-mono text-sm cursor-not-allowed" /> className="mt-1 bg-[var(--dg-bg-primary)] border-[var(--dg-border)] dg-text-muted font-mono text-sm cursor-not-allowed" />
</div> </div>
@@ -222,7 +220,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-1.5"> <CardContent className="pt-0 space-y-1.5">
{labels.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.deploymenteditbasic.s3f9afc')}</p>} {labels.length === 0 && <p className="text-[11px] dg-text-muted">无标签</p>}
{labels.map((l, i) => ( {labels.map((l, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2"> <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={l.key} placeholder="app" <Input value={l.key} placeholder="app"
@@ -245,7 +243,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2"> <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<Tags className="h-4 w-4 dg-text-yellow" /> <Tags className="h-4 w-4 dg-text-yellow" />
选择器 (Selector) 选择器 (Selector)
<Badge variant="outline" className="border-amber-700/50 text-amber-500 text-[10px]">{t('kubernetes.deploymenteditbasic.s36e4c3')}</Badge> <Badge variant="outline" className="border-amber-700/50 text-amber-500 text-[10px]">⚠️ 需与模板标签一致</Badge>
</CardTitle> </CardTitle>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addSelector}> <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={addSelector}>
<Plus className="h-3 w-3 mr-1" />新增 <Plus className="h-3 w-3 mr-1" />新增
@@ -253,8 +251,8 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-1.5"> <CardContent className="pt-0 space-y-1.5">
<p className="text-[11px] text-amber-500/70 mb-1">{t('kubernetes.deploymenteditbasic.sc29c88')}</p> <p className="text-[11px] text-amber-500/70 mb-1">Selector 决定哪些 Pod 归属此 Deployment。修改时必须确保与 Pod Template Labels 匹配,否则 Deployment 将无法管理 Pod。</p>
{selectorLabels.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.service.noSelector')}</p>} {selectorLabels.length === 0 && <p className="text-[11px] dg-text-muted">无选择器</p>}
{selectorLabels.map((s, i) => ( {selectorLabels.map((s, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2"> <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={s.key} placeholder="app" <Input value={s.key} placeholder="app"
@@ -289,8 +287,8 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-1.5"> <CardContent className="pt-0 space-y-1.5">
<p className="text-[11px] dg-text-muted mb-1">{t('kubernetes.deploymenteditbasic.s9faa25')}</p> <p className="text-[11px] dg-text-muted mb-1">Pod 模板标签必须包含 Selector 全部键值,否则 Deployment 无法管理 Pod</p>
{templateLabels.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.deploymenteditbasic.se9c9f6')}</p>} {templateLabels.length === 0 && <p className="text-[11px] dg-text-muted">无模板标签</p>}
{templateLabels.map((l, i) => ( {templateLabels.map((l, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2"> <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={l.key} placeholder="app" <Input value={l.key} placeholder="app"
@@ -321,7 +319,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-1.5"> <CardContent className="pt-0 space-y-1.5">
{annotations.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.deploymenteditbasic.sbe1e7c')}</p>} {annotations.length === 0 && <p className="text-[11px] dg-text-muted">无注解</p>}
{annotations.map((a, i) => ( {annotations.map((a, i) => (
<div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2"> <div key={i} className="grid grid-cols-[1fr_1.4fr_auto] gap-2">
<Input value={a.key} placeholder="deployment.kubernetes.io/revision" <Input value={a.key} placeholder="deployment.kubernetes.io/revision"
@@ -343,7 +341,7 @@ export function DeploymentEditBasic({ clusterCode, namespace, deploymentName, ma
保存将通过 <code className="dg-text-secondary">PUT application/yaml</code> 提交(自动剥离 status/managedFields 等只读字段) 保存将通过 <code className="dg-text-secondary">PUT application/yaml</code> 提交(自动剥离 status/managedFields 等只读字段)
</p> </p>
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>{t('common.cancel')}</Button> <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}> <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />} {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存 保存
@@ -26,10 +26,8 @@ import {
} from './deployment-edit/container-utils'; } from './deployment-edit/container-utils';
import type { ContainerForm, DeploymentEditContainersProps } from './deployment-edit/types'; import type { ContainerForm, DeploymentEditContainersProps } from './deployment-edit/types';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function DeploymentEditContainers({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: DeploymentEditContainersProps) { export function DeploymentEditContainers({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: DeploymentEditContainersProps) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [loading, setLoading] = useState(!manifest); const [loading, setLoading] = useState(!manifest);
@@ -83,11 +81,11 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
// validate // validate
for (const c of [...initContainers, ...containers]) { for (const c of [...initContainers, ...containers]) {
if (!c.name.trim()) { if (!c.name.trim()) {
toast({ title: t('common.saveFailed'), description: t('kubernetes.deploymenteditcontainers.s14b12c'), variant: 'destructive' }); toast({ title: '保存失败', description: '容器名称不能为空', variant: 'destructive' });
return; return;
} }
if (!c.image.trim()) { if (!c.image.trim()) {
toast({ title: t('common.saveFailed'), description: t('kubernetes.deploymenteditcontainers.sb01a6a', { c.name: c.name }), variant: 'destructive' }); toast({ title: '保存失败', description: `容器 ${c.name} 的镜像不能为空`, variant: 'destructive' });
return; return;
} }
} }
@@ -103,10 +101,10 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
? imagePullSecrets.filter(s => s.trim()).map((s: string) => ({ name: s })) ? imagePullSecrets.filter(s => s.trim()).map((s: string) => ({ name: s }))
: undefined; : undefined;
await saveDeploymentManifest(clusterCode, namespace, deploymentName, base); await saveDeploymentManifest(clusterCode, namespace, deploymentName, base);
toast({ title: t('kubernetes.deploymenteditcontainers.sdf22b9'), description: t('kubernetes.deploymenteditcontainers.s1952a7', { deploymentName: deploymentName }) }); toast({ title: '容器配置已保存', description: `${deploymentName} 更新已提交` });
onSaved(base); onSaved(base);
} catch (e) { } catch (e) {
toast({ title: t('common.saveFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '保存失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
@@ -115,7 +113,7 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-12 text-center"> <CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" /> <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">{t('common.loading')}</p> <p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -138,7 +136,7 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
<CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2"> <CardTitle className="text-sm text-[var(--dg-text-primary)] flex items-center gap-2">
<KeyRound className="h-4 w-4 dg-text-yellow" /> <KeyRound className="h-4 w-4 dg-text-yellow" />
镜像拉取凭证 (imagePullSecrets) 镜像拉取凭证 (imagePullSecrets)
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">{t('kubernetes.deploymenteditcontainers.s2f29fb')}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] dg-text-muted text-[10px]">Pod 级别</Badge>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-2"> <CardContent className="pt-0 space-y-2">
@@ -150,10 +148,10 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
className="dg-text-red hover:dg-text-red ml-1"><Trash2 className="h-3 w-3" /></button> className="dg-text-red hover:dg-text-red ml-1"><Trash2 className="h-3 w-3" /></button>
</div> </div>
))} ))}
{imagePullSecrets.length === 0 && <span className="text-[11px] dg-text-muted">{t('common.none')}</span>} {imagePullSecrets.length === 0 && <span className="text-[11px] dg-text-muted">无</span>}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Input placeholder=t('kubernetes.deploymenteditcontainers.s960f6a') className="dg-input text-xs h-8" <Input placeholder="输入 Secret 名称后回车" className="dg-input text-xs h-8"
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
const val = (e.target as HTMLInputElement).value.trim(); const val = (e.target as HTMLInputElement).value.trim();
@@ -170,8 +168,8 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
{/* 初始化容器 */} {/* 初始化容器 */}
<ContainerGroupSection <ContainerGroupSection
title=t('kubernetes.pod.initContainer') title="初始化容器"
description=t('kubernetes.deploymenteditcontainers.s883e09') description="在主容器启动前按顺序执行的容器,用于初始化环境"
icon={<Play className="h-4 w-4 dg-text-purple" />} icon={<Play className="h-4 w-4 dg-text-purple" />}
containers={initContainers} containers={initContainers}
accentColor="purple" accentColor="purple"
@@ -182,8 +180,8 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
{/* 工作容器 */} {/* 工作容器 */}
<ContainerGroupSection <ContainerGroupSection
title=t('kubernetes.deploymenteditcontainers.sc61b83') title="工作容器"
description=t('kubernetes.deploymenteditcontainers.s43eebd') description="Deployment 运行的主容器,定义应用进程及其运行时配置"
icon={<Container className="h-4 w-4 dg-text-blue" />} icon={<Container className="h-4 w-4 dg-text-blue" />}
containers={containers} containers={containers}
accentColor="blue" accentColor="blue"
@@ -200,7 +198,7 @@ export function DeploymentEditContainers({ clusterCode, namespace, deploymentNam
<span className="text-[var(--dg-text-secondary)] font-semibold ml-1">{containers.length}</span> 个工作容器 <span className="text-[var(--dg-text-secondary)] font-semibold ml-1">{containers.length}</span> 个工作容器
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>{t('common.cancel')}</Button> <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}> <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />} {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存 保存
@@ -28,7 +28,6 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { dumpManifest } from './k8s-manifest-utils'; import { dumpManifest } from './k8s-manifest-utils';
import { ResourceVisualEditor } from './ResourceVisualEditor'; import { ResourceVisualEditor } from './ResourceVisualEditor';
import { useTranslation } from 'react-i18next';
interface Props { interface Props {
clusterCode: string; clusterCode: string;
@@ -76,7 +75,6 @@ interface _SvcPortForm {
const toArray = ( v: any) => (Array.isArray(v) ? v : (v?.list || v?.items || v?.data || [])); const toArray = ( v: any) => (Array.isArray(v) ? v : (v?.list || v?.items || v?.data || []));
export function DeploymentEditService({ clusterCode, namespace, deploymentName, manifest, onCancel }: Props) { export function DeploymentEditService({ clusterCode, namespace, deploymentName, manifest, onCancel }: Props) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const confirm = useConfirm(); const confirm = useConfirm();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -227,11 +225,11 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
try { try {
const yaml = await dumpManifest(svcManifest); const yaml = await dumpManifest(svcManifest);
await kubernetesApi.applyYAML(clusterCode, yaml); await kubernetesApi.applyYAML(clusterCode, yaml);
toast({ title: t('kubernetes.deploymenteditservice.sabd7e0'), description: name }); toast({ title: 'Service 已创建', description: name });
setShowCreate(null); setShowCreate(null);
load(); load();
} catch (e) { } catch (e) {
toast({ title: t('monitor.quickSetupFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '创建失败', description: e?.message || String(e), variant: 'destructive' });
} }
}; };
@@ -262,30 +260,30 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
try { try {
const yaml = await dumpManifest(manifest); const yaml = await dumpManifest(manifest);
await kubernetesApi.applyYAML(clusterCode, yaml); await kubernetesApi.applyYAML(clusterCode, yaml);
toast({ title: t('kubernetes.deploymenteditservice.se356fb'), description: name }); toast({ title: 'Ingress 已创建', description: name });
setShowCreate(null); setShowCreate(null);
load(); load();
} catch (e) { } catch (e) {
toast({ title: t('monitor.quickSetupFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '创建失败', description: e?.message || String(e), variant: 'destructive' });
} }
}; };
// 删除资源 // 删除资源
const deleteResource = async (kind: 'service' | 'ingress', name: string) => { const deleteResource = async (kind: 'service' | 'ingress', name: string) => {
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.deploymenteditservice.s8a2a35'), title: '删除资源',
description: t('kubernetes.deploymenteditservice.s4742c2', { kind === 'service' ? 'Service' : 'Ingress': kind === 'service' ? 'Service' : 'Ingress', name: name }), description: `确认删除 ${kind === 'service' ? 'Service' : 'Ingress'} 「${name}」?此操作不可撤销。`,
confirmText: t('common.delete'), confirmText: '删除',
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
try { try {
const resource = kind === 'service' ? 'services' : 'ingresses'; const resource = kind === 'service' ? 'services' : 'ingresses';
await kubernetesApi.deleteResourceYaml(clusterCode, namespace, resource, name); await kubernetesApi.deleteResourceYaml(clusterCode, namespace, resource, name);
toast({ title: t('alert.deleted'), description: t('kubernetes.deploymenteditservice.s857e9a', { kind === 'service' ? 'Service' : 'Ingress': kind === 'service' ? 'Service' : 'Ingress', name: name }) }); toast({ title: '已删除', description: `${kind === 'service' ? 'Service' : 'Ingress'} ${name} 已删除` });
load(); load();
} catch (e) { } catch (e) {
toast({ title: t('common.deleteFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '删除失败', description: e?.message || String(e), variant: 'destructive' });
} }
}; };
@@ -294,7 +292,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-12 text-center"> <CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" /> <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">{t('common.loading')}</p> <p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -307,13 +305,13 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
<CardContent className="p-3"> <CardContent className="p-3">
<div className="flex items-center gap-2 text-xs dg-text-secondary"> <div className="flex items-center gap-2 text-xs dg-text-secondary">
<Network className="h-3.5 w-3.5 dg-text-blue" /> <Network className="h-3.5 w-3.5 dg-text-blue" />
<span>{t('kubernetes.deploymenteditservice.sb8eef7')}</span> <span>选择器:</span>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{Object.entries(selectorLabels).map(([k, v]) => ( {Object.entries(selectorLabels).map(([k, v]) => (
<code key={k} className="bg-[var(--dg-bg-tertiary)] px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)] text-[11px]">{k}={v}</code> <code key={k} className="bg-[var(--dg-bg-tertiary)] px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)] text-[11px]">{k}={v}</code>
))} ))}
{Object.keys(selectorLabels).length === 0 && ( {Object.keys(selectorLabels).length === 0 && (
<span className="dg-text-muted italic">{t('kubernetes.deploymenteditservice.s33360b')}</span> <span className="dg-text-muted italic">(无 selector)</span>
)} )}
</div> </div>
<Button size="sm" variant="ghost" className="h-6 ml-auto text-xs dg-text-secondary" onClick={load}> <Button size="sm" variant="ghost" className="h-6 ml-auto text-xs dg-text-secondary" onClick={load}>
@@ -340,7 +338,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
<Plus className="h-3 w-3 mr-1" />创建 Service <Plus className="h-3 w-3 mr-1" />创建 Service
</Button> </Button>
</div> </div>
<p className="text-xs dg-text-muted mt-1">{t('kubernetes.deploymenteditservice.sd0ad85')}</p> <p className="text-xs dg-text-muted mt-1">仅显示 selector 匹配此 Deployment 的关联 Service</p>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="pt-0">
{matchedSvcs.length === 0 && showCreate !== 'service' ? ( {matchedSvcs.length === 0 && showCreate !== 'service' ? (
@@ -358,14 +356,14 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{matched ? <CheckCircle className="h-4 w-4 dg-text-blue" /> : <Network className="h-4 w-4 dg-text-muted" />} {matched ? <CheckCircle className="h-4 w-4 dg-text-blue" /> : <Network className="h-4 w-4 dg-text-muted" />}
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{svc.name}</span> <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{svc.name}</span>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{svc.type}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{svc.type}</Badge>
{matched && <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-[10px]">{t('kubernetes.deploymenteditservice.s1c3cf7')}</Badge>} {matched && <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-[10px]">关联</Badge>}
<code className="text-[11px] dg-text-muted ml-auto">{svc.clusterIP}</code> <code className="text-[11px] dg-text-muted ml-auto">{svc.clusterIP}</code>
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green" <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green"
onClick={() => setVisualEditor({ resource: 'services', name: svc.name })}> onClick={() => setVisualEditor({ resource: 'services', name: svc.name })}>
<Pencil className="h-3 w-3 mr-1" />编辑 <Pencil className="h-3 w-3 mr-1" />编辑
</Button> </Button>
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red" <Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
title=t('kubernetes.service.deleteService') onClick={() => deleteResource('service', svc.name)}> title="删除 Service" onClick={() => deleteResource('service', svc.name)}>
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
</Button> </Button>
</div> </div>
@@ -401,13 +399,13 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{/* 基本信息 */} {/* 基本信息 */}
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<div> <div>
<Label className="dg-text-muted text-[11px]">{t('common.name')}</Label> <Label className="dg-text-muted text-[11px]">名称</Label>
<Input value={svcForm.name} onChange={e => setSvcForm(s => ({ ...s, name: e.target.value }))} <Input value={svcForm.name} onChange={e => setSvcForm(s => ({ ...s, name: e.target.value }))}
placeholder={`${deploymentName}-svc`} placeholder={`${deploymentName}-svc`}
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div> </div>
<div> <div>
<Label className="dg-text-muted text-[11px]">{t('common.type')}</Label> <Label className="dg-text-muted text-[11px]">类型</Label>
<select value={svcForm.type} onChange={e => setSvcForm(s => ({ ...s, type: e.target.value }))} <select value={svcForm.type} onChange={e => setSvcForm(s => ({ ...s, type: e.target.value }))}
className="h-7 mt-0.5 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2"> className="h-7 mt-0.5 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
<option value="ClusterIP">ClusterIP</option> <option value="ClusterIP">ClusterIP</option>
@@ -418,7 +416,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{/* 快速预设 */} {/* 快速预设 */}
<div> <div>
<Label className="dg-text-muted text-[11px] mb-1 block">{t('kubernetes.deploymenteditservice.s83907c')}</Label> <Label className="dg-text-muted text-[11px] mb-1 block">快速添加常用端口</Label>
<div className="flex gap-1.5"> <div className="flex gap-1.5">
{PORT_PRESETS.map(p => ( {PORT_PRESETS.map(p => (
<button key={p.name} onClick={() => addPort(p)} <button key={p.name} onClick={() => addPort(p)}
@@ -479,19 +477,19 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{/* Selector 预览 */} {/* Selector 预览 */}
<div className="text-[10px] dg-text-muted border-t border-[var(--dg-border)]/50 pt-2"> <div className="text-[10px] dg-text-muted border-t border-[var(--dg-border)]/50 pt-2">
<span className="dg-text-muted">{t('kubernetes.deploymenteditservice.sfd3a08')} </span> <span className="dg-text-muted">selector (自动检测): </span>
{Object.keys(selectorLabels).length > 0 ? ( {Object.keys(selectorLabels).length > 0 ? (
Object.entries(selectorLabels).map(([k, v]) => ( Object.entries(selectorLabels).map(([k, v]) => (
<code key={k} className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-secondary ml-1">{k}={v}</code> <code key={k} className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-secondary ml-1">{k}={v}</code>
)) ))
) : ( ) : (
<span className="dg-text-muted italic">{t('kubernetes.deploymenteditservice.s5847b0')}</span> <span className="dg-text-muted italic">未检测到</span>
)} )}
</div> </div>
<div className="flex justify-end gap-2 pt-1"> <div className="flex justify-end gap-2 pt-1">
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>{t('common.cancel')}</Button> <Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>取消</Button>
<Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={createService}>{t('common.create')}</Button> <Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={createService}>创建</Button>
</div> </div>
</div> </div>
)} )}
@@ -515,7 +513,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
<Plus className="h-3 w-3 mr-1" />创建 Ingress <Plus className="h-3 w-3 mr-1" />创建 Ingress
</Button> </Button>
</div> </div>
<p className="text-xs dg-text-muted mt-1">{t('kubernetes.deploymenteditservice.s847cc9')}</p> <p className="text-xs dg-text-muted mt-1">backend 指向关联 Service 的 Ingress 自动高亮</p>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="pt-0">
{ingresses.length === 0 ? ( {ingresses.length === 0 ? (
@@ -533,13 +531,13 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
{matched ? <CheckCircle className="h-4 w-4 dg-text-purple" /> : <GitBranch className="h-4 w-4 dg-text-muted" />} {matched ? <CheckCircle className="h-4 w-4 dg-text-purple" /> : <GitBranch className="h-4 w-4 dg-text-muted" />}
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{ing.name}</span> <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{ing.name}</span>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{ing.className}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{ing.className}</Badge>
{matched && <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-[10px]">{t('kubernetes.deploymenteditservice.s1c3cf7')}</Badge>} {matched && <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-[10px]">关联</Badge>}
<Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green ml-auto" <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green ml-auto"
onClick={() => setVisualEditor({ resource: 'ingresses', name: ing.name })}> onClick={() => setVisualEditor({ resource: 'ingresses', name: ing.name })}>
<Pencil className="h-3 w-3 mr-1" />编辑 <Pencil className="h-3 w-3 mr-1" />编辑
</Button> </Button>
<Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red" <Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
title=t('kubernetes.ingress.deleteIngress') onClick={() => deleteResource('ingress', ing.name)}> title="删除 Ingress" onClick={() => deleteResource('ingress', ing.name)}>
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
</Button> </Button>
</div> </div>
@@ -571,7 +569,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
</div> </div>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<div> <div>
<Label className="dg-text-muted text-[11px]">{t('common.name')}</Label> <Label className="dg-text-muted text-[11px]">名称</Label>
<Input value={ingForm.name} onChange={e => setIngForm(s => ({ ...s, name: e.target.value }))} <Input value={ingForm.name} onChange={e => setIngForm(s => ({ ...s, name: e.target.value }))}
placeholder={`${deploymentName}-ingress`} placeholder={`${deploymentName}-ingress`}
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
@@ -583,7 +581,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div> </div>
<div> <div>
<Label className="dg-text-muted text-[11px]">{t('kubernetes.deploymenteditservice.s4d9e8d')}</Label> <Label className="dg-text-muted text-[11px]">host (域名)</Label>
<Input value={ingForm.host} onChange={e => setIngForm(s => ({ ...s, host: e.target.value }))} <Input value={ingForm.host} onChange={e => setIngForm(s => ({ ...s, host: e.target.value }))}
placeholder="app.example.com" placeholder="app.example.com"
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
@@ -595,14 +593,14 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div> </div>
<div> <div>
<Label className="dg-text-muted text-[11px]">{t('kubernetes.deploymenteditservice.sef5625')}</Label> <Label className="dg-text-muted text-[11px]">Service 端口</Label>
<Input type="number" value={ingForm.svcPort} onChange={e => setIngForm(s => ({ ...s, svcPort: e.target.value }))} <Input type="number" value={ingForm.svcPort} onChange={e => setIngForm(s => ({ ...s, svcPort: e.target.value }))}
className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div> </div>
</div> </div>
<div className="flex justify-end gap-2 pt-1"> <div className="flex justify-end gap-2 pt-1">
<Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>{t('common.cancel')}</Button> <Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={() => setShowCreate(null)}>取消</Button>
<Button size="sm" className="h-7 bg-purple-600 hover:bg-purple-700 text-xs" onClick={createIngress}>{t('common.create')}</Button> <Button size="sm" className="h-7 bg-purple-600 hover:bg-purple-700 text-xs" onClick={createIngress}>创建</Button>
</div> </div>
</div> </div>
)} )}
@@ -621,7 +619,7 @@ export function DeploymentEditService({ clusterCode, namespace, deploymentName,
)} )}
<div className="flex justify-end gap-2 pt-2"> <div className="flex justify-end gap-2 pt-2">
<Button size="sm" variant="outline" className="h-7 text-xs border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>{t('kubernetes.deploymenteditservice.s3a7752')}</Button> <Button size="sm" variant="outline" className="h-7 text-xs border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>返回查看</Button>
</div> </div>
</div> </div>
); );
@@ -28,8 +28,6 @@ import {
emptyMountRow, emptyMountRow,
} from './deployment-volume-utils'; } from './deployment-volume-utils';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
interface Props { interface Props {
clusterCode: string; clusterCode: string;
@@ -41,12 +39,12 @@ interface Props {
} }
const VOLUME_TYPES: { key: VolumeForm['type']; label: string; icon: typeof HardDrive; color: string }[] = [ const VOLUME_TYPES: { key: VolumeForm['type']; label: string; icon: typeof HardDrive; color: string }[] = [
{ key: 'persistentVolumeClaim', label: i18n.t('kubernetes.deploymenteditstorage.s18c900'), icon: Database, color: 'dg-text-green' }, { key: 'persistentVolumeClaim', label: '存储卷声明', icon: Database, color: 'dg-text-green' },
{ key: 'emptyDir', label: i18n.t('kubernetes.deploymenteditstorage.s5449b2'), icon: Disc, color: 'dg-text-secondary' }, { key: 'emptyDir', label: '临时目录(EmptyDir)', icon: Disc, color: 'dg-text-secondary' },
{ key: 'hostPath', label: 'HostPath', icon: HardDrive, color: 'dg-text-yellow' }, { key: 'hostPath', label: 'HostPath', icon: HardDrive, color: 'dg-text-yellow' },
{ key: 'nfs', label: 'NFS', icon: Server, color: 'dg-text-purple' }, { key: 'nfs', label: 'NFS', icon: Server, color: 'dg-text-purple' },
{ key: 'configMap', label: i18n.t('kubernetes.deploymenteditstorage.s0986a6'), icon: File, color: 'dg-text-blue' }, { key: 'configMap', label: '配置字典', icon: File, color: 'dg-text-blue' },
{ key: 'secret', label: i18n.t('kubernetes.deploymenteditstorage.sc09936'), icon: Lock, color: 'text-rose-400' }, { key: 'secret', label: '密文', icon: Lock, color: 'text-rose-400' },
]; ];
const SELECTABLE_TYPES = new Set(VOLUME_TYPES.map((t) => t.key)); const SELECTABLE_TYPES = new Set(VOLUME_TYPES.map((t) => t.key));
@@ -54,7 +52,6 @@ const SELECTABLE_TYPES = new Set(VOLUME_TYPES.map((t) => t.key));
type CreateResourceKind = 'configmaps' | 'secrets' | 'pvcs'; type CreateResourceKind = 'configmaps' | 'secrets' | 'pvcs';
export function DeploymentEditStorage({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: Props) { export function DeploymentEditStorage({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: Props) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [loading, setLoading] = useState(!manifest); const [loading, setLoading] = useState(!manifest);
@@ -131,20 +128,20 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
const save = async () => { const save = async () => {
for (const entry of entries) { for (const entry of entries) {
if (!entry.volume.name.trim()) { if (!entry.volume.name.trim()) {
toast({ title: t('kubernetes.deploymenteditstorage.s5b59d2'), variant: 'destructive' }); toast({ title: '请填写数据卷名称', variant: 'destructive' });
return; return;
} }
if (!formToVolume(entry.volume)) { if (!formToVolume(entry.volume)) {
const hint = entry.volume.type === 'configMap' ? t('kubernetes.deploymenteditstorage.s2a6856') const hint = entry.volume.type === 'configMap' ? '请选择 ConfigMap'
: entry.volume.type === 'secret' ? t('kubernetes.deploymenteditstorage.s1f31e4') : entry.volume.type === 'secret' ? '请选择 Secret'
: entry.volume.type === 'persistentVolumeClaim' ? t('kubernetes.deploymenteditstorage.sba9fc6') : entry.volume.type === 'persistentVolumeClaim' ? '请选择 PVC'
: t('kubernetes.deploymenteditstorage.s03480a'); : '的类型必填项';
toast({ title: t('kubernetes.deploymenteditstorage.se542a6'), description: t('kubernetes.deploymenteditstorage.s3152b4', { entry.volume.name: entry.volume.name, hint: hint }), variant: 'destructive' }); toast({ title: '数据卷配置不完整', description: `请为「${entry.volume.name}」${hint}`, variant: 'destructive' });
return; return;
} }
const validMounts = entry.mounts.filter((m) => m.mountPath.trim()); const validMounts = entry.mounts.filter((m) => m.mountPath.trim());
if (validMounts.length === 0) { if (validMounts.length === 0) {
toast({ title: t('kubernetes.deploymenteditstorage.s24b5b9'), description: t('kubernetes.deploymenteditstorage.s5532a8', { entry.volume.name: entry.volume.name }), variant: 'destructive' }); toast({ title: '请填写挂载路径', description: `数据卷「${entry.volume.name}」需至少挂载到一个容器`, variant: 'destructive' });
return; return;
} }
} }
@@ -153,10 +150,10 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
const { volumes, mounts } = volumeEntriesToStorage(entries); const { volumes, mounts } = volumeEntriesToStorage(entries);
const base = applyStorageToManifest(rawManifest, volumes, mounts, passthroughVolumes); const base = applyStorageToManifest(rawManifest, volumes, mounts, passthroughVolumes);
await saveDeploymentManifest(clusterCode, namespace, deploymentName, base); await saveDeploymentManifest(clusterCode, namespace, deploymentName, base);
toast({ title: t('kubernetes.deploymenteditstorage.sa8cd7d'), description: t('kubernetes.deploymenteditstorage.s1952a7', { deploymentName: deploymentName }) }); toast({ title: '存储配置已保存', description: `${deploymentName} 更新已提交` });
onSaved(base); onSaved(base);
} catch (e) { } catch (e) {
toast({ title: t('common.saveFailed'), description: (e as Error)?.message || String(e), variant: 'destructive' }); toast({ title: '保存失败', description: (e as Error)?.message || String(e), variant: 'destructive' });
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
@@ -165,7 +162,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-12 text-center"> <CardContent className="p-12 text-center">
<Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" /> <Loader2 className="h-6 w-6 animate-spin mx-auto dg-text-muted" />
<p className="dg-text-muted mt-3 text-sm">{t('common.loading')}</p> <p className="dg-text-muted mt-3 text-sm">加载中...</p>
</CardContent> </CardContent>
</Card> </Card>
); );
@@ -174,7 +171,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
if (!manifest) { if (!manifest) {
return ( return (
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-8 text-center dg-text-muted">{t('kubernetes.deploymenteditstorage.s800b9f')}</CardContent> <CardContent className="p-8 text-center dg-text-muted">未获取到 manifest 数据,请使用 YAML 编辑模式。</CardContent>
</Card> </Card>
); );
} }
@@ -201,7 +198,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
数据卷 数据卷
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{entries.length}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{entries.length}</Badge>
</CardTitle> </CardTitle>
<p className="text-[11px] dg-text-muted mt-1">{t('kubernetes.deploymenteditstorage.s1e0b32')}</p> <p className="text-[11px] dg-text-muted mt-1">定义数据卷,并将其挂载到工作负载的容器中</p>
</div> </div>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs shrink-0" onClick={addEntry}> <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs shrink-0" onClick={addEntry}>
<Plus className="h-3 w-3 mr-1" />添加数据卷 <Plus className="h-3 w-3 mr-1" />添加数据卷
@@ -225,7 +222,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
<div className="p-3 space-y-2.5 border-b border-[var(--dg-border)]/80"> <div className="p-3 space-y-2.5 border-b border-[var(--dg-border)]/80">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<VIcon className={`h-4 w-4 ${vtype?.color || 'dg-text-secondary'}`} /> <VIcon className={`h-4 w-4 ${vtype?.color || 'dg-text-secondary'}`} />
<span className="text-xs dg-text-secondary shrink-0">{t('kubernetes.deploymenteditstorage.sa3119d')}</span> <span className="text-xs dg-text-secondary shrink-0">数据卷名称</span>
<Input <Input
value={vol.name} value={vol.name}
onChange={(e) => { onChange={(e) => {
@@ -236,7 +233,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
if (vol.type === 'persistentVolumeClaim' && !vol.pvcName) patch.pvcName = name; if (vol.type === 'persistentVolumeClaim' && !vol.pvcName) patch.pvcName = name;
updateVolume(i, patch); updateVolume(i, patch);
}} }}
placeholder=t('kubernetes.deploymenteditstorage.s478bfa') placeholder="如 app-logs / fluent-bit-config"
className="h-8 w-44 dg-input text-sm font-mono" className="h-8 w-44 dg-input text-sm font-mono"
/> />
{/* 原生 select,避免 Radix Select 在 overflow 容器内无法下拉 // Logan.Li */} {/* 原生 select,避免 Radix Select 在 overflow 容器内无法下拉 // Logan.Li */}
@@ -298,7 +295,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
onChange={(e) => updateMount(i, mi, { containerName: e.target.value })} onChange={(e) => updateMount(i, mi, { containerName: e.target.value })}
className="h-8 min-w-[140px] max-w-[280px] bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-md text-sm text-[var(--dg-text-primary)] px-2 font-medium truncate" className="h-8 min-w-[140px] max-w-[280px] bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-md text-sm text-[var(--dg-text-primary)] px-2 font-medium truncate"
> >
{containers.length === 0 && <option value="">{t('kubernetes.deploymenteditstorage.s327178')}</option>} {containers.length === 0 && <option value="">(无容器)</option>}
{containers.map((cn) => <option key={cn} value={cn}>{cn}</option>)} {containers.map((cn) => <option key={cn} value={cn}>{cn}</option>)}
</select> </select>
<div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-0.5 border border-[var(--dg-border)]"> <div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] rounded-lg p-0.5 border border-[var(--dg-border)]">
@@ -314,7 +311,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
<Input <Input
value={mount.mountPath} value={mount.mountPath}
onChange={(e) => updateMount(i, mi, { mountPath: e.target.value })} onChange={(e) => updateMount(i, mi, { mountPath: e.target.value })}
placeholder=t('kubernetes.deploymenteditstorage.seb88e4') placeholder="挂载路径 /bitcloud/app/.../logs"
className="h-8 flex-1 min-w-[200px] dg-input text-sm font-mono" className="h-8 flex-1 min-w-[200px] dg-input text-sm font-mono"
/> />
{entry.mounts.length > 1 && ( {entry.mounts.length > 1 && (
@@ -324,11 +321,11 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
)} )}
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[11px] dg-text-muted shrink-0">{t('kubernetes.deploymenteditstorage.sf4b25a')}</span> <span className="text-[11px] dg-text-muted shrink-0">子路径 subPath</span>
<Input <Input
value={mount.subPath} value={mount.subPath}
onChange={(e) => updateMount(i, mi, { subPath: e.target.value })} onChange={(e) => updateMount(i, mi, { subPath: e.target.value })}
placeholder=t('kubernetes.deploymenteditstorage.s68ab2e') placeholder="如 config.yaml(挂载单文件时填写)"
className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono" className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono"
/> />
</div> </div>
@@ -342,7 +339,7 @@ export function DeploymentEditStorage({ clusterCode, namespace, deploymentName,
</Card> </Card>
<div className="flex justify-end gap-2 pt-2"> <div className="flex justify-end gap-2 pt-2">
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>{t('common.cancel')}</Button> <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onCancel}>取消</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}> <Button className="bg-blue-600 hover:bg-blue-700" disabled={saving} onClick={save}>
{saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />} {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
保存 保存
@@ -25,10 +25,8 @@ import type { DeploymentViewProps, SvcItem, IngItem, EventItem } from './deploym
export type { DeploymentViewProps } from './deployment-view/types'; export type { DeploymentViewProps } from './deployment-view/types';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function DeploymentView(props: DeploymentViewProps) { export function DeploymentView(props: DeploymentViewProps) {
const { t } = useTranslation();
const { clusterCode, namespace, deployment, pods, revisions, onRefresh } = props; const { clusterCode, namespace, deployment, pods, revisions, onRefresh } = props;
const { toast } = useToast(); const { toast } = useToast();
const confirm = useConfirm(); const confirm = useConfirm();
@@ -140,19 +138,19 @@ export function DeploymentView(props: DeploymentViewProps) {
const handleRollback = async (rev: JsonData) => { const handleRollback = async (rev: JsonData) => {
const revision = rev.revision ?? rev.revision_number ?? rev.number; const revision = rev.revision ?? rev.revision_number ?? rev.number;
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.deploymentview.s6a374e'), title: '回滚版本',
description: t('kubernetes.deploymentview.s01eec9', { revision: revision }), description: `确认回滚到修订版本 #${revision}?`,
confirmText: t('common.rollback'), confirmText: '回滚',
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
setRollbackLoading(revision); setRollbackLoading(revision);
try { try {
await kubernetesApi.rollbackDeployment(clusterCode, namespace, deployment.name, Number(revision)); await kubernetesApi.rollbackDeployment(clusterCode, namespace, deployment.name, Number(revision));
toast({ title: t('kubernetes.deploymentview.s754d92'), description: t('kubernetes.deploymentview.s817a27', { revision: revision }) }); toast({ title: '回滚已下发', description: `正在回滚到 #${revision}` });
onRefresh(); onRefresh();
} catch (e) { } catch (e) {
toast({ title: t('pipeline.rollbackFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '回滚失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setRollbackLoading(null); } } finally { setRollbackLoading(null); }
}; };
@@ -161,19 +159,19 @@ export function DeploymentView(props: DeploymentViewProps) {
setScaleLoading(true); setScaleLoading(true);
try { try {
await kubernetesApi.scaleDeployment(clusterCode, namespace, deployment.name, scaleValue); await kubernetesApi.scaleDeployment(clusterCode, namespace, deployment.name, scaleValue);
toast({ title: t('kubernetes.deploymentview.sb9c9e0'), description: t('kubernetes.deploymentview.sb8f328', { scaleValue: scaleValue }) }); toast({ title: '伸缩已提交', description: `副本数 → ${scaleValue}` });
onRefresh(); onRefresh();
} catch (e) { } catch (e) {
toast({ title: t('kubernetes.msg.scaleFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '伸缩失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setScaleLoading(false); } } finally { setScaleLoading(false); }
}; };
const TABS = [ const TABS = [
{ key: 'pods', label: t('kubernetes.deploymentview.s479692'), icon: Container, count: pods.length }, { key: 'pods', label: '容器组', icon: Container, count: pods.length },
{ key: 'services', label: t('kubernetes.deploymentview.s706804'), icon: Network, count: services.length }, { key: 'services', label: '访问方式', icon: Network, count: services.length },
{ key: 'events', label: t('menu.events'), icon: Activity, count: events.length }, { key: 'events', label: '事件', icon: Activity, count: events.length },
{ key: 'scale', label: t('kubernetes.deploymentview.s3b291d'), icon: Plus }, { key: 'scale', label: '容器伸缩', icon: Plus },
{ key: 'history', label: t('kubernetes.deployment.revisions'), icon: History, count: revisions.length }, { key: 'history', label: '历史版本', icon: History, count: revisions.length },
]; ];
return ( return (
@@ -182,24 +180,24 @@ export function DeploymentView(props: DeploymentViewProps) {
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 text-sm"> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 text-sm">
<InfoItem label=t('common.status') value={ <InfoItem label="状态" value={
<Badge style={{ background: `${isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange}22`, color: isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange, border: `1px solid ${isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange}44` }}> <Badge style={{ background: `${isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange}22`, color: isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange, border: `1px solid ${isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange}44` }}>
{isHealthy ? 'Running' : 'Updating'} {isHealthy ? 'Running' : 'Updating'}
</Badge> </Badge>
} /> } />
<InfoItem label=t('kubernetes.deploymentview.s0428b3') value={<span className="font-mono">{ready}/{total}</span>} /> <InfoItem label="副本" value={<span className="font-mono">{ready}/{total}</span>} />
<InfoItem label=t('kubernetes.deploymentview.s669145') value={deployment?.strategy || 'RollingUpdate'} /> <InfoItem label="策略" value={deployment?.strategy || 'RollingUpdate'} />
{pods[0] && ( {pods[0] && (
<> <>
<InfoItem label=t('kubernetes.pod.nodeName') value={ <InfoItem label="所在节点" value={
<button className="text-[var(--dg-blue)] hover:underline" onClick={() => window.open(`/kubernetes/${clusterCode}/nodes/${pods[0].node_name || pods[0].node}`, '_blank')}> <button className="text-[var(--dg-blue)] hover:underline" onClick={() => window.open(`/kubernetes/${clusterCode}/nodes/${pods[0].node_name || pods[0].node}`, '_blank')}>
{pods[0].node_name || pods[0].node || '-'} {pods[0].node_name || pods[0].node || '-'}
</button> </button>
} /> } />
<InfoItem label=t('kubernetes.deploymentview.s6d2d95') value={<span className="font-mono">{pods[0].ip || pods[0].pod_ip || '-'}</span>} /> <InfoItem label="容器组 IP" value={<span className="font-mono">{pods[0].ip || pods[0].pod_ip || '-'}</span>} />
</> </>
)} )}
<InfoItem label=t('common.createdAt') value={formatK8sTime(deployment?.created_at || deployment?.creationTimestamp)} /> <InfoItem label="创建时间" value={formatK8sTime(deployment?.created_at || deployment?.creationTimestamp)} />
</div> </div>
{pods.length === 1 && ( {pods.length === 1 && (
<div className="mt-3 pt-3 border-t border-[var(--dg-border)]"> <div className="mt-3 pt-3 border-t border-[var(--dg-border)]">
@@ -245,7 +243,7 @@ export function DeploymentView(props: DeploymentViewProps) {
{scaleValue !== total && ( {scaleValue !== total && (
<Button size="sm" className="h-7 text-xs bg-[var(--dg-blue)] hover:bg-[var(--dg-blue-hover)]" <Button size="sm" className="h-7 text-xs bg-[var(--dg-blue)] hover:bg-[var(--dg-blue-hover)]"
disabled={scaleLoading} onClick={handleScale}> disabled={scaleLoading} onClick={handleScale}>
{scaleLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : t('common.apply')} {scaleLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : '应用'}
</Button> </Button>
)} )}
</div> </div>
@@ -40,12 +40,10 @@ import { CREATE_DEPLOYMENT_SLUG, isCreateDeployment } from './deployment-constan
import { extractContainers } from './deployment-detail/helpers'; import { extractContainers } from './deployment-detail/helpers';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import type { ActionModal, DeploymentWorkloadProps } from './deployment-workload/types'; import type { ActionModal, DeploymentWorkloadProps } from './deployment-workload/types';
import { useTranslation } from 'react-i18next';
export type { DeploymentWorkloadProps, WorkloadMode } from './deployment-workload/types'; export type { DeploymentWorkloadProps, WorkloadMode } from './deployment-workload/types';
export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mode, onBack, onModeChange }: DeploymentWorkloadProps) { export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mode, onBack, onModeChange }: DeploymentWorkloadProps) {
const { t } = useTranslation();
const isCreate = isCreateDeployment(deploymentName); const isCreate = isCreateDeployment(deploymentName);
const navigate = useNavigate(); const navigate = useNavigate();
const { toast } = useToast(); const { toast } = useToast();
@@ -119,7 +117,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
setRevisions(toArray(revRes)); setRevisions(toArray(revRes));
} catch (e) { } catch (e) {
console.error(t('kubernetes.deploymentworkload.sb46ea9'), e); console.error('加载详情失败:', e);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -134,7 +132,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
const { manifest: parsed } = await parseEditableManifest(yamlText); const { manifest: parsed } = await parseEditableManifest(yamlText);
setManifest(parsed || deployment); setManifest(parsed || deployment);
} catch (e) { } catch (e) {
console.warn(t('kubernetes.deploymentworkload.sce123f'), e); console.warn('加载 manifest 失败(编辑功能降级):', e);
setManifest(deployment); setManifest(deployment);
} }
}, [clusterCode, namespace, deploymentName, deployment]); }, [clusterCode, namespace, deploymentName, deployment]);
@@ -162,10 +160,10 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
setActionLoading('scale'); setActionLoading('scale');
try { try {
await kubernetesApi.scaleDeployment(clusterCode, namespace, deploymentName, newReplicas); await kubernetesApi.scaleDeployment(clusterCode, namespace, deploymentName, newReplicas);
toast({ title: t('kubernetes.deploymentworkload.s0b3ea1'), description: t('kubernetes.deploymentworkload.sacbcbd', { newReplicas: newReplicas }) }); toast({ title: '扩缩容成功', description: `副本数已设置为 ${newReplicas}` });
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('common.operationFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '操作失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
@@ -173,37 +171,37 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
setActionLoading('scale'); setActionLoading('scale');
try { try {
await kubernetesApi.scaleDeployment(clusterCode, namespace, deploymentName, scaleValue); await kubernetesApi.scaleDeployment(clusterCode, namespace, deploymentName, scaleValue);
toast({ title: t('kubernetes.msg.scaleSuccess'), description: t('kubernetes.deploymentworkload.s1755d8', { scaleValue: scaleValue }) }); toast({ title: '伸缩成功', description: `副本数已设置为 ${scaleValue}` });
setModal(null); setModal(null);
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('common.operationFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '操作失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
const handleRestart = async () => { const handleRestart = async () => {
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.deployment.restart'), title: '滚动重启',
description: t('kubernetes.deploymentworkload.s0703ab', { deploymentName: deploymentName }), description: `确认滚动重启 Deployment "${deploymentName}"?`,
confirmText: t('common.reboot'), confirmText: '重启',
}); });
if (!ok) return; if (!ok) return;
setActionLoading('restart'); setActionLoading('restart');
try { try {
await kubernetesApi.restartDeployment(clusterCode, namespace, deploymentName); await kubernetesApi.restartDeployment(clusterCode, namespace, deploymentName);
toast({ title: t('kubernetes.deploymentworkload.s68a700'), description: t('kubernetes.deploymentworkload.sd18761') }); toast({ title: '重启指令已下发', description: 'Deployment 正在滚动重启' });
setTimeout(loadData, 1500); setTimeout(loadData, 1500);
} catch (e) { } catch (e) {
toast({ title: t('kubernetes.deployment.restartFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '重启失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
const handleTogglePause = async () => { const handleTogglePause = async () => {
const isPaused = !!deployment?.paused; const isPaused = !!deployment?.paused;
const action = isPaused ? t('common.resume') : t('common.pause'); const action = isPaused ? '恢复' : '暂停';
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.deploymentworkload.s704225', { action: action }), title: `${action}滚动更新`,
description: t('kubernetes.deploymentworkload.se0945f', { action: action, deploymentName: deploymentName }), description: `确认${action} Deployment "${deploymentName}" 的滚动更新?`,
confirmText: action, confirmText: action,
}); });
if (!ok) return; if (!ok) return;
@@ -214,10 +212,10 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
} else { } else {
await kubernetesApi.pauseDeployment(clusterCode, namespace, deploymentName); await kubernetesApi.pauseDeployment(clusterCode, namespace, deploymentName);
} }
toast({ title: t('kubernetes.deploymentworkload.s408125', { action: action }), description: t('kubernetes.deploymentworkload.s6c1899', { action: action }) }); toast({ title: `${action}成功`, description: `Deployment 滚动更新已${action}` });
setTimeout(loadData, 1000); setTimeout(loadData, 1000);
} catch (e) { } catch (e) {
toast({ title: t('kubernetes.deploymentworkload.s74fa4c', { action: action }), description: e?.message || String(e), variant: 'destructive' }); toast({ title: `${action}失败`, description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
@@ -234,11 +232,11 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
await kubernetesApi.updateDeploymentImage( await kubernetesApi.updateDeploymentImage(
clusterCode, namespace, deploymentName, newImage, cicdContainerName || undefined, clusterCode, namespace, deploymentName, newImage, cicdContainerName || undefined,
); );
toast({ title: t('kubernetes.deploymentworkload.s6df3c3'), description: t('kubernetes.deploymentworkload.sa982c3', { newImage: newImage }) }); toast({ title: '镜像更新成功', description: `正在滚动更新为 ${newImage}` });
setModal(null); setModal(null);
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('alert.updateFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '更新失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
@@ -251,11 +249,11 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
const url = `${baseUrl}/api/v1/kubernetes/${clusterCode}/namespace/${namespace}/deployments/${deploymentName}`; const url = `${baseUrl}/api/v1/kubernetes/${clusterCode}/namespace/${namespace}/deployments/${deploymentName}`;
const resp = await fetch(url, { method: 'DELETE', headers: { Authorization: `Bearer ${tk}` } }); const resp = await fetch(url, { method: 'DELETE', headers: { Authorization: `Bearer ${tk}` } });
if (!resp.ok) throw new Error(`HTTP ${resp.status}`); if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
toast({ title: t('common.deleteSuccess'), description: t('kubernetes.deploymentworkload.saaac2f', { deploymentName: deploymentName }) }); toast({ title: '删除成功', description: `${deploymentName} 已删除` });
setModal(null); setModal(null);
setTimeout(() => navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/deployments`), 800); setTimeout(() => navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/deployments`), 800);
} catch (e) { } catch (e) {
toast({ title: t('common.deleteFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '删除失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(''); } } finally { setActionLoading(''); }
}; };
@@ -271,24 +269,24 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
const handleDeletePod = async (pod: any) => { const handleDeletePod = async (pod: any) => {
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.pod.deletePod'), title: '删除 Pod',
description: t('kubernetes.deploymentworkload.s96e132', { pod.name: pod.name }), description: `确认删除 Pod "${pod.name}"?操作不可恢复。`,
confirmText: t('common.delete'), confirmText: '删除',
}); });
if (!ok) return; if (!ok) return;
try { try {
await kubernetesApi.deletePod(clusterCode, namespace, pod.name); await kubernetesApi.deletePod(clusterCode, namespace, pod.name);
toast({ title: t('kubernetes.pod.deleted') }); toast({ title: 'Pod 已删除' });
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('common.deleteFailed'), description: (e as any)?.message || String(e), variant: 'destructive' }); toast({ title: '删除失败', description: (e as any)?.message || String(e), variant: 'destructive' });
} }
}; };
// ============ 渲染 // Logan.Li ============ // ============ 渲染 // Logan.Li ============
if (loading) { if (loading) {
return ( return (
<PageShell variant="workspace" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} loading loadingLabel=t('kubernetes.deploymentworkload.seb300b') actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />{t('common.back')}</Button>}> <PageShell variant="workspace" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} loading loadingLabel="加载 Deployment..." actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
{null} {null}
</PageShell> </PageShell>
); );
@@ -296,7 +294,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
if (!deployment && !isCreate) { if (!deployment && !isCreate) {
return ( return (
<PageShell variant="default" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />{t('common.back')}</Button>}> <PageShell variant="default" title={deploymentName} subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
<Card className="dg-card"><CardContent className="p-12 text-center"><XCircle className="h-8 w-8 mx-auto dg-text-red" /><p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p></CardContent></Card> <Card className="dg-card"><CardContent className="p-12 text-center"><XCircle className="h-8 w-8 mx-auto dg-text-red" /><p className="dg-text-secondary mt-3">未找到 Deployment: {deploymentName}</p></CardContent></Card>
</PageShell> </PageShell>
); );
@@ -308,7 +306,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
if (name) navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/Deployment/${name}`); if (name) navigate(`/kubernetes/${clusterCode}/namespace/${namespace}/workload/view/Deployment/${name}`);
}; };
return ( return (
<PageShell variant="workspace" title=t('kubernetes.deploymentworkload.se2c85a') subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />{t('common.back')}</Button>}> <PageShell variant="workspace" title="新建 Deployment" subtitle={`${clusterCode} / ${namespace}`} actions={<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>}>
<EditModeContainer clusterCode={clusterCode} namespace={namespace} deploymentName={CREATE_DEPLOYMENT_SLUG} manifest={manifest} isCreate onSaved={handleCreated} onCancel={onBack} /> <EditModeContainer clusterCode={clusterCode} namespace={namespace} deploymentName={CREATE_DEPLOYMENT_SLUG} manifest={manifest} isCreate onSaved={handleCreated} onCancel={onBack} />
</PageShell> </PageShell>
); );
@@ -320,8 +318,8 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
const modeTabs = ( const modeTabs = (
<div className="inline-flex rounded-md border border-[var(--dg-border)] overflow-hidden"> <div className="inline-flex rounded-md border border-[var(--dg-border)] overflow-hidden">
<button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'view' ? 'bg-[var(--dg-bg-active)] text-[var(--dg-text-primary)]' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('view')}>{t('common.view')}</button> <button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'view' ? 'bg-[var(--dg-bg-active)] text-[var(--dg-text-primary)]' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('view')}>查看</button>
<button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'edit' ? 'bg-blue-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('edit')}>{t('common.edit')}</button> <button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'edit' ? 'bg-blue-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('edit')}>编辑</button>
<button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-emerald-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('yaml')}>YAML</button> <button className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-emerald-600 text-white' : 'bg-transparent dg-text-secondary hover:text-[var(--dg-text-primary)]'}`} onClick={() => onModeChange('yaml')}>YAML</button>
</div> </div>
); );
@@ -330,19 +328,19 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
<PageShell <PageShell
variant="workspace" variant="workspace"
title={deploymentName} title={deploymentName}
subtitle={t('kubernetes.deploymentworkload.s804752', { clusterCode: clusterCode, namespace: namespace, deployment?.image || '-': deployment?.image || '-' })} subtitle={`${clusterCode} / ${namespace} · Deployment · 镜像: ${deployment?.image || '-'}`}
actions={( actions={(
<> <>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />{t('common.back')}</Button> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={onBack}><ArrowLeft className="h-4 w-4 mr-1" />返回</Button>
{modeTabs} {modeTabs}
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}><RefreshCw className="h-4 w-4" /></Button> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}><RefreshCw className="h-4 w-4" /></Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { setNewImage(deployment?.image || ''); setModal({ kind: 'image' }); }}><ImageIcon className="h-3.5 w-3.5 mr-1" />{t('kubernetes.deploymentworkload.sf2e020')}</Button> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { setNewImage(deployment?.image || ''); setModal({ kind: 'image' }); }}><ImageIcon className="h-3.5 w-3.5 mr-1" />调整镜像</Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleRestart}><RotateCw className="h-3.5 w-3.5 mr-1" />{t('common.reboot')}</Button> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleRestart}><RotateCw className="h-3.5 w-3.5 mr-1" />重启</Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" disabled={!!actionLoading} onClick={handleTogglePause}> <Button variant="outline" size="sm" className="dg-btn-secondary" disabled={!!actionLoading} onClick={handleTogglePause}>
{deployment?.paused ? <><Play className="h-3.5 w-3.5 mr-1 dg-text-green" />{t('common.resume')}</> : <><Pause className="h-3.5 w-3.5 mr-1 dg-text-orange" />{t('common.pause')}</>} {deployment?.paused ? <><Play className="h-3.5 w-3.5 mr-1 dg-text-green" />恢复</> : <><Pause className="h-3.5 w-3.5 mr-1 dg-text-orange" />暂停</>}
</Button> </Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleCICD}><Rocket className="h-3.5 w-3.5 mr-1 dg-text-purple" />CI/CD</Button> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={handleCICD}><Rocket className="h-3.5 w-3.5 mr-1 dg-text-purple" />CI/CD</Button>
<Button variant="outline" size="sm" className="dg-btn-danger" onClick={() => setModal({ kind: 'delete' })}><Trash2 className="h-3.5 w-3.5 mr-1" />{t('common.delete')}</Button> <Button variant="outline" size="sm" className="dg-btn-danger" onClick={() => setModal({ kind: 'delete' })}><Trash2 className="h-3.5 w-3.5 mr-1" />删除</Button>
</> </>
)} )}
> >
@@ -352,7 +350,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
<Badge className={isHealthy ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-amber-500/20 dg-text-yellow border-amber-500/30'}> <Badge className={isHealthy ? 'bg-emerald-500/20 dg-text-green border-emerald-500/30' : 'bg-amber-500/20 dg-text-yellow border-amber-500/30'}>
{isHealthy ? <CheckCircle className="h-3 w-3 mr-1" /> : <AlertTriangle className="h-3 w-3 mr-1" />}{ready}/{total} {isHealthy ? <CheckCircle className="h-3 w-3 mr-1" /> : <AlertTriangle className="h-3 w-3 mr-1" />}{ready}/{total}
</Badge> </Badge>
{deployment?.paused && <Badge className="bg-orange-500/20 dg-text-orange border-orange-500/30"><Pause className="h-3 w-3 mr-1" />{t('kubernetes.deploymentworkload.s8be252')}</Badge>} {deployment?.paused && <Badge className="bg-orange-500/20 dg-text-orange border-orange-500/30"><Pause className="h-3 w-3 mr-1" />已暂停更新</Badge>}
</div> </div>
{/* ============ 主体:view / edit / yaml ============ */} {/* ============ 主体:view / edit / yaml ============ */}
@@ -379,7 +377,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
resource="deployments" resource="deployments"
name={deploymentName} name={deploymentName}
inline inline
resourceHint=t('kubernetes.deploymentworkload.s239604') resourceHint="含关联 Service"
loadYamlFn={loadBundleYaml} loadYamlFn={loadBundleYaml}
saveYamlFn={saveBundleYaml} saveYamlFn={saveBundleYaml}
onSaved={loadData} onSaved={loadData}
@@ -404,7 +402,7 @@ export function DeploymentWorkload({ clusterCode, namespace, deploymentName, mod
namespace={namespace} namespace={namespace}
resource="deployments" resource="deployments"
name={deploymentName} name={deploymentName}
resourceHint=t('kubernetes.deploymentworkload.s239604') resourceHint="含关联 Service"
loadYamlFn={loadBundleYaml} loadYamlFn={loadBundleYaml}
saveYamlFn={saveBundleYaml} saveYamlFn={saveBundleYaml}
onClose={() => setModal(null)} onClose={() => setModal(null)}
@@ -4,9 +4,8 @@ import { useState, useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Loader2 } from 'lucide-react'; import { Loader2 } from 'lucide-react';
import {
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import i18n from '@/i18n'; import {
type NormalizedEvent, type NormalizedEvent,
formatEventRepeatSpan, formatEventRepeatSpan,
formatEventTimeCell, formatEventTimeCell,
@@ -32,7 +31,7 @@ const MIN_W = '980px';
export function EventTable({ export function EventTable({
events, events,
loading = false, loading = false,
emptyText = i18n.t('k8s.empty.events'), emptyText,
showNamespace = false, showNamespace = false,
scrollHeight = 600, scrollHeight = 600,
}: EventTableProps) { }: EventTableProps) {
@@ -44,8 +43,9 @@ export function EventTable({
const gridCols = showNamespace ? COLS_NS : COLS; const gridCols = showNamespace ? COLS_NS : COLS;
const minWidth = showNamespace ? MIN_W_NS : MIN_W; const minWidth = showNamespace ? MIN_W_NS : MIN_W;
const headers = showNamespace const headers = showNamespace
? [t('kubernetes.eventtable.sc00582'), t('kubernetes.eventtable.s0b2f54'), t('kubernetes.event.eventCount'), t('kubernetes.eventtable.s33e3c0'), t('common.type'), t('kubernetes.event.eventReason'), t('kubernetes.event.eventObject'), t('k8s.column.namespace'), t('common.source'), t('kubernetes.event.eventMessage')] ? [t('k8s.event.colLast'), t('k8s.event.colFirst'), t('k8s.event.colCount'), t('k8s.event.colRepeat'), t('k8s.event.colType'), t('k8s.event.colReason'), t('k8s.event.colObject'), t('k8s.event.colNamespace'), t('k8s.event.colSource'), t('k8s.event.colMessage')]
: [t('kubernetes.eventtable.sc00582'), t('kubernetes.eventtable.s0b2f54'), t('kubernetes.event.eventCount'), t('kubernetes.eventtable.s33e3c0'), t('common.type'), t('kubernetes.event.eventReason'), t('kubernetes.event.eventObject'), t('common.source'), t('kubernetes.event.eventMessage')]; : [t('k8s.event.colLast'), t('k8s.event.colFirst'), t('k8s.event.colCount'), t('k8s.event.colRepeat'), t('k8s.event.colType'), t('k8s.event.colReason'), t('k8s.event.colObject'), t('k8s.event.colSource'), t('k8s.event.colMessage')];
const resolvedEmpty = emptyText || t('k8s.event.empty');
const virtualizer = useVirtualizer({ const virtualizer = useVirtualizer({
count: events.length, count: events.length,
@@ -76,7 +76,7 @@ export function EventTable({
<Loader2 className="h-5 w-5 animate-spin text-[var(--dg-text-muted)]" /> <Loader2 className="h-5 w-5 animate-spin text-[var(--dg-text-muted)]" />
</div> </div>
) : events.length === 0 ? ( ) : events.length === 0 ? (
<div className="flex items-center justify-center text-[var(--dg-text-muted)] py-10">{emptyText}</div> <div className="flex items-center justify-center text-[var(--dg-text-muted)] py-10">{resolvedEmpty}</div>
) : ( ) : (
<div style={{ height: totalHeight, position: 'relative', minWidth }}> <div style={{ height: totalHeight, position: 'relative', minWidth }}>
{virtualRows.map((vr) => { {virtualRows.map((vr) => {
@@ -152,7 +152,7 @@ export function EventTable({
</div> </div>
{isExpanded && e.name && ( {isExpanded && e.name && (
<div className="mt-1 pt-1 border-t border-[var(--dg-border)] text-[10px] text-[var(--dg-text-muted)]"> <div className="mt-1 pt-1 border-t border-[var(--dg-border)] text-[10px] text-[var(--dg-text-muted)]">
事件名: {e.name} {t('k8s.event.nameLabel')} {e.name}
</div> </div>
)} )}
</div> </div>
@@ -166,7 +166,7 @@ export function EventTable({
{/* 行数统计 */} {/* 行数统计 */}
{events.length > 0 && ( {events.length > 0 && (
<div className="text-center py-2 text-xs text-[var(--dg-text-muted)] border-t border-[var(--dg-border)]"> <div className="text-center py-2 text-xs text-[var(--dg-text-muted)] border-t border-[var(--dg-border)]">
共 {events.length} 条事件 {events.length > 500 && t('kubernetes.eventtable.sd0a696')} {t('k8s.event.totalCount', { count: events.length })} {events.length > 500 ? `· ${t('k8s.event.virtualScroll')}` : ''}
</div> </div>
)} )}
</div> </div>
@@ -13,7 +13,6 @@ import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel'; import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface RankItem { name: string; count: number } interface RankItem { name: string; count: number }
@@ -27,14 +26,13 @@ function RankPanel({
onSelect?: (name: string) => void; onSelect?: (name: string) => void;
emptyText?: string; emptyText?: string;
}) { }) {
const { t } = useTranslation();
const max = Math.max(...items.map((i) => i.count), 1); const max = Math.max(...items.map((i) => i.count), 1);
return ( return (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"> <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4"> <CardContent className="p-4">
<h3 className="text-sm font-medium text-[var(--dg-text-primary)] mb-3">{title}</h3> <h3 className="text-sm font-medium text-[var(--dg-text-primary)] mb-3">{title}</h3>
{items.length === 0 ? ( {items.length === 0 ? (
<p className="text-xs text-[var(--dg-text-muted)] py-6 text-center">{emptyText || t('common.noData')}</p> <p className="text-xs text-[var(--dg-text-muted)] py-6 text-center">{emptyText || '暂无数据'}</p>
) : ( ) : (
<div className="space-y-1.5 max-h-[220px] overflow-y-auto pr-1"> <div className="space-y-1.5 max-h-[220px] overflow-y-auto pr-1">
{items.map((item) => { {items.map((item) => {
@@ -69,7 +67,6 @@ function RankPanel({
} }
export default function EventsPage() { export default function EventsPage() {
const { t } = useTranslation();
const { clusterCode } = useParams<{ clusterCode: string }>(); const { clusterCode } = useParams<{ clusterCode: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -163,7 +160,7 @@ export default function EventsPage() {
const filterToolbar = (selectedReason || selectedKind) ? ( const filterToolbar = (selectedReason || selectedKind) ? (
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-2 text-xs">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.eventspage.s841389')}</span> <span className="text-[var(--dg-text-muted)]">筛选:</span>
{selectedReason && ( {selectedReason && (
<button type="button" className="inline-flex items-center gap-1 rounded border border-[var(--dg-border)] px-2 py-0.5 text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]" onClick={() => setSelectedReason('')}> <button type="button" className="inline-flex items-center gap-1 rounded border border-[var(--dg-border)] px-2 py-0.5 text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]" onClick={() => setSelectedReason('')}>
原因 {selectedReason} <X className="h-3 w-3" /> 原因 {selectedReason} <X className="h-3 w-3" />
@@ -180,16 +177,16 @@ export default function EventsPage() {
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('kubernetes.eventspage.s08bf79') title="事件中心"
subtitle={clusterName ? t('kubernetes.eventspage.s49c5d1', { clusterName: clusterName }) : t('kubernetes.eventspage.s6bef2b')} subtitle={clusterName ? `${clusterName} · 集群事件与告警` : '集群事件与告警'}
icon={<Bell className="h-5 w-5" />} icon={<Bell className="h-5 w-5" />}
metrics={!loading ? ( metrics={!loading ? (
<StatStrip <StatStrip
items={[ items={[
{ label: t('kubernetes.eventspage.s0d3047'), value: summary?.total ?? events.length, color: 'muted' }, { label: '事件总数', value: summary?.total ?? events.length, color: 'muted' },
{ label: t('kubernetes.eventspage.s0e5b83'), value: summary?.warning_count ?? warningCount, color: 'amber' }, { label: '告警事件', value: summary?.warning_count ?? warningCount, color: 'amber' },
{ label: t('kubernetes.eventspage.s349c62'), value: summary?.normal_count ?? normalCount, color: 'green' }, { label: '正常事件', value: summary?.normal_count ?? normalCount, color: 'green' },
{ label: t('kubernetes.eventspage.sc62e34'), value: reasonData.length, color: 'red' }, { label: '告警类型', value: reasonData.length, color: 'red' },
]} ]}
/> />
) : undefined} ) : undefined}
@@ -205,20 +202,20 @@ export default function EventsPage() {
</SelectContent> </SelectContent>
</Select> </Select>
<Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}> <Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}>
<SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder=t('k8s.column.namespace') /></SelectTrigger> <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder="命名空间" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">{t('kubernetes.eventspage.s58173b')}</SelectItem> <SelectItem value="all">所有命名空间</SelectItem>
{namespaces.map((n) => <SelectItem key={n} value={n}>{n}</SelectItem>)} {namespaces.map((n) => <SelectItem key={n} value={n}>{n}</SelectItem>)}
</SelectContent> </SelectContent>
</Select> </Select>
<Select value={timeWindow} onValueChange={setTimeWindow}> <Select value={timeWindow} onValueChange={setTimeWindow}>
<SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger> <SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="0">{t('kubernetes.eventspage.s98c99f')}</SelectItem> <SelectItem value="0">全部时间</SelectItem>
<SelectItem value="1">{t('kubernetes.eventspage.sf972b7')}</SelectItem> <SelectItem value="1">近 1 小时</SelectItem>
<SelectItem value="6">{t('monitor.siteProtocol.rangeDefault')}</SelectItem> <SelectItem value="6">近 6 小时</SelectItem>
<SelectItem value="24">{t('kubernetes.eventspage.s6e99b7')}</SelectItem> <SelectItem value="24">近 24 小时</SelectItem>
<SelectItem value="168">{t('kubernetes.eventspage.sd765ef')}</SelectItem> <SelectItem value="168">近 7 天</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}>
@@ -230,10 +227,10 @@ export default function EventsPage() {
> >
{reasonData.length > 0 && ( {reasonData.length > 0 && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<RankPanel title=t('kubernetes.eventspage.s8c894f') items={reasonData} selected={selectedReason} onSelect={setSelectedReason} /> <RankPanel title="告警原因" items={reasonData} selected={selectedReason} onSelect={setSelectedReason} />
{nsData.length > 0 && <RankPanel title=t('k8s.column.namespace') items={nsData} />} {nsData.length > 0 && <RankPanel title="命名空间" items={nsData} />}
{kindData.length > 0 && ( {kindData.length > 0 && (
<RankPanel title=t('kubernetes.eventspage.s14871a') items={kindData} selected={selectedKind} onSelect={setSelectedKind} /> <RankPanel title="资源类型" items={kindData} selected={selectedKind} onSelect={setSelectedKind} />
)} )}
</div> </div>
)} )}
@@ -271,7 +268,7 @@ export default function EventsPage() {
<Select value={filterType} onValueChange={setFilterType}> <Select value={filterType} onValueChange={setFilterType}>
<SelectTrigger className="w-28 h-8 dg-input text-xs"><SelectValue /></SelectTrigger> <SelectTrigger className="w-28 h-8 dg-input text-xs"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">{t('kubernetes.eventspage.sfb9951')}</SelectItem> <SelectItem value="all">所有类型</SelectItem>
<SelectItem value="Warning">Warning</SelectItem> <SelectItem value="Warning">Warning</SelectItem>
<SelectItem value="Normal">Normal</SelectItem> <SelectItem value="Normal">Normal</SelectItem>
</SelectContent> </SelectContent>
@@ -3,8 +3,8 @@ import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Loader2 } from 'lucide-react'; import { Loader2 } from 'lucide-react';
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import type { JsonData } from '@/types/common';
interface Props { interface Props {
/** 集群下路径,如 events、namespace/default/deployments */ /** 集群下路径,如 events、namespace/default/deployments */
@@ -32,7 +32,7 @@ export default function K8sShortcutRedirect({ target }: Props) {
return ( return (
<div className="flex flex-col items-center justify-center py-24 dg-text-muted gap-2"> <div className="flex flex-col items-center justify-center py-24 dg-text-muted gap-2">
<Loader2 className="h-6 w-6 animate-spin" /> <Loader2 className="h-6 w-6 animate-spin" />
<span className="text-sm">{t('kubernetes.k8sshortcutredirect.s9d1aae')}</span> <span className="text-sm">{t('k8s.redirect.redirecting')}</span>
</div> </div>
); );
} }
@@ -11,7 +11,6 @@ import 'xterm/css/xterm.css';
import { Terminal, Maximize2, Minimize2, X, Loader2 } from 'lucide-react'; import { Terminal, Maximize2, Minimize2, X, Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
import { useTranslation } from 'react-i18next';
interface KubectlTerminalProps { interface KubectlTerminalProps {
open: boolean; open: boolean;
@@ -21,7 +20,6 @@ interface KubectlTerminalProps {
} }
export function KubectlTerminal({ open, onOpenChange, clusterId, clusterName }: KubectlTerminalProps) { export function KubectlTerminal({ open, onOpenChange, clusterId, clusterName }: KubectlTerminalProps) {
const { t } = useTranslation();
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const termRef = useRef<XTerm | null>(null); const termRef = useRef<XTerm | null>(null);
const wsRef = useRef<WebSocket | null>(null); const wsRef = useRef<WebSocket | null>(null);
@@ -108,12 +106,12 @@ export function KubectlTerminal({ open, onOpenChange, clusterId, clusterName }:
ws.onclose = () => { ws.onclose = () => {
setConnected(false); setConnected(false);
term.write(t('kubernetes.kubectlterminal.sf4ee00')); term.write('\r\n\x1b[31m[连接已断开]\x1b[0m\r\n');
}; };
ws.onerror = () => { ws.onerror = () => {
setError(t('kubernetes.kubectlterminal.s5b4a67')); setError('WebSocket 连接失败');
term.write(t('kubernetes.kubectlterminal.sc81077')); term.write('\r\n\x1b[31m[连接发生错误]\x1b[0m\r\n');
}; };
return () => { return () => {
@@ -176,7 +174,7 @@ export function KubectlTerminal({ open, onOpenChange, clusterId, clusterName }:
style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '900px', width: '90vw' }} style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '900px', width: '90vw' }}
> >
<DialogTitle className="sr-only">kubectl — {clusterName}</DialogTitle> <DialogTitle className="sr-only">kubectl — {clusterName}</DialogTitle>
<DialogDescription className="sr-only">{t('kubernetes.kubectlterminal.s66981e')}</DialogDescription> <DialogDescription className="sr-only">Kubernetes 集群命令行终端</DialogDescription>
{/* 头部 */} {/* 头部 */}
<div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]"> <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
@@ -15,7 +15,6 @@ import {
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { toast } from 'sonner'; import { toast } from 'sonner';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
// 名称即 code,只允许英文/数字/连字符 // 名称即 code,只允许英文/数字/连字符
const NAME_RE = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?$/; const NAME_RE = /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?$/;
@@ -41,7 +40,6 @@ export function KubernetesClusterDialog({
editingCluster?: JsonData; editingCluster?: JsonData;
onSaved: () => void; onSaved: () => void;
}) { }) {
const { t } = useTranslation();
const [formData, setFormData] = useState({ ...emptyForm }); const [formData, setFormData] = useState({ ...emptyForm });
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [hasToken, setHasToken] = useState(false); const [hasToken, setHasToken] = useState(false);
@@ -90,7 +88,7 @@ export function KubernetesClusterDialog({
if (!value.trim()) { if (!value.trim()) {
setNameError(''); setNameError('');
} else if (!NAME_RE.test(value)) { } else if (!NAME_RE.test(value)) {
setNameError(t('kubernetes.kubernetesclusterdialog.sc7ec6c')); setNameError('只允许英文、数字和连字符(-),首尾不能是连字符');
} else { } else {
setNameError(''); setNameError('');
} }
@@ -112,7 +110,7 @@ export function KubernetesClusterDialog({
const handleSubmit = async () => { const handleSubmit = async () => {
if (!formData.name.trim() || !NAME_RE.test(formData.name.trim())) { if (!formData.name.trim() || !NAME_RE.test(formData.name.trim())) {
toast.error(t('kubernetes.kubernetesclusterdialog.s38bbfe')); return; toast.error('请输入有效的集群名称(英文/数字/连字符)'); return;
} }
try { try {
setSubmitting(true); setSubmitting(true);
@@ -134,7 +132,7 @@ export function KubernetesClusterDialog({
onOpenChange(false); onOpenChange(false);
onSaved(); onSaved();
} catch (e) { } catch (e) {
console.error(t('kubernetes.kubernetesclusterdialog.s7aa44b'), e); console.error('保存集群失败:', e);
} finally { } finally {
setSubmitting(false); setSubmitting(false);
} }
@@ -147,20 +145,20 @@ export function KubernetesClusterDialog({
<DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-2xl"> <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]"> <DialogTitle className="text-[var(--dg-text-primary)]">
{editingCluster ? t('kubernetes.cluster.editCluster') : t('kubernetes.cluster.addCluster')} {editingCluster ? '编辑集群' : '添加集群'}
</DialogTitle> </DialogTitle>
<DialogDescription className="text-[var(--dg-text-secondary)]"> <DialogDescription className="text-[var(--dg-text-secondary)]">
{editingCluster ? t('kubernetes.kubernetesclusterdialog.s2d42f2') : t('kubernetes.kubernetesclusterdialog.sfe6c79')} {editingCluster ? '修改集群接入配置' : '配置新的 Kubernetes 集群接入信息'}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-2 max-h-[60vh] overflow-y-auto pr-1"> <div className="space-y-4 py-2 max-h-[60vh] overflow-y-auto pr-1">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]">{t('kubernetes.cluster.clusterName')}</Label> <Label className="text-[var(--dg-text-secondary)]">集群名称</Label>
<Input <Input
value={formData.name} value={formData.name}
onChange={(e) => handleNameChange(e.target.value)} onChange={(e) => handleNameChange(e.target.value)}
placeholder=t('kubernetes.kubernetesclusterdialog.s298c86') placeholder="如: prod-cluster"
className={`bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] ${nameError ? 'border-red-500' : ''}`} className={`bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] ${nameError ? 'border-red-500' : ''}`}
/> />
{nameError && <p className="text-xs dg-text-red">{nameError}</p>} {nameError && <p className="text-xs dg-text-red">{nameError}</p>}
@@ -169,28 +167,28 @@ export function KubernetesClusterDialog({
</p> </p>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]">{t('kubernetes.kubernetesclusterdialog.sbf23eb')}</Label> <Label className="text-[var(--dg-text-secondary)]">版本(可选)</Label>
<Input <Input
value={formData.version} value={formData.version}
onChange={(e) => setFormData({ ...formData, version: e.target.value })} onChange={(e) => setFormData({ ...formData, version: e.target.value })}
placeholder=t('kubernetes.kubernetesclusterdialog.s90a9ef') placeholder="如: 1.28.0"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]"
/> />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]">{t('common.description')}</Label> <Label className="text-[var(--dg-text-secondary)]">描述</Label>
<Input <Input
value={formData.description} value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })} onChange={(e) => setFormData({ ...formData, description: e.target.value })}
placeholder=t('kubernetes.kubernetesclusterdialog.s33a940') placeholder="集群用途描述"
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]">{t('kubernetes.kubernetesclusterdialog.saaa159')}</Label> <Label className="text-[var(--dg-text-secondary)]">接入方式</Label>
<RadioGroup <RadioGroup
value={String(formData.config_type)} value={String(formData.config_type)}
onValueChange={(v) => setFormData({ ...formData, config_type: Number(v) })} onValueChange={(v) => setFormData({ ...formData, config_type: Number(v) })}
@@ -220,12 +218,12 @@ export function KubernetesClusterDialog({
{formData.config_type === 0 ? ( {formData.config_type === 0 ? (
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]"> <Label className="text-[var(--dg-text-secondary)]">
Token {hasToken && <span className="dg-text-green text-xs ml-1">{t('kubernetes.kubernetesclusterdialog.sb7caaa')}</span>} Token {hasToken && <span className="dg-text-green text-xs ml-1">✓ 已配置(留空不修改)</span>}
</Label> </Label>
<Textarea <Textarea
value={formData.token} value={formData.token}
onChange={(e) => setFormData({ ...formData, token: e.target.value })} onChange={(e) => setFormData({ ...formData, token: e.target.value })}
placeholder={hasToken ? t('kubernetes.kubernetesclusterdialog.sf26ca5') : t('kubernetes.kubernetesclusterdialog.s105008')} placeholder={hasToken ? '已配置,输入新值覆盖...' : '粘贴 Service Account Token...'}
rows={4} rows={4}
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] font-mono text-xs" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] font-mono text-xs"
/> />
@@ -233,12 +231,12 @@ export function KubernetesClusterDialog({
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[var(--dg-text-secondary)]"> <Label className="text-[var(--dg-text-secondary)]">
Kubeconfig {hasKubeConfig && <span className="dg-text-green text-xs ml-1">{t('kubernetes.kubernetesclusterdialog.sb7caaa')}</span>} Kubeconfig {hasKubeConfig && <span className="dg-text-green text-xs ml-1">✓ 已配置(留空不修改)</span>}
</Label> </Label>
<Textarea <Textarea
value={formData.kube_config} value={formData.kube_config}
onChange={(e) => handleKubeConfigChange(e.target.value)} onChange={(e) => handleKubeConfigChange(e.target.value)}
placeholder={hasKubeConfig ? t('kubernetes.kubernetesclusterdialog.sf26ca5') : 'apiVersion: v1\nkind: Config\nclusters:\n- cluster:\n server: https://10.0.0.1:6443\n ...'} placeholder={hasKubeConfig ? '已配置,输入新值覆盖...' : 'apiVersion: v1\nkind: Config\nclusters:\n- cluster:\n server: https://10.0.0.1:6443\n ...'}
rows={10} rows={10}
className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] font-mono text-xs" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] font-mono text-xs"
/> />
@@ -263,7 +261,7 @@ export function KubernetesClusterDialog({
disabled={canSubmit} disabled={canSubmit}
className="bg-[var(--dg-blue)] hover:opacity-90 text-white" className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
> >
{submitting ? i18n.t('k8s.topology.saving') : editingCluster ? i18n.t('common.save') : i18n.t('common.add')} {submitting ? '保存中...' : editingCluster ? '保存' : '添加'}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -30,13 +30,13 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import type { KubernetesCluster } from '@/types'; import type { KubernetesCluster } from '@/types';
import { KubernetesClusterDetail } from './KubernetesClusterDetail'; import { KubernetesClusterDetail } from './KubernetesClusterDetail';
import { KubernetesClusterDialog } from './KubernetesClusterDialog'; import { KubernetesClusterDialog } from './KubernetesClusterDialog';
import { KubectlTerminal } from './KubectlTerminal'; import { KubectlTerminal } from './KubectlTerminal';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function KubernetesClusters() { export function KubernetesClusters() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -63,7 +63,7 @@ export function KubernetesClusters() {
const res: JsonData = await kubernetesApi.getClusters(); const res: JsonData = await kubernetesApi.getClusters();
setClusters(res?.list || []); setClusters(res?.list || []);
} catch (e) { } catch (e) {
console.error(t('kubernetes.kubernetesclusters.s64090a'), e); console.error('加载集群列表失败:', e);
setClusters([]); setClusters([]);
} finally { } finally {
setLoading(false); setLoading(false);
@@ -97,18 +97,18 @@ export function KubernetesClusters() {
await kubernetesApi.deleteCluster(id); await kubernetesApi.deleteCluster(id);
loadData(); loadData();
} catch (e) { } catch (e) {
console.error(t('kubernetes.kubernetesclusters.s3d78e3'), e); console.error('删除集群失败:', e);
} }
}; };
const handleSync = async (id: number | string, silent?: boolean) => { const handleSync = async (id: number | string, silent?: boolean) => {
try { try {
if (!silent) toast.info(t('kubernetes.kubernetesclusters.sf31179')); if (!silent) toast.info(t('k8s.clusters.syncing'));
const res: JsonData = await kubernetesApi.syncCluster(id); const res: JsonData = await kubernetesApi.syncCluster(id);
if (!silent) toast.success(res?.message || t('kubernetes.kubernetesclusters.s02f667')); if (!silent) toast.success(res?.message || t('k8s.clusters.syncDone'));
loadData(); loadData();
} catch (e) { } catch (e) {
if (!silent) toast.error(e?.message || t('cloud.syncFailed')); if (!silent) toast.error(e?.message || t('k8s.clusters.syncFailed'));
} }
}; };
@@ -117,12 +117,12 @@ export function KubernetesClusters() {
const code = exportCluster.code || String(exportCluster.id); const code = exportCluster.code || String(exportCluster.id);
try { try {
setExporting(true); setExporting(true);
toast.info(t('kubernetes.kubernetesclusters.s1d9a60', { exportCluster.name: exportCluster.name })); toast.info(t('k8s.clusters.exporting', { name: exportCluster.name }));
await kubernetesApi.exportAllResources(code); await kubernetesApi.exportAllResources(code);
toast.success(t('kubernetes.kubernetesclusters.s10a4f7')); toast.success(t('k8s.clusters.exportDone'));
setExportCluster(null); setExportCluster(null);
} catch (e) { } catch (e) {
toast.error(e?.message || t('common.exportFailed')); toast.error(e?.message || t('k8s.clusters.exportFailed'));
} finally { } finally {
setExporting(false); setExporting(false);
} }
@@ -140,21 +140,21 @@ export function KubernetesClusters() {
return ( return (
<Badge variant="outline" className="border-[var(--dg-green)]/30 text-[var(--dg-green)] bg-[var(--dg-green)]/10"> <Badge variant="outline" className="border-[var(--dg-green)]/30 text-[var(--dg-green)] bg-[var(--dg-green)]/10">
<CheckCircle className="h-3 w-3 mr-1" /> <CheckCircle className="h-3 w-3 mr-1" />
健康 {t('k8s.clusters.statusHealthy')}
</Badge> </Badge>
); );
case 'warning': case 'warning':
return ( return (
<Badge variant="outline" className="border-[var(--dg-orange)]/30 text-[var(--dg-orange)] bg-[var(--dg-orange)]/10"> <Badge variant="outline" className="border-[var(--dg-orange)]/30 text-[var(--dg-orange)] bg-[var(--dg-orange)]/10">
<AlertTriangle className="h-3 w-3 mr-1" /> <AlertTriangle className="h-3 w-3 mr-1" />
警告 {t('k8s.clusters.statusWarning')}
</Badge> </Badge>
); );
case 'error': case 'error':
return ( return (
<Badge variant="outline" className="border-[var(--dg-red)]/30 text-[var(--dg-red)] bg-[var(--dg-red)]/10"> <Badge variant="outline" className="border-[var(--dg-red)]/30 text-[var(--dg-red)] bg-[var(--dg-red)]/10">
<XCircle className="h-3 w-3 mr-1" /> <XCircle className="h-3 w-3 mr-1" />
异常 {t('common.abnormal')}
</Badge> </Badge>
); );
default: default:
@@ -168,7 +168,7 @@ export function KubernetesClusters() {
<div className="relative w-80"> <div className="relative w-80">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input <Input
placeholder=t('kubernetes.kubernetesclusters.s317554') placeholder={t('k8s.clusters.searchPlaceholder')}
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9 dg-input" className="pl-9 h-9 dg-input"
@@ -179,21 +179,21 @@ export function KubernetesClusters() {
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('menu.clusterList') title={t('k8s.clusters.title')}
subtitle=t('kubernetes.kubernetesclusters.sb0fcb9') subtitle={t('k8s.clusters.subtitle')}
icon={<Cloud className="h-5 w-5" />} icon={<Cloud className="h-5 w-5" />}
toolbar={searchToolbar} toolbar={searchToolbar}
loading={loading} loading={loading}
loadingLabel=t('kubernetes.kubernetesclusters.se5a067') loadingLabel={t('k8s.clusters.loading')}
actions={( actions={(
<> <>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData}>
<RefreshCw className={cn('h-4 w-4 mr-1', loading && 'animate-spin')} /> <RefreshCw className={cn('h-4 w-4 mr-1', loading && 'animate-spin')} />
刷新 {t('common.refresh')}
</Button> </Button>
<Button size="sm" className="dg-btn-primary" onClick={() => { setEditingCluster(null); setDialogOpen(true); }}> <Button size="sm" className="dg-btn-primary" onClick={() => { setEditingCluster(null); setDialogOpen(true); }}>
<Plus className="h-4 w-4 mr-1" /> <Plus className="h-4 w-4 mr-1" />
添加集群 {t('k8s.clusters.add')}
</Button> </Button>
</> </>
)} )}
@@ -202,7 +202,7 @@ export function KubernetesClusters() {
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
{!loading && filteredClusters.length === 0 ? ( {!loading && filteredClusters.length === 0 ? (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] col-span-full"> <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] col-span-full">
<CardContent className="p-12 text-center text-[var(--dg-text-muted)]">{t('dashboard.clusters.empty')}</CardContent> <CardContent className="p-12 text-center text-[var(--dg-text-muted)]">{t('k8s.clusters.empty')}</CardContent>
</Card> </Card>
) : ( ) : (
filteredClusters.map((cluster) => { filteredClusters.map((cluster) => {
@@ -249,7 +249,7 @@ export function KubernetesClusters() {
<DropdownMenuSeparator className="bg-[var(--dg-border-hover)]" /> <DropdownMenuSeparator className="bg-[var(--dg-border-hover)]" />
<DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]"> <DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]">
<Eye className="h-4 w-4 mr-2" /> <Eye className="h-4 w-4 mr-2" />
查看详情 {t('common.viewDetail')}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]" className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]"
@@ -260,7 +260,7 @@ export function KubernetesClusters() {
}} }}
> >
<Settings className="h-4 w-4 mr-2" /> <Settings className="h-4 w-4 mr-2" />
配置 {t('common.config')}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="text-[var(--dg-cyan)] focus:bg-[var(--dg-bg-hover)]" className="text-[var(--dg-cyan)] focus:bg-[var(--dg-bg-hover)]"
@@ -270,7 +270,7 @@ export function KubernetesClusters() {
}} }}
> >
<RefreshCw className="h-4 w-4 mr-2" /> <RefreshCw className="h-4 w-4 mr-2" />
同步 {t('k8s.clusters.sync')}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="text-[var(--dg-green)] focus:bg-[var(--dg-bg-hover)]" className="text-[var(--dg-green)] focus:bg-[var(--dg-bg-hover)]"
@@ -291,7 +291,7 @@ export function KubernetesClusters() {
}} }}
> >
<Download className="h-4 w-4 mr-2" /> <Download className="h-4 w-4 mr-2" />
导出资源 {t('k8s.clusters.export')}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator className="bg-[var(--dg-border-hover)]" /> <DropdownMenuSeparator className="bg-[var(--dg-border-hover)]" />
<DropdownMenuItem <DropdownMenuItem
@@ -302,7 +302,7 @@ export function KubernetesClusters() {
}} }}
> >
<Trash2 className="h-4 w-4 mr-2" /> <Trash2 className="h-4 w-4 mr-2" />
删除 {t('common.delete')}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
@@ -345,7 +345,7 @@ export function KubernetesClusters() {
<span className="text-xs text-[var(--dg-text-secondary)] w-10 text-right">{cpuUsage.toFixed(1)}%</span> <span className="text-xs text-[var(--dg-text-secondary)] w-10 text-right">{cpuUsage.toFixed(1)}%</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-xs text-[var(--dg-text-muted)] w-10">{t('k8s.pods.memory')}</span> <span className="text-xs text-[var(--dg-text-muted)] w-10">{t('k8s.column.memory')}</span>
<div className="flex-1 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden"> <div className="flex-1 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
<div <div
className={cn( className={cn(
@@ -360,7 +360,7 @@ export function KubernetesClusters() {
</> </>
) : ( ) : (
<div className="text-xs text-[var(--dg-text-muted)] text-center"> <div className="text-xs text-[var(--dg-text-muted)] text-center">
Ingress {cluster.ingress_count || 0} · SVC {cluster.service_count || 0} · Deployment {cluster.deployment_count || 0} · Pod {cluster.pod_count || 0} · 资源使用率待采集 Ingress {cluster.ingress_count || 0} · SVC {cluster.service_count || 0} · Deployment {cluster.deployment_count || 0} · Pod {cluster.pod_count || 0} · {t('k8s.clusters.metricsPending')}
</div> </div>
)} )}
</div> </div>
@@ -404,28 +404,27 @@ export function KubernetesClusters() {
onClick={() => { if (!exporting) setExportCluster(null); }} onClick={() => { if (!exporting) setExportCluster(null); }}
> >
<div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-5 w-[420px] shadow-xl" onClick={(e) => e.stopPropagation()}> <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-5 w-[420px] shadow-xl" onClick={(e) => e.stopPropagation()}>
<h3 className="text-base font-semibold text-[var(--dg-text-primary)] mb-1">{t('kubernetes.yaml.exportCluster')}</h3> <h3 className="text-base font-semibold text-[var(--dg-text-primary)] mb-1">{t('k8s.clusters.exportTitle')}</h3>
{exporting ? ( {exporting ? (
<div className="flex flex-col items-center py-6 gap-3"> <div className="flex flex-col items-center py-6 gap-3">
<Loader2 className="h-9 w-9 animate-spin text-[var(--dg-blue)]" /> <Loader2 className="h-9 w-9 animate-spin text-[var(--dg-blue)]" />
<p className="text-sm text-[var(--dg-text-primary)]">正在导出 {exportCluster.name}</p> <p className="text-sm text-[var(--dg-text-primary)]">{t('k8s.clusters.exportingName', { name: exportCluster.name })}</p>
<p className="text-xs text-[var(--dg-text-muted)] text-center leading-relaxed px-2"> <p className="text-xs text-[var(--dg-text-muted)] text-center leading-relaxed px-2">
正在拉取所有命名空间的 Deployment、Service、Ingress、ConfigMap、Secret 并打包为 tar.gz {t('k8s.clusters.exportPulling')}
<br /> <br />
资源较多时可能需要 1~3 分钟,请稍候勿关闭页面 {t('k8s.clusters.exportWait')}
</p> </p>
</div> </div>
) : ( ) : (
<> <>
<p className="text-xs text-[var(--dg-text-secondary)] mb-4 leading-relaxed"> <p className="text-xs text-[var(--dg-text-secondary)] mb-4 leading-relaxed">
导出 <span className="text-[var(--dg-text-primary)]">{exportCluster.name}</span> 所有命名空间的 {t('k8s.clusters.exportConfirm', { name: exportCluster.name })}
Deployment、Service、Ingress、ConfigMap、Secret 为 tar.gz
</p> </p>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setExportCluster(null)}>{t('common.cancel')}</Button> <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setExportCluster(null)}>{t('common.cancel')}</Button>
<Button className="bg-[var(--dg-blue)] hover:opacity-90 text-white" onClick={handleExport}> <Button className="bg-[var(--dg-blue)] hover:opacity-90 text-white" onClick={handleExport}>
<Download className="h-4 w-4 mr-1.5" /> <Download className="h-4 w-4 mr-1.5" />
确认导出 {t('k8s.clusters.confirmExport')}
</Button> </Button>
</div> </div>
</> </>
@@ -13,10 +13,8 @@ import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel'; import { ContentPanel } from '@/components/layout/ContentPanel';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function KubernetesNodes() { export function KubernetesNodes() {
const { t } = useTranslation();
const [clusters, setClusters] = useState<JsonData[]>([]); const [clusters, setClusters] = useState<JsonData[]>([]);
const [selectedCluster, setSelectedCluster] = useState(''); const [selectedCluster, setSelectedCluster] = useState('');
const [nodes, setNodes] = useState<JsonData[]>([]); const [nodes, setNodes] = useState<JsonData[]>([]);
@@ -65,14 +63,14 @@ export function KubernetesNodes() {
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
<div className="relative w-56"> <div className="relative w-56">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input placeholder=t('k8s.topology.searchPlaceholder') value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" /> <Input placeholder="搜索节点..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
</div> </div>
<Select value={roleFilter} onValueChange={setRoleFilter}> <Select value={roleFilter} onValueChange={setRoleFilter}>
<SelectTrigger className="w-32 h-9 dg-input"> <SelectTrigger className="w-32 h-9 dg-input">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">{t('kubernetes.kubernetesnodes.s5bcc10')}</SelectItem> <SelectItem value="all">全部角色</SelectItem>
<SelectItem value="master">Master</SelectItem> <SelectItem value="master">Master</SelectItem>
<SelectItem value="worker">Worker</SelectItem> <SelectItem value="worker">Worker</SelectItem>
</SelectContent> </SelectContent>
@@ -85,14 +83,14 @@ export function KubernetesNodes() {
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('menu.nodeManagement') title="节点管理"
subtitle={clusterLabel ? t('kubernetes.kubernetesnodes.s055d95', { clusterLabel: clusterLabel }) : t('kubernetes.kubernetesnodes.s01b441')} subtitle={clusterLabel ? `${clusterLabel} · 工作节点状态与资源` : 'Kubernetes 集群工作节点状态与资源'}
icon={<Server className="h-5 w-5" />} icon={<Server className="h-5 w-5" />}
actions={( actions={(
<> <>
<Select value={selectedCluster} onValueChange={setSelectedCluster}> <Select value={selectedCluster} onValueChange={setSelectedCluster}>
<SelectTrigger className="w-48 h-9 dg-input"> <SelectTrigger className="w-48 h-9 dg-input">
<SelectValue placeholder=t('k8s.topology.selectCluster') /> <SelectValue placeholder="选择集群" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{clusters.map((c) => ( {clusters.map((c) => (
@@ -111,21 +109,21 @@ export function KubernetesNodes() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-[var(--dg-text-secondary)]">{t('k8s.topology.nodeName')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">节点名称</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">IP</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">IP</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('pipeline.role')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">角色</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.status')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.config')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">配置</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('server.usage')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">使用率</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">Pods</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">Pods</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">Kubelet</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">Kubelet</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{loading ? ( {loading ? (
<TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />{t('common.loading')}</TableCell></TableRow> <TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
) : filtered.length === 0 ? ( ) : filtered.length === 0 ? (
<TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Server className="h-8 w-8 mx-auto mb-2 opacity-50" />{selectedCluster ? t('k8s.empty.nodes') : t('kubernetes.kubernetesnodes.sf8c388')}</TableCell></TableRow> <TableRow><TableCell colSpan={8} className="text-center text-[var(--dg-text-muted)] py-12"><Server className="h-8 w-8 mx-auto mb-2 opacity-50" />{selectedCluster ? '暂无节点数据' : '请选择集群'}</TableCell></TableRow>
) : ( ) : (
filtered.map((n) => ( filtered.map((n) => (
<TableRow key={n.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={n.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
@@ -134,7 +132,7 @@ export function KubernetesNodes() {
<TableCell>{getRoleBadge(n.role)}</TableCell> <TableCell>{getRoleBadge(n.role)}</TableCell>
<TableCell>{getStatusBadge(n.status)}</TableCell> <TableCell>{getStatusBadge(n.status)}</TableCell>
<TableCell className="text-sm text-[var(--dg-text-secondary)]"> <TableCell className="text-sm text-[var(--dg-text-secondary)]">
{n.cpu ? t('kubernetes.kubernetesnodes.s90ecb6', { n.cpu: n.cpu }) : '-'} / {n.memory ? `${Math.round(n.memory / 1024)}GB` : '-'} {n.cpu ? `${n.cpu}核` : '-'} / {n.memory ? `${Math.round(n.memory / 1024)}GB` : '-'}
</TableCell> </TableCell>
<TableCell> <TableCell>
{(() => { {(() => {
@@ -24,9 +24,9 @@ import {
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { useTranslation } from 'react-i18next';
import { DeploymentDetail } from './DeploymentDetail'; import { DeploymentDetail } from './DeploymentDetail';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export function KubernetesWorkloads() { export function KubernetesWorkloads() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -121,7 +121,7 @@ export function KubernetesWorkloads() {
const newReplicas = (dep.replicas || 0) + delta; const newReplicas = (dep.replicas || 0) + delta;
if (newReplicas < 0) return; if (newReplicas < 0) return;
await kubernetesApi.scaleDeployment(selectedCluster, dep.namespace, dep.name, newReplicas); await kubernetesApi.scaleDeployment(selectedCluster, dep.namespace, dep.name, newReplicas);
toast({ title: t('kubernetes.kubernetesworkloads.s0b3ea1'), description: t('kubernetes.kubernetesworkloads.scf7f1c', { dep.name: dep.name, newReplicas: newReplicas }) }); toast({ title: t('k8s.workloads.scaleSuccess'), description: t('k8s.workloads.scaleDesc', { name: dep.name, count: newReplicas }) });
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('common.operationFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: t('common.operationFailed'), description: e?.message || String(e), variant: 'destructive' });
@@ -146,13 +146,13 @@ export function KubernetesWorkloads() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('menu.workloads')}</h1> <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('k8s.workloads.title')}</h1>
<p className="text-sm dg-text-muted mt-1">{t('kubernetes.kubernetesworkloads.sf90ced')}</p> <p className="text-sm dg-text-muted mt-1">{t('k8s.workloads.subtitle')}</p>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Select value={selectedCluster} onValueChange={(v) => { setSelectedCluster(v); setSelectedNamespace('all'); }}> <Select value={selectedCluster} onValueChange={(v) => { setSelectedCluster(v); setSelectedNamespace('all'); }}>
<SelectTrigger className="w-48 h-9 dg-input"> <SelectTrigger className="w-48 h-9 dg-input">
<SelectValue placeholder=t('k8s.topology.selectCluster') /> <SelectValue placeholder={t('k8s.workloads.selectCluster')} />
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
{clusters.map((c) => ( {clusters.map((c) => (
@@ -162,10 +162,10 @@ export function KubernetesWorkloads() {
</Select> </Select>
<Select value={selectedNamespace} onValueChange={setSelectedNamespace}> <Select value={selectedNamespace} onValueChange={setSelectedNamespace}>
<SelectTrigger className="w-40 h-9 dg-input"> <SelectTrigger className="w-40 h-9 dg-input">
<SelectValue placeholder=t('k8s.column.namespace') /> <SelectValue placeholder={t('k8s.workloads.namespace')} />
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input max-h-[300px]"> <SelectContent className="dg-input max-h-[300px]">
<SelectItem value="all">{t('kubernetes.namespace.allNamespaces')}</SelectItem> <SelectItem value="all">{t('k8s.workloads.allNamespaces')}</SelectItem>
{namespaces.map((ns) => ( {namespaces.map((ns) => (
<SelectItem key={ns} value={ns}>{ns}</SelectItem> <SelectItem key={ns} value={ns}>{ns}</SelectItem>
))} ))}
@@ -180,7 +180,7 @@ export function KubernetesWorkloads() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[ {[
{ label: 'Deployment', value: deployments.length, icon: <Boxes className="h-5 w-5" />, color: 'text-rose-400' }, { label: 'Deployment', value: deployments.length, icon: <Boxes className="h-5 w-5" />, color: 'text-rose-400' },
{ label: t('kubernetes.kubernetesworkloads.s83481f'), value: pods.length, icon: <Container className="h-5 w-5" />, color: 'dg-text-blue' }, { label: t('k8s.workloads.podTotal'), value: pods.length, icon: <Container className="h-5 w-5" />, color: 'dg-text-blue' },
{ label: 'Running', value: pods.filter((p) => p.status === 'Running').length, icon: <Container className="h-5 w-5" />, color: 'dg-text-green' }, { label: 'Running', value: pods.filter((p) => p.status === 'Running').length, icon: <Container className="h-5 w-5" />, color: 'dg-text-green' },
{ label: t('common.abnormal'), value: pods.filter((p) => ['Failed', 'Pending'].includes(p.status)).length, icon: <Container className="h-5 w-5" />, color: 'dg-text-red' }, { label: t('common.abnormal'), value: pods.filter((p) => ['Failed', 'Pending'].includes(p.status)).length, icon: <Container className="h-5 w-5" />, color: 'dg-text-red' },
].map((s) => ( ].map((s) => (
@@ -200,7 +200,7 @@ export function KubernetesWorkloads() {
<div className="relative w-56"> <div className="relative w-56">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input placeholder=t('kubernetes.kubernetesworkloads.s64e327') value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" /> <Input placeholder={t('common.search') + '...'} value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
</div> </div>
<Tabs value={activeTab} onValueChange={setActiveTab}> <Tabs value={activeTab} onValueChange={setActiveTab}>
@@ -217,7 +217,7 @@ export function KubernetesWorkloads() {
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">{t('common.name')}</TableHead> <TableHead className="dg-text-secondary">{t('common.name')}</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.column.namespace')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.namespace')}</TableHead>
<TableHead className="dg-text-secondary">{t('kubernetes.kubernetesworkloads.s0428b3')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.replicas')}</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.column.image')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.image')}</TableHead>
<TableHead className="dg-text-secondary w-[140px]">{t('common.actions')}</TableHead> <TableHead className="dg-text-secondary w-[140px]">{t('common.actions')}</TableHead>
</TableRow> </TableRow>
@@ -226,7 +226,7 @@ export function KubernetesWorkloads() {
{loading ? ( {loading ? (
<TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />{t('common.loading')}</TableCell></TableRow> <TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />{t('common.loading')}</TableCell></TableRow>
) : filteredDeps.length === 0 ? ( ) : filteredDeps.length === 0 ? (
<TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Boxes className="h-8 w-8 mx-auto mb-2 opacity-50" />{t('kubernetes.kubernetesworkloads.s5689d3')}</TableCell></TableRow> <TableRow><TableCell colSpan={5} className="text-center dg-text-muted py-12"><Boxes className="h-8 w-8 mx-auto mb-2 opacity-50" />{t('k8s.workloads.noDeployment')}</TableCell></TableRow>
) : ( ) : (
filteredDeps.map((d) => ( filteredDeps.map((d) => (
<TableRow key={d.id || d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] cursor-pointer" <TableRow key={d.id || d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] cursor-pointer"
@@ -253,16 +253,16 @@ export function KubernetesWorkloads() {
<TableCell onClick={(e) => e.stopPropagation()}> <TableCell onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]" <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
title=t('kubernetes.kubernetesworkloads.sd4db1c') disabled={(d.replicas || 0) <= 0} title={t('k8s.workloads.decreaseReplica')} disabled={(d.replicas || 0) <= 0}
onClick={() => handleQuickScale(d, -1)}> onClick={() => handleQuickScale(d, -1)}>
<Minus className="h-3.5 w-3.5" /> <Minus className="h-3.5 w-3.5" />
</Button> </Button>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]" <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:text-[var(--dg-text-primary)]"
title=t('kubernetes.kubernetesworkloads.se80820') onClick={() => handleQuickScale(d, 1)}> title={t('k8s.workloads.increaseReplica')} onClick={() => handleQuickScale(d, 1)}>
<Plus className="h-3.5 w-3.5" /> <Plus className="h-3.5 w-3.5" />
</Button> </Button>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue" <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary hover:dg-text-blue"
title=t('common.viewDetail') onClick={() => setSelectedDeployment({ name: d.name, namespace: d.namespace })}> title={t('common.viewDetail')} onClick={() => setSelectedDeployment({ name: d.name, namespace: d.namespace })}>
<Eye className="h-3.5 w-3.5" /> <Eye className="h-3.5 w-3.5" />
</Button> </Button>
</div> </div>
@@ -285,10 +285,10 @@ export function KubernetesWorkloads() {
<TableHead className="dg-text-secondary">{t('common.name')}</TableHead> <TableHead className="dg-text-secondary">{t('common.name')}</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.column.namespace')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.namespace')}</TableHead>
<TableHead className="dg-text-secondary">{t('common.status')}</TableHead> <TableHead className="dg-text-secondary">{t('common.status')}</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.tab.nodes')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.node')}</TableHead>
<TableHead className="dg-text-secondary">CPU</TableHead> <TableHead className="dg-text-secondary">CPU</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.pods.memory')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.memory')}</TableHead>
<TableHead className="dg-text-secondary">{t('common.reboot')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.restartCount')}</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.column.image')}</TableHead> <TableHead className="dg-text-secondary">{t('k8s.column.image')}</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
@@ -296,7 +296,7 @@ export function KubernetesWorkloads() {
{loading ? ( {loading ? (
<TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />{t('common.loading')}</TableCell></TableRow> <TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />{t('common.loading')}</TableCell></TableRow>
) : filteredPods.length === 0 ? ( ) : filteredPods.length === 0 ? (
<TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Container className="h-8 w-8 mx-auto mb-2 opacity-50" />{t('k8s.deploymentDetail.noPod')}</TableCell></TableRow> <TableRow><TableCell colSpan={8} className="text-center dg-text-muted py-12"><Container className="h-8 w-8 mx-auto mb-2 opacity-50" />{t('k8s.workloads.noPod')}</TableCell></TableRow>
) : ( ) : (
filteredPods.map((p) => ( filteredPods.map((p) => (
<TableRow key={p.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]"> <TableRow key={p.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
@@ -19,7 +19,6 @@ import { toast } from 'sonner';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel'; import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import { useTranslation } from 'react-i18next';
interface NamespaceDetail { interface NamespaceDetail {
name: string; name: string;
@@ -40,7 +39,6 @@ const SYSTEM_NAMESPACES = new Set([
]); ]);
export default function NamespaceManagementPage() { export default function NamespaceManagementPage() {
const { t } = useTranslation();
const { clusterCode } = useParams<{ clusterCode: string }>(); const { clusterCode } = useParams<{ clusterCode: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const [namespaces, setNamespaces] = useState<NamespaceDetail[]>([]); const [namespaces, setNamespaces] = useState<NamespaceDetail[]>([]);
@@ -80,7 +78,7 @@ export default function NamespaceManagementPage() {
setCreateOpen(false); setCreateOpen(false);
await loadData(); await loadData();
} catch (err) { } catch (err) {
toast.error(err?.message || t('monitor.quickSetupFailed')); toast.error(err?.message || '创建失败');
} finally { } finally {
setCreating(false); setCreating(false);
} }
@@ -94,7 +92,7 @@ export default function NamespaceManagementPage() {
setDeleteTarget(null); setDeleteTarget(null);
await loadData(); await loadData();
} catch (err) { } catch (err) {
toast.error(err?.message || t('common.deleteFailed')); toast.error(err?.message || '删除失败');
} finally { } finally {
setDeleting(false); setDeleting(false);
} }
@@ -113,7 +111,7 @@ export default function NamespaceManagementPage() {
<Input <Input
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder=t('kubernetes.namespacemanagementpage.se91247') placeholder="搜索命名空间..."
className="max-w-xs dg-input" className="max-w-xs dg-input"
/> />
); );
@@ -121,17 +119,17 @@ export default function NamespaceManagementPage() {
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('kubernetes.namespacemanagementpage.se935a3') title="命名空间管理"
subtitle={t('kubernetes.namespacemanagementpage.s81e4b3', { clusterCode: clusterCode })} subtitle={`${clusterCode} · 资源配额与生命周期管理`}
icon={<Boxes className="h-5 w-5" />} icon={<Boxes className="h-5 w-5" />}
metrics={!loading ? ( metrics={!loading ? (
<StatStrip <StatStrip
items={[ items={[
{ label: t('k8s.column.namespace'), value: namespaces.length, color: 'green' }, { label: '命名空间', value: namespaces.length, color: 'green' },
{ label: 'Deployments', value: totalDeploys, color: 'blue' }, { label: 'Deployments', value: totalDeploys, color: 'blue' },
{ label: 'Pods', value: totalPods, color: 'purple' }, { label: 'Pods', value: totalPods, color: 'purple' },
{ label: 'Services', value: totalSvcs, color: 'cyan' }, { label: 'Services', value: totalSvcs, color: 'cyan' },
{ label: t('kubernetes.namespacemanagementpage.s47c3ae'), value: quotaCount, color: 'amber' }, { label: '配额限制', value: quotaCount, color: 'amber' },
]} ]}
/> />
) : undefined} ) : undefined}
@@ -149,15 +147,15 @@ export default function NamespaceManagementPage() {
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{t('kubernetes.namespacemanagementpage.s737f41')}</DialogTitle> <DialogTitle>创建命名空间</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 py-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('kubernetes.namespace.namespaceName')}</Label> <Label>命名空间名称</Label>
<Input <Input
value={newName} value={newName}
onChange={(e) => setNewName(e.target.value)} onChange={(e) => setNewName(e.target.value)}
placeholder=t('kubernetes.namespacemanagementpage.scba008') placeholder="例如: my-app"
onKeyDown={(e) => e.key === 'Enter' && handleCreate()} onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
/> />
<p className="text-xs text-[var(--dg-text-muted)]"> <p className="text-xs text-[var(--dg-text-muted)]">
@@ -166,7 +164,7 @@ export default function NamespaceManagementPage() {
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => setCreateOpen(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => setCreateOpen(false)}>取消</Button>
<Button onClick={handleCreate} disabled={creating || !newName.trim()}> <Button onClick={handleCreate} disabled={creating || !newName.trim()}>
{creating ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null} {creating ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
创建 创建
@@ -181,15 +179,15 @@ export default function NamespaceManagementPage() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.name')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">名称</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.status')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('kubernetes.namespacemanagementpage.sa01a99')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">年龄</TableHead>
<TableHead className="text-[var(--dg-text-secondary)] text-center">Deploy</TableHead> <TableHead className="text-[var(--dg-text-secondary)] text-center">Deploy</TableHead>
<TableHead className="text-[var(--dg-text-secondary)] text-center">Pods</TableHead> <TableHead className="text-[var(--dg-text-secondary)] text-center">Pods</TableHead>
<TableHead className="text-[var(--dg-text-secondary)] text-center">Svc</TableHead> <TableHead className="text-[var(--dg-text-secondary)] text-center">Svc</TableHead>
<TableHead className="text-[var(--dg-text-secondary)] text-center">{t('common.quota')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)] text-center">配额</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.tag')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">标签</TableHead>
<TableHead className="text-[var(--dg-text-secondary)] text-center">{t('common.actions')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)] text-center">操作</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -249,13 +247,13 @@ export default function NamespaceManagementPage() {
</TableCell> </TableCell>
<TableCell className="text-center"> <TableCell className="text-center">
{isSystem ? ( {isSystem ? (
<span className="text-xs text-[var(--dg-text-muted)]">{t('common.system3')}</span> <span className="text-xs text-[var(--dg-text-muted)]">系统</span>
) : ( ) : (
<Button <Button
variant="ghost" size="icon" variant="ghost" size="icon"
className="h-7 w-7 text-[var(--dg-red)] hover:text-[var(--dg-red)] hover:bg-[var(--dg-red)]/10" className="h-7 w-7 text-[var(--dg-red)] hover:text-[var(--dg-red)] hover:bg-[var(--dg-red)]/10"
onClick={() => setDeleteTarget(ns.name)} onClick={() => setDeleteTarget(ns.name)}
title=t('kubernetes.namespace.deleteNamespace') title="删除命名空间"
> >
<Trash2 className="h-3.5 w-3.5" /> <Trash2 className="h-3.5 w-3.5" />
</Button> </Button>
@@ -288,7 +286,7 @@ export default function NamespaceManagementPage() {
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => setDeleteTarget(null)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => setDeleteTarget(null)}>取消</Button>
<Button variant="destructive" onClick={handleDelete} disabled={deleting}> <Button variant="destructive" onClick={handleDelete} disabled={deleting}>
{deleting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null} {deleting ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : null}
确认删除 确认删除
@@ -16,22 +16,19 @@ import {
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
const RESOURCE_LINKS = [ const RESOURCE_LINKS = [
{ type: 'deployments', label: 'Deployments', icon: Boxes, desc: i18n.t('kubernetes.namespaceoverviewpage.sb68c63') }, { type: 'deployments', label: 'Deployments', icon: Boxes, desc: '工作负载副本管理' },
{ type: 'pods', label: 'Pods', icon: Container, desc: i18n.t('kubernetes.namespaceoverviewpage.sfdac25') }, { type: 'pods', label: 'Pods', icon: Container, desc: '容器实例运行状态' },
{ type: 'cronjobs', label: 'CronJobs', icon: Clock, desc: i18n.t('kubernetes.namespaceoverviewpage.s9c9fc5') }, { type: 'cronjobs', label: 'CronJobs', icon: Clock, desc: '定时任务管理' },
{ type: 'services', label: 'Services', icon: Network, desc: i18n.t('kubernetes.namespaceoverviewpage.s3a3f6d') }, { type: 'services', label: 'Services', icon: Network, desc: '服务发现与负载均衡' },
{ type: 'ingresses', label: 'Ingresses', icon: Network, desc: i18n.t('kubernetes.namespaceoverviewpage.scc6971') }, { type: 'ingresses', label: 'Ingresses', icon: Network, desc: '外部流量路由规则' },
{ type: 'configmaps', label: 'ConfigMaps', icon: FileText, desc: i18n.t('kubernetes.namespaceoverviewpage.s0986a6') }, { type: 'configmaps', label: 'ConfigMaps', icon: FileText, desc: '配置字典' },
{ type: 'secrets', label: 'Secrets', icon: Shield, desc: i18n.t('kubernetes.namespaceoverviewpage.sb3fb72') }, { type: 'secrets', label: 'Secrets', icon: Shield, desc: '密钥与凭证' },
{ type: 'hpas', label: 'HPAs', icon: Activity, desc: i18n.t('kubernetes.namespaceoverviewpage.sa84da2') }, { type: 'hpas', label: 'HPAs', icon: Activity, desc: '水平自动伸缩策略' },
]; ];
export default function NamespaceOverviewPage() { export default function NamespaceOverviewPage() {
const { t } = useTranslation();
const { clusterCode, namespace } = useParams<{ clusterCode: string; namespace: string }>(); const { clusterCode, namespace } = useParams<{ clusterCode: string; namespace: string }>();
const [counts, setCounts] = useState<Record<string, number>>({}); const [counts, setCounts] = useState<Record<string, number>>({});
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -69,11 +66,11 @@ export default function NamespaceOverviewPage() {
return ( return (
<PageShell <PageShell
variant="default" variant="default"
title={namespace || t('k8s.column.namespace')} title={namespace || '命名空间'}
subtitle={t('kubernetes.namespaceoverviewpage.s6d60aa', { clusterCode: clusterCode })} subtitle={`${clusterCode} · 命名空间概览`}
icon={<Cloud className="h-5 w-5" />} icon={<Cloud className="h-5 w-5" />}
loading={loading} loading={loading}
loadingLabel=t('kubernetes.namespaceoverviewpage.sfa525a') loadingLabel="加载资源统计..."
> >
<div className="grid grid-cols-2 md:grid-cols-4 gap-4"> <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{RESOURCE_LINKS.map((r) => ( {RESOURCE_LINKS.map((r) => (
@@ -25,8 +25,6 @@ import { useToast } from '@/hooks/use-toast';
import { useConfirm } from '@/components/ui/confirm-dialog'; import { useConfirm } from '@/components/ui/confirm-dialog';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel'; import { ContentPanel } from '@/components/layout/ContentPanel';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
type ResourceType = type ResourceType =
| 'deployments' | 'pods' | 'services' | 'ingresses' | 'deployments' | 'pods' | 'services' | 'ingresses'
@@ -45,8 +43,8 @@ const BULK_EXPORT_TYPES: ResourceType[] = ['services', 'ingresses', 'configmaps'
const VisualActions = ({ name, opts }: { name: string; opts: { onYaml?: (n: string) => void; onEdit?: (n: string) => void } }) => ( const VisualActions = ({ name, opts }: { name: string; opts: { onYaml?: (n: string) => void; onEdit?: (n: string) => void } }) => (
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-[var(--dg-green)] hover:text-[var(--dg-green)]" title=i18n.t('k8s.resource.visualEditor') <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-[var(--dg-green)] hover:text-[var(--dg-green)]" title="可视化编辑"
onClick={() => opts.onEdit?.(name)}><Pencil className="h-3.5 w-3.5 mr-1" />{i18n.t('common.edit')}</Button> onClick={() => opts.onEdit?.(name)}><Pencil className="h-3.5 w-3.5 mr-1" />编辑</Button>
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-secondary)]" title="YAML" <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-secondary)]" title="YAML"
onClick={() => opts.onYaml?.(name)}><FileCode className="h-3.5 w-3.5 mr-1" />YAML</Button> onClick={() => opts.onYaml?.(name)}><FileCode className="h-3.5 w-3.5 mr-1" />YAML</Button>
</div> </div>
@@ -60,8 +58,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
renderRow: ( item: any, opts: { clusterCode: string; namespace: string; onDetail?: ( item: any) => void; onYaml?: (name: string) => void; onEdit?: (name: string) => void; onTerminal?: ( item: any) => void; onFileBrowser?: ( item: any) => void; onDeletePod?: ( item: any) => void; onPodDetail?: ( item: any) => void }) => React.ReactNode; renderRow: ( item: any, opts: { clusterCode: string; namespace: string; onDetail?: ( item: any) => void; onYaml?: (name: string) => void; onEdit?: (name: string) => void; onTerminal?: ( item: any) => void; onFileBrowser?: ( item: any) => void; onDeletePod?: ( item: any) => void; onPodDetail?: ( item: any) => void }) => React.ReactNode;
}> = { }> = {
deployments: { deployments: {
title: 'Deployments', subtitle: i18n.t('kubernetes.namespaceresourcepage.s35c744'), icon: Boxes, title: 'Deployments', subtitle: 'Deployment 工作负载运行状态', icon: Boxes,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('kubernetes.namespaceresourcepage.s0428b3'), i18n.t('k8s.column.image')], columns: ['名称', '命名空间', '副本', '镜像'],
renderRow: (d, opts) => ( renderRow: (d, opts) => (
<TableRow key={d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30 cursor-pointer" onClick={() => opts.onDetail?.(d)}> <TableRow key={d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30 cursor-pointer" onClick={() => opts.onDetail?.(d)}>
<TableCell className="font-medium text-[var(--dg-text-primary)]">{d.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{d.name}</TableCell>
@@ -85,8 +83,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
pods: { pods: {
title: 'Pods', subtitle: i18n.t('kubernetes.namespaceresourcepage.s780b7d'), icon: Container, title: 'Pods', subtitle: 'Pod 实例运行状态', icon: Container,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('common.status'), i18n.t('k8s.tab.nodes'), 'CPU', i18n.t('k8s.pods.memory'), i18n.t('common.reboot'), i18n.t('k8s.column.image'), i18n.t('common.actions')], columns: ['名称', '命名空间', '状态', '节点', 'CPU', '内存', '重启', '镜像', '操作'],
renderRow: (p, opts) => { renderRow: (p, opts) => {
const statusMap: Record<string, string> = { Running: 'bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30', Pending: 'bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30', Failed: 'bg-[var(--dg-red)]/20 text-[var(--dg-red)] border-[var(--dg-red)]/30' }; const statusMap: Record<string, string> = { Running: 'bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30', Pending: 'bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30', Failed: 'bg-[var(--dg-red)]/20 text-[var(--dg-red)] border-[var(--dg-red)]/30' };
return ( return (
@@ -106,13 +104,13 @@ const RESOURCE_CONFIG: Record<ResourceType, {
<TableCell className="text-xs text-[var(--dg-text-muted)] max-w-[200px] truncate">{p.image || '-'}</TableCell> <TableCell className="text-xs text-[var(--dg-text-muted)] max-w-[200px] truncate">{p.image || '-'}</TableCell>
<TableCell> <TableCell>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-green)]" title=i18n.t('kubernetes.pod.terminal') <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-green)]" title="终端"
onClick={() => (opts as Record<string, any>).onTerminal?.(p)}><Terminal className="h-3.5 w-3.5" /></Button> onClick={() => (opts as Record<string, any>).onTerminal?.(p)}><Terminal className="h-3.5 w-3.5" /></Button>
<Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-orange)]" title=i18n.t('k8s.pods.action.file') <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-orange)]" title="文件"
onClick={() => (opts as Record<string, any>).onFileBrowser?.(p)}><HardDrive className="h-3.5 w-3.5" /></Button> onClick={() => (opts as Record<string, any>).onFileBrowser?.(p)}><HardDrive className="h-3.5 w-3.5" /></Button>
<Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-blue)]" title="YAML" <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-blue)]" title="YAML"
onClick={() => opts.onYaml?.(p.name)}><FileCode className="h-3.5 w-3.5" /></Button> onClick={() => opts.onYaml?.(p.name)}><FileCode className="h-3.5 w-3.5" /></Button>
<Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-red)] hover:text-[var(--dg-red)]" title=i18n.t('common.delete') <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0 text-[var(--dg-red)] hover:text-[var(--dg-red)]" title="删除"
onClick={() => opts.onDeletePod?.(p)}><Trash2 className="h-3.5 w-3.5" /></Button> onClick={() => opts.onDeletePod?.(p)}><Trash2 className="h-3.5 w-3.5" /></Button>
</div> </div>
</TableCell> </TableCell>
@@ -121,8 +119,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
}, },
}, },
services: { services: {
title: 'Services', subtitle: i18n.t('kubernetes.namespaceresourcepage.s5e76b6'), icon: Network, title: 'Services', subtitle: 'Service 网络服务', icon: Network,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('common.type'), 'Cluster IP', i18n.t('server.csv.port'), i18n.t('common.actions')], columns: ['名称', '命名空间', '类型', 'Cluster IP', '端口', '操作'],
renderRow: (s, opts) => ( renderRow: (s, opts) => (
<TableRow key={s.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={s.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{s.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{s.name}</TableCell>
@@ -135,8 +133,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
ingresses: { ingresses: {
title: 'Ingresses', subtitle: i18n.t('kubernetes.namespaceresourcepage.s8d5014'), icon: Network, title: 'Ingresses', subtitle: 'Ingress 路由规则', icon: Network,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), 'Hosts', 'TLS', i18n.t('common.actions')], columns: ['名称', '命名空间', 'Hosts', 'TLS', '操作'],
renderRow: (i, opts) => { renderRow: (i, opts) => {
const hosts = i.hosts || []; const hosts = i.hosts || [];
return ( return (
@@ -151,8 +149,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
}, },
}, },
configmaps: { configmaps: {
title: 'ConfigMaps', subtitle: i18n.t('kubernetes.namespaceresourcepage.s0986a6'), icon: FileText, title: 'ConfigMaps', subtitle: '配置字典', icon: FileText,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('kubernetes.namespaceresourcepage.sbd1fa0'), i18n.t('common.actions')], columns: ['名称', '命名空间', '键数量', '操作'],
renderRow: (c, opts) => ( renderRow: (c, opts) => (
<TableRow key={c.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={c.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{c.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{c.name}</TableCell>
@@ -163,8 +161,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
secrets: { secrets: {
title: 'Secrets', subtitle: i18n.t('kubernetes.namespaceresourcepage.sd1424a'), icon: Shield, title: 'Secrets', subtitle: '密钥管理(仅名称与类型)', icon: Shield,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('common.type'), i18n.t('common.actions')], columns: ['名称', '命名空间', '类型', '操作'],
renderRow: (s, opts) => ( renderRow: (s, opts) => (
<TableRow key={s.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={s.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{s.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{s.name}</TableCell>
@@ -175,8 +173,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
hpas: { hpas: {
title: 'HPAs', subtitle: i18n.t('kubernetes.namespaceresourcepage.s9abc8d'), icon: Activity, title: 'HPAs', subtitle: '水平自动伸缩', icon: Activity,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('common.target'), i18n.t('k8s.hpaCronHpa.col.minMax'), 'CPU%', 'Mem%'], columns: ['名称', '命名空间', '目标', '最小/最大', 'CPU%', 'Mem%'],
renderRow: (h, _opts) => ( renderRow: (h, _opts) => (
<TableRow key={h.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={h.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{h.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{h.name}</TableCell>
@@ -189,21 +187,21 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
cronjobs: { cronjobs: {
title: 'CronJobs', subtitle: i18n.t('menu.cronJobs'), icon: Clock, title: 'CronJobs', subtitle: '定时任务', icon: Clock,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('k8s.workload.scheduling'), i18n.t('common.status'), i18n.t('common.lastRun')], columns: ['名称', '命名空间', '调度', '状态', '上次执行'],
renderRow: (cj) => ( renderRow: (cj) => (
<TableRow key={cj.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={cj.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{cj.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{cj.name}</TableCell>
<TableCell><Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{cj.namespace}</Badge></TableCell> <TableCell><Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{cj.namespace}</Badge></TableCell>
<TableCell className="text-sm font-mono text-[var(--dg-text-secondary)]">{cj.schedule || '-'}</TableCell> <TableCell className="text-sm font-mono text-[var(--dg-text-secondary)]">{cj.schedule || '-'}</TableCell>
<TableCell><Badge className={cj.suspend ? 'bg-[var(--dg-orange)]/20 text-[var(--dg-orange)]' : 'bg-[var(--dg-green)]/20 text-[var(--dg-green)]'}>{cj.suspend ? i18n.t('kubernetes.deployment.paused') : i18n.t('common.running')}</Badge></TableCell> <TableCell><Badge className={cj.suspend ? 'bg-[var(--dg-orange)]/20 text-[var(--dg-orange)]' : 'bg-[var(--dg-green)]/20 text-[var(--dg-green)]'}>{cj.suspend ? '已暂停' : '运行中'}</Badge></TableCell>
<TableCell className="text-sm text-[var(--dg-text-secondary)]">{cj.last_schedule || '-'}</TableCell> <TableCell className="text-sm text-[var(--dg-text-secondary)]">{cj.last_schedule || '-'}</TableCell>
</TableRow> </TableRow>
), ),
}, },
pvcs: { pvcs: {
title: i18n.t('kubernetes.namespaceresourcepage.s18c900'), subtitle: 'PersistentVolumeClaim', icon: Boxes, title: '存储卷声明', subtitle: 'PersistentVolumeClaim', icon: Boxes,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('common.status'), i18n.t('deploy.table.size'), 'StorageClass', i18n.t('common.actions')], columns: ['名称', '命名空间', '状态', '大小', 'StorageClass', '操作'],
renderRow: (p, opts) => ( renderRow: (p, opts) => (
<TableRow key={p.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={p.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{p.name}</TableCell>
@@ -216,8 +214,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
statefulsets: { statefulsets: {
title: 'StatefulSets', subtitle: i18n.t('kubernetes.namespaceresourcepage.sbfeb44'), icon: Boxes, title: 'StatefulSets', subtitle: '有状态应用', icon: Boxes,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('kubernetes.namespaceresourcepage.s0428b3'), i18n.t('common.ready'), i18n.t('k8s.column.image')], columns: ['名称', '命名空间', '副本', '就绪', '镜像'],
renderRow: (s, opts) => ( renderRow: (s, opts) => (
<TableRow key={s.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30 cursor-pointer" onClick={() => opts.onDetail?.(s)}> <TableRow key={s.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30 cursor-pointer" onClick={() => opts.onDetail?.(s)}>
<TableCell className="font-medium text-[var(--dg-text-primary)]">{s.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{s.name}</TableCell>
@@ -229,8 +227,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
daemonsets: { daemonsets: {
title: 'DaemonSets', subtitle: i18n.t('kubernetes.namespaceresourcepage.se1c074'), icon: Boxes, title: 'DaemonSets', subtitle: '守护进程集', icon: Boxes,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('monitor.siteProtocol.http.expectedPrefix'), i18n.t('common.current'), i18n.t('common.ready'), i18n.t('k8s.column.image')], columns: ['名称', '命名空间', '期望', '当前', '就绪', '镜像'],
renderRow: (d, opts) => ( renderRow: (d, opts) => (
<TableRow key={d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30 cursor-pointer" onClick={() => opts.onDetail?.(d)}> <TableRow key={d.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30 cursor-pointer" onClick={() => opts.onDetail?.(d)}>
<TableCell className="font-medium text-[var(--dg-text-primary)]">{d.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{d.name}</TableCell>
@@ -243,8 +241,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
), ),
}, },
serviceaccounts: { serviceaccounts: {
title: 'ServiceAccounts', subtitle: i18n.t('kubernetes.namespaceresourcepage.s645c9a'), icon: Shield, title: 'ServiceAccounts', subtitle: '服务账号(RBAC 身份标识)', icon: Shield,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('kubernetes.namespaceresourcepage.sbaf7ed'), i18n.t('kubernetes.namespaceresourcepage.s260c11'), i18n.t('common.createdAt'), i18n.t('common.actions')], columns: ['名称', '命名空间', 'Secret数', '镜像拉取凭证', '创建时间', '操作'],
renderRow: (sa, opts) => ( renderRow: (sa, opts) => (
<TableRow key={sa.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={sa.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{sa.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{sa.name}</TableCell>
@@ -255,15 +253,15 @@ const RESOURCE_CONFIG: Record<ResourceType, {
</TableCell> </TableCell>
<TableCell className="text-xs text-[var(--dg-text-muted)]">{sa.age || '-'}</TableCell> <TableCell className="text-xs text-[var(--dg-text-muted)]">{sa.age || '-'}</TableCell>
<TableCell onClick={(e) => e.stopPropagation()}> <TableCell onClick={(e) => e.stopPropagation()}>
<Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" title=i18n.t('kubernetes.namespaceresourcepage.s4bde08') <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" title="查看YAML"
onClick={() => opts.onYaml?.(sa.name)}><FileCode className="h-3.5 w-3.5" /></Button> onClick={() => opts.onYaml?.(sa.name)}><FileCode className="h-3.5 w-3.5" /></Button>
</TableCell> </TableCell>
</TableRow> </TableRow>
), ),
}, },
roles: { roles: {
title: 'Roles', subtitle: i18n.t('kubernetes.namespaceresourcepage.s8905a6'), icon: Shield, title: 'Roles', subtitle: '命名空间级角色权限(RBAC)', icon: Shield,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('kubernetes.namespaceresourcepage.secde03'), i18n.t('system.apiKeyScope'), i18n.t('common.createdAt'), i18n.t('common.actions')], columns: ['名称', '命名空间', '规则数', '权限范围', '创建时间', '操作'],
renderRow: (r, opts) => { renderRow: (r, opts) => {
const verbs = r.verbs || []; const verbs = r.verbs || [];
const resources = r.resources || []; const resources = r.resources || [];
@@ -283,9 +281,9 @@ const RESOURCE_CONFIG: Record<ResourceType, {
<TableCell className="text-xs text-[var(--dg-text-muted)]">{r.age || '-'}</TableCell> <TableCell className="text-xs text-[var(--dg-text-muted)]">{r.age || '-'}</TableCell>
<TableCell onClick={(e) => e.stopPropagation()}> <TableCell onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" title=i18n.t('kubernetes.namespaceresourcepage.s4bde08') <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" title="查看YAML"
onClick={() => opts.onYaml?.(r.name)}><FileCode className="h-3.5 w-3.5" /></Button> onClick={() => opts.onYaml?.(r.name)}><FileCode className="h-3.5 w-3.5" /></Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-green)] hover:text-[var(--dg-green)]" title=i18n.t('common.edit') <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-green)] hover:text-[var(--dg-green)]" title="编辑"
onClick={() => opts.onEdit?.(r.name)}><Pencil className="h-3.5 w-3.5" /></Button> onClick={() => opts.onEdit?.(r.name)}><Pencil className="h-3.5 w-3.5" /></Button>
</div> </div>
</TableCell> </TableCell>
@@ -294,8 +292,8 @@ const RESOURCE_CONFIG: Record<ResourceType, {
}, },
}, },
rolebindings: { rolebindings: {
title: 'RoleBindings', subtitle: i18n.t('kubernetes.namespaceresourcepage.sca10fe'), icon: Shield, title: 'RoleBindings', subtitle: '角色绑定关系(RBAC 授权)', icon: Shield,
columns: [i18n.t('common.name'), i18n.t('k8s.column.namespace'), i18n.t('kubernetes.namespaceresourcepage.s227e5e'), i18n.t('kubernetes.namespaceresourcepage.s2667c7'), i18n.t('common.createdAt'), i18n.t('common.actions')], columns: ['名称', '命名空间', '角色引用', '绑定主体', '创建时间', '操作'],
renderRow: (rb, opts) => { renderRow: (rb, opts) => {
const subjects = rb.subjects || []; const subjects = rb.subjects || [];
const subjStr = subjects.length > 3 ? subjects.slice(0, 3).join(', ') + ` +${subjects.length - 3}` : subjects.join(', '); const subjStr = subjects.length > 3 ? subjects.slice(0, 3).join(', ') + ` +${subjects.length - 3}` : subjects.join(', ');
@@ -314,9 +312,9 @@ const RESOURCE_CONFIG: Record<ResourceType, {
<TableCell className="text-xs text-[var(--dg-text-muted)]">{rb.age || '-'}</TableCell> <TableCell className="text-xs text-[var(--dg-text-muted)]">{rb.age || '-'}</TableCell>
<TableCell onClick={(e) => e.stopPropagation()}> <TableCell onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" title=i18n.t('kubernetes.namespaceresourcepage.s4bde08') <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" title="查看YAML"
onClick={() => opts.onYaml?.(rb.name)}><FileCode className="h-3.5 w-3.5" /></Button> onClick={() => opts.onYaml?.(rb.name)}><FileCode className="h-3.5 w-3.5" /></Button>
<Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-green)] hover:text-[var(--dg-green)]" title=i18n.t('common.edit') <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-green)] hover:text-[var(--dg-green)]" title="编辑"
onClick={() => opts.onEdit?.(rb.name)}><Pencil className="h-3.5 w-3.5" /></Button> onClick={() => opts.onEdit?.(rb.name)}><Pencil className="h-3.5 w-3.5" /></Button>
</div> </div>
</TableCell> </TableCell>
@@ -327,7 +325,6 @@ const RESOURCE_CONFIG: Record<ResourceType, {
}; };
export default function NamespaceResourcePage() { export default function NamespaceResourcePage() {
const { t } = useTranslation();
const { clusterCode, namespace } = useParams<{ clusterCode: string; namespace: string }>(); const { clusterCode, namespace } = useParams<{ clusterCode: string; namespace: string }>();
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -442,26 +439,26 @@ export default function NamespaceResourcePage() {
if (!clusterCode || !namespace) return; if (!clusterCode || !namespace) return;
try { try {
await kubernetesApi.exportNamespaceResources(clusterCode, namespace); await kubernetesApi.exportNamespaceResources(clusterCode, namespace);
toast({ title: t('common.exportComplete'), description: t('kubernetes.namespaceresourcepage.sadafd4', { namespace: namespace }) }); toast({ title: '导出完成', description: `${namespace} 资源 YAML 已开始下载` });
} catch (e) { } catch (e) {
toast({ title: t('common.exportFailed'), description: (e as Error)?.message || String(e), variant: 'destructive' }); toast({ title: '导出失败', description: (e as Error)?.message || String(e), variant: 'destructive' });
} }
}; };
// Pod 删除 // Logan.Li // Pod 删除 // Logan.Li
const handleDeletePod = async (p: any) => { const handleDeletePod = async (p: any) => {
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.pod.deletePod'), title: '删除 Pod',
description: t('kubernetes.namespaceresourcepage.sc5bb25') + (p.name || '') + t('kubernetes.namespaceresourcepage.s3ec1f4'), description: '确认删除 Pod "' + (p.name || '') + '"?操作不可恢复。',
confirmText: t('common.delete'), confirmText: '删除',
}); });
if (!ok) return; if (!ok) return;
try { try {
await kubernetesApi.deletePod(clusterCode || '', namespace || '', p.name); await kubernetesApi.deletePod(clusterCode || '', namespace || '', p.name);
toast({ title: t('kubernetes.pod.deleted') }); toast({ title: 'Pod 已删除' });
loadData(); loadData();
} catch (e) { } catch (e) {
toast({ title: t('common.deleteFailed'), description: (e as any)?.message || String(e), variant: 'destructive' }); toast({ title: '删除失败', description: (e as any)?.message || String(e), variant: 'destructive' });
} }
}; };
@@ -470,7 +467,7 @@ export default function NamespaceResourcePage() {
const searchToolbar = ( const searchToolbar = (
<div className="relative w-56 flex-1 min-w-[200px] max-w-xs"> <div className="relative w-56 flex-1 min-w-[200px] max-w-xs">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
<Input placeholder=t('kubernetes.namespaceresourcepage.s64e327') value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" /> <Input placeholder="搜索..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
</div> </div>
); );
@@ -485,11 +482,11 @@ export default function NamespaceResourcePage() {
actions={( actions={(
<> <>
<Select value={clusterCode || ''} onValueChange={(v) => navigate(`/kubernetes/${v}/namespace/${namespace || 'default'}/${type}`)}> <Select value={clusterCode || ''} onValueChange={(v) => navigate(`/kubernetes/${v}/namespace/${namespace || 'default'}/${type}`)}>
<SelectTrigger className="w-48 h-9 dg-input"><SelectValue placeholder=t('k8s.topology.selectCluster') /></SelectTrigger> <SelectTrigger className="w-48 h-9 dg-input"><SelectValue placeholder="选择集群" /></SelectTrigger>
<SelectContent>{clusters.map((c) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>)}</SelectContent> <SelectContent>{clusters.map((c) => <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name}</SelectItem>)}</SelectContent>
</Select> </Select>
<Select value={namespace || ''} onValueChange={(v) => navigate(`/kubernetes/${clusterCode}/namespace/${v}/${type}`)}> <Select value={namespace || ''} onValueChange={(v) => navigate(`/kubernetes/${clusterCode}/namespace/${v}/${type}`)}>
<SelectTrigger className="w-40 h-9 dg-input"><SelectValue placeholder=t('k8s.column.namespace') /></SelectTrigger> <SelectTrigger className="w-40 h-9 dg-input"><SelectValue placeholder="命名空间" /></SelectTrigger>
<SelectContent className="max-h-[300px]">{namespaces.map((ns) => <SelectItem key={ns} value={ns}>{ns}</SelectItem>)}</SelectContent> <SelectContent className="max-h-[300px]">{namespaces.map((ns) => <SelectItem key={ns} value={ns}>{ns}</SelectItem>)}</SelectContent>
</Select> </Select>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
@@ -498,16 +495,16 @@ export default function NamespaceResourcePage() {
</Button> </Button>
{BULK_EXPORT_TYPES.includes(type) && ( {BULK_EXPORT_TYPES.includes(type) && (
<> <>
<Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportCSV} title=t('kubernetes.namespaceresourcepage.sef28d5')> <Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportCSV} title="导出CSV">
<Download className="h-3 w-3 mr-1" />CSV <Download className="h-3 w-3 mr-1" />CSV
</Button> </Button>
<Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportJSON} title=t('kubernetes.namespaceresourcepage.se11b48')> <Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportJSON} title="导出JSON">
<Download className="h-3 w-3 mr-1" />JSON <Download className="h-3 w-3 mr-1" />JSON
</Button> </Button>
</> </>
)} )}
{EXPORT_YAML_TYPES.includes(type) && ( {EXPORT_YAML_TYPES.includes(type) && (
<Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportYaml} title=t('kubernetes.namespaceresourcepage.s2f8992')> <Button variant="outline" size="sm" className="dg-btn-secondary text-xs" onClick={handleExportYaml} title="导出命名空间 YAML(tar.gz)">
<Download className="h-3 w-3 mr-1" />导出YAML <Download className="h-3 w-3 mr-1" />导出YAML
</Button> </Button>
)} )}
@@ -559,7 +556,7 @@ export default function NamespaceResourcePage() {
<TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">{config.columns.map((col) => <TableHead key={col} className="text-[var(--dg-text-secondary)]">{col}</TableHead>)}</TableRow></TableHeader> <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">{config.columns.map((col) => <TableHead key={col} className="text-[var(--dg-text-secondary)]">{col}</TableHead>)}</TableRow></TableHeader>
<TableBody> <TableBody>
{loading ? ( {loading ? (
<TableRow><TableCell colSpan={config.columns.length} className="text-center text-[var(--dg-text-muted)] py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />{t('common.loading')}</TableCell></TableRow> <TableRow><TableCell colSpan={config.columns.length} className="text-center text-[var(--dg-text-muted)] py-12"><Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />加载中...</TableCell></TableRow>
) : filtered.length === 0 ? ( ) : filtered.length === 0 ? (
<TableRow><TableCell colSpan={config.columns.length} className="text-center text-[var(--dg-text-muted)] py-12"><config.icon className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 {config.title}</TableCell></TableRow> <TableRow><TableCell colSpan={config.columns.length} className="text-center text-[var(--dg-text-muted)] py-12"><config.icon className="h-8 w-8 mx-auto mb-2 opacity-50" />暂无 {config.title}</TableCell></TableRow>
) : ( ) : (
@@ -601,7 +598,7 @@ export default function NamespaceResourcePage() {
<div className="p-5 space-y-5"> <div className="p-5 space-y-5">
{/* 基本信息 */} {/* 基本信息 */}
<div> <div>
<h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-3">{t('deploy.label.basicInfo')}</h4> <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-3">基本信息</h4>
{(() => { {(() => {
const p = podDetail; const p = podDetail;
const labels = p.labels || p.metadata?.labels || {}; const labels = p.labels || p.metadata?.labels || {};
@@ -612,23 +609,23 @@ export default function NamespaceResourcePage() {
return ( return (
<div className="grid grid-cols-2 gap-x-6 gap-y-2.5"> <div className="grid grid-cols-2 gap-x-6 gap-y-2.5">
<div> <div>
<span className="text-xs text-[var(--dg-text-muted)]">{t('common.name')}</span> <span className="text-xs text-[var(--dg-text-muted)]">名称</span>
<p className="text-sm text-[var(--dg-text-primary)] font-mono">{p.name || '-'}</p> <p className="text-sm text-[var(--dg-text-primary)] font-mono">{p.name || '-'}</p>
</div> </div>
<div> <div>
<span className="text-xs text-[var(--dg-text-muted)]">{t('k8s.column.namespace')}</span> <span className="text-xs text-[var(--dg-text-muted)]">命名空间</span>
<p className="text-sm text-[var(--dg-text-primary)]">{p.namespace || '-'}</p> <p className="text-sm text-[var(--dg-text-primary)]">{p.namespace || '-'}</p>
</div> </div>
<div> <div>
<span className="text-xs text-[var(--dg-text-muted)]">{t('common.status')}</span> <span className="text-xs text-[var(--dg-text-muted)]">状态</span>
<div><Badge className={statusMap[st] || 'bg-[var(--dg-text-muted)]/20 text-[var(--dg-text-secondary)]'}>{st}</Badge></div> <div><Badge className={statusMap[st] || 'bg-[var(--dg-text-muted)]/20 text-[var(--dg-text-secondary)]'}>{st}</Badge></div>
</div> </div>
<div> <div>
<span className="text-xs text-[var(--dg-text-muted)]">{t('common.createdAt')}</span> <span className="text-xs text-[var(--dg-text-muted)]">创建时间</span>
<p className="text-sm text-[var(--dg-text-primary)]">{created ? new Date(created).toLocaleString('zh-CN') : '-'}</p> <p className="text-sm text-[var(--dg-text-primary)]">{created ? new Date(created).toLocaleString('zh-CN') : '-'}</p>
</div> </div>
<div> <div>
<span className="text-xs text-[var(--dg-text-muted)]">{t('k8s.tab.nodes')}</span> <span className="text-xs text-[var(--dg-text-muted)]">节点</span>
<p className="text-sm text-[var(--dg-text-primary)]">{p.node_name || p.node || '-'}</p> <p className="text-sm text-[var(--dg-text-primary)]">{p.node_name || p.node || '-'}</p>
</div> </div>
<div> <div>
@@ -636,7 +633,7 @@ export default function NamespaceResourcePage() {
<p className="text-sm text-[var(--dg-text-primary)] font-mono">{p.ip || p.pod_ip || '-'}</p> <p className="text-sm text-[var(--dg-text-primary)] font-mono">{p.ip || p.pod_ip || '-'}</p>
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<span className="text-xs text-[var(--dg-text-muted)]">{t('common.tag')}</span> <span className="text-xs text-[var(--dg-text-muted)]">标签</span>
<div className="flex flex-wrap gap-1 mt-0.5"> <div className="flex flex-wrap gap-1 mt-0.5">
{Object.keys(labels).length === 0 ? <span className="text-xs text-[var(--dg-text-muted)]">-</span> {Object.keys(labels).length === 0 ? <span className="text-xs text-[var(--dg-text-muted)]">-</span>
: Object.entries(labels).map(([k, v]) => ( : Object.entries(labels).map(([k, v]) => (
@@ -646,7 +643,7 @@ export default function NamespaceResourcePage() {
</div> </div>
</div> </div>
<div className="col-span-2"> <div className="col-span-2">
<span className="text-xs text-[var(--dg-text-muted)]">{t('common.annotation')}</span> <span className="text-xs text-[var(--dg-text-muted)]">注解</span>
<div className="flex flex-wrap gap-1 mt-0.5"> <div className="flex flex-wrap gap-1 mt-0.5">
{Object.keys(annotations).length === 0 ? <span className="text-xs text-[var(--dg-text-muted)]">-</span> {Object.keys(annotations).length === 0 ? <span className="text-xs text-[var(--dg-text-muted)]">-</span>
: Object.entries(annotations).slice(0, 6).map(([k, v]) => ( : Object.entries(annotations).slice(0, 6).map(([k, v]) => (
@@ -662,19 +659,19 @@ export default function NamespaceResourcePage() {
{/* 现状详情(Conditions) */} {/* 现状详情(Conditions) */}
<div> <div>
<h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-3">{t('kubernetes.namespaceresourcepage.s1d8d6e')}</h4> <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-3">现状详情</h4>
{(() => { {(() => {
const cond: any[] = podDetail.conditions || podDetail.pod_conditions || []; const cond: any[] = podDetail.conditions || podDetail.pod_conditions || [];
if (cond.length === 0) return <p className="text-xs text-[var(--dg-text-muted)] py-2">{t('common.noData')}</p>; if (cond.length === 0) return <p className="text-xs text-[var(--dg-text-muted)] py-2">暂无数据</p>;
return ( return (
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-[var(--dg-text-muted)] text-xs">{t('common.type')}</TableHead> <TableHead className="text-[var(--dg-text-muted)] text-xs">类型</TableHead>
<TableHead className="text-[var(--dg-text-muted)] text-xs">{t('common.status')}</TableHead> <TableHead className="text-[var(--dg-text-muted)] text-xs">状态</TableHead>
<TableHead className="text-[var(--dg-text-muted)] text-xs">{t('common.updatedAt')}</TableHead> <TableHead className="text-[var(--dg-text-muted)] text-xs">更新时间</TableHead>
<TableHead className="text-[var(--dg-text-muted)] text-xs">{t('kubernetes.event.eventReason')}</TableHead> <TableHead className="text-[var(--dg-text-muted)] text-xs">原因</TableHead>
<TableHead className="text-[var(--dg-text-muted)] text-xs">{t('kubernetes.event.eventMessage')}</TableHead> <TableHead className="text-[var(--dg-text-muted)] text-xs">消息</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -705,7 +702,7 @@ export default function NamespaceResourcePage() {
</div> </div>
</div> </div>
<div className="flex justify-end px-5 py-3 border-t border-[var(--dg-border)]"> <div className="flex justify-end px-5 py-3 border-t border-[var(--dg-border)]">
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setPodDetail(null)}>{t('common.close')}</Button> <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setPodDetail(null)}>关闭</Button>
</div> </div>
</div> </div>
</div> </div>
@@ -22,10 +22,8 @@ import {
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import { useTranslation } from 'react-i18next';
export default function NodeDetailPage() { export default function NodeDetailPage() {
const { t } = useTranslation();
const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>(); const { clusterCode, nodeName } = useParams<{ clusterCode: string; nodeName: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const [data, setData] = useState<any>(null); const [data, setData] = useState<any>(null);
@@ -97,11 +95,11 @@ export default function NodeDetailPage() {
return ( return (
<PageShell <PageShell
variant="default" variant="default"
title={nodeName || t('kubernetes.nodedetailpage.sb88b98')} title={nodeName || '节点详情'}
subtitle={nodeSubtitle || clusterCode} subtitle={nodeSubtitle || clusterCode}
icon={<Server className="h-5 w-5" />} icon={<Server className="h-5 w-5" />}
loading={loading && !data} loading={loading && !data}
loadingLabel=t('kubernetes.nodedetailpage.sfdff61') loadingLabel="加载节点详情..."
actions={( actions={(
<> <>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
@@ -145,7 +143,7 @@ export default function NodeDetailPage() {
</h2> </h2>
<div className="space-y-2 text-xs"> <div className="space-y-2 text-xs">
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50"> <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">{t('kubernetes.node.containerRuntime')}</span> <span className="dg-text-muted">容器运行时</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.container_runtime || '-'}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{data.container_runtime || '-'}</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50"> <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
@@ -153,19 +151,19 @@ export default function NodeDetailPage() {
<span className="text-[var(--dg-text-secondary)] font-mono">{data.kubelet_version || '-'}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{data.kubelet_version || '-'}</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50"> <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">{t('server.csv.os')}</span> <span className="dg-text-muted">操作系统</span>
<span className="text-[var(--dg-text-secondary)]">{data.os_image || '-'}</span> <span className="text-[var(--dg-text-secondary)]">{data.os_image || '-'}</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50"> <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">{t('monitor.systemInfo.kernel')}</span> <span className="dg-text-muted">内核版本</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.kernel_version || '-'}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{data.kernel_version || '-'}</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50"> <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">{t('agent.agentArch')}</span> <span className="dg-text-muted">架构</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{data.architecture || '-'}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{data.architecture || '-'}</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50"> <div className="flex items-center justify-between py-1.5 border-b border-[var(--dg-border)]/50">
<span className="dg-text-muted">{t('common.createdAt')}</span> <span className="dg-text-muted">创建时间</span>
<span className="text-[var(--dg-text-secondary)]">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span> <span className="text-[var(--dg-text-secondary)]">{data.creation_time ? new Date(data.creation_time).toLocaleString('zh-CN') : '-'}</span>
</div> </div>
<div className="flex items-center justify-between py-1.5"> <div className="flex items-center justify-between py-1.5">
@@ -185,9 +183,9 @@ export default function NodeDetailPage() {
<div className="space-y-4 mt-4"> <div className="space-y-4 mt-4">
{/* CPU allocation (requested vs allocatable) */} {/* CPU allocation (requested vs allocatable) */}
<ResourceBar <ResourceBar
label=t('kubernetes.nodedetailpage.s7c3900') label="CPU 已分配"
used={t('kubernetes.nodedetailpage.s8c635b', { (data.cpu_request_m / 1000).toFixed(2): (data.cpu_request_m / 1000).toFixed(2) })} used={`${(data.cpu_request_m / 1000).toFixed(2)} 核`}
total={t('kubernetes.nodedetailpage.s3523f6', { data.cpu_allocatable: data.cpu_allocatable })} total={`${data.cpu_allocatable} 核`}
unit="" unit=""
pct={data.cpu_alloc_pct} pct={data.cpu_alloc_pct}
color="dg-text-green" color="dg-text-green"
@@ -195,9 +193,9 @@ export default function NodeDetailPage() {
{/* CPU real usage (from metrics) */} {/* CPU real usage (from metrics) */}
{data.cpu_usage_m && ( {data.cpu_usage_m && (
<ResourceBar <ResourceBar
label=t('kubernetes.nodedetailpage.s1ce996') label="CPU 实时使用"
used={data.cpu_usage_m} used={data.cpu_usage_m}
total={t('kubernetes.nodedetailpage.s2d6586', { data.cpu_capacity: data.cpu_capacity })} total={`${data.cpu_capacity} 核`}
unit="" unit=""
pct={(parseFloat(data.cpu_usage_m.replace('m', '')) / (data.cpu_capacity * 1000)) * 100} pct={(parseFloat(data.cpu_usage_m.replace('m', '')) / (data.cpu_capacity * 1000)) * 100}
color="dg-text-blue" color="dg-text-blue"
@@ -205,7 +203,7 @@ export default function NodeDetailPage() {
)} )}
{/* Memory allocation */} {/* Memory allocation */}
<ResourceBar <ResourceBar
label=t('kubernetes.nodedetailpage.sccf1cf') label="内存已分配"
used={`${data.mem_request_mi} Mi`} used={`${data.mem_request_mi} Mi`}
total={`${data.mem_allocatable_mb} Mi`} total={`${data.mem_allocatable_mb} Mi`}
unit="" unit=""
@@ -215,7 +213,7 @@ export default function NodeDetailPage() {
{/* Memory real usage */} {/* Memory real usage */}
{data.mem_usage_mi && ( {data.mem_usage_mi && (
<ResourceBar <ResourceBar
label=t('kubernetes.nodedetailpage.s841b8a') label="内存实时使用"
used={data.mem_usage_mi} used={data.mem_usage_mi}
total={`${data.mem_capacity_mb} Mi`} total={`${data.mem_capacity_mb} Mi`}
unit="" unit=""
@@ -225,7 +223,7 @@ export default function NodeDetailPage() {
)} )}
{/* Pod allocation */} {/* Pod allocation */}
<ResourceBar <ResourceBar
label=t('kubernetes.nodedetailpage.s55edf2') label="Pod 数量"
used={`${data.pod_count}`} used={`${data.pod_count}`}
total={`${data.pod_allocatable}`} total={`${data.pod_allocatable}`}
unit="" unit=""
@@ -236,15 +234,15 @@ export default function NodeDetailPage() {
{/* Capacity vs Allocatable raw */} {/* Capacity vs Allocatable raw */}
<div className="mt-4 pt-3 border-t border-[var(--dg-border)]/50 space-y-1 text-[11px] dg-text-muted"> <div className="mt-4 pt-3 border-t border-[var(--dg-border)]/50 space-y-1 text-[11px] dg-text-muted">
<div className="flex justify-between"> <div className="flex justify-between">
<span>{t('kubernetes.nodedetailpage.s8babfd')}</span> <span>CPU 容量 / 可分配</span>
<span className="font-mono">{data.cpu_capacity} / {data.cpu_allocatable} 核</span> <span className="font-mono">{data.cpu_capacity} / {data.cpu_allocatable} 核</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span>{t('kubernetes.nodedetailpage.s503852')}</span> <span>内存容量 / 可分配</span>
<span className="font-mono">{data.mem_capacity_mb} / {data.mem_allocatable_mb} Mi</span> <span className="font-mono">{data.mem_capacity_mb} / {data.mem_allocatable_mb} Mi</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span>{t('kubernetes.nodedetailpage.s674f45')}</span> <span>Pod 容量 / 可分配</span>
<span className="font-mono">{data.pod_capacity} / {data.pod_allocatable}</span> <span className="font-mono">{data.pod_capacity} / {data.pod_allocatable}</span>
</div> </div>
</div> </div>
@@ -261,7 +259,7 @@ export default function NodeDetailPage() {
<CheckCircle2 className="h-4 w-4 dg-text-blue" />节点条件 <CheckCircle2 className="h-4 w-4 dg-text-blue" />节点条件
</h2> </h2>
{(!data.conditions || data.conditions.length === 0) ? ( {(!data.conditions || data.conditions.length === 0) ? (
<p className="text-xs dg-text-muted py-4 text-center">{t('kubernetes.nodedetailpage.s0f03f9')}</p> <p className="text-xs dg-text-muted py-4 text-center">无条件数据</p>
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
{data.conditions.map(( cond: any, i: number) => ( {data.conditions.map(( cond: any, i: number) => (
@@ -288,7 +286,7 @@ export default function NodeDetailPage() {
<AlertTriangle className="h-4 w-4 dg-text-yellow" />污点 (Taints) <AlertTriangle className="h-4 w-4 dg-text-yellow" />污点 (Taints)
</h2> </h2>
{(!data.taints || data.taints.length === 0) ? ( {(!data.taints || data.taints.length === 0) ? (
<p className="text-xs dg-text-muted py-4 text-center">{t('kubernetes.node.noTaint')}</p> <p className="text-xs dg-text-muted py-4 text-center">无污点</p>
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
{data.taints.map(( t: any, i: number) => ( {data.taints.map(( t: any, i: number) => (
@@ -335,18 +333,18 @@ export default function NodeDetailPage() {
</h2> </h2>
</div> </div>
{(!data.pods || data.pods.length === 0) ? ( {(!data.pods || data.pods.length === 0) ? (
<p className="text-xs dg-text-muted py-8 text-center">{t('kubernetes.nodedetailpage.s86d276')}</p> <p className="text-xs dg-text-muted py-8 text-center">该节点上暂无 Pod</p>
) : ( ) : (
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">{t('k8s.column.namespace')}</TableHead> <TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">{t('common.name')}</TableHead> <TableHead className="dg-text-secondary">名称</TableHead>
<TableHead className="dg-text-secondary">{t('common.status')}</TableHead> <TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary">IP</TableHead> <TableHead className="dg-text-secondary">IP</TableHead>
<TableHead className="dg-text-secondary">{t('kubernetes.node.cpuRequests')}</TableHead> <TableHead className="dg-text-secondary">CPU 请求</TableHead>
<TableHead className="dg-text-secondary">{t('kubernetes.node.memoryRequests')}</TableHead> <TableHead className="dg-text-secondary">内存请求</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.column.restartCount')}</TableHead> <TableHead className="dg-text-secondary">重启次数</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -22,7 +22,6 @@ import {
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { useTranslation } from 'react-i18next';
export interface PodExecTerminalProps { export interface PodExecTerminalProps {
open: boolean; open: boolean;
@@ -50,7 +49,6 @@ export function PodExecTerminal({
containers = [], containers = [],
initialContainer, initialContainer,
}: PodExecTerminalProps) { }: PodExecTerminalProps) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const termRef = useRef<XTerm | null>(null); const termRef = useRef<XTerm | null>(null);
@@ -94,7 +92,7 @@ export function PodExecTerminal({
setConnState('connecting'); setConnState('connecting');
term.clear(); term.clear();
term.writeln(t('kubernetes.podexecterminal.s2f4703', { podName: podName, container ? '/' + container : '': container ? '/' + container : '', shell: shell })); term.writeln(`\x1b[36m[正在连接 ${podName}${container ? '/' + container : ''} shell=${shell} ...]\x1b[0m`);
const wsUrl = kubernetesApi.buildPodExecWsUrl(clusterId, namespace, podName, container || undefined, shell); const wsUrl = kubernetesApi.buildPodExecWsUrl(clusterId, namespace, podName, container || undefined, shell);
@@ -118,9 +116,9 @@ export function PodExecTerminal({
if (msg.status === 0 && typeof msg.data === 'string') { if (msg.status === 0 && typeof msg.data === 'string') {
term.write(msg.data); term.write(msg.data);
} else if (msg.status === 2 || msg.error) { } else if (msg.status === 2 || msg.error) {
const errMsg = msg.data || msg.message || msg.error || t('kubernetes.podexecterminal.s05f6e9'); const errMsg = msg.data || msg.message || msg.error || '执行错误';
if (errMsg.includes('not found') && shell === 'bash') { if (errMsg.includes('not found') && shell === 'bash') {
term.writeln(t('kubernetes.podexecterminal.s14481b')); term.writeln('\r\n\x1b[33m⚠ bash 不可用,请切换 /bin/sh 后重连。\x1b[0m');
errorShownRef.current = true; errorShownRef.current = true;
return; return;
} }
@@ -134,14 +132,14 @@ export function PodExecTerminal({
ws.onclose = (_ev) => { ws.onclose = (_ev) => {
setConnState((s) => (s === 'error' ? s : 'closed')); setConnState((s) => (s === 'error' ? s : 'closed'));
if (!errorShownRef.current) { if (!errorShownRef.current) {
term.write(t('kubernetes.podexecterminal.s123d94')); term.write('\r\n\x1b[33m[连接已关闭]\x1b[0m\r\n');
} }
}; };
ws.onerror = (ev) => { ws.onerror = (ev) => {
console.error('[PodExec:connect] WS error event fired, readyState=', ws.readyState, 'type=', ev.type); console.error('[PodExec:connect] WS error event fired, readyState=', ws.readyState, 'type=', ev.type);
setConnState('error'); setConnState('error');
term.write(t('kubernetes.podexecterminal.sc81077')); term.write('\r\n\x1b[31m[连接发生错误]\x1b[0m\r\n');
}; };
}, [clusterId, namespace, podName, container, shell]); }, [clusterId, namespace, podName, container, shell]);
@@ -268,10 +266,10 @@ export function PodExecTerminal({
const statusColor = connState === 'connected' ? 'bg-emerald-400' const statusColor = connState === 'connected' ? 'bg-emerald-400'
: connState === 'error' ? 'bg-red-400' : connState === 'error' ? 'bg-red-400'
: connState === 'closed' ? 'bg-[var(--dg-bg-active)]' : 'bg-amber-400'; : connState === 'closed' ? 'bg-[var(--dg-bg-active)]' : 'bg-amber-400';
const statusText = connState === 'connected' ? t('common.connected') const statusText = connState === 'connected' ? '已连接'
: connState === 'connecting' ? t('common.connecting') : connState === 'connecting' ? '连接中'
: connState === 'error' ? t('kubernetes.podexecterminal.sd52359') : connState === 'error' ? '连接错误'
: connState === 'closed' ? t('common.disconnected') : t('common.idle'); : connState === 'closed' ? '已断开' : '空闲';
const handleTerminalClick = useCallback(() => { const handleTerminalClick = useCallback(() => {
try { termRef.current?.focus(); } catch { /* noop */ } try { termRef.current?.focus(); } catch { /* noop */ }
@@ -291,7 +289,7 @@ export function PodExecTerminal({
style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '960px', width: '92vw' }} style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '960px', width: '92vw' }}
> >
<DialogTitle className="sr-only">exec — {podName}</DialogTitle> <DialogTitle className="sr-only">exec — {podName}</DialogTitle>
<DialogDescription className="sr-only">{t('kubernetes.podexecterminal.s1a62d4')}</DialogDescription> <DialogDescription className="sr-only">进入 Pod 容器执行命令</DialogDescription>
{/* 工具栏 */} {/* 工具栏 */}
<div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap"> <div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap">
@@ -307,7 +305,7 @@ export function PodExecTerminal({
<Select value={container} onValueChange={setContainer}> <Select value={container} onValueChange={setContainer}>
<SelectTrigger className="h-8 w-[150px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]"> <SelectTrigger className="h-8 w-[150px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
<Box className="h-3 w-3 mr-1 text-[var(--dg-text-muted)]" /> <Box className="h-3 w-3 mr-1 text-[var(--dg-text-muted)]" />
<SelectValue placeholder=t('k8s.pods.containers') /> <SelectValue placeholder="容器" />
</SelectTrigger> </SelectTrigger>
<SelectContent>{containers.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}</SelectContent> <SelectContent>{containers.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}</SelectContent>
</Select> </Select>
@@ -319,13 +317,13 @@ export function PodExecTerminal({
<SelectContent>{SHELLS.map(s => <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>)}</SelectContent> <SelectContent>{SHELLS.map(s => <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>)}</SelectContent>
</Select> </Select>
<Button variant="ghost" size="sm" className="h-8 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]" <Button variant="ghost" size="sm" className="h-8 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
onClick={() => { connect(); toast({ title: t('kubernetes.podexecterminal.sad127c') }); }} title=t('kubernetes.podexecterminal.s114d0e')> onClick={() => { connect(); toast({ title: '正在重连…' }); }} title="重连">
<RotateCw className="h-3.5 w-3.5" /> <RotateCw className="h-3.5 w-3.5" />
</Button> </Button>
<button onClick={() => setFullscreen(!fullscreen)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" title={fullscreen ? t('common.exitFullscreen') : t('common.fullscreen')}> <button onClick={() => setFullscreen(!fullscreen)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" title={fullscreen ? '退出全屏' : '全屏'}>
{fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />} {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
</button> </button>
<button onClick={() => onOpenChange(false)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" title=t('common.close')> <button onClick={() => onOpenChange(false)} className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" title="关闭">
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
@@ -18,7 +18,6 @@ import {
HardDrive, HardDrive,
} from 'lucide-react'; } from 'lucide-react';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export interface PodFileBrowserProps { export interface PodFileBrowserProps {
@@ -41,7 +40,6 @@ interface FileEntry {
export function PodFileBrowser({ export function PodFileBrowser({
open, onOpenChange, clusterCode, namespace, podName, containers = [], initialContainer, open, onOpenChange, clusterCode, namespace, podName, containers = [], initialContainer,
}: PodFileBrowserProps) { }: PodFileBrowserProps) {
const { t } = useTranslation();
const [container, setContainer] = useState(initialContainer || containers[0] || ''); const [container, setContainer] = useState(initialContainer || containers[0] || '');
const [currentPath, setCurrentPath] = useState('/'); const [currentPath, setCurrentPath] = useState('/');
const [entries, setEntries] = useState<FileEntry[]>([]); const [entries, setEntries] = useState<FileEntry[]>([]);
@@ -69,7 +67,7 @@ export function PodFileBrowser({
setEntries(list); setEntries(list);
setCurrentPath(path); setCurrentPath(path);
} catch (e) { } catch (e) {
setError((e as JsonData).message || t('kubernetes.podfilebrowser.s78d4a7')); setError((e as JsonData).message || '加载文件列表失败');
setEntries([]); setEntries([]);
} finally { } finally {
setLoading(false); setLoading(false);
@@ -119,7 +117,7 @@ export function PodFileBrowser({
const text = await kubernetesApi.readPodFileText(clusterCode, namespace, podName, filePath, container || undefined); const text = await kubernetesApi.readPodFileText(clusterCode, namespace, podName, filePath, container || undefined);
setPreview({ file: fileName, content: text }); setPreview({ file: fileName, content: text });
} catch (e) { } catch (e) {
setPreview({ file: fileName, content: t('kubernetes.podfilebrowser.s888006', { (e as JsonData).message: (e as JsonData).message }) }); setPreview({ file: fileName, content: `读取失败: ${(e as JsonData).message}` });
} }
}; };
@@ -137,7 +135,7 @@ export function PodFileBrowser({
await kubernetesApi.uploadPodFile(clusterCode, namespace, podName, currentPath, file, container || undefined); await kubernetesApi.uploadPodFile(clusterCode, namespace, podName, currentPath, file, container || undefined);
loadFiles(currentPath); loadFiles(currentPath);
} catch (err) { } catch (err) {
setError(t('kubernetes.podfilebrowser.s560770', { (err as JsonData).message: (err as JsonData).message })); setError(`上传失败: ${(err as JsonData).message}`);
} finally { } finally {
setUploading(false); setUploading(false);
if (fileInputRef.current) fileInputRef.current.value = ''; if (fileInputRef.current) fileInputRef.current.value = '';
@@ -227,7 +225,7 @@ export function PodFileBrowser({
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin dg-text-muted" /></div> <div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin dg-text-muted" /></div>
) : entries.length === 0 ? ( ) : entries.length === 0 ? (
<p className="text-xs dg-text-muted p-4 text-center">{t('kubernetes.workload.emptyDir')}</p> <p className="text-xs dg-text-muted p-4 text-center">空目录</p>
) : ( ) : (
<div className="space-y-0.5"> <div className="space-y-0.5">
{entries.sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1)).map((entry) => ( {entries.sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1)).map((entry) => (
@@ -251,7 +249,7 @@ export function PodFileBrowser({
<Button <Button
variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 dg-text-secondary hover:dg-text-green shrink-0" variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 dg-text-secondary hover:dg-text-green shrink-0"
onClick={(e) => { e.stopPropagation(); handleDownload(entry.name); }} onClick={(e) => { e.stopPropagation(); handleDownload(entry.name); }}
title=t('common.download') title="下载"
> >
<Download className="h-3 w-3" /> <Download className="h-3 w-3" />
</Button> </Button>
@@ -273,7 +271,7 @@ export function PodFileBrowser({
</div> </div>
<div className="flex-1 overflow-auto p-3"> <div className="flex-1 overflow-auto p-3">
<pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] rounded p-3"> <pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] rounded p-3">
{preview.content || t('kubernetes.podfilebrowser.sf42649')} {preview.content || '(空文件)'}
</pre> </pre>
</div> </div>
</div> </div>
@@ -22,8 +22,6 @@ import { cn } from '@/lib/utils';
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
/** /**
* 增强版 Pod 日志查看器 — 增强 DeploymentDetail 的日志体验 * 增强版 Pod 日志查看器 — 增强 DeploymentDetail 的日志体验
@@ -53,10 +51,10 @@ interface PodLogsViewerProps {
} }
const TAIL_OPTIONS = [ const TAIL_OPTIONS = [
{ value: '100', label: i18n.t('kubernetes.podlogsviewer.s58b02a') }, { value: '100', label: '最近 100 行' },
{ value: '500', label: i18n.t('kubernetes.podlogsviewer.s9a0368') }, { value: '500', label: '最近 500 行' },
{ value: '1000', label: i18n.t('kubernetes.podlogsviewer.sf89a33') }, { value: '1000', label: '最近 1000 行' },
{ value: '0', label: i18n.t('common.all') }, { value: '0', label: '全部' },
]; ];
// 环形缓冲大小(借鉴 opsx-agent) // 环形缓冲大小(借鉴 opsx-agent)
@@ -76,7 +74,6 @@ export function PodLogsViewer({
containers = [], containers = [],
initialContainer, initialContainer,
}: PodLogsViewerProps) { }: PodLogsViewerProps) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
@@ -167,8 +164,8 @@ export function PodLogsViewer({
const arr = typeof raw === 'string' ? raw.split('\n') : (Array.isArray(raw) ? raw : String(raw).split('\n')); const arr = typeof raw === 'string' ? raw.split('\n') : (Array.isArray(raw) ? raw : String(raw).split('\n'));
appendLines(arr); appendLines(arr);
} catch (e) { } catch (e) {
appendLines([t('kubernetes.podlogsviewer.s69828a', { e?.message || String(e): e?.message || String(e) })]); appendLines([`\x1b[31m[获取日志失败: ${e?.message || String(e)}]\x1b[0m`]);
toast({ title: t('kubernetes.podlogsviewer.sc93f33'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '获取日志失败', description: e?.message || String(e), variant: 'destructive' });
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -228,12 +225,12 @@ export function PodLogsViewer({
} }
} }
flush(); // 收尾 flush(); // 收尾
appendLines([t('kubernetes.podlogsviewer.s4f0e17')]); appendLines(['\x1b[33m— 流式结束 —\x1b[0m']);
} catch (e) { } catch (e) {
if (e?.name === 'AbortError') { if (e?.name === 'AbortError') {
appendLines([t('kubernetes.podlogsviewer.s1ca901')]); appendLines(['\x1b[33m— 已停止 —\x1b[0m']);
} else { } else {
appendLines([t('kubernetes.podlogsviewer.s11530d', { e?.message || String(e): e?.message || String(e) })]); appendLines([`\x1b[31m[流式连接中断: ${e?.message || String(e)}]\x1b[0m`]);
} }
} finally { } finally {
setStreaming(false); setStreaming(false);
@@ -278,7 +275,7 @@ export function PodLogsViewer({
a.download = filename; a.download = filename;
a.click(); a.click();
URL.revokeObjectURL(a.href); URL.revokeObjectURL(a.href);
toast({ title: t('kubernetes.podlogsviewer.s5c51c3'), description: filename }); toast({ title: '已导出', description: filename });
}, [podName, container, previous, toast]); }, [podName, container, previous, toast]);
// 关键字过滤 // 关键字过滤
@@ -333,7 +330,7 @@ export function PodLogsViewer({
style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '1100px', width: '94vw' }} style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '1100px', width: '94vw' }}
> >
<DialogTitle className="sr-only">日志 — {podName}</DialogTitle> <DialogTitle className="sr-only">日志 — {podName}</DialogTitle>
<DialogDescription className="sr-only">{t('kubernetes.podlogsviewer.s24ae3a')}</DialogDescription> <DialogDescription className="sr-only">Pod 容器日志查看</DialogDescription>
{/* 头部工具栏 */} {/* 头部工具栏 */}
<div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap"> <div className="flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--dg-border)] flex-wrap">
@@ -346,8 +343,8 @@ export function PodLogsViewer({
<span className="text-[var(--dg-text-primary)] font-medium truncate">日志 — {podName}</span> <span className="text-[var(--dg-text-primary)] font-medium truncate">日志 — {podName}</span>
{loading && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />} {loading && <Loader2 className="h-3 w-3 animate-spin text-[var(--dg-text-muted)]" />}
<span className="text-xs text-[var(--dg-text-muted)]"> <span className="text-xs text-[var(--dg-text-muted)]">
{streaming ? (paused ? t('kubernetes.deployment.paused') : t('kubernetes.podlogsviewer.sd9c71f')) : t('common.stopped')} · {matchedCount}{keyword ? `/${lineCount}` : ''} 行 {streaming ? (paused ? '已暂停' : '实时跟踪') : '已停止'} · {matchedCount}{keyword ? `/${lineCount}` : ''} 行
{lineCount >= RING_BUFFER_MAX && t('kubernetes.podlogsviewer.sf3280b')} {lineCount >= RING_BUFFER_MAX && ' (缓冲已满)'}
</span> </span>
</div> </div>
@@ -355,14 +352,14 @@ export function PodLogsViewer({
<button <button
onClick={() => setFullscreen(!fullscreen)} onClick={() => setFullscreen(!fullscreen)}
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
title={fullscreen ? t('common.exitFullscreen') : t('common.fullscreen')} title={fullscreen ? '退出全屏' : '全屏'}
> >
{fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />} {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
</button> </button>
<button <button
onClick={handleClose} onClick={handleClose}
className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]" className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
title=t('common.close') title="关闭"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
@@ -376,7 +373,7 @@ export function PodLogsViewer({
<Select value={container} onValueChange={setContainer}> <Select value={container} onValueChange={setContainer}>
<SelectTrigger className="h-8 w-[150px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]"> <SelectTrigger className="h-8 w-[150px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)]">
<Box className="h-3 w-3 mr-1 text-[var(--dg-text-muted)]" /> <Box className="h-3 w-3 mr-1 text-[var(--dg-text-muted)]" />
<SelectValue placeholder=t('k8s.pods.containers') /> <SelectValue placeholder="容器" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{containers.map((c) => ( {containers.map((c) => (
@@ -404,7 +401,7 @@ export function PodLogsViewer({
size="sm" size="sm"
className={cn('h-8 text-xs', previous ? 'bg-amber-600 hover:bg-amber-700' : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)]')} className={cn('h-8 text-xs', previous ? 'bg-amber-600 hover:bg-amber-700' : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)]')}
onClick={() => setPrevious(!previous)} onClick={() => setPrevious(!previous)}
title=t('kubernetes.podlogsviewer.s76a2e6') title="查看上一次(崩溃)容器的日志"
> >
<History className="h-3.5 w-3.5 mr-1" /> <History className="h-3.5 w-3.5 mr-1" />
previous previous
@@ -421,7 +418,7 @@ export function PodLogsViewer({
setSinceTime(v ? new Date(v).toISOString() : ''); setSinceTime(v ? new Date(v).toISOString() : '');
}} }}
className="h-8 w-[170px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" className="h-8 w-[170px] text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
title=t('kubernetes.podlogsviewer.s127892') title="起始时间(sinceTime)"
/> />
</div> </div>
@@ -433,7 +430,7 @@ export function PodLogsViewer({
<Input <Input
value={keyword} value={keyword}
onChange={(e) => setKeyword(e.target.value)} onChange={(e) => setKeyword(e.target.value)}
placeholder=t('kubernetes.podlogsviewer.s7558f1') placeholder="关键字过滤…"
className="h-8 w-[160px] pl-7 text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" className="h-8 w-[160px] pl-7 text-xs bg-[var(--dg-bg-hover)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/> />
</div> </div>
@@ -443,7 +440,7 @@ export function PodLogsViewer({
variant="outline" size="sm" variant="outline" size="sm"
className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]" className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
onClick={handleDownload} onClick={handleDownload}
title=t('kubernetes.podlogsviewer.s1a023d') title="导出当前日志"
disabled={filteredLines.length === 0} disabled={filteredLines.length === 0}
> >
<Download className="h-3.5 w-3.5 mr-1" />导出 <Download className="h-3.5 w-3.5 mr-1" />导出
@@ -455,7 +452,7 @@ export function PodLogsViewer({
className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]" className="h-8 text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
onClick={fetchLogs} onClick={fetchLogs}
disabled={loading} disabled={loading}
title=t('kubernetes.podlogsviewer.s930b4e') title="重新拉取"
> >
<RefreshCw className={cn('h-3.5 w-3.5 mr-1', loading && 'animate-spin')} />刷新 <RefreshCw className={cn('h-3.5 w-3.5 mr-1', loading && 'animate-spin')} />刷新
</Button> </Button>
@@ -467,7 +464,7 @@ export function PodLogsViewer({
className="h-8 text-xs bg-emerald-600 hover:bg-emerald-700" className="h-8 text-xs bg-emerald-600 hover:bg-emerald-700"
onClick={startStream} onClick={startStream}
disabled={loading} disabled={loading}
title=t('kubernetes.podlogsviewer.s0d519c') title="实时跟踪(tail -f)"
> >
<Play className="h-3.5 w-3.5 mr-1" />实时 <Play className="h-3.5 w-3.5 mr-1" />实时
</Button> </Button>
@@ -477,16 +474,16 @@ export function PodLogsViewer({
variant="outline" size="sm" variant="outline" size="sm"
className={cn('h-8 text-xs', paused ? 'border-emerald-500 dg-text-green' : 'border-amber-500 dg-text-yellow')} className={cn('h-8 text-xs', paused ? 'border-emerald-500 dg-text-green' : 'border-amber-500 dg-text-yellow')}
onClick={() => setPaused(!paused)} onClick={() => setPaused(!paused)}
title={paused ? t('common.continue') : t('common.pause')} title={paused ? '继续' : '暂停'}
> >
{paused ? <Play className="h-3.5 w-3.5 mr-1" /> : <Pause className="h-3.5 w-3.5 mr-1" />} {paused ? <Play className="h-3.5 w-3.5 mr-1" /> : <Pause className="h-3.5 w-3.5 mr-1" />}
{paused ? t('common.continue') : t('common.pause')} {paused ? '继续' : '暂停'}
</Button> </Button>
<Button <Button
variant="outline" size="sm" variant="outline" size="sm"
className="h-8 text-xs border-red-500 dg-text-red" className="h-8 text-xs border-red-500 dg-text-red"
onClick={stopStream} onClick={stopStream}
title=t('common.stop') title="停止"
> >
<Pause className="h-3.5 w-3.5 mr-1" />停止 <Pause className="h-3.5 w-3.5 mr-1" />停止
</Button> </Button>
@@ -513,7 +510,7 @@ export function PodLogsViewer({
{lineCount === 0 && !loading && ( {lineCount === 0 && !loading && (
<div className="flex flex-col items-center justify-center h-full text-[var(--dg-text-muted)]"> <div className="flex flex-col items-center justify-center h-full text-[var(--dg-text-muted)]">
<AlertCircle className="h-8 w-8 mb-2 opacity-50" /> <AlertCircle className="h-8 w-8 mb-2 opacity-50" />
<span>{t('pipeline.noLog')}</span> <span>暂无日志</span>
</div> </div>
)} )}
{loading && lineCount === 0 && ( {loading && lineCount === 0 && (
@@ -545,7 +542,7 @@ export function PodLogsViewer({
} }
}} }}
> >
<Maximize2 className="h-3 w-3" />{autoScroll ? t('kubernetes.podlogsviewer.sd7eb1e') : t('kubernetes.podlogsviewer.s130db3')} <Maximize2 className="h-3 w-3" />{autoScroll ? '跟随底部' : '已暂停跟随'}
</button> </button>
</div> </div>
</DialogContent> </DialogContent>
@@ -14,10 +14,8 @@ import { PageShell } from '@/components/layout/PageShell';
import { ContentPanel } from '@/components/layout/ContentPanel'; import { ContentPanel } from '@/components/layout/ContentPanel';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export default function PodMetricsPage() { export default function PodMetricsPage() {
const { t } = useTranslation();
const { clusterCode } = useParams<{ clusterCode: string }>(); const { clusterCode } = useParams<{ clusterCode: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -87,15 +85,15 @@ export default function PodMetricsPage() {
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('kubernetes.podmetricspage.s94c067') title="Pod 资源用量"
subtitle={clusterName ? t('kubernetes.podmetricspage.sc3a5a8', { clusterName: clusterName }) : t('kubernetes.podmetricspage.s6dbb5e')} subtitle={clusterName ? `${clusterName} · 容器 CPU/内存实时指标` : '容器 CPU/内存实时指标'}
icon={<Activity className="h-5 w-5" />} icon={<Activity className="h-5 w-5" />}
metrics={!loading ? ( metrics={!loading ? (
<StatStrip <StatStrip
items={[ items={[
{ label: t('kubernetes.node.podCount'), value: metrics.length, color: 'muted' }, { label: 'Pod 数', value: metrics.length, color: 'muted' },
{ label: t('kubernetes.podmetricspage.sac1fc3'), value: `${totalCPU}m`, color: 'blue' }, { label: '总 CPU', value: `${totalCPU}m`, color: 'blue' },
{ label: t('monitor.systemInfo.memTotal'), value: `${totalMem.toFixed(0)}Mi`, color: 'green' }, { label: '总内存', value: `${totalMem.toFixed(0)}Mi`, color: 'green' },
]} ]}
/> />
) : undefined} ) : undefined}
@@ -108,9 +106,9 @@ export default function PodMetricsPage() {
</SelectContent> </SelectContent>
</Select> </Select>
<Select value={selectedNs} onValueChange={setSelectedNs}> <Select value={selectedNs} onValueChange={setSelectedNs}>
<SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder=t('kubernetes.podmetricspage.s58173b') /></SelectTrigger> <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder="所有命名空间" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">{t('kubernetes.podmetricspage.s58173b')}</SelectItem> <SelectItem value="all">所有命名空间</SelectItem>
{namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)} {namespaces.map(n => <SelectItem key={n} value={n}>{n}</SelectItem>)}
</SelectContent> </SelectContent>
</Select> </Select>
@@ -125,8 +123,8 @@ export default function PodMetricsPage() {
<Table> <Table>
<TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableHeader><TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="dg-text-secondary">Pod</TableHead> <TableHead className="dg-text-secondary">Pod</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.column.namespace')}</TableHead> <TableHead className="dg-text-secondary">命名空间</TableHead>
<TableHead className="dg-text-secondary">{t('k8s.pods.containers')}</TableHead> <TableHead className="dg-text-secondary">容器</TableHead>
<TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead> <TableHead className="dg-text-secondary"><Cpu className="h-3 w-3 inline mr-1" />CPU</TableHead>
<TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead> <TableHead className="dg-text-secondary"><HardDrive className="h-3 w-3 inline mr-1" />Memory</TableHead>
</TableRow></TableHeader> </TableRow></TableHeader>
@@ -17,7 +17,6 @@ import { YamlEditorToolbar } from './YamlEditorToolbar';
import { YamlCodeMirror } from './YamlCodeMirror'; import { YamlCodeMirror } from './YamlCodeMirror';
import { getYamlResourceConfig, yamlDownloadFilename } from './k8s-yaml-resource-config'; import { getYamlResourceConfig, yamlDownloadFilename } from './k8s-yaml-resource-config';
import { downloadYamlFile } from '@/utils/export'; import { downloadYamlFile } from '@/utils/export';
import { useTranslation } from 'react-i18next';
interface ResourceVisualEditorProps { interface ResourceVisualEditorProps {
clusterCode: string; clusterCode: string;
@@ -31,7 +30,6 @@ interface ResourceVisualEditorProps {
} }
export function ResourceVisualEditor({ clusterCode, namespace, resource, name, onClose, onSaved, isCreate = false }: ResourceVisualEditorProps) { export function ResourceVisualEditor({ clusterCode, namespace, resource, name, onClose, onSaved, isCreate = false }: ResourceVisualEditorProps) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -68,10 +66,10 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
setManifest(parsed); setManifest(parsed);
if (!parsed) { if (!parsed) {
setMode('yaml'); setMode('yaml');
toast({ title: t('kubernetes.resourcevisualeditor.s80ca4f'), description: t('kubernetes.resourcevisualeditor.scc94aa') }); toast({ title: '可视化编辑不可用', description: '无法解析资源结构,已切换到 YAML 编辑模式' });
} }
} catch (e) { } catch (e) {
toast({ title: t('common.loadFailed'), description: e instanceof Error ? e.message : String(e), variant: 'destructive' }); toast({ title: '加载失败', description: e instanceof Error ? e.message : String(e), variant: 'destructive' });
} finally { setLoading(false); } } finally { setLoading(false); }
}, [clusterCode, namespace, resource, name, isCreate]); }, [clusterCode, namespace, resource, name, isCreate]);
@@ -84,19 +82,19 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
const resName = updatedManifest?.metadata?.name || name; const resName = updatedManifest?.metadata?.name || name;
if (isCreate) { if (isCreate) {
if (!resName?.trim()) { if (!resName?.trim()) {
toast({ title: t('deploy.form.nameRequired'), variant: 'destructive' }); toast({ title: '请填写名称', variant: 'destructive' });
return; return;
} }
await kubernetesApi.applyYAML(clusterCode, yamlStr); await kubernetesApi.applyYAML(clusterCode, yamlStr);
toast({ title: t('monitor.dashboard.custom.toastCreateSuccess'), description: `${resource}/${resName}` }); toast({ title: '创建成功', description: `${resource}/${resName}` });
} else { } else {
await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, yamlStr); await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, yamlStr);
toast({ title: t('common.savedSuccessfully'), description: t('kubernetes.resourcevisualeditor.se7e1ac_0', { resource: resource, name: name }) }); toast({ title: '保存成功', description: `${resource}/${name} 已更新` });
} }
onSaved?.(); onSaved?.();
onClose(); onClose();
} catch (e) { } catch (e) {
toast({ title: isCreate ? t('monitor.quickSetupFailed') : t('common.saveFailed'), description: e instanceof Error ? e.message : String(e), variant: 'destructive' }); toast({ title: isCreate ? '创建失败' : '保存失败', description: e instanceof Error ? e.message : String(e), variant: 'destructive' });
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
@@ -106,10 +104,10 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
const yamlStr = await prepareYamlForSave(editYaml); const yamlStr = await prepareYamlForSave(editYaml);
if (isCreate) { if (isCreate) {
await kubernetesApi.applyYAML(clusterCode, yamlStr); await kubernetesApi.applyYAML(clusterCode, yamlStr);
toast({ title: t('monitor.dashboard.custom.toastCreateSuccess'), description: t('kubernetes.resourcevisualeditor.se5ff4b') }); toast({ title: '创建成功', description: 'YAML 已应用' });
} else { } else {
await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, yamlStr); await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, yamlStr);
toast({ title: t('common.savedSuccessfully'), description: t('kubernetes.resourcevisualeditor.se7e1ac', { resource: resource, name: name }) }); toast({ title: '保存成功', description: `${resource}/${name} 已更新` });
} }
setYamlEditing(false); setYamlEditing(false);
setDisplayYaml(yamlStr); setDisplayYaml(yamlStr);
@@ -118,7 +116,7 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
onSaved?.(); onSaved?.();
onClose(); onClose();
} catch (e) { } catch (e) {
toast({ title: t('common.saveFailed'), description: e instanceof Error ? e.message : String(e), variant: 'destructive' }); toast({ title: '保存失败', description: e instanceof Error ? e.message : String(e), variant: 'destructive' });
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
@@ -126,7 +124,7 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
const switchToVisual = async () => { const switchToVisual = async () => {
const parsed = await parseManifest(editYaml); const parsed = await parseManifest(editYaml);
if (!parsed) { if (!parsed) {
toast({ title: t('kubernetes.resourcevisualeditor.sf53bdf'), description: t('kubernetes.resourcevisualeditor.sf2219a'), variant: 'destructive' }); toast({ title: '无法解析 YAML', description: '请检查语法后继续用 YAML 模式', variant: 'destructive' });
return; return;
} }
setManifest(parsed); setManifest(parsed);
@@ -155,7 +153,7 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
const downloadYamlContent = () => { const downloadYamlContent = () => {
const fname = yamlDownloadFilename(resource, namespace, name || manifest?.metadata?.name || 'resource'); const fname = yamlDownloadFilename(resource, namespace, name || manifest?.metadata?.name || 'resource');
downloadYamlFile(fname, currentYamlText()); downloadYamlFile(fname, currentYamlText());
toast({ title: t('kubernetes.resourcevisualeditor.s9719fe'), description: fname }); toast({ title: '已下载', description: fname });
}; };
const resCfg = getYamlResourceConfig(resource); const resCfg = getYamlResourceConfig(resource);
@@ -181,7 +179,7 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
<MetaIcon className={`h-5 w-5 shrink-0 ${meta.color}`} /> <MetaIcon className={`h-5 w-5 shrink-0 ${meta.color}`} />
<div className="min-w-0"> <div className="min-w-0">
<h2 className="text-lg font-bold text-[var(--dg-text-primary)] truncate"> <h2 className="text-lg font-bold text-[var(--dg-text-primary)] truncate">
{isCreate ? t('kubernetes.resourcevisualeditor.s1876b4', { meta.title: meta.title }) : t('kubernetes.resourcevisualeditor.sc05c9e', { meta.title: meta.title })} {isCreate ? `新建 ${meta.title}` : `${meta.title} 编辑`}
</h2> </h2>
<p <p
className="text-xs text-[var(--dg-text-muted)] truncate" className="text-xs text-[var(--dg-text-muted)] truncate"
@@ -198,11 +196,11 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'visual' ? 'bg-blue-600 text-white' : 'bg-transparent text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`} className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'visual' ? 'bg-blue-600 text-white' : 'bg-transparent text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`}
onClick={() => { if (mode === 'yaml') switchToVisual(); else setMode('visual'); }} onClick={() => { if (mode === 'yaml') switchToVisual(); else setMode('visual'); }}
disabled={!manifest && mode !== 'yaml'} disabled={!manifest && mode !== 'yaml'}
>{t('k8s.resource.visualEditor')}</button> >可视化编辑</button>
<button <button
className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-blue-600 text-white' : 'bg-transparent text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`} className={`px-3 py-1.5 text-xs font-medium transition-colors ${mode === 'yaml' ? 'bg-blue-600 text-white' : 'bg-transparent text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`}
onClick={() => { if (mode === 'visual') switchToYaml(); else setMode('yaml'); }} onClick={() => { if (mode === 'visual') switchToYaml(); else setMode('yaml'); }}
>{t('k8s.resource.yamlEditor')}</button> >YAML 编辑</button>
</div> </div>
<Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)]" onClick={onClose}><X className="h-4 w-4" /></Button> <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)]" onClick={onClose}><X className="h-4 w-4" /></Button>
</div> </div>
@@ -261,16 +259,16 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
{!['configmaps', 'secrets', 'services', 'ingresses', 'pvcs'].includes(resource) && ( {!['configmaps', 'secrets', 'services', 'ingresses', 'pvcs'].includes(resource) && (
<div className="flex-1 flex items-center justify-center text-center text-[var(--dg-text-muted)]"> <div className="flex-1 flex items-center justify-center text-center text-[var(--dg-text-muted)]">
<div> <div>
<p>{t('kubernetes.resourcevisualeditor.sfeb34f')}</p> <p>该资源类型暂不支持可视化编辑</p>
<Button variant="outline" size="sm" className="mt-4" onClick={() => setMode('yaml')}>{t('kubernetes.resourcevisualeditor.s54c78d')}</Button> <Button variant="outline" size="sm" className="mt-4" onClick={() => setMode('yaml')}>切换到 YAML 编辑</Button>
</div> </div>
</div> </div>
)} )}
</div> </div>
) : ( ) : (
<div className="text-center py-12 text-[var(--dg-text-muted)]"> <div className="text-center py-12 text-[var(--dg-text-muted)]">
<p>{t('kubernetes.resourcevisualeditor.s8fe0ae')}</p> <p>无法解析资源结构</p>
<Button variant="outline" size="sm" className="mt-4" onClick={() => setMode('yaml')}>{t('kubernetes.resourcevisualeditor.s54c78d')}</Button> <Button variant="outline" size="sm" className="mt-4" onClick={() => setMode('yaml')}>切换到 YAML 编辑</Button>
</div> </div>
)} )}
</div> </div>
@@ -283,7 +281,6 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
// ConfigMap 编辑器 — 键值对表格 // ConfigMap 编辑器 — 键值对表格
// ══════════════════════════════════════════════ // ══════════════════════════════════════════════
function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) { function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
const { t } = useTranslation();
const data = manifest?.data || {}; const data = manifest?.data || {};
const [resName, setResName] = useState(manifest?.metadata?.name || ''); const [resName, setResName] = useState(manifest?.metadata?.name || '');
const [entries, setEntries] = useState<{ key: string; value: string }[]>( const [entries, setEntries] = useState<{ key: string; value: string }[]>(
@@ -311,18 +308,18 @@ function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="shrink-0"> <div className="shrink-0">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('common.name')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">名称</Label>
<Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" /> <Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
</div> </div>
<div className="flex-1 min-h-0 flex flex-col mt-3"> <div className="flex-1 min-h-0 flex flex-col mt-3">
<div className="flex items-center justify-between mb-2 shrink-0"> <div className="flex items-center justify-between mb-2 shrink-0">
<Label className="text-[var(--dg-text-secondary)] text-sm">{t('kubernetes.resourcevisualeditor.s6bd91c')}</Label> <Label className="text-[var(--dg-text-secondary)] text-sm">配置数据 (键值对)</Label>
<div className="flex gap-1"> <div className="flex gap-1">
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}>
{expandAll ? t('kubernetes.resourcevisualeditor.s880e84') : t('common.expandAll')} {expandAll ? '折叠全部' : '展开全部'}
</Button> </Button>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" />{t('common.add')}</Button> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" />添加</Button>
</div> </div>
</div> </div>
<div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2"> <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2">
@@ -331,13 +328,13 @@ function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any
<Input <Input
value={entry.key} value={entry.key}
onChange={e => update(i, 'key', e.target.value)} onChange={e => update(i, 'key', e.target.value)}
placeholder=t('kubernetes.resourcevisualeditor.s65017d') placeholder="键名 (如 LOG_LEVEL)"
className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/> />
<Textarea <Textarea
value={entry.value} value={entry.value}
onChange={e => update(i, 'value', e.target.value)} onChange={e => update(i, 'value', e.target.value)}
placeholder=t('k8s.resource.value') placeholder="值"
rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)} rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed" className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
/> />
@@ -347,7 +344,7 @@ function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any
</div> </div>
))} ))}
{entries.length === 0 && ( {entries.length === 0 && (
<div className="text-center py-8 text-[var(--dg-text-muted)] text-xs">{t('kubernetes.resourcevisualeditor.saf7696')}</div> <div className="text-center py-8 text-[var(--dg-text-muted)] text-xs">暂无配置数据,点击「添加」创建</div>
)} )}
</div> </div>
</div> </div>
@@ -366,7 +363,6 @@ function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any
// Secret 编辑器 — 键值对表格 (Base64 编码/解码) // Secret 编辑器 — 键值对表格 (Base64 编码/解码)
// ══════════════════════════════════════════════ // ══════════════════════════════════════════════
function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) { function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
const { t } = useTranslation();
const rawData = manifest?.data || {}; const rawData = manifest?.data || {};
const [resName, setResName] = useState(manifest?.metadata?.name || ''); const [resName, setResName] = useState(manifest?.metadata?.name || '');
const [expandAll, setExpandAll] = useState(false); const [expandAll, setExpandAll] = useState(false);
@@ -408,23 +404,23 @@ function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; o
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="shrink-0 grid grid-cols-2 gap-4"> <div className="shrink-0 grid grid-cols-2 gap-4">
<div> <div>
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('common.name')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">名称</Label>
<Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" /> <Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
</div> </div>
<div> <div>
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('common.type')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">类型</Label>
<Input value={manifest?.type || 'Opaque'} readOnly className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" /> <Input value={manifest?.type || 'Opaque'} readOnly className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
</div> </div>
</div> </div>
<div className="flex-1 min-h-0 flex flex-col mt-3"> <div className="flex-1 min-h-0 flex flex-col mt-3">
<div className="flex items-center justify-between mb-2 shrink-0"> <div className="flex items-center justify-between mb-2 shrink-0">
<Label className="text-[var(--dg-text-secondary)] text-sm">{t('kubernetes.resourcevisualeditor.se19370')}</Label> <Label className="text-[var(--dg-text-secondary)] text-sm">密钥数据 (已自动解码 Base64)</Label>
<div className="flex gap-1"> <div className="flex gap-1">
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}>
{expandAll ? t('kubernetes.resourcevisualeditor.s880e84') : t('common.expandAll')} {expandAll ? '折叠全部' : '展开全部'}
</Button> </Button>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" />{t('common.add')}</Button> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" />添加</Button>
</div> </div>
</div> </div>
<div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2"> <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2">
@@ -433,13 +429,13 @@ function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; o
<Input <Input
value={entry.key} value={entry.key}
onChange={e => update(i, 'key', e.target.value)} onChange={e => update(i, 'key', e.target.value)}
placeholder=t('kubernetes.resourcevisualeditor.scdecc4') placeholder="键名 (如 password)"
className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/> />
<Textarea <Textarea
value={entry.value} value={entry.value}
onChange={e => update(i, 'value', e.target.value)} onChange={e => update(i, 'value', e.target.value)}
placeholder=t('kubernetes.resourcevisualeditor.s7f123d') placeholder="明文值"
rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)} rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed" className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
/> />
@@ -449,7 +445,7 @@ function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; o
</div> </div>
))} ))}
{entries.length === 0 && ( {entries.length === 0 && (
<div className="text-center py-8 text-[var(--dg-text-muted)] text-xs">{t('kubernetes.resourcevisualeditor.s47ff69')}</div> <div className="text-center py-8 text-[var(--dg-text-muted)] text-xs">暂无密钥数据,点击「添加」创建</div>
)} )}
</div> </div>
</div> </div>
@@ -468,7 +464,6 @@ function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; o
// Service 编辑器 — 端口配置 + 类型 + 选择器 // Service 编辑器 — 端口配置 + 类型 + 选择器
// ══════════════════════════════════════════════ // ══════════════════════════════════════════════
function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) { function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
const { t } = useTranslation();
const spec = manifest?.spec || {}; const spec = manifest?.spec || {};
const [resName, setResName] = useState(manifest?.metadata?.name || ''); const [resName, setResName] = useState(manifest?.metadata?.name || '');
const [svcType, setSvcType] = useState(spec.type || 'ClusterIP'); const [svcType, setSvcType] = useState(spec.type || 'ClusterIP');
@@ -529,11 +524,11 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="shrink-0"> <div className="shrink-0">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('agent.agentServiceName')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">服务名称</Label>
<Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" /> <Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
</div> </div>
<div className="shrink-0 mt-3"> <div className="shrink-0 mt-3">
<Label className="text-[var(--dg-text-secondary)] text-xs mb-2 block">{t('k8s.resource.serviceType')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs mb-2 block">服务类型</Label>
<div className="flex rounded-lg border border-[var(--dg-border)] overflow-hidden w-fit"> <div className="flex rounded-lg border border-[var(--dg-border)] overflow-hidden w-fit">
{svcTypes.map((t) => ( {svcTypes.map((t) => (
<button <button
@@ -552,16 +547,16 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
<div className="flex-1 min-h-0 overflow-y-auto mt-3 pr-1 space-y-3"> <div className="flex-1 min-h-0 overflow-y-auto mt-3 pr-1 space-y-3">
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<Label className="text-[var(--dg-text-secondary)] text-sm">{t('kubernetes.resourcevisualeditor.s736788')}</Label> <Label className="text-[var(--dg-text-secondary)] text-sm">端口映射</Label>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={addPort}><Plus className="h-3 w-3 mr-1" />{t('agent.addPort')}</Button> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addPort}><Plus className="h-3 w-3 mr-1" />添加端口</Button>
</div> </div>
<div className="space-y-2 border border-[var(--dg-border)] rounded-lg p-2 bg-[var(--dg-bg-secondary)]"> <div className="space-y-2 border border-[var(--dg-border)] rounded-lg p-2 bg-[var(--dg-bg-secondary)]">
{ports.map((p, i) => ( {ports.map((p, i) => (
<div key={i} className="overflow-x-auto"> <div key={i} className="overflow-x-auto">
<div className="grid grid-cols-[minmax(80px,1fr)_80px_80px_80px_80px_32px] gap-2 items-center min-w-[480px]"> <div className="grid grid-cols-[minmax(80px,1fr)_80px_80px_80px_80px_32px] gap-2 items-center min-w-[480px]">
<Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)} placeholder=t('common.name') className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)} placeholder="名称" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Input value={p.port} onChange={e => updatePort(i, 'port', e.target.value)} placeholder=t('server.csv.port') type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={p.port} onChange={e => updatePort(i, 'port', e.target.value)} placeholder="端口" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)} placeholder=t('common.target') type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)} placeholder="目标" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Select value={p.protocol} onValueChange={v => updatePort(i, 'protocol', v)}> <Select value={p.protocol} onValueChange={v => updatePort(i, 'protocol', v)}>
<SelectTrigger className="h-7 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue /></SelectTrigger> <SelectTrigger className="h-7 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue /></SelectTrigger>
<SelectContent><SelectItem value="TCP">TCP</SelectItem><SelectItem value="UDP">UDP</SelectItem></SelectContent> <SelectContent><SelectItem value="TCP">TCP</SelectItem><SelectItem value="UDP">UDP</SelectItem></SelectContent>
@@ -573,26 +568,26 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
</div> </div>
</div> </div>
))} ))}
{ports.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">{t('kubernetes.resourcevisualeditor.sf3ba5e')}</div>} {ports.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">暂无端口,点击「添加端口」</div>}
</div> </div>
</div> </div>
{/* Selector */} {/* Selector */}
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<Label className="text-[var(--dg-text-secondary)] text-sm">{t('kubernetes.resourcevisualeditor.scecdd7')}</Label> <Label className="text-[var(--dg-text-secondary)] text-sm">选择器 (Selector)</Label>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={addSelector}><Plus className="h-3 w-3 mr-1" />{t('kubernetes.resourcevisualeditor.s736eaa')}</Button> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addSelector}><Plus className="h-3 w-3 mr-1" />添加标签</Button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{selector.map((s, i) => ( {selector.map((s, i) => (
<div key={i} className="flex items-center gap-2 min-w-0"> <div key={i} className="flex items-center gap-2 min-w-0">
<Input value={s.key} onChange={e => updateSelector(i, 'key', e.target.value)} placeholder=t('kubernetes.resourcevisualeditor.s450c99') className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={s.key} onChange={e => updateSelector(i, 'key', e.target.value)} placeholder="键 (如 app)" className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<span className="text-[var(--dg-text-muted)] text-xs shrink-0">=</span> <span className="text-[var(--dg-text-muted)] text-xs shrink-0">=</span>
<Input value={s.value} onChange={e => updateSelector(i, 'value', e.target.value)} placeholder=t('kubernetes.resourcevisualeditor.sb873e4') className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={s.value} onChange={e => updateSelector(i, 'value', e.target.value)} placeholder="值 (如 nginx)" className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button> <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button>
</div> </div>
))} ))}
{selector.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">{t('k8s.resource.noSelectors')}</div>} {selector.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">暂无选择器</div>}
</div> </div>
</div> </div>
</div> </div>
@@ -611,7 +606,6 @@ function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any;
// Ingress 编辑器 — Host/Path 路由规则 // Ingress 编辑器 — Host/Path 路由规则
// ══════════════════════════════════════════════ // ══════════════════════════════════════════════
function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { manifest: any; clusterCode: string; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) { function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { manifest: any; clusterCode: string; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
const { t } = useTranslation();
const spec = manifest?.spec || {}; const spec = manifest?.spec || {};
const [resName, setResName] = useState(manifest?.metadata?.name || ''); const [resName, setResName] = useState(manifest?.metadata?.name || '');
const [ingressClass, setIngressClass] = useState(spec.ingressClassName || 'nginx'); const [ingressClass, setIngressClass] = useState(spec.ingressClassName || 'nginx');
@@ -695,13 +689,13 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
<div className="flex flex-col h-full min-h-0"> <div className="flex flex-col h-full min-h-0">
<div className="shrink-0 grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="shrink-0 grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="min-w-0"> <div className="min-w-0">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('common.name')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">名称</Label>
<Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" /> <Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
</div> </div>
<div className="min-w-0"> <div className="min-w-0">
<Label className="text-[var(--dg-text-secondary)] text-xs flex items-center gap-1"> <Label className="text-[var(--dg-text-secondary)] text-xs flex items-center gap-1">
Ingress Class Ingress Class
<span className="text-[10px] text-[var(--dg-text-muted)]">{t('kubernetes.resourcevisualeditor.s6c9a78')}</span> <span className="text-[10px] text-[var(--dg-text-muted)]">(可选)</span>
</Label> </Label>
{/* IngressClass 下拉 + 手工输入支持 // Logan.Li */} {/* IngressClass 下拉 + 手工输入支持 // Logan.Li */}
<div className="space-y-1 mt-1"> <div className="space-y-1 mt-1">
@@ -714,7 +708,7 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
}} }}
> >
<SelectTrigger className="h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"> <SelectTrigger className="h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
<SelectValue placeholder={loadingClasses ? t('common.loading') : t('kubernetes.resourcevisualeditor.s25a87d')} /> <SelectValue placeholder={loadingClasses ? '加载中...' : '选择或输入 IngressClass'} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{ingressClasses.length > 0 ? ( {ingressClasses.length > 0 ? (
@@ -724,13 +718,13 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
</SelectItem> </SelectItem>
)) ))
) : ( ) : (
!loadingClasses && <div className="px-2 py-1.5 text-xs text-[var(--dg-text-muted)]">{t('kubernetes.resourcevisualeditor.s619a36')}</div> !loadingClasses && <div className="px-2 py-1.5 text-xs text-[var(--dg-text-muted)]">未发现 IngressClass,请手动输入</div>
)} )}
{/* 当前自定义值作为选项,确保选中态 */} {/* 当前自定义值作为选项,确保选中态 */}
{ingressClass && !ingressClasses.some((ic) => ic.name === ingressClass) && ( {ingressClass && !ingressClasses.some((ic) => ic.name === ingressClass) && (
<SelectItem value={ingressClass}>{ingressClass} (手动输入)</SelectItem> <SelectItem value={ingressClass}>{ingressClass} (手动输入)</SelectItem>
)} )}
<SelectItem value="__manual__">{t('kubernetes.resourcevisualeditor.se83eb1')}</SelectItem> <SelectItem value="__manual__">—— 继续手动输入 ——</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@@ -761,8 +755,8 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
</div> </div>
<div className="flex-1 min-h-0 flex flex-col mt-3"> <div className="flex-1 min-h-0 flex flex-col mt-3">
<div className="flex items-center justify-between mb-2 shrink-0"> <div className="flex items-center justify-between mb-2 shrink-0">
<Label className="text-[var(--dg-text-secondary)] text-sm">{t('k8s.resource.routeRules')}</Label> <Label className="text-[var(--dg-text-secondary)] text-sm">路由规则</Label>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRule}><Plus className="h-3 w-3 mr-1" />{t('kubernetes.resourcevisualeditor.s4f0a38')}</Button> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRule}><Plus className="h-3 w-3 mr-1" />添加 Host</Button>
</div> </div>
<div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-3 border border-[var(--dg-border)] rounded-lg p-2 bg-[var(--dg-bg-secondary)]"> <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-3 border border-[var(--dg-border)] rounded-lg p-2 bg-[var(--dg-bg-secondary)]">
{rules.map((rule, ri) => ( {rules.map((rule, ri) => (
@@ -771,7 +765,7 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
<Input <Input
value={rule.host} value={rule.host}
onChange={e => updateRule(ri, e.target.value)} onChange={e => updateRule(ri, e.target.value)}
placeholder=t('kubernetes.resourcevisualeditor.s33cde9') placeholder="域名 (如 api.example.com)"
className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
title={rule.host} title={rule.host}
/> />
@@ -780,21 +774,21 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
{rule.paths.map((p, pi) => ( {rule.paths.map((p, pi) => (
<div key={pi} className="overflow-x-auto pl-4"> <div key={pi} className="overflow-x-auto pl-4">
<div className="grid grid-cols-[minmax(80px,1fr)_100px_minmax(80px,1fr)_60px_28px] gap-1.5 items-center min-w-[420px]"> <div className="grid grid-cols-[minmax(80px,1fr)_100px_minmax(80px,1fr)_60px_28px] gap-1.5 items-center min-w-[420px]">
<Input value={p.path} onChange={e => updatePath(ri, pi, 'path', e.target.value)} placeholder=t('kubernetes.resourcevisualeditor.sdfd5eb') className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={p.path} onChange={e => updatePath(ri, pi, 'path', e.target.value)} placeholder="路径 /" className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Select value={p.pathType} onValueChange={v => updatePath(ri, pi, 'pathType', v)}> <Select value={p.pathType} onValueChange={v => updatePath(ri, pi, 'pathType', v)}>
<SelectTrigger className="h-7 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue /></SelectTrigger> <SelectTrigger className="h-7 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue /></SelectTrigger>
<SelectContent><SelectItem value="Prefix">Prefix</SelectItem><SelectItem value="Exact">Exact</SelectItem></SelectContent> <SelectContent><SelectItem value="Prefix">Prefix</SelectItem><SelectItem value="Exact">Exact</SelectItem></SelectContent>
</Select> </Select>
<Input value={p.serviceName} onChange={e => updatePath(ri, pi, 'serviceName', e.target.value)} placeholder="Service" className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={p.serviceName} onChange={e => updatePath(ri, pi, 'serviceName', e.target.value)} placeholder="Service" className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Input value={p.servicePort} onChange={e => updatePath(ri, pi, 'servicePort', e.target.value)} placeholder=t('server.csv.port') type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" /> <Input value={p.servicePort} onChange={e => updatePath(ri, pi, 'servicePort', e.target.value)} placeholder="端口" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePath(ri, pi)}><Trash2 className="h-3 w-3" /></Button> <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePath(ri, pi)}><Trash2 className="h-3 w-3" /></Button>
</div> </div>
</div> </div>
))} ))}
<Button variant="ghost" size="sm" className="h-6 text-xs text-[var(--dg-text-muted)]" onClick={() => addPath(ri)}><Plus className="h-3 w-3 mr-1" />{t('kubernetes.ingress.addPath')}</Button> <Button variant="ghost" size="sm" className="h-6 text-xs text-[var(--dg-text-muted)]" onClick={() => addPath(ri)}><Plus className="h-3 w-3 mr-1" />添加路径</Button>
</div> </div>
))} ))}
{rules.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">{t('kubernetes.resourcevisualeditor.s0b0794')}</div>} {rules.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs">暂无路由规则,点击「添加 Host」</div>}
</div> </div>
</div> </div>
<div className="shrink-0 flex justify-end gap-2 pt-3 mt-2 border-t border-[var(--dg-border)]"> <div className="shrink-0 flex justify-end gap-2 pt-3 mt-2 border-t border-[var(--dg-border)]">
@@ -811,7 +805,6 @@ function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { ma
// PVC 编辑器 — 存储大小/访问模式/StorageClass // PVC 编辑器 — 存储大小/访问模式/StorageClass
// ══════════════════════════════════════════════ // ══════════════════════════════════════════════
function PvcEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) { function PvcEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
const { t } = useTranslation();
const spec = manifest?.spec || {}; const spec = manifest?.spec || {};
const resources = spec.resources?.requests || {}; const resources = spec.resources?.requests || {};
const [resName, setResName] = useState(manifest?.metadata?.name || ''); const [resName, setResName] = useState(manifest?.metadata?.name || '');
@@ -835,30 +828,30 @@ function PvcEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSa
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="shrink-0"> <div className="shrink-0">
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('common.name')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">名称</Label>
<Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" /> <Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
</div> </div>
<div className="grid grid-cols-2 gap-4 mt-3 shrink-0"> <div className="grid grid-cols-2 gap-4 mt-3 shrink-0">
<div> <div>
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('kubernetes.resourcevisualeditor.s61aa82')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">存储大小</Label>
<Input <Input
value={size} value={size}
onChange={e => setSize(e.target.value)} onChange={e => setSize(e.target.value)}
placeholder=t('kubernetes.resourcevisualeditor.s1b915a') placeholder="如 10Gi"
className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/> />
<p className="text-[10px] text-[var(--dg-text-muted)] mt-1">{t('kubernetes.resourcevisualeditor.s6a1c7a')}</p> <p className="text-[10px] text-[var(--dg-text-muted)] mt-1">单位:Gi (GiB), Mi (MiB), Ti (TiB)</p>
</div> </div>
<div> <div>
<Label className="text-[var(--dg-text-secondary)] text-xs">{t('k8s.resource.accessMode')}</Label> <Label className="text-[var(--dg-text-secondary)] text-xs">访问模式</Label>
<Select value={accessMode} onValueChange={setAccessMode}> <Select value={accessMode} onValueChange={setAccessMode}>
<SelectTrigger className="mt-1 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] text-xs"> <SelectTrigger className="mt-1 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] text-xs">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="ReadWriteOnce">{t('kubernetes.resourcevisualeditor.se1444f')}</SelectItem> <SelectItem value="ReadWriteOnce">ReadWriteOnce (单节点读写)</SelectItem>
<SelectItem value="ReadOnlyMany">{t('kubernetes.resourcevisualeditor.s9d4ea0')}</SelectItem> <SelectItem value="ReadOnlyMany">ReadOnlyMany (多节点只读)</SelectItem>
<SelectItem value="ReadWriteMany">{t('kubernetes.resourcevisualeditor.s093227')}</SelectItem> <SelectItem value="ReadWriteMany">ReadWriteMany (多节点读写)</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -868,7 +861,7 @@ function PvcEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSa
<Input <Input
value={storageClass} value={storageClass}
onChange={e => setStorageClass(e.target.value)} onChange={e => setStorageClass(e.target.value)}
placeholder=i18n.t('kubernetes.resourcevisualeditor.s06195f') placeholder="留空使用默认 StorageClass"
className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
/> />
</div> </div>
@@ -382,7 +382,7 @@ export function TopologyView() {
<SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder={t('k8s.topology.nodeTypeLabel')} /></SelectTrigger> <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder={t('k8s.topology.nodeTypeLabel')} /></SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
<SelectItem value="all">{t('k8s.topology.allTypes')}</SelectItem> <SelectItem value="all">{t('k8s.topology.allTypes')}</SelectItem>
{Object.entries(NODE_TYPE_LABELS).map(([v, l]) => <SelectItem key={v} value={v}>{l}</SelectItem>)} {Object.entries(NODE_TYPE_LABELS).map(([v, l]) => <SelectItem key={v} value={v}>{t(l)}</SelectItem>)}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -495,7 +495,7 @@ export function TopologyView() {
<div className={`p-2 rounded-lg ${getNodeColor(node.type)}`}>{getNodeIcon(node.type)}</div> <div className={`p-2 rounded-lg ${getNodeColor(node.type)}`}>{getNodeIcon(node.type)}</div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{node.name}</p> <p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{node.name}</p>
<p className="text-xs dg-text-muted">{NODE_TYPE_LABELS[node.type] || node.type}{isCustomNode(node.id) ? ` · ${t('k8s.topology.customSuffix')}` : ''}</p> <p className="text-xs dg-text-muted">{NODE_TYPE_LABELS[node.type] ? t(NODE_TYPE_LABELS[node.type]) : node.type}{isCustomNode(node.id) ? ` · ${t('k8s.topology.customSuffix')}` : ''}</p>
</div> </div>
</div> </div>
)) ))
@@ -515,7 +515,7 @@ export function TopologyView() {
{selectedNode?.name} {selectedNode?.name}
{selectedNode && isCustomNode(selectedNode.id) && <Badge variant="outline" className="border-amber-500/30 dg-text-yellow text-xs">{t('k8s.topology.custom2')}</Badge>} {selectedNode && isCustomNode(selectedNode.id) && <Badge variant="outline" className="border-amber-500/30 dg-text-yellow text-xs">{t('k8s.topology.custom2')}</Badge>}
</DialogTitle> </DialogTitle>
<DialogDescription className="dg-text-muted">{t('common.type')}: {NODE_TYPE_LABELS[selectedNode?.type || ''] || selectedNode?.type}</DialogDescription> <DialogDescription className="dg-text-muted">{t('common.type')}: {NODE_TYPE_LABELS[selectedNode?.type || ''] ? t(NODE_TYPE_LABELS[selectedNode?.type || '']) : selectedNode?.type}</DialogDescription>
</DialogHeader> </DialogHeader>
{selectedNode && ( {selectedNode && (
<div className="space-y-4"> <div className="space-y-4">
@@ -575,7 +575,7 @@ export function TopologyView() {
<Select value={editForm.type} onValueChange={(v) => setEditForm({ ...editForm, type: v as TopologyNode['type'] })}> <Select value={editForm.type} onValueChange={(v) => setEditForm({ ...editForm, type: v as TopologyNode['type'] })}>
<SelectTrigger className="dg-input"><SelectValue /></SelectTrigger> <SelectTrigger className="dg-input"><SelectValue /></SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
{CUSTOM_NODE_TYPES.map((t) => <SelectItem key={t.value} value={t.value}>{t.label} — {t.desc}</SelectItem>)} {CUSTOM_NODE_TYPES.map((opt) => <SelectItem key={opt.value} value={opt.value}>{t(opt.label)} — {t(opt.desc)}</SelectItem>)}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -22,13 +22,11 @@ import { PodFileBrowser } from './PodFileBrowser';
import { formatK8sTime, statusColor, STATUS_COLORS } from './k8s-yaml-utils'; import { formatK8sTime, statusColor, STATUS_COLORS } from './k8s-yaml-utils';
import { PageShell } from '@/components/layout/PageShell'; import { PageShell } from '@/components/layout/PageShell';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
type WorkloadKind = 'StatefulSet' | 'DaemonSet'; type WorkloadKind = 'StatefulSet' | 'DaemonSet';
type ViewMode = 'view' | 'yaml'; type ViewMode = 'view' | 'yaml';
function StatCard({ label, value, sub, color }: { label: string; value: React.ReactNode; sub?: string; color?: string }) { function StatCard({ label, value, sub, color }: { label: string; value: React.ReactNode; sub?: string; color?: string }) {
const { t } = useTranslation();
return ( return (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"> <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-3"> <CardContent className="p-3">
@@ -42,9 +40,8 @@ function StatCard({ label, value, sub, color }: { label: string; value: React.Re
// Helper: render key-value pairs as badges // Helper: render key-value pairs as badges
function LabelBadges({ labels }: { labels: Record<string, string> | undefined }) { function LabelBadges({ labels }: { labels: Record<string, string> | undefined }) {
const { t } = useTranslation();
const entries = Object.entries(labels || {}); const entries = Object.entries(labels || {});
if (entries.length === 0) return <span className="text-xs text-[var(--dg-text-muted)]">{t('common.none')}</span>; if (entries.length === 0) return <span className="text-xs text-[var(--dg-text-muted)]">无</span>;
return ( return (
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
{entries.map(([k, v]) => ( {entries.map(([k, v]) => (
@@ -57,7 +54,6 @@ function LabelBadges({ labels }: { labels: Record<string, string> | undefined })
} }
export default function WorkloadViewPage() { export default function WorkloadViewPage() {
const { t } = useTranslation();
const params = useParams<{ clusterCode: string; namespace: string; name: string; mode?: string }>(); const params = useParams<{ clusterCode: string; namespace: string; name: string; mode?: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
@@ -123,9 +119,9 @@ export default function WorkloadViewPage() {
const handleRestart = async () => { const handleRestart = async () => {
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.deployment.restart'), title: '滚动重启',
description: t('kubernetes.workloadviewpage.s6139f5', { kind: kind, name: name }), description: `确认重启 ${kind} ${name}?将触发滚动重启。`,
confirmText: t('common.reboot'), confirmText: '重启',
}); });
if (!ok) return; if (!ok) return;
setActionLoading(true); setActionLoading(true);
@@ -135,10 +131,10 @@ export default function WorkloadViewPage() {
} else { } else {
await kubernetesApi.restartDaemonSet(clusterCode, namespace, name); await kubernetesApi.restartDaemonSet(clusterCode, namespace, name);
} }
toast({ title: t('kubernetes.workloadviewpage.s68a700'), description: t('kubernetes.workloadviewpage.sb0614d', { kind: kind }) }); toast({ title: '重启指令已下发', description: `${kind} 滚动重启已触发` });
setTimeout(loadData, 1000); setTimeout(loadData, 1000);
} catch (e) { } catch (e) {
toast({ title: t('kubernetes.deployment.restartFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '重启失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(false); } } finally { setActionLoading(false); }
}; };
@@ -146,11 +142,11 @@ export default function WorkloadViewPage() {
setActionLoading(true); setActionLoading(true);
try { try {
await kubernetesApi.scaleStatefulSet(clusterCode, namespace, name, scaleValue); await kubernetesApi.scaleStatefulSet(clusterCode, namespace, name, scaleValue);
toast({ title: t('kubernetes.workloadviewpage.s0b3ea1'), description: t('kubernetes.workloadviewpage.s27c3cf', { scaleValue: scaleValue }) }); toast({ title: '扩缩容成功', description: `StatefulSet 副本数已更新为 ${scaleValue}` });
setScaleModal(false); setScaleModal(false);
setTimeout(loadData, 1000); setTimeout(loadData, 1000);
} catch (e) { } catch (e) {
toast({ title: t('kubernetes.workloadviewpage.s0b329f'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: '扩缩容失败', description: e?.message || String(e), variant: 'destructive' });
} finally { setActionLoading(false); } } finally { setActionLoading(false); }
}; };
@@ -194,7 +190,7 @@ export default function WorkloadViewPage() {
const modeTabs = ( const modeTabs = (
<div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-0.5"> <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-0.5">
<button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'view' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('view')}>{t('common.view')}</button> <button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'view' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('view')}>查看</button>
<button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'yaml' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('yaml')}>YAML</button> <button className={`px-3 py-1 text-xs rounded transition-colors ${mode === 'yaml' ? 'bg-[var(--dg-blue)]/20 text-[var(--dg-blue)]' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'}`} onClick={() => handleModeChange('yaml')}>YAML</button>
</div> </div>
); );
@@ -206,7 +202,7 @@ export default function WorkloadViewPage() {
subtitle={`${clusterCode} / ${namespace} · ${kind}`} subtitle={`${clusterCode} / ${namespace} · ${kind}`}
icon={<Boxes className="h-5 w-5" />} icon={<Boxes className="h-5 w-5" />}
loading={loading} loading={loading}
loadingLabel=t('kubernetes.workloadviewpage.s4eb429') loadingLabel="加载工作负载..."
actions={( actions={(
<> <>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => navigate(-1)}>
@@ -219,7 +215,7 @@ export default function WorkloadViewPage() {
</Button> </Button>
)} )}
<Button variant="outline" size="sm" className="dg-btn-secondary" disabled={actionLoading} onClick={handleRestart}> <Button variant="outline" size="sm" className="dg-btn-secondary" disabled={actionLoading} onClick={handleRestart}>
<RotateCcw className="h-3.5 w-3.5 mr-1" />{actionLoading ? t('kubernetes.workloadviewpage.s9ac104') : t('common.reboot')} <RotateCcw className="h-3.5 w-3.5 mr-1" />{actionLoading ? '重启中...' : '重启'}
</Button> </Button>
<Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => setYamlModal(true)}> <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => setYamlModal(true)}>
<FileCode className="h-3.5 w-3.5 mr-1" />YAML <FileCode className="h-3.5 w-3.5 mr-1" />YAML
@@ -231,8 +227,8 @@ export default function WorkloadViewPage() {
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{kind}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{kind}</Badge>
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{namespace}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{namespace}</Badge>
{isHealthy {isHealthy
? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">{t('common.healthy')}</Badge> ? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">健康</Badge>
: <Badge className="bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30">{t('kubernetes.workloadviewpage.sf339d4')}</Badge>} : <Badge className="bg-[var(--dg-orange)]/20 text-[var(--dg-orange)] border-[var(--dg-orange)]/30">更新中</Badge>}
</div> </div>
{!loading && (mode === 'yaml' ? ( {!loading && (mode === 'yaml' ? (
@@ -255,21 +251,21 @@ export default function WorkloadViewPage() {
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3"> <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
{isSts ? ( {isSts ? (
<> <>
<StatCard label=t('kubernetes.workloadviewpage.sea6396') value={`${readyReplicas}/${replicas}`} color={isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange} sub={isHealthy ? t('kubernetes.workloadviewpage.s23c944') : t('kubernetes.workloadviewpage.sac1002')} /> <StatCard label="副本就绪" value={`${readyReplicas}/${replicas}`} color={isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange} sub={isHealthy ? '全部就绪' : '部分未就绪'} />
<StatCard label=t('kubernetes.hpa.currentReplicas') value={currentReplicas} color={STATUS_COLORS.blue} /> <StatCard label="当前副本" value={currentReplicas} color={STATUS_COLORS.blue} />
<StatCard label=t('kubernetes.deployment.updatedReplicas') value={updatedReplicas} color={STATUS_COLORS.green} /> <StatCard label="已更新副本" value={updatedReplicas} color={STATUS_COLORS.green} />
<StatCard label=t('kubernetes.workloadviewpage.sf592ef') value={spec.serviceName || '-'} color="var(--dg-text-secondary)" /> <StatCard label="服务名" value={spec.serviceName || '-'} color="var(--dg-text-secondary)" />
<StatCard label=t('kubernetes.workloadviewpage.s55edf2') value={pods.length} color="var(--dg-text-secondary)" /> <StatCard label="Pod 数量" value={pods.length} color="var(--dg-text-secondary)" />
<StatCard label=t('common.createdAt') value={<span className="text-xs">{formatK8sTime(manifest?.metadata?.creationTimestamp)}</span>} color="var(--dg-text-secondary)" /> <StatCard label="创建时间" value={<span className="text-xs">{formatK8sTime(manifest?.metadata?.creationTimestamp)}</span>} color="var(--dg-text-secondary)" />
</> </>
) : ( ) : (
<> <>
<StatCard label=t('kubernetes.workloadviewpage.sd78bc8') value={desiredScheduled} color={STATUS_COLORS.blue} /> <StatCard label="期望调度" value={desiredScheduled} color={STATUS_COLORS.blue} />
<StatCard label=t('kubernetes.workloadviewpage.sb76164') value={currentScheduled} color="var(--dg-text-secondary)" /> <StatCard label="当前调度" value={currentScheduled} color="var(--dg-text-secondary)" />
<StatCard label=t('kubernetes.daemonset.numberReady') value={numberReady} color={isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange} /> <StatCard label="就绪数量" value={numberReady} color={isHealthy ? STATUS_COLORS.green : STATUS_COLORS.orange} />
<StatCard label=t('kubernetes.daemonset.numberAvailable') value={numberAvailable} color={STATUS_COLORS.green} /> <StatCard label="可用数量" value={numberAvailable} color={STATUS_COLORS.green} />
<StatCard label=t('deploy.toast.updated') value={numberUpdated} color="var(--dg-text-secondary)" /> <StatCard label="已更新" value={numberUpdated} color="var(--dg-text-secondary)" />
<StatCard label=t('common.createdAt') value={<span className="text-xs">{formatK8sTime(manifest?.metadata?.creationTimestamp)}</span>} color="var(--dg-text-secondary)" /> <StatCard label="创建时间" value={<span className="text-xs">{formatK8sTime(manifest?.metadata?.creationTimestamp)}</span>} color="var(--dg-text-secondary)" />
</> </>
)} )}
</div> </div>
@@ -284,18 +280,18 @@ export default function WorkloadViewPage() {
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-2 text-xs"> <CardContent className="pt-0 space-y-2 text-xs">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.workloadviewpage.s0511a2')}</span> <span className="text-[var(--dg-text-muted)]">策略类型</span>
<Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{strategyType}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">{strategyType}</Badge>
</div> </div>
{strategyType === 'RollingUpdate' && isSts && updateStrategy.rollingUpdate && ( {strategyType === 'RollingUpdate' && isSts && updateStrategy.rollingUpdate && (
<> <>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.workloadviewpage.s45cb9d')}</span> <span className="text-[var(--dg-text-muted)]">分区 (partition)</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{updateStrategy.rollingUpdate.partition ?? 0}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{updateStrategy.rollingUpdate.partition ?? 0}</span>
</div> </div>
{updateStrategy.rollingUpdate.maxUnavailable && ( {updateStrategy.rollingUpdate.maxUnavailable && (
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.daemonset.maxUnavailable')}</span> <span className="text-[var(--dg-text-muted)]">最大不可用</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{typeof updateStrategy.rollingUpdate.maxUnavailable === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxUnavailable) : updateStrategy.rollingUpdate.maxUnavailable}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{typeof updateStrategy.rollingUpdate.maxUnavailable === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxUnavailable) : updateStrategy.rollingUpdate.maxUnavailable}</span>
</div> </div>
)} )}
@@ -305,13 +301,13 @@ export default function WorkloadViewPage() {
<> <>
{updateStrategy.rollingUpdate.maxUnavailable && ( {updateStrategy.rollingUpdate.maxUnavailable && (
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.daemonset.maxUnavailable')}</span> <span className="text-[var(--dg-text-muted)]">最大不可用</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{typeof updateStrategy.rollingUpdate.maxUnavailable === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxUnavailable) : updateStrategy.rollingUpdate.maxUnavailable}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{typeof updateStrategy.rollingUpdate.maxUnavailable === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxUnavailable) : updateStrategy.rollingUpdate.maxUnavailable}</span>
</div> </div>
)} )}
{updateStrategy.rollingUpdate.maxSurge && ( {updateStrategy.rollingUpdate.maxSurge && (
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.workloadviewpage.sfed4ce')}</span> <span className="text-[var(--dg-text-muted)]">最大 surge</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{typeof updateStrategy.rollingUpdate.maxSurge === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxSurge) : updateStrategy.rollingUpdate.maxSurge}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{typeof updateStrategy.rollingUpdate.maxSurge === 'object' ? JSON.stringify(updateStrategy.rollingUpdate.maxSurge) : updateStrategy.rollingUpdate.maxSurge}</span>
</div> </div>
)} )}
@@ -319,12 +315,12 @@ export default function WorkloadViewPage() {
)} )}
{isSts && ( {isSts && (
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.statefulset.podManagementPolicy')}</span> <span className="text-[var(--dg-text-muted)]">Pod 管理策略</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{spec.podManagementPolicy || 'OrderedReady'}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{spec.podManagementPolicy || 'OrderedReady'}</span>
</div> </div>
)} )}
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-[var(--dg-text-muted)]">{t('kubernetes.workloadviewpage.s450a4e')}</span> <span className="text-[var(--dg-text-muted)]">修订历史限制</span>
<span className="text-[var(--dg-text-secondary)] font-mono">{spec.revisionHistoryLimit ?? 10}</span> <span className="text-[var(--dg-text-secondary)] font-mono">{spec.revisionHistoryLimit ?? 10}</span>
</div> </div>
</CardContent> </CardContent>
@@ -373,10 +369,10 @@ export default function WorkloadViewPage() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.name')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">名称</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('k8s.resource.accessMode')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">访问模式</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('k8s.resource.storageClass')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">存储类</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('deploy.table.size')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">大小</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -418,7 +414,7 @@ export default function WorkloadViewPage() {
</div> </div>
)} )}
{containers.length === 0 ? ( {containers.length === 0 ? (
<p className="text-xs text-[var(--dg-text-muted)] py-3">{t('kubernetes.workloadviewpage.se4b610')}</p> <p className="text-xs text-[var(--dg-text-muted)] py-3">暂无容器数据,请查看 YAML</p>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-3">
<p className="text-[11px] text-[var(--dg-text-muted)] mb-1 uppercase tracking-wide">Containers</p> <p className="text-[11px] text-[var(--dg-text-muted)] mb-1 uppercase tracking-wide">Containers</p>
@@ -441,17 +437,17 @@ export default function WorkloadViewPage() {
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow className="border-[var(--dg-border)] hover:bg-transparent"> <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="text-[var(--dg-text-secondary)]">{t('kubernetes.pod.podName')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">Pod 名称</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.status')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('kubernetes.pod.nodeName')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">所在节点</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">Pod IP</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">Pod IP</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.reboot')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">重启</TableHead>
<TableHead className="text-[var(--dg-text-secondary)]">{t('common.actions')}</TableHead> <TableHead className="text-[var(--dg-text-secondary)]">操作</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{pods.length === 0 ? ( {pods.length === 0 ? (
<TableRow><TableCell colSpan={6} className="text-center text-[var(--dg-text-muted)] py-8">{t('k8s.deploymentDetail.noPod')}</TableCell></TableRow> <TableRow><TableCell colSpan={6} className="text-center text-[var(--dg-text-muted)] py-8">暂无 Pod</TableCell></TableRow>
) : pods.map((pod: JsonData) => ( ) : pods.map((pod: JsonData) => (
<TableRow key={pod.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30"> <TableRow key={pod.name} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/30">
<TableCell className="font-medium text-[var(--dg-text-primary)]">{pod.name}</TableCell> <TableCell className="font-medium text-[var(--dg-text-primary)]">{pod.name}</TableCell>
@@ -488,7 +484,7 @@ export default function WorkloadViewPage() {
{scaleModal && ( {scaleModal && (
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center" onClick={() => setScaleModal(false)}> <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center" onClick={() => setScaleModal(false)}>
<div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-6 w-80" onClick={e => e.stopPropagation()}> <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg p-6 w-80" onClick={e => e.stopPropagation()}>
<h3 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-4">{t('kubernetes.workloadviewpage.s7f541e')}</h3> <h3 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-4">伸缩 StatefulSet</h3>
<div className="flex items-center justify-center gap-4 mb-4"> <div className="flex items-center justify-center gap-4 mb-4">
<Button variant="outline" size="icon" className="h-9 w-9" onClick={() => setScaleValue(Math.max(0, scaleValue - 1))}> <Button variant="outline" size="icon" className="h-9 w-9" onClick={() => setScaleValue(Math.max(0, scaleValue - 1))}>
<Minus className="h-4 w-4" /> <Minus className="h-4 w-4" />
@@ -499,9 +495,9 @@ export default function WorkloadViewPage() {
</Button> </Button>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="outline" size="sm" className="flex-1 border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setScaleModal(false)}>{t('common.cancel')}</Button> <Button variant="outline" size="sm" className="flex-1 border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setScaleModal(false)}>取消</Button>
<Button size="sm" className="flex-1 bg-[var(--dg-blue)] hover:opacity-90" disabled={actionLoading} onClick={handleScale}> <Button size="sm" className="flex-1 bg-[var(--dg-blue)] hover:opacity-90" disabled={actionLoading} onClick={handleScale}>
{actionLoading ? t('pipeline.executing') : t('common.confirm')} {actionLoading ? '执行中...' : '确认'}
</Button> </Button>
</div> </div>
</div> </div>
@@ -548,7 +544,6 @@ export default function WorkloadViewPage() {
// Container info sub-component // Container info sub-component
function ContainerInfo({ c }: { c: JsonData}) { function ContainerInfo({ c }: { c: JsonData}) {
const { t } = useTranslation();
return ( return (
<div className="border border-[var(--dg-border)] rounded-lg p-3 bg-[var(--dg-bg-primary)]/30"> <div className="border border-[var(--dg-border)] rounded-lg p-3 bg-[var(--dg-bg-primary)]/30">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
@@ -5,9 +5,9 @@ import { Button } from '@/components/ui/button';
import { ModalOverlay } from '@/components/ui/modal-overlay'; import { ModalOverlay } from '@/components/ui/modal-overlay';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { useTranslation } from 'react-i18next';
import { YamlCodeMirror } from './YamlCodeMirror'; import { YamlCodeMirror } from './YamlCodeMirror';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface YamlImportDialogProps { interface YamlImportDialogProps {
clusterCode: string; clusterCode: string;
@@ -23,17 +23,17 @@ export function YamlImportDialog({ clusterCode, onClose, onApplied }: YamlImport
const apply = async () => { const apply = async () => {
if (!content.trim()) { if (!content.trim()) {
toast({ title: t('kubernetes.yamlimportdialog.s81d637'), variant: 'destructive' }); toast({ title: t('k8s.yamlImport.empty'), variant: 'destructive' });
return; return;
} }
setApplying(true); setApplying(true);
try { try {
await kubernetesApi.applyYAML(clusterCode, content); await kubernetesApi.applyYAML(clusterCode, content);
toast({ title: t('system.importSuccess'), description: t('kubernetes.yamlimportdialog.sb66e8e') }); toast({ title: t('k8s.yamlImport.success'), description: t('k8s.yamlImport.successDesc') });
onApplied?.(); onApplied?.();
onClose(); onClose();
} catch (e) { } catch (e) {
toast({ title: t('common.importFailed'), description: (e as JsonData).message, variant: 'destructive' }); toast({ title: t('k8s.yamlImport.failed'), description: (e as JsonData).message, variant: 'destructive' });
} finally { setApplying(false); } } finally { setApplying(false); }
}; };
@@ -47,8 +47,8 @@ export function YamlImportDialog({ clusterCode, onClose, onApplied }: YamlImport
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Upload className="h-5 w-5 text-[var(--dg-text-muted)]" /> <Upload className="h-5 w-5 text-[var(--dg-text-muted)]" />
<div> <div>
<h2 className="text-lg font-bold text-[var(--dg-text-primary)]">{t('kubernetes.yaml.importYaml')}</h2> <h2 className="text-lg font-bold text-[var(--dg-text-primary)]">{t('k8s.yamlImport.title')}</h2>
<p className="text-xs text-[var(--dg-text-muted)]">{t('kubernetes.yamlimportdialog.s92b733')}</p> <p className="text-xs text-[var(--dg-text-muted)]">{t('k8s.yamlImport.hint')}</p>
</div> </div>
</div> </div>
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose}><X className="h-4 w-4" /></Button> <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose}><X className="h-4 w-4" /></Button>
@@ -65,7 +65,7 @@ export function YamlImportDialog({ clusterCode, onClose, onApplied }: YamlImport
<Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button> <Button variant="outline" onClick={onClose}>{t('common.cancel')}</Button>
<Button className="bg-blue-600 hover:bg-blue-700" onClick={apply} disabled={applying}> <Button className="bg-blue-600 hover:bg-blue-700" onClick={apply} disabled={applying}>
{applying ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Upload className="h-4 w-4 mr-1" />} {applying ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Upload className="h-4 w-4 mr-1" />}
应用 {t('k8s.yamlImport.apply')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -11,7 +11,6 @@ import { YamlEditorToolbar } from './YamlEditorToolbar';
import { YamlCodeMirror } from './YamlCodeMirror'; import { YamlCodeMirror } from './YamlCodeMirror';
import { downloadYamlFile } from '@/utils/export'; import { downloadYamlFile } from '@/utils/export';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
interface YamlViewerProps { interface YamlViewerProps {
clusterCode: string; clusterCode: string;
@@ -38,7 +37,6 @@ export function YamlViewer({
autoEdit = false, inline = false, initialYaml, readOnly: readOnlyProp, autoEdit = false, inline = false, initialYaml, readOnly: readOnlyProp,
loadYamlFn, saveYamlFn, resourceHint, loadYamlFn, saveYamlFn, resourceHint,
}: YamlViewerProps) { }: YamlViewerProps) {
const { t } = useTranslation();
const { toast } = useToast(); const { toast } = useToast();
const resCfg = getYamlResourceConfig(resource); const resCfg = getYamlResourceConfig(resource);
const readOnly = readOnlyProp ?? resCfg.readOnly; const readOnly = readOnlyProp ?? resCfg.readOnly;
@@ -75,7 +73,7 @@ export function YamlViewer({
setRawYaml(text); setRawYaml(text);
await applyStripped(text); await applyStripped(text);
} catch (e) { } catch (e) {
toast({ title: t('kubernetes.yamlviewer.s1a72e3'), description: (e as JsonData).message, variant: 'destructive' }); toast({ title: '获取YAML失败', description: (e as JsonData).message, variant: 'destructive' });
const err = `# Error: ${(e as Error).message}`; const err = `# Error: ${(e as Error).message}`;
setRawYaml(err); setRawYaml(err);
setDisplayYaml(err); setDisplayYaml(err);
@@ -105,14 +103,14 @@ export function YamlViewer({
} else { } else {
await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, yamlStr); await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, yamlStr);
} }
toast({ title: t('common.savedSuccessfully'), description: saveYamlFn ? t('kubernetes.yamlviewer.s68f258') : t('kubernetes.yamlviewer.se7e1ac', { resource: resource, name: name }) }); toast({ title: '保存成功', description: saveYamlFn ? '多文档 YAML 已应用' : `${resource}/${name} 已更新` });
setEditing(false); setEditing(false);
setRawYaml(yamlStr); setRawYaml(yamlStr);
setDisplayYaml(yamlStr); setDisplayYaml(yamlStr);
setEditYaml(yamlStr); setEditYaml(yamlStr);
onSaved?.(); onSaved?.();
} catch (e) { } catch (e) {
toast({ title: t('common.saveFailed'), description: (e as Error)?.message || String(e), variant: 'destructive' }); toast({ title: '保存失败', description: (e as Error)?.message || String(e), variant: 'destructive' });
} finally { setSaving(false); } } finally { setSaving(false); }
}; };
@@ -126,7 +124,7 @@ export function YamlViewer({
const downloadYaml = () => { const downloadYaml = () => {
downloadYamlFile(yamlDownloadFilename(resource, namespace, name), currentYaml()); downloadYamlFile(yamlDownloadFilename(resource, namespace, name), currentYaml());
toast({ title: t('kubernetes.yamlviewer.s9719fe'), description: yamlDownloadFilename(resource, namespace, name) }); toast({ title: '已下载', description: yamlDownloadFilename(resource, namespace, name) });
}; };
const display = editing ? editYaml : (showRaw ? rawYaml : displayYaml); const display = editing ? editYaml : (showRaw ? rawYaml : displayYaml);
@@ -188,7 +186,7 @@ export function YamlViewer({
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<h2 className="text-lg font-bold text-[var(--dg-text-primary)] truncate" title={`${resCfg.label} YAML — ${name}`}> <h2 className="text-lg font-bold text-[var(--dg-text-primary)] truncate" title={`${resCfg.label} YAML — ${name}`}>
{resCfg.label} YAML — {name} {resCfg.label} YAML — {name}
{readOnly && <span className="ml-2 text-xs font-normal dg-text-muted">{t('common.readonly')}</span>} {readOnly && <span className="ml-2 text-xs font-normal dg-text-muted">只读</span>}
</h2> </h2>
<p className="text-xs dg-text-muted truncate" title={`${namespace} · ${clusterCode}`}>{namespace} · {clusterCode}</p> <p className="text-xs dg-text-muted truncate" title={`${namespace} · ${clusterCode}`}>{namespace} · {clusterCode}</p>
</div> </div>
@@ -2,7 +2,6 @@
// Deployment 多文档 YAML(Deployment + 关联 Service)加载与保存 // Logan.Li // Deployment 多文档 YAML(Deployment + 关联 Service)加载与保存 // Logan.Li
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { import {
import i18n from '@/i18n';
manifestToEditableYaml, manifestToEditableYaml,
parseEditableManifest, parseEditableManifest,
parseEditableManifests, parseEditableManifests,
@@ -81,12 +80,12 @@ export async function saveDeploymentBundleYaml(
yamlText: string, yamlText: string,
): Promise<void> { ): Promise<void> {
const { manifests } = await parseEditableManifests(yamlText); const { manifests } = await parseEditableManifests(yamlText);
if (manifests.length === 0) throw new Error(i18n.t('kubernetes.deploymentBundleYaml.s47161e')); if (manifests.length === 0) throw new Error('YAML 内容为空或解析失败');
for (const manifest of manifests) { for (const manifest of manifests) {
const kind = String(manifest.kind || '').toLowerCase(); const kind = String(manifest.kind || '').toLowerCase();
const name = String(manifest.metadata?.name || '').trim(); const name = String(manifest.metadata?.name || '').trim();
if (!kind || !name) throw new Error(i18n.t('kubernetes.deploymentBundleYaml.s659c1b')); if (!kind || !name) throw new Error('每个 YAML 文档必须包含 kind 和 metadata.name');
const docYaml = await prepareManifestForSave(manifest); const docYaml = await prepareManifestForSave(manifest);
if (kind === 'deployment') { if (kind === 'deployment') {
@@ -97,6 +96,6 @@ export async function saveDeploymentBundleYaml(
await kubernetesApi.applyYAML(clusterCode, docYaml); await kubernetesApi.applyYAML(clusterCode, docYaml);
continue; continue;
} }
throw new Error(i18n.t('kubernetes.deploymentBundleYaml.s94a65d', { manifest.kind: manifest.kind })); throw new Error(`不支持的资源类型: ${manifest.kind}(仅支持 Deployment / Service)`);
} }
} }
@@ -30,7 +30,7 @@ export function CreateHPADialog({ clusterCode, namespace, deploymentName, onCrea
const handleCreate = async () => { const handleCreate = async () => {
if (!form.name.trim()) { if (!form.name.trim()) {
toast({ title: t('kubernetes.createhpadialog.sdf09ff'), variant: 'destructive' }); toast({ title: t('k8s.hpa.nameRequired'), variant: 'destructive' });
return; return;
} }
setLoading(true); setLoading(true);
@@ -45,24 +45,24 @@ export function CreateHPADialog({ clusterCode, namespace, deploymentName, onCrea
cpuPercent: form.cpuPercent, cpuPercent: form.cpuPercent,
memPercent: form.memPercent, memPercent: form.memPercent,
}); });
toast({ title: t('kubernetes.createhpadialog.s74b0b0') }); toast({ title: t('k8s.hpa.createSuccess') });
setOpen(false); setOpen(false);
onCreated(); onCreated();
setForm({ name: '', minReplicas: 1, maxReplicas: 10, cpuPercent: 80, memPercent: 0 }); setForm({ name: '', minReplicas: 1, maxReplicas: 10, cpuPercent: 80, memPercent: 0 });
} catch (e: any) { } catch (e: any) {
toast({ title: t('monitor.quickSetupFailed'), description: e?.message || String(e), variant: 'destructive' }); toast({ title: t('k8s.hpa.createFailed'), description: e?.message || String(e), variant: 'destructive' });
} finally { setLoading(false); } } finally { setLoading(false); }
}; };
return ( return (
<> <>
<Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setOpen(true)}> <Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => setOpen(true)}>
<Plus className="h-3.5 w-3.5 mr-1" />创建 HPA <Plus className="h-3.5 w-3.5 mr-1" />{t('k8s.hpa.create')}
</Button> </Button>
{open && ( {open && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={() => setOpen(false)}> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={() => setOpen(false)}>
<div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[480px] max-w-[92vw] max-h-[85vh] flex flex-col" onClick={(e) => e.stopPropagation()}> <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[480px] max-w-[92vw] max-h-[85vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-bold text-[var(--dg-text-primary)] px-6 pt-6 pb-4 shrink-0">{t('k8s.hpaCronHpa.createHpa')}</h2> <h2 className="text-lg font-bold text-[var(--dg-text-primary)] px-6 pt-6 pb-4 shrink-0">{t('k8s.hpa.create')}</h2>
<div className="flex-1 min-h-0 overflow-y-auto px-6 space-y-3"> <div className="flex-1 min-h-0 overflow-y-auto px-6 space-y-3">
<div> <div>
<Label className="dg-text-secondary text-sm">{t('common.name')}</Label> <Label className="dg-text-secondary text-sm">{t('common.name')}</Label>
@@ -71,20 +71,20 @@ export function CreateHPADialog({ clusterCode, namespace, deploymentName, onCrea
className="dg-input mt-1" /> className="dg-input mt-1" />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-sm">{t('common.target')}</Label> <Label className="dg-text-secondary text-sm">{t('k8s.hpa.target')}</Label>
<p className="text-[var(--dg-text-secondary)] text-sm mt-1 bg-[var(--dg-bg-tertiary)] rounded px-3 py-2 truncate" title={t('kubernetes.createhpadialog.s7aa398', { deploymentName: deploymentName, namespace: namespace })}> <p className="text-[var(--dg-text-secondary)] text-sm mt-1 bg-[var(--dg-bg-tertiary)] rounded px-3 py-2 truncate" title={t('k8s.hpa.targetSummary', { deployment: deploymentName, namespace })}>
Deployment: {deploymentName} · 命名空间: {namespace} {t('k8s.hpa.targetSummary', { deployment: deploymentName, namespace })}
</p> </p>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="dg-text-secondary text-sm">{t('kubernetes.createhpadialog.s6a5bed')}</Label> <Label className="dg-text-secondary text-sm">{t('k8s.hpa.minReplicas')}</Label>
<Input type="number" value={form.minReplicas} min={1} <Input type="number" value={form.minReplicas} min={1}
onChange={(e) => setForm({ ...form, minReplicas: Number(e.target.value) })} onChange={(e) => setForm({ ...form, minReplicas: Number(e.target.value) })}
className="dg-input mt-1" /> className="dg-input mt-1" />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-sm">{t('kubernetes.createhpadialog.sc3f2cf')}</Label> <Label className="dg-text-secondary text-sm">{t('k8s.hpa.maxReplicas')}</Label>
<Input type="number" value={form.maxReplicas} min={1} <Input type="number" value={form.maxReplicas} min={1}
onChange={(e) => setForm({ ...form, maxReplicas: Number(e.target.value) })} onChange={(e) => setForm({ ...form, maxReplicas: Number(e.target.value) })}
className="dg-input mt-1" /> className="dg-input mt-1" />
@@ -92,13 +92,13 @@ export function CreateHPADialog({ clusterCode, namespace, deploymentName, onCrea
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<Label className="dg-text-secondary text-sm">{t('kubernetes.createhpadialog.s94bfd4')}</Label> <Label className="dg-text-secondary text-sm">{t('k8s.hpa.cpuTarget')}</Label>
<Input type="number" value={form.cpuPercent} min={0} max={100} <Input type="number" value={form.cpuPercent} min={0} max={100}
onChange={(e) => setForm({ ...form, cpuPercent: Number(e.target.value) })} onChange={(e) => setForm({ ...form, cpuPercent: Number(e.target.value) })}
className="dg-input mt-1" /> className="dg-input mt-1" />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-sm">{t('kubernetes.createhpadialog.s82f202')} <span className="dg-text-muted">{t('common.optional')}</span></Label> <Label className="dg-text-secondary text-sm">{t('k8s.hpa.memTarget')} <span className="dg-text-muted">{t('common.optional')}</span></Label>
<Input type="number" value={form.memPercent} min={0} max={100} <Input type="number" value={form.memPercent} min={0} max={100}
onChange={(e) => setForm({ ...form, memPercent: Number(e.target.value) })} onChange={(e) => setForm({ ...form, memPercent: Number(e.target.value) })}
className="dg-input mt-1" /> className="dg-input mt-1" />
@@ -108,7 +108,7 @@ export function CreateHPADialog({ clusterCode, namespace, deploymentName, onCrea
<div className="flex justify-end gap-2 px-6 py-4 border-t border-[var(--dg-border)] shrink-0"> <div className="flex justify-end gap-2 px-6 py-4 border-t border-[var(--dg-border)] shrink-0">
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={() => setOpen(false)}>{t('common.cancel')}</Button> <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={() => setOpen(false)}>{t('common.cancel')}</Button>
<Button className="bg-blue-600 hover:bg-blue-700" disabled={loading} onClick={handleCreate}> <Button className="bg-blue-600 hover:bg-blue-700" disabled={loading} onClick={handleCreate}>
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : i18n.t('common.create')} {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : t('common.create')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -7,8 +7,8 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { CreateHPADialog } from './CreateHPADialog'; import { CreateHPADialog } from './CreateHPADialog';
import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import type { JsonData } from '@/types/common';
export interface DeploymentOverviewProps { export interface DeploymentOverviewProps {
deploymentName: string; deploymentName: string;
@@ -44,25 +44,25 @@ export function DeploymentOverview({
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant="ghost" size="sm" className="dg-text-secondary" onClick={onBack}> <Button variant="ghost" size="sm" className="dg-text-secondary" onClick={onBack}>
<ArrowLeft className="h-4 w-4 mr-1" />返回 <ArrowLeft className="h-4 w-4 mr-1" />{t('common.back')}
</Button> </Button>
<div> <div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h1 className="text-xl font-bold text-[var(--dg-text-primary)]">{deploymentName}</h1> <h1 className="text-xl font-bold text-[var(--dg-text-primary)]">{deploymentName}</h1>
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{namespace}</Badge> <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary">{namespace}</Badge>
</div> </div>
<p className="text-sm dg-text-muted mt-0.5">镜像: {deployment.image || '-'}</p> <p className="text-sm dg-text-muted mt-0.5">{t('k8s.overview.imageLabel')}: {deployment.image || '-'}</p>
</div> </div>
</div> </div>
<Button variant="outline" size="sm" className="border-[var(--dg-border)] dg-text-secondary" onClick={onRefresh}> <Button variant="outline" size="sm" className="border-[var(--dg-border)] dg-text-secondary" onClick={onRefresh}>
<RefreshCw className="h-4 w-4 mr-1" />刷新 <RefreshCw className="h-4 w-4 mr-1" />{t('common.refresh')}
</Button> </Button>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3"> <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-3"> <CardContent className="p-3">
<p className="text-xs dg-text-muted">{t('kubernetes.deploymentoverview.sb4cac1')}</p> <p className="text-xs dg-text-muted">{t('k8s.overview.replicaStatus')}</p>
<p className={`text-lg font-bold ${isHealthy ? 'dg-text-green' : 'dg-text-yellow'}`}> <p className={`text-lg font-bold ${isHealthy ? 'dg-text-green' : 'dg-text-yellow'}`}>
{ready}/{total} {ready}/{total}
</p> </p>
@@ -70,13 +70,13 @@ export function DeploymentOverview({
</Card> </Card>
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-3"> <CardContent className="p-3">
<p className="text-xs dg-text-muted">{t('k8s.column.availableReplicas')}</p> <p className="text-xs dg-text-muted">{t('k8s.overview.availableReplicas')}</p>
<p className="text-lg font-bold dg-text-blue">{available}</p> <p className="text-lg font-bold dg-text-blue">{available}</p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="dg-card"> <Card className="dg-card">
<CardContent className="p-3"> <CardContent className="p-3">
<p className="text-xs dg-text-muted">{t('k8s.column.image')}</p> <p className="text-xs dg-text-muted">{t('k8s.overview.image')}</p>
<p className="text-sm font-mono text-[var(--dg-text-secondary)] truncate max-w-[200px]" title={deployment.image}> <p className="text-sm font-mono text-[var(--dg-text-secondary)] truncate max-w-[200px]" title={deployment.image}>
{deployment.image?.split('/').pop() || '-'} {deployment.image?.split('/').pop() || '-'}
</p> </p>
@@ -86,10 +86,10 @@ export function DeploymentOverview({
<CardContent className="p-3"> <CardContent className="p-3">
<p className="text-xs dg-text-muted">HPA</p> <p className="text-xs dg-text-muted">HPA</p>
{hpas.length > 0 ? ( {hpas.length > 0 ? (
<p className="text-lg font-bold dg-text-purple">{t('alert.enabled')}</p> <p className="text-lg font-bold dg-text-purple">{t('common.enabled')}</p>
) : ( ) : (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-lg font-bold dg-text-muted">{t('k8s.dnsHost.notConfigured')}</p> <p className="text-lg font-bold dg-text-muted">{t('k8s.overview.notConfigured')}</p>
<CreateHPADialog <CreateHPADialog
clusterCode={clusterCode} clusterCode={clusterCode}
namespace={namespace} namespace={namespace}
@@ -133,14 +133,14 @@ export function DeploymentOverview({
onClick={onRestart} onClick={onRestart}
> >
{actionLoading === 'restart' ? <Loader2 className="h-4 w-4 mr-1 animate-spin" /> : <RotateCw className="h-4 w-4 mr-1" />} {actionLoading === 'restart' ? <Loader2 className="h-4 w-4 mr-1 animate-spin" /> : <RotateCw className="h-4 w-4 mr-1" />}
滚动重启 {t('k8s.cicd.rollingRestart')}
</Button> </Button>
<Button <Button
variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]" variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]"
onClick={onToggleImageUpdate} onClick={onToggleImageUpdate}
> >
<Upload className="h-4 w-4 mr-1" /> <Upload className="h-4 w-4 mr-1" />
更新镜像 {t('k8s.editImage.updateImage')}
</Button> </Button>
</div> </div>
{showImageUpdate && ( {showImageUpdate && (
@@ -148,7 +148,7 @@ export function DeploymentOverview({
<Input <Input
value={newImage} value={newImage}
onChange={(e) => onNewImageChange(e.target.value)} onChange={(e) => onNewImageChange(e.target.value)}
placeholder=t('kubernetes.deploymentoverview.s416d7e') placeholder={t('k8s.overview.newImagePlaceholder')}
className="flex-1 h-9 dg-input text-[var(--dg-text-primary)] text-sm font-mono" className="flex-1 h-9 dg-input text-[var(--dg-text-primary)] text-sm font-mono"
/> />
<Button size="sm" className="bg-blue-600 hover:bg-blue-700" <Button size="sm" className="bg-blue-600 hover:bg-blue-700"
@@ -19,10 +19,10 @@ import {
Zap, Zap,
Network, Network,
} from 'lucide-react'; } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { arrToText, textToArr } from './container-utils'; import { arrToText, textToArr } from './container-utils';
import type { import type {
import { useTranslation } from 'react-i18next';
ContainerEditorProps, ProbeEditorProps, LifecycleHandlerEditorProps, ContainerEditorProps, ProbeEditorProps, LifecycleHandlerEditorProps,
BoolToggleProps, ProbeDef, LifecycleHandler, BoolToggleProps, ProbeDef, LifecycleHandler,
} from './types'; } from './types';
@@ -37,25 +37,25 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 基本设置 ---- */} {/* ---- 基本设置 ---- */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.sa51cd0')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.container.name')}</Label>
<Input value={c.name} onChange={e => onUpdate({ name: e.target.value })} <Input value={c.name} onChange={e => onUpdate({ name: e.target.value })}
placeholder="my-app" placeholder="my-app"
className="mt-1 dg-input font-mono text-xs h-8" /> className="mt-1 dg-input font-mono text-xs h-8" />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s332ca5')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.container.image')}</Label>
<Input value={c.image} onChange={e => onUpdate({ image: e.target.value })} <Input value={c.image} onChange={e => onUpdate({ image: e.target.value })}
placeholder="nginx:1.25" placeholder="nginx:1.25"
className="mt-1 dg-input font-mono text-xs h-8" /> className="mt-1 dg-input font-mono text-xs h-8" />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.deployment.imagePullPolicy')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.container.imagePullPolicy')}</Label>
<Select value={c.imagePullPolicy || '__none'} onValueChange={v => onUpdate({ imagePullPolicy: v === '__none' ? '' : v })}> <Select value={c.imagePullPolicy || '__none'} onValueChange={v => onUpdate({ imagePullPolicy: v === '__none' ? '' : v })}>
<SelectTrigger className="mt-1 dg-input text-xs h-8"> <SelectTrigger className="mt-1 dg-input text-xs h-8">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
<SelectItem value="__none" className="dg-text-secondary">{t('kubernetes.containereditor.sd2f3ee')}</SelectItem> <SelectItem value="__none" className="dg-text-secondary">{t('k8s.container.pullPolicyNone')}</SelectItem>
<SelectItem value="Always" className="text-[var(--dg-text-primary)]">Always</SelectItem> <SelectItem value="Always" className="text-[var(--dg-text-primary)]">Always</SelectItem>
<SelectItem value="IfNotPresent" className="text-[var(--dg-text-primary)]">IfNotPresent</SelectItem> <SelectItem value="IfNotPresent" className="text-[var(--dg-text-primary)]">IfNotPresent</SelectItem>
<SelectItem value="Never" className="text-[var(--dg-text-primary)]">Never</SelectItem> <SelectItem value="Never" className="text-[var(--dg-text-primary)]">Never</SelectItem>
@@ -63,7 +63,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
</Select> </Select>
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s4867b9')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.container.workingDir')}</Label>
<Input value={c.workingDir || ''} onChange={e => onUpdate({ workingDir: e.target.value })} <Input value={c.workingDir || ''} onChange={e => onUpdate({ workingDir: e.target.value })}
placeholder="/app" placeholder="/app"
className="mt-1 dg-input font-mono text-xs h-8" /> className="mt-1 dg-input font-mono text-xs h-8" />
@@ -73,13 +73,13 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 命令与参数 ---- */} {/* ---- 命令与参数 ---- */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s34ab0f')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.container.command')}</Label>
<Textarea value={arrToText(c.command)} placeholder={"/bin/sh\n-c"} <Textarea value={arrToText(c.command)} placeholder={"/bin/sh\n-c"}
onChange={e => onUpdate({ command: textToArr(e.target.value) })} onChange={e => onUpdate({ command: textToArr(e.target.value) })}
className="mt-1 dg-input font-mono text-xs min-h-[60px]" /> className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.containereditor.s6dd286')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.container.args')}</Label>
<Textarea value={arrToText(c.args)} placeholder={"--config=/etc/app.yaml\n--debug"} <Textarea value={arrToText(c.args)} placeholder={"--config=/etc/app.yaml\n--debug"}
onChange={e => onUpdate({ args: textToArr(e.target.value) })} onChange={e => onUpdate({ args: textToArr(e.target.value) })}
className="mt-1 dg-input font-mono text-xs min-h-[60px]" /> className="mt-1 dg-input font-mono text-xs min-h-[60px]" />
@@ -89,10 +89,10 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 环境变量 ---- */} {/* ---- 环境变量 ---- */}
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className={sectionBtn}><Terminal className="h-3.5 w-3.5 dg-text-cyan" /> {t('pipeline.envVar')}</div> <div className={sectionBtn}><Terminal className="h-3.5 w-3.5 dg-text-cyan" /> {t('k8s.container.envVars')}</div>
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]" <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ env: [...c.env, { name: '', value: '' }] })}> onClick={() => onUpdate({ env: [...c.env, { name: '', value: '' }] })}>
<Plus className="h-3 w-3 mr-1" />新增 <Plus className="h-3 w-3 mr-1" />{t('common.add')}
</Button> </Button>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
@@ -110,17 +110,17 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
</Button> </Button>
</div> </div>
))} ))}
{c.env.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s9f809d')}</p>} {c.env.length === 0 && <p className="text-[11px] dg-text-muted">{t('k8s.container.noEnv')}</p>}
</div> </div>
</div> </div>
{/* ---- 端口 ---- */} {/* ---- 端口 ---- */}
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className={sectionBtn}><Network className="h-3.5 w-3.5 text-indigo-400" /> {t('server.csv.port')}</div> <div className={sectionBtn}><Network className="h-3.5 w-3.5 text-indigo-400" /> {t('k8s.container.ports')}</div>
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]" <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ ports: [...c.ports, { name: '', containerPort: '', protocol: 'TCP' }] })}> onClick={() => onUpdate({ ports: [...c.ports, { name: '', containerPort: '', protocol: 'TCP' }] })}>
<Plus className="h-3 w-3 mr-1" />新增 <Plus className="h-3 w-3 mr-1" />{t('common.add')}
</Button> </Button>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
@@ -148,34 +148,34 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
</Button> </Button>
</div> </div>
))} ))}
{c.ports.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.sbc8b87')}</p>} {c.ports.length === 0 && <p className="text-[11px] dg-text-muted">{t('k8s.container.noPortsExposed')}</p>}
</div> </div>
</div> </div>
{/* ---- 资源 requests/limits ---- */} {/* ---- 资源 requests/limits ---- */}
<div> <div>
<div className={sectionBtn}><Cpu className="h-3.5 w-3.5 dg-text-yellow" /> {t('kubernetes.containereditor.s0b1499')}</div> <div className={sectionBtn}><Cpu className="h-3.5 w-3.5 dg-text-yellow" /> {t('k8s.container.resources')}</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-2"> <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
<div> <div>
<Label className="text-[11px] dg-text-muted">{t('kubernetes.node.cpuRequests')}</Label> <Label className="text-[11px] dg-text-muted">{t('k8s.container.cpuRequest')}</Label>
<Input value={c.resources.requests?.cpu || ''} placeholder="100m" <Input value={c.resources.requests?.cpu || ''} placeholder="100m"
onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, cpu: e.target.value } } })} onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, cpu: e.target.value } } })}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
</div> </div>
<div> <div>
<Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s96ac88')}</Label> <Label className="text-[11px] dg-text-muted">{t('k8s.container.cpuLimit')}</Label>
<Input value={c.resources.limits?.cpu || ''} placeholder="500m" <Input value={c.resources.limits?.cpu || ''} placeholder="500m"
onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, cpu: e.target.value } } })} onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, cpu: e.target.value } } })}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
</div> </div>
<div> <div>
<Label className="text-[11px] dg-text-muted">{t('kubernetes.node.memoryRequests')}</Label> <Label className="text-[11px] dg-text-muted">{t('k8s.container.memRequest')}</Label>
<Input value={c.resources.requests?.memory || ''} placeholder="128Mi" <Input value={c.resources.requests?.memory || ''} placeholder="128Mi"
onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, memory: e.target.value } } })} onChange={e => onUpdate({ resources: { ...c.resources, requests: { ...c.resources.requests, memory: e.target.value } } })}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
</div> </div>
<div> <div>
<Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.sa0a98f')}</Label> <Label className="text-[11px] dg-text-muted">{t('k8s.container.memLimit')}</Label>
<Input value={c.resources.limits?.memory || ''} placeholder="512Mi" <Input value={c.resources.limits?.memory || ''} placeholder="512Mi"
onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, memory: e.target.value } } })} onChange={e => onUpdate({ resources: { ...c.resources, limits: { ...c.resources.limits, memory: e.target.value } } })}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
@@ -185,11 +185,11 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 健康检查 ---- */} {/* ---- 健康检查 ---- */}
<div> <div>
<div className={sectionBtn}><Heart className="h-3.5 w-3.5 text-rose-400" /> {t('kubernetes.containereditor.s6779ab')}</div> <div className={sectionBtn}><Heart className="h-3.5 w-3.5 text-rose-400" /> {t('k8s.container.probes')}</div>
<div className="space-y-2"> <div className="space-y-2">
{(['livenessProbe', 'readinessProbe', 'startupProbe'] as const).map(pt => ( {(['livenessProbe', 'readinessProbe', 'startupProbe'] as const).map(pt => (
<ProbeEditor key={pt} <ProbeEditor key={pt}
label={{ livenessProbe: t('kubernetes.containereditor.sff49b1'), readinessProbe: t('kubernetes.containereditor.s176e68'), startupProbe: t('kubernetes.containereditor.sc5a531') }[pt]} label={t({ livenessProbe: 'k8s.container.liveness', readinessProbe: 'k8s.container.readiness', startupProbe: 'k8s.container.startup' }[pt])}
probe={c[pt]} probe={c[pt]}
onChange={(p) => onUpdate({ [pt]: p } as Record<string, unknown>)} onChange={(p) => onUpdate({ [pt]: p } as Record<string, unknown>)}
/> />
@@ -199,24 +199,24 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 生命周期 ---- */} {/* ---- 生命周期 ---- */}
<div> <div>
<div className={sectionBtn}><Zap className="h-3.5 w-3.5 dg-text-yellow" /> {t('kubernetes.containereditor.s12d037')}</div> <div className={sectionBtn}><Zap className="h-3.5 w-3.5 dg-text-yellow" /> {t('k8s.container.lifecycle')}</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<LifecycleHandlerEditor label=t('kubernetes.containereditor.s650280') handler={c.lifecycle?.postStart} <LifecycleHandlerEditor label={t('k8s.container.postStart')} handler={c.lifecycle?.postStart}
onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, postStart: h } })} /> onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, postStart: h } })} />
<LifecycleHandlerEditor label=t('kubernetes.containereditor.s5b7228') handler={c.lifecycle?.preStop} <LifecycleHandlerEditor label={t('k8s.container.preStop')} handler={c.lifecycle?.preStop}
onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, preStop: h } })} /> onChange={h => onUpdate({ lifecycle: { ...c.lifecycle, preStop: h } })} />
</div> </div>
{!c.lifecycle && ( {!c.lifecycle && (
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px] mt-1" <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px] mt-1"
onClick={() => onUpdate({ lifecycle: { postStart: { type: 'none' }, preStop: { type: 'none' } } })}> onClick={() => onUpdate({ lifecycle: { postStart: { type: 'none' }, preStop: { type: 'none' } } })}>
<Plus className="h-3 w-3 mr-1" />启用生命周期回调 <Plus className="h-3 w-3 mr-1" />{t('k8s.container.enableLifecycle')}
</Button> </Button>
)} )}
</div> </div>
{/* ---- 安全上下文 ---- */} {/* ---- 安全上下文 ---- */}
<div> <div>
<div className={sectionBtn}><Shield className="h-3.5 w-3.5 dg-text-green" /> {t('kubernetes.containereditor.s195d42')}</div> <div className={sectionBtn}><Shield className="h-3.5 w-3.5 dg-text-green" /> {t('k8s.container.securityContext')}</div>
{c.securityContext ? ( {c.securityContext ? (
<div className="space-y-2 border border-[var(--dg-border)] rounded-md p-3 bg-[var(--dg-bg-primary)]/30"> <div className="space-y-2 border border-[var(--dg-border)] rounded-md p-3 bg-[var(--dg-bg-primary)]/30">
<div className="grid grid-cols-2 md:grid-cols-3 gap-2"> <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
@@ -233,13 +233,13 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
</div> </div>
<div> <div>
<Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s3142a7')}</Label> <Label className="text-[11px] dg-text-muted">{t('k8s.container.capsAdd')}</Label>
<Input value={(c.securityContext.capabilitiesAdd || []).join(',')} placeholder="NET_ADMIN" <Input value={(c.securityContext.capabilitiesAdd || []).join(',')} placeholder="NET_ADMIN"
onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesAdd: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })} onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesAdd: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
</div> </div>
<div> <div>
<Label className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.sd705f3')}</Label> <Label className="text-[11px] dg-text-muted">{t('k8s.container.capsDrop')}</Label>
<Input value={(c.securityContext.capabilitiesDrop || []).join(',')} placeholder="ALL" <Input value={(c.securityContext.capabilitiesDrop || []).join(',')} placeholder="ALL"
onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesDrop: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })} onChange={e => onUpdate({ securityContext: { ...c.securityContext!, capabilitiesDrop: e.target.value.split(',').map(s => s.trim()).filter(Boolean) } })}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
@@ -257,13 +257,13 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
</div> </div>
<Button size="sm" variant="ghost" className="h-6 dg-text-red text-[11px]" <Button size="sm" variant="ghost" className="h-6 dg-text-red text-[11px]"
onClick={() => onUpdate({ securityContext: null })}> onClick={() => onUpdate({ securityContext: null })}>
<Trash2 className="h-3 w-3 mr-1" />移除安全上下文 <Trash2 className="h-3 w-3 mr-1" />{t('k8s.container.removeSecurity')}
</Button> </Button>
</div> </div>
) : ( ) : (
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]" <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ securityContext: { runAsNonRoot: false, privileged: false } })}> onClick={() => onUpdate({ securityContext: { runAsNonRoot: false, privileged: false } })}>
<Plus className="h-3 w-3 mr-1" />启用安全上下文 <Plus className="h-3 w-3 mr-1" />{t('k8s.container.enableSecurity')}
</Button> </Button>
)} )}
</div> </div>
@@ -271,22 +271,22 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
{/* ---- 卷挂载 ---- */} {/* ---- 卷挂载 ---- */}
<div> <div>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className={sectionBtn}><FolderOpen className="h-3.5 w-3.5 text-teal-400" /> {t('kubernetes.containereditor.s778eec')}</div> <div className={sectionBtn}><FolderOpen className="h-3.5 w-3.5 text-teal-400" /> {t('k8s.container.volumeMounts')}</div>
<Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]" <Button size="sm" variant="outline" className="h-6 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-[11px]"
onClick={() => onUpdate({ volumeMounts: [...c.volumeMounts, { name: '', mountPath: '', subPath: '', readOnly: false }] })}> onClick={() => onUpdate({ volumeMounts: [...c.volumeMounts, { name: '', mountPath: '', subPath: '', readOnly: false }] })}>
<Plus className="h-3 w-3 mr-1" />新增 <Plus className="h-3 w-3 mr-1" />{t('common.add')}
</Button> </Button>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
{c.volumeMounts.map((m, mi) => ( {c.volumeMounts.map((m, mi) => (
<div key={mi} className="grid grid-cols-[1fr_1fr_1fr_60px_auto] gap-2 items-center"> <div key={mi} className="grid grid-cols-[1fr_1fr_1fr_60px_auto] gap-2 items-center">
<Input value={m.name} placeholder=t('kubernetes.containereditor.sb19f3d') <Input value={m.name} placeholder={t('k8s.container.volumeName')}
onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, name: e.target.value }; onUpdate({ volumeMounts: n }); }} onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, name: e.target.value }; onUpdate({ volumeMounts: n }); }}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
<Input value={m.mountPath} placeholder="/data" <Input value={m.mountPath} placeholder="/data"
onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, mountPath: e.target.value }; onUpdate({ volumeMounts: n }); }} onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, mountPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
<Input value={m.subPath || ''} placeholder=t('kubernetes.containereditor.s4f4937') <Input value={m.subPath || ''} placeholder={t('k8s.container.subPathPlaceholder')}
onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, subPath: e.target.value }; onUpdate({ volumeMounts: n }); }} onChange={e => { const n = [...c.volumeMounts]; n[mi] = { ...m, subPath: e.target.value }; onUpdate({ volumeMounts: n }); }}
className="dg-input font-mono text-xs h-8" /> className="dg-input font-mono text-xs h-8" />
<label className="flex items-center gap-1 text-[10px] dg-text-muted cursor-pointer"> <label className="flex items-center gap-1 text-[10px] dg-text-muted cursor-pointer">
@@ -300,7 +300,7 @@ export function ContainerEditor({ container, onUpdate }: ContainerEditorProps) {
</Button> </Button>
</div> </div>
))} ))}
{c.volumeMounts.length === 0 && <p className="text-[11px] dg-text-muted">{t('kubernetes.containereditor.s9b6826')}</p>} {c.volumeMounts.length === 0 && <p className="text-[11px] dg-text-muted">{t('k8s.container.noMounts')}</p>}
</div> </div>
</div> </div>
</> </>
@@ -324,7 +324,7 @@ function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
{enabled && ( {enabled && (
<> <>
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className="text-[10px] dg-text-muted w-8">{t('common.type')}</span> <span className="text-[10px] dg-text-muted w-8">{t('k8s.container.type')}</span>
<Select value={p.type || 'httpGet'} onValueChange={v => setField({ type: v as ProbeDef['type'] })}> <Select value={p.type || 'httpGet'} onValueChange={v => setField({ type: v as ProbeDef['type'] })}>
<SelectTrigger className="dg-input text-xs h-7 flex-1"> <SelectTrigger className="dg-input text-xs h-7 flex-1">
<SelectValue /> <SelectValue />
@@ -332,7 +332,7 @@ function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
<SelectContent className="dg-input"> <SelectContent className="dg-input">
<SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem> <SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
<SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem> <SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
<SelectItem value="exec" className="text-[var(--dg-text-primary)]">{t('kubernetes.containereditor.s16d93f')}</SelectItem> <SelectItem value="exec" className="text-[var(--dg-text-primary)]">{t('k8s.container.execCmd')}</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@@ -344,52 +344,52 @@ function ProbeEditor({ label, probe, onChange }: ProbeEditorProps) {
<Input type="number" value={p.httpPort ?? ''} placeholder="8080" <Input type="number" value={p.httpPort ?? ''} placeholder="8080"
onChange={e => setField({ httpPort: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => setField({ httpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
<Input value={p.httpHost || ''} placeholder=t('kubernetes.containereditor.s3cf87c') <Input value={p.httpHost || ''} placeholder={t('k8s.container.hostPlaceholder')}
onChange={e => setField({ httpHost: e.target.value })} onChange={e => setField({ httpHost: e.target.value })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
</div> </div>
)} )}
{p.type === 'tcpSocket' && ( {p.type === 'tcpSocket' && (
<div className="mb-2"> <div className="mb-2">
<Input type="number" value={p.tcpPort ?? ''} placeholder=t('server.csv.port') <Input type="number" value={p.tcpPort ?? ''} placeholder={t('k8s.container.portPlaceholder')}
onChange={e => setField({ tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => setField({ tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
</div> </div>
)} )}
{p.type === 'exec' && ( {p.type === 'exec' && (
<div className="mb-2"> <div className="mb-2">
<Textarea value={p.execCommand || ''} placeholder=t('kubernetes.containereditor.s743f00') <Textarea value={p.execCommand || ''} placeholder={t('k8s.container.execCmdPlaceholder')}
onChange={e => setField({ execCommand: e.target.value })} onChange={e => setField({ execCommand: e.target.value })}
className="dg-input font-mono text-xs min-h-[50px]" /> className="dg-input font-mono text-xs min-h-[50px]" />
</div> </div>
)} )}
<div className="grid grid-cols-5 gap-2"> <div className="grid grid-cols-5 gap-2">
<div> <div>
<Label className="text-[10px] dg-text-muted">{t('kubernetes.containereditor.s39b4e6')}</Label> <Label className="text-[10px] dg-text-muted">{t('k8s.container.delay')}</Label>
<Input type="number" value={p.initialDelaySeconds ?? ''} placeholder="10" <Input type="number" value={p.initialDelaySeconds ?? ''} placeholder="10"
onChange={e => setField({ initialDelaySeconds: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => setField({ initialDelaySeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
</div> </div>
<div> <div>
<Label className="text-[10px] dg-text-muted">{t('kubernetes.containereditor.sbbf419')}</Label> <Label className="text-[10px] dg-text-muted">{t('k8s.container.interval')}</Label>
<Input type="number" value={p.periodSeconds ?? ''} placeholder="10" <Input type="number" value={p.periodSeconds ?? ''} placeholder="10"
onChange={e => setField({ periodSeconds: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => setField({ periodSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
</div> </div>
<div> <div>
<Label className="text-[10px] dg-text-muted">{t('kubernetes.containereditor.sde332f')}</Label> <Label className="text-[10px] dg-text-muted">{t('k8s.container.timeout')}</Label>
<Input type="number" value={p.timeoutSeconds ?? ''} placeholder="1" <Input type="number" value={p.timeoutSeconds ?? ''} placeholder="1"
onChange={e => setField({ timeoutSeconds: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => setField({ timeoutSeconds: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
</div> </div>
<div> <div>
<Label className="text-[10px] dg-text-muted">{t('common.success')}</Label> <Label className="text-[10px] dg-text-muted">{t('k8s.container.success')}</Label>
<Input type="number" value={p.successThreshold ?? ''} placeholder="1" <Input type="number" value={p.successThreshold ?? ''} placeholder="1"
onChange={e => setField({ successThreshold: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => setField({ successThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
</div> </div>
<div> <div>
<Label className="text-[10px] dg-text-muted">{t('common.failed')}</Label> <Label className="text-[10px] dg-text-muted">{t('k8s.container.failure')}</Label>
<Input type="number" value={p.failureThreshold ?? ''} placeholder="3" <Input type="number" value={p.failureThreshold ?? ''} placeholder="3"
onChange={e => setField({ failureThreshold: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => setField({ failureThreshold: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
@@ -410,21 +410,21 @@ function LifecycleHandlerEditor({ label, handler, onChange }: LifecycleHandlerEd
<div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30"> <div className="border border-[var(--dg-border)] rounded-md p-2.5 bg-[var(--dg-bg-primary)]/30">
<span className="text-xs text-[var(--dg-text-secondary)] font-medium block mb-2">{label}</span> <span className="text-xs text-[var(--dg-text-secondary)] font-medium block mb-2">{label}</span>
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className="text-[10px] dg-text-muted w-8">{t('common.type')}</span> <span className="text-[10px] dg-text-muted w-8">{t('k8s.container.type')}</span>
<Select value={selVal} onValueChange={v => onChange({ ...h, type: (v === '__none' ? 'none' : v) as LifecycleHandler['type'] })}> <Select value={selVal} onValueChange={v => onChange({ ...h, type: (v === '__none' ? 'none' : v) as LifecycleHandler['type'] })}>
<SelectTrigger className="dg-input text-xs h-7 flex-1"> <SelectTrigger className="dg-input text-xs h-7 flex-1">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
<SelectItem value="__none" className="dg-text-secondary">{t('kubernetes.containereditor.s2e3432')}</SelectItem> <SelectItem value="__none" className="dg-text-secondary">{t('k8s.container.none')}</SelectItem>
<SelectItem value="exec" className="text-[var(--dg-text-primary)]">{t('kubernetes.containereditor.s16d93f')}</SelectItem> <SelectItem value="exec" className="text-[var(--dg-text-primary)]">{t('k8s.container.execCmd')}</SelectItem>
<SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem> <SelectItem value="httpGet" className="text-[var(--dg-text-primary)]">HTTP GET</SelectItem>
<SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem> <SelectItem value="tcpSocket" className="text-[var(--dg-text-primary)]">TCP Socket</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{h.type === 'exec' && ( {h.type === 'exec' && (
<Textarea value={h.execCommand || ''} placeholder=t('kubernetes.containereditor.s7970e5') <Textarea value={h.execCommand || ''} placeholder={t('k8s.container.execCmdLinePlaceholder')}
onChange={e => onChange({ ...h, execCommand: e.target.value })} onChange={e => onChange({ ...h, execCommand: e.target.value })}
className="dg-input font-mono text-xs min-h-[50px]" /> className="dg-input font-mono text-xs min-h-[50px]" />
)} )}
@@ -439,7 +439,7 @@ function LifecycleHandlerEditor({ label, handler, onChange }: LifecycleHandlerEd
</div> </div>
)} )}
{h.type === 'tcpSocket' && ( {h.type === 'tcpSocket' && (
<Input type="number" value={h.tcpPort ?? ''} placeholder=i18n.t('server.csv.port') <Input type="number" value={h.tcpPort ?? ''} placeholder={t('k8s.container.portPlaceholder')}
onChange={e => onChange({ ...h, tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })} onChange={e => onChange({ ...h, tcpPort: e.target.value === '' ? undefined : Number(e.target.value) })}
className="dg-input font-mono text-xs h-7" /> className="dg-input font-mono text-xs h-7" />
)} )}
@@ -448,7 +448,6 @@ function LifecycleHandlerEditor({ label, handler, onChange }: LifecycleHandlerEd
} }
function BoolToggle({ label, value, onChange }: BoolToggleProps) { function BoolToggle({ label, value, onChange }: BoolToggleProps) {
const { t } = useTranslation();
return ( return (
<label className="flex items-center gap-1.5 cursor-pointer"> <label className="flex items-center gap-1.5 cursor-pointer">
<Switch checked={value} onCheckedChange={onChange} /> <Switch checked={value} onCheckedChange={onChange} />
@@ -45,14 +45,14 @@ export function ContainerGroupSection({
<Badge variant="outline" className={`border-[var(--dg-border)] dg-text-secondary text-[10px]`}>{containers.length}</Badge> <Badge variant="outline" className={`border-[var(--dg-border)] dg-text-secondary text-[10px]`}>{containers.length}</Badge>
</div> </div>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={onAdd}> <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={onAdd}>
<Plus className="h-3 w-3 mr-1" />新增容器 <Plus className="h-3 w-3 mr-1" />{t('k8s.container.add')}
</Button> </Button>
</div> </div>
<p className="text-[11px] dg-text-muted">{description}</p> <p className="text-[11px] dg-text-muted">{description}</p>
</CardHeader> </CardHeader>
<CardContent className="pt-0 space-y-3"> <CardContent className="pt-0 space-y-3">
{containers.length === 0 && ( {containers.length === 0 && (
<div className="text-center py-6 dg-text-muted text-xs">{t('kubernetes.containergroupsection.s79ed70')}</div> <div className="text-center py-6 dg-text-muted text-xs">{t('k8s.container.empty')}</div>
)} )}
{containers.map((c, idx) => { {containers.map((c, idx) => {
const isOpen = openIndices.has(idx) || containers.length === 1; const isOpen = openIndices.has(idx) || containers.length === 1;
@@ -63,21 +63,21 @@ export function ContainerGroupSection({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isOpen ? <ChevronDown className="h-4 w-4 dg-text-muted" /> : <ChevronRight className="h-4 w-4 dg-text-muted" />} {isOpen ? <ChevronDown className="h-4 w-4 dg-text-muted" /> : <ChevronRight className="h-4 w-4 dg-text-muted" />}
<Container className={`h-4 w-4 ${accentColor === 'blue' ? 'dg-text-blue' : 'dg-text-purple'}`} /> <Container className={`h-4 w-4 ${accentColor === 'blue' ? 'dg-text-blue' : 'dg-text-purple'}`} />
<span className="text-sm font-mono text-[var(--dg-text-primary)] font-semibold">{c.name || t('kubernetes.containergroupsection.sac52a9')}</span> <span className="text-sm font-mono text-[var(--dg-text-primary)] font-semibold">{c.name || t('k8s.container.unnamed')}</span>
{c.image && <code className="text-[10px] dg-text-muted font-mono truncate max-w-[300px]">{c.image}</code>} {c.image && <code className="text-[10px] dg-text-muted font-mono truncate max-w-[300px]">{c.image}</code>}
</div> </div>
<div className="flex items-center gap-1" onClick={e => e.stopPropagation()}> <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
{onDuplicate && ( {onDuplicate && (
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-muted hover:text-[var(--dg-text-secondary)]" title=t('common.copy') <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-muted hover:text-[var(--dg-text-secondary)]" title={t('common.copy')}
onClick={() => onDuplicate(idx)}> onClick={() => onDuplicate(idx)}>
<RotateCw className="h-3.5 w-3.5" /> <RotateCw className="h-3.5 w-3.5" />
</Button> </Button>
)} )}
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" title=t('common.delete') <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" title={t('common.delete')}
onClick={async () => { onClick={async () => {
const ok = await confirm({ const ok = await confirm({
title: t('kubernetes.containergroupsection.s860aaf'), title: t('k8s.container.deleteTitle'),
description: t('kubernetes.containergroupsection.s04ce19', { c.name: c.name }), description: t('k8s.container.deleteConfirm', { name: c.name }),
confirmText: t('common.delete'), confirmText: t('common.delete'),
variant: 'destructive', variant: 'destructive',
}); });
@@ -2,7 +2,6 @@
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { prepareManifestForSave } from './k8s-manifest-utils'; import { prepareManifestForSave } from './k8s-manifest-utils';
import { isCreateDeployment } from './deployment-constants'; import { isCreateDeployment } from './deployment-constants';
import i18n from '@/i18n';
export async function saveDeploymentManifest( export async function saveDeploymentManifest(
clusterCode: string, clusterCode: string,
@@ -11,7 +10,7 @@ export async function saveDeploymentManifest(
manifest: Record<string, any>, manifest: Record<string, any>,
): Promise<string> { ): Promise<string> {
const resName = String(manifest?.metadata?.name || '').trim(); const resName = String(manifest?.metadata?.name || '').trim();
if (!resName) throw new Error(i18n.t('kubernetes.deploymentManifestSave.scb497f')); if (!resName) throw new Error('Deployment 名称不能为空');
const yaml = await prepareManifestForSave(manifest); const yaml = await prepareManifestForSave(manifest);
if (isCreateDeployment(deploymentName)) { if (isCreateDeployment(deploymentName)) {
await kubernetesApi.applyYAML(clusterCode, yaml); await kubernetesApi.applyYAML(clusterCode, yaml);
@@ -2,8 +2,8 @@
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { RefreshCw, Plus, Loader2 } from 'lucide-react'; import { RefreshCw, Plus, Loader2 } from 'lucide-react';
import type { VolumeForm } from './deployment-volume-utils';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import type { VolumeForm } from './deployment-volume-utils';
export interface NamespaceResourceLists { export interface NamespaceResourceLists {
configMaps: string[]; configMaps: string[];
@@ -43,18 +43,18 @@ export function NamespaceResourcePicker({
disabled={loading} disabled={loading}
className="h-7 flex-1 min-w-[160px] max-w-xs bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2 font-mono" className="h-7 flex-1 min-w-[160px] max-w-xs bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2 font-mono"
> >
<option value="" disabled>{options.length === 0 ? t('kubernetes.deploymentStorageFields.s21ff31') : t('common.selectPlaceholder')}</option> <option value="" disabled>{options.length === 0 ? t('k8s.storage.noResource') : t('k8s.storage.pleaseSelect')}</option>
{orphan && <option value={value}>{value}(未在集群中找到)</option>} {orphan && <option value={value}>{t('k8s.storage.orphan', { value })}</option>}
{options.map((n) => <option key={n} value={n}>{n}</option>)} {options.map((n) => <option key={n} value={n}>{n}</option>)}
</select> </select>
<Button type="button" size="sm" variant="outline" className="h-7 px-2 border-[var(--dg-border)] dg-text-secondary text-xs" onClick={onRefresh} disabled={loading}> <Button type="button" size="sm" variant="outline" className="h-7 px-2 border-[var(--dg-border)] dg-text-secondary text-xs" onClick={onRefresh} disabled={loading}>
{loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />} {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
</Button> </Button>
<Button type="button" size="sm" variant="outline" className="h-7 px-2 border-[var(--dg-border)] dg-text-blue text-xs" onClick={onCreate}> <Button type="button" size="sm" variant="outline" className="h-7 px-2 border-[var(--dg-border)] dg-text-blue text-xs" onClick={onCreate}>
<Plus className="h-3 w-3 mr-0.5" />新建 <Plus className="h-3 w-3 mr-0.5" />{t('k8s.storage.create')}
</Button> </Button>
{options.length === 0 && !orphan && ( {options.length === 0 && !orphan && (
<span className="text-[10px] dg-text-yellow/90">命名空间内暂无{label},请先新建</span> <span className="text-[10px] dg-text-yellow/90">{t('k8s.storage.nsNoResource', { label })}</span>
)} )}
</div> </div>
); );
@@ -77,7 +77,7 @@ export function VolumeTypeFields({
return ( return (
<div className="space-y-2"> <div className="space-y-2">
<NamespaceResourcePicker <NamespaceResourcePicker
label=t('kubernetes.deploymentStorageFields.s9f74c4') label={t('k8s.storage.pvcLink')}
value={vol.pvcName || ''} value={vol.pvcName || ''}
options={resources.pvcs} options={resources.pvcs}
loading={resourcesLoading} loading={resourcesLoading}
@@ -87,7 +87,7 @@ export function VolumeTypeFields({
/> />
<label className="flex items-center gap-1.5 text-xs dg-text-secondary cursor-pointer whitespace-nowrap pl-[88px]"> <label className="flex items-center gap-1.5 text-xs dg-text-secondary cursor-pointer whitespace-nowrap pl-[88px]">
<input type="checkbox" checked={!!vol.pvcReadOnly} onChange={(e) => onChange({ pvcReadOnly: e.target.checked })} className="accent-blue-500" /> <input type="checkbox" checked={!!vol.pvcReadOnly} onChange={(e) => onChange({ pvcReadOnly: e.target.checked })} className="accent-blue-500" />
卷只读 {t('k8s.storage.volumeReadOnly')}
</label> </label>
</div> </div>
); );
@@ -95,28 +95,28 @@ export function VolumeTypeFields({
if (vol.type === 'emptyDir') { if (vol.type === 'emptyDir') {
return ( return (
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<span className="text-[10px] dg-text-muted w-20 shrink-0">{t('kubernetes.deploymentStorageFields.sfac9d2')}</span> <span className="text-[10px] dg-text-muted w-20 shrink-0">{t('k8s.storage.medium')}</span>
<select value={vol.medium || ''} onChange={(e) => onChange({ medium: e.target.value })} <select value={vol.medium || ''} onChange={(e) => onChange({ medium: e.target.value })}
className="h-7 w-28 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"> className="h-7 w-28 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5">
<option value="">{t('kubernetes.deploymentStorageFields.s83f939')}</option> <option value="">{t('k8s.storage.defaultDisk')}</option>
<option value="Memory">Memory</option> <option value="Memory">Memory</option>
</select> </select>
<Input value={vol.sizeLimit || ''} onChange={(e) => onChange({ sizeLimit: e.target.value })} <Input value={vol.sizeLimit || ''} onChange={(e) => onChange({ sizeLimit: e.target.value })}
placeholder=t('kubernetes.deploymentStorageFields.s503cb1') className="h-7 flex-1 min-w-[120px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> placeholder={t('k8s.storage.sizeLimitPlaceholder')} className="h-7 flex-1 min-w-[120px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div> </div>
); );
} }
if (vol.type === 'hostPath') { if (vol.type === 'hostPath') {
return ( return (
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<span className="text-[10px] dg-text-muted w-20 shrink-0">{t('kubernetes.workload.hostPath')}</span> <span className="text-[10px] dg-text-muted w-20 shrink-0">{t('k8s.storage.hostPath')}</span>
<Input value={vol.path || ''} onChange={(e) => onChange({ path: e.target.value })} <Input value={vol.path || ''} onChange={(e) => onChange({ path: e.target.value })}
placeholder="/data/app" className="h-7 flex-1 min-w-[160px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> placeholder="/data/app" className="h-7 flex-1 min-w-[160px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
<select value={vol.pathType || 'Directory'} onChange={(e) => onChange({ pathType: e.target.value })} <select value={vol.pathType || 'Directory'} onChange={(e) => onChange({ pathType: e.target.value })}
className="h-7 w-28 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5"> className="h-7 w-28 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5">
<option value="Directory">Directory</option> <option value="Directory">Directory</option>
<option value="File">File</option> <option value="File">File</option>
<option value="">{t('approval.status.default')}</option> <option value="">{t('k8s.storage.default')}</option>
</select> </select>
</div> </div>
); );
@@ -145,9 +145,9 @@ export function VolumeTypeFields({
onCreate={() => onCreateResource('configmaps')} onCreate={() => onCreateResource('configmaps')}
/> />
<div className="flex items-center gap-2 pl-[88px]"> <div className="flex items-center gap-2 pl-[88px]">
<span className="text-[10px] dg-text-muted shrink-0">{t('kubernetes.deploymentStorageFields.sca72ee')}</span> <span className="text-[10px] dg-text-muted shrink-0">{t('k8s.storage.keyMapping')}</span>
<Input value={vol.cmItems || ''} onChange={(e) => onChange({ cmItems: e.target.value })} <Input value={vol.cmItems || ''} onChange={(e) => onChange({ cmItems: e.target.value })}
placeholder=t('kubernetes.deploymentStorageFields.s6f0d57') className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> placeholder={t('k8s.storage.keyMappingPlaceholder')} className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div> </div>
</div> </div>
); );
@@ -165,15 +165,15 @@ export function VolumeTypeFields({
onCreate={() => onCreateResource('secrets')} onCreate={() => onCreateResource('secrets')}
/> />
<div className="flex items-center gap-2 pl-[88px]"> <div className="flex items-center gap-2 pl-[88px]">
<span className="text-[10px] dg-text-muted shrink-0">{t('kubernetes.deploymentStorageFields.sca72ee')}</span> <span className="text-[10px] dg-text-muted shrink-0">{t('k8s.storage.keyMapping')}</span>
<Input value={vol.secItems || ''} onChange={(e) => onChange({ secItems: e.target.value })} <Input value={vol.secItems || ''} onChange={(e) => onChange({ secItems: e.target.value })}
placeholder=t('kubernetes.deploymentStorageFields.s6f0d57') className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono" /> placeholder={t('k8s.storage.keyMappingPlaceholder')} className="h-7 flex-1 max-w-md dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
</div> </div>
</div> </div>
); );
} }
if (vol.type === 'custom') { if (vol.type === 'custom') {
return <p className="text-[11px] dg-text-yellow/80">{t('kubernetes.deploymentStorageFields.s98d353')}</p>; return <p className="text-[11px] dg-text-yellow/80">{t('k8s.storage.unknownVolumeType')}</p>;
} }
return null; return null;
} }
@@ -1,12 +1,11 @@
// deployment-view/helpers.tsx — 时间线 / 信息面板辅助组件 // Logan.Li // deployment-view/helpers.tsx — 时间线 / 信息面板辅助组件 // Logan.Li
import { Fragment } from 'react'; import { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
formatK8sTime, formatDuration, elapsedSeconds, STATUS_COLORS, formatK8sTime, formatDuration, elapsedSeconds, STATUS_COLORS,
} from '../k8s-yaml-utils'; } from '../k8s-yaml-utils';
import type { PodItem } from './types'; import type { PodItem } from './types';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
export interface PodStage { export interface PodStage {
label: string; label: string;
@@ -32,16 +31,15 @@ export function getPodTimeline(pod: PodItem) {
export function getPodStages(pod: PodItem): PodStage[] { export function getPodStages(pod: PodItem): PodStage[] {
const tl = getPodTimeline(pod); const tl = getPodTimeline(pod);
return [ return [
{ label: i18n.t('kubernetes.event.scheduled'), ts: tl.scheduled, color: STATUS_COLORS.blue }, { label: 'k8s.podStage.scheduled', ts: tl.scheduled, color: STATUS_COLORS.blue },
{ label: i18n.t('kubernetes.helpers.scee76a'), ts: tl.initialized, color: STATUS_COLORS.orange }, { label: 'k8s.podStage.initialized', ts: tl.initialized, color: STATUS_COLORS.orange },
{ label: i18n.t('kubernetes.helpers.s712b04'), ts: tl.containersReady, color: STATUS_COLORS.green }, { label: 'k8s.podStage.containersReady', ts: tl.containersReady, color: STATUS_COLORS.green },
{ label: i18n.t('kubernetes.helpers.s504965'), ts: tl.ready, color: STATUS_COLORS.green }, { label: 'k8s.podStage.podReady', ts: tl.ready, color: STATUS_COLORS.green },
]; ];
} }
// 信息面板单项 // Logan.Li // 信息面板单项 // Logan.Li
export function InfoItem({ label, value }: { label: string; value: React.ReactNode }) { export function InfoItem({ label, value }: { label: string; value: React.ReactNode }) {
const { t } = useTranslation();
return ( return (
<div> <div>
<p className="text-xs text-[var(--dg-text-muted)] mb-1">{label}</p> <p className="text-xs text-[var(--dg-text-muted)] mb-1">{label}</p>
@@ -60,13 +58,13 @@ export function PodStatusCompact({ pod }: { pod: PodItem }) {
return ( return (
<div className="flex items-center gap-2 min-w-[88px]"> <div className="flex items-center gap-2 min-w-[88px]">
<div className="flex items-center gap-0.5" aria-label=t('kubernetes.helpers.sfc9c68')> <div className="flex items-center gap-0.5" aria-label={t('k8s.podStage.bootProgress')}>
{stages.map((s, i) => ( {stages.map((s, i) => (
<Fragment key={s.label}> <Fragment key={s.label}>
<span <span
className="inline-block h-1.5 w-1.5 rounded-full shrink-0" className="inline-block h-1.5 w-1.5 rounded-full shrink-0"
style={{ background: s.ts ? s.color : 'var(--dg-border)' }} style={{ background: s.ts ? s.color : 'var(--dg-border)' }}
title={`${s.label}${s.ts ? ` · ${formatK8sTime(s.ts)}` : ''}`} title={`${t(s.label)}${s.ts ? ` · ${formatK8sTime(s.ts)}` : ''}`}
/> />
{i < stages.length - 1 && ( {i < stages.length - 1 && (
<span <span
@@ -81,7 +79,7 @@ export function PodStatusCompact({ pod }: { pod: PodItem }) {
className="text-[11px] whitespace-nowrap" className="text-[11px] whitespace-nowrap"
style={{ color: allReady ? STATUS_COLORS.green : 'var(--dg-text-muted)' }} style={{ color: allReady ? STATUS_COLORS.green : 'var(--dg-text-muted)' }}
> >
{allReady ? t('common.ready') : pending?.label || `${done}/${stages.length}`} {allReady ? t('k8s.podStage.ready') : (pending ? t(pending.label) : `${done}/${stages.length}`)}
</span> </span>
</div> </div>
); );
@@ -96,10 +94,10 @@ export function PodConditionsRow({ pod }: { pod: PodItem }) {
return ( return (
<div className="rounded-lg bg-[var(--dg-bg-tertiary)]/60 px-4 py-3"> <div className="rounded-lg bg-[var(--dg-bg-tertiary)]/60 px-4 py-3">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<span className="text-xs text-[var(--dg-text-muted)]">{t('kubernetes.helpers.s684494')}</span> <span className="text-xs text-[var(--dg-text-muted)]">{t('k8s.podStage.timeline')}</span>
{totalBoot != null && ( {totalBoot != null && (
<span className="text-[11px] text-[var(--dg-text-muted)]"> <span className="text-[11px] text-[var(--dg-text-muted)]">
总耗时 <span className="font-mono text-[var(--dg-text-secondary)]">{formatDuration(totalBoot)}</span> {t('k8s.podStage.totalDuration')} <span className="font-mono text-[var(--dg-text-secondary)]">{formatDuration(totalBoot)}</span>
</span> </span>
)} )}
</div> </div>
@@ -123,7 +121,7 @@ export function PodConditionsRow({ pod }: { pod: PodItem }) {
{i + 1} {i + 1}
</span> </span>
<span className="text-xs font-medium" style={{ color: active ? s.color : 'var(--dg-text-muted)' }}> <span className="text-xs font-medium" style={{ color: active ? s.color : 'var(--dg-text-muted)' }}>
{s.label} {t(s.label)}
</span> </span>
</div> </div>
<span className="mt-1.5 pl-7 text-[11px] font-mono text-[var(--dg-text-muted)]"> <span className="mt-1.5 pl-7 text-[11px] font-mono text-[var(--dg-text-muted)]">
@@ -57,22 +57,19 @@ export function CICDWebhookContent({
const restartUrl = `${apiBase}/kubernetes/${clusterCode}/namespace/${namespace}/deployments/${deploymentName}/restart`; const restartUrl = `${apiBase}/kubernetes/${clusterCode}/namespace/${namespace}/deployments/${deploymentName}/restart`;
const updateBody = useMemo(() => { const updateBody = useMemo(() => {
const body: Record<string, string> = { image: image || t('kubernetes.cicdwebhookcontent.sc4be9c') }; const body: Record<string, string> = { image: image || t('k8s.cicd.newImagePlaceholder') };
if (containerName) body.container_name = containerName; if (containerName) body.container_name = containerName;
return JSON.stringify(body); return JSON.stringify(body);
}, [image, containerName]); }, [image, containerName]);
const accessKeyPlaceholder = t('k8s.cicd.accessKeyPlaceholder');
const updateCurl = accessKey const updateCurl = accessKey
? `curl -X POST '${updateUrl}' \\ ? `curl -X POST '${updateUrl}' \\\n -H 'X-AIOps-Access-Key: ${accessKey}' \\\n -H 'Content-Type: application/json' \\\n -d '${updateBody}'`
-H 'X-AIOps-Access-Key: ${accessKey}' \\ : `curl -X POST '${updateUrl}' \\\n -H 'X-AIOps-Access-Key: ${accessKeyPlaceholder}' \\\n -H 'Content-Type: application/json' \\\n -d '${updateBody}'`;
-H 'Content-Type: application/json' \\
-d '${updateBody}'`
: t('kubernetes.cicdwebhookcontent.s1976d2', { updateUrl: updateUrl, updateBody: updateBody });
const restartCurl = accessKey const restartCurl = accessKey
? `curl -X POST '${restartUrl}' \\ ? `curl -X POST '${restartUrl}' \\\n -H 'X-AIOps-Access-Key: ${accessKey}'`
-H 'X-AIOps-Access-Key: ${accessKey}'` : `curl -X POST '${restartUrl}' \\\n -H 'X-AIOps-Access-Key: ${accessKeyPlaceholder}'`;
: t('kubernetes.cicdwebhookcontent.s0e3668', { restartUrl: restartUrl });
const canCopy = !!accessKey && !keyExpired; const canCopy = !!accessKey && !keyExpired;
@@ -81,53 +78,53 @@ export function CICDWebhookContent({
<div className="rounded-md bg-[var(--dg-bg-tertiary)]/50 px-3 py-2 text-xs text-[var(--dg-text-muted)] leading-relaxed"> <div className="rounded-md bg-[var(--dg-bg-tertiary)]/50 px-3 py-2 text-xs text-[var(--dg-text-muted)] leading-relaxed">
{keyLoading ? ( {keyLoading ? (
<span className="inline-flex items-center gap-1.5"> <span className="inline-flex items-center gap-1.5">
<Loader2 className="h-3 w-3 animate-spin" />正在读取 API 密钥… <Loader2 className="h-3 w-3 animate-spin" />{t('k8s.cicd.readingKey')}
</span> </span>
) : keyExpired ? ( ) : keyExpired ? (
<> <>
访问凭证已过期,请前往 {t('k8s.cicd.expiredPrefix')}
<Link to="/profile" className="text-[var(--dg-blue)] hover:underline mx-1">{t('header.profile')}</Link> <Link to="/profile" className="text-[var(--dg-blue)] hover:underline mx-1">{t('k8s.cicd.profileCenter')}</Link>
调整有效期或轮换凭证后再复制 curl。 {t('k8s.cicd.expiredSuffix')}
</> </>
) : accessKey ? ( ) : accessKey ? (
<>{t('kubernetes.cicdwebhookcontent.scd2b7d')}</> <>{t('k8s.cicd.cachedHint')}</>
) : hasKey ? ( ) : hasKey ? (
<> <>
已检测到访问凭证,但本机未缓存明文。请前往 {t('k8s.cicd.detectedPrefix')}
<Link to="/profile" className="text-[var(--dg-blue)] hover:underline mx-1">{t('header.profile')}</Link> <Link to="/profile" className="text-[var(--dg-blue)] hover:underline mx-1">{t('k8s.cicd.profileCenter')}</Link>
轮换凭证一次,之后 curl 将自动填入。 {t('k8s.cicd.detectedSuffix')}
</> </>
) : ( ) : (
<> <>
请先在 {t('k8s.cicd.noKeyPrefix')}
<Link to="/profile" className="text-[var(--dg-blue)] hover:underline mx-1">{t('header.profile')}</Link> <Link to="/profile" className="text-[var(--dg-blue)] hover:underline mx-1">{t('k8s.cicd.profileCenter')}</Link>
签发 CI/CD 访问凭证,curl 将自动填入。 {t('k8s.cicd.noKeySuffix')}
</> </>
)} )}
</div> </div>
<CodeSnippetBlock <CodeSnippetBlock
label=t('kubernetes.deployment.updateImage') label={t('k8s.editImage.updateImage')}
code={updateCurl} code={updateCurl}
copyLabel=t('kubernetes.cicdwebhookcontent.s25a990') copyLabel={t('k8s.cicd.copyLabel')}
copyDisabled={!canCopy} copyDisabled={!canCopy}
copyDisabledTitle=t('kubernetes.cicdwebhookcontent.sc3bc41') copyDisabledTitle={t('k8s.cicd.copyDisabledTitle')}
/> />
<CodeSnippetBlock <CodeSnippetBlock
label=t('kubernetes.deployment.restart') label={t('k8s.cicd.rollingRestart')}
code={restartCurl} code={restartCurl}
copyLabel=t('kubernetes.cicdwebhookcontent.s25a990') copyLabel={t('k8s.cicd.copyLabel')}
copyDisabled={!canCopy} copyDisabled={!canCopy}
copyDisabledTitle=t('kubernetes.cicdwebhookcontent.sc3bc41') copyDisabledTitle={t('k8s.cicd.copyDisabledTitle')}
/> />
<div className="text-xs text-[var(--dg-text-muted)] space-y-1"> <div className="text-xs text-[var(--dg-text-muted)] space-y-1">
<p>{t('kubernetes.cicdwebhookcontent.s1bdaf4')}<code className="text-[var(--dg-text-secondary)]">{image || '—'}</code> <p>{t('k8s.cicd.sampleImage')}<code className="text-[var(--dg-text-secondary)]">{image || '—'}</code>
{containerName ? <> {t('kubernetes.cicdwebhookcontent.s9b07e8')} <code className="text-[var(--dg-text-secondary)]">{containerName}</code></> : null} {containerName ? <>{t('k8s.cicd.container')}<code className="text-[var(--dg-text-secondary)]">{containerName}</code></> : null}
</p> </p>
<p>{t('kubernetes.cicdwebhookcontent.se067d1')}</p> <p>{t('k8s.cicd.tipLongTermKey')}</p>
<p>{t('kubernetes.cicdwebhookcontent.s311998')} <code className="text-[var(--dg-text-secondary)]">image</code> {t('kubernetes.cicdwebhookcontent.s55260c')}</p> <p>{t('k8s.cicd.tipEditImagePrefix')}<code className="text-[var(--dg-text-secondary)]">image</code>{t('k8s.cicd.tipEditImageSuffix')}</p>
<p>{t('kubernetes.cicdwebhookcontent.s4e20ba')} <code className="text-[var(--dg-text-secondary)]">{t('kubernetes.cicdwebhookcontent.s67cc60')}</code></p> <p>{t('k8s.cicd.tipBearerPrefix')}<code className="text-[var(--dg-text-secondary)]">Authorization: Bearer &lt;{t('k8s.cicd.tipBearerKey')}&gt;</code>{t('k8s.cicd.tipBearerSuffix')}</p>
</div> </div>
</div> </div>
); );
@@ -1,13 +1,13 @@
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
// EditModeContainer.tsx — 编辑模式 Tab 容器,共享 manifest 状态 // Logan.Li // EditModeContainer.tsx — 编辑模式 Tab 容器,共享 manifest 状态 // Logan.Li
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Container, Settings, Database, Network } from 'lucide-react'; import { Container, Settings, Database, Network } from 'lucide-react';
import { DeploymentEditBasic } from '../DeploymentEditBasic'; import { DeploymentEditBasic } from '../DeploymentEditBasic';
import { DeploymentEditContainers } from '../DeploymentEditContainers'; import { DeploymentEditContainers } from '../DeploymentEditContainers';
import { DeploymentEditStorage } from '../DeploymentEditStorage'; import { DeploymentEditStorage } from '../DeploymentEditStorage';
import { DeploymentEditAdvanced } from '../DeploymentEditAdvanced'; import { DeploymentEditAdvanced } from '../DeploymentEditAdvanced';
import { DeploymentEditService } from '../DeploymentEditService'; import { DeploymentEditService } from '../DeploymentEditService';
import { useTranslation } from 'react-i18next';
export interface EditModeContainerProps { export interface EditModeContainerProps {
clusterCode: string; clusterCode: string;
@@ -36,11 +36,11 @@ export function EditModeContainer({ clusterCode, namespace, deploymentName, mani
}; };
const tabs: Array<{ key: EditTab; label: string; icon: typeof Settings }> = [ const tabs: Array<{ key: EditTab; label: string; icon: typeof Settings }> = [
{ key: 'basic', label: t('deploy.label.basicInfo'), icon: Settings }, { key: 'basic', label: t('k8s.editMode.basic'), icon: Settings },
{ key: 'containers', label: t('kubernetes.editmodecontainer.sd58c2e'), icon: Container }, { key: 'containers', label: t('k8s.editMode.containers'), icon: Container },
{ key: 'storage', label: t('kubernetes.editmodecontainer.s9ffdac'), icon: Database }, { key: 'storage', label: t('k8s.editMode.storage'), icon: Database },
{ key: 'advanced', label: t('kubernetes.editmodecontainer.se37075'), icon: Settings }, { key: 'advanced', label: t('k8s.editMode.advanced'), icon: Settings },
{ key: 'service', label: t('kubernetes.editmodecontainer.s8bdc2d'), icon: Network }, { key: 'service', label: t('k8s.editMode.service'), icon: Network },
]; ];
const commonProps = { const commonProps = {
@@ -8,8 +8,8 @@ import { FileText, RefreshCw, Loader2, X } from 'lucide-react';
import { kubernetesApi } from '@/api'; import { kubernetesApi } from '@/api';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import type { JsonData } from '@/types/common';
export interface PodLogsModalProps { export interface PodLogsModalProps {
clusterCode: string; clusterCode: string;
@@ -32,9 +32,9 @@ export function PodLogsModal({ clusterCode, namespace, podName, containers, onCl
setLoading(true); setLoading(true);
try { try {
const res: JsonData = await kubernetesApi.getPodLogs(clusterCode, namespace, podName, tail, container || undefined); const res: JsonData = await kubernetesApi.getPodLogs(clusterCode, namespace, podName, tail, container || undefined);
setLogs(res?.data?.logs || res?.logs || res || t('kubernetes.podlogsmodal.s4ff3b4')); setLogs(res?.data?.logs || res?.logs || res || t('k8s.podLogs.noLogs'));
} catch { } catch {
setLogs(t('kubernetes.podlogsmodal.sc93f33')); setLogs(t('k8s.podLogs.loadFailed'));
} finally { setLoading(false); } } finally { setLoading(false); }
}; };
@@ -59,7 +59,7 @@ export function PodLogsModal({ clusterCode, namespace, podName, containers, onCl
setLogs(buf); setLogs(buf);
} }
} catch { } catch {
toast({ title: t('kubernetes.podlogsmodal.s6273c9'), variant: 'destructive' }); toast({ title: t('k8s.podLogs.streamInterrupted'), variant: 'destructive' });
} finally { setStreaming(false); } } finally { setStreaming(false); }
}; };
@@ -87,14 +87,14 @@ export function PodLogsModal({ clusterCode, namespace, podName, containers, onCl
{loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />} {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
</Button> </Button>
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] dg-text-green text-xs" onClick={startStream} disabled={streaming}> <Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] dg-text-green text-xs" onClick={startStream} disabled={streaming}>
{streaming ? t('kubernetes.podlogsmodal.s2d4fb3') : t('monitor.logStreaming')} {streaming ? t('k8s.podLogs.streaming') : t('k8s.podLogs.liveStream')}
</Button> </Button>
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary" onClick={onClose}><X className="h-4 w-4" /></Button> <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary" onClick={onClose}><X className="h-4 w-4" /></Button>
</div> </div>
</div> </div>
<div className="flex-1 overflow-auto p-3"> <div className="flex-1 overflow-auto p-3">
<pre className="bg-[var(--dg-bg-primary)] rounded p-3 text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap max-h-[60vh] overflow-auto"> <pre className="bg-[var(--dg-bg-primary)] rounded p-3 text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap max-h-[60vh] overflow-auto">
{logs || t('kubernetes.podlogsmodal.s99eac0')} {logs || t('k8s.podLogs.noLogContent')}
</pre> </pre>
</div> </div>
</div> </div>
@@ -4,9 +4,9 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { ArrowRight, Loader2 } from 'lucide-react'; import { ArrowRight, Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { joinImageRef, parseImageRef } from '../image-ref-utils'; import { joinImageRef, parseImageRef } from '../image-ref-utils';
import { ModalShell } from './ModalShell'; import { ModalShell } from './ModalShell';
import { useTranslation } from 'react-i18next';
export interface UpdateImageModalProps { export interface UpdateImageModalProps {
deployment: any; deployment: any;
@@ -48,14 +48,14 @@ export function UpdateImageModal({
}; };
return ( return (
<ModalShell title=t('kubernetes.updateimagemodal.s22a2ed') onClose={onClose} size="xl"> <ModalShell title={t('k8s.editImage.title')} onClose={onClose} size="xl">
<div className="space-y-5"> <div className="space-y-5">
{/* 当前镜像:只读展示完整地址与 Tag // Logan.Li */} {/* 当前镜像:只读展示完整地址与 Tag // Logan.Li */}
<div className="rounded-lg border border-[var(--dg-border)]/80 bg-[var(--dg-bg-tertiary)]/40 p-4 space-y-3"> <div className="rounded-lg border border-[var(--dg-border)]/80 bg-[var(--dg-bg-tertiary)]/40 p-4 space-y-3">
<p className="text-xs font-medium dg-text-secondary">{t('kubernetes.deployment.currentImage')}</p> <p className="text-xs font-medium dg-text-secondary">{t('k8s.editImage.currentImage')}</p>
<div className="grid grid-cols-[1fr_180px] gap-3"> <div className="grid grid-cols-[1fr_180px] gap-3">
<div> <div>
<Label className="dg-text-muted text-xs">{t('kubernetes.updateimagemodal.sdbe6a6')}</Label> <Label className="dg-text-muted text-xs">{t('k8s.editImage.imageAddress')}</Label>
<p <p
className="mt-1.5 text-sm text-[var(--dg-text-primary)] font-mono break-all leading-relaxed bg-[var(--dg-bg-secondary)]/60 rounded-md px-3 py-2.5 min-h-[42px]" className="mt-1.5 text-sm text-[var(--dg-text-primary)] font-mono break-all leading-relaxed bg-[var(--dg-bg-secondary)]/60 rounded-md px-3 py-2.5 min-h-[42px]"
title={current.repository || '-'} title={current.repository || '-'}
@@ -64,7 +64,7 @@ export function UpdateImageModal({
</p> </p>
</div> </div>
<div> <div>
<Label className="dg-text-muted text-xs">{t('kubernetes.updateimagemodal.sf08c71')}</Label> <Label className="dg-text-muted text-xs">{t('k8s.editImage.currentTag')}</Label>
<p <p
className="mt-1.5 text-sm text-cyan-300 font-mono break-all leading-relaxed bg-[var(--dg-bg-secondary)]/60 rounded-md px-3 py-2.5 min-h-[42px]" className="mt-1.5 text-sm text-cyan-300 font-mono break-all leading-relaxed bg-[var(--dg-bg-secondary)]/60 rounded-md px-3 py-2.5 min-h-[42px]"
title={current.tag || '-'} title={current.tag || '-'}
@@ -74,7 +74,7 @@ export function UpdateImageModal({
</div> </div>
</div> </div>
<p className="text-[11px] dg-text-muted font-mono break-all" title={currentImage}> <p className="text-[11px] dg-text-muted font-mono break-all" title={currentImage}>
完整引用:<span className="dg-text-secondary">{currentImage || '-'}</span> {t('k8s.editImage.fullRef')}<span className="dg-text-secondary">{currentImage || '-'}</span>
</p> </p>
</div> </div>
@@ -84,10 +84,10 @@ export function UpdateImageModal({
{/* 新镜像:地址与 Tag 分栏编辑 // Logan.Li */} {/* 新镜像:地址与 Tag 分栏编辑 // Logan.Li */}
<div className="rounded-lg border border-blue-500/30 bg-blue-500/5 p-4 space-y-3"> <div className="rounded-lg border border-blue-500/30 bg-blue-500/5 p-4 space-y-3">
<p className="text-xs font-medium text-blue-300/90">{t('kubernetes.deployment.newImage')}</p> <p className="text-xs font-medium text-blue-300/90">{t('k8s.editImage.newImage')}</p>
<div className="grid grid-cols-[1fr_180px] gap-3"> <div className="grid grid-cols-[1fr_180px] gap-3">
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.updateimagemodal.sdbe6a6')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.editImage.imageAddress')}</Label>
<Input <Input
value={newRepo} value={newRepo}
onChange={e => { onChange={e => {
@@ -100,7 +100,7 @@ export function UpdateImageModal({
/> />
</div> </div>
<div> <div>
<Label className="dg-text-secondary text-xs">{t('kubernetes.updateimagemodal.s6a38a8')}</Label> <Label className="dg-text-secondary text-xs">{t('k8s.editImage.newTag')}</Label>
<Input <Input
value={newTag} value={newTag}
onChange={e => { onChange={e => {
@@ -115,7 +115,7 @@ export function UpdateImageModal({
</div> </div>
<div className="flex flex-wrap items-center gap-2 text-xs"> <div className="flex flex-wrap items-center gap-2 text-xs">
<span className="dg-text-muted">{t('kubernetes.updateimagemodal.sec74e0')}</span> <span className="dg-text-muted">{t('k8s.editImage.tagChange')}</span>
<code className="px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] dg-text-secondary font-mono">{current.tag}</code> <code className="px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] dg-text-secondary font-mono">{current.tag}</code>
<ArrowRight className="h-3 w-3 dg-text-muted" /> <ArrowRight className="h-3 w-3 dg-text-muted" />
<code <code
@@ -126,28 +126,28 @@ export function UpdateImageModal({
{newTag.trim() || '-'} {newTag.trim() || '-'}
</code> </code>
{!tagChanged && !repoChanged && ( {!tagChanged && !repoChanged && (
<span className="dg-text-muted">{t('kubernetes.updateimagemodal.s47c8cf')}</span> <span className="dg-text-muted">{t('k8s.editImage.notModified')}</span>
)} )}
{repoChanged && !tagChanged && ( {repoChanged && !tagChanged && (
<span className="dg-text-yellow/80">{t('kubernetes.updateimagemodal.sdb3122')}</span> <span className="dg-text-yellow/80">{t('k8s.editImage.addressChanged')}</span>
)} )}
</div> </div>
<p className="text-[11px] dg-text-muted font-mono break-all"> <p className="text-[11px] dg-text-muted font-mono break-all">
更新预览:<span className="text-[var(--dg-text-secondary)]">{previewImage || '-'}</span> {t('k8s.editImage.updatePreview')}<span className="text-[var(--dg-text-secondary)]">{previewImage || '-'}</span>
</p> </p>
</div> </div>
<div className="flex justify-end gap-2 pt-1"> <div className="flex justify-end gap-2 pt-1">
<Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onClose}> <Button variant="outline" className="border-[var(--dg-border)] dg-text-secondary" onClick={onClose}>
取消 {t('common.cancel')}
</Button> </Button>
<Button <Button
className="bg-blue-600 hover:bg-blue-700" className="bg-blue-600 hover:bg-blue-700"
disabled={actionLoading === 'image' || !previewImage.trim() || !hasChanges} disabled={actionLoading === 'image' || !previewImage.trim() || !hasChanges}
onClick={onUpdateImage} onClick={onUpdateImage}
> >
{actionLoading === 'image' ? <Loader2 className="h-4 w-4 animate-spin" /> : i18n.t('kubernetes.deployment.updateImage')} {actionLoading === 'image' ? <Loader2 className="h-4 w-4 animate-spin" /> : t('k8s.editImage.updateImage')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -1,7 +1,6 @@
// k8s-event-utils — K8s Event 字段归一化与展示 // Logan.Li // k8s-event-utils — K8s Event 字段归一化与展示 // Logan.Li
import { elapsedSeconds, formatDuration, formatK8sTime } from './k8s-yaml-utils'; import { elapsedSeconds, formatDuration, formatK8sTime } from './k8s-yaml-utils';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import i18n from '@/i18n';
export interface NormalizedEvent { export interface NormalizedEvent {
name: string; name: string;
@@ -60,11 +59,11 @@ export function formatEventRelative(ts: string): string {
const diff = Date.now() - new Date(ts).getTime(); const diff = Date.now() - new Date(ts).getTime();
if (diff < 0) return ''; if (diff < 0) return '';
const mins = Math.floor(diff / 60000); const mins = Math.floor(diff / 60000);
if (mins < 1) return i18n.t('task.cronJob.time.justNow'); if (mins < 1) return '刚刚';
if (mins < 60) return i18n.t('kubernetes.k8sEventUtils.s9dc098', { mins: mins }); if (mins < 60) return `${mins}分钟前`;
const hrs = Math.floor(mins / 60); const hrs = Math.floor(mins / 60);
if (hrs < 24) return i18n.t('kubernetes.k8sEventUtils.sc71bd7', { hrs: hrs }); if (hrs < 24) return `${hrs}小时前`;
return i18n.t('kubernetes.k8sEventUtils.s02f1ca', { Math.floor(hrs / 24): Math.floor(hrs / 24) }); return `${Math.floor(hrs / 24)}天前`;
} }
/** 重复跨度:首次 → 最后 // Logan.Li */ /** 重复跨度:首次 → 最后 // Logan.Li */
@@ -3,26 +3,25 @@ import {
Network, Server, Globe, Cloud, Boxes, Database, Zap, Box, Network, Server, Globe, Cloud, Boxes, Database, Zap, Box,
} from 'lucide-react'; } from 'lucide-react';
import type { TopologyNode, TopologyEdge } from '@/types'; import type { TopologyNode, TopologyEdge } from '@/types';
import i18n from '@/i18n';
// K8s 资源类型 → 拓扑节点类型标签 // Logan.Li // K8s 资源类型 → 拓扑节点类型标签 // Logan.Li
export const NODE_TYPE_LABELS: Record<string, string> = { export const NODE_TYPE_LABELS: Record<string, string> = {
cluster: i18n.t('kubernetes.topologyHelpers.s85fe50'), cluster: 'k8s.topology.typeCluster',
loadbalancer: 'Ingress', loadbalancer: 'k8s.topology.typeIngress',
service: 'Service', service: 'k8s.topology.typeService',
app: 'Deployment', app: 'k8s.topology.typeDeployment',
pod: 'Pod', pod: 'k8s.topology.typePod',
server: 'Node', server: 'k8s.topology.typeNode',
database: i18n.t('kubernetes.topologyHelpers.s68051b'), database: 'k8s.topology.typeDatabase',
external: i18n.t('kubernetes.topologyHelpers.s47921e'), external: 'k8s.topology.typeExternal',
custom: i18n.t('common.custom'), custom: 'k8s.topology.typeCustom',
}; };
// 自定义节点类型选项(编辑模式用) // 自定义节点类型选项(编辑模式用)
export const CUSTOM_NODE_TYPES = [ export const CUSTOM_NODE_TYPES = [
{ value: 'database', label: i18n.t('kubernetes.topologyHelpers.s68051b'), desc: i18n.t('kubernetes.topologyHelpers.sf6a891') }, { value: 'database', label: 'k8s.topology.typeDatabase', desc: 'k8s.topology.customDbDesc' },
{ value: 'external', label: i18n.t('kubernetes.topologyHelpers.s47921e'), desc: i18n.t('kubernetes.topologyHelpers.s39b435') }, { value: 'external', label: 'k8s.topology.typeExternal', desc: 'k8s.topology.customExtDesc' },
{ value: 'custom', label: i18n.t('common.custom'), desc: i18n.t('kubernetes.topologyHelpers.sfb5d27') }, { value: 'custom', label: 'k8s.topology.typeCustom', desc: 'k8s.topology.customCustomDesc' },
]; ];
// 判断是否为自定义节点(非 K8s 原生资源) // 判断是否为自定义节点(非 K8s 原生资源)
@@ -86,7 +85,7 @@ export function buildTopology( cluster: any, ingresses: any[], services: any[],
// Layer 0: Cluster // Layer 0: Cluster
const clusterId = `cluster-${cluster.id}`; const clusterId = `cluster-${cluster.id}`;
tNodes.push({ tNodes.push({
id: clusterId, name: cluster.name || i18n.t('kubernetes.topologyHelpers.s85fe50'), type: 'cluster', id: clusterId, name: cluster.name || 'Cluster', type: 'cluster',
x: canvasW / 2, y: layerY[0], x: canvasW / 2, y: layerY[0],
data: { kind: 'cluster', version: cluster.version, status: cluster.status, api_server: cluster.api_server, node_count: cluster.node_count, pod_count: cluster.pod_count }, data: { kind: 'cluster', version: cluster.version, status: cluster.status, api_server: cluster.api_server, node_count: cluster.node_count, pod_count: cluster.pod_count },
}); });
@@ -51,7 +51,7 @@ const ROUTE_NAME_MAP: Record<string, string> = {
'datasources': i18n.t('menu.datasources'), 'datasources': i18n.t('menu.datasources'),
'dashboards': i18n.t('menu.grafana'), 'dashboards': i18n.t('menu.grafana'),
'host-monitor': i18n.t('monitor.hostMonitor'), 'host-monitor': i18n.t('monitor.hostMonitor'),
'alerts': i18n.t('ui.breadcrumb.sa57c10'), 'alerts': '监控告警',
'approval': i18n.t('menu.approval'), 'approval': i18n.t('menu.approval'),
'approval-resource': i18n.t('menu.approval'), 'approval-resource': i18n.t('menu.approval'),
'approval-app': i18n.t('menu.approvalApp'), 'approval-app': i18n.t('menu.approvalApp'),
@@ -138,13 +138,13 @@ export function Breadcrumb() {
return ( return (
<nav <nav
aria-label=t('ui.breadcrumb.s357625') aria-label={t('common.breadcrumbNav')}
className="flex items-center gap-1.5 text-sm animate-fade-in" className="flex items-center gap-1.5 text-sm animate-fade-in"
> >
<Link <Link
to="/" to="/"
className="flex items-center gap-1 text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors duration-200" className="flex items-center gap-1 text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors duration-200"
title=t('menu.dashboard') title={t('menu.dashboard')}
> >
<Home className="h-3.5 w-3.5" /> <Home className="h-3.5 w-3.5" />
</Link> </Link>
@@ -2,6 +2,7 @@ import { Component, type ErrorInfo, type ReactNode } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { AlertTriangle, RotateCcw, Home, Bug } from 'lucide-react'; import { AlertTriangle, RotateCcw, Home, Bug } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n'; import i18n from '@/i18n';
interface Props { interface Props {
@@ -32,8 +33,8 @@ export class ErrorBoundary extends Component<Props, State> {
} }
override componentDidCatch(error: Error, errorInfo: ErrorInfo) { override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error(i18n.t('ui.errorboundary.sc0bdc3'), error); console.error(i18n.t('common.ebCaughtError'), error);
console.error(i18n.t('ui.errorboundary.s1f72f8'), errorInfo.componentStack); console.error(i18n.t('common.ebErrorInfo'), errorInfo.componentStack);
this.setState({ error, errorInfo }); this.setState({ error, errorInfo });
} }
@@ -47,11 +48,11 @@ export class ErrorBoundary extends Component<Props, State> {
handleReport = () => { handleReport = () => {
const { error, errorInfo } = this.state; const { error, errorInfo } = this.state;
const body = i18n.t('ui.errorboundary.s8f0ca2', { new Date().toISOString(): new Date().toISOString(), window.location.href: window.location.href, navigator.userAgent: navigator.userAgent, error?.name: error?.name, error?.message: error?.message, errorInfo?.componentStack: errorInfo?.componentStack }); const body = `## 错误报告\n\n**时间:** ${new Date().toISOString()}\n**URL:** ${window.location.href}\n**用户代理:** ${navigator.userAgent}\n\n### 错误信息\n\n\`\`\`\n${error?.name}: ${error?.message}\n\`\`\`\n\n### 组件堆栈\n\n\`\`\`\n${errorInfo?.componentStack}\n\`\`\`\n`;
navigator.clipboard.writeText(body).then(() => { navigator.clipboard.writeText(body).then(() => {
toast.success(i18n.t('ui.errorboundary.sf29c9d')); toast.success(i18n.t('common.errorCopiedToClipboard'));
}).catch(() => { }).catch(() => {
toast.error(i18n.t('ui.errorboundary.s7b5065')); toast.error(i18n.t('common.copyFailedManual'));
}); });
}; };
@@ -116,7 +117,7 @@ export class ErrorBoundary extends Component<Props, State> {
onClick={this.handleRetry} onClick={this.handleRetry}
> >
<RotateCcw className="h-4 w-4 mr-1.5" /> <RotateCcw className="h-4 w-4 mr-1.5" />
重新加载 {i18n.t('common.reload')}
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -18,7 +18,6 @@ import { Plus, Trash2, Loader2 } from 'lucide-react';
import { alertApi } from '@/api'; import { alertApi } from '@/api';
import { CHANNEL_TYPES, getChannelTypeLabel } from './alertShared'; import { CHANNEL_TYPES, getChannelTypeLabel } from './alertShared';
import type { AlertChannel } from '@/types'; import type { AlertChannel } from '@/types';
import { useTranslation } from 'react-i18next';
const defaultChannelForm = { name: '', type: 'dingtalk', config: '', enabled: true }; const defaultChannelForm = { name: '', type: 'dingtalk', config: '', enabled: true };
@@ -33,7 +32,6 @@ export function AlertChannelDialog({
notifyChannels: AlertChannel[]; notifyChannels: AlertChannel[];
onChannelsChanged: () => void; onChannelsChanged: () => void;
}) { }) {
const { t } = useTranslation();
const _confirm = useConfirm(); const _confirm = useConfirm();
const [editingChannel, setEditingChannel] = useState<AlertChannel | null>(null); const [editingChannel, setEditingChannel] = useState<AlertChannel | null>(null);
const [channelSaving, setChannelSaving] = useState(false); const [channelSaving, setChannelSaving] = useState(false);
@@ -87,7 +85,7 @@ export function AlertChannelDialog({
}; };
const handleDeleteChannel = async ( id: number) => { const handleDeleteChannel = async ( id: number) => {
{ const ok = await _confirm({ title: t('monitor.alertchanneldialog.sa4450b'), description: t('monitor.alertchanneldialog.sb1a9e5'), confirmText: t('common.delete'), variant: 'destructive' }); if (!ok) return; } { const ok = await _confirm({ title: '删除通知渠道', description: '确定删除此通知渠道?', confirmText: '删除', variant: 'destructive' }); if (!ok) return; }
try { try {
await alertApi.deleteNotifyChannel(id); await alertApi.deleteNotifyChannel(id);
if (editingChannel && editingChannel.id === id) resetChannelForm(); if (editingChannel && editingChannel.id === id) resetChannelForm();
@@ -122,7 +120,7 @@ export function AlertChannelDialog({
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="dg-input max-w-2xl"> <DialogContent className="dg-input max-w-2xl">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]">{t('monitor.alertchanneldialog.s976ad4')}</DialogTitle> <DialogTitle className="text-[var(--dg-text-primary)]">通知渠道配置</DialogTitle>
<DialogDescription className="dg-text-muted"> <DialogDescription className="dg-text-muted">
管理告警通知渠道(钉钉/企业微信/邮件/短信/Webhook),配置后可在告警规则中引用 管理告警通知渠道(钉钉/企业微信/邮件/短信/Webhook),配置后可在告警规则中引用
</DialogDescription> </DialogDescription>
@@ -132,7 +130,7 @@ export function AlertChannelDialog({
{/* 渠道列表 */} {/* 渠道列表 */}
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label className="text-[var(--dg-text-secondary)] text-sm">{t('monitor.alertchanneldialog.se6ad00')}</Label> <Label className="text-[var(--dg-text-secondary)] text-sm">已配置渠道</Label>
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
@@ -175,9 +173,9 @@ export function AlertChannelDialog({
</div> </div>
<div className="flex items-center justify-between mt-2"> <div className="flex items-center justify-between mt-2">
{ch.test_status === 'success' ? ( {ch.test_status === 'success' ? (
<span className="text-[11px] dg-text-green">{t('monitor.alertchanneldialog.sd25431')}</span> <span className="text-[11px] dg-text-green">测试通过</span>
) : ( ) : (
<span className="text-[11px] dg-text-muted">{t('monitor.alertchanneldialog.s8c852a')}</span> <span className="text-[11px] dg-text-muted">未测试</span>
)} )}
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}> <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
<Button <Button
@@ -187,7 +185,7 @@ export function AlertChannelDialog({
disabled={channelTesting === ch.id} disabled={channelTesting === ch.id}
onClick={() => handleTestChannel(ch.id)} onClick={() => handleTestChannel(ch.id)}
> >
{channelTesting === ch.id ? <Loader2 className="h-3 w-3 animate-spin" /> : t('common.test')} {channelTesting === ch.id ? <Loader2 className="h-3 w-3 animate-spin" /> : '测试'}
</Button> </Button>
<Button <Button
size="sm" size="sm"
@@ -208,19 +206,19 @@ export function AlertChannelDialog({
{/* 渠道表单 */} {/* 渠道表单 */}
<div className="space-y-4"> <div className="space-y-4">
<Label className="text-[var(--dg-text-secondary)] text-sm"> <Label className="text-[var(--dg-text-secondary)] text-sm">
{editingChannel ? t('monitor.alertchanneldialog.sc47145') : t('monitor.alertchanneldialog.s82bd47')} {editingChannel ? '编辑渠道' : '新建渠道'}
</Label> </Label>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="dg-text-secondary text-xs">{t('monitor.alertchanneldialog.sb8cbd8')} <span className="dg-text-red">*</span></Label> <Label className="dg-text-secondary text-xs">渠道名称 <span className="dg-text-red">*</span></Label>
<Input <Input
value={channelForm.name} value={channelForm.name}
onChange={(e) => setChannelForm({ ...channelForm, name: e.target.value })} onChange={(e) => setChannelForm({ ...channelForm, name: e.target.value })}
placeholder=t('monitor.alertchanneldialog.s6906c9') placeholder="如:运维告警群"
className="dg-input h-9" className="dg-input h-9"
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="dg-text-secondary text-xs">{t('monitor.channelType')}</Label> <Label className="dg-text-secondary text-xs">渠道类型</Label>
<select <select
value={channelForm.type} value={channelForm.type}
onChange={(e) => setChannelForm({ ...channelForm, type: e.target.value })} onChange={(e) => setChannelForm({ ...channelForm, type: e.target.value })}
@@ -232,7 +230,7 @@ export function AlertChannelDialog({
</select> </select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="dg-text-secondary text-xs">{t('monitor.alertchanneldialog.s9ca77d')}</Label> <Label className="dg-text-secondary text-xs">配置(JSON)</Label>
<Textarea <Textarea
value={channelForm.config} value={channelForm.config}
onChange={(e) => setChannelForm({ ...channelForm, config: e.target.value })} onChange={(e) => setChannelForm({ ...channelForm, config: e.target.value })}
@@ -248,7 +246,7 @@ export function AlertChannelDialog({
onCheckedChange={(v) => setChannelForm({ ...channelForm, enabled: v })} onCheckedChange={(v) => setChannelForm({ ...channelForm, enabled: v })}
className="data-[state=checked]:bg-emerald-600" className="data-[state=checked]:bg-emerald-600"
/> />
<Label className="dg-text-secondary text-xs">{t('monitor.alertchanneldialog.sbdab1c')}</Label> <Label className="dg-text-secondary text-xs">启用此渠道</Label>
</div> </div>
)} )}
</div> </div>
@@ -268,7 +266,7 @@ export function AlertChannelDialog({
onClick={handleSaveChannel} onClick={handleSaveChannel}
> >
{channelSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />} {channelSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
{editingChannel ? i18n.t('cloud.saveChanges') : i18n.t('monitor.alertchanneldialog.s22d04e')} {editingChannel ? '保存修改' : '添加渠道'}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -20,10 +20,8 @@ import { PageShell } from '@/components/layout/PageShell';
import { StatStrip } from '@/components/ui/stat-strip'; import { StatStrip } from '@/components/ui/stat-strip';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import type { AlertEventRecord, AlertRuleRecord, AlertChannel } from '@/types'; import type { AlertEventRecord, AlertRuleRecord, AlertChannel } from '@/types';
import { useTranslation } from 'react-i18next';
export function AlertManager() { export function AlertManager() {
const { t } = useTranslation();
const [activeTab, setActiveTab] = useState('events'); const [activeTab, setActiveTab] = useState('events');
const [alerts, setAlerts] = useState<AlertEventRecord[]>([]); const [alerts, setAlerts] = useState<AlertEventRecord[]>([]);
const [rules, setRules] = useState<AlertRuleRecord[]>([]); const [rules, setRules] = useState<AlertRuleRecord[]>([]);
@@ -77,15 +75,15 @@ export function AlertManager() {
]; ];
const pageTabs = [ const pageTabs = [
{ id: 'events', label: t('monitor.alertmanager.s0e5b83') }, { id: 'events', label: '告警事件' },
{ id: 'rules', label: t('alert.tab.rules') }, { id: 'rules', label: '告警规则' },
]; ];
return ( return (
<PageShell <PageShell
variant="list" variant="list"
title=t('monitor.alertmanager.sa57c10') title="监控告警"
subtitle=t('monitor.alertmanager.s1a70ca') subtitle="告警规则管理与告警事件处理"
icon={<Bell className="h-5 w-5" />} icon={<Bell className="h-5 w-5" />}
tabs={pageTabs} tabs={pageTabs}
activeTab={activeTab} activeTab={activeTab}
@@ -93,10 +91,10 @@ export function AlertManager() {
metrics={( metrics={(
<StatStrip <StatStrip
items={[ items={[
{ label: t('alert.tab.rules'), value: rules.length, color: 'blue' }, { label: '告警规则', value: rules.length, color: 'blue' },
{ label: t('monitor.firing'), value: alerts.filter((e) => e.status === 'firing').length, color: 'red' }, { label: '触发中', value: alerts.filter((e) => e.status === 'firing').length, color: 'red' },
{ label: t('monitor.alertmanager.s240597'), value: alerts.length, color: 'amber' }, { label: '今日告警', value: alerts.length, color: 'amber' },
{ label: t('kubernetes.deployment.resumed'), value: alerts.filter((e) => e.status === 'resolved').length, color: 'emerald' }, { label: '已恢复', value: alerts.filter((e) => e.status === 'resolved').length, color: 'emerald' },
]} ]}
/> />
)} )}
@@ -119,8 +117,8 @@ export function AlertManager() {
> >
<Card className="dg-card"> <Card className="dg-card">
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-[var(--dg-text-primary)]">{t('monitor.alertmanager.s358b05')}</CardTitle> <CardTitle className="text-[var(--dg-text-primary)]">告警趋势</CardTitle>
<CardDescription className="dg-text-muted">{t('monitor.alertmanager.s615fa6')}</CardDescription> <CardDescription className="dg-text-muted">过去24小时告警统计</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="h-[200px]"> <div className="h-[200px]">
@@ -153,7 +151,7 @@ export function AlertManager() {
stroke="#ef4444" stroke="#ef4444"
fillOpacity={1} fillOpacity={1}
fill="url(#colorCritical)" fill="url(#colorCritical)"
name=t('monitor.critical') name="严重"
/> />
<Area <Area
type="monotone" type="monotone"
@@ -161,7 +159,7 @@ export function AlertManager() {
stroke="#f59e0b" stroke="#f59e0b"
fillOpacity={1} fillOpacity={1}
fill="url(#colorWarning)" fill="url(#colorWarning)"
name=t('common.warning') name="警告"
/> />
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
@@ -16,7 +16,6 @@ import { Loader2 } from 'lucide-react';
import { alertApi, logCenterApi, type LogDataSource } from '@/api'; import { alertApi, logCenterApi, type LogDataSource } from '@/api';
import { parseChannels, getChannelIcon, getChannelTypeLabel } from './alertShared'; import { parseChannels, getChannelIcon, getChannelTypeLabel } from './alertShared';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
const emptyRuleForm = { const emptyRuleForm = {
name: '', name: '',
@@ -46,7 +45,6 @@ export function AlertRuleDialog({
/** 新建时默认规则类型 // Logan.Li */ /** 新建时默认规则类型 // Logan.Li */
defaultType?: 'metric' | 'log' | 'event'; defaultType?: 'metric' | 'log' | 'event';
}) { }) {
const { t } = useTranslation();
const [ruleForm, setRuleForm] = useState({ ...emptyRuleForm }); const [ruleForm, setRuleForm] = useState({ ...emptyRuleForm });
const [ruleSaving, setRuleSaving] = useState(false); const [ruleSaving, setRuleSaving] = useState(false);
const [logSources, setLogSources] = useState<LogDataSource[]>([]); const [logSources, setLogSources] = useState<LogDataSource[]>([]);
@@ -129,30 +127,30 @@ export function AlertRuleDialog({
<DialogContent className="dg-input max-w-lg"> <DialogContent className="dg-input max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]"> <DialogTitle className="text-[var(--dg-text-primary)]">
{editingRule ? t('monitor.alertruledialog.sb62c8b') : t('monitor.alertruledialog.s3564fa')} {editingRule ? '编辑告警规则' : '新建告警规则'}
</DialogTitle> </DialogTitle>
<DialogDescription className="dg-text-muted"> <DialogDescription className="dg-text-muted">
{editingRule ? t('monitor.alertruledialog.s44a3bb') : t('monitor.alertruledialog.sb785ec')} {editingRule ? '修改告警规则的触发条件和通知方式' : '配置监控指标的告警触发条件'}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1"> <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('monitor.ruleName')} <span className="dg-text-red">*</span></Label> <Label className="text-[var(--dg-text-secondary)]">规则名称 <span className="dg-text-red">*</span></Label>
<Input <Input
value={ruleForm.name} value={ruleForm.name}
onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })} onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
placeholder=t('monitor.alertruledialog.sf111cd') placeholder="如:CPU 使用率告警"
className="dg-input" className="dg-input"
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('common.description')}</Label> <Label className="text-[var(--dg-text-secondary)]">描述</Label>
<Textarea <Textarea
value={ruleForm.description} value={ruleForm.description}
onChange={(e) => setRuleForm({ ...ruleForm, description: e.target.value })} onChange={(e) => setRuleForm({ ...ruleForm, description: e.target.value })}
placeholder=t('monitor.alertruledialog.scc807b') placeholder="规则说明"
rows={2} rows={2}
className="dg-input resize-none" className="dg-input resize-none"
/> />
@@ -160,7 +158,7 @@ export function AlertRuleDialog({
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('monitor.alertruledialog.s365825')}</Label> <Label className="text-[var(--dg-text-secondary)]">规则类型</Label>
<select <select
value={ruleForm.type} value={ruleForm.type}
onChange={(e) => { onChange={(e) => {
@@ -170,13 +168,13 @@ export function AlertRuleDialog({
}} }}
className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm" className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
> >
<option value="metric">{t('monitor.alertruledialog.s38546d')}</option> <option value="metric">指标监控</option>
<option value="log">{t('menu.logAlerts')}</option> <option value="log">日志告警</option>
<option value="event">{t('monitor.alertruledialog.s80069b')}</option> <option value="event">事件告警</option>
</select> </select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('menu.datasources')}</Label> <Label className="text-[var(--dg-text-secondary)]">数据源</Label>
<select <select
value={ruleForm.source} value={ruleForm.source}
onChange={(e) => setRuleForm({ ...ruleForm, source: e.target.value, datasource_id: undefined })} onChange={(e) => setRuleForm({ ...ruleForm, source: e.target.value, datasource_id: undefined })}
@@ -191,7 +189,7 @@ export function AlertRuleDialog({
<> <>
<option value="prometheus">Prometheus</option> <option value="prometheus">Prometheus</option>
<option value="zabbix">Zabbix</option> <option value="zabbix">Zabbix</option>
<option value="custom">{t('common.custom')}</option> <option value="custom">自定义</option>
</> </>
)} )}
</select> </select>
@@ -200,15 +198,15 @@ export function AlertRuleDialog({
{ruleForm.type === 'log' && ( {ruleForm.type === 'log' && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('monitor.alertruledialog.sa2bc1e')} <span className="dg-text-red">*</span></Label> <Label className="text-[var(--dg-text-secondary)]">日志数据源 <span className="dg-text-red">*</span></Label>
<select <select
value={ruleForm.datasource_id || ''} value={ruleForm.datasource_id || ''}
onChange={(e) => setRuleForm({ ...ruleForm, datasource_id: Number(e.target.value) || undefined })} onChange={(e) => setRuleForm({ ...ruleForm, datasource_id: Number(e.target.value) || undefined })}
className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm" className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
> >
<option value="">{t('monitor.alertruledialog.s9acb96')}</option> <option value="">请选择数据源</option>
{logSources.map((s) => ( {logSources.map((s) => (
<option key={s.id} value={s.id}>{s.name}{s.is_default ? t('monitor.alertruledialog.see1f37') : ''}</option> <option key={s.id} value={s.id}>{s.name}{s.is_default ? ' (默认)' : ''}</option>
))} ))}
</select> </select>
{logSources.length === 0 && ( {logSources.length === 0 && (
@@ -218,7 +216,7 @@ export function AlertRuleDialog({
)} )}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('monitor.alertruledialog.s57ee9a')} <span className="dg-text-red">*</span></Label> <Label className="text-[var(--dg-text-secondary)]">触发表达式 <span className="dg-text-red">*</span></Label>
<Input <Input
value={ruleForm.expression} value={ruleForm.expression}
onChange={(e) => setRuleForm({ ...ruleForm, expression: e.target.value })} onChange={(e) => setRuleForm({ ...ruleForm, expression: e.target.value })}
@@ -227,26 +225,26 @@ export function AlertRuleDialog({
/> />
<p className="text-xs dg-text-muted"> <p className="text-xs dg-text-muted">
{ruleForm.type === 'log' {ruleForm.type === 'log'
? (ruleForm.source === 'loki' ? t('monitor.alertruledialog.s465c2b') : t('monitor.alertruledialog.s7072bc')) ? (ruleForm.source === 'loki' ? 'LogQL 查询或 count_over_time 表达式' : 'Elasticsearch Lucene 查询')
: t('monitor.alertruledialog.se2017e')} : 'PromQL 或指标表达式,例如 cpu_usage > 80'}
</p> </p>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('monitor.alertruledialog.sfce93b')}</Label> <Label className="text-[var(--dg-text-secondary)]">告警级别</Label>
<select <select
value={ruleForm.severity} value={ruleForm.severity}
onChange={(e) => setRuleForm({ ...ruleForm, severity: e.target.value })} onChange={(e) => setRuleForm({ ...ruleForm, severity: e.target.value })}
className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm" className="w-full h-9 px-3 rounded-md bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)] text-[var(--dg-text-primary)] text-sm"
> >
<option value="info">{t('common.info')}</option> <option value="info">提示</option>
<option value="warning">{t('common.warning')}</option> <option value="warning">警告</option>
<option value="critical">{t('monitor.critical')}</option> <option value="critical">严重</option>
</select> </select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('monitor.alertruledialog.scce774')}</Label> <Label className="text-[var(--dg-text-secondary)]">持续时间(秒)</Label>
<Input <Input
type="number" type="number"
value={ruleForm.duration} value={ruleForm.duration}
@@ -257,7 +255,7 @@ export function AlertRuleDialog({
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-secondary)]">{t('monitor.notificationChannel')}</Label> <Label className="text-[var(--dg-text-secondary)]">通知渠道</Label>
{notifyChannels.length === 0 ? ( {notifyChannels.length === 0 ? (
<div className="text-xs dg-text-yellow/80 bg-amber-500/5 border border-amber-500/20 rounded-md px-3 py-2"> <div className="text-xs dg-text-yellow/80 bg-amber-500/5 border border-amber-500/20 rounded-md px-3 py-2">
暂无已配置的通知渠道,请先在「通知渠道配置」中添加 暂无已配置的通知渠道,请先在「通知渠道配置」中添加
@@ -304,7 +302,7 @@ export function AlertRuleDialog({
onClick={handleSaveRule} onClick={handleSaveRule}
> >
{ruleSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />} {ruleSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
{editingRule ? i18n.t('cloud.saveChanges') : i18n.t('monitor.alertruledialog.s8e1e3d')} {editingRule ? '保存修改' : '创建规则'}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -18,7 +18,6 @@ import { toast } from 'sonner';
import { alertApi } from '@/api'; import { alertApi } from '@/api';
import { renderRuleChannels } from './alertShared'; import { renderRuleChannels } from './alertShared';
import type { AlertChannel, AlertRuleRecord } from '@/types'; import type { AlertChannel, AlertRuleRecord } from '@/types';
import { useTranslation } from 'react-i18next';
const COL_SPAN = 9; // 复选框 + 7 数据列 + 操作列 // Logan.Li const COL_SPAN = 9; // 复选框 + 7 数据列 + 操作列 // Logan.Li
@@ -33,7 +32,6 @@ export function AlertRulesTab({
onReload: () => void; onReload: () => void;
onEditRule: ( rule: AlertRuleRecord) => void; onEditRule: ( rule: AlertRuleRecord) => void;
}) { }) {
const { t } = useTranslation();
const confirm = useConfirm(); const confirm = useConfirm();
const [selectedIds, setSelectedIds] = useState<number[]>([]); const [selectedIds, setSelectedIds] = useState<number[]>([]);
@@ -55,19 +53,19 @@ export function AlertRulesTab({
const handleDeleteRule = async ( id: number) => { const handleDeleteRule = async ( id: number) => {
const ok = await confirm({ const ok = await confirm({
title: t('monitor.alertrulestab.sfa5bfd'), title: '删除告警规则',
description: t('monitor.alertrulestab.sd30155'), description: '确定删除此告警规则?',
confirmText: t('common.delete'), confirmText: '删除',
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
try { try {
await alertApi.deleteRule(id); await alertApi.deleteRule(id);
toast.success(t('monitor.alertrulestab.s20b3fd')); toast.success('告警规则已删除');
onReload(); onReload();
} catch (error) { } catch (error) {
console.error('Failed to delete rule:', error); console.error('Failed to delete rule:', error);
toast.error(t('common.deleteFailed')); toast.error('删除失败');
} }
}; };
@@ -75,20 +73,20 @@ export function AlertRulesTab({
const handleBatchDelete = async () => { const handleBatchDelete = async () => {
if (selectedIds.length === 0) return; if (selectedIds.length === 0) return;
const ok = await confirm({ const ok = await confirm({
title: t('monitor.alertrulestab.sbb457b'), title: '批量删除告警规则',
description: t('monitor.alertrulestab.s12d681', { selectedIds.length: selectedIds.length }), description: `确定删除选中的 ${selectedIds.length} 条告警规则吗?此操作不可撤销。`,
confirmText: t('common.batchDelete'), confirmText: '批量删除',
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
try { try {
await alertApi.batchDeleteRules(selectedIds); await alertApi.batchDeleteRules(selectedIds);
toast.success(t('monitor.alertrulestab.s327a78', { selectedIds.length: selectedIds.length })); toast.success(`已删除 ${selectedIds.length} 条告警规则`);
setSelectedIds([]); setSelectedIds([]);
onReload(); onReload();
} catch (error) { } catch (error) {
console.error('Failed to batch delete rules:', error); console.error('Failed to batch delete rules:', error);
toast.error(t('cloud.batchDeleteFailed')); toast.error('批量删除失败');
} }
}; };
@@ -134,14 +132,14 @@ export function AlertRulesTab({
className="border-[var(--dg-border-hover)]" className="border-[var(--dg-border-hover)]"
/> />
</TableHead> </TableHead>
<TableHead className="dg-text-secondary">{t('monitor.ruleName')}</TableHead> <TableHead className="dg-text-secondary">规则名称</TableHead>
<TableHead className="dg-text-secondary">{t('menu.datasources')}</TableHead> <TableHead className="dg-text-secondary">数据源</TableHead>
<TableHead className="dg-text-secondary">{t('monitor.alertrulestab.s65939c')}</TableHead> <TableHead className="dg-text-secondary">触发条件</TableHead>
<TableHead className="dg-text-secondary">{t('common.level')}</TableHead> <TableHead className="dg-text-secondary">级别</TableHead>
<TableHead className="dg-text-secondary">{t('monitor.alertDuration')}</TableHead> <TableHead className="dg-text-secondary">持续时间</TableHead>
<TableHead className="dg-text-secondary">{t('monitor.notificationChannel')}</TableHead> <TableHead className="dg-text-secondary">通知渠道</TableHead>
<TableHead className="dg-text-secondary">{t('common.status')}</TableHead> <TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary text-right">{t('common.actions')}</TableHead> <TableHead className="dg-text-secondary text-right">操作</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -1,5 +1,6 @@
// 通知渠道创建/编辑对话框 // Logan.Li // 通知渠道创建/编辑对话框 // Logan.Li
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
@@ -12,16 +13,14 @@ import {
import { toast } from 'sonner'; import { toast } from 'sonner';
import { alertApi } from '@/api'; import { alertApi } from '@/api';
import type { NotificationChannel } from './alert-center-helpers'; import type { NotificationChannel } from './alert-center-helpers';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
const CHANNEL_TYPES = [ const CHANNEL_TYPES = [
{ value: 'dingtalk', label: i18n.t('monitor.contactDingtalk'), hint: i18n.t('monitor.alertchanneldialog.sdedd24') }, { value: 'dingtalk', labelKey: 'typeDingtalk', hintKey: 'hintDingtalk' },
{ value: 'wechat', label: i18n.t('monitor.contactWechat'), hint: i18n.t('monitor.alertchanneldialog.s9c267e') }, { value: 'wechat', labelKey: 'typeWechat', hintKey: 'hintWechat' },
{ value: 'feishu', label: i18n.t('monitor.alertchanneldialog.s7714e5'), hint: i18n.t('monitor.alertchanneldialog.s98d805') }, { value: 'feishu', labelKey: 'typeFeishu', hintKey: 'hintFeishu' },
{ value: 'email', label: i18n.t('common.email'), hint: i18n.t('monitor.alertchanneldialog.s0cb420') }, { value: 'email', labelKey: 'typeEmail', hintKey: 'hintEmail' },
{ value: 'sms', label: i18n.t('common.sms'), hint: i18n.t('monitor.alertchanneldialog.s1ad98b') }, { value: 'sms', labelKey: 'typeSms', hintKey: 'hintSms' },
{ value: 'webhook', label: 'Webhook', hint: 'Webhook: {"url":"https://..."}' }, { value: 'webhook', labelKey: 'typeWebhook', hintKey: 'hintWebhook' },
]; ];
export function AlertChannelDialog({ export function AlertChannelDialog({
@@ -35,7 +34,7 @@ export function AlertChannelDialog({
editingChannel: NotificationChannel | null; editingChannel: NotificationChannel | null;
onSaved: () => void; onSaved: () => void;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [form, setForm] = useState({ name: '', type: 'dingtalk', config: '' }); const [form, setForm] = useState({ name: '', type: 'dingtalk', config: '' });
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -57,10 +56,10 @@ export function AlertChannelDialog({
const payload = { name: form.name.trim(), type: form.type, config: form.config.trim() }; const payload = { name: form.name.trim(), type: form.type, config: form.config.trim() };
if (editingChannel) { if (editingChannel) {
await alertApi.updateNotifyChannel(editingChannel.id, payload); await alertApi.updateNotifyChannel(editingChannel.id, payload);
toast.success(t('monitor.alertchanneldialog.s0cca4d')); toast.success(t('monitor:alertChannel.updated'));
} else { } else {
await alertApi.createNotifyChannel(payload); await alertApi.createNotifyChannel(payload);
toast.success(t('monitor.alertchanneldialog.s70dea9')); toast.success(t('monitor:alertChannel.added'));
} }
onOpenChange(false); onOpenChange(false);
onSaved(); onSaved();
@@ -71,52 +70,53 @@ export function AlertChannelDialog({
} }
}; };
const currentHint = CHANNEL_TYPES.find(t => t.value === form.type)?.hint || ''; const currentHint = CHANNEL_TYPES.find(ct => ct.value === form.type)?.hintKey || '';
const channelLabel = (ct: typeof CHANNEL_TYPES[number]) => t(`monitor:alertChannel.${ct.labelKey}`);
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{editingChannel ? t('monitor.alertchanneldialog.sa605a7') : t('monitor.alertchanneldialog.sc7f8b8')}</DialogTitle> <DialogTitle>{editingChannel ? t('monitor:alertChannel.editTitle') : t('monitor:alertChannel.addTitle')}</DialogTitle>
<DialogDescription>{t('monitor.alertchanneldialog.sd0af2a')}</DialogDescription> <DialogDescription>{t('monitor:alertChannel.dialogDesc')}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('monitor.alertchanneldialog.s8b7c73')}</Label> <Label>{t('monitor:alertChannel.nameRequired')}</Label>
<Input <Input
value={form.name} value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
placeholder=t('monitor.alertchanneldialog.s6906c9') placeholder={t('monitor:alertChannel.namePlaceholder')}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('monitor.channelType')}</Label> <Label>{t('monitor:alertChannel.typeLabel')}</Label>
<Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })}> <Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })}>
<SelectTrigger> <SelectTrigger>
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{CHANNEL_TYPES.map(t => ( {CHANNEL_TYPES.map(ct => (
<SelectItem key={t.value} value={t.value}>{t.label}</SelectItem> <SelectItem key={ct.value} value={ct.value}>{channelLabel(ct)}</SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('monitor.alertchanneldialog.s9ca77d')}</Label> <Label>{t('monitor:alertChannel.configJson')}</Label>
<Input <Input
value={form.config} value={form.config}
onChange={(e) => setForm({ ...form, config: e.target.value })} onChange={(e) => setForm({ ...form, config: e.target.value })}
placeholder='{"webhook":"https://...","secret":"..."}' placeholder='{\"webhook\":\"https://...\",\"secret\":\"...\"}'
className="font-mono text-sm" className="font-mono text-sm"
/> />
<p className="text-xs text-muted-foreground">{currentHint}</p> <p className="text-xs text-muted-foreground">{currentHint ? t(`monitor:alertChannel.${currentHint}`) : ''}</p>
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button>
<Button onClick={handleSave} disabled={!form.name.trim() || saving}> <Button onClick={handleSave} disabled={!form.name.trim() || saving}>
{saving ? t('k8s.topology.saving') : editingChannel ? i18n.t('cloud.saveChanges') : i18n.t('monitor.alertchanneldialog.s22d04e')} {saving ? t('monitor:alertChannel.saving') : editingChannel ? t('monitor:alertChannel.saveChanges') : t('monitor:alertChannel.addBtn')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -1,5 +1,6 @@
// 通知渠道管理 Tab(自包含:状态+API+渲染) // Logan.Li // 通知渠道管理 Tab(自包含:状态+API+渲染) // Logan.Li
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Plus, RefreshCw, Zap, Settings, X } from 'lucide-react'; import { Plus, RefreshCw, Zap, Settings, X } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -12,10 +13,9 @@ import {
} from './alert-center-helpers'; } from './alert-center-helpers';
import { AlertChannelDialog } from './AlertChannelDialog'; import { AlertChannelDialog } from './AlertChannelDialog';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey }) => { export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey }) => {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const _confirm = useConfirm(); const _confirm = useConfirm();
const [channels, setChannels] = useState<NotificationChannel[]>([]); const [channels, setChannels] = useState<NotificationChannel[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -30,11 +30,11 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
const list = (res as JsonData)?.list || []; const list = (res as JsonData)?.list || [];
setChannels(list); setChannels(list);
} catch { } catch {
toast.error(t('monitor.alertchannelstab.s84d8b4')); toast.error(t('monitor:alertChannels.fetchFailed'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, []); }, [t]);
useEffect(() => { fetchChannels(); }, [fetchChannels, refreshKey]); useEffect(() => { fetchChannels(); }, [fetchChannels, refreshKey]);
@@ -49,14 +49,14 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
}; };
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
const ok = await _confirm({ title: t('monitor.alertchannelstab.sa4450b'), description: t('monitor.alertchannelstab.sb1a9e5'), confirmText: t('common.delete'), variant: 'destructive' }); const ok = await _confirm({ title: t('monitor:alertChannels.deleteTitle'), description: t('monitor:alertChannels.deleteConfirm'), confirmText: t('common.delete'), variant: 'destructive' });
if (!ok) return; if (!ok) return;
try { try {
await alertApi.deleteNotifyChannel(id); await alertApi.deleteNotifyChannel(id);
toast.success(t('monitor.alertchannelstab.s6fad11')); toast.success(t('monitor:alertChannels.deleted'));
fetchChannels(); fetchChannels();
} catch { } catch {
toast.error(t('common.deleteFailed')); toast.error(t('monitor:alertChannels.deleteFailed'));
} }
}; };
@@ -65,13 +65,13 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
const res = await alertApi.testNotifyChannel(id); const res = await alertApi.testNotifyChannel(id);
const status = (res as JsonData)?.status; const status = (res as JsonData)?.status;
if (status === 'success') { if (status === 'success') {
toast.success(t('monitor.alertchannelstab.s1e710e')); toast.success(t('monitor:alertChannels.testSent'));
} else { } else {
toast.warning(t('monitor.alertchannelstab.s9b3fda')); toast.warning(t('monitor:alertChannels.testNoConfig'));
} }
fetchChannels(); fetchChannels();
} catch { } catch {
toast.error(t('monitor.alertchannelstab.s9710d9')); toast.error(t('monitor:alertChannels.testFailed'));
} }
}; };
@@ -89,11 +89,11 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Button variant="outline" onClick={fetchChannels}> <Button variant="outline" onClick={fetchChannels}>
<RefreshCw className="w-4 h-4 mr-2" /> <RefreshCw className="w-4 h-4 mr-2" />
刷新 {t('common.refresh')}
</Button> </Button>
<Button onClick={openCreate}> <Button onClick={openCreate}>
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
添加渠道 {t('monitor:alertChannels.addChannel')}
</Button> </Button>
</div> </div>
@@ -101,7 +101,7 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
<div className="text-center py-16 text-muted-foreground">{t('common.loading')}</div> <div className="text-center py-16 text-muted-foreground">{t('common.loading')}</div>
) : channels.length === 0 ? ( ) : channels.length === 0 ? (
<div className="text-center py-16 text-muted-foreground border border-dashed rounded-lg"> <div className="text-center py-16 text-muted-foreground border border-dashed rounded-lg">
暂无通知渠道,点击「添加渠道」创建 {t('monitor:alertChannels.empty')}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -114,21 +114,21 @@ export const AlertChannelsTab: React.FC<{ refreshKey: number }> = ({ refreshKey
<CardTitle className="text-base">{channel.name}</CardTitle> <CardTitle className="text-base">{channel.name}</CardTitle>
</div> </div>
<Badge variant={channel.enabled ? 'default' : 'secondary'} className={channel.enabled ? 'bg-green-600' : ''}> <Badge variant={channel.enabled ? 'default' : 'secondary'} className={channel.enabled ? 'bg-green-600' : ''}>
{channel.enabled ? t('alert.enabled') : t('alert.disabled')} {channel.enabled ? t('common.enable') : t('monitor:alertChannels.disabled')}
</Badge> </Badge>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="pt-0">
<div className="text-sm text-muted-foreground mb-3"> <div className="text-sm text-muted-foreground mb-3">
类型: {getChannelTypeLabel(channel.type)} {t('monitor:alertChannels.typeLabel')}: {getChannelTypeLabel(channel.type)}
{channel.test_status === 'success' && ( {channel.test_status === 'success' && (
<span className="ml-2 dg-text-green">{t('monitor.alertchannelstab.sd25431')}</span> <span className="ml-2 dg-text-green">{t('monitor:alertChannels.testPassed')}</span>
)} )}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="outline" size="sm" className="flex-1" onClick={() => handleTest(channel.id)}> <Button variant="outline" size="sm" className="flex-1" onClick={() => handleTest(channel.id)}>
<Zap className="w-4 h-4 mr-1.5" /> <Zap className="w-4 h-4 mr-1.5" />
测试 {t('common.test')}
</Button> </Button>
<Button variant="outline" size="sm" className="flex-1" onClick={() => handleToggle(channel)}> <Button variant="outline" size="sm" className="flex-1" onClick={() => handleToggle(channel)}>
<Settings className="w-4 h-4 mr-1.5" /> <Settings className="w-4 h-4 mr-1.5" />
@@ -1,5 +1,6 @@
// 告警规则 Tab — 主机/中间件/SNMP/站点 四类分栏 // Logan.Li // 告警规则 Tab — 主机/中间件/SNMP/站点 四类分栏 // Logan.Li
import { useState } from 'react'; import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -12,22 +13,20 @@ import { AgentRuleDialog } from '@/components/agent/AgentRuleDialog';
import { MonitorRuleDialog } from './MonitorRuleDialog'; import { MonitorRuleDialog } from './MonitorRuleDialog';
import type { MetricCatalogCategory, UnifiedAlertRule } from '@/api'; import type { MetricCatalogCategory, UnifiedAlertRule } from '@/api';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
type RuleCategory = 'host' | 'middleware' | 'snmp' | 'site'; type RuleCategory = 'host' | 'middleware' | 'snmp' | 'site';
type MonitorCategory = 'middleware' | 'snmp' | 'site'; type MonitorCategory = 'middleware' | 'snmp' | 'site';
const RULE_CATEGORIES: Array<{ const RULE_CATEGORIES: Array<{
id: RuleCategory; id: RuleCategory;
label: string; labelKey: string;
icon: typeof Server; icon: typeof Server;
desc: string; descKey: string;
}> = [ }> = [
{ id: 'host', label: i18n.t('monitor.hostMonitor'), icon: Server, desc: i18n.t('monitor.alertrulestab.s836f7b') }, { id: 'host', labelKey: 'catHost', icon: Server, descKey: 'catHostDesc' },
{ id: 'middleware', label: i18n.t('dashboard.ops.middleware'), icon: Database, desc: i18n.t('monitor.alertrulestab.sf3e5db') }, { id: 'middleware', labelKey: 'catMiddleware', icon: Database, descKey: 'catMiddlewareDesc' },
{ id: 'snmp', label: 'SNMP', icon: Network, desc: i18n.t('monitor.alertrulestab.s086e4c') }, { id: 'snmp', labelKey: 'catSnmp', icon: Network, descKey: 'catSnmpDesc' },
{ id: 'site', label: i18n.t('monitor.siteProbe'), icon: Globe, desc: i18n.t('monitor.alertrulestab.sf9f400') }, { id: 'site', labelKey: 'catSite', icon: Globe, descKey: 'catSiteDesc' },
]; ];
interface Props { interface Props {
@@ -49,7 +48,7 @@ export function AlertRulesTab({
onToggleAgent, onDeleteAgent, onDeleteMonitor, onToggleMonitor, onToggleAgent, onDeleteAgent, onDeleteMonitor, onToggleMonitor,
onQuickSetupHost, onQuickSetupMonitor, quickSetupPending, onQuickSetupHost, onQuickSetupMonitor, quickSetupPending,
}: Props) { }: Props) {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [activeCat, setActiveCat] = useState<RuleCategory>('host'); const [activeCat, setActiveCat] = useState<RuleCategory>('host');
const [agentDialogOpen, setAgentDialogOpen] = useState(false); const [agentDialogOpen, setAgentDialogOpen] = useState(false);
const [monitorDialogOpen, setMonitorDialogOpen] = useState(false); const [monitorDialogOpen, setMonitorDialogOpen] = useState(false);
@@ -82,7 +81,7 @@ export function AlertRulesTab({
} }
}; };
if (loading) return <PageLoading label=t('monitor.alertrulestab.s1e637e') />; if (loading) return <PageLoading label={t('monitor:alertRulesTab.loading')} />;
return ( return (
<div className="space-y-4"> <div className="space-y-4">
@@ -99,7 +98,7 @@ export function AlertRulesTab({
onClick={() => setActiveCat(cat.id)} onClick={() => setActiveCat(cat.id)}
> >
<Icon className="h-3.5 w-3.5" /> <Icon className="h-3.5 w-3.5" />
{cat.label} {t(`monitor:alertRulesTab.${cat.labelKey}`)}
{count > 0 && ( {count > 0 && (
<Badge variant="secondary" className="text-[10px] h-4 px-1">{count}</Badge> <Badge variant="secondary" className="text-[10px] h-4 px-1">{count}</Badge>
)} )}
@@ -109,17 +108,17 @@ export function AlertRulesTab({
</div> </div>
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<p className="text-xs text-muted-foreground flex-1 min-w-[200px]">{catMeta.desc}</p> <p className="text-xs text-muted-foreground flex-1 min-w-[200px]">{t(`monitor:alertRulesTab.${catMeta.descKey}`)}</p>
<Button size="sm" className="h-8" onClick={openAdd}> <Button size="sm" className="h-8" onClick={openAdd}>
<Plus className="h-3.5 w-3.5 mr-1" /> 添加规则 <Plus className="h-3.5 w-3.5 mr-1" /> {t('monitor:alertRulesTab.addRule')}
</Button> </Button>
<Button size="sm" variant="secondary" className="h-8" onClick={handleQuickSetup} disabled={quickSetupPending}> <Button size="sm" variant="secondary" className="h-8" onClick={handleQuickSetup} disabled={quickSetupPending}>
<Rocket className="h-3.5 w-3.5 mr-1" /> 默认规则 <Rocket className="h-3.5 w-3.5 mr-1" /> {t('monitor:alertRulesTab.defaultRules')}
</Button> </Button>
</div> </div>
{filtered.length === 0 ? ( {filtered.length === 0 ? (
<PageEmpty title={t('monitor.alertrulestab.sb2f604', { catMeta.label: catMeta.label })} description=t('monitor.alertrulestab.s1f2385') /> <PageEmpty title={t('monitor:alertRulesTab.emptyTitle', { cat: t(`monitor:alertRulesTab.${catMeta.labelKey}`) })} description={t('monitor:alertRulesTab.emptyDesc')} />
) : ( ) : (
<div className="grid grid-cols-1 gap-3"> <div className="grid grid-cols-1 gap-3">
{filtered.map((rule) => ( {filtered.map((rule) => (
@@ -131,7 +130,7 @@ export function AlertRulesTab({
<span className="font-medium text-sm">{rule.name}</span> <span className="font-medium text-sm">{rule.name}</span>
{getSeverityBadge(rule.severity)} {getSeverityBadge(rule.severity)}
<Badge variant={rule.enabled ? 'default' : 'secondary'} className="text-[10px]"> <Badge variant={rule.enabled ? 'default' : 'secondary'} className="text-[10px]">
{rule.enabled ? t('common.enable') : t('common.deactivate')} {rule.enabled ? t('common.enable') : t('monitor:alertRulesTab.disabled')}
</Badge> </Badge>
</div> </div>
<p className="text-xs text-muted-foreground font-mono"> <p className="text-xs text-muted-foreground font-mono">
@@ -1,5 +1,6 @@
// 报警联系人创建/编辑对话框 — 渠道类型下拉 + webhook URL // Logan.Li // 报警联系人创建/编辑对话框 — 渠道类型下拉 + webhook URL // Logan.Li
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
@@ -12,14 +13,12 @@ import {
import { toast } from 'sonner'; import { toast } from 'sonner';
import { alertApi } from '@/api'; import { alertApi } from '@/api';
import type { Contact } from './alert-center-helpers'; import type { Contact } from './alert-center-helpers';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
const CHANNEL_OPTIONS = [ const CHANNEL_OPTIONS = [
{ value: 'feishu', label: i18n.t('monitor.contactdialog.s7714e5'), placeholder: 'https://open.feishu.cn/open-apis/bot/v2/hook/...' }, { value: 'feishu', labelKey: 'monitor:contactDialog.feishu', placeholder: 'https://open.feishu.cn/open-apis/bot/v2/hook/...' },
{ value: 'dingtalk', label: i18n.t('monitor.contactDingtalk'), placeholder: 'https://oapi.dingtalk.com/robot/send?access_token=...' }, { value: 'dingtalk', labelKey: 'monitor:contactDingtalk', placeholder: 'https://oapi.dingtalk.com/robot/send?access_token=...' },
{ value: 'wechat', label: i18n.t('monitor.contactWechat'), placeholder: 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=...' }, { value: 'wechat', labelKey: 'monitor:contactWechat', placeholder: 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=...' },
{ value: 'webhook', label: i18n.t('monitor.contactdialog.s3ccb7a'), placeholder: 'https://your-webhook-url...' }, { value: 'webhook', labelKey: 'monitor:contactDialog.customWebhook', placeholder: 'https://your-webhook-url...' },
]; ];
export function ContactDialog({ export function ContactDialog({
@@ -33,7 +32,7 @@ export function ContactDialog({
editingContact: Contact | null; editingContact: Contact | null;
onSaved: () => void; onSaved: () => void;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [channelType, setChannelType] = useState('feishu'); const [channelType, setChannelType] = useState('feishu');
const [form, setForm] = useState({ name: '', phone: '', email: '', webhook_url: '' }); const [form, setForm] = useState({ name: '', phone: '', email: '', webhook_url: '' });
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -68,15 +67,15 @@ export function ContactDialog({
}; };
if (editingContact) { if (editingContact) {
await alertApi.updateContact(editingContact.id, payload); await alertApi.updateContact(editingContact.id, payload);
toast.success(t('monitor.contactdialog.sa0fe38')); toast.success(t('monitor:contactDialog.contactUpdated'));
} else { } else {
await alertApi.createContact(payload); await alertApi.createContact(payload);
toast.success(t('monitor.contactdialog.s50ee3f')); toast.success(t('monitor:contactDialog.contactAdded'));
} }
onOpenChange(false); onOpenChange(false);
onSaved(); onSaved();
} catch { } catch {
toast.error(t('common.saveFailed')); toast.error(t('common:saveFailed'));
} finally { } finally {
setSaving(false); setSaving(false);
} }
@@ -88,21 +87,21 @@ export function ContactDialog({
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{editingContact ? t('monitor.contactdialog.sbc3c27') : t('monitor.contactdialog.sc044d1')}</DialogTitle> <DialogTitle>{editingContact ? t('monitor:contactDialog.editTitle') : t('monitor:contactDialog.addTitle')}</DialogTitle>
<DialogDescription>{t('monitor.contactdialog.s04b40a')}</DialogDescription> <DialogDescription>{t('monitor:contactDialog.dialogDesc')}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('monitor.contactdialog.s7c46af')}</Label> <Label>{t('monitor:contactDialog.nameRequired')}</Label>
<Input <Input
value={form.name} value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })} onChange={(e) => setForm({ ...form, name: e.target.value })}
placeholder=t('monitor.contactdialog.s6b9850') placeholder={t('monitor:contactDialog.namePlaceholder')}
/> />
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('system.userPhone')}</Label> <Label>{t('monitor:contactDialog.phoneLabel')}</Label>
<Input <Input
value={form.phone} value={form.phone}
onChange={(e) => setForm({ ...form, phone: e.target.value })} onChange={(e) => setForm({ ...form, phone: e.target.value })}
@@ -110,7 +109,7 @@ export function ContactDialog({
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('system.userEmail')}</Label> <Label>{t('monitor:contactDialog.emailLabel')}</Label>
<Input <Input
value={form.email} value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })} onChange={(e) => setForm({ ...form, email: e.target.value })}
@@ -119,20 +118,20 @@ export function ContactDialog({
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('monitor.contactdialog.sc84995')}</Label> <Label>{t('monitor:contactDialog.channelTypeRequired')}</Label>
<Select value={channelType} onValueChange={setChannelType}> <Select value={channelType} onValueChange={setChannelType}>
<SelectTrigger> <SelectTrigger>
<SelectValue placeholder=t('monitor.contactdialog.seb8768') /> <SelectValue placeholder={t('monitor:contactDialog.channelPlaceholder')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{CHANNEL_OPTIONS.map(opt => ( {CHANNEL_OPTIONS.map(opt => (
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem> <SelectItem key={opt.value} value={opt.value}>{t(opt.labelKey)}</SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>Webhook URL *</Label> <Label>{t('monitor:contactDialog.webhookRequired')}</Label>
<Input <Input
value={form.webhook_url} value={form.webhook_url}
onChange={(e) => setForm({ ...form, webhook_url: e.target.value })} onChange={(e) => setForm({ ...form, webhook_url: e.target.value })}
@@ -142,9 +141,9 @@ export function ContactDialog({
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)}>{t('common:cancel')}</Button>
<Button onClick={handleSave} disabled={!form.name.trim() || !form.webhook_url.trim() || saving}> <Button onClick={handleSave} disabled={!form.name.trim() || !form.webhook_url.trim() || saving}>
{saving ? i18n.t('k8s.topology.saving') : editingContact ? i18n.t('cloud.saveChanges') : i18n.t('alert.addContact')} {saving ? t('monitor:contactDialog.saving') : editingContact ? t('monitor:contactDialog.saveChanges') : t('monitor:contactDialog.addContactBtn')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -1,5 +1,6 @@
// 报警联系组创建/编辑对话框 // Logan.Li // 报警联系组创建/编辑对话框 // Logan.Li
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { import {
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
@@ -11,7 +12,6 @@ import { Badge } from '@/components/ui/badge';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { alertApi } from '@/api'; import { alertApi } from '@/api';
import type { Contact, ContactGroup } from './alert-center-helpers'; import type { Contact, ContactGroup } from './alert-center-helpers';
import { useTranslation } from 'react-i18next';
export function ContactGroupDialog({ export function ContactGroupDialog({
open, open,
@@ -26,7 +26,7 @@ export function ContactGroupDialog({
contacts: Contact[]; contacts: Contact[];
onSaved: () => void; onSaved: () => void;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [form, setForm] = useState({ group_name: '', notes: '', contact_ids: [] as number[] }); const [form, setForm] = useState({ group_name: '', notes: '', contact_ids: [] as number[] });
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -68,10 +68,10 @@ export function ContactGroupDialog({
}; };
if (editingGroup) { if (editingGroup) {
await alertApi.updateContactGroup(editingGroup.id, payload); await alertApi.updateContactGroup(editingGroup.id, payload);
toast.success(t('monitor.contactgroupdialog.s493f94')); toast.success(t('monitor:contactGroup.updated'));
} else { } else {
await alertApi.createContactGroup(payload); await alertApi.createContactGroup(payload);
toast.success(t('monitor.contactgroupdialog.sda7160')); toast.success(t('monitor:contactGroup.added'));
} }
onOpenChange(false); onOpenChange(false);
onSaved(); onSaved();
@@ -86,31 +86,31 @@ export function ContactGroupDialog({
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>{editingGroup ? t('monitor.contactgroupdialog.s5fb6c5') : t('monitor.contactgroupdialog.s462488')}</DialogTitle> <DialogTitle>{editingGroup ? t('monitor:contactGroup.editTitle') : t('monitor:contactGroup.addTitle')}</DialogTitle>
<DialogDescription>{t('monitor.contactgroupdialog.s112855')}</DialogDescription> <DialogDescription>{t('monitor:contactGroup.dialogDesc')}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('monitor.contactgroupdialog.s0e18f7')}</Label> <Label>{t('monitor:contactGroup.nameRequired')}</Label>
<Input <Input
value={form.group_name} value={form.group_name}
onChange={(e) => setForm({ ...form, group_name: e.target.value })} onChange={(e) => setForm({ ...form, group_name: e.target.value })}
placeholder=t('monitor.contactgroupdialog.s937123') placeholder={t('monitor:contactGroup.namePlaceholder')}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('common.remark')}</Label> <Label>{t('monitor:contactGroup.notes')}</Label>
<Textarea <Textarea
value={form.notes} value={form.notes}
onChange={(e) => setForm({ ...form, notes: e.target.value })} onChange={(e) => setForm({ ...form, notes: e.target.value })}
placeholder=t('monitor.contactgroupdialog.s19f365') placeholder={t('monitor:contactGroup.notesPlaceholder')}
rows={2} rows={2}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>{t('monitor.contactgroupdialog.s3dada7')}</Label> <Label>{t('monitor:contactGroup.selectContacts')}</Label>
{contacts.length === 0 ? ( {contacts.length === 0 ? (
<p className="text-xs text-muted-foreground">{t('monitor.contactgroupdialog.s2bade1')}</p> <p className="text-xs text-muted-foreground">{t('monitor:contactGroup.noContacts')}</p>
) : ( ) : (
<div className="flex flex-wrap gap-1.5 max-h-[180px] overflow-y-auto border rounded-md p-2"> <div className="flex flex-wrap gap-1.5 max-h-[180px] overflow-y-auto border rounded-md p-2">
{contacts.map(c => ( {contacts.map(c => (
@@ -127,14 +127,14 @@ export function ContactGroupDialog({
</div> </div>
)} )}
{form.contact_ids.length > 0 && ( {form.contact_ids.length > 0 && (
<p className="text-xs text-muted-foreground">已选择 {form.contact_ids.length} 位联系人</p> <p className="text-xs text-muted-foreground">{t('monitor:contactGroup.selectedCount', { count: form.contact_ids.length })}</p>
)} )}
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button>
<Button onClick={handleSave} disabled={!form.group_name.trim() || saving}> <Button onClick={handleSave} disabled={!form.group_name.trim() || saving}>
{saving ? i18n.t('k8s.topology.saving') : editingGroup ? i18n.t('cloud.saveChanges') : i18n.t('alert.addGroup')} {saving ? t('monitor:contactGroup.saving') : editingGroup ? t('monitor:contactGroup.saveChanges') : t('monitor:contactGroup.addBtn')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -1,11 +1,11 @@
// 监控指标目录 — 主机/中间件/站点拨测可采集指标 // Logan.Li // 监控指标目录 — 主机/中间件/站点拨测可采集指标 // Logan.Li
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Loader2, RefreshCw, Server, Database, Globe, Network } from 'lucide-react'; import { Loader2, RefreshCw, Server, Database, Globe, Network } from 'lucide-react';
import { alertMetricsApi, type MetricCatalogCategory } from '@/api'; import { alertMetricsApi, type MetricCatalogCategory } from '@/api';
import { useTranslation } from 'react-i18next';
const CATEGORY_ORDER = ['host', 'middleware', 'snmp', 'site']; const CATEGORY_ORDER = ['host', 'middleware', 'snmp', 'site'];
@@ -17,7 +17,7 @@ const categoryIcons: Record<string, typeof Server> = {
}; };
export function MetricCatalogTab() { export function MetricCatalogTab() {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [categories, setCategories] = useState<MetricCatalogCategory[]>([]); const [categories, setCategories] = useState<MetricCatalogCategory[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [activeCat, setActiveCat] = useState<string>('host'); const [activeCat, setActiveCat] = useState<string>('host');
@@ -36,7 +36,7 @@ export function MetricCatalogTab() {
} }
}; };
useEffect(() => { load(); }, []); useEffect(() => { load(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
const current = categories.find(c => c.id === activeCat); const current = categories.find(c => c.id === activeCat);
@@ -52,10 +52,10 @@ export function MetricCatalogTab() {
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
主机 / 中间件 / SNMP / 站点拨测可采集指标,含默认告警阈值参考 {t('monitor:metricCatalog.desc')}
</p> </p>
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={load}> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={load}>
<RefreshCw className="h-3 w-3 mr-1" /> 刷新 <RefreshCw className="h-3 w-3 mr-1" /> {t('common.refresh')}
</Button> </Button>
</div> </div>
@@ -90,13 +90,13 @@ export function MetricCatalogTab() {
<table className="w-full text-xs"> <table className="w-full text-xs">
<thead className="bg-muted/50"> <thead className="bg-muted/50">
<tr> <tr>
<th className="px-2 py-2 text-left font-medium">{t('cloud.colMetric')}</th> <th className="px-2 py-2 text-left font-medium">{t('monitor:metricCatalog.colMetric')}</th>
<th className="px-2 py-2 text-left font-medium">{t('common.unit')}</th> <th className="px-2 py-2 text-left font-medium">{t('monitor:metricCatalog.colUnit')}</th>
<th className="px-2 py-2 text-left font-medium">{t('common.type')}</th> <th className="px-2 py-2 text-left font-medium">{t('monitor:metricCatalog.colType')}</th>
<th className="px-2 py-2 text-left font-medium">{t('monitor.metriccatalogtab.s037989')}</th> <th className="px-2 py-2 text-left font-medium">{t('monitor:metricCatalog.colWarn')}</th>
<th className="px-2 py-2 text-left font-medium">{t('monitor.metriccatalogtab.s3780c1')}</th> <th className="px-2 py-2 text-left font-medium">{t('monitor:metricCatalog.colCrit')}</th>
<th className="px-2 py-2 text-left font-medium">{t('monitor.metriccatalogtab.s726bfb')}</th> <th className="px-2 py-2 text-left font-medium">{t('monitor:metricCatalog.colMax')}</th>
<th className="px-2 py-2 text-left font-medium">{t('cloud.colDescription')}</th> <th className="px-2 py-2 text-left font-medium">{t('monitor:metricCatalog.colDesc')}</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y"> <tbody className="divide-y">
@@ -1,5 +1,6 @@
// 中间件/站点拨测告警规则弹框 // Logan.Li // 中间件/站点拨测告警规则弹框 // Logan.Li
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@@ -14,8 +15,6 @@ import {
import { Loader2 } from 'lucide-react'; import { Loader2 } from 'lucide-react';
import { alertMetricsApi, type MetricCatalogItem } from '@/api'; import { alertMetricsApi, type MetricCatalogItem } from '@/api';
import { SEVERITY_OPTIONS } from '@/components/agent/agentAlertHelper'; import { SEVERITY_OPTIONS } from '@/components/agent/agentAlertHelper';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
interface Props { interface Props {
open: boolean; open: boolean;
@@ -27,15 +26,15 @@ interface Props {
} }
const OPERATORS = [ const OPERATORS = [
{ value: '>', label: i18n.t('monitor.monitorruledialog.s552612') }, { value: '>', labelKey: 'monitor:monitorRule.opGt' },
{ value: '<', label: i18n.t('monitor.monitorruledialog.sdd29ed') }, { value: '<', labelKey: 'monitor:monitorRule.opLt' },
{ value: '>=', label: i18n.t('monitor.monitorruledialog.sef2679') }, { value: '>=', labelKey: 'monitor:monitorRule.opGte' },
{ value: '<=', label: i18n.t('monitor.monitorruledialog.s847d07') }, { value: '<=', labelKey: 'monitor:monitorRule.opLte' },
{ value: '==', label: i18n.t('monitor.monitorruledialog.s9cd6c2') }, { value: '==', labelKey: 'monitor:monitorRule.opEq' },
]; ];
export function MonitorRuleDialog({ open, onOpenChange, category, metrics, editing, onSaved }: Props) { export function MonitorRuleDialog({ open, onOpenChange, category, metrics, editing, onSaved }: Props) {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [form, setForm] = useState({ const [form, setForm] = useState({
name: '', metric: '', operator: '>', threshold: '0', severity: 'warning', enabled: true, name: '', metric: '', operator: '>', threshold: '0', severity: 'warning', enabled: true,
}); });
@@ -75,7 +74,7 @@ export function MonitorRuleDialog({ open, onOpenChange, category, metrics, editi
const handleSave = async () => { const handleSave = async () => {
if (!form.name.trim() || !form.metric) { if (!form.name.trim() || !form.metric) {
toast.error(t('monitor.monitorruledialog.sace3bf')); toast.error(t('monitor:monitorRule.nameMetricRequired'));
return; return;
} }
setSaving(true); setSaving(true);
@@ -87,41 +86,41 @@ export function MonitorRuleDialog({ open, onOpenChange, category, metrics, editi
}; };
if (editing) { if (editing) {
await alertMetricsApi.updateMonitorRule(editing.id, payload); await alertMetricsApi.updateMonitorRule(editing.id, payload);
toast.success(t('monitor.monitorruledialog.sa716ef')); toast.success(t('monitor:monitorRule.ruleUpdated'));
} else { } else {
await alertMetricsApi.createMonitorRule(payload); await alertMetricsApi.createMonitorRule(payload);
toast.success(t('monitor.monitorruledialog.s5702a3')); toast.success(t('monitor:monitorRule.ruleCreated'));
} }
onOpenChange(false); onOpenChange(false);
onSaved(); onSaved();
} catch (e) { } catch (e) {
toast.error((e as { message?: string }).message || t('common.saveFailed')); toast.error((e as { message?: string }).message || t('common:saveFailed'));
} finally { } finally {
setSaving(false); setSaving(false);
} }
}; };
const catLabels: Record<string, string> = { const catLabelKey: Record<string, string> = {
middleware: t('dashboard.ops.middleware'), snmp: 'SNMP', site: t('monitor.siteProbe'), middleware: 'monitor:monitorRule.catMiddleware', snmp: 'monitor:snmpDevice', site: 'monitor:monitorRule.catSite',
}; };
const catLabel = catLabels[category] || category; const catLabel = t(catLabelKey[category] || 'monitor:snmpDevice');
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"> <DialogContent className="sm:max-w-md bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<DialogHeader> <DialogHeader>
<DialogTitle>{editing ? t('common.edit') : t('monitor.dashboard.custom.create')}{catLabel}告警规则</DialogTitle> <DialogTitle>{editing ? t('monitor:monitorRule.editRuleTitle', { cat: catLabel }) : t('monitor:monitorRule.newRuleTitle', { cat: catLabel })}</DialogTitle>
<DialogDescription className="text-[var(--dg-text-muted)]"> <DialogDescription className="text-[var(--dg-text-muted)]">
基于监控中心采集指标配置阈值告警 {t('monitor:monitorRule.dialogDesc')}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="grid gap-3 py-2"> <div className="grid gap-3 py-2">
<div className="grid gap-1.5"> <div className="grid gap-1.5">
<Label>{t('monitor.ruleName')}</Label> <Label>{t('monitor:ruleName')}</Label>
<Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder=t('monitor.monitorruledialog.s23b9f8') /> <Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder={t('monitor:monitorRule.namePlaceholder')} />
</div> </div>
<div className="grid gap-1.5"> <div className="grid gap-1.5">
<Label>{t('monitor.monitorruledialog.s9a51fb')}</Label> <Label>{t('monitor:monitorRule.metricLabel')}</Label>
<Select value={form.metric} onValueChange={handleMetricChange}> <Select value={form.metric} onValueChange={handleMetricChange}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@@ -136,23 +135,23 @@ export function MonitorRuleDialog({ open, onOpenChange, category, metrics, editi
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="grid gap-1.5"> <div className="grid gap-1.5">
<Label>{t('monitor.ruleOperator')}</Label> <Label>{t('monitor:ruleOperator')}</Label>
<Select value={form.operator} onValueChange={v => setForm({ ...form, operator: v })}> <Select value={form.operator} onValueChange={v => setForm({ ...form, operator: v })}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
{OPERATORS.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)} {OPERATORS.map(o => <SelectItem key={o.value} value={o.value}>{t(o.labelKey)}</SelectItem>)}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="grid gap-1.5"> <div className="grid gap-1.5">
<Label>阈值{selectedMetric?.unit ? ` (${selectedMetric.unit})` : ''}</Label> <Label>{t('monitor:monitorRule.thresholdLabel')}{selectedMetric?.unit ? ` (${selectedMetric.unit})` : ''}</Label>
<Input type="number" value={form.threshold} <Input type="number" value={form.threshold}
min={selectedMetric?.min} max={selectedMetric?.max} min={selectedMetric?.min} max={selectedMetric?.max}
onChange={e => setForm({ ...form, threshold: e.target.value })} /> onChange={e => setForm({ ...form, threshold: e.target.value })} />
</div> </div>
</div> </div>
<div className="grid gap-1.5"> <div className="grid gap-1.5">
<Label>{t('monitor.ruleSeverity')}</Label> <Label>{t('monitor:ruleSeverity')}</Label>
<Select value={form.severity} onValueChange={v => setForm({ ...form, severity: v })}> <Select value={form.severity} onValueChange={v => setForm({ ...form, severity: v })}>
<SelectTrigger><SelectValue /></SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
@@ -162,13 +161,13 @@ export function MonitorRuleDialog({ open, onOpenChange, category, metrics, editi
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Switch checked={form.enabled} onCheckedChange={v => setForm({ ...form, enabled: v })} /> <Switch checked={form.enabled} onCheckedChange={v => setForm({ ...form, enabled: v })} />
<Label>{t('monitor.monitorruledialog.sfd2ea0')}</Label> <Label>{t('monitor:monitorRule.enableRule')}</Label>
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>{t('common:cancel')}</Button>
<Button onClick={handleSave} disabled={saving}> <Button onClick={handleSave} disabled={saving}>
{saving && <Loader2 className="h-4 w-4 animate-spin mr-1" />} 保存 {saving && <Loader2 className="h-4 w-4 animate-spin mr-1" />} {t('common:save')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -1,5 +1,6 @@
// 告警集合通知策略 — 四类监控绑定联系组 + 消息模版 // Logan.Li // 告警集合通知策略 — 四类监控绑定联系组 + 消息模版 // Logan.Li
import { useState, useEffect, useCallback, useMemo } from 'react'; import { useState, useEffect, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Server, Database, Globe, Network, Bell, Zap, Loader2, Save, FileText } from 'lucide-react'; import { Server, Database, Globe, Network, Bell, Zap, Loader2, Save, FileText } from 'lucide-react';
import { SilenceRulesPanel } from './SilenceRulesPanel'; import { SilenceRulesPanel } from './SilenceRulesPanel';
import { toast } from 'sonner'; import { toast } from 'sonner';
@@ -28,21 +29,19 @@ export interface NotifyPolicy {
} }
import type { NotifyMessageSettings } from '@/api/monitor/alert'; import type { NotifyMessageSettings } from '@/api/monitor/alert';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
type PolicyDraft = { enabled: boolean; groupIds: number[]; contactIds: number[] }; type PolicyDraft = { enabled: boolean; groupIds: number[]; contactIds: number[] };
const CATEGORIES = [ const CATEGORIES = [
{ id: 'host' as const, label: i18n.t('monitor.hostMonitor'), desc: i18n.t('monitor.notifypolicytab.s055f5a'), icon: Server }, { id: 'host' as const, labelKey: 'catHost', descKey: 'catHostDesc', icon: Server },
{ id: 'middleware' as const, label: i18n.t('monitor.middleware'), desc: i18n.t('monitor.notifypolicytab.s420c7c'), icon: Database }, { id: 'middleware' as const, labelKey: 'catMiddleware', descKey: 'catMiddlewareDesc', icon: Database },
{ id: 'site' as const, label: i18n.t('monitor.siteProbe'), desc: i18n.t('monitor.notifypolicytab.sbe6b21'), icon: Globe }, { id: 'site' as const, labelKey: 'catSite', descKey: 'catSiteDesc', icon: Globe },
{ id: 'snmp' as const, label: i18n.t('monitor.snmp.title'), desc: i18n.t('monitor.notifypolicytab.sa48251'), icon: Network }, { id: 'snmp' as const, labelKey: 'catSnmp', descKey: 'catSnmpDesc', icon: Network },
]; ];
const DEFAULT_TITLE = '[{{severity_label}}] {{rule_name}} — {{hostname}} ({{metric}})'; const DEFAULT_TITLE = '[{{severity_label}}] {{rule_name}} — {{hostname}} ({{metric}})';
const DEFAULT_FOOTER = '{{time}} | {{platform}}'; const DEFAULT_FOOTER = '{{time}} | {{platform}}';
const DEFAULT_PLATFORM = i18n.t('login.title'); const DEFAULT_PLATFORM = 'AIOps 智能运维平台';
const TEMPLATE_VARS = [ const TEMPLATE_VARS = [
'{{time}}', '{{platform}}', '{{rule_name}}', '{{hostname}}', '{{time}}', '{{platform}}', '{{rule_name}}', '{{hostname}}',
@@ -64,7 +63,7 @@ function draftKey(d: PolicyDraft) {
} }
export function NotifyPolicyTab() { export function NotifyPolicyTab() {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [testing, setTesting] = useState<string | null>(null); const [testing, setTesting] = useState<string | null>(null);
@@ -128,11 +127,11 @@ export function NotifyPolicyTab() {
setMsgSettings(merged); setMsgSettings(merged);
setSavedMsgSettings(merged); setSavedMsgSettings(merged);
} catch { } catch {
toast.error(t('monitor.notifypolicytab.s221fbe')); toast.error(t('monitor:notifyPolicy.loadFailed'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, []); }, [t]);
useEffect(() => { load(); }, [load]); useEffect(() => { load(); }, [load]);
@@ -186,7 +185,7 @@ export function NotifyPolicyTab() {
}), }),
alertApi.saveNotifyMessageSettings(msgSettings), alertApi.saveNotifyMessageSettings(msgSettings),
]); ]);
toast.success(t('monitor.notifypolicytab.sb1226a')); toast.success(t('monitor:notifyPolicy.saved'));
load(); load();
} catch (e) { } catch (e) {
toast.error((e as { message?: string }).message || t('common.saveFailed')); toast.error((e as { message?: string }).message || t('common.saveFailed'));
@@ -199,22 +198,22 @@ export function NotifyPolicyTab() {
setTesting(category); setTesting(category);
try { try {
await alertApi.testNotifyPolicy(category); await alertApi.testNotifyPolicy(category);
toast.success(t('monitor.notifypolicytab.s1e710e')); toast.success(t('monitor:notifyPolicy.testSent'));
} catch (e) { } catch (e) {
toast.error((e as { message?: string }).message || t('monitor.notifypolicytab.s84573c')); toast.error((e as { message?: string }).message || t('monitor:notifyPolicy.testFailed'));
} finally { } finally {
setTesting(null); setTesting(null);
} }
}; };
if (loading) return <PageLoading label=t('monitor.notifypolicytab.s37ea07') />; if (loading) return <PageLoading label={t('monitor:notifyPolicy.loading')} />;
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* 顶栏:说明 + 统一保存 / 测试 */} {/* 顶栏:说明 + 统一保存 / 测试 */}
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap items-center justify-between gap-3">
<p className="text-xs text-[var(--dg-text-secondary)] max-w-xl"> <p className="text-xs text-[var(--dg-text-secondary)] max-w-xl">
按监控类型配置默认通知对象;消息模版作用于飞书卡片标题与底部署名。 {t('monitor:notifyPolicy.topDesc')}
</p> </p>
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Select value={testCategory} onValueChange={setTestCategory}> <Select value={testCategory} onValueChange={setTestCategory}>
@@ -223,7 +222,7 @@ export function NotifyPolicyTab() {
</SelectTrigger> </SelectTrigger>
<SelectContent className="dg-input"> <SelectContent className="dg-input">
{CATEGORIES.map(c => ( {CATEGORIES.map(c => (
<SelectItem key={c.id} value={c.id} className="text-xs">{c.label}</SelectItem> <SelectItem key={c.id} value={c.id} className="text-xs">{t(`monitor:notifyPolicy.${c.labelKey}`)}</SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
@@ -235,7 +234,7 @@ export function NotifyPolicyTab() {
onClick={() => handleTest(testCategory)} onClick={() => handleTest(testCategory)}
> >
{testing ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Zap className="h-3 w-3 mr-1" />} {testing ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Zap className="h-3 w-3 mr-1" />}
测试 {t('common.test')}
</Button> </Button>
<Button <Button
size="sm" size="sm"
@@ -244,14 +243,14 @@ export function NotifyPolicyTab() {
onClick={handleSaveAll} onClick={handleSaveAll}
> >
{saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />} {saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
保存全部 {t('monitor:notifyPolicy.saveAll')}
</Button> </Button>
</div> </div>
</div> </div>
{groups.length === 0 && contacts.length === 0 && ( {groups.length === 0 && contacts.length === 0 && (
<div className="text-xs text-amber-500 bg-amber-500/10 border border-amber-500/20 rounded-md px-3 py-2"> <div className="text-xs text-amber-500 bg-amber-500/10 border border-amber-500/20 rounded-md px-3 py-2">
请先在「报警联系人」和「报警联系组」中创建通知对象。 {t('monitor:notifyPolicy.noTargetHint')}
</div> </div>
)} )}
@@ -260,13 +259,13 @@ export function NotifyPolicyTab() {
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-sm flex items-center gap-2"> <CardTitle className="text-sm flex items-center gap-2">
<FileText className="h-4 w-4 text-[var(--dg-blue)]" /> <FileText className="h-4 w-4 text-[var(--dg-blue)]" />
消息通知模版 {t('monitor:notifyPolicy.msgTemplateTitle')}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="grid gap-3 md:grid-cols-2"> <div className="grid gap-3 md:grid-cols-2">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor.notifypolicytab.s8e32c9')}</Label> <Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor:notifyPolicy.titleTemplate')}</Label>
<Input <Input
className="dg-input text-xs" className="dg-input text-xs"
value={msgSettings.title_template} value={msgSettings.title_template}
@@ -275,7 +274,7 @@ export function NotifyPolicyTab() {
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor.notifypolicytab.s8fae79')}</Label> <Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor:notifyPolicy.platformName')}</Label>
<Input <Input
className="dg-input text-xs" className="dg-input text-xs"
value={msgSettings.platform_name} value={msgSettings.platform_name}
@@ -285,7 +284,7 @@ export function NotifyPolicyTab() {
</div> </div>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor.notifypolicytab.s9da0d8')}</Label> <Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor:notifyPolicy.cardFooter')}</Label>
<Input <Input
className="dg-input text-xs" className="dg-input text-xs"
value={msgSettings.footer_template} value={msgSettings.footer_template}
@@ -293,7 +292,7 @@ export function NotifyPolicyTab() {
placeholder={DEFAULT_FOOTER} placeholder={DEFAULT_FOOTER}
/> />
<p className="text-[10px] text-[var(--dg-text-muted)]"> <p className="text-[10px] text-[var(--dg-text-muted)]">
预览:{footerPreview} {t('monitor:notifyPolicy.preview')}:{footerPreview}
</p> </p>
</div> </div>
<div className="flex flex-wrap gap-1.5"> <div className="flex flex-wrap gap-1.5">
@@ -321,10 +320,10 @@ export function NotifyPolicyTab() {
</div> </div>
<div> <div>
<CardTitle className="text-sm flex items-center gap-2"> <CardTitle className="text-sm flex items-center gap-2">
{cat.label} {t(`monitor:notifyPolicy.${cat.labelKey}`)}
{catDirty && <span className="text-[10px] text-[var(--dg-orange)]">{t('common.unsaved')}</span>} {catDirty && <span className="text-[10px] text-[var(--dg-orange)]">{t('monitor:notifyPolicy.unsaved')}</span>}
</CardTitle> </CardTitle>
<p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{cat.desc}</p> <p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{t(`monitor:notifyPolicy.${cat.descKey}`)}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <div className="flex items-center gap-2 shrink-0">
@@ -336,16 +335,16 @@ export function NotifyPolicyTab() {
}))} }))}
/> />
<Label className="text-xs text-[var(--dg-text-secondary)] min-w-[2rem]"> <Label className="text-xs text-[var(--dg-text-secondary)] min-w-[2rem]">
{d.enabled ? t('common.enable') : t('common.deactivate')} {d.enabled ? t('common.enable') : t('monitor:notifyPolicy.disable')}
</Label> </Label>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div> <div>
<Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor.notifypolicytab.sad2dee')}</Label> <Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor:notifyPolicy.notifyGroups')}</Label>
{groups.length === 0 ? ( {groups.length === 0 ? (
<p className="text-[10px] text-[var(--dg-text-muted)] mt-1">{t('monitor.noGroups')}</p> <p className="text-[10px] text-[var(--dg-text-muted)] mt-1">{t('monitor:notifyPolicy.noGroups')}</p>
) : ( ) : (
<div className="flex flex-wrap gap-1.5 mt-1.5"> <div className="flex flex-wrap gap-1.5 mt-1.5">
{groups.map(g => ( {groups.map(g => (
@@ -364,9 +363,9 @@ export function NotifyPolicyTab() {
)} )}
</div> </div>
<div> <div>
<Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor.notifypolicytab.s762805')}</Label> <Label className="text-xs text-[var(--dg-text-secondary)]">{t('monitor:notifyPolicy.extraContacts')}</Label>
{contacts.length === 0 ? ( {contacts.length === 0 ? (
<p className="text-[10px] text-[var(--dg-text-muted)] mt-1">{t('monitor.noContacts')}</p> <p className="text-[10px] text-[var(--dg-text-muted)] mt-1">{t('monitor:notifyPolicy.noContacts')}</p>
) : ( ) : (
<div className="flex flex-wrap gap-1.5 mt-1.5"> <div className="flex flex-wrap gap-1.5 mt-1.5">
{contacts.map(c => ( {contacts.map(c => (
@@ -386,7 +385,7 @@ export function NotifyPolicyTab() {
</div> </div>
{memberCount > 0 && ( {memberCount > 0 && (
<Badge variant="outline" className="text-[10px]"> <Badge variant="outline" className="text-[10px]">
已选 {d.groupIds.length} 组 + {d.contactIds.length} 人 {t('monitor:notifyPolicy.selectedSummary', { groups: d.groupIds.length, contacts: d.contactIds.length })}
</Badge> </Badge>
)} )}
</CardContent> </CardContent>
@@ -397,7 +396,7 @@ export function NotifyPolicyTab() {
<div className="flex items-center gap-2 text-[10px] text-[var(--dg-text-muted)]"> <div className="flex items-center gap-2 text-[10px] text-[var(--dg-text-muted)]">
<Bell className="h-3 w-3" /> <Bell className="h-3 w-3" />
未配置策略时将回退到「通知渠道」中的全局飞书渠道。 {t('monitor:notifyPolicy.fallbackHint')}
</div> </div>
<SilenceRulesPanel /> <SilenceRulesPanel />
@@ -1,5 +1,6 @@
// 告警静默规则创建/编辑弹框 // Logan.Li // 告警静默规则创建/编辑弹框 // Logan.Li
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
@@ -12,17 +13,15 @@ import {
import { toast } from 'sonner'; import { toast } from 'sonner';
import { alertCenterApi } from '@/api'; import { alertCenterApi } from '@/api';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
// 静默类型中文标签 // 静默类型中文标签
const SILENCE_TYPE_LABELS: Record<string, string> = { const SILENCE_TYPE_KEYS: Record<string, string> = {
onetime: i18n.t('monitor.silencedialog.sebc149'), onetime: 'monitor:silenceDialog.typeOnetime',
daily: i18n.t('monitor.silencedialog.s256eba'), daily: 'monitor:silenceDialog.typeDaily',
weekly: i18n.t('monitor.silencedialog.s4dff11'), weekly: 'monitor:silenceDialog.typeWeekly',
}; };
const WEEKDAY_LABELS = [i18n.t('monitor.silencedialog.s562d74'), i18n.t('monitor.silencedialog.s1603b0'), i18n.t('monitor.silencedialog.sb5a6a0'), i18n.t('monitor.silencedialog.se60725'), i18n.t('monitor.silencedialog.s170fc8'), i18n.t('monitor.silencedialog.seb79ce'), i18n.t('monitor.silencedialog.s245751')]; const WEEKDAY_KEYS = ['monitor:silenceDialog.sun', 'monitor:silenceDialog.mon', 'monitor:silenceDialog.tue', 'monitor:silenceDialog.wed', 'monitor:silenceDialog.thu', 'monitor:silenceDialog.fri', 'monitor:silenceDialog.sat'];
export interface SilenceData { export interface SilenceData {
id?: number; id?: number;
@@ -55,7 +54,7 @@ export function SilenceDialog({
editingSilence?: JsonData; editingSilence?: JsonData;
onSaved: () => void; onSaved: () => void;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [name, setName] = useState(''); const [name, setName] = useState('');
const [description, setDescription] = useState(''); const [description, setDescription] = useState('');
@@ -102,15 +101,15 @@ export function SilenceDialog({
const handleSave = async () => { const handleSave = async () => {
if (!name.trim()) { if (!name.trim()) {
toast.error(t('monitor.silencedialog.s411cac')); toast.error(t('monitor:silenceDialog.nameRequired'));
return; return;
} }
if (!endTime) { if (!endTime) {
toast.error(t('monitor.silencedialog.s2ad542')); toast.error(t('monitor:silenceDialog.endTimeRequired'));
return; return;
} }
if (silenceType === 'weekly' && weekdays.length === 0) { if (silenceType === 'weekly' && weekdays.length === 0) {
toast.error(t('monitor.silencedialog.s1f832d')); toast.error(t('monitor:silenceDialog.weekdayRequired'));
return; return;
} }
@@ -127,15 +126,15 @@ export function SilenceDialog({
try { try {
if (editingSilence) { if (editingSilence) {
await alertCenterApi.updateSilence(editingSilence.id, payload); await alertCenterApi.updateSilence(editingSilence.id, payload);
toast.success(t('monitor.silencedialog.s1cf989')); toast.success(t('monitor:silenceDialog.silenceUpdated'));
} else { } else {
await alertCenterApi.createSilence(payload); await alertCenterApi.createSilence(payload);
toast.success(t('monitor.silencedialog.s56a18d')); toast.success(t('monitor:silenceDialog.silenceCreated'));
} }
onOpenChange(false); onOpenChange(false);
onSaved(); onSaved();
} catch { } catch {
toast.error(t('common.saveFailed')); toast.error(t('common:saveFailed'));
} finally { } finally {
setSaving(false); setSaving(false);
} }
@@ -146,45 +145,45 @@ export function SilenceDialog({
<DialogContent showOverlay={false} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-lg"> <DialogContent showOverlay={false} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-lg">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-[var(--dg-text-primary)]"> <DialogTitle className="text-[var(--dg-text-primary)]">
{editingSilence ? t('monitor.silencedialog.sab13fe') : t('monitor.silencedialog.s22ebe5')} {editingSilence ? t('monitor:silenceDialog.editTitle') : t('monitor:silenceDialog.createTitle')}
</DialogTitle> </DialogTitle>
<DialogDescription className="text-[var(--dg-text-secondary)]"> <DialogDescription className="text-[var(--dg-text-secondary)]">
静默期间匹配的告警将不会触发通知 {t('monitor:silenceDialog.dialogDesc')}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1"> <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
{/* 名称 */} {/* 名称 */}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-primary)]">{t('monitor.silencedialog.s34fe90')}</Label> <Label className="text-[var(--dg-text-primary)]">{t('monitor:silenceDialog.ruleNameRequired')}</Label>
<Input <Input
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder=t('monitor.silencedialog.s397662') placeholder={t('monitor:silenceDialog.namePlaceholder')}
className="bg-[var(--dg-bg-primary)]" className="bg-[var(--dg-bg-primary)]"
/> />
</div> </div>
{/* 描述 */} {/* 描述 */}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-primary)]">{t('common.description')}</Label> <Label className="text-[var(--dg-text-primary)]">{t('common:description')}</Label>
<Input <Input
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder=t('monitor.silencedialog.se67484') placeholder={t('monitor:silenceDialog.descPlaceholder')}
className="bg-[var(--dg-bg-primary)]" className="bg-[var(--dg-bg-primary)]"
/> />
</div> </div>
{/* 静默类型 */} {/* 静默类型 */}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-primary)]">{t('monitor.silencedialog.s52aec8')}</Label> <Label className="text-[var(--dg-text-primary)]">{t('monitor:silenceDialog.silenceType')}</Label>
<Select value={silenceType} onValueChange={setSilenceType}> <Select value={silenceType} onValueChange={setSilenceType}>
<SelectTrigger className="bg-[var(--dg-bg-primary)]"> <SelectTrigger className="bg-[var(--dg-bg-primary)]">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{Object.entries(SILENCE_TYPE_LABELS).map(([val, label]) => ( {Object.entries(SILENCE_TYPE_KEYS).map(([val, key]) => (
<SelectItem key={val} value={val}>{label}</SelectItem> <SelectItem key={val} value={val}>{t(key)}</SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
@@ -194,7 +193,7 @@ export function SilenceDialog({
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-primary)]"> <Label className="text-[var(--dg-text-primary)]">
{silenceType === 'onetime' ? t('common.startTime') : t('monitor.silencedialog.s48bccf')} {silenceType === 'onetime' ? t('monitor:silenceDialog.startTime') : t('monitor:silenceDialog.dailyStart')}
</Label> </Label>
<Input <Input
type="datetime-local" type="datetime-local"
@@ -205,7 +204,7 @@ export function SilenceDialog({
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-primary)]"> <Label className="text-[var(--dg-text-primary)]">
{silenceType === 'onetime' ? t('common.endTime') : t('monitor.silencedialog.s18e2c5')} {silenceType === 'onetime' ? t('monitor:silenceDialog.endTime') : t('monitor:silenceDialog.dailyEnd')}
</Label> </Label>
<Input <Input
type="datetime-local" type="datetime-local"
@@ -219,9 +218,9 @@ export function SilenceDialog({
{/* 星期选择(仅 weekly) */} {/* 星期选择(仅 weekly) */}
{silenceType === 'weekly' && ( {silenceType === 'weekly' && (
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-[var(--dg-text-primary)]">{t('monitor.silencedialog.s859824')}</Label> <Label className="text-[var(--dg-text-primary)]">{t('monitor:silenceDialog.effectiveWeekdays')}</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{WEEKDAY_LABELS.map((label, idx) => ( {WEEKDAY_KEYS.map((key, idx) => (
<button <button
key={idx} key={idx}
type="button" type="button"
@@ -232,7 +231,7 @@ export function SilenceDialog({
: 'bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)]' : 'bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)]'
}`} }`}
> >
{label} {t(key)}
</button> </button>
))} ))}
</div> </div>
@@ -241,15 +240,15 @@ export function SilenceDialog({
{/* 提示 */} {/* 提示 */}
<div className="text-xs text-muted-foreground bg-muted/50 rounded-md p-2"> <div className="text-xs text-muted-foreground bg-muted/50 rounded-md p-2">
{silenceType === 'onetime' && t('monitor.silencedialog.s67c15d')} {silenceType === 'onetime' && t('monitor:silenceDialog.hintOnetime')}
{silenceType === 'daily' && t('monitor.silencedialog.s2e62d4')} {silenceType === 'daily' && t('monitor:silenceDialog.hintDaily')}
{silenceType === 'weekly' && t('monitor.silencedialog.s5a3033')} {silenceType === 'weekly' && t('monitor:silenceDialog.hintWeekly')}
</div> </div>
</div> </div>
<DialogFooter> <DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button> <Button variant="outline" onClick={() => onOpenChange(false)}>{t('common:cancel')}</Button>
<Button onClick={handleSave} disabled={saving}> <Button onClick={handleSave} disabled={saving}>
{saving ? i18n.t('monitor.silencedialog.s9b5d32') : i18n.t('common.save')} {saving ? t('monitor:silenceDialog.saving') : t('common:save')}
</Button> </Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
@@ -1,5 +1,6 @@
// 告警静默规则管理 Tab — 列表 + 创建/编辑/删除/启停 // Logan.Li // 告警静默规则管理 Tab — 列表 + 创建/编辑/删除/启停 // Logan.Li
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { VolumeX, Plus, RefreshCw, Clock, Calendar, Repeat, Edit, Trash2 } from 'lucide-react'; import { VolumeX, Plus, RefreshCw, Clock, Calendar, Repeat, Edit, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -10,16 +11,6 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
import { alertCenterApi } from '@/api'; import { alertCenterApi } from '@/api';
import { SilenceDialog } from './SilenceDialog'; import { SilenceDialog } from './SilenceDialog';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
const SILENCE_TYPE_LABELS: Record<string, string> = {
onetime: i18n.t('monitor.silenceruletab.sebc149'),
daily: i18n.t('monitor.silenceruletab.s78623e'),
weekly: i18n.t('monitor.silenceruletab.s09b03b'),
};
const WEEKDAY_LABELS = [i18n.t('monitor.silenceruletab.s3edddd'), i18n.t('monitor.silenceruletab.s7941da'), i18n.t('monitor.silenceruletab.s2d8be2'), i18n.t('monitor.silenceruletab.se662ff'), i18n.t('monitor.silenceruletab.s21716c'), i18n.t('monitor.silenceruletab.s1fcc29'), i18n.t('monitor.silenceruletab.s61b453')];
function formatTime(t: string | Date): string { function formatTime(t: string | Date): string {
if (!t) return '—'; if (!t) return '—';
@@ -32,8 +23,18 @@ function formatTime(t: string | Date): string {
} }
const SilenceRuleTab: React.FC = () => { const SilenceRuleTab: React.FC = () => {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const confirm = useConfirm(); const confirm = useConfirm();
const silenceTypeLabels: Record<string, string> = {
onetime: t('monitor:silenceRules.typeOnetime'),
daily: t('monitor:silenceRules.typeDaily'),
weekly: t('monitor:silenceRules.typeWeekly'),
};
const weekdayLabels = [
t('monitor:silenceRules.daySun'), t('monitor:silenceRules.dayMon'), t('monitor:silenceRules.dayTue'),
t('monitor:silenceRules.dayWed'), t('monitor:silenceRules.dayThu'), t('monitor:silenceRules.dayFri'),
t('monitor:silenceRules.daySat'),
];
const [silences, setSilences] = useState<JsonData[]>([]); const [silences, setSilences] = useState<JsonData[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
@@ -46,11 +47,11 @@ const SilenceRuleTab: React.FC = () => {
const list = res?.list || res?.data?.list || []; const list = res?.list || res?.data?.list || [];
setSilences(list); setSilences(list);
} catch { } catch {
toast.error(t('monitor.silenceruletab.s48fb7a')); toast.error(t('monitor:silenceRules.fetchFailed'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, []); }, [t]);
useEffect(() => { useEffect(() => {
fetchSilences(); fetchSilences();
@@ -68,25 +69,25 @@ const SilenceRuleTab: React.FC = () => {
const handleDelete = async (silence: JsonData) => { const handleDelete = async (silence: JsonData) => {
const ok = await confirm({ const ok = await confirm({
title: t('monitor.silenceruletab.s7c9a53'), title: t('monitor:silenceRules.deleteTitle'),
description: t('monitor.silenceruletab.s4fe220', { silence.name: silence.name }), description: t('monitor:silenceRules.deleteConfirmRestore', { name: silence.name }),
confirmText: t('common.delete'), confirmText: t('common.delete'),
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
try { try {
await alertCenterApi.deleteSilence(silence.id); await alertCenterApi.deleteSilence(silence.id);
toast.success(t('alert.deleted')); toast.success(t('monitor:silenceRules.deleted'));
fetchSilences(); fetchSilences();
} catch { } catch {
toast.error(t('common.deleteFailed')); toast.error(t('monitor:silenceRules.deleteFailed'));
} }
}; };
const handleToggle = async (silence: JsonData) => { const handleToggle = async (silence: JsonData) => {
try { try {
await alertCenterApi.toggleSilence(silence.id); await alertCenterApi.toggleSilence(silence.id);
toast.success(silence.status === 1 ? t('alert.disabled') : t('alert.enabled')); toast.success(silence.status === 1 ? t('monitor:silenceRules.disabled') : t('monitor:silenceRules.enabled'));
fetchSilences(); fetchSilences();
} catch { } catch {
toast.error(t('common.operationFailed')); toast.error(t('common.operationFailed'));
@@ -108,16 +109,16 @@ const SilenceRuleTab: React.FC = () => {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex items-center gap-2 text-xs text-muted-foreground"> <div className="flex items-center gap-2 text-xs text-muted-foreground">
<VolumeX className="w-4 h-4" /> <VolumeX className="w-4 h-4" />
<span>共 {silences.length} 条规则</span> <span>{t('monitor:silenceRules.totalCount', { count: silences.length })}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={fetchSilences} disabled={loading}> <Button variant="outline" size="sm" onClick={fetchSilences} disabled={loading}>
<RefreshCw className="w-3.5 h-3.5 mr-1" /> <RefreshCw className="w-3.5 h-3.5 mr-1" />
刷新 {t('common.refresh')}
</Button> </Button>
<Button size="sm" onClick={handleAdd}> <Button size="sm" onClick={handleAdd}>
<Plus className="w-3.5 h-3.5 mr-1" /> <Plus className="w-3.5 h-3.5 mr-1" />
添加静默规则 {t('monitor:silenceRules.addRule')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -130,8 +131,8 @@ const SilenceRuleTab: React.FC = () => {
) : silences.length === 0 ? ( ) : silences.length === 0 ? (
<div className="text-center py-12 text-muted-foreground border border-dashed rounded-lg"> <div className="text-center py-12 text-muted-foreground border border-dashed rounded-lg">
<VolumeX className="w-10 h-10 mx-auto mb-2 opacity-50" /> <VolumeX className="w-10 h-10 mx-auto mb-2 opacity-50" />
<p className="text-sm">{t('monitor.noSilences')}</p> <p className="text-sm">{t('monitor:silenceRules.emptyShort')}</p>
<p className="text-xs mt-1">{t('monitor.silenceruletab.s862a1b')}</p> <p className="text-xs mt-1">{t('monitor:silenceRules.emptyHint')}</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 gap-3"> <div className="grid grid-cols-1 gap-3">
@@ -155,14 +156,14 @@ const SilenceRuleTab: React.FC = () => {
{sType === 'onetime' && <Clock className="w-3 h-3 mr-1" />} {sType === 'onetime' && <Clock className="w-3 h-3 mr-1" />}
{sType === 'daily' && <Repeat className="w-3 h-3 mr-1" />} {sType === 'daily' && <Repeat className="w-3 h-3 mr-1" />}
{sType === 'weekly' && <Calendar className="w-3 h-3 mr-1" />} {sType === 'weekly' && <Calendar className="w-3 h-3 mr-1" />}
{SILENCE_TYPE_LABELS[sType] || sType} {silenceTypeLabels[sType] || sType}
</Badge> </Badge>
{/* 活跃状态 */} {/* 活跃状态 */}
{active && ( {active && (
<Badge className="bg-green-500 text-xs">{t('monitor.silenceActive')}</Badge> <Badge className="bg-green-500 text-xs">{t('monitor:silenceRules.active')}</Badge>
)} )}
{!enabled && ( {!enabled && (
<Badge variant="secondary" className="text-xs">{t('alert.disabled')}</Badge> <Badge variant="secondary" className="text-xs">{t('monitor:silenceRules.disabledBadge')}</Badge>
)} )}
</div> </div>
@@ -175,14 +176,14 @@ const SilenceRuleTab: React.FC = () => {
<span> <span>
{sType === 'onetime' {sType === 'onetime'
? `${formatTime(s.start_time)} — ${formatTime(s.end_time)}` ? `${formatTime(s.start_time)} — ${formatTime(s.end_time)}`
: t('monitor.silenceruletab.s8bdc6c', { formatTime(s.start_time): formatTime(s.start_time), formatTime(s.end_time): formatTime(s.end_time) }) : `${t('monitor:silenceRules.dailyPrefix')} ${formatTime(s.start_time)} — ${formatTime(s.end_time)}`
} }
</span> </span>
{sType === 'weekly' && weekdayList.length > 0 && ( {sType === 'weekly' && weekdayList.length > 0 && (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
{weekdayList.sort((a,b)=>a-b).map(d => ( {weekdayList.sort((a,b)=>a-b).map(d => (
<span key={d} className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-[10px]"> <span key={d} className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-[10px]">
{WEEKDAY_LABELS[d]} {weekdayLabels[d]}
</span> </span>
))} ))}
</span> </span>
@@ -191,7 +192,7 @@ const SilenceRuleTab: React.FC = () => {
{/* 创建时间 */} {/* 创建时间 */}
<div className="text-[10px] text-muted-foreground/60 mt-1"> <div className="text-[10px] text-muted-foreground/60 mt-1">
创建于 {formatTime(s.created_at)} {t('monitor:silenceRules.createdAt', { time: formatTime(s.created_at) })}
</div> </div>
</div> </div>
@@ -202,10 +203,10 @@ const SilenceRuleTab: React.FC = () => {
onCheckedChange={() => handleToggle(s)} onCheckedChange={() => handleToggle(s)}
/> />
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleEdit(s)}> <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleEdit(s)}>
<Edit className="w-3 h-3 mr-1" />编辑 <Edit className="w-3 h-3 mr-1" />{t('common.edit')}
</Button> </Button>
<Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red" onClick={() => handleDelete(s)}> <Button variant="ghost" size="sm" className="h-7 text-xs dg-text-red" onClick={() => handleDelete(s)}>
<Trash2 className="w-3 h-3 mr-1" />删除 <Trash2 className="w-3 h-3 mr-1" />{t('common.delete')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -1,5 +1,6 @@
// 告警静默规则面板 — 嵌入通知策略 Tab // Logan.Li // 告警静默规则面板 — 嵌入通知策略 Tab // Logan.Li
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { VolumeX, Plus, RefreshCw, Edit, Trash2 } from 'lucide-react'; import { VolumeX, Plus, RefreshCw, Edit, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@@ -10,16 +11,6 @@ import { useConfirm } from '@/components/ui/confirm-dialog';
import { alertCenterApi } from '@/api'; import { alertCenterApi } from '@/api';
import { SilenceDialog } from './SilenceDialog'; import { SilenceDialog } from './SilenceDialog';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import { useTranslation } from 'react-i18next';
import i18n from '@/i18n';
const SILENCE_TYPE_LABELS: Record<string, string> = {
onetime: i18n.t('monitor.silencerulespanel.sebc149'),
daily: i18n.t('monitor.silencerulespanel.s78623e'),
weekly: i18n.t('monitor.silencerulespanel.s09b03b'),
};
const WEEKDAY_LABELS = [i18n.t('monitor.silencerulespanel.s3edddd'), i18n.t('monitor.silencerulespanel.s7941da'), i18n.t('monitor.silencerulespanel.s2d8be2'), i18n.t('monitor.silencerulespanel.se662ff'), i18n.t('monitor.silencerulespanel.s21716c'), i18n.t('monitor.silencerulespanel.s1fcc29'), i18n.t('monitor.silencerulespanel.s61b453')];
function formatTime(t: string | Date): string { function formatTime(t: string | Date): string {
if (!t) return '—'; if (!t) return '—';
@@ -32,8 +23,18 @@ function formatTime(t: string | Date): string {
} }
export function SilenceRulesPanel() { export function SilenceRulesPanel() {
const { t } = useTranslation(); const { t } = useTranslation(['monitor', 'common']);
const confirm = useConfirm(); const confirm = useConfirm();
const silenceTypeLabels: Record<string, string> = {
onetime: t('monitor:silenceRules.typeOnetime'),
daily: t('monitor:silenceRules.typeDaily'),
weekly: t('monitor:silenceRules.typeWeekly'),
};
const weekdayLabels = [
t('monitor:silenceRules.daySun'), t('monitor:silenceRules.dayMon'), t('monitor:silenceRules.dayTue'),
t('monitor:silenceRules.dayWed'), t('monitor:silenceRules.dayThu'), t('monitor:silenceRules.dayFri'),
t('monitor:silenceRules.daySat'),
];
const [silences, setSilences] = useState<JsonData[]>([]); const [silences, setSilences] = useState<JsonData[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
@@ -46,35 +47,35 @@ export function SilenceRulesPanel() {
const list = res?.list || res?.data?.list || []; const list = res?.list || res?.data?.list || [];
setSilences(list); setSilences(list);
} catch { } catch {
toast.error(t('monitor.silencerulespanel.s48fb7a')); toast.error(t('monitor:silenceRules.fetchFailed'));
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, []); }, [t]);
useEffect(() => { fetchSilences(); }, [fetchSilences]); useEffect(() => { fetchSilences(); }, [fetchSilences]);
const handleDelete = async (silence: JsonData) => { const handleDelete = async (silence: JsonData) => {
const ok = await confirm({ const ok = await confirm({
title: t('monitor.silencerulespanel.s7c9a53'), title: t('monitor:silenceRules.deleteTitle'),
description: t('monitor.silencerulespanel.seff173', { silence.name: silence.name }), description: t('monitor:silenceRules.deleteConfirm', { name: silence.name }),
confirmText: t('common.delete'), confirmText: t('common.delete'),
variant: 'destructive', variant: 'destructive',
}); });
if (!ok) return; if (!ok) return;
try { try {
await alertCenterApi.deleteSilence(silence.id); await alertCenterApi.deleteSilence(silence.id);
toast.success(t('alert.deleted')); toast.success(t('monitor:silenceRules.deleted'));
fetchSilences(); fetchSilences();
} catch { } catch {
toast.error(t('common.deleteFailed')); toast.error(t('monitor:silenceRules.deleteFailed'));
} }
}; };
const handleToggle = async (silence: JsonData) => { const handleToggle = async (silence: JsonData) => {
try { try {
await alertCenterApi.toggleSilence(silence.id); await alertCenterApi.toggleSilence(silence.id);
toast.success(silence.status === 1 ? t('alert.disabled') : t('alert.enabled')); toast.success(silence.status === 1 ? t('monitor:silenceRules.disabled') : t('monitor:silenceRules.enabled'));
fetchSilences(); fetchSilences();
} catch { } catch {
toast.error(t('common.operationFailed')); toast.error(t('common.operationFailed'));
@@ -93,15 +94,15 @@ export function SilenceRulesPanel() {
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<VolumeX className="w-4 h-4 text-muted-foreground" /> <VolumeX className="w-4 h-4 text-muted-foreground" />
<h3 className="text-sm font-medium">{t('monitor.silences')}</h3> <h3 className="text-sm font-medium">{t('monitor:silenceRules.title')}</h3>
<span className="text-xs text-muted-foreground">{t('monitor.silencerulespanel.sed566e')}</span> <span className="text-xs text-muted-foreground">{t('monitor:silenceRules.subtitle')}</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={fetchSilences} disabled={loading}> <Button variant="outline" size="sm" className="h-7 text-xs" onClick={fetchSilences} disabled={loading}>
<RefreshCw className={`w-3 h-3 mr-1 ${loading ? 'animate-spin' : ''}`} />刷新 <RefreshCw className={`w-3 h-3 mr-1 ${loading ? 'animate-spin' : ''}`} />{t('common.refresh')}
</Button> </Button>
<Button size="sm" className="h-7 text-xs" onClick={() => { setEditing(null); setDialogOpen(true); }}> <Button size="sm" className="h-7 text-xs" onClick={() => { setEditing(null); setDialogOpen(true); }}>
<Plus className="w-3 h-3 mr-1" />添加 <Plus className="w-3 h-3 mr-1" />{t('common.add')}
</Button> </Button>
</div> </div>
</div> </div>
@@ -110,7 +111,7 @@ export function SilenceRulesPanel() {
<p className="text-xs text-muted-foreground text-center py-6">{t('common.loading')}</p> <p className="text-xs text-muted-foreground text-center py-6">{t('common.loading')}</p>
) : silences.length === 0 ? ( ) : silences.length === 0 ? (
<div className="text-center py-8 text-muted-foreground border border-dashed border-[var(--dg-border)] rounded-lg"> <div className="text-center py-8 text-muted-foreground border border-dashed border-[var(--dg-border)] rounded-lg">
<p className="text-xs">{t('monitor.silencerulespanel.s537761')}</p> <p className="text-xs">{t('monitor:silenceRules.empty')}</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 gap-2"> <div className="grid grid-cols-1 gap-2">
@@ -129,18 +130,18 @@ export function SilenceRulesPanel() {
<div className="flex items-center gap-2 mb-1 flex-wrap"> <div className="flex items-center gap-2 mb-1 flex-wrap">
<span className="font-medium text-xs">{s.name}</span> <span className="font-medium text-xs">{s.name}</span>
<Badge variant="outline" className="text-[10px]"> <Badge variant="outline" className="text-[10px]">
{SILENCE_TYPE_LABELS[sType] || sType} {silenceTypeLabels[sType] || sType}
</Badge> </Badge>
{active && <Badge className="bg-green-500 text-[10px]">{t('monitor.silenceActive')}</Badge>} {active && <Badge className="bg-green-500 text-[10px]">{t('monitor:silenceRules.active')}</Badge>}
{!enabled && <Badge variant="secondary" className="text-[10px]">{t('alert.disabled')}</Badge>} {!enabled && <Badge variant="secondary" className="text-[10px]">{t('monitor:silenceRules.disabledBadge')}</Badge>}
</div> </div>
<p className="text-[10px] text-muted-foreground"> <p className="text-[10px] text-muted-foreground">
{sType === 'onetime' {sType === 'onetime'
? `${formatTime(s.start_time)} — ${formatTime(s.end_time)}` ? `${formatTime(s.start_time)} — ${formatTime(s.end_time)}`
: t('monitor.silencerulespanel.s8bdc6c', { formatTime(s.start_time): formatTime(s.start_time), formatTime(s.end_time): formatTime(s.end_time) })} : `${t('monitor:silenceRules.dailyPrefix')} ${formatTime(s.start_time)} — ${formatTime(s.end_time)}`}
{sType === 'weekly' && weekdayList.length > 0 && ( {sType === 'weekly' && weekdayList.length > 0 && (
<span className="ml-2"> <span className="ml-2">
周{weekdayList.sort((a, b) => a - b).map((d) => WEEKDAY_LABELS[d]).join('')} {t('monitor:silenceRules.weekPrefix')}{weekdayList.sort((a, b) => a - b).map((d) => weekdayLabels[d]).join('')}
</span> </span>
)} )}
</p> </p>
@@ -1,12 +1,12 @@
// 告警中心共享类型与辅助函数 // Logan.Li // 告警中心共享类型与辅助函数 // Logan.Li
import React from 'react'; import React from 'react';
import i18n from '@/i18n';
import { import {
AlertCircle, AlertTriangle, Info, Zap, User, CheckCircle, VolumeX, AlertCircle, AlertTriangle, Info, Zap, User, CheckCircle, VolumeX,
Mail, MessageSquare, Phone, Bell, Mail, MessageSquare, Phone, Bell,
} from 'lucide-react'; } from 'lucide-react';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import type { JsonData } from '@/types/common'; import type { JsonData } from '@/types/common';
import i18n from '@/i18n';
/** 前端 Alert 接口 */ /** 前端 Alert 接口 */
export interface Alert { export interface Alert {
@@ -77,20 +77,25 @@ export interface ContactGroup {
updated_at?: string; updated_at?: string;
} }
const SOURCE_LABELS: Record<string, string> = { const SOURCE_LABEL_KEYS: Record<string, string> = {
host: i18n.t('monitor.hostMonitor'), middleware: i18n.t('monitor.middleware'), site: i18n.t('monitor.siteProbe'), snmp: i18n.t('monitor.snmp.title'), log: i18n.t('menu.logAlerts'), host: 'srcHost', middleware: 'srcMiddleware', site: 'srcSite', snmp: 'srcSnmp', log: 'srcLog',
}; };
function getSourceLabel(type: string): string {
const key = SOURCE_LABEL_KEYS[type];
return key ? i18n.t(`monitor:alertHelper.${key}`) : '';
}
// Logan.Li — 后端字段映射到前端 Alert 接口 // Logan.Li — 后端字段映射到前端 Alert 接口
export function mapAlert(a: JsonData): Alert { export function mapAlert(a: JsonData): Alert {
const sourceType = String(a.source_type || a.sourceType || ''); const sourceType = String(a.source_type || a.sourceType || '');
return { return {
id: String(a.id), id: String(a.id),
title: a.title || a.rule_name || i18n.t('monitor.alertCenterHelpers.sd0abee', { a.id: a.id }), title: a.title || a.rule_name || i18n.t('monitor:alertHelper.alertIdFallback', { id: a.id }),
description: a.message || a.description || '', description: a.message || a.description || '',
severity: (a.severity || 'info') as Alert['severity'], severity: (a.severity || 'info') as Alert['severity'],
status: (a.status || 'firing') as Alert['status'], status: (a.status || 'firing') as Alert['status'],
source: SOURCE_LABELS[sourceType] || a.target || a.source || '', source: getSourceLabel(sourceType) || a.target || a.source || '',
service: a.target || a.service || '', service: a.target || a.service || '',
metric: a.metric || '', metric: a.metric || '',
value: Number(a.value) || 0, value: Number(a.value) || 0,
@@ -113,11 +118,11 @@ export function mapAlert(a: JsonData): Alert {
export function getSeverityBadge(severity: string) { export function getSeverityBadge(severity: string) {
switch (severity) { switch (severity) {
case 'critical': case 'critical':
return <Badge variant="destructive" className="gap-1"><AlertCircle className="w-3 h-3" />{i18n.t('monitor.critical')}</Badge>; return <Badge variant="destructive" className="gap-1"><AlertCircle className="w-3 h-3" />{i18n.t('monitor:alertHelper.sevCritical')}</Badge>;
case 'warning': case 'warning':
return <Badge variant="default" className="bg-orange-500 gap-1"><AlertTriangle className="w-3 h-3" />{i18n.t('common.warning')}</Badge>; return <Badge variant="default" className="bg-orange-500 gap-1"><AlertTriangle className="w-3 h-3" />{i18n.t('monitor:alertHelper.sevWarning')}</Badge>;
case 'info': case 'info':
return <Badge variant="default" className="bg-blue-500 gap-1"><Info className="w-3 h-3" />{i18n.t('monitor.info')}</Badge>; return <Badge variant="default" className="bg-blue-500 gap-1"><Info className="w-3 h-3" />{i18n.t('monitor:alertHelper.sevInfo')}</Badge>;
default: default:
return <Badge variant="secondary">{i18n.t('common.unknown')}</Badge>; return <Badge variant="secondary">{i18n.t('common.unknown')}</Badge>;
} }
@@ -127,13 +132,13 @@ export function getSeverityBadge(severity: string) {
export function getStatusBadge(status: string) { export function getStatusBadge(status: string) {
switch (status) { switch (status) {
case 'firing': case 'firing':
return <Badge variant="destructive" className="gap-1 animate-pulse"><Zap className="w-3 h-3" />{i18n.t('monitor.firing')}</Badge>; return <Badge variant="destructive" className="gap-1 animate-pulse"><Zap className="w-3 h-3" />{i18n.t('monitor:alertHelper.statusFiring')}</Badge>;
case 'acknowledged': case 'acknowledged':
return <Badge variant="default" className="bg-yellow-500 gap-1"><User className="w-3 h-3" />{i18n.t('monitor.acknowledged')}</Badge>; return <Badge variant="default" className="bg-yellow-500 gap-1"><User className="w-3 h-3" />{i18n.t('monitor:alertHelper.statusAcknowledged')}</Badge>;
case 'resolved': case 'resolved':
return <Badge variant="default" className="bg-green-500 gap-1"><CheckCircle className="w-3 h-3" />{i18n.t('monitor.resolved')}</Badge>; return <Badge variant="default" className="bg-green-500 gap-1"><CheckCircle className="w-3 h-3" />{i18n.t('monitor:alertHelper.statusResolved')}</Badge>;
case 'suppressed': case 'suppressed':
return <Badge variant="secondary" className="gap-1"><VolumeX className="w-3 h-3" />{i18n.t('monitor.alertCenterHelpers.s1325a8')}</Badge>; return <Badge variant="secondary" className="gap-1"><VolumeX className="w-3 h-3" />{i18n.t('monitor:alertHelper.statusSuppressed')}</Badge>;
default: default:
return <Badge variant="secondary">{i18n.t('common.unknown')}</Badge>; return <Badge variant="secondary">{i18n.t('common.unknown')}</Badge>;
} }
@@ -153,11 +158,13 @@ export function getChannelIcon(type: string) {
} }
} }
/** 渠道类型中文标签 */ /** 渠道类型标签 */
export function getChannelTypeLabel(type: string) { export function getChannelTypeLabel(type: string) {
const map: Record<string, string> = { const key = CHANNEL_TYPE_KEYS[type];
dingtalk: i18n.t('monitor.contactDingtalk'), wechat: i18n.t('monitor.contactWechat'), feishu: i18n.t('monitor.alertCenterHelpers.s7714e5'), return key ? i18n.t(`monitor:alertHelper.${key}`) : type;
email: i18n.t('common.email'), sms: i18n.t('common.sms'), webhook: 'Webhook',
};
return map[type] || type;
} }
const CHANNEL_TYPE_KEYS: Record<string, string> = {
dingtalk: 'chDingtalk', wechat: 'chWechat', feishu: 'chFeishu',
email: 'chEmail', sms: 'chSms', webhook: 'chWebhook',
};
Loaded 100 of 191 files, more files were not shown because too many files have changed in this diff. Show more