RemoteDesktop.jsx

Go to the documentation of this file.

import { useState, useEffect, useRef } from 'react';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Monitor, X, Loader2, AlertCircle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
 
/**
 * RemoteDesktop Component
 * Provides web-based remote desktop access using MeshCentral
 */
export function RemoteDesktop({ agent, open, onClose }) {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [connectionUrl, setConnectionUrl] = useState(null);
    const [meshInfo, setMeshInfo] = useState(null);
    const iframeRef = useRef(null);
 
    useEffect(() => {
        if (open && agent) {
            loadMeshCentralUrl();
        }
    }, [open, agent]);
 
    const loadMeshCentralUrl = async () => {
        setLoading(true);
        setError(null);
 
        try {
            // Get MeshCentral URL for this agent
            const agentId = agent.agent_uuid || agent.agent_id;
            const response = await fetch(`/api/agent/${agentId}/meshcentral-url`);
 
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error || 'Failed to get MeshCentral URL');
            }
 
            const data = await response.json();
            setMeshInfo(data);
 
        } catch (err) {
            console.error('Failed to load MeshCentral URL:', err);
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };
 
    const handleConnect = () => {
        if (meshInfo?.remoteDesktopUrl) {
            // Open MeshCentral in new window
            window.open(meshInfo.remoteDesktopUrl, '_blank', 'width=1400,height=900');
        }
    };
 
    const handleConnectInline = () => {
        if (meshInfo?.remoteDesktopUrl) {
            setConnectionUrl(meshInfo.remoteDesktopUrl);
        }
    };
 
    const handleDisconnect = () => {
        setConnectionUrl(null);
    };
 
    const handleClose = () => {
        handleDisconnect();
        onClose();
    };
 
    if (!agent) return null;
 
    return (
        <Dialog open={open} onOpenChange={handleClose}>
            <DialogContent className="max-w-[95vw] max-h-[95vh] w-[1400px] h-[900px]">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <Monitor className="h-5 w-5" />
                        Remote Desktop - {agent.hostname || agent.agent_id}
                    </DialogTitle>
                    <DialogDescription>
                        {agent.last_ip && `Connecting to ${agent.last_ip}`}
                    </DialogDescription>
                </DialogHeader>
 
                {!connectionUrl ? (
                    <div className="space-y-4 py-4">
                        {error && (
                            <Alert variant="destructive">
                                <AlertCircle className="h-4 w-4" />
                                <AlertDescription>{error}</AlertDescription>
                            </Alert>
                        )}
 
                        {loading ? (
                            <div className="flex items-center justify-center py-8">
                                <Loader2 className="h-8 w-8 animate-spin text-primary" />
                                <span className="ml-2">Loading MeshCentral connection...</span>
                            </div>
                        ) : meshInfo ? (
                            <div className="space-y-4">
                                <div className="text-sm space-y-2">
                                    <p className="font-medium">MeshCentral Remote Desktop</p>
                                    <ul className="space-y-1 text-muted-foreground">
                                        <li>• Hostname: {meshInfo.hostname}</li>
                                        <li>• Agent ID: {meshInfo.agentId}</li>
                                        <li>• Node ID: {meshInfo.meshcentralNodeId}</li>
                                    </ul>
                                </div>
 
                                <div className="flex gap-2 pt-4">
                                    <Button onClick={handleConnect} className="flex-1">
                                        <Monitor className="mr-2 h-4 w-4" />
                                        Open in New Window
                                    </Button>
                                    <Button variant="outline" onClick={handleConnectInline} className="flex-1">
                                        Open Inline
                                    </Button>
                                </div>
 
                                <Button variant="outline" onClick={handleClose} className="w-full">
                                    Cancel
                                </Button>
                            </div>
                        ) : (
                            <div className="text-center py-8 text-muted-foreground">
                                <AlertCircle className="h-8 w-8 mx-auto mb-2" />
                                <p>MeshCentral not configured for this agent</p>
                            </div>
                        )}
                    </div>
                ) : (
                    <div className="flex flex-col h-full">
                        <div className="flex items-center justify-between mb-2">
                            <span className="text-sm text-muted-foreground">
                                MeshCentral Remote Desktop - {meshInfo?.hostname}
                            </span>
                            <Button variant="destructive" size="sm" onClick={handleDisconnect}>
                                <X className="h-4 w-4 mr-1" />
                                Close
                            </Button>
                        </div>
 
                        <div className="flex-1 border rounded-lg overflow-hidden bg-black">
                            <iframe
                                ref={iframeRef}
                                src={connectionUrl}
                                className="w-full h-full"
                                title="MeshCentral Remote Desktop"
                                allow="clipboard-read; clipboard-write"
                            />
                        </div>
                    </div>
                )}
            </DialogContent>
        </Dialog>
    );
}
 
export default RemoteDesktop;