{% extends 'admin/admin_base.html' %}
{% block title %}Дашборды{% endblock %}
{% block breadcrumb %}
{{ super() }}
<li class="breadcrumb-item active">Дашборды</li>
{% endblock %}
{% block admin_content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2">Дашборды мониторинга</h1>
            <p class="text-muted mb-0">Визуализация метрик в реальном времени</p>
        </div>
    </div>
    
    <!-- Фильтры времени -->
    <div class="row mb-4">
        <div class="col-md-3">
            <label for="timeRange" class="form-label">Временной диапазон</label>
            <select class="form-select" id="timeRange" onchange="updateTimeRange()">
                <option value="1h">Последний час</option>
                <option value="6h">Последние 6 часов</option>
                <option value="24h" selected>Последние 24 часа</option>
                <option value="7d">Последние 7 дней</option>
            </select>
        </div>
        <div class="col-md-3">
            <label for="metricSelect" class="form-label">Метрики</label>
            <select class="form-select" id="metricSelect" multiple onchange="loadMetrics()">
                <option value="cpu_usage_percent" selected>CPU (%)</option>
                <option value="memory_usage_percent" selected>Память (%)</option>
                <option value="request_throughput">Throughput (RPS)</option>
                <option value="network_bytes_sent">Сеть (отправлено)</option>
                <option value="network_bytes_recv">Сеть (получено)</option>
            </select>
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button class="btn btn-primary" onclick="loadMetrics()">
                <i class="bi bi-arrow-clockwise"></i> Обновить
            </button>
            <button class="btn btn-outline-primary ms-2" onclick="exportMetrics()">
                <i class="bi bi-download"></i> Экспорт
            </button>
        </div>
    </div>
    
    <!-- Графики -->
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">CPU Usage (%)</h5>
                </div>
                <div class="card-body">
                    <canvas id="cpuChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Memory Usage (%)</h5>
                </div>
                <div class="card-body">
                    <canvas id="memoryChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Request Throughput (RPS)</h5>
                </div>
                <div class="card-body">
                    <canvas id="throughputChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Network I/O</h5>
                </div>
                <div class="card-body">
                    <canvas id="networkChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script src="{{ url_for('static', filename='js/chart.umd.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dashboards.js') }}"></script>
{% endblock %}
