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

frontend/src/components/BlockLogs.js
50 строк2 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';

const BlockLogs = ({ 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 BlockLogs;