eksadmin/IT_Tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: JSON-Serialisierung, API-Routing und Dark-Mode Dropdowns

Browse Source 
Backend:
- Program.cs: JsonNamingPolicy.CamelCase + JsonStringEnumConverter global aktiviert
  → behebt alle Frontend-API-Calls (PascalCase statt camelCase, Integer statt String-Enums)
- AgentsController: GetMetrics nutzt jetzt 'limit' Parameter (statt 'hours')
  → Frontend-Aufruf ?limit=50 wird korrekt ausgewertet
- AgentsController: GetAll gibt MacAddress und EnrolledAt zurück
- TasksController: GET /tasks?agentId= Endpoint hinzugefügt
  → behebt Routing-Mismatch (Frontend nutzte Query-Parameter, Backend hatte Route-Parameter)

Frontend:
- SoftwarePage.tsx: Alle hardcodierten Hellmodus-Farben durch Theme-Variablen ersetzt
  (bg-white/gray → bg-card/muted, text-gray-* → text-foreground/muted-foreground)
- index.css: select option Stile für Dark-Mode Sichtbarkeit hinzugefügt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-03-24 13:30:30 +01:00
parent d7b618f02d
commit b45a9f3bdc
5 changed files with 222 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
Backend/src/NexusRMM.Api/Controllers/AgentsController.cs
View File

@@ -16,7 +16,7 @@ public class AgentsController : ControllerBase
{ {
var agents = await _db.Agents var agents = await _db.Agents
.OrderBy(a => a.Hostname) .OrderBy(a => a.Hostname)
.Select(a => new { a.Id, a.Hostname, a.OsType, a.OsVersion, a.IpAddress, a.Status, a.AgentVersion, a.LastSeen, a.Tags }) .Select(a => new { a.Id, a.Hostname, a.OsType, a.OsVersion, a.IpAddress, a.MacAddress, a.Status, a.AgentVersion, a.LastSeen, a.EnrolledAt, a.Tags })
.ToListAsync(); .ToListAsync();
return Ok(agents); return Ok(agents);
} }
@@ -29,14 +29,13 @@ public class AgentsController : ControllerBase
} }
[HttpGet("{id:guid}/metrics")] [HttpGet("{id:guid}/metrics")]
public async Task<IActionResult> GetMetrics(Guid id, [FromQuery] int hours = 24) public async Task<IActionResult> GetMetrics(Guid id, [FromQuery] int limit = 100)
{ {
var since = DateTime.UtcNow.AddHours(-hours);
var metrics = await _db.AgentMetrics var metrics = await _db.AgentMetrics
.Where(m => m.AgentId == id && m.Timestamp >= since) .Where(m => m.AgentId == id)
.OrderByDescending(m => m.Timestamp) .OrderByDescending(m => m.Timestamp)
.Take(1000) .Take(limit)
.Select(m => new { m.Timestamp, m.Metrics }) .Select(m => new { m.Id, m.AgentId, m.Timestamp, m.Metrics })
.ToListAsync(); .ToListAsync();
return Ok(metrics); return Ok(metrics);
} }

20
Backend/src/NexusRMM.Api/Controllers/TasksController.cs
View File

@@ -29,23 +29,21 @@ public class TasksController : ControllerBase
return CreatedAtAction(nameof(GetById), new { id = task.Id }, task); return CreatedAtAction(nameof(GetById), new { id = task.Id }, task);
} }
[HttpGet]
public async Task<IActionResult> GetAll([FromQuery] Guid? agentId = null)
{
var query = _db.Tasks.AsQueryable();
if (agentId.HasValue) query = query.Where(t => t.AgentId == agentId.Value);
var tasks = await query.OrderByDescending(t => t.CreatedAt).Take(50).ToListAsync();
return Ok(tasks);
}
[HttpGet("{id:guid}")] [HttpGet("{id:guid}")]
public async Task<IActionResult> GetById(Guid id) public async Task<IActionResult> GetById(Guid id)
{ {
var task = await _db.Tasks.FindAsync(id); var task = await _db.Tasks.FindAsync(id);
return task is null ? NotFound() : Ok(task); return task is null ? NotFound() : Ok(task);
} }
[HttpGet("agent/{agentId:guid}")]
public async Task<IActionResult> GetByAgent(Guid agentId)
{
var tasks = await _db.Tasks
.Where(t => t.AgentId == agentId)
.OrderByDescending(t => t.CreatedAt)
.Take(50)
.ToListAsync();
return Ok(tasks);
}
} }
public record CreateTaskRequest(Guid AgentId, TaskType Type, object? Payload); public record CreateTaskRequest(Guid AgentId, TaskType Type, object? Payload);

7
Backend/src/NexusRMM.Api/Program.cs
View File

@@ -20,7 +20,12 @@ builder.Services.AddDbContext<RmmDbContext>(options =>
builder.Services.AddGrpc(); builder.Services.AddGrpc();
builder.Services.AddSignalR(); builder.Services.AddSignalR();
builder.Services.AddControllers(); builder.Services.AddControllers()
.AddJsonOptions(options =>
{
options.JsonSerializerOptions.PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.CamelCase;
options.JsonSerializerOptions.Converters.Add(new System.Text.Json.Serialization.JsonStringEnumConverter());
});
builder.Services.AddEndpointsApiExplorer(); builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(); builder.Services.AddSwaggerGen();

5
Frontend/src/index.css
View File

@@ -33,4 +33,9 @@
background-color: hsl(var(--background)); background-color: hsl(var(--background));
color: hsl(var(--foreground)); color: hsl(var(--foreground));
} }
/* Dropdown-Optionen im Dark Mode sichtbar machen */
select option {
background-color: hsl(var(--card));
color: hsl(var(--foreground));
}
} }

416
Frontend/src/pages/SoftwarePage.tsx
View File

@@ -15,13 +15,11 @@ export default function SoftwarePage() {
const queryClient = useQueryClient() const queryClient = useQueryClient()
// Fetch packages
const { data: packages = [], isLoading } = useQuery({ const { data: packages = [], isLoading } = useQuery({
queryKey: ['software-packages', filterOs], queryKey: ['software-packages', filterOs],
queryFn: () => softwarePackagesApi.list(filterOs === 'All' ? undefined : filterOs), queryFn: () => softwarePackagesApi.list(filterOs === 'All' ? undefined : filterOs),
}) })
// Mutations
const createMutation = useMutation({ const createMutation = useMutation({
mutationFn: (data: CreateSoftwarePackageRequest) => softwarePackagesApi.create(data), mutationFn: (data: CreateSoftwarePackageRequest) => softwarePackagesApi.create(data),
onSuccess: () => { onSuccess: () => {
@@ -96,134 +94,134 @@ export default function SoftwarePage() {
} }
return ( return (
<div className="min-h-screen bg-gray-50 p-8"> <div className="p-6 space-y-6">
<div className="max-w-7xl mx-auto"> {/* Header */}
{/* Header */} <div>
<div className="mb-8"> <div className="flex items-center gap-3 mb-1">
<div className="flex items-center gap-3 mb-2"> <Package className="text-primary" size={24} />
<Package className="text-blue-600" size={28} /> <h1 className="text-3xl font-bold text-foreground">Software-Verwaltung</h1>
<h1 className="text-3xl font-bold">Software-Verwaltung</h1>
</div>
<p className="text-gray-600">Verwalte Software-Pakete und deploye sie auf Agenten</p>
</div> </div>
<p className="text-muted-foreground">Verwalte Software-Pakete und deploye sie auf Agenten</p>
</div>
{/* Tabs */} {/* Tabs */}
<div className="flex gap-4 mb-6 border-b"> <div className="flex gap-2 border-b border-border">
<button <button
onClick={() => setActiveTab('catalog')} onClick={() => setActiveTab('catalog')}
className={cn( className={cn(
'px-4 py-2 font-medium text-sm border-b-2 transition-colors', 'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
activeTab === 'catalog' activeTab === 'catalog'
? 'border-blue-600 text-blue-600' ? 'border-primary text-primary'
: 'border-transparent text-gray-600 hover:text-gray-900' : 'border-transparent text-muted-foreground hover:text-foreground'
)} )}
> >
Katalog Katalog
</button> </button>
<button <button
onClick={() => setActiveTab('deploy')} onClick={() => setActiveTab('deploy')}
className={cn( className={cn(
'px-4 py-2 font-medium text-sm border-b-2 transition-colors', 'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
activeTab === 'deploy' activeTab === 'deploy'
? 'border-blue-600 text-blue-600' ? 'border-primary text-primary'
: 'border-transparent text-gray-600 hover:text-gray-900' : 'border-transparent text-muted-foreground hover:text-foreground'
)} )}
> >
Deployen Deployen
</button> </button>
</div>
{/* Messages */}
{successMessage && (
<div className="p-3 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg">
{successMessage}
</div> </div>
)}
{errorMessage && (
<div className="p-3 bg-red-500/20 text-red-400 border border-red-500/30 rounded-lg">
{errorMessage}
</div>
)}
{/* Messages */} {/* Catalog Tab */}
{successMessage && ( {activeTab === 'catalog' && (
<div className="mb-4 p-3 bg-green-100 text-green-800 rounded-lg">{successMessage}</div> <div className="space-y-4">
)} <div className="flex items-center justify-between">
{errorMessage && ( <div className="flex gap-2">
<div className="mb-4 p-3 bg-red-100 text-red-800 rounded-lg">{errorMessage}</div> {(['All', 'Windows', 'Linux'] as const).map((os) => (
)} <button
key={os}
{/* Tab Content */} onClick={() => setFilterOs(os)}
{activeTab === 'catalog' && ( className={cn(
<div> 'px-4 py-2 rounded-lg font-medium text-sm transition-colors',
{/* Filter and Create Button */} filterOs === os
<div className="flex items-center justify-between mb-6"> ? 'bg-primary text-primary-foreground'
<div className="flex gap-2"> : 'bg-muted text-muted-foreground hover:text-foreground hover:bg-muted/80'
{(['All', 'Windows', 'Linux'] as const).map((os) => ( )}
<button >
key={os} {os}
onClick={() => setFilterOs(os)} </button>
className={cn( ))}
'px-4 py-2 rounded-lg font-medium transition-colors',
filterOs === os
? 'bg-blue-600 text-white'
: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
)}
>
{os}
</button>
))}
</div>
<button
onClick={handleOpenCreate}
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<Plus size={18} />
Neues Paket
</button>
</div> </div>
<button
onClick={handleOpenCreate}
className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium"
>
<Plus size={18} />
Neues Paket
</button>
</div>
{/* Table */} {isLoading ? (
{isLoading ? ( <div className="text-center py-8 text-muted-foreground">Laden...</div>
<div className="text-center py-8 text-gray-500">Laden...</div> ) : packages.length === 0 ? (
) : packages.length === 0 ? ( <div className="text-center py-8 text-muted-foreground">
<div className="text-center py-8 text-gray-500"> Keine Pakete {filterOs !== 'All' && `für ${filterOs}`} vorhanden
Keine Pakete {filterOs !== 'All' && `für ${filterOs}`} vorhanden </div>
</div> ) : (
) : ( <div className="bg-card border border-border rounded-lg overflow-hidden">
<div className="bg-white rounded-lg shadow overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full"> <table className="w-full text-sm">
<thead className="bg-gray-100 border-b"> <thead className="bg-muted border-b border-border">
<tr> <tr>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Name</th> <th className="px-6 py-3 text-left font-semibold text-foreground">Name</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Version</th> <th className="px-6 py-3 text-left font-semibold text-foreground">Version</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">OS</th> <th className="px-6 py-3 text-left font-semibold text-foreground">OS</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900"> <th className="px-6 py-3 text-left font-semibold text-foreground">Paketmanager</th>
Paketmanager <th className="px-6 py-3 text-left font-semibold text-foreground">Paketname</th>
</th> <th className="px-6 py-3 text-right font-semibold text-foreground">Aktionen</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Paketname</th>
<th className="px-6 py-3 text-right text-sm font-semibold text-gray-900">Aktionen</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className="divide-y divide-border">
{packages.map((pkg) => ( {packages.map((pkg) => (
<tr key={pkg.id} className="border-b hover:bg-gray-50 transition-colors"> <tr key={pkg.id} className="hover:bg-muted/50 transition-colors">
<td className="px-6 py-4 font-medium text-gray-900">{pkg.name}</td> <td className="px-6 py-4 font-medium text-foreground">{pkg.name}</td>
<td className="px-6 py-4 text-gray-600">{pkg.version}</td> <td className="px-6 py-4 text-muted-foreground">{pkg.version}</td>
<td className="px-6 py-4"> <td className="px-6 py-4">
<span <span
className={cn( className={cn(
'px-3 py-1 rounded-full text-sm font-medium text-white', 'px-3 py-1 rounded-full text-xs font-medium text-primary-foreground',
pkg.osType === 'Windows' ? 'bg-blue-600' : 'bg-green-600' pkg.osType === 'Windows' ? 'bg-blue-600' : 'bg-green-600'
)} )}
> >
{pkg.osType} {pkg.osType}
</span> </span>
</td> </td>
<td className="px-6 py-4 text-gray-600">{pkg.packageManager}</td> <td className="px-6 py-4 text-muted-foreground">{pkg.packageManager}</td>
<td className="px-6 py-4 text-gray-600 font-mono text-sm">{pkg.packageName}</td> <td className="px-6 py-4 text-muted-foreground font-mono text-xs">{pkg.packageName}</td>
<td className="px-6 py-4 flex justify-end gap-3"> <td className="px-6 py-4 flex justify-end gap-2">
<button <button
onClick={() => handleEdit(pkg)} onClick={() => handleEdit(pkg)}
className="p-2 text-blue-600 hover:bg-blue-50 rounded transition-colors" className="p-2 text-primary hover:bg-primary/10 rounded transition-colors"
title="Bearbeiten" title="Bearbeiten"
> >
<Edit size={18} /> <Edit size={16} />
</button> </button>
<button <button
onClick={() => handleDelete(pkg.id, pkg.name)} onClick={() => handleDelete(pkg.id, pkg.name)}
className="p-2 text-red-600 hover:bg-red-50 rounded transition-colors" className="p-2 text-red-400 hover:bg-red-500/10 rounded transition-colors"
title="Löschen" title="Löschen"
> >
<Trash2 size={18} /> <Trash2 size={16} />
</button> </button>
</td> </td>
</tr> </tr>
@@ -231,12 +229,12 @@ export default function SoftwarePage() {
</tbody> </tbody>
</table> </table>
</div> </div>
)} </div>
</div> )}
)} </div>
)}
{activeTab === 'deploy' && <DeployTab packages={packages} deployMutation={deployMutation} />} {activeTab === 'deploy' && <DeployTab packages={packages} deployMutation={deployMutation} />}
</div>
{/* Create/Edit Modal */} {/* Create/Edit Modal */}
{isCreateModalOpen && ( {isCreateModalOpen && (
@@ -316,76 +314,72 @@ function CreatePackageModal({
availableManagers.includes(formData.packageManager as PackageManager) availableManagers.includes(formData.packageManager as PackageManager)
? (formData.packageManager as PackageManager) ? (formData.packageManager as PackageManager)
: (availableManagers[0] as PackageManager) : (availableManagers[0] as PackageManager)
setFormData((prev) => ({ ...prev, osType: newOs, packageManager: newManager }))
setFormData((prev) => ({
...prev,
osType: newOs,
packageManager: newManager,
}))
} }
const inputClass =
'w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary'
if (!isOpen) return null if (!isOpen) return null
return ( return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-y-auto"> <div className="bg-card border border-border rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
<div className="flex items-center justify-between p-6 border-b sticky top-0 bg-white"> <div className="flex items-center justify-between p-6 border-b border-border sticky top-0 bg-card">
<h2 className="text-xl font-bold"> <h2 className="text-xl font-bold text-foreground">
{editingPackage ? 'Paket bearbeiten' : 'Neues Paket'} {editingPackage ? 'Paket bearbeiten' : 'Neues Paket'}
</h2> </h2>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700"> <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
<X size={24} /> <X size={20} />
</button> </button>
</div> </div>
<form onSubmit={handleSubmit} className="p-6 space-y-4"> <form onSubmit={handleSubmit} className="p-6 space-y-4">
{/* Name */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-1">Name *</label> <label className="block text-sm font-medium text-foreground mb-1">Name *</label>
<input <input
type="text" type="text"
required required
value={formData.name} value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })} onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className={inputClass}
/> />
</div> </div>
{/* Version */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-1">Version *</label> <label className="block text-sm font-medium text-foreground mb-1">Version *</label>
<input <input
type="text" type="text"
required required
placeholder="z.B. 1.0.0" placeholder="z.B. 1.0.0"
value={formData.version} value={formData.version}
onChange={(e) => setFormData({ ...formData, version: e.target.value })} onChange={(e) => setFormData({ ...formData, version: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className={inputClass}
/> />
</div> </div>
{/* OS */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-1">Betriebssystem *</label> <label className="block text-sm font-medium text-foreground mb-1">Betriebssystem *</label>
<select <select
required required
value={formData.osType} value={formData.osType}
onChange={(e) => handleOsChange(e.target.value as OsType)} onChange={(e) => handleOsChange(e.target.value as OsType)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className={inputClass}
> >
<option value="Windows">Windows</option> <option value="Windows">Windows</option>
<option value="Linux">Linux</option> <option value="Linux">Linux</option>
</select> </select>
</div> </div>
{/* Package Manager */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-1">Paketmanager *</label> <label className="block text-sm font-medium text-foreground mb-1">Paketmanager *</label>
<select <select
required required
value={formData.packageManager} value={formData.packageManager}
onChange={(e) => setFormData({ ...formData, packageManager: e.target.value as PackageManager })} onChange={(e) =>
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" setFormData({ ...formData, packageManager: e.target.value as PackageManager })
}
className={inputClass}
> >
{getAvailablePackageManagers().map((pm) => ( {getAvailablePackageManagers().map((pm) => (
<option key={pm} value={pm}> <option key={pm} value={pm}>
@@ -395,74 +389,71 @@ function CreatePackageModal({
</select> </select>
</div> </div>
{/* Package Name */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-1">Paketname *</label> <label className="block text-sm font-medium text-foreground mb-1">Paketname *</label>
<input <input
type="text" type="text"
required required
placeholder="Name wie im Paketmanager" placeholder="Name wie im Paketmanager"
value={formData.packageName} value={formData.packageName}
onChange={(e) => setFormData({ ...formData, packageName: e.target.value })} onChange={(e) => setFormData({ ...formData, packageName: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className={inputClass}
/> />
</div> </div>
{/* Installer URL (nur für "direct") */}
{formData.packageManager === 'direct' && ( {formData.packageManager === 'direct' && (
<div> <>
<label className="block text-sm font-medium text-gray-900 mb-1">Installer URL</label> <div>
<input <label className="block text-sm font-medium text-foreground mb-1">Installer URL</label>
type="url" <input
placeholder="https://..." type="url"
value={formData.installerUrl || ''} placeholder="https://..."
onChange={(e) => setFormData({ ...formData, installerUrl: e.target.value || undefined })} value={formData.installerUrl || ''}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" onChange={(e) =>
/> setFormData({ ...formData, installerUrl: e.target.value || undefined })
</div> }
className={inputClass}
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-1">SHA256-Prüfsumme</label>
<input
type="text"
placeholder="SHA256 hash"
value={formData.checksum || ''}
onChange={(e) =>
setFormData({ ...formData, checksum: e.target.value || undefined })
}
className={cn(inputClass, 'font-mono text-xs')}
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-1">Silent-Argumente</label>
<input
type="text"
placeholder="/S, --silent, etc."
value={formData.silentArgs || ''}
onChange={(e) =>
setFormData({ ...formData, silentArgs: e.target.value || undefined })
}
className={inputClass}
/>
</div>
</>
)} )}
{/* Checksum (nur für "direct") */}
{formData.packageManager === 'direct' && (
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">SHA256-Prüfsumme</label>
<input
type="text"
placeholder="SHA256 hash"
value={formData.checksum || ''}
onChange={(e) => setFormData({ ...formData, checksum: e.target.value || undefined })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-xs"
/>
</div>
)}
{/* Silent Args (nur für "direct") */}
{formData.packageManager === 'direct' && (
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Silent-Argumente</label>
<input
type="text"
placeholder="/S, --silent, etc."
value={formData.silentArgs || ''}
onChange={(e) => setFormData({ ...formData, silentArgs: e.target.value || undefined })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
)}
{/* Buttons */}
<div className="flex gap-3 pt-4"> <div className="flex gap-3 pt-4">
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium" className="flex-1 px-4 py-2 border border-border rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors font-medium text-sm"
> >
Abbrechen Abbrechen
</button> </button>
<button <button
type="submit" type="submit"
disabled={isLoading} disabled={isLoading}
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50" className="flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm disabled:opacity-50"
> >
{isLoading ? 'Speichern...' : editingPackage ? 'Aktualisieren' : 'Erstellen'} {isLoading ? 'Speichern...' : editingPackage ? 'Aktualisieren' : 'Erstellen'}
</button> </button>
@@ -475,7 +466,7 @@ function CreatePackageModal({
interface DeployTabProps { interface DeployTabProps {
packages: SoftwarePackage[] packages: SoftwarePackage[]
deployMutation: any deployMutation: ReturnType<typeof useMutation<unknown, Error, { agentId: string; packageId: number; action: 'install' | 'uninstall' }>>
} }
function DeployTab({ packages, deployMutation }: DeployTabProps) { function DeployTab({ packages, deployMutation }: DeployTabProps) {
@@ -483,28 +474,26 @@ function DeployTab({ packages, deployMutation }: DeployTabProps) {
const [agentId, setAgentId] = useState('') const [agentId, setAgentId] = useState('')
const [action, setAction] = useState<'install' | 'uninstall'>('install') const [action, setAction] = useState<'install' | 'uninstall'>('install')
const inputClass =
'w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary'
const handleDeploy = (e: React.FormEvent) => { const handleDeploy = (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
if (!selectedPackageId || !agentId) return if (!selectedPackageId || !agentId) return
deployMutation.mutate({ deployMutation.mutate({ agentId, packageId: selectedPackageId as number, action })
agentId,
packageId: selectedPackageId as number,
action,
})
} }
return ( return (
<div className="max-w-lg"> <div className="max-w-lg">
<div className="bg-white rounded-lg shadow p-6"> <div className="bg-card border border-border rounded-lg p-6">
<form onSubmit={handleDeploy} className="space-y-4"> <form onSubmit={handleDeploy} className="space-y-4">
{/* Package Selection */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-2">Paket auswählen *</label> <label className="block text-sm font-medium text-foreground mb-2">Paket auswählen *</label>
<select <select
required required
value={selectedPackageId} value={selectedPackageId}
onChange={(e) => setSelectedPackageId(e.target.value ? Number(e.target.value) : '')} onChange={(e) => setSelectedPackageId(e.target.value ? Number(e.target.value) : '')}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className={inputClass}
> >
<option value="">-- Paket auswählen --</option> <option value="">-- Paket auswählen --</option>
{packages.map((pkg) => ( {packages.map((pkg) => (
@@ -515,65 +504,54 @@ function DeployTab({ packages, deployMutation }: DeployTabProps) {
</select> </select>
</div> </div>
{/* Agent ID */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-2">Agent-ID *</label> <label className="block text-sm font-medium text-foreground mb-2">Agent-ID *</label>
<input <input
type="text" type="text"
required required
placeholder="UUID des Agenten (aus Dashboard kopieren)" placeholder="UUID des Agenten (aus Dashboard kopieren)"
value={agentId} value={agentId}
onChange={(e) => setAgentId(e.target.value)} onChange={(e) => setAgentId(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm" className={cn(inputClass, 'font-mono')}
/> />
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-muted-foreground">
Finde die Agent-ID im Agent-Dashboard oder Agent-Details Finde die Agent-ID im Agent-Dashboard oder Agent-Details
</p> </p>
</div> </div>
{/* Action */}
<div> <div>
<label className="block text-sm font-medium text-gray-900 mb-2">Aktion *</label> <label className="block text-sm font-medium text-foreground mb-2">Aktion *</label>
<div className="space-y-2"> <div className="space-y-2">
<label className="flex items-center gap-3 cursor-pointer"> {(['install', 'uninstall'] as const).map((a) => (
<input <label key={a} className="flex items-center gap-3 cursor-pointer">
type="radio" <input
name="action" type="radio"
value="install" name="action"
checked={action === 'install'} value={a}
onChange={() => setAction('install')} checked={action === a}
className="w-4 h-4" onChange={() => setAction(a)}
/> className="w-4 h-4 accent-primary"
<span className="text-gray-900">Installieren</span> />
</label> <span className="text-foreground text-sm">
<label className="flex items-center gap-3 cursor-pointer"> {a === 'install' ? 'Installieren' : 'Deinstallieren'}
<input </span>
type="radio" </label>
name="action" ))}
value="uninstall"
checked={action === 'uninstall'}
onChange={() => setAction('uninstall')}
className="w-4 h-4"
/>
<span className="text-gray-900">Deinstallieren</span>
</label>
</div> </div>
</div> </div>
{/* Submit */}
<button <button
type="submit" type="submit"
disabled={deployMutation.isPending || !selectedPackageId || !agentId} disabled={deployMutation.isPending || !selectedPackageId || !agentId}
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed" className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
> >
<Rocket size={18} /> <Rocket size={18} />
{deployMutation.isPending ? 'Wird deployed...' : 'Deploy starten'} {deployMutation.isPending ? 'Wird deployed...' : 'Deploy starten'}
</button> </button>
{/* Info */} <div className="p-3 bg-primary/10 border border-primary/20 rounded-lg text-sm text-foreground">
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-900">
<p className="font-medium mb-1">Hinweis:</p> <p className="font-medium mb-1">Hinweis:</p>
<p> <p className="text-muted-foreground">
Die Task wird erstellt und der Agent führt sie beim nächsten Heartbeat aus (ca. 1-2 Minuten). Die Task wird erstellt und der Agent führt sie beim nächsten Heartbeat aus (ca. 1-2 Minuten).
Überwache den Task-Fortschritt im Agent-Dashboard. Überwache den Task-Fortschritt im Agent-Dashboard.
</p> </p>