{% extends "admin/admin_base.html" %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <h2 class="mb-4"><i class="bi bi-speedometer2"></i> Метрики и мониторинг</h2>
            
            <!-- Виджеты метрик -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Всего запросов</h5>
                            <h2 class="text-primary" id="totalRequests">-</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Ошибки</h5>
                            <h2 class="text-danger" id="totalErrors">-</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">RPS</h5>
                            <h2 class="text-success" id="throughput">-</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Активные запросы</h5>
                            <h2 class="text-info" id="activeRequests">-</h2>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Метрики ресурсов -->
            <div class="row mb-4">
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Использование CPU</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress" style="height: 30px;">
                                <div class="progress-bar" role="progressbar" id="cpuProgress" style="width: 0%">0%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Использование памяти</h5>
                        </div>
                        <div class="card-body">
                            <div class="progress" style="height: 30px;">
                                <div class="progress-bar bg-warning" role="progressbar" id="memoryProgress" style="width: 0%">0%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Метрики по сервисам -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Метрики по сервисам</h5>
                    <button class="btn btn-primary btn-sm" onclick="refreshMetrics()">
                        <i class="bi bi-arrow-clockwise"></i> Обновить
                    </button>
                </div>
                <div class="card-body">
                    <div id="servicesMetricsContainer">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Загрузка...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Экспорт метрик -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Экспорт метрик</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex gap-2">
                        <a href="/api/v1/admin/metrics/export?format=json" target="_blank" class="btn btn-outline-primary">
                            <i class="bi bi-download"></i> Экспорт JSON
                        </a>
                        <a href="/api/v1/admin/metrics/export?format=csv" target="_blank" class="btn btn-outline-primary">
                            <i class="bi bi-download"></i> Экспорт CSV
                        </a>
                        <a href="/metrics" target="_blank" class="btn btn-outline-secondary">
                            <i class="bi bi-box-arrow-up-right"></i> Prometheus /metrics
                        </a>
                        <a href="{{ url_for('admin.dashboards') }}" class="btn btn-outline-info">
                            <i class="bi bi-graph-up"></i> Дашборды
                        </a>
                        <a href="{{ url_for('admin.alerts') }}" class="btn btn-outline-warning">
                            <i class="bi bi-bell"></i> Алерты
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Prometheus метрики -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Prometheus метрики</h5>
                </div>
                <div class="card-body">
                    <a href="/metrics" target="_blank" class="btn btn-outline-primary">
                        <i class="bi bi-box-arrow-up-right"></i> Открыть /metrics
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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