c3931e7f36
Strips example/hint placeholder attributes across all components for a cleaner, less cluttered form UX.
672 lines
31 KiB
TypeScript
672 lines
31 KiB
TypeScript
/**
|
|
* @license
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
import { LabTemplate, Device, TopologyLink, User } from '../types';
|
|
import TopologyPanel from './TopologyPanel';
|
|
import {
|
|
Server, Plus, Edit3, Trash, User as UserIcon, MapPin,
|
|
Layers, ChevronRight, X, Check, Pencil, Terminal, Lock, Globe,
|
|
} from 'lucide-react';
|
|
|
|
interface LabTemplatesProps {
|
|
labs: LabTemplate[];
|
|
devices: Device[];
|
|
currentUser: User;
|
|
onAddLab: (lab: Omit<LabTemplate, 'id' | 'ownerId'>) => void;
|
|
onUpdateLab: (lab: LabTemplate) => void;
|
|
onDeleteLab: (id: string) => void;
|
|
onOpenDeviceDetails: (device: Device) => void;
|
|
}
|
|
|
|
export default function LabTemplates({
|
|
labs,
|
|
devices,
|
|
currentUser,
|
|
onAddLab,
|
|
onUpdateLab,
|
|
onDeleteLab,
|
|
onOpenDeviceDetails
|
|
}: LabTemplatesProps) {
|
|
const [selectedLab, setSelectedLab] = useState<LabTemplate | null>(labs[0] || null);
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [formMode, setFormMode] = useState<'add' | 'edit'>('add');
|
|
|
|
// Topology custom links helper state
|
|
const [tempLinks, setTempLinks] = useState<TopologyLink[]>([]);
|
|
const [linkFrom, setLinkFrom] = useState('');
|
|
const [linkTo, setLinkTo] = useState('');
|
|
const [linkType, setLinkType] = useState('Trunk Uplink');
|
|
const [editingLinkIdx, setEditingLinkIdx] = useState<number | null>(null);
|
|
const [editingLinkLabel, setEditingLinkLabel] = useState('');
|
|
|
|
const [formData, setFormData] = useState<{
|
|
id?: string;
|
|
name: string;
|
|
description: string;
|
|
contactPerson: string;
|
|
location: string;
|
|
deviceIds: string[];
|
|
semaphoreSetupTemplateId: string;
|
|
semaphoreTeardownTemplateId: string;
|
|
scope: 'global' | 'personal';
|
|
}>({
|
|
name: '',
|
|
description: '',
|
|
contactPerson: '',
|
|
location: '',
|
|
deviceIds: [],
|
|
semaphoreSetupTemplateId: '',
|
|
semaphoreTeardownTemplateId: '',
|
|
scope: 'global',
|
|
});
|
|
|
|
// Calculate filtered devices associated with selected lab
|
|
const labDevices = selectedLab
|
|
? devices.filter(d => selectedLab.deviceIds.includes(d.id))
|
|
: [];
|
|
|
|
const handleOpenAdd = () => {
|
|
setFormMode('add');
|
|
setTempLinks([]);
|
|
setFormData({
|
|
name: '',
|
|
description: '',
|
|
contactPerson: '',
|
|
location: '',
|
|
deviceIds: [],
|
|
semaphoreSetupTemplateId: '',
|
|
semaphoreTeardownTemplateId: '',
|
|
scope: 'global',
|
|
});
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const handleOpenEdit = (lab: LabTemplate) => {
|
|
setFormMode('edit');
|
|
setTempLinks([...lab.topology]);
|
|
setFormData({
|
|
id: lab.id,
|
|
name: lab.name,
|
|
description: lab.description,
|
|
contactPerson: lab.contactPerson,
|
|
location: lab.location,
|
|
deviceIds: [...lab.deviceIds],
|
|
semaphoreSetupTemplateId: lab.semaphoreSetupTemplateId || '',
|
|
semaphoreTeardownTemplateId: lab.semaphoreTeardownTemplateId || '',
|
|
scope: lab.scope ?? 'global',
|
|
});
|
|
setIsEditing(true);
|
|
};
|
|
|
|
// Toggle device association in form
|
|
const handleToggleDevice = (devId: string) => {
|
|
const isChosen = formData.deviceIds.includes(devId);
|
|
let newDevices = [];
|
|
if (isChosen) {
|
|
newDevices = formData.deviceIds.filter(id => id !== devId);
|
|
// Clean up invalid topology links referencing deleted devices
|
|
setTempLinks(tempLinks.filter(l => l.fromDevice !== devId && l.toDevice !== devId));
|
|
} else {
|
|
newDevices = [...formData.deviceIds, devId];
|
|
}
|
|
setFormData({ ...formData, deviceIds: newDevices });
|
|
};
|
|
|
|
// Add path link to list
|
|
const handleAddLink = () => {
|
|
if (!linkFrom || !linkTo || linkFrom === linkTo) return;
|
|
setTempLinks([...tempLinks, { fromDevice: linkFrom, toDevice: linkTo, type: linkType }]);
|
|
setLinkFrom('');
|
|
setLinkTo('');
|
|
};
|
|
|
|
const handleRemoveLink = (idx: number) => {
|
|
setTempLinks(tempLinks.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
const handleSave = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!formData.name.trim() || formData.deviceIds.length === 0) {
|
|
alert('Please provide a descriptive template name and associate at least one hardware device node.');
|
|
return;
|
|
}
|
|
|
|
const savedLabData = {
|
|
name: formData.name,
|
|
description: formData.description,
|
|
contactPerson: formData.contactPerson,
|
|
location: formData.location,
|
|
deviceIds: formData.deviceIds,
|
|
topology: tempLinks,
|
|
semaphoreSetupTemplateId: formData.semaphoreSetupTemplateId,
|
|
semaphoreTeardownTemplateId: formData.semaphoreTeardownTemplateId,
|
|
scope: formData.scope,
|
|
};
|
|
|
|
if (formMode === 'add') {
|
|
onAddLab(savedLabData);
|
|
} else if (formMode === 'edit' && formData.id) {
|
|
const existing = labs.find(l => l.id === formData.id);
|
|
onUpdateLab({
|
|
...savedLabData,
|
|
id: formData.id,
|
|
ownerId: existing?.ownerId ?? '',
|
|
});
|
|
}
|
|
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const isAdmin = currentUser.role?.toLowerCase() === 'admin';
|
|
const canEdit = (lab: LabTemplate) => isAdmin || lab.ownerId === currentUser.id || lab.ownerId === '';
|
|
|
|
const myPersonalLabs = labs.filter(l => l.scope === 'personal' && l.ownerId === currentUser.id);
|
|
const globalLabs = labs.filter(l => l.scope === 'global');
|
|
const othersPersonal = isAdmin ? labs.filter(l => l.scope === 'personal' && l.ownerId !== currentUser.id) : [];
|
|
|
|
const renderLabCard = (lab: LabTemplate) => {
|
|
const isSelected = selectedLab?.id === lab.id;
|
|
const editable = canEdit(lab);
|
|
return (
|
|
<div
|
|
key={lab.id}
|
|
onClick={() => setSelectedLab(lab)}
|
|
className={`p-4 rounded-xl border transition-all cursor-pointer relative ${
|
|
isSelected
|
|
? 'bg-slate-900 border-emerald-500'
|
|
: 'bg-slate-900/40 border-slate-800 hover:border-slate-700 hover:bg-slate-900/60'
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<h3 className="font-bold text-sm text-white">{lab.name}</h3>
|
|
<div className="flex gap-1.5" onClick={e => e.stopPropagation()}>
|
|
{editable && (
|
|
<>
|
|
<button
|
|
onClick={() => handleOpenEdit(lab)}
|
|
className="text-slate-400 hover:text-indigo-400 p-0.5"
|
|
title="Edit template configuration"
|
|
>
|
|
<Edit3 className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
if (confirm(`Are you sure you want to delete lab template "${lab.name}"? Active/completed scheduling logs are retained in the system.`)) {
|
|
onDeleteLab(lab.id);
|
|
}
|
|
}}
|
|
className="text-slate-400 hover:text-rose-400 p-0.5"
|
|
title="Delete template"
|
|
>
|
|
<Trash className="w-3.5 h-3.5" />
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-400 mt-1 line-clamp-2 leading-relaxed">
|
|
{lab.description}
|
|
</p>
|
|
|
|
<div className="mt-3 pt-3 border-t border-slate-800/80 grid grid-cols-2 gap-1 text-[10px] text-slate-350">
|
|
<div className="flex items-center gap-1">
|
|
<UserIcon className="w-3.5 h-3.5 text-slate-500 shrink-0" />
|
|
<span className="truncate">{lab.contactPerson}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<MapPin className="w-3.5 h-3.5 text-slate-500 shrink-0" />
|
|
<span className="truncate">{lab.location}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-2.5 flex items-center justify-between">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-[10px] font-mono text-emerald-400 bg-emerald-950/50 px-2 py-0.5 rounded border border-emerald-900/50">
|
|
{lab.deviceIds.length} connected devices
|
|
</span>
|
|
{lab.scope === 'personal' ? (
|
|
<span className="text-[10px] font-mono text-indigo-400 bg-indigo-950/50 px-2 py-0.5 rounded border border-indigo-900/50 flex items-center gap-1">
|
|
<Lock className="w-2.5 h-2.5" /> Personal
|
|
</span>
|
|
) : (
|
|
<span className="text-[10px] font-mono text-slate-400 bg-slate-950/50 px-2 py-0.5 rounded border border-slate-800/50 flex items-center gap-1">
|
|
<Globe className="w-2.5 h-2.5" /> Global
|
|
</span>
|
|
)}
|
|
</div>
|
|
<ChevronRight className={`w-4 h-4 text-slate-500 transition-transform ${isSelected ? 'translate-x-1 text-emerald-400' : ''}`} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6" id="lab-templates-container">
|
|
|
|
{/* LEFT COLUMN: Lab List */}
|
|
<div className="lg:col-span-4 bg-[#1E293B] border border-slate-800 rounded-xl p-5 flex flex-col h-full font-sans" id="labs-list-section">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div>
|
|
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
|
<Layers className="w-5 h-5 text-emerald-400" />
|
|
Topology
|
|
</h2>
|
|
<p className="text-xs text-slate-400">Predefined architectural scenarios & wiring profiles.</p>
|
|
</div>
|
|
<button
|
|
onClick={handleOpenAdd}
|
|
className="p-1.5 bg-emerald-600 hover:bg-emerald-500 text-slate-950 font-bold rounded-lg text-xs flex items-center gap-1.5 transition-colors"
|
|
title="Create new lab template"
|
|
>
|
|
<Plus className="w-4 h-4 text-slate-950" />
|
|
New
|
|
</button>
|
|
</div>
|
|
|
|
{/* Labs templates list — sectioned */}
|
|
<div className="space-y-3 flex-1 overflow-y-auto max-h-[550px] pr-1">
|
|
{myPersonalLabs.length > 0 && (
|
|
<>
|
|
<p className="text-[10px] font-mono uppercase tracking-widest text-indigo-400 px-1">My Topologies</p>
|
|
{myPersonalLabs.map(renderLabCard)}
|
|
</>
|
|
)}
|
|
{globalLabs.length > 0 && (
|
|
<>
|
|
<p className="text-[10px] font-mono uppercase tracking-widest text-slate-500 px-1 mt-2">Global Topologies</p>
|
|
{globalLabs.map(renderLabCard)}
|
|
</>
|
|
)}
|
|
{othersPersonal.length > 0 && (
|
|
<>
|
|
<p className="text-[10px] font-mono uppercase tracking-widest text-slate-500 px-1 mt-2">Others' Personal</p>
|
|
{othersPersonal.map(renderLabCard)}
|
|
</>
|
|
)}
|
|
{labs.length === 0 && (
|
|
<p className="text-xs text-slate-500 text-center py-8">No topology templates yet.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT COLUMN: Active Lab Details, Devices details, and TOPOLOGY MAP */}
|
|
<div className="lg:col-span-8 space-y-6" id="labs-view-section">
|
|
{selectedLab ? (
|
|
<>
|
|
{/* Template Card Meta */}
|
|
<div className="bg-[#1E293B] border border-slate-800 rounded-xl p-5 shadow-sm font-sans">
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mb-4">
|
|
<div>
|
|
<span className="text-[9px] font-mono uppercase tracking-widest text-slate-400 bg-slate-900 border border-slate-800 px-2.5 py-0.5 rounded">
|
|
TEMPLATE ID: {selectedLab.id.toUpperCase()}
|
|
</span>
|
|
<h3 className="text-lg font-bold text-white mt-1.5">{selectedLab.name}</h3>
|
|
</div>
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="bg-slate-900 p-2 rounded-lg border border-slate-805 text-[10px] flex items-center gap-1">
|
|
<UserIcon className="w-3.5 h-3.5 text-slate-400" />
|
|
<div>
|
|
<p className="text-slate-400 leading-none">Primary Contact</p>
|
|
<p className="text-white font-semibold mt-0.5">{selectedLab.contactPerson}</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-900 p-2 rounded-lg border border-slate-805 text-[10px] flex items-center gap-1">
|
|
<MapPin className="w-3.5 h-3.5 text-slate-400" />
|
|
<div>
|
|
<p className="text-slate-400 leading-none">Testing Location</p>
|
|
<p className="text-white font-semibold mt-0.5">{selectedLab.location}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-300 leading-relaxed bg-slate-900/30 p-3 rounded-lg border border-slate-800">
|
|
{selectedLab.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Interactive Visual Topology */}
|
|
<TopologyPanel
|
|
devices={labDevices}
|
|
links={selectedLab.topology}
|
|
onSelectDevice={onOpenDeviceDetails}
|
|
/>
|
|
|
|
{/* Sub-Devices components list */}
|
|
<div className="bg-[#1E293B] border border-slate-800 rounded-xl p-5 shadow-sm font-sans">
|
|
<h4 className="text-xs font-bold text-slate-300 uppercase tracking-widest font-mono mb-3">Associated Physical Hardware Map</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{labDevices.map((device) => (
|
|
<div
|
|
key={device.id}
|
|
onClick={() => onOpenDeviceDetails(device)}
|
|
className="p-3 bg-slate-900/40 border border-slate-800 hover:border-slate-700 hover:bg-slate-900 transition-colors rounded-lg cursor-pointer flex justify-between items-center"
|
|
>
|
|
<div className="flex items-center gap-2.5 font-sans">
|
|
<div className={`p-1.5 rounded text-indigo-400 bg-indigo-950/30 border border-indigo-900/50`}>
|
|
<Server className="w-4 h-4" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-mono font-bold text-white leading-none">{device.hostname}</p>
|
|
<p className="text-[9px] font-mono text-emerald-400 mt-1">{device.ip}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 font-mono">
|
|
<span className={`w-2 h-2 rounded-full ${device.status === 'online' ? 'bg-emerald-500' : 'bg-rose-500'}`} />
|
|
<span className="text-[10px] text-slate-400 capitalize">{device.status}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="bg-slate-900 border border-slate-800 rounded-xl p-16 text-center text-slate-500 text-xs font-sans">
|
|
Select a lab scenario template from the left directory column to inspect active port topology connections.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* FORM MODAL: Create or Edit Lab Template */}
|
|
{isEditing && (
|
|
<div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
|
<div className="bg-[#1E293B] border border-slate-700 w-full max-w-2xl rounded-xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-150">
|
|
|
|
<div className="bg-slate-900 px-5 py-4 border-b border-slate-700 flex items-center justify-between font-sans overflow-x-auto">
|
|
<h3 className="text-sm font-bold text-white flex items-center gap-2">
|
|
<Layers className="w-5 h-5 text-emerald-400" />
|
|
{formMode === 'add' ? 'Design New Lab Template' : 'Modify Lab Template Configuration'}
|
|
</h3>
|
|
<button
|
|
onClick={() => setIsEditing(false)}
|
|
className="text-slate-400 hover:text-white"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSave} className="p-5 space-y-4 font-sans text-xs max-h-[85vh] overflow-y-auto">
|
|
{/* Name & Location */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-slate-300 font-semibold mb-1">Topology Name</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-slate-300 font-semibold mb-1">Physical Location</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.location}
|
|
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
|
|
className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description & Contact person */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-slate-300 font-semibold mb-1">Caretaker / Owner</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.contactPerson}
|
|
onChange={(e) => setFormData({ ...formData, contactPerson: e.target.value })}
|
|
className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-slate-300 font-semibold mb-1">Description</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 focus:outline-none focus:border-emerald-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scope toggle */}
|
|
<div className="border-t border-slate-800 pt-3">
|
|
<label className="block text-slate-300 font-semibold mb-1.5">Visibility</label>
|
|
<div className="grid grid-cols-2 gap-1.5">
|
|
<button
|
|
type="button"
|
|
onClick={() => setFormData({ ...formData, scope: 'global' })}
|
|
className={`py-2 rounded-lg text-xs font-semibold border transition-all flex items-center justify-center gap-1.5 ${
|
|
formData.scope === 'global'
|
|
? 'bg-slate-800 border-slate-500 text-slate-200'
|
|
: 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white'
|
|
}`}
|
|
>
|
|
<Globe className="w-3.5 h-3.5" /> Global — visible to all
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFormData({ ...formData, scope: 'personal' })}
|
|
className={`py-2 rounded-lg text-xs font-semibold border transition-all flex items-center justify-center gap-1.5 ${
|
|
formData.scope === 'personal'
|
|
? 'bg-indigo-900/30 border-indigo-500 text-indigo-300'
|
|
: 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white'
|
|
}`}
|
|
>
|
|
<Lock className="w-3.5 h-3.5" /> Personal — only you
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hardware checklist */}
|
|
<div className="border-t border-slate-800 pt-3">
|
|
<label className="block text-slate-300 font-bold mb-1.5">1. Assign Dedicated Hardware Nodes</label>
|
|
<p className="text-[10px] text-slate-400 mb-2">Select the devices from the active hardware inventory associated with this testing group.</p>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2 bg-slate-950/60 p-3 rounded-lg border border-slate-855">
|
|
{devices.map((dev) => {
|
|
const isChecked = formData.deviceIds.includes(dev.id);
|
|
return (
|
|
<button
|
|
type="button"
|
|
key={dev.id}
|
|
onClick={() => handleToggleDevice(dev.id)}
|
|
className={`p-2 rounded text-left border flex items-center justify-between transition-colors ${
|
|
isChecked
|
|
? 'bg-emerald-900/20 border-emerald-500 text-slate-100'
|
|
: 'bg-slate-900 border-slate-800 hover:border-slate-700 text-slate-300'
|
|
}`}
|
|
>
|
|
<div className="truncate pr-1">
|
|
<p className="font-bold text-[10px] font-mono leading-none">{dev.hostname}</p>
|
|
<p className="text-[9px] font-mono text-slate-400 mt-1">{dev.ip}</p>
|
|
</div>
|
|
{isChecked && <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" />}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Physical/Logical topology builder link creator */}
|
|
<div className="border-t border-slate-800 pt-3">
|
|
<label className="block text-slate-300 font-bold mb-1.5">2. Define Ports & Link Connections</label>
|
|
<p className="text-[10px] text-slate-400 mb-2">Model logical and physical patch cabling among the selected devices (e.g. Trunk aggregation profiles, LACP uplinks).</p>
|
|
|
|
{/* Connection Inputs */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-4 gap-2.5 p-2 bg-slate-1000 border border-slate-800 rounded-lg items-end mb-3">
|
|
<div>
|
|
<label className="block text-[10px] text-slate-400 mb-1">Source Node</label>
|
|
<select
|
|
value={linkFrom}
|
|
onChange={(e) => setLinkFrom(e.target.value)}
|
|
className="w-full bg-slate-950 text-slate-250 border border-slate-805 rounded p-1 font-mono text-[11px]"
|
|
>
|
|
<option value="">-- Choose --</option>
|
|
{formData.deviceIds.map((id) => {
|
|
const d = devices.find(x => x.id === id);
|
|
return d ? <option key={id} value={id}>{d.hostname}</option> : null;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] text-slate-400 mb-1">Target Node</label>
|
|
<select
|
|
value={linkTo}
|
|
onChange={(e) => setLinkTo(e.target.value)}
|
|
className="w-full bg-slate-950 text-slate-250 border border-slate-805 rounded p-1 font-mono text-[11px]"
|
|
>
|
|
<option value="">-- Choose --</option>
|
|
{formData.deviceIds.map((id) => {
|
|
const d = devices.find(x => x.id === id);
|
|
return d ? <option key={id} value={id}>{d.hostname}</option> : null;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] text-slate-400 mb-1">Link Identifier Description (Label)</label>
|
|
<input
|
|
type="text"
|
|
className="w-full bg-slate-950 text-slate-250 border border-slate-805 p-1 rounded font-mono text-[11px]"
|
|
value={linkType}
|
|
onChange={(e) => setLinkType(e.target.value)}
|
|
/>
|
|
</div>
|
|
<button
|
|
id="add-link-btn"
|
|
type="button"
|
|
onClick={handleAddLink}
|
|
className="w-full py-1.5 bg-indigo-600 hover:bg-indigo-500 rounded text-xs font-bold text-white transition-colors"
|
|
>
|
|
Add Link
|
|
</button>
|
|
</div>
|
|
|
|
{/* Listing added links list */}
|
|
{tempLinks.length > 0 ? (
|
|
<div className="space-y-1 max-h-[140px] overflow-y-auto pr-1">
|
|
{tempLinks.map((link, idx) => {
|
|
const fromDev = devices.find(d => d.id === link.fromDevice)?.hostname || link.fromDevice;
|
|
const toDev = devices.find(d => d.id === link.toDevice)?.hostname || link.toDevice;
|
|
const isEditingThis = editingLinkIdx === idx;
|
|
return (
|
|
<div key={idx} className="flex items-center gap-2 bg-slate-950 px-3 py-1.5 rounded border border-slate-855 font-mono text-[10px] hover:border-slate-700">
|
|
<span className="text-slate-300 shrink-0"><strong>{fromDev}</strong> ────</span>
|
|
{isEditingThis ? (
|
|
<input
|
|
autoFocus
|
|
value={editingLinkLabel}
|
|
onChange={(e) => setEditingLinkLabel(e.target.value)}
|
|
onBlur={() => {
|
|
if (editingLinkLabel.trim()) {
|
|
setTempLinks(tempLinks.map((l, i) => i === idx ? { ...l, type: editingLinkLabel.trim() } : l));
|
|
}
|
|
setEditingLinkIdx(null);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
if (editingLinkLabel.trim()) {
|
|
setTempLinks(tempLinks.map((l, i) => i === idx ? { ...l, type: editingLinkLabel.trim() } : l));
|
|
}
|
|
setEditingLinkIdx(null);
|
|
}
|
|
if (e.key === 'Escape') setEditingLinkIdx(null);
|
|
}}
|
|
className="flex-1 min-w-0 bg-slate-800 text-slate-100 border border-indigo-500 rounded px-1.5 py-0.5 focus:outline-none"
|
|
/>
|
|
) : (
|
|
<span className="flex-1 min-w-0 text-indigo-300 truncate">{link.type}</span>
|
|
)}
|
|
<span className="text-slate-300 shrink-0">──── <strong>{toDev}</strong></span>
|
|
<div className="flex gap-1.5 shrink-0 ml-auto font-sans">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setEditingLinkIdx(idx); setEditingLinkLabel(link.type); }}
|
|
className="text-slate-400 hover:text-indigo-400 transition-colors"
|
|
title="Edit label"
|
|
>
|
|
<Pencil className="w-3 h-3" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleRemoveLink(idx)}
|
|
className="text-rose-500 hover:text-rose-400 font-bold"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-[10px] text-slate-500 italic">No interface connections formulated yet.</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Ansible Semaphore Automation */}
|
|
<div className="border-t border-slate-800 pt-3">
|
|
<label className="block text-slate-300 font-bold mb-1.5 flex items-center gap-1.5">
|
|
<Terminal className="w-3.5 h-3.5 text-orange-400" />
|
|
3. Ansible Automation (optional)
|
|
</label>
|
|
<p className="text-[10px] text-slate-400 mb-2">Semaphore task template IDs to trigger at booking start and end. Leave empty to skip automation for this lab.</p>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-[10px] text-slate-400 mb-1">Setup Template ID</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
value={formData.semaphoreSetupTemplateId}
|
|
onChange={(e) => setFormData({ ...formData, semaphoreSetupTemplateId: e.target.value })}
|
|
className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 font-mono text-xs focus:outline-none focus:border-orange-500/60"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] text-slate-400 mb-1">Teardown Template ID</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
value={formData.semaphoreTeardownTemplateId}
|
|
onChange={(e) => setFormData({ ...formData, semaphoreTeardownTemplateId: e.target.value })}
|
|
className="w-full bg-slate-950 text-slate-100 border border-slate-800 rounded p-2 font-mono text-xs focus:outline-none focus:border-orange-500/60"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form submit handlers */}
|
|
<div className="pt-3 border-t border-slate-800 flex justify-end gap-2.5">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsEditing(false)}
|
|
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded font-semibold text-xs animate-none"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-slate-950 font-bold rounded text-xs animate-none"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|