fix: NaN-Metriken, Chart-Zeitachse und erweiterte Gerätedetails
Backend: - AgentGrpcService: JSONB-Serialisierung auf camelCase umgestellt (JsonSerializer.SerializeToElement mit CamelCase-Options) → behebt NaN bei CPU, RAM, Disk-Anzeige in der Detailseite - AgentGrpcService: Result-JSONB explizit camelCase (exitCode, stdout, stderr, success) → behebt fehlende Befehlsergebnisse im Frontend - AgentGrpcService: SignalR-Payload enthält nun Disks und NetworkInterfaces - Program.cs: SignalR JsonProtocol auf CamelCase konfiguriert Agent (Go): - Heartbeat sendet nun NetworkInterfaces aus dem Collector → Netzwerkschnittstellen werden im Frontend angezeigt Frontend: - useAgentSignalR: onLiveMetrics-Callback für direktes Live-Update (kein API-Roundtrip mehr, < 50ms Latenz) - AgentDetailPage komplett überarbeitet: - Geräteinformationen-Karte (IP, MAC, OS, Version, Enrolled-At, Last-Seen) - Live-Indikator auf MetricCards (grüner Puls-Punkt bei SignalR-Verbindung) - NaN-Schutz für alle berechneten Werte (safePercent, memPercent) - Chart-Reihenfolge umgekehrt: älteste links, neueste rechts - X-Achse: adaptives Intervall verhindert Label-Überlappung - Netzwerkschnittstellen-Tabelle mit Traffic (RX/TX) - Festplatten mit Fortschrittsbalken + Filesystem-Typ - Strg+Enter für schnelle Befehlsausführung Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,31 +1,23 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useEffect, useRef, useCallback } from 'react'
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import * as signalR from '@microsoft/signalr'
|
||||
import { useSignalR } from './useSignalR'
|
||||
import type { SystemMetrics } from '../api/types'
|
||||
|
||||
const HUB_URL = '/hubs/rmm'
|
||||
|
||||
/**
|
||||
* Verbindet mit dem SignalR Hub und hört auf globale Agent-Events.
|
||||
* Invalidiert TanStack Query-Caches bei Updates.
|
||||
*/
|
||||
export function useGlobalSignalR() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { status } = useSignalR({
|
||||
url: HUB_URL,
|
||||
onConnected: (connection) => {
|
||||
connection.on('AgentStatusChanged', (agentId: string, status: string, _lastSeen: string) => {
|
||||
console.debug('[SignalR] AgentStatusChanged', agentId, status)
|
||||
// Agents-Liste invalidieren damit Dashboard aktuell bleibt
|
||||
connection.on('AgentStatusChanged', (agentId: string, _status: string, _lastSeen: string) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['agents'] })
|
||||
// Einzelnen Agent-Cache aktualisieren
|
||||
queryClient.invalidateQueries({ queryKey: ['agent', agentId] })
|
||||
})
|
||||
|
||||
connection.on('AlertTriggered', (_agentId: string, agentHostname: string, ruleName: string, _message: string, _severity: string) => {
|
||||
console.debug('[SignalR] AlertTriggered', agentHostname, ruleName)
|
||||
// Alerts-Liste invalidieren
|
||||
connection.on('AlertTriggered', () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['alerts'] })
|
||||
})
|
||||
},
|
||||
@@ -35,36 +27,47 @@ export function useGlobalSignalR() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Tritt der Agent-spezifischen Gruppe bei und hört auf Metriken + Command-Results.
|
||||
* Wird in AgentDetailPage verwendet.
|
||||
* Tritt der Agent-Gruppe bei und empfängt Live-Metriken via SignalR.
|
||||
* onLiveMetrics wird mit den aktuellen Metriken aufgerufen (direkt, ohne API-Roundtrip).
|
||||
*/
|
||||
export function useAgentSignalR(agentId: string) {
|
||||
export function useAgentSignalR(
|
||||
agentId: string,
|
||||
onLiveMetrics?: (metrics: SystemMetrics) => void,
|
||||
) {
|
||||
const queryClient = useQueryClient()
|
||||
const connectionRef = useRef<signalR.HubConnection | null>(null)
|
||||
const onLiveMetricsRef = useRef(onLiveMetrics)
|
||||
|
||||
// Ref aktuell halten ohne Re-Subscribe zu triggern
|
||||
useEffect(() => {
|
||||
onLiveMetricsRef.current = onLiveMetrics
|
||||
}, [onLiveMetrics])
|
||||
|
||||
const handleMetrics = useCallback((id: string, metrics: SystemMetrics) => {
|
||||
if (id !== agentId) return
|
||||
// Live-Callback aufrufen (kein API-Call nötig)
|
||||
onLiveMetricsRef.current?.(metrics)
|
||||
// Query-Cache auch invalidieren damit historische Daten aktuell bleiben
|
||||
queryClient.invalidateQueries({ queryKey: ['agentMetrics', agentId] })
|
||||
}, [agentId, queryClient])
|
||||
|
||||
const { status } = useSignalR({
|
||||
url: HUB_URL,
|
||||
onConnected: async (connection) => {
|
||||
connectionRef.current = connection
|
||||
|
||||
// Gruppe beitreten
|
||||
try {
|
||||
await connection.invoke('JoinAgentGroup', agentId)
|
||||
} catch (err) {
|
||||
console.warn('[SignalR] JoinAgentGroup failed:', err)
|
||||
}
|
||||
|
||||
connection.on('AgentMetricsUpdated', (id: string) => {
|
||||
if (id === agentId) {
|
||||
// Metriken neu laden
|
||||
queryClient.invalidateQueries({ queryKey: ['agentMetrics', agentId] })
|
||||
}
|
||||
})
|
||||
connection.on('AgentMetricsUpdated', handleMetrics)
|
||||
|
||||
connection.on('CommandResultUpdated', (_taskId: string, id: string) => {
|
||||
if (id === agentId) {
|
||||
// Tasks neu laden
|
||||
queryClient.invalidateQueries({ queryKey: ['agentTasks', agentId] })
|
||||
queryClient.invalidateQueries({ queryKey: ['agent', agentId] })
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -73,7 +76,6 @@ export function useAgentSignalR(agentId: string) {
|
||||
},
|
||||
})
|
||||
|
||||
// Gruppe verlassen wenn Komponente unmountet
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
connectionRef.current?.invoke('LeaveAgentGroup', agentId).catch(() => {})
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user