TabTerminal_NEW.jsx

Go to the documentation of this file.

import React from 'react';
import MeshCentralEmbed, { VIEWMODE } from '../../components/MeshCentralEmbed';
import { apiFetch } from '../../lib/api';
 
export default function TabTerminal({ agentId, agentUuid }) {
    const [nodeId, setNodeId] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
 
    React.useEffect(() => {
        async function loadNodeId() {
            setLoading(true);
            setError(null);
 
            try {
                const response = await apiFetch(`/agent/${agentUuid || agentId}/meshcentral-url`);
 
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || 'Failed to get MeshCentral connection');
                }
 
                const data = await response.json();
                setNodeId(data.meshcentralNodeId);
 
            } catch (err) {
                console.error('[TabTerminal] Failed to load node ID:', err);
                setError(err.message);
            } finally {
                setLoading(false);
            }
        }
 
        if (agentUuid || agentId) {
            loadNodeId();
        }
    }, [agentUuid, agentId]);
 
    if (loading) {
        return (
            <div className="tab-container">
                <div style={{ textAlign: 'center', padding: '3rem' }}>
                    <div className="spinner" style={{ margin: '0 auto 1rem' }}></div>
                    <p>Loading terminal...</p>
                </div>
            </div>
        );
    }
 
    if (error) {
        return (
            <div className="tab-container">
                <div className="card" style={{ textAlign: 'center', padding: '2rem' }}>
                    <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>⚠️</div>
                    <h3>Connection Error</h3>
                    <p style={{ color: '#d32f2f' }}>{error}</p>
                </div>
            </div>
        );
    }
 
    return (
        <div className="tab-container" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
            <MeshCentralEmbed
                nodeId={nodeId}
                viewMode={VIEWMODE.TERMINAL}
                title="Terminal"
            />
        </div>
    );
}