Add Remote Desktop screen selector + new-tab button (v2.2.0)
- CaptureModeRunner: screen index param (0=all, 1-N=specific monitor) - RtcService: reads screen from rdp_start JSON, passes to capture helper - Program.cs: parses optional screen index arg for --rdp-capture - RemoteDesktopPanel: screen dropdown (Alle/1-4), new-tab button - RdpPage: fullscreen standalone page at /rdp/:agentId - AgentDetailPage: removed dead _RemoteDesktopOld_unused code Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
170
frontend/src/components/common/RemoteDesktopPanel.jsx
Normal file
170
frontend/src/components/common/RemoteDesktopPanel.jsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
const SCREEN_OPTIONS = [
|
||||
{ value: 0, label: 'Alle Bildschirme' },
|
||||
{ value: 1, label: 'Bildschirm 1' },
|
||||
{ value: 2, label: 'Bildschirm 2' },
|
||||
{ value: 3, label: 'Bildschirm 3' },
|
||||
{ value: 4, label: 'Bildschirm 4' },
|
||||
];
|
||||
|
||||
export default function RemoteDesktopPanel({ agentId, agentHostname, autoConnect = false, fullscreen = false }) {
|
||||
const [status, setStatus] = useState('idle');
|
||||
const [error, setError] = useState('');
|
||||
const [fps, setFps] = useState(0);
|
||||
const [resolution, setResolution] = useState('');
|
||||
const [screenIdx, setScreenIdx] = useState(0);
|
||||
const canvasRef = useRef(null);
|
||||
const wsRef = useRef(null);
|
||||
const fpsRef = useRef({ count: 0, last: Date.now() });
|
||||
|
||||
const getWsUrl = () => {
|
||||
const token = localStorage.getItem('token');
|
||||
const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
return `${proto}://${window.location.host}/ws?type=rdp&agentId=${agentId}&token=${token}`;
|
||||
};
|
||||
|
||||
const connect = (screen = screenIdx) => {
|
||||
setStatus('connecting');
|
||||
setError('');
|
||||
const ws = new WebSocket(getWsUrl());
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
ws.send(JSON.stringify({ type: 'rdp_start', screen }));
|
||||
setStatus('connected');
|
||||
};
|
||||
|
||||
ws.onmessage = (e) => {
|
||||
try {
|
||||
const msg = JSON.parse(e.data);
|
||||
if (msg.type === 'rdp_frame') {
|
||||
const img = new window.Image();
|
||||
img.onload = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
if (canvas.width !== img.naturalWidth) canvas.width = img.naturalWidth;
|
||||
if (canvas.height !== img.naturalHeight) canvas.height = img.naturalHeight;
|
||||
canvas.getContext('2d').drawImage(img, 0, 0);
|
||||
if (msg.w && msg.h) setResolution(`${msg.w}×${msg.h}`);
|
||||
const now = Date.now();
|
||||
fpsRef.current.count++;
|
||||
if (now - fpsRef.current.last >= 1000) {
|
||||
setFps(fpsRef.current.count);
|
||||
fpsRef.current = { count: 0, last: now };
|
||||
}
|
||||
};
|
||||
img.src = 'data:image/jpeg;base64,' + msg.data;
|
||||
} else if (msg.type === 'rdp_disconnected') {
|
||||
setStatus('idle');
|
||||
setError('Agent hat die Verbindung getrennt');
|
||||
}
|
||||
} catch { }
|
||||
};
|
||||
|
||||
ws.onerror = () => { setStatus('error'); setError('WebSocket-Fehler'); };
|
||||
ws.onclose = () => setStatus(s => s === 'connected' ? 'idle' : s);
|
||||
};
|
||||
|
||||
const disconnect = () => {
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify({ type: 'rdp_stop' }));
|
||||
wsRef.current.close();
|
||||
}
|
||||
wsRef.current = null;
|
||||
const canvas = canvasRef.current;
|
||||
if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
|
||||
setStatus('idle');
|
||||
setFps(0);
|
||||
setResolution('');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (autoConnect) connect(screenIdx);
|
||||
return () => { wsRef.current?.close(); };
|
||||
}, []);
|
||||
|
||||
const statusColor = { connected: '#34d399', connecting: '#f59e0b', error: '#ef4444', idle: '#6b7280' }[status];
|
||||
const statusLabel = { connected: 'Verbunden', connecting: 'Verbinde…', error: 'Fehler', idle: 'Getrennt' }[status];
|
||||
|
||||
const containerStyle = fullscreen
|
||||
? { display: 'flex', flexDirection: 'column', height: '100vh', background: '#0d1117' }
|
||||
: { marginTop: 24, borderRadius: 16, border: '1px solid var(--border-color)', overflow: 'hidden', background: 'var(--bg-secondary)' };
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
{/* Header */}
|
||||
<div style={{ padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', flexShrink: 0 }}>
|
||||
<span style={{ fontSize: 15 }}>🖥️</span>
|
||||
<span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>Remote Desktop</span>
|
||||
{agentHostname && <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{agentHostname}</span>}
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12 }}>
|
||||
<span style={{ width: 7, height: 7, borderRadius: '50%', background: statusColor, display: 'inline-block' }} />
|
||||
<span style={{ color: statusColor }}>{statusLabel}</span>
|
||||
</span>
|
||||
{status === 'connected' && resolution && (
|
||||
<span style={{ fontSize: 11, color: 'var(--text-muted)', background: 'rgba(255,255,255,0.06)', borderRadius: 6, padding: '2px 8px' }}>
|
||||
{resolution} · {fps} fps
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Screen-Selektor */}
|
||||
<select
|
||||
value={screenIdx}
|
||||
onChange={e => setScreenIdx(Number(e.target.value))}
|
||||
disabled={status === 'connected' || status === 'connecting'}
|
||||
style={{ fontSize: 12, padding: '3px 8px', borderRadius: 7, border: '1px solid var(--border-color)', background: 'var(--bg-tertiary)', color: 'var(--text-primary)', cursor: 'pointer', marginLeft: 4 }}
|
||||
>
|
||||
{SCREEN_OPTIONS.map(o => (
|
||||
<option key={o.value} value={o.value}>{o.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
|
||||
{!fullscreen && (
|
||||
<button
|
||||
onClick={() => window.open(`/rdp/${agentId}?screen=${screenIdx}`, '_blank')}
|
||||
title="In neuem Tab öffnen"
|
||||
style={{ background: 'transparent', border: '1px solid var(--border-color)', borderRadius: 8, color: 'var(--text-muted)', padding: '4px 10px', fontSize: 12, cursor: 'pointer' }}
|
||||
>
|
||||
↗
|
||||
</button>
|
||||
)}
|
||||
{status === 'idle' || status === 'error' ? (
|
||||
<button onClick={() => connect(screenIdx)} style={{ background: '#238636', border: 'none', borderRadius: 8, color: '#fff', padding: '5px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>
|
||||
Verbinden
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={disconnect} style={{ background: '#21262d', border: '1px solid #30363d', borderRadius: 8, color: '#cdd9e5', padding: '5px 14px', fontSize: 12, cursor: 'pointer' }}>
|
||||
Trennen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Canvas-Bereich */}
|
||||
{status === 'idle' || status === 'error' ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: fullscreen ? 0 : 320, flex: fullscreen ? 1 : undefined, gap: 14, color: 'var(--text-muted)' }}>
|
||||
<span style={{ fontSize: 44 }}>🖥️</span>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 4 }}>Remote Desktop</div>
|
||||
<div style={{ fontSize: 12 }}>Bildschirmübertragung via WebSocket · Agent v2.2.0+</div>
|
||||
{error && <div style={{ marginTop: 8, color: '#ef4444', fontSize: 12 }}>{error}</div>}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ background: '#000', lineHeight: 0, position: 'relative', flex: fullscreen ? 1 : undefined, overflow: fullscreen ? 'hidden' : undefined }}>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{ width: '100%', height: fullscreen ? '100%' : 'auto', display: 'block', objectFit: 'contain' }}
|
||||
/>
|
||||
{status === 'connecting' && (
|
||||
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.8)', color: '#fff', fontSize: 14, gap: 10 }}>
|
||||
<span style={{ animation: 'spin 1s linear infinite', display: 'inline-block' }}>⏳</span> Verbinde…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user