frontend/src/components/NodeCard.js - master - Krams/nodemon

frontend/src/components/NodeCard.js
85 строк3 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
// Компонент карточки узла для отображения в шкафу
import React, { useState } from 'react';
import { Card, Dropdown } from 'react-bootstrap';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import stateColors from '../utils/stateFormatter';

const NodeCard = ({ node, isSelected = false, onClick = () => { } }) => {
    const [showDropdown, setShowDropdown] = useState(false);

    // Если узел не передан - не рендерим ничего
    if (!node) return null;

    // Формирование содержимого всплывающей подсказки
    const renderTooltipContent = (item) => (
        <div style={{ textAlign: 'left' }}>
            <strong>{item?.name.replace(/block|node/, "") || "—"}</strong> 
            {item ? `(${item.rack || "-"}${item.shelf ? "." + item.shelf : ""}${item.position ? "." + item.position : ""})` : '—'}<br />
            <u>{item?.state || "—"}</u><br />
            <small>{item?.comment || "—"}</small>
        </div>
    );

    // Обработчики событий
    const handleContextMenu = (e) => {
        e.preventDefault();
        setShowDropdown(true);
    };

    const handleOpenProfile = () => {
        window.open(`/node/${node.id}`, '_blank');
    };

    return (
        <Tippy content={renderTooltipContent(node)} interactive={false} hideOnClick={false}>
            <div onContextMenu={handleContextMenu} style={{ position: 'relative' }}>
                {/* Основная карточка узла */}
                <Card
                    className={`node-card ${isSelected ? "selected" : ""}`}
                    style={{ 
                        backgroundColor: stateColors[node?.state] || "#666", 
                        cursor: "pointer", 
                        color: "black" 
                    }}
                    onClick={() => onClick(node)}
                >
                    <Card.Body className="p-1 text-center">
                        <small>{node?.name.replace("node", "") || '—'}</small>
                    </Card.Body>
                </Card>
                
                {/* Контекстное меню */}
                {showDropdown && (
                    <div style={{
                        position: 'fixed',
                        zIndex: 9999,
                        left: '0',
                        top: '0',
                        width: '100vw',
                        height: '100vh',
                        pointerEvents: 'none'
                    }}>
                        <Dropdown.Menu
                            data-bs-theme="dark"
                            show={showDropdown}
                            onMouseLeave={() => setShowDropdown(false)}
                            style={{ 
                                position: 'absolute',
                                left: `${window.event.clientX}px`,
                                top: `${window.event.clientY}px`,
                                pointerEvents: 'auto'
                            }}
                        >
                            <Dropdown.Item onClick={handleOpenProfile}>
                                Страница узла
                            </Dropdown.Item>
                        </Dropdown.Menu>
                    </div>
                )}
            </div>
        </Tippy>
    );
};

export default NodeCard;