feat: Phase 8 — Network Discovery + Windows Dev-Setup-Skripte
Network Discovery:
- Go Agent: internal/scanner/scanner.go mit TCP-Sweep (Port 445/80/22/443),
ARP-Tabellen-Parser (Windows: arp -a, Linux: /proc/net/arp), Reverse-DNS,
50 gleichzeitige Goroutines mit Semaphore
- Go Agent main.go: COMMAND_TYPE_NETWORK_SCAN Case → scanner.Scan() → JSON stdout
- Backend: NetworkDevice Model (Id, AgentId, IpAddress, MacAddress, Hostname,
Vendor, IsManaged, FirstSeen, LastSeen)
- Backend: EF Migration AddNetworkDevices + Index auf IpAddress + MacAddress
- Backend: NetworkDevicesController GET /api/v1/network-devices + DELETE /{id}
- Backend: AgentGrpcService.ProcessNetworkScanResultAsync — upsert via MAC,
IsManaged=true wenn IP einem bekannten Agent entspricht
- Frontend: NetworkPage.tsx mit Scan-Panel, Device-Tabelle, Filter, Delete
- Frontend: App.tsx — 'Netzwerk' Nav-Eintrag mit Network Icon
Windows Dev-Setup:
- dev-start.ps1 — Startet Docker/Postgres, EF-Migrationen, Backend+Frontend
in separaten PowerShell-Fenstern; Voraussetzungen-Check (docker/dotnet/node/go)
- dev-stop.ps1 — Stoppt alle NexusRMM-Prozesse + PostgreSQL Container
- build-agent.ps1 — Baut nexus-agent.exe (Windows) + optional nexus-agent-linux
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
import { useState } from 'react'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { LayoutDashboard, Ticket, Bell, Package, Menu, X } from 'lucide-react'
|
||||
import { LayoutDashboard, Ticket, Bell, Package, Network, Menu, X } from 'lucide-react'
|
||||
import { DashboardPage } from './pages/DashboardPage'
|
||||
import { AgentDetailPage } from './pages/AgentDetailPage'
|
||||
import TicketsPage from './pages/TicketsPage'
|
||||
import AlertsPage from './pages/AlertsPage'
|
||||
import SoftwarePage from './pages/SoftwarePage'
|
||||
import NetworkPage from './pages/NetworkPage'
|
||||
import { cn } from './lib/utils'
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
@@ -17,7 +18,7 @@ const queryClient = new QueryClient({
|
||||
},
|
||||
})
|
||||
|
||||
type Page = 'dashboard' | 'agent-detail' | 'tickets' | 'alerts' | 'software'
|
||||
type Page = 'dashboard' | 'agent-detail' | 'tickets' | 'alerts' | 'network' | 'software'
|
||||
|
||||
interface NavItem {
|
||||
id: Page
|
||||
@@ -29,6 +30,7 @@ const navItems: NavItem[] = [
|
||||
{ id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={18} /> },
|
||||
{ id: 'tickets', label: 'Tickets', icon: <Ticket size={18} /> },
|
||||
{ id: 'alerts', label: 'Alerts', icon: <Bell size={18} /> },
|
||||
{ id: 'network', label: 'Netzwerk', icon: <Network size={18} /> },
|
||||
{ id: 'software', label: 'Software', icon: <Package size={18} /> },
|
||||
]
|
||||
|
||||
@@ -112,6 +114,7 @@ function AppContent() {
|
||||
)}
|
||||
{page === 'tickets' && <TicketsPage />}
|
||||
{page === 'alerts' && <AlertsPage />}
|
||||
{page === 'network' && <NetworkPage />}
|
||||
{page === 'software' && <SoftwarePage />}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,7 @@ import type {
|
||||
DeployRequest,
|
||||
DeployResponse,
|
||||
RemoteSessionInfo,
|
||||
NetworkDevice,
|
||||
} from './types'
|
||||
|
||||
const BASE_URL = '/api/v1'
|
||||
@@ -104,3 +105,22 @@ export const remoteDesktopApi = {
|
||||
getSession: (agentId: string) =>
|
||||
request<RemoteSessionInfo>(`/agents/${agentId}/remote-session`),
|
||||
}
|
||||
|
||||
// Network Devices
|
||||
export const networkDevicesApi = {
|
||||
list: (agentId?: string) => {
|
||||
const param = agentId ? `?agentId=${agentId}` : ''
|
||||
return request<NetworkDevice[]>(`/network-devices${param}`)
|
||||
},
|
||||
delete: (id: number) =>
|
||||
request<void>(`/network-devices/${id}`, { method: 'DELETE' }),
|
||||
}
|
||||
|
||||
// Network Scan triggern (nutzt tasksApi intern)
|
||||
export const networkScanApi = {
|
||||
trigger: (agentId: string, subnet?: string) =>
|
||||
request<TaskItem>('/tasks', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ agentId, type: 'NetworkScan', payload: { subnet: subnet ?? '' } }),
|
||||
}),
|
||||
}
|
||||
|
||||
@@ -184,3 +184,15 @@ export interface RemoteSessionInfo {
|
||||
sessionUrl?: string
|
||||
meshCentralBaseUrl?: string
|
||||
}
|
||||
|
||||
export interface NetworkDevice {
|
||||
id: number
|
||||
agentId: string | null
|
||||
ipAddress: string
|
||||
macAddress: string
|
||||
hostname: string
|
||||
vendor: string
|
||||
isManaged: boolean
|
||||
firstSeen: string
|
||||
lastSeen: string
|
||||
}
|
||||
|
||||
285
Frontend/src/pages/NetworkPage.tsx
Normal file
285
Frontend/src/pages/NetworkPage.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Network, Trash2, Play, Wifi, WifiOff } from 'lucide-react'
|
||||
import { networkDevicesApi, networkScanApi } from '../api/client'
|
||||
import { cn } from '../lib/utils'
|
||||
|
||||
function formatRelativeTime(dateString: string): string {
|
||||
const now = new Date()
|
||||
const date = new Date(dateString)
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
|
||||
const diffSeconds = Math.floor(diffMs / 1000)
|
||||
const diffMinutes = Math.floor(diffSeconds / 60)
|
||||
const diffHours = Math.floor(diffMinutes / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
|
||||
if (diffSeconds < 60) {
|
||||
return 'gerade eben'
|
||||
}
|
||||
if (diffMinutes < 60) {
|
||||
return `vor ${diffMinutes} Min.`
|
||||
}
|
||||
if (diffHours < 24) {
|
||||
return `vor ${diffHours} Std.`
|
||||
}
|
||||
return `vor ${diffDays} Tagen`
|
||||
}
|
||||
|
||||
export default function NetworkPage() {
|
||||
const [agentIdInput, setAgentIdInput] = useState('')
|
||||
const [subnetInput, setSubnetInput] = useState('')
|
||||
const [filterUnknown, setFilterUnknown] = useState(false)
|
||||
const [isScanPending, setIsScanPending] = useState(false)
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const devicesQuery = useQuery({
|
||||
queryKey: ['networkDevices'],
|
||||
queryFn: () => networkDevicesApi.list(),
|
||||
})
|
||||
|
||||
const scanMutation = useMutation({
|
||||
mutationFn: ({ agentId, subnet }: { agentId: string; subnet?: string }) =>
|
||||
networkScanApi.trigger(agentId, subnet),
|
||||
onSuccess: () => {
|
||||
setIsScanPending(true)
|
||||
// Refresh after a brief delay to show updated results
|
||||
setTimeout(() => {
|
||||
queryClient.invalidateQueries({ queryKey: ['networkDevices'] })
|
||||
setIsScanPending(false)
|
||||
}, 3000)
|
||||
},
|
||||
onError: () => {
|
||||
setIsScanPending(false)
|
||||
},
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => networkDevicesApi.delete(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['networkDevices'] })
|
||||
},
|
||||
})
|
||||
|
||||
const handleScan = () => {
|
||||
if (!agentIdInput.trim()) return
|
||||
setIsScanPending(true)
|
||||
scanMutation.mutate({
|
||||
agentId: agentIdInput.trim(),
|
||||
subnet: subnetInput.trim() || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
if (window.confirm('Möchten Sie dieses Gerät wirklich löschen?')) {
|
||||
deleteMutation.mutate(id)
|
||||
}
|
||||
}
|
||||
|
||||
const devices = devicesQuery.data ?? []
|
||||
const filteredDevices = filterUnknown
|
||||
? devices.filter((d) => !d.isManaged)
|
||||
: devices
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Network size={24} className="text-primary" />
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground">Netzwerk-Discovery</h1>
|
||||
<p className="text-muted-foreground text-sm mt-1">
|
||||
Geräte im Netzwerk erkennen und verwalten
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scan Panel */}
|
||||
<div className="bg-card border border-border rounded-lg p-6">
|
||||
<h2 className="text-lg font-semibold text-foreground mb-4">Netzwerk-Scan starten</h2>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={agentIdInput}
|
||||
onChange={(e) => setAgentIdInput(e.target.value)}
|
||||
placeholder="Agent-ID (erforderlich)"
|
||||
className="flex-1 bg-background border border-border rounded-lg px-3 py-2 text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={subnetInput}
|
||||
onChange={(e) => setSubnetInput(e.target.value)}
|
||||
placeholder="Subnetz (optional, z.B. 192.168.1.0/24)"
|
||||
className="flex-1 bg-background border border-border rounded-lg px-3 py-2 text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
<button
|
||||
onClick={handleScan}
|
||||
disabled={!agentIdInput.trim() || scanMutation.isPending || isScanPending}
|
||||
className={cn(
|
||||
'flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap',
|
||||
)}
|
||||
>
|
||||
<Play size={16} />
|
||||
{isScanPending ? 'Scan läuft...' : 'Scan starten'}
|
||||
</button>
|
||||
</div>
|
||||
{scanMutation.isError && (
|
||||
<p className="text-red-400 text-sm mt-2">
|
||||
Fehler beim Starten des Scans: {String(scanMutation.error)}
|
||||
</p>
|
||||
)}
|
||||
{isScanPending && !scanMutation.isError && (
|
||||
<p className="text-muted-foreground text-sm mt-2 flex items-center gap-2">
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||||
Scan wurde gestartet. Ergebnisse werden in Kürze aktualisiert...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results Table */}
|
||||
<div className="bg-card border border-border rounded-lg p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-foreground">
|
||||
Erkannte Geräte
|
||||
{devicesQuery.isSuccess && (
|
||||
<span className="ml-2 text-sm font-normal text-muted-foreground">
|
||||
({filteredDevices.length} von {devices.length})
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
|
||||
{/* Filter Toggle */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setFilterUnknown(false)}
|
||||
className={cn(
|
||||
'px-3 py-1 rounded text-sm transition-colors',
|
||||
!filterUnknown
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-accent text-foreground hover:bg-accent/80',
|
||||
)}
|
||||
>
|
||||
Alle
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterUnknown(true)}
|
||||
className={cn(
|
||||
'px-3 py-1 rounded text-sm transition-colors',
|
||||
filterUnknown
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-accent text-foreground hover:bg-accent/80',
|
||||
)}
|
||||
>
|
||||
Nur unbekannte Geräte
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{devicesQuery.isLoading && (
|
||||
<p className="text-muted-foreground py-4">Lädt...</p>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{devicesQuery.isError && (
|
||||
<p className="text-red-400 py-4">
|
||||
Fehler beim Laden der Geräte
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{devicesQuery.isSuccess && filteredDevices.length === 0 && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<Network size={40} className="mx-auto mb-3 opacity-30" />
|
||||
<p>
|
||||
{filterUnknown
|
||||
? 'Keine unbekannten Geräte gefunden'
|
||||
: 'Keine Geräte gefunden. Starten Sie einen Scan.'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Table */}
|
||||
{devicesQuery.isSuccess && filteredDevices.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-accent border-b border-border">
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
|
||||
IP-Adresse
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
|
||||
MAC-Adresse
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
|
||||
Hostname
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
|
||||
Hersteller
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
|
||||
Zuletzt gesehen
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
|
||||
Aktion
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredDevices.map((device) => (
|
||||
<tr
|
||||
key={device.id}
|
||||
className="border-b border-border hover:bg-card/50 transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3 font-mono text-foreground">
|
||||
{device.ipAddress}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs text-muted-foreground">
|
||||
{device.macAddress || '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-foreground">
|
||||
{device.hostname || '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground">
|
||||
{device.vendor || '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{device.isManaged ? (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30">
|
||||
<Wifi size={12} />
|
||||
Verwaltet
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium bg-muted/50 text-muted-foreground border border-border">
|
||||
<WifiOff size={12} />
|
||||
Unbekannt
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-muted-foreground text-xs">
|
||||
{formatRelativeTime(device.lastSeen)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => handleDelete(device.id)}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
Löschen
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user