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:
1 parent
ecec73989b
commit
72bfb0e12d
191 files changed
+5054
-7589
No files matched your search
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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=">">大于 ></SelectItem>
|
||||||
<SelectItem value=">=">{t('cloud.billingruledialog.s8e1e26')}</SelectItem>
|
<SelectItem value=">=">大于等于 ≥</SelectItem>
|
||||||
<SelectItem value="<">{t('cloud.billingruledialog.s0196c1')}</SelectItem>
|
<SelectItem value="<">小于 <</SelectItem>
|
||||||
<SelectItem value="<=">{t('cloud.billingruledialog.s45c301')}</SelectItem>
|
<SelectItem value="<=">小于等于 ≤</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">
|
||||||
|
|||||||
@@ -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 <{t('k8s.cicd.tipBearerKey')}></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
Reference in new issue
Block a user