Initial commit
This commit is contained in:
Brückner
515
src/components/LabTemplates.tsx
Normal file
515
src/components/LabTemplates.tsx
Normal file
@ -0,0 +1,515 @@
|
||||
/**
|
||||
* @license
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { LabTemplate, Device, TopologyLink } from '../types';
|
||||
import TopologyPanel from './TopologyPanel';
|
||||
import {
|
||||
Server, Plus, Edit3, Trash, User, MapPin,
|
||||
Layers, ChevronRight, Save, X, Check
|
||||
} from 'lucide-react';
|
||||
|
||||
interface LabTemplatesProps {
|
||||
labs: LabTemplate[];
|
||||
devices: Device[];
|
||||
onAddLab: (lab: Omit<LabTemplate, 'id'>) => void;
|
||||
onUpdateLab: (lab: LabTemplate) => void;
|
||||
onDeleteLab: (id: string) => void;
|
||||
onOpenDeviceDetails: (device: Device) => void;
|
||||
}
|
||||
|
||||
export default function LabTemplates({
|
||||
labs,
|
||||
devices,
|
||||
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 [formData, setFormData] = useState<{
|
||||
id?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
contactPerson: string;
|
||||
location: string;
|
||||
deviceIds: string[];
|
||||
}>({
|
||||
name: '',
|
||||
description: '',
|
||||
contactPerson: '',
|
||||
location: '',
|
||||
deviceIds: []
|
||||
});
|
||||
|
||||
// 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: []
|
||||
});
|
||||
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]
|
||||
});
|
||||
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
|
||||
};
|
||||
|
||||
if (formMode === 'add') {
|
||||
onAddLab(savedLabData);
|
||||
} else if (formMode === 'edit' && formData.id) {
|
||||
onUpdateLab({
|
||||
...savedLabData,
|
||||
id: formData.id
|
||||
});
|
||||
}
|
||||
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
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 */}
|
||||
<div className="space-y-3 flex-1 overflow-y-auto max-h-[550px] pr-1">
|
||||
{labs.map((lab) => {
|
||||
const isSelected = selectedLab?.id === lab.id;
|
||||
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()}>
|
||||
<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">
|
||||
<User 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">
|
||||
<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>
|
||||
<ChevronRight className={`w-4 h-4 text-slate-500 transition-transform ${isSelected ? 'translate-x-1 text-emerald-400' : ''}`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</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">
|
||||
<User 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"
|
||||
placeholder="e.g. Campus Core OSPF Backup Route"
|
||||
/>
|
||||
</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"
|
||||
placeholder="e.g. Server Room R01, Cabinet B"
|
||||
/>
|
||||
</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"
|
||||
placeholder="e.g. Jane Doe"
|
||||
/>
|
||||
</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"
|
||||
placeholder="Purpose, VLAN mappings, target device models..."
|
||||
/>
|
||||
</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]"
|
||||
placeholder="e.g. LACP Port-Channel 1"
|
||||
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;
|
||||
return (
|
||||
<div key={idx} className="flex justify-between items-center 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">
|
||||
<strong>{fromDev}</strong> ──── {link.type} ──── <strong>{toDev}</strong>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveLink(idx)}
|
||||
className="text-rose-500 hover:text-rose-450 font-sans font-bold"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[10px] text-slate-500 italic">No interface connections formulated yet.</p>
|
||||
)}
|
||||
</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 Lab Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user