MeshCentralFileBrowser.jsx

Go to the documentation of this file.

/**
 * MeshCentral File Browser Component
 * 
 * Direct WebSocket integration with MeshCentral for file operations.
 * Provides a custom UI matching the dashboard design while using
 * MeshCentral's file system API.
 * 
 * Features:
 * - Browse remote file system
 * - Download files
 * - Upload files
 * - Delete files/directories
 * - Rename files/directories
 * - Create directories
 * - Navigate directory tree
 */
 
import { useState, useEffect, useRef } from 'react';
import {
    Box,
    Typography,
    IconButton,
    List,
    ListItem,
    ListItemIcon,
    ListItemText,
    ListItemButton,
    Breadcrumbs,
    Link,
    Paper,
    CircularProgress,
    Alert,
    Tooltip,
    Menu,
    MenuItem,
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    TextField
} from '@mui/material';
import {
    Folder as FolderIcon,
    InsertDriveFile as FileIcon,
    ArrowUpward as UpIcon,
    Download as DownloadIcon,
    Upload as UploadIcon,
    Delete as DeleteIcon,
    Edit as RenameIcon,
    CreateNewFolder as NewFolderIcon,
    Refresh as RefreshIcon,
    MoreVert as MoreIcon
} from '@mui/icons-material';
 
export default function MeshCentralFileBrowser({ agentId, sessionToken }) {
    const [status, setStatus] = useState('connecting'); // connecting, connected, error, disconnected
    const [currentPath, setCurrentPath] = useState('');
    const [files, setFiles] = useState([]);
    const [selectedFile, setSelectedFile] = useState(null);
    const [contextMenu, setContextMenu] = useState(null);
    const [dialog, setDialog] = useState({ open: false, type: '', data: null });
    const [loading, setLoading] = useState(false);
 
    const wsRef = useRef(null);
    const requestIdRef = useRef(0);
    const pendingRequestsRef = useRef(new Map());
 
    useEffect(() => {
        connectWebSocket();
        return () => {
            if (wsRef.current) {
                wsRef.current.close();
            }
        };
    }, [agentId, sessionToken]);
 
    const connectWebSocket = () => {
        setStatus('connecting');
        const wsUrl = `wss://rmm-psa-backend-t9f7k.ondigitalocean.app/api/meshcentral/files?sessionToken=${sessionToken}&agentId=${agentId}`;
 
        const ws = new WebSocket(wsUrl);
        wsRef.current = ws;
 
        ws.onopen = () => {
            console.log('[FileBrowser] WebSocket connected');
            setStatus('connected');
        };
 
        ws.onmessage = (event) => {
            try {
                const message = JSON.parse(event.data);
                console.log('[FileBrowser] Received:', message);
 
                if (message.type === 'connected') {
                    // Request root directory listing
                    listDirectory('');
                } else if (message.action === 'ls') {
                    handleDirectoryListing(message);
                } else if (message.action === 'download') {
                    handleDownload(message);
                } else if (message.action === 'uploaddone') {
                    handleUploadDone(message);
                } else if (message.type === 'error') {
                    console.error('[FileBrowser] Error:', message.message);
                    setStatus('error');
                }
            } catch (err) {
                console.error('[FileBrowser] Failed to parse message:', err);
            }
        };
 
        ws.onerror = (error) => {
            console.error('[FileBrowser] WebSocket error:', error);
            setStatus('error');
        };
 
        ws.onclose = () => {
            console.log('[FileBrowser] WebSocket disconnected');
            setStatus('disconnected');
        };
    };
 
    const sendMessage = (message) => {
        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
            const reqid = ++requestIdRef.current;
            const msgWithId = { ...message, reqid };
            wsRef.current.send(JSON.stringify(msgWithId));
            return reqid;
        }
        return null;
    };
 
    const listDirectory = (path) => {
        setLoading(true);
        sendMessage({
            action: 'ls',
            path: path
        });
    };
 
    const handleDirectoryListing = (message) => {
        setLoading(false);
        if (message.dir) {
            setCurrentPath(message.path || '');
            setFiles(message.dir || []);
        }
    };
 
    const navigateTo = (path) => {
        listDirectory(path);
    };
 
    const navigateUp = () => {
        const pathParts = currentPath.split('/').filter(p => p);
        pathParts.pop();
        const parentPath = pathParts.join('/');
        navigateTo(parentPath);
    };
 
    const downloadFile = (file) => {
        const filePath = currentPath ? `${currentPath}/${file.n}` : file.n;
        sendMessage({
            action: 'download',
            path: filePath
        });
    };
 
    const handleDownload = (message) => {
        // MeshCentral will send file data as base64
        if (message.data) {
            const blob = new Blob([atob(message.data)], { type: 'application/octet-stream' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = message.name || 'download';
            a.click();
            window.URL.revokeObjectURL(url);
        }
    };
 
    const uploadFile = (file) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            const base64 = btoa(e.target.result);
            const uploadPath = currentPath ? `${currentPath}/${file.name}` : file.name;
            sendMessage({
                action: 'upload',
                path: uploadPath,
                data: base64
            });
        };
        reader.readAsBinaryString(file);
    };
 
    const handleUploadDone = (message) => {
        console.log('[FileBrowser] Upload complete');
        listDirectory(currentPath); // Refresh directory
    };
 
    const deleteFile = (file) => {
        const filePath = currentPath ? `${currentPath}/${file.n}` : file.n;
        sendMessage({
            action: 'rm',
            path: filePath,
            rec: file.t === 2 ? 1 : 0 // Recursive if directory
        });
        setTimeout(() => listDirectory(currentPath), 500);
    };
 
    const renameFile = (file, newName) => {
        const oldPath = currentPath ? `${currentPath}/${file.n}` : file.n;
        const newPath = currentPath ? `${currentPath}/${newName}` : newName;
        sendMessage({
            action: 'rename',
            oldpath: oldPath,
            newpath: newPath
        });
        setTimeout(() => listDirectory(currentPath), 500);
    };
 
    const createDirectory = (dirName) => {
        const dirPath = currentPath ? `${currentPath}/${dirName}` : dirName;
        sendMessage({
            action: 'mkdir',
            path: dirPath
        });
        setTimeout(() => listDirectory(currentPath), 500);
    };
 
    const handleContextMenu = (event, file) => {
        event.preventDefault();
        setSelectedFile(file);
        setContextMenu({
            mouseX: event.clientX - 2,
            mouseY: event.clientY - 4
        });
    };
 
    const handleCloseContextMenu = () => {
        setContextMenu(null);
    };
 
    const openDialog = (type, data = null) => {
        setDialog({ open: true, type, data });
        handleCloseContextMenu();
    };
 
    const closeDialog = () => {
        setDialog({ open: false, type: '', data: null });
    };
 
    const handleDialogAction = () => {
        if (dialog.type === 'delete' && selectedFile) {
            deleteFile(selectedFile);
        } else if (dialog.type === 'rename' && selectedFile) {
            const input = document.getElementById('rename-input');
            if (input && input.value) {
                renameFile(selectedFile, input.value);
            }
        } else if (dialog.type === 'mkdir') {
            const input = document.getElementById('mkdir-input');
            if (input && input.value) {
                createDirectory(input.value);
            }
        }
        closeDialog();
    };
 
    const getPathParts = () => {
        return currentPath.split('/').filter(p => p);
    };
 
    const formatFileSize = (bytes) => {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    };
 
    const statusColors = {
        connecting: 'info',
        connected: 'success',
        error: 'error',
        disconnected: 'warning'
    };
 
    return (
        <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
            {/* Status Bar */}
            <Alert severity={statusColors[status]} sx={{ mb: 2 }}>
                Status: {status}
            </Alert>
 
            {/* Toolbar */}
            <Paper sx={{ p: 1, mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
                <Tooltip title="Go Up">
                    <IconButton onClick={navigateUp} disabled={!currentPath || loading}>
                        <UpIcon />
                    </IconButton>
                </Tooltip>
                <Tooltip title="Refresh">
                    <IconButton onClick={() => listDirectory(currentPath)} disabled={loading}>
                        <RefreshIcon />
                    </IconButton>
                </Tooltip>
                <Tooltip title="Upload File">
                    <IconButton component="label" disabled={loading}>
                        <UploadIcon />
                        <input
                            type="file"
                            hidden
                            onChange={(e) => e.target.files[0] && uploadFile(e.target.files[0])}
                        />
                    </IconButton>
                </Tooltip>
                <Tooltip title="New Folder">
                    <IconButton onClick={() => openDialog('mkdir')} disabled={loading}>
                        <NewFolderIcon />
                    </IconButton>
                </Tooltip>
 
                {/* Breadcrumbs */}
                <Box sx={{ flex: 1, ml: 2 }}>
                    <Breadcrumbs>
                        <Link
                            component="button"
                            variant="body2"
                            onClick={() => navigateTo('')}
                            underline="hover"
                        >
                            Root
                        </Link>
                        {getPathParts().map((part, index) => (
                            <Link
                                key={index}
                                component="button"
                                variant="body2"
                                onClick={() => {
                                    const path = getPathParts().slice(0, index + 1).join('/');
                                    navigateTo(path);
                                }}
                                underline="hover"
                            >
                                {part}
                            </Link>
                        ))}
                    </Breadcrumbs>
                </Box>
 
                {loading && <CircularProgress size={24} />}
            </Paper>
 
            {/* File List */}
            <Paper sx={{ flex: 1, overflow: 'auto' }}>
                <List>
                    {files.map((file, index) => (
                        <ListItem
                            key={index}
                            disablePadding
                            secondaryAction={
                                <IconButton
                                    edge="end"
                                    onClick={(e) => handleContextMenu(e, file)}
                                >
                                    <MoreIcon />
                                </IconButton>
                            }
                        >
                            <ListItemButton
                                onContextMenu={(e) => handleContextMenu(e, file)}
                                onClick={() => {
                                    if (file.t === 2) { // Directory
                                        const newPath = currentPath ? `${currentPath}/${file.n}` : file.n;
                                        navigateTo(newPath);
                                    }
                                }}
                            >
                                <ListItemIcon>
                                    {file.t === 2 ? <FolderIcon /> : <FileIcon />}
                                </ListItemIcon>
                                <ListItemText
                                    primary={file.n}
                                    secondary={file.t === 3 ? formatFileSize(file.s || 0) : 'Folder'}
                                />
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>
            </Paper>
 
            {/* Context Menu */}
            <Menu
                open={contextMenu !== null}
                onClose={handleCloseContextMenu}
                anchorReference="anchorPosition"
                anchorPosition={
                    contextMenu !== null
                        ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
                        : undefined
                }
            >
                {selectedFile?.t === 3 && (
                    <MenuItem onClick={() => downloadFile(selectedFile)}>
                        <DownloadIcon sx={{ mr: 1 }} /> Download
                    </MenuItem>
                )}
                <MenuItem onClick={() => openDialog('rename', selectedFile)}>
                    <RenameIcon sx={{ mr: 1 }} /> Rename
                </MenuItem>
                <MenuItem onClick={() => openDialog('delete', selectedFile)}>
                    <DeleteIcon sx={{ mr: 1 }} /> Delete
                </MenuItem>
            </Menu>
 
            {/* Dialogs */}
            <Dialog open={dialog.open} onClose={closeDialog}>
                <DialogTitle>
                    {dialog.type === 'delete' && 'Confirm Delete'}
                    {dialog.type === 'rename' && 'Rename'}
                    {dialog.type === 'mkdir' && 'Create Directory'}
                </DialogTitle>
                <DialogContent>
                    {dialog.type === 'delete' && (
                        <Typography>
                            Are you sure you want to delete "{selectedFile?.n}"?
                        </Typography>
                    )}
                    {dialog.type === 'rename' && (
                        <TextField
                            id="rename-input"
                            autoFocus
                            fullWidth
                            label="New name"
                            defaultValue={selectedFile?.n}
                            sx={{ mt: 2 }}
                        />
                    )}
                    {dialog.type === 'mkdir' && (
                        <TextField
                            id="mkdir-input"
                            autoFocus
                            fullWidth
                            label="Directory name"
                            sx={{ mt: 2 }}
                        />
                    )}
                </DialogContent>
                <DialogActions>
                    <Button onClick={closeDialog}>Cancel</Button>
                    <Button onClick={handleDialogAction} variant="contained">
                        {dialog.type === 'delete' ? 'Delete' : 'OK'}
                    </Button>
                </DialogActions>
            </Dialog>
        </Box>
    );
}