fix: 清理冲突合并产生的行号前缀
This commit is contained in:
attacker committed
1 parent
2354959811
commit
3a0f5ddb52
3 files changed
+529
-532
No files matched your search
@@ -1,251 +1,250 @@
|
||||
1|import { useState } from 'react';
|
||||
2|import { toast } from 'sonner';
|
||||
3|import { useUserStore } from '@/store';
|
||||
4|import {
|
||||
5| Dialog,
|
||||
6| DialogContent,
|
||||
7| DialogDescription,
|
||||
8| DialogHeader,
|
||||
9| DialogTitle,
|
||||
10|} from '@/components/ui/dialog';
|
||||
11|import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
12|import { Button } from '@/components/ui/button';
|
||||
13|import { Copy, Check, Terminal, Download, Settings, Play, Cpu } from 'lucide-react';
|
||||
14|
|
||||
15|interface AgentWizardProps {
|
||||
16| open: boolean;
|
||||
17| onOpenChange: (open: boolean) => void;
|
||||
18|}
|
||||
19|
|
||||
20|/** 自动检测服务器地址：使用当前浏览器访问的地址（协议+主机+端口） */
|
||||
21|function detectServerAddress(): string {
|
||||
22| if (typeof window !== 'undefined' && window.location) {
|
||||
23| // 直接用当前浏览器的 origin（如 http://10.10.10.150），
|
||||
24| // Nginx 会将 /agent/ 请求代理到后端
|
||||
25| return window.location.origin;
|
||||
26| }
|
||||
27| return 'http://127.0.0.1:8080';
|
||||
28|}
|
||||
29|
|
||||
30|export function AgentWizard({ open, onOpenChange }: AgentWizardProps) {
|
||||
31| const token = useUserStore((s) => s.token) || '<YOUR_TOKEN>';
|
||||
32| const serverUrl = detectServerAddress();
|
||||
33| const [copied, setCopied] = useState(false);
|
||||
34| const [showManualInput, setShowManualInput] = useState(false);
|
||||
35|
|
||||
36| const installCommand = `curl -fsSL ${serverUrl.replace(/^http:/, 'http:')}/agent/install.sh | bash -s -- --server ${serverUrl} --token ${token}`;
|
||||
37|
|
||||
38| const fallbackCopy = (text: string): boolean => {
|
||||
39| const textArea = document.createElement('textarea');
|
||||
40| textArea.value = text;
|
||||
41| textArea.style.position = 'fixed';
|
||||
42| textArea.style.left = '-9999px';
|
||||
43| textArea.style.top = '-9999px';
|
||||
44| document.body.appendChild(textArea);
|
||||
45| textArea.focus();
|
||||
46| textArea.select();
|
||||
47| let success = false;
|
||||
48| try {
|
||||
49|<<<<<<< HEAD
|
||||
50| // 优先使用现代 Clipboard API（需要 HTTPS 或 localhost）
|
||||
51| if (navigator.clipboard && window.isSecureContext) {
|
||||
52| await navigator.clipboard.writeText(installCommand);
|
||||
53| } else {
|
||||
54| // 降级方案：用隐藏 textarea + execCommand('copy')，兼容 HTTP 环境
|
||||
55| const textarea = document.createElement('textarea');
|
||||
56| textarea.value = installCommand;
|
||||
57| textarea.style.position = 'fixed';
|
||||
58| textarea.style.opacity = '0';
|
||||
59| textarea.style.pointerEvents = 'none';
|
||||
60| document.body.appendChild(textarea);
|
||||
61| textarea.select();
|
||||
62| const ok = document.execCommand('copy');
|
||||
63| document.body.removeChild(textarea);
|
||||
64| if (!ok) throw new Error('execCommand failed');
|
||||
65| }
|
||||
66| setCopied(true);
|
||||
67| toast.success('安装命令已复制');
|
||||
68| setTimeout(() => setCopied(false), 2000);
|
||||
69| } catch {
|
||||
70| toast.error('复制失败，请手动选中复制');
|
||||
71|=======
|
||||
72| success = document.execCommand('copy');
|
||||
73| } catch {
|
||||
74| // execCommand also failed
|
||||
75| }
|
||||
76| document.body.removeChild(textArea);
|
||||
77| return success;
|
||||
78| };
|
||||
79|
|
||||
80| const handleCopy = async () => {
|
||||
81| const cmd = installCommand;
|
||||
82| let success = false;
|
||||
83|
|
||||
84| // 方式1: Clipboard API（HTTPS / localhost）
|
||||
85| try {
|
||||
86| await navigator.clipboard.writeText(cmd);
|
||||
87| success = true;
|
||||
88| } catch {
|
||||
89| // Clipboard API 不可用
|
||||
90| }
|
||||
91|
|
||||
92| // 方式2: execCommand fallback（HTTP 也可用）
|
||||
93| if (!success) {
|
||||
94| success = fallbackCopy(cmd);
|
||||
95| }
|
||||
96|
|
||||
97| if (success) {
|
||||
98| setCopied(true);
|
||||
99| toast.success('安装命令已复制到剪贴板，粘贴到目标主机执行');
|
||||
100| setTimeout(() => setCopied(false), 3000);
|
||||
101| } else {
|
||||
102| toast.error('自动复制失败，请在下方代码框中手动全选复制 (Ctrl+A → Ctrl+C)');
|
||||
103| // 切换到手选模式，展示可编辑文本框
|
||||
104| setShowManualInput(true);
|
||||
105|>>>>>>> ca18ead (feat: run.sh四模式(dev/docker/build/binary) + CLI flags + Redka内嵌Redis + Agent复制修复 + 服务器编辑IP字段 + 安装Agent按钮)
|
||||
106| }
|
||||
107| };
|
||||
108|
|
||||
109| const binaryUrl = `${serverUrl}/agent/aiops-agent-linux-amd64`;
|
||||
110|
|
||||
111| const manualSteps = [
|
||||
112| {
|
||||
113| icon: Download,
|
||||
114| title: '1. 下载二进制',
|
||||
115| commands: [
|
||||
116| `curl -fsSL ${binaryUrl} -o /usr/local/bin/aiops-agent`,
|
||||
117| ],
|
||||
118| },
|
||||
119| {
|
||||
120| icon: Settings,
|
||||
121| title: '2. 赋予执行权限',
|
||||
122| commands: ['chmod +x /usr/local/bin/aiops-agent'],
|
||||
123| },
|
||||
124| {
|
||||
125| icon: Cpu,
|
||||
126| title: '3. 创建 systemd 服务',
|
||||
127| commands: [
|
||||
128| `cat > /etc/systemd/system/aiops-agent.service << 'EOF'`,
|
||||
129| `[Unit]`,
|
||||
130| `Description=AIOps Agent`,
|
||||
131| `After=network.target`,
|
||||
132| ``,
|
||||
133| `[Service]`,
|
||||
134| `Type=simple`,
|
||||
135| `ExecStart=/usr/local/bin/aiops-agent --server ${serverUrl} --token ${token}`,
|
||||
136| `Restart=always`,
|
||||
137| `RestartSec=5`,
|
||||
138| ``,
|
||||
139| `[Install]`,
|
||||
140| `WantedBy=multi-user.target`,
|
||||
141| `EOF`,
|
||||
142| ],
|
||||
143| },
|
||||
144| {
|
||||
145| icon: Play,
|
||||
146| title: '4. 启动并设置开机自启',
|
||||
147| commands: [
|
||||
148| 'systemctl daemon-reload',
|
||||
149| 'systemctl enable --now aiops-agent',
|
||||
150| 'systemctl status aiops-agent',
|
||||
151| ],
|
||||
152| },
|
||||
153| ];
|
||||
154|
|
||||
155| return (
|
||||
156| <Dialog open={open} onOpenChange={onOpenChange}>
|
||||
157| <DialogContent className="max-w-2xl bg-slate-900 border-slate-800 text-slate-100">
|
||||
158| <DialogHeader>
|
||||
159| <DialogTitle className="text-slate-100">部署 Agent</DialogTitle>
|
||||
160| <DialogDescription className="text-slate-400">
|
||||
161| 在目标主机上执行以下命令即可完成 Agent 安装与注册
|
||||
162| </DialogDescription>
|
||||
163| </DialogHeader>
|
||||
164|
|
||||
165| <Tabs defaultValue="auto" className="w-full">
|
||||
166| <TabsList className="bg-slate-800 border border-slate-700">
|
||||
167| <TabsTrigger value="auto" className="data-[state=active]:bg-slate-700">
|
||||
168| <Terminal className="h-4 w-4 mr-1.5" />
|
||||
169| 安装Agent
|
||||
170| </TabsTrigger>
|
||||
171| <TabsTrigger value="manual" className="data-[state=active]:bg-slate-700">
|
||||
172| 手动安装
|
||||
173| </TabsTrigger>
|
||||
174| </TabsList>
|
||||
175|
|
||||
176| {/* 自动安装 */}
|
||||
177| <TabsContent value="auto" className="mt-4 space-y-3">
|
||||
178| <p className="text-sm text-slate-400">
|
||||
179| 在目标主机执行以下命令，Agent 将自动下载、安装并启动：
|
||||
180| </p>
|
||||
181| <div className="relative rounded-lg bg-slate-950 border border-slate-800 p-4">
|
||||
182| <pre className="text-xs text-emerald-400 font-mono whitespace-pre-wrap break-all pr-10">
|
||||
183| {installCommand}
|
||||
184| </pre>
|
||||
185| <Button
|
||||
186| size="icon"
|
||||
187| variant="ghost"
|
||||
188| onClick={handleCopy}
|
||||
189| className="absolute top-2 right-2 h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800"
|
||||
190| title="复制到剪贴板"
|
||||
191| >
|
||||
192| {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
|
||||
193| </Button>
|
||||
194| </div>
|
||||
195|
|
||||
196| {/* 手动复制模式：当自动复制失败时展示可全选的文本域 */}
|
||||
197| {showManualInput && (
|
||||
198| <div className="rounded-lg bg-amber-950/30 border border-amber-800/50 p-4">
|
||||
199| <p className="text-xs text-amber-400 mb-2">
|
||||
200| ⚠️ 自动复制失败。请点击下方输入框全选 (Ctrl+A) 后复制 (Ctrl+C)：
|
||||
201| </p>
|
||||
202| <textarea
|
||||
203| readOnly
|
||||
204| value={installCommand}
|
||||
205| className="w-full h-24 bg-slate-950 border border-amber-800/30 text-emerald-400 font-mono text-xs p-3 rounded resize-none focus:outline-none focus:border-amber-600"
|
||||
206| onClick={(e) => (e.target as HTMLTextAreaElement).select()}
|
||||
207| />
|
||||
208| </div>
|
||||
209| )}
|
||||
210| <div className="flex items-start gap-2 text-xs text-slate-500">
|
||||
211| <Terminal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
|
||||
212| <span>
|
||||
213| 服务器地址已自动检测为当前访问地址（{serverUrl}）。Agent 安装成功后将自动连接并开始上报指标。
|
||||
214| </span>
|
||||
215| </div>
|
||||
216| </TabsContent>
|
||||
217|
|
||||
218| {/* 手动安装 */}
|
||||
219| <TabsContent value="manual" className="mt-4 space-y-4">
|
||||
220| <div className="max-h-[420px] overflow-y-auto space-y-3 pr-1">
|
||||
221| {manualSteps.map((step) => (
|
||||
222| <div key={step.title} className="rounded-lg bg-slate-950 border border-slate-800 overflow-hidden">
|
||||
223| <div className="flex items-center gap-2 px-4 py-2.5 bg-slate-800/50">
|
||||
224| <step.icon className="h-4 w-4 text-blue-400" />
|
||||
225| <span className="text-sm font-medium text-slate-200">{step.title}</span>
|
||||
226| </div>
|
||||
227| <div className="p-3 space-y-1">
|
||||
228| {step.commands.map((cmd, idx) => (
|
||||
229| <div key={idx} className="flex items-start gap-2">
|
||||
230| <span className="text-slate-600 font-mono text-xs select-none mt-0.5">$</span>
|
||||
231| <code className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all flex-1">
|
||||
232| {cmd}
|
||||
233| </code>
|
||||
234| </div>
|
||||
235| ))}
|
||||
236| </div>
|
||||
237| </div>
|
||||
238| ))}
|
||||
239| </div>
|
||||
240| <p className="text-xs text-slate-500">
|
||||
241| 完成上述步骤后，Agent 将作为 systemd 服务运行并自动上报指标。
|
||||
242| </p>
|
||||
243| </TabsContent>
|
||||
244| </Tabs>
|
||||
245| </DialogContent>
|
||||
246| </Dialog>
|
||||
247| );
|
||||
248|}
|
||||
249|
|
||||
250|export default AgentWizard;
|
||||
251|
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { useUserStore } from '@/store';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Copy, Check, Terminal, Download, Settings, Play, Cpu } from 'lucide-react';
|
||||
|
||||
interface AgentWizardProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
/** 自动检测服务器地址：使用当前浏览器访问的地址（协议+主机+端口） */
|
||||
function detectServerAddress(): string {
|
||||
if (typeof window !== 'undefined' && window.location) {
|
||||
// 直接用当前浏览器的 origin（如 http://10.10.10.150），
|
||||
// Nginx 会将 /agent/ 请求代理到后端
|
||||
return window.location.origin;
|
||||
}
|
||||
return 'http://127.0.0.1:8080';
|
||||
}
|
||||
|
||||
export function AgentWizard({ open, onOpenChange }: AgentWizardProps) {
|
||||
const token = useUserStore((s) => s.token) || '<YOUR_TOKEN>';
|
||||
const serverUrl = detectServerAddress();
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [showManualInput, setShowManualInput] = useState(false);
|
||||
|
||||
const installCommand = `curl -fsSL ${serverUrl.replace(/^http:/, 'http:')}/agent/install.sh | bash -s -- --server ${serverUrl} --token ${token}`;
|
||||
|
||||
const fallbackCopy = (text: string): boolean => {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-9999px';
|
||||
textArea.style.top = '-9999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
let success = false;
|
||||
try {
|
||||
<<<<<<< HEAD
|
||||
// 优先使用现代 Clipboard API（需要 HTTPS 或 localhost）
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(installCommand);
|
||||
} else {
|
||||
// 降级方案：用隐藏 textarea + execCommand('copy')，兼容 HTTP 环境
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = installCommand;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
textarea.style.pointerEvents = 'none';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
const ok = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
if (!ok) throw new Error('execCommand failed');
|
||||
}
|
||||
setCopied(true);
|
||||
toast.success('安装命令已复制');
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
toast.error('复制失败，请手动选中复制');
|
||||
=======
|
||||
success = document.execCommand('copy');
|
||||
} catch {
|
||||
// execCommand also failed
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
return success;
|
||||
};
|
||||
|
||||
const handleCopy = async () => {
|
||||
const cmd = installCommand;
|
||||
let success = false;
|
||||
|
||||
// 方式1: Clipboard API（HTTPS / localhost）
|
||||
try {
|
||||
await navigator.clipboard.writeText(cmd);
|
||||
success = true;
|
||||
} catch {
|
||||
// Clipboard API 不可用
|
||||
}
|
||||
|
||||
// 方式2: execCommand fallback（HTTP 也可用）
|
||||
if (!success) {
|
||||
success = fallbackCopy(cmd);
|
||||
}
|
||||
|
||||
if (success) {
|
||||
setCopied(true);
|
||||
toast.success('安装命令已复制到剪贴板，粘贴到目标主机执行');
|
||||
setTimeout(() => setCopied(false), 3000);
|
||||
} else {
|
||||
toast.error('自动复制失败，请在下方代码框中手动全选复制 (Ctrl+A → Ctrl+C)');
|
||||
// 切换到手选模式，展示可编辑文本框
|
||||
setShowManualInput(true);
|
||||
>>>>>>> ca18ead (feat: run.sh四模式(dev/docker/build/binary) + CLI flags + Redka内嵌Redis + Agent复制修复 + 服务器编辑IP字段 + 安装Agent按钮)
|
||||
}
|
||||
};
|
||||
|
||||
const binaryUrl = `${serverUrl}/agent/aiops-agent-linux-amd64`;
|
||||
|
||||
const manualSteps = [
|
||||
{
|
||||
icon: Download,
|
||||
title: '1. 下载二进制',
|
||||
commands: [
|
||||
`curl -fsSL ${binaryUrl} -o /usr/local/bin/aiops-agent`,
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
title: '2. 赋予执行权限',
|
||||
commands: ['chmod +x /usr/local/bin/aiops-agent'],
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
title: '3. 创建 systemd 服务',
|
||||
commands: [
|
||||
`cat > /etc/systemd/system/aiops-agent.service << 'EOF'`,
|
||||
`[Unit]`,
|
||||
`Description=AIOps Agent`,
|
||||
`After=network.target`,
|
||||
``,
|
||||
`[Service]`,
|
||||
`Type=simple`,
|
||||
`ExecStart=/usr/local/bin/aiops-agent --server ${serverUrl} --token ${token}`,
|
||||
`Restart=always`,
|
||||
`RestartSec=5`,
|
||||
``,
|
||||
`[Install]`,
|
||||
`WantedBy=multi-user.target`,
|
||||
`EOF`,
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Play,
|
||||
title: '4. 启动并设置开机自启',
|
||||
commands: [
|
||||
'systemctl daemon-reload',
|
||||
'systemctl enable --now aiops-agent',
|
||||
'systemctl status aiops-agent',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl bg-slate-900 border-slate-800 text-slate-100">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-slate-100">部署 Agent</DialogTitle>
|
||||
<DialogDescription className="text-slate-400">
|
||||
在目标主机上执行以下命令即可完成 Agent 安装与注册
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs defaultValue="auto" className="w-full">
|
||||
<TabsList className="bg-slate-800 border border-slate-700">
|
||||
<TabsTrigger value="auto" className="data-[state=active]:bg-slate-700">
|
||||
<Terminal className="h-4 w-4 mr-1.5" />
|
||||
安装Agent
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="manual" className="data-[state=active]:bg-slate-700">
|
||||
手动安装
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 自动安装 */}
|
||||
<TabsContent value="auto" className="mt-4 space-y-3">
|
||||
<p className="text-sm text-slate-400">
|
||||
在目标主机执行以下命令，Agent 将自动下载、安装并启动：
|
||||
</p>
|
||||
<div className="relative rounded-lg bg-slate-950 border border-slate-800 p-4">
|
||||
<pre className="text-xs text-emerald-400 font-mono whitespace-pre-wrap break-all pr-10">
|
||||
{installCommand}
|
||||
</pre>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={handleCopy}
|
||||
className="absolute top-2 right-2 h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800"
|
||||
title="复制到剪贴板"
|
||||
>
|
||||
{copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 手动复制模式：当自动复制失败时展示可全选的文本域 */}
|
||||
{showManualInput && (
|
||||
<div className="rounded-lg bg-amber-950/30 border border-amber-800/50 p-4">
|
||||
<p className="text-xs text-amber-400 mb-2">
|
||||
⚠️ 自动复制失败。请点击下方输入框全选 (Ctrl+A) 后复制 (Ctrl+C)：
|
||||
</p>
|
||||
<textarea
|
||||
readOnly
|
||||
value={installCommand}
|
||||
className="w-full h-24 bg-slate-950 border border-amber-800/30 text-emerald-400 font-mono text-xs p-3 rounded resize-none focus:outline-none focus:border-amber-600"
|
||||
onClick={(e) => (e.target as HTMLTextAreaElement).select()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-start gap-2 text-xs text-slate-500">
|
||||
<Terminal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
|
||||
<span>
|
||||
服务器地址已自动检测为当前访问地址（{serverUrl}）。Agent 安装成功后将自动连接并开始上报指标。
|
||||
</span>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* 手动安装 */}
|
||||
<TabsContent value="manual" className="mt-4 space-y-4">
|
||||
<div className="max-h-[420px] overflow-y-auto space-y-3 pr-1">
|
||||
{manualSteps.map((step) => (
|
||||
<div key={step.title} className="rounded-lg bg-slate-950 border border-slate-800 overflow-hidden">
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 bg-slate-800/50">
|
||||
<step.icon className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-sm font-medium text-slate-200">{step.title}</span>
|
||||
</div>
|
||||
<div className="p-3 space-y-1">
|
||||
{step.commands.map((cmd, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2">
|
||||
<span className="text-slate-600 font-mono text-xs select-none mt-0.5">$</span>
|
||||
<code className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all flex-1">
|
||||
{cmd}
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
完成上述步骤后，Agent 将作为 systemd 服务运行并自动上报指标。
|
||||
</p>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default AgentWizard;
|
||||
Reference in new issue
Block a user