TabTerminal.jsx

Go to the documentation of this file.

import React, { useState, useEffect, useRef } from 'react';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css';
import { apiFetch } from '../../lib/api';
 
export default function TabTerminal({ agentId, agentUuid }) {
  const terminalRef = useRef(null);
  const containerRef = useRef(null);
  const wsRef = useRef(null);
  const xtermRef = useRef(null);
  const fitAddonRef = useRef(null);
 
  const [status, setStatus] = useState('initializing');
  const [error, setError] = useState(null);
  const [nodeId, setNodeId] = useState(null);
 
  // Fetch MeshCentral node ID
  useEffect(() => {
    async function fetchNodeId() {
      try {
        const response = await apiFetch(`/agent/${agentUuid || agentId}/meshcentral-node`);
        if (!response.ok) {
          throw new Error('Failed to fetch MeshCentral node ID');
        }
        const data = await response.json();
        setNodeId(data.nodeId);
      } catch (err) {
        console.error('[Terminal] Error fetching node ID:', err);
        setError(err.message);
        setStatus('error');
      }
    }
 
    if (agentUuid || agentId) {
      fetchNodeId();
    }
  }, [agentId, agentUuid]);
 
  // Initialize terminal and WebSocket connection
  useEffect(() => {
    if (!nodeId || !containerRef.current) return;
 
    // Create terminal
    const terminal = new Terminal({
      cursorBlink: true,
      fontSize: 14,
      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
      theme: {
        background: '#1e1e1e',
        foreground: '#d4d4d4',
        cursor: '#ffffff',
        selection: '#264f78'
      }
    });
 
    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);
    terminal.open(containerRef.current);
    fitAddon.fit();
 
    xtermRef.current = terminal;
    fitAddonRef.current = fitAddon;
 
    // Get session token
    const token = localStorage.getItem('token');
 
    // Connect to MeshCentral terminal WebSocket
    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
    const ws = new WebSocket(
      `${protocol}://${window.location.host}/api/meshcentral/terminal?nodeId=${nodeId}&token=${token}`
    );
 
    ws.onopen = () => {
      console.log('[Terminal] WebSocket connected');
      setStatus('connected');
      terminal.write('\r\n*** Connected to MeshCentral Terminal ***\r\n\r\n');
    };
 
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
 
      if (data.type === 'console') {
        // Decode base64 output and write to terminal
        const output = atob(data.data);
        terminal.write(output);
      } else if (data.type === 'error') {
        terminal.write(`\r\n[Error] ${data.message}\r\n`);
        setError(data.message);
      }
    };
 
    ws.onerror = (err) => {
      console.error('[Terminal] WebSocket error:', err);
      setStatus('error');
      setError('WebSocket connection error');
      terminal.write('\r\n*** Connection error ***\r\n');
    };
 
    ws.onclose = () => {
      console.log('[Terminal] WebSocket disconnected');
      setStatus('disconnected');
      terminal.write('\r\n*** Disconnected from terminal ***\r\n');
    };
 
    // Handle terminal input
    terminal.onData((data) => {
      if (ws.readyState === WebSocket.OPEN) {
        // Encode input as base64 and send to backend
        const encoded = btoa(data);
        ws.send(JSON.stringify({
          action: 'input',
          data: encoded
        }));
      }
    });
 
    // Handle window resize
    const handleResize = () => {
      fitAddon.fit();
      if (ws.readyState === WebSocket.OPEN) {
        ws.send(JSON.stringify({
          action: 'resize',
          cols: terminal.cols,
          rows: terminal.rows
        }));
      }
    };
 
    window.addEventListener('resize', handleResize);
    wsRef.current = ws;
 
    // Cleanup
    return () => {
      window.removeEventListener('resize', handleResize);
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
      terminal.dispose();
    };
  }, [nodeId]);
 
  if (error) {
    return (
      <div className="tab-container">
        <h2>Terminal</h2>
        <div className="card" style={{ textAlign: 'center', padding: '2rem' }}>
          <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>⚠️</div>
          <h3>Connection Error</h3>
          <p style={{ color: '#666' }}>{error}</p>
          <p style={{ color: '#999', fontSize: '0.9rem', marginTop: '1rem' }}>
            Make sure MeshCentral agent is installed and connected
          </p>
        </div>
      </div>
    );
  }
 
  if (status === 'initializing' && !nodeId) {
    return (
      <div className="tab-container">
        <h2>Terminal</h2>
        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
          <div className="spinner" style={{ margin: '0 auto 1rem' }}></div>
          <p>Loading terminal...</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="tab-container">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px' }}>
        <h2 style={{ margin: 0 }}>Terminal</h2>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <div style={{
            width: '8px',
            height: '8px',
            borderRadius: '50%',
            backgroundColor: status === 'connected' ? '#4caf50' : status === 'error' ? '#f44336' : '#ff9800'
          }} />
          <span style={{ fontSize: '0.9rem', color: '#666', textTransform: 'capitalize' }}>
            {status}
          </span>
        </div>
      </div>
 
      <div className="card" style={{ padding: '0', overflow: 'hidden' }}>
        <div
          ref={containerRef}
          style={{
            width: '100%',
            height: '600px',
            padding: '8px'
          }}
        />
      </div>
    </div>
  );
}