feat(FN-1228): enhance MeshTopology with peer awareness and status legend
- Export MeshTopologyProps interface for external use - Add peer awareness lines between remote nodes for mesh visualization - Implement dynamic SVG sizing based on number of remote nodes - Add status color legend showing online/offline/connecting/error states - Improve CSS variable handling with fallback values - Use transform-based positioning for cleaner SVG structure
This commit is contained in:
gsxdsm
266
packages/dashboard/app/components/ConnectNodeModal.tsx
Normal file
266
packages/dashboard/app/components/ConnectNodeModal.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import type { NodeCreateInput, NodeInfo } from "../api";
|
||||
|
||||
export interface ConnectNodeInput {
|
||||
name: string;
|
||||
url: string;
|
||||
apiKey?: string;
|
||||
maxConcurrent: number;
|
||||
}
|
||||
|
||||
interface ConnectNodeModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onConnected: (node: NodeInfo) => void;
|
||||
addToast: (message: string, type?: "success" | "error") => void;
|
||||
/** Optional function to register the node (defaults to using fetch) */
|
||||
onSubmit?: (input: ConnectNodeInput) => Promise<NodeInfo>;
|
||||
}
|
||||
|
||||
interface FormErrors {
|
||||
name?: string;
|
||||
host?: string;
|
||||
port?: string;
|
||||
maxConcurrent?: string;
|
||||
}
|
||||
|
||||
const DEFAULT_PORT = 3001;
|
||||
const MAX_CONCURRENT_MIN = 1;
|
||||
const MAX_CONCURRENT_MAX = 10;
|
||||
|
||||
function validateInput(input: { name: string; host: string; port: string; maxConcurrent: number }): FormErrors {
|
||||
const errors: FormErrors = {};
|
||||
|
||||
if (!input.name.trim()) {
|
||||
errors.name = "Node name is required";
|
||||
}
|
||||
|
||||
if (!input.host.trim()) {
|
||||
errors.host = "Host / IP address is required";
|
||||
}
|
||||
|
||||
const portNum = Number(input.port);
|
||||
if (input.port && (isNaN(portNum) || portNum < 1 || portNum > 65535)) {
|
||||
errors.port = "Port must be between 1 and 65535";
|
||||
}
|
||||
|
||||
if (!Number.isFinite(input.maxConcurrent) || input.maxConcurrent < MAX_CONCURRENT_MIN || input.maxConcurrent > MAX_CONCURRENT_MAX) {
|
||||
errors.maxConcurrent = `Concurrency must be between ${MAX_CONCURRENT_MIN} and ${MAX_CONCURRENT_MAX}`;
|
||||
}
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
function buildUrl(host: string, port: string): string {
|
||||
const cleanHost = host.trim().replace(/^https?:\/\//, "").split("/")[0];
|
||||
const portNum = Number(port) || DEFAULT_PORT;
|
||||
return `http://${cleanHost}:${portNum}`;
|
||||
}
|
||||
|
||||
export function ConnectNodeModal({ open, onClose, onConnected, addToast, onSubmit }: ConnectNodeModalProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [host, setHost] = useState("");
|
||||
const [port, setPort] = useState(String(DEFAULT_PORT));
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const [maxConcurrent, setMaxConcurrent] = useState(2);
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const resetForm = useCallback(() => {
|
||||
setName("");
|
||||
setHost("");
|
||||
setPort(String(DEFAULT_PORT));
|
||||
setApiKey("");
|
||||
setMaxConcurrent(2);
|
||||
setErrors({});
|
||||
setIsSubmitting(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
resetForm();
|
||||
}
|
||||
}, [open, resetForm]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [open, onClose]);
|
||||
|
||||
const constructedUrl = useMemo(() => {
|
||||
if (!host.trim()) return "";
|
||||
return buildUrl(host, port);
|
||||
}, [host, port]);
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
if (isSubmitting) return;
|
||||
|
||||
const validationErrors = validateInput({ name, host, port, maxConcurrent });
|
||||
setErrors(validationErrors);
|
||||
|
||||
if (Object.keys(validationErrors).length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
const input: ConnectNodeInput = {
|
||||
name: name.trim(),
|
||||
url: constructedUrl,
|
||||
apiKey: apiKey.trim() || undefined,
|
||||
maxConcurrent,
|
||||
};
|
||||
|
||||
try {
|
||||
let node: NodeInfo;
|
||||
|
||||
if (onSubmit) {
|
||||
node = await onSubmit(input);
|
||||
} else {
|
||||
// Default: call the API directly
|
||||
const response = await fetch("/api/nodes", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: input.name,
|
||||
type: "remote",
|
||||
url: input.url,
|
||||
apiKey: input.apiKey,
|
||||
maxConcurrent: input.maxConcurrent,
|
||||
} satisfies NodeCreateInput),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ error: "Failed to connect" }));
|
||||
throw new Error(error.error || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
node = await response.json() as NodeInfo;
|
||||
}
|
||||
|
||||
addToast(`Connected to "${node.name}"`, "success");
|
||||
onConnected(node);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : "Failed to connect to node";
|
||||
addToast(message, "error");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [addToast, apiKey, constructedUrl, host, isSubmitting, maxConcurrent, name, onClose, onConnected, onSubmit, port]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-overlay open" onClick={onClose}>
|
||||
<div
|
||||
className="modal modal-md connect-node-modal"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Connect to Node"
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h3>Connect to Node</h3>
|
||||
<button className="modal-close" onClick={onClose} disabled={isSubmitting} aria-label="Close connect node modal">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body connect-node-form">
|
||||
<label className="connect-node-field">
|
||||
<span>Node Name</span>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="Build Server"
|
||||
disabled={isSubmitting}
|
||||
aria-invalid={Boolean(errors.name)}
|
||||
/>
|
||||
{errors.name && <span className="form-error">{errors.name}</span>}
|
||||
</label>
|
||||
|
||||
<label className="connect-node-field">
|
||||
<span>Host / IP Address</span>
|
||||
<input
|
||||
type="text"
|
||||
value={host}
|
||||
onChange={(event) => setHost(event.target.value)}
|
||||
placeholder="192.168.1.100 or my-server.local"
|
||||
disabled={isSubmitting}
|
||||
aria-invalid={Boolean(errors.host)}
|
||||
/>
|
||||
{errors.host && <span className="form-error">{errors.host}</span>}
|
||||
</label>
|
||||
|
||||
<label className="connect-node-field">
|
||||
<span>Port</span>
|
||||
<input
|
||||
type="number"
|
||||
value={port}
|
||||
onChange={(event) => setPort(event.target.value)}
|
||||
min={1}
|
||||
max={65535}
|
||||
disabled={isSubmitting}
|
||||
aria-invalid={Boolean(errors.port)}
|
||||
/>
|
||||
{errors.port && <span className="form-error">{errors.port}</span>}
|
||||
</label>
|
||||
|
||||
{constructedUrl && (
|
||||
<div className="connect-node-url-preview">
|
||||
<span className="connect-node-url-preview-label">URL:</span>
|
||||
<code>{constructedUrl}</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label className="connect-node-field">
|
||||
<span>Auth Key</span>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKey}
|
||||
onChange={(event) => setApiKey(event.target.value)}
|
||||
placeholder="Optional"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="connect-node-field">
|
||||
<span>Max Concurrent</span>
|
||||
<input
|
||||
type="number"
|
||||
value={maxConcurrent}
|
||||
onChange={(event) => setMaxConcurrent(Number(event.target.value))}
|
||||
min={MAX_CONCURRENT_MIN}
|
||||
max={MAX_CONCURRENT_MAX}
|
||||
disabled={isSubmitting}
|
||||
aria-invalid={Boolean(errors.maxConcurrent)}
|
||||
/>
|
||||
{errors.maxConcurrent && <span className="form-error">{errors.maxConcurrent}</span>}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="modal-actions connect-node-actions">
|
||||
<button className="btn btn-sm" onClick={onClose} disabled={isSubmitting}>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="btn btn-primary btn-sm" onClick={handleSubmit} disabled={isSubmitting || !host.trim()}>
|
||||
{isSubmitting ? "Connecting..." : "Connect"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user