TabFiles.jsx

Go to the documentation of this file.

import React, { useState, useEffect, useRef } from 'react';
import { apiFetch } from '../../lib/api';
 
export default function TabFiles({ agentId, agentUuid }) {
  const wsRef = useRef(null);
  const [currentPath, setCurrentPath] = useState('/');
  const [files, setFiles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [nodeId, setNodeId] = useState(null);
  const [status, setStatus] = useState('initializing');
 
  // Context menu state
  const [contextMenu, setContextMenu] = useState(null);
  const [selectedFile, setSelectedFile] = useState(null);
 
  // Dialog state
  const [showRenameDialog, setShowRenameDialog] = useState(false);
  const [showMkdirDialog, setShowMkdirDialog] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [dialogInput, setDialogInput] = useState('');
 
  // 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('[Files] Error fetching node ID:', err);
        setError(err.message);
        setStatus('error');
      }
    }
 
    if (agentUuid || agentId) {
      fetchNodeId();
    }
  }, [agentId, agentUuid]);
 
  // Initialize WebSocket connection
  useEffect(() => {
    if (!nodeId) return;
 
    const token = localStorage.getItem('token');
    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
    const ws = new WebSocket(
      `${protocol}://${window.location.host}/api/meshcentral/files?nodeId=${nodeId}&token=${token}`
    );
 
    ws.onopen = () => {
      console.log('[Files] WebSocket connected');
      setStatus('connected');
      // Load root directory
      listDirectory('/');
    };
 
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
 
      if (data.action === 'ls') {
        setFiles(data.files || []);
        setLoading(false);
      } else if (data.action === 'download') {
        // Create download link
        const blob = new Blob([atob(data.data)], { type: 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = data.name;
        a.click();
        URL.revokeObjectURL(url);
      } else if (data.action === 'error') {
        console.error('[Files] Error:', data.message);
        setError(data.message);
      } else if (data.action === 'success') {
        // Refresh directory after successful operation
        listDirectory(currentPath);
      }
    };
 
    ws.onerror = (err) => {
      console.error('[Files] WebSocket error:', err);
      setStatus('error');
      setError('WebSocket connection error');
    };
 
    ws.onclose = () => {
      console.log('[Files] WebSocket disconnected');
      setStatus('disconnected');
    };
 
    wsRef.current = ws;
 
    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, [nodeId]);
 
  // List directory
  const listDirectory = (path) => {
    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
 
    setLoading(true);
    setError(null);
    wsRef.current.send(JSON.stringify({
      action: 'ls',
      path: path,
      reqid: Date.now()
    }));
    setCurrentPath(path);
  };
 
  // Navigate up one level
  const navigateUp = () => {
    const parts = currentPath.split('/').filter(Boolean);
    parts.pop();
    const newPath = '/' + parts.join('/');
    listDirectory(newPath || '/');
  };
 
  // Navigate into directory
  const navigateInto = (item) => {
    if (item.type === 'd') {
      const newPath = currentPath === '/'
        ? `/${item.name}`
        : `${currentPath}/${item.name}`;
      listDirectory(newPath);
    }
  };
 
  // Download file
  const downloadFile = (item) => {
    if (!wsRef.current || item.type === 'd') return;
 
    const filePath = currentPath === '/'
      ? `/${item.name}`
      : `${currentPath}/${item.name}`;
 
    wsRef.current.send(JSON.stringify({
      action: 'download',
      path: filePath,
      reqid: Date.now()
    }));
  };
 
  // Upload file
  const uploadFile = (event) => {
    const file = event.target.files[0];
    if (!file || !wsRef.current) return;
 
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = btoa(e.target.result);
      const filePath = currentPath === '/'
        ? `/${file.name}`
        : `${currentPath}/${file.name}`;
 
      wsRef.current.send(JSON.stringify({
        action: 'upload',
        path: filePath,
        data: data,
        reqid: Date.now()
      }));
    };
    reader.readAsBinaryString(file);
  };
 
  // Delete file/folder
  const deleteItem = () => {
    if (!wsRef.current || !selectedFile) return;
 
    const filePath = currentPath === '/'
      ? `/${selectedFile.name}`
      : `${currentPath}/${selectedFile.name}`;
 
    wsRef.current.send(JSON.stringify({
      action: 'rm',
      path: filePath,
      reqid: Date.now()
    }));
 
    setShowDeleteDialog(false);
    setSelectedFile(null);
  };
 
  // Rename file/folder
  const renameItem = () => {
    if (!wsRef.current || !selectedFile || !dialogInput) return;
 
    const oldPath = currentPath === '/'
      ? `/${selectedFile.name}`
      : `${currentPath}/${selectedFile.name}`;
    const newPath = currentPath === '/'
      ? `/${dialogInput}`
      : `${currentPath}/${dialogInput}`;
 
    wsRef.current.send(JSON.stringify({
      action: 'rename',
      oldPath: oldPath,
      newPath: newPath,
      reqid: Date.now()
    }));
 
    setShowRenameDialog(false);
    setDialogInput('');
    setSelectedFile(null);
  };
 
  // Create directory
  const createDirectory = () => {
    if (!wsRef.current || !dialogInput) return;
 
    const dirPath = currentPath === '/'
      ? `/${dialogInput}`
      : `${currentPath}/${dialogInput}`;
 
    wsRef.current.send(JSON.stringify({
      action: 'mkdir',
      path: dirPath,
      reqid: Date.now()
    }));
 
    setShowMkdirDialog(false);
    setDialogInput('');
  };
 
  // Context menu handler
  const handleContextMenu = (event, file) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY
    });
    setSelectedFile(file);
  };
 
  // Close context menu
  useEffect(() => {
    const handleClick = () => setContextMenu(null);
    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
  }, []);
 
  // Format file size
  const formatSize = (bytes) => {
    if (!bytes) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
  };
 
  // Format date
  const formatDate = (timestamp) => {
    if (!timestamp) return 'N/A';
    return new Date(timestamp * 1000).toLocaleString();
  };
 
  if (error) {
    return (
      <div className="tab-container">
        <h2>File Manager</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') {
    return (
      <div className="tab-container">
        <h2>File Manager</h2>
        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
          <div className="spinner" style={{ margin: '0 auto 1rem' }}></div>
          <p>Loading file manager...</p>
        </div>
      </div>
    );
  }
 
  return (
    <div className="tab-container">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px' }}>
        <h2 style={{ margin: 0 }}>File Manager</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>
 
      {/* Toolbar */}
      <div className="card" style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px', padding: '12px' }}>
        <button
          className="btn-sm"
          onClick={navigateUp}
          disabled={currentPath === '/'}
          title="Go up one level"
        >
          <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>arrow_upward</span>
        </button>
 
        <div style={{
          flex: 1,
          padding: '8px 12px',
          background: '#f5f5f5',
          borderRadius: '4px',
          fontFamily: 'monospace',
          fontSize: '14px'
        }}>
          {currentPath}
        </div>
 
        <button
          className="btn-sm"
          onClick={() => setShowMkdirDialog(true)}
          title="New folder"
        >
          <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>create_new_folder</span>
        </button>
 
        <label
          className="btn-sm"
          style={{ margin: 0, cursor: 'pointer' }}
          title="Upload file"
        >
          <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>upload_file</span>
          <input
            type="file"
            style={{ display: 'none' }}
            onChange={uploadFile}
          />
        </label>
 
        <button
          className="btn-sm"
          onClick={() => listDirectory(currentPath)}
          title="Refresh"
        >
          <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>refresh</span>
        </button>
      </div>
 
      {/* File list */}
      <div className="card" style={{ padding: '0' }}>
        {loading ? (
          <div style={{ padding: '2rem', textAlign: 'center' }}>
            <div className="spinner" style={{ margin: '0 auto 1rem' }}></div>
            <p>Loading files...</p>
          </div>
        ) : files.length === 0 ? (
          <div style={{ padding: '2rem', textAlign: 'center', color: '#999' }}>
            Empty directory
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr 120px 180px', fontSize: '14px' }}>
            {/* Header */}
            <div style={{ padding: '12px 16px', background: '#f5f5f5', fontWeight: 600 }}></div>
            <div style={{ padding: '12px 16px', background: '#f5f5f5', fontWeight: 600 }}>Name</div>
            <div style={{ padding: '12px 16px', background: '#f5f5f5', fontWeight: 600 }}>Size</div>
            <div style={{ padding: '12px 16px', background: '#f5f5f5', fontWeight: 600 }}>Modified</div>
 
            {/* Files */}
            {files.map((file, index) => (
              <React.Fragment key={index}>
                <div
                  style={{
                    padding: '12px 16px',
                    borderBottom: '1px solid #eee',
                    display: 'flex',
                    alignItems: 'center'
                  }}
                  onContextMenu={(e) => handleContextMenu(e, file)}
                >
                  <span className="material-symbols-outlined" style={{
                    fontSize: '24px',
                    color: file.type === 'd' ? '#ffc107' : '#666'
                  }}>
                    {file.type === 'd' ? 'folder' : 'description'}
                  </span>
                </div>
 
                <div
                  style={{
                    padding: '12px 16px',
                    borderBottom: '1px solid #eee',
                    cursor: file.type === 'd' ? 'pointer' : 'default',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }}
                  onDoubleClick={() => navigateInto(file)}
                  onContextMenu={(e) => handleContextMenu(e, file)}
                >
                  {file.name}
                </div>
 
                <div
                  style={{ padding: '12px 16px', borderBottom: '1px solid #eee', color: '#666' }}
                  onContextMenu={(e) => handleContextMenu(e, file)}
                >
                  {file.type === 'd' ? '—' : formatSize(file.size)}
                </div>
 
                <div
                  style={{ padding: '12px 16px', borderBottom: '1px solid #eee', color: '#666', fontSize: '13px' }}
                  onContextMenu={(e) => handleContextMenu(e, file)}
                >
                  {formatDate(file.mtime)}
                </div>
              </React.Fragment>
            ))}
          </div>
        )}
      </div>
 
      {/* Context Menu */}
      {contextMenu && selectedFile && (
        <div
          style={{
            position: 'fixed',
            top: contextMenu.y,
            left: contextMenu.x,
            background: 'white',
            border: '1px solid #ccc',
            borderRadius: '4px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
            zIndex: 1000,
            minWidth: '150px'
          }}
        >
          {selectedFile.type !== 'd' && (
            <div
              style={{ padding: '8px 16px', cursor: 'pointer', ':hover': { background: '#f5f5f5' } }}
              onClick={() => {
                downloadFile(selectedFile);
                setContextMenu(null);
              }}
            >
              Download
            </div>
          )}
          <div
            style={{ padding: '8px 16px', cursor: 'pointer' }}
            onClick={() => {
              setDialogInput(selectedFile.name);
              setShowRenameDialog(true);
              setContextMenu(null);
            }}
          >
            Rename
          </div>
          <div
            style={{ padding: '8px 16px', cursor: 'pointer', color: '#f44336' }}
            onClick={() => {
              setShowDeleteDialog(true);
              setContextMenu(null);
            }}
          >
            Delete
          </div>
        </div>
      )}
 
      {/* Rename Dialog */}
      {showRenameDialog && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            background: 'white',
            padding: '24px',
            borderRadius: '8px',
            minWidth: '400px'
          }}>
            <h3 style={{ marginTop: 0 }}>Rename {selectedFile?.name}</h3>
            <input
              type="text"
              value={dialogInput}
              onChange={(e) => setDialogInput(e.target.value)}
              style={{ width: '100%', padding: '8px', marginBottom: '16px' }}
              autoFocus
            />
            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
              <button className="btn-sm" onClick={() => setShowRenameDialog(false)}>
                Cancel
              </button>
              <button className="btn-sm" onClick={renameItem}>
                Rename
              </button>
            </div>
          </div>
        </div>
      )}
 
      {/* New Folder Dialog */}
      {showMkdirDialog && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            background: 'white',
            padding: '24px',
            borderRadius: '8px',
            minWidth: '400px'
          }}>
            <h3 style={{ marginTop: 0 }}>New Folder</h3>
            <input
              type="text"
              value={dialogInput}
              onChange={(e) => setDialogInput(e.target.value)}
              placeholder="Folder name"
              style={{ width: '100%', padding: '8px', marginBottom: '16px' }}
              autoFocus
            />
            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
              <button className="btn-sm" onClick={() => setShowMkdirDialog(false)}>
                Cancel
              </button>
              <button className="btn-sm" onClick={createDirectory}>
                Create
              </button>
            </div>
          </div>
        </div>
      )}
 
      {/* Delete Confirmation Dialog */}
      {showDeleteDialog && selectedFile && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            background: 'white',
            padding: '24px',
            borderRadius: '8px',
            minWidth: '400px'
          }}>
            <h3 style={{ marginTop: 0 }}>Confirm Delete</h3>
            <p>Are you sure you want to delete <strong>{selectedFile.name}</strong>?</p>
            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
              <button className="btn-sm" onClick={() => setShowDeleteDialog(false)}>
                Cancel
              </button>
              <button
                className="btn-sm"
                onClick={deleteItem}
                style={{ background: '#f44336', color: 'white' }}
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}