Tola Leng
101 lines
3.7 KiB
TypeScript
101 lines
3.7 KiB
TypeScript
|
|
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Copy, Download } from "lucide-react";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { copyToClipboard } from "@/utils/copyUtils";
|
|
|
|
interface OneClickInstallTabProps {
|
|
serverToken: string;
|
|
currentPocketBaseUrl: string;
|
|
formData: {
|
|
serverName: string;
|
|
osType: string;
|
|
checkInterval: string;
|
|
retryAttempt: string;
|
|
};
|
|
serverId: string;
|
|
onDialogClose: () => void;
|
|
}
|
|
|
|
export const OneClickInstallTab: React.FC<OneClickInstallTabProps> = ({
|
|
serverToken,
|
|
currentPocketBaseUrl,
|
|
formData,
|
|
serverId,
|
|
onDialogClose,
|
|
}) => {
|
|
const getOneClickInstallCommand = () => {
|
|
const scriptUrl = "https://raw.githubusercontent.com/operacle/checkcle/refs/heads/main/scripts/server-agent.sh";
|
|
|
|
return `curl -L -o server-agent.sh "${scriptUrl}"
|
|
chmod +x server-agent.sh
|
|
SERVER_TOKEN="${serverToken}" \\
|
|
POCKETBASE_URL="${currentPocketBaseUrl}" \\
|
|
SERVER_NAME="${formData.serverName}" \\
|
|
AGENT_ID="${serverId}" \\
|
|
OS_TYPE="${formData.osType}" \\
|
|
CHECK_INTERVAL="${formData.checkInterval}" \\
|
|
RETRY_ATTEMPTS="${formData.retryAttempt}" \\
|
|
sudo -E bash ./server-agent.sh`;
|
|
};
|
|
|
|
const handleCopyCommand = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
console.log('Copy button clicked'); // Debug log
|
|
const command = getOneClickInstallCommand();
|
|
console.log('Copying command:', command); // Debug log
|
|
await copyToClipboard(command);
|
|
};
|
|
|
|
return (
|
|
<Card className="border-green-500/20 bg-green-0/50 dark:bg-green-950/20">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-green-700 dark:text-green-400">
|
|
<Download className="h-5 w-5" />
|
|
One-Click Install
|
|
</CardTitle>
|
|
<CardDescription className="text-green-600 dark:text-green-300">
|
|
Copy and paste this single command to install the monitoring agent instantly
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label className="text-green-700 dark:text-green-400">Quick Install Command</Label>
|
|
<div className="relative">
|
|
<pre className="bg-black-50 dark:bg-green-100/950 border border-green-200 dark:border-green-800 p-4 rounded-md text-sm overflow-x-auto whitespace-pre-wrap break-all text-green-800 dark:text-green-200">
|
|
<code>{getOneClickInstallCommand()}</code>
|
|
</pre>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="absolute top-2 right-2 bg-green-50 dark:bg-green-950/50 border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900 text-green-700 dark:text-green-400"
|
|
onClick={handleCopyCommand}
|
|
>
|
|
<Copy className="h-4 w-4 mr-1" />
|
|
Copy
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/50 border border-green-200 dark:border-green-800 p-3 rounded-md">
|
|
<p className="font-medium mb-1">Simply run this command on your server:</p>
|
|
<ol className="list-decimal list-inside space-y-1 text-xs">
|
|
<li>SSH into your target server</li>
|
|
<li>Paste and run the command above</li>
|
|
<li>The agent will be installed and started automatically</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div className="flex justify-end pt-4">
|
|
<Button onClick={onDialogClose}>
|
|
Done
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}; |