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:
@@ -5,6 +5,7 @@ import assetService from '../services/assetService';
|
||||
import api from '../services/api';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import RemoteDesktopPanel from '../components/common/RemoteDesktopPanel';
|
||||
|
||||
// ─── CSS Variables injected inline (design from Device Detail.html) ─────────────
|
||||
|
||||
@@ -289,136 +290,11 @@ function RemoteShell({ agentId, agentHostname }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Remote Desktop (JPEG-over-WebSocket) ────────────────────────────────────────
|
||||
// ─── Remote Desktop (via RemoteDesktopPanel) ─────────────────────────────────────
|
||||
|
||||
function RemoteDesktop({ agentId, agentHostname }) {
|
||||
const [status, setStatus] = useState('idle'); // idle | connecting | connected | error
|
||||
const [error, setError] = useState('');
|
||||
const [fps, setFps] = useState(0);
|
||||
const [resolution, setResolution] = useState('');
|
||||
const canvasRef = useRef(null);
|
||||
const wsRef = useRef(null);
|
||||
const fpsCounterRef = 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 = () => {
|
||||
setStatus('connecting');
|
||||
setError('');
|
||||
|
||||
const ws = new WebSocket(getWsUrl());
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
ws.send(JSON.stringify({ type: 'rdp_start' }));
|
||||
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}`);
|
||||
// FPS-Counter
|
||||
const now = Date.now();
|
||||
fpsCounterRef.current.count++;
|
||||
if (now - fpsCounterRef.current.last >= 1000) {
|
||||
setFps(fpsCounterRef.current.count);
|
||||
fpsCounterRef.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 { /* ignorieren */ }
|
||||
};
|
||||
|
||||
ws.onerror = () => { setStatus('error'); setError('WebSocket-Fehler'); };
|
||||
ws.onclose = () => { setStatus('idle'); };
|
||||
};
|
||||
|
||||
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(() => () => { wsRef.current?.close(); }, []);
|
||||
|
||||
const statusColor = status === 'connected' ? '#34d399' : status === 'connecting' ? '#f59e0b' : status === 'error' ? '#ef4444' : '#6b7280';
|
||||
const statusLabel = { idle: 'Getrennt', connecting: 'Verbinde…', connected: 'Verbunden', error: 'Fehler' }[status];
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: 24, borderRadius: 16, border: '1px solid var(--border-color)', overflow: 'hidden', background: 'var(--bg-secondary)' }}>
|
||||
<div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-color)', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
||||
<span style={{ fontSize: 15 }}>🖥️</span>
|
||||
<span style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>Remote Desktop</span>
|
||||
<span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 4 }}>{agentHostname}</span>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12 }}>
|
||||
<span style={{ width: 8, height: 8, 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: 'var(--bg-tertiary)', borderRadius: 6, padding: '2px 8px' }}>
|
||||
{resolution} · {fps} fps
|
||||
</span>
|
||||
)}
|
||||
<div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
|
||||
{status === 'idle' || status === 'error' ? (
|
||||
<button onClick={connect} 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>
|
||||
|
||||
{status === 'idle' || status === 'error' ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 300, gap: 16, color: 'var(--text-muted)' }}>
|
||||
<span style={{ fontSize: 48 }}>🖥️</span>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 6 }}>Remote Desktop (Beta)</div>
|
||||
<div style={{ fontSize: 13 }}>Bildschirmübertragung via WebSocket — Agent muss v2.2.0+ haben</div>
|
||||
{error && <div style={{ marginTop: 8, color: '#ef4444', fontSize: 12 }}>{error}</div>}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ background: '#000', lineHeight: 0, position: 'relative', minHeight: 400 }}>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{ width: '100%', height: 'auto', display: 'block' }}
|
||||
/>
|
||||
{status === 'connecting' && (
|
||||
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)', color: '#fff', fontSize: 14 }}>
|
||||
Verbinde…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<RemoteDesktopPanel agentId={agentId} agentHostname={agentHostname} />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user