feat: implement Phase 4 — SignalR real-time updates
Backend: - RmmHub with typed IRmmHubClient interface (AgentMetricsUpdated, AgentStatusChanged, CommandResultUpdated) - JoinAgentGroup / LeaveAgentGroup for per-agent subscriptions - AgentGrpcService now pushes to SignalR after every Heartbeat and CommandResult - Program.cs maps /hubs/rmm Frontend: - useSignalR hook with exponential backoff reconnect (0s/2s/10s/30s) - useGlobalSignalR: invalidates agents query on AgentStatusChanged - useAgentSignalR: joins agent group, invalidates metrics/tasks on updates - DashboardPage: live agent status updates via SignalR - AgentDetailPage: live metrics/command results + connection status indicator Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,8 @@
|
|||||||
using System.Text.Json;
|
using System.Text.Json;
|
||||||
using Grpc.Core;
|
using Grpc.Core;
|
||||||
|
using Microsoft.AspNetCore.SignalR;
|
||||||
using Microsoft.EntityFrameworkCore;
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
using NexusRMM.Api.Hubs;
|
||||||
using NexusRMM.Core.Models;
|
using NexusRMM.Core.Models;
|
||||||
using NexusRMM.Infrastructure.Data;
|
using NexusRMM.Infrastructure.Data;
|
||||||
using NexusRMM.Protos;
|
using NexusRMM.Protos;
|
||||||
@@ -13,11 +15,13 @@ public class AgentGrpcService : AgentService.AgentServiceBase
|
|||||||
{
|
{
|
||||||
private readonly RmmDbContext _db;
|
private readonly RmmDbContext _db;
|
||||||
private readonly ILogger<AgentGrpcService> _logger;
|
private readonly ILogger<AgentGrpcService> _logger;
|
||||||
|
private readonly IHubContext<RmmHub, IRmmHubClient> _hub;
|
||||||
|
|
||||||
public AgentGrpcService(RmmDbContext db, ILogger<AgentGrpcService> logger)
|
public AgentGrpcService(RmmDbContext db, ILogger<AgentGrpcService> logger, IHubContext<RmmHub, IRmmHubClient> hub)
|
||||||
{
|
{
|
||||||
_db = db;
|
_db = db;
|
||||||
_logger = logger;
|
_logger = logger;
|
||||||
|
_hub = hub;
|
||||||
}
|
}
|
||||||
|
|
||||||
public override async Task<EnrollResponse> Enroll(EnrollRequest request, ServerCallContext context)
|
public override async Task<EnrollResponse> Enroll(EnrollRequest request, ServerCallContext context)
|
||||||
@@ -82,6 +86,22 @@ public class AgentGrpcService : AgentService.AgentServiceBase
|
|||||||
}
|
}
|
||||||
|
|
||||||
await _db.SaveChangesAsync();
|
await _db.SaveChangesAsync();
|
||||||
|
|
||||||
|
// SignalR: Metriken an agent-Gruppe pushen
|
||||||
|
await _hub.Clients.Group($"agent-{agentId}")
|
||||||
|
.AgentMetricsUpdated(request.AgentId, new
|
||||||
|
{
|
||||||
|
CpuUsagePercent = request.Metrics?.CpuUsagePercent ?? 0,
|
||||||
|
MemoryUsagePercent = request.Metrics?.MemoryUsagePercent ?? 0,
|
||||||
|
MemoryTotalBytes = request.Metrics?.MemoryTotalBytes ?? 0,
|
||||||
|
MemoryAvailableBytes = request.Metrics?.MemoryAvailableBytes ?? 0,
|
||||||
|
UptimeSeconds = request.Metrics?.UptimeSeconds ?? 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
// SignalR: Status-Änderung an alle Clients pushen
|
||||||
|
await _hub.Clients.All
|
||||||
|
.AgentStatusChanged(request.AgentId, "Online", DateTime.UtcNow.ToString("O"));
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -102,6 +122,11 @@ public class AgentGrpcService : AgentService.AgentServiceBase
|
|||||||
});
|
});
|
||||||
|
|
||||||
await _db.SaveChangesAsync();
|
await _db.SaveChangesAsync();
|
||||||
|
|
||||||
|
// SignalR: Command-Ergebnis an agent-Gruppe pushen
|
||||||
|
await _hub.Clients.Group($"agent-{request.AgentId}")
|
||||||
|
.CommandResultUpdated(request.CommandId, request.AgentId, request.Success, request.ExitCode);
|
||||||
|
|
||||||
return new CommandResultResponse();
|
return new CommandResultResponse();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
16
Backend/src/NexusRMM.Api/Hubs/IRmmHubClient.cs
Normal file
16
Backend/src/NexusRMM.Api/Hubs/IRmmHubClient.cs
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
namespace NexusRMM.Api.Hubs;
|
||||||
|
|
||||||
|
/// <summary>
|
||||||
|
/// Typed SignalR client interface — definiert was der Server zum Frontend pushen kann.
|
||||||
|
/// </summary>
|
||||||
|
public interface IRmmHubClient
|
||||||
|
{
|
||||||
|
/// <summary>Neue Metriken für einen Agent verfügbar (an agent-Gruppe gepusht)</summary>
|
||||||
|
Task AgentMetricsUpdated(string agentId, object metrics);
|
||||||
|
|
||||||
|
/// <summary>Agent-Status hat sich geändert (an alle Clients gepusht)</summary>
|
||||||
|
Task AgentStatusChanged(string agentId, string status, string lastSeen);
|
||||||
|
|
||||||
|
/// <summary>Command-Ergebnis verfügbar (an agent-Gruppe gepusht)</summary>
|
||||||
|
Task CommandResultUpdated(string taskId, string agentId, bool success, int exitCode);
|
||||||
|
}
|
||||||
38
Backend/src/NexusRMM.Api/Hubs/RmmHub.cs
Normal file
38
Backend/src/NexusRMM.Api/Hubs/RmmHub.cs
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
using Microsoft.AspNetCore.SignalR;
|
||||||
|
|
||||||
|
namespace NexusRMM.Api.Hubs;
|
||||||
|
|
||||||
|
public class RmmHub : Hub<IRmmHubClient>
|
||||||
|
{
|
||||||
|
private readonly ILogger<RmmHub> _logger;
|
||||||
|
|
||||||
|
public RmmHub(ILogger<RmmHub> logger)
|
||||||
|
{
|
||||||
|
_logger = logger;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>Frontend tritt der Gruppe für einen bestimmten Agent bei</summary>
|
||||||
|
public async Task JoinAgentGroup(string agentId)
|
||||||
|
{
|
||||||
|
await Groups.AddToGroupAsync(Context.ConnectionId, $"agent-{agentId}");
|
||||||
|
_logger.LogDebug("Client {ConnectionId} joined group agent-{AgentId}", Context.ConnectionId, agentId);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// <summary>Frontend verlässt die Gruppe für einen Agent</summary>
|
||||||
|
public async Task LeaveAgentGroup(string agentId)
|
||||||
|
{
|
||||||
|
await Groups.RemoveFromGroupAsync(Context.ConnectionId, $"agent-{agentId}");
|
||||||
|
}
|
||||||
|
|
||||||
|
public override async Task OnConnectedAsync()
|
||||||
|
{
|
||||||
|
_logger.LogInformation("SignalR client connected: {ConnectionId}", Context.ConnectionId);
|
||||||
|
await base.OnConnectedAsync();
|
||||||
|
}
|
||||||
|
|
||||||
|
public override async Task OnDisconnectedAsync(Exception? exception)
|
||||||
|
{
|
||||||
|
_logger.LogInformation("SignalR client disconnected: {ConnectionId}", Context.ConnectionId);
|
||||||
|
await base.OnDisconnectedAsync(exception);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
using Microsoft.AspNetCore.Server.Kestrel.Core;
|
using Microsoft.AspNetCore.Server.Kestrel.Core;
|
||||||
using Microsoft.EntityFrameworkCore;
|
using Microsoft.EntityFrameworkCore;
|
||||||
using NexusRMM.Api.GrpcServices;
|
using NexusRMM.Api.GrpcServices;
|
||||||
|
using NexusRMM.Api.Hubs;
|
||||||
using NexusRMM.Infrastructure.Data;
|
using NexusRMM.Infrastructure.Data;
|
||||||
|
|
||||||
var builder = WebApplication.CreateBuilder(args);
|
var builder = WebApplication.CreateBuilder(args);
|
||||||
@@ -43,5 +44,6 @@ if (app.Environment.IsDevelopment())
|
|||||||
app.UseCors();
|
app.UseCors();
|
||||||
app.MapGrpcService<AgentGrpcService>();
|
app.MapGrpcService<AgentGrpcService>();
|
||||||
app.MapControllers();
|
app.MapControllers();
|
||||||
|
app.MapHub<RmmHub>("/hubs/rmm");
|
||||||
|
|
||||||
app.Run();
|
app.Run();
|
||||||
|
|||||||
78
Frontend/src/hooks/useAgentSignalR.ts
Normal file
78
Frontend/src/hooks/useAgentSignalR.ts
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
import { useQueryClient } from '@tanstack/react-query'
|
||||||
|
import * as signalR from '@microsoft/signalr'
|
||||||
|
import { useSignalR } from './useSignalR'
|
||||||
|
|
||||||
|
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
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['agents'] })
|
||||||
|
// Einzelnen Agent-Cache aktualisieren
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['agent', agentId] })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return { status }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tritt der Agent-spezifischen Gruppe bei und hört auf Metriken + Command-Results.
|
||||||
|
* Wird in AgentDetailPage verwendet.
|
||||||
|
*/
|
||||||
|
export function useAgentSignalR(agentId: string) {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const connectionRef = useRef<signalR.HubConnection | null>(null)
|
||||||
|
|
||||||
|
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('CommandResultUpdated', (_taskId: string, id: string) => {
|
||||||
|
if (id === agentId) {
|
||||||
|
// Tasks neu laden
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['agentTasks', agentId] })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onDisconnected: () => {
|
||||||
|
connectionRef.current = null
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Gruppe verlassen wenn Komponente unmountet
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
connectionRef.current?.invoke('LeaveAgentGroup', agentId).catch(() => {})
|
||||||
|
}
|
||||||
|
}, [agentId])
|
||||||
|
|
||||||
|
return { status }
|
||||||
|
}
|
||||||
58
Frontend/src/hooks/useSignalR.ts
Normal file
58
Frontend/src/hooks/useSignalR.ts
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
import * as signalR from '@microsoft/signalr'
|
||||||
|
|
||||||
|
export type SignalRStatus = 'connecting' | 'connected' | 'disconnected' | 'reconnecting'
|
||||||
|
|
||||||
|
export interface UseSignalROptions {
|
||||||
|
url: string
|
||||||
|
onConnected?: (connection: signalR.HubConnection) => void
|
||||||
|
onDisconnected?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSignalR({ url, onConnected, onDisconnected }: UseSignalROptions) {
|
||||||
|
const connectionRef = useRef<signalR.HubConnection | null>(null)
|
||||||
|
const [status, setStatus] = useState<SignalRStatus>('disconnected')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const connection = new signalR.HubConnectionBuilder()
|
||||||
|
.withUrl(url)
|
||||||
|
.withAutomaticReconnect({
|
||||||
|
nextRetryDelayInMilliseconds: (retryContext) => {
|
||||||
|
// Exponentielles Backoff: 0s, 2s, 10s, 30s, dann alle 30s
|
||||||
|
const delays = [0, 2000, 10000, 30000]
|
||||||
|
return delays[Math.min(retryContext.previousRetryCount, delays.length - 1)]
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.configureLogging(signalR.LogLevel.Warning)
|
||||||
|
.build()
|
||||||
|
|
||||||
|
connectionRef.current = connection
|
||||||
|
|
||||||
|
connection.onreconnecting(() => setStatus('reconnecting'))
|
||||||
|
connection.onreconnected(() => {
|
||||||
|
setStatus('connected')
|
||||||
|
onConnected?.(connection)
|
||||||
|
})
|
||||||
|
connection.onclose(() => {
|
||||||
|
setStatus('disconnected')
|
||||||
|
onDisconnected?.()
|
||||||
|
})
|
||||||
|
|
||||||
|
setStatus('connecting')
|
||||||
|
connection.start()
|
||||||
|
.then(() => {
|
||||||
|
setStatus('connected')
|
||||||
|
onConnected?.(connection)
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.warn('SignalR connection failed:', err)
|
||||||
|
setStatus('disconnected')
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
connection.stop()
|
||||||
|
}
|
||||||
|
}, [url]) // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
|
||||||
|
return { connection: connectionRef.current, status }
|
||||||
|
}
|
||||||
@@ -22,6 +22,7 @@ import {
|
|||||||
import { agentsApi, tasksApi } from '../api/client'
|
import { agentsApi, tasksApi } from '../api/client'
|
||||||
import type { TaskItem, TaskType } from '../api/types'
|
import type { TaskItem, TaskType } from '../api/types'
|
||||||
import { cn } from '../lib/utils'
|
import { cn } from '../lib/utils'
|
||||||
|
import { useAgentSignalR } from '../hooks/useAgentSignalR'
|
||||||
|
|
||||||
interface AgentDetailPageProps {
|
interface AgentDetailPageProps {
|
||||||
agentId: string
|
agentId: string
|
||||||
@@ -34,6 +35,9 @@ export function AgentDetailPage({ agentId, onBack }: AgentDetailPageProps) {
|
|||||||
const [lastResult, setLastResult] = useState<TaskItem | null>(null)
|
const [lastResult, setLastResult] = useState<TaskItem | null>(null)
|
||||||
const queryClient = useQueryClient()
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
// SignalR: Live-Updates für Metriken und Command-Results
|
||||||
|
const { status: signalRStatus } = useAgentSignalR(agentId)
|
||||||
|
|
||||||
// Fetch Agent Details
|
// Fetch Agent Details
|
||||||
const { data: agent, isLoading: agentLoading } = useQuery({
|
const { data: agent, isLoading: agentLoading } = useQuery({
|
||||||
queryKey: ['agent', agentId],
|
queryKey: ['agent', agentId],
|
||||||
@@ -156,6 +160,16 @@ export function AgentDetailPage({ agentId, onBack }: AgentDetailPageProps) {
|
|||||||
<span className={cn('text-sm font-medium', isOnline ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400')}>
|
<span className={cn('text-sm font-medium', isOnline ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400')}>
|
||||||
{agent.status}
|
{agent.status}
|
||||||
</span>
|
</span>
|
||||||
|
<span className={cn(
|
||||||
|
'text-xs px-2 py-0.5 rounded-full ml-2',
|
||||||
|
signalRStatus === 'connected'
|
||||||
|
? 'bg-green-500/20 text-green-400'
|
||||||
|
: signalRStatus === 'reconnecting'
|
||||||
|
? 'bg-yellow-500/20 text-yellow-400'
|
||||||
|
: 'bg-gray-500/20 text-gray-400'
|
||||||
|
)}>
|
||||||
|
{signalRStatus === 'connected' ? 'Live' : signalRStatus === 'reconnecting' ? 'Verbindet...' : 'Offline'}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import {
|
|||||||
import { agentsApi, ticketsApi } from '../api/client'
|
import { agentsApi, ticketsApi } from '../api/client'
|
||||||
import type { Agent } from '../api/types'
|
import type { Agent } from '../api/types'
|
||||||
import { cn } from '../lib/utils'
|
import { cn } from '../lib/utils'
|
||||||
|
import { useGlobalSignalR } from '../hooks/useAgentSignalR'
|
||||||
|
|
||||||
interface DashboardPageProps {
|
interface DashboardPageProps {
|
||||||
onSelectAgent?: (agentId: string) => void
|
onSelectAgent?: (agentId: string) => void
|
||||||
@@ -103,6 +104,9 @@ export function DashboardPage({ onSelectAgent }: DashboardPageProps) {
|
|||||||
const [sortColumn, setSortColumn] = useState<keyof Agent>('hostname')
|
const [sortColumn, setSortColumn] = useState<keyof Agent>('hostname')
|
||||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
||||||
|
|
||||||
|
// SignalR: Live-Updates für Agent-Status
|
||||||
|
useGlobalSignalR()
|
||||||
|
|
||||||
// Fetch agents data
|
// Fetch agents data
|
||||||
const {
|
const {
|
||||||
data: agents = [],
|
data: agents = [],
|
||||||
|
|||||||
Reference in New Issue
Block a user