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

frontend/src/components/NodeLogs.js
57 строк3 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
import React from 'react';
import { Dropdown } from 'react-bootstrap';
import formatDate from '../utils/formatDate';

/**
 * Компонент для отображения списка логов с возможностью удаления
 * @param {Array} logs - Массив логов для отображения
 * @param {Function} onDelete - Функция для удаления лога
 */
const NodeLogs = ({ logs, onDelete }) => {
    // Если логов нет - показываем сообщение
    if (!logs?.length) {
        return <p className="text-secondary mt-2">Логи отсутствуют.</p>;
    }

    // Рендер списка логов со скроллом
    return (
        <div style={{ maxHeight: "300px", overflowY: "auto" }}>
            {logs.map((logEntry, index) => (
                <React.Fragment key={logEntry.id}>
                    {/* Контейнер для одной записи лога */}
                    <div className="d-flex justify-content-between align-items-center py-1">
                        {/* Основное содержимое лога */}
                        <div>
                            <strong className="text-warning">
                                {formatDate(parseInt(logEntry.date))}
                            </strong>
                            <p className="text-light mb-0">{logEntry.log}</p>
                        </div>
                        
                        {/* Выпадающее меню действий */}
                        <Dropdown align="end">
                            <Dropdown.Toggle 
                                variant="outline-light" 
                                size="sm" 
                                id={`dropdown-${logEntry.id}`} 
                                style={{ border: 'none' }}
                            />
                            <Dropdown.Menu>
                                <Dropdown.Item onClick={() => onDelete(logEntry.id)}>
                                    Удалить
                                </Dropdown.Item>
                            </Dropdown.Menu>
                        </Dropdown>
                    </div>

                    {/* Разделитель между логами */}
                    {index < logs.length - 1 && (
                        <hr className="text-secondary opacity-50" />
                    )}
                </React.Fragment>
            ))}
        </div>
    );
};

export default NodeLogs;