MeshCentralEmbed.jsx

Go to the documentation of this file.

import React from 'react';
import { apiFetch } from '../lib/api';
import './MeshCentralEmbed.css';
 
/**
 * MeshCentral Embed Component
 * Embeds MeshCentral views directly into the dashboard with automatic authentication
 * 
 * View Modes:
 * 10 = General (device overview)
 * 11 = Desktop (remote desktop)
 * 12 = Terminal (command line)
 * 13 = Files (file manager)
 * 14 = Intel AMT
 * 15 = Console
 * 16 = Events
 * 17 = Details (hardware info)
 * 19 = Plugins
 */
export default function MeshCentralEmbed({ agentId, nodeId, viewMode = 11, title = 'Remote Desktop' }) {
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
    const [iframeUrl, setIframeUrl] = React.useState(null);
    const [sessionInfo, setSessionInfo] = React.useState(null);
    const iframeRef = React.useRef(null);
 
    // Load authenticated MeshCentral session
    React.useEffect(() => {
        async function createSession() {
            if (!agentId && !nodeId) {
                setError('No agent ID or node ID provided');
                setLoading(false);
                return;
            }
 
            try {
                setLoading(true);
                setError(null);
 
                // Call backend to create authenticated session
                const response = await apiFetch(`/meshcentral/session/${agentId}`, {
                    method: 'POST',
                    body: JSON.stringify({ viewMode })
                });
 
                if (!response.ok) {
                    const data = await response.json();
                    throw new Error(data.message || data.error || 'Failed to create MeshCentral session');
                }
 
                const data = await response.json();
 
                if (!data.iframeUrl) {
                    throw new Error('No iframe URL returned from server');
                }
 
                setIframeUrl(data.iframeUrl);
                setSessionInfo(data);
                console.log('[MeshCentral] Session created:', data.sessionToken);
 
            } catch (err) {
                console.error('[MeshCentral] Failed to create session:', err);
                setError(err.message || 'Failed to connect to MeshCentral');
                setLoading(false);
            }
        }
 
        createSession();
    }, [agentId, nodeId, viewMode]);
 
    if (!agentId && !nodeId) {
        return (
            <div className="meshcentral-error">
                <div className="error-icon">⚠️</div>
                <h3>MeshAgent Not Connected</h3>
                <p>This device is not connected to MeshCentral.</p>
                <p className="error-hint">
                    Please ensure the MeshAgent is installed and running on this device.
                </p>
            </div>
        );
    }
 
    const handleLoad = () => {
        setLoading(false);
        setError(null);
        console.log('[MeshCentral] iframe loaded successfully');
    };
 
    const handleError = () => {
        setError('Failed to load MeshCentral. Please check your connection.');
        setLoading(false);
    };
 
    const openInNewWindow = () => {
        if (iframeUrl) {
            window.open(iframeUrl, '_blank', 'width=1400,height=900');
        }
    };
 
    const retry = () => {
        window.location.reload();
    };
 
    return (
        <div className="meshcentral-embed-container">
            <div className="meshcentral-header">
                <h2>{title}</h2>
                <div className="meshcentral-actions">
                    {sessionInfo && (
                        <span className="session-info">
                            Connected to {sessionInfo.agent?.hostname || 'device'}
                        </span>
                    )}
                    {iframeUrl && (
                        <button onClick={openInNewWindow} className="btn btn-secondary">
                            <span className="material-symbols-outlined">open_in_new</span>
                            Open in New Window
                        </button>
                    )}
                </div>
            </div>
 
            {loading && !error && (
                <div className="meshcentral-loading">
                    <div className="spinner"></div>
                    <p>Connecting to MeshCentral...</p>
                    <p className="loading-hint">Establishing secure session</p>
                </div>
            )}
 
            {error && (
                <div className="meshcentral-error">
                    <div className="error-icon">❌</div>
                    <h3>{error}</h3>
                    <div className="error-actions">
                        <button onClick={retry} className="btn btn-primary">
                            Retry
                        </button>
                        {iframeUrl && (
                            <button onClick={openInNewWindow} className="btn btn-secondary">
                                Open in New Window Instead
                            </button>
                        )}
                    </div>
                </div>
            )}
 
            {iframeUrl && (
                <iframe
                    ref={iframeRef}
                    src={iframeUrl}
                    className="meshcentral-iframe"
                    title={title}
                    sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-downloads allow-modals"
                    onLoad={handleLoad}
                    onError={handleError}
                    style={{ display: loading || error ? 'none' : 'block' }}
                />
            )}
        </div>
    );
}
 
// Export view mode constants for easy use
export const VIEWMODE = {
    GENERAL: 10,
    DESKTOP: 11,
    TERMINAL: 12,
    FILES: 13,
    INTEL_AMT: 14,
    CONSOLE: 15,
    EVENTS: 16,
    DETAILS: 17,
    PLUGINS: 19
};