TabRds.jsx

Go to the documentation of this file.

import React from 'react';
import { apiFetch } from '../../lib/api';
import MeshDesktopViewer from '../../components/RemoteDesktop/MeshDesktopViewer';
 
function TabRds({ agentId, agentUuid }) {
  // MeshCentral state
  const [meshInfo, setMeshInfo] = React.useState(null);
  const [meshLoading, setMeshLoading] = React.useState(false);
  const [meshError, setMeshError] = React.useState(null);
 
  // Load MeshCentral URL function (accessible for retry button)
  const loadMeshCentralUrl = React.useCallback(async () => {
    setMeshLoading(true);
    setMeshError(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 URL');
      }
 
      const data = await response.json();
      setMeshInfo(data);
 
    } catch (err) {
      console.error('[RDS] Failed to load MeshCentral URL:', err);
      setMeshError(err.message);
    } finally {
      setMeshLoading(false);
    }
  }, [agentUuid, agentId]);
 
  // Load MeshCentral URL when component mounts or agentUuid/agentId changes
  React.useEffect(() => {
    if (agentUuid || agentId) {
      loadMeshCentralUrl();
    }
  }, [agentUuid, agentId, loadMeshCentralUrl]);
 
  return (
    <div className="tab-container" style={{ height: 'calc(100vh - 200px)', display: 'flex', flexDirection: 'column' }}>
      <h2 style={{ marginBottom: '1rem' }}>Remote Desktop</h2>
 
      {meshLoading ? (
        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
          <div className="spinner" style={{ margin: '0 auto 1rem' }}></div>
          <p>Loading MeshCentral connection...</p>
        </div>
      ) : meshError ? (
        <div className="card" style={{ textAlign: 'center', padding: '2rem' }}>
          <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>⚠️</div>
          <h3>Connection Error</h3>
          <p style={{ color: '#d32f2f', marginBottom: '1rem' }}>{meshError}</p>
          <p style={{ fontSize: '0.9em', color: '#666', marginBottom: '1.5rem' }}>
            Make sure the MeshAgent is installed and connected to this device.
          </p>
          <button className="btn" onClick={loadMeshCentralUrl}>
            Retry
          </button>
        </div>
      ) : meshInfo?.meshcentralNodeId ? (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <MeshDesktopViewer
            meshcentralNodeId={meshInfo.meshcentralNodeId}
            meshcentralUrl={meshInfo.remoteDesktopUrl?.split('/login')[0] || process.env.REACT_APP_MESHCENTRAL_URL}
            onError={(error) => {
              setMeshError(error);
            }}
          />
        </div>
      ) : (
        <div className="card">
          <p>Loading...</p>
        </div>
      )}
    </div>
  );
}
 
export default TabRds;