timmy-config/wizards/allegro-primus/dashboard/templates/metrics.html

{% extends "base.html" %}

{% block title %}Metrics - {{ app_name }}{% endblock %}
{% block page_title %}Detailed Metrics{% endblock %}

{% block content %}
<!-- Performance Overview -->
<div class="metrics-grid large">
    <div class="metric-card primary">
        <div class="metric-info">
            <span class="metric-label">Total Cycles</span>
            <span class="metric-value">{{ metrics.current.total_cycles }}</span>
        </div>
    </div>
    <div class="metric-card success">
        <div class="metric-info">
            <span class="metric-label">Successful</span>
            <span class="metric-value">{{ metrics.current.successful_cycles }}</span>
        </div>
    </div>
    <div class="metric-card danger">
        <div class="metric-info">
            <span class="metric-label">Failed</span>
            <span class="metric-value">{{ metrics.current.failed_cycles }}</span>
        </div>
    </div>
    <div class="metric-card warning">
        <div class="metric-info">
            <span class="metric-label">Success Rate</span>
            <span class="metric-value">{{ "%.1f"|format(metrics.current.success_rate * 100) }}%</span>
        </div>
    </div>
</div>

<!-- Performance Metrics -->
<div class="panel">
    <h3><i class="fas fa-tachometer-alt"></i> Performance Metrics</h3>
    <div class="metrics-detail">
        <div class="metric-row">
            <span class="metric-name">Average Response Time</span>
            <span class="metric-value">{{ "%.2f"|format(metrics.performance.avg_response_time_ms) }} ms</span>
        </div>
        <div class="metric-row">
            <span class="metric-name">Minimum Response Time</span>
            <span class="metric-value">{{ "%.2f"|format(metrics.performance.min_response_time_ms) }} ms</span>
        </div>
        <div class="metric-row">
            <span class="metric-name">Maximum Response Time</span>
            <span class="metric-value">{{ "%.2f"|format(metrics.performance.max_response_time_ms) }} ms</span>
        </div>
        <div class="metric-row">
            <span class="metric-name">Total Tasks</span>
            <span class="metric-value">{{ metrics.performance.total_tasks }}</span>
        </div>
        <div class="metric-row">
            <span class="metric-name">Overall Success Rate</span>
            <span class="metric-value">{{ "%.2f"|format(metrics.performance.success_rate * 100) }}%</span>
        </div>
    </div>
</div>

<!-- Model Comparison Table -->
<div class="panel">
    <h3><i class="fas fa-balance-scale"></i> Model Comparison</h3>
    <table class="data-table">
        <thead>
            <tr>
                <th>Model</th>
                <th>Success Rate</th>
                <th>Avg Response</th>
                <th>Tasks Completed</th>
                <th>Memory Usage</th>
                <th>Strengths</th>
            </tr>
        </thead>
        <tbody>
            {% for model_id, model in metrics.model_comparison.models.items() %}
            <tr>
                <td><strong>{{ model.name }}</strong></td>
                <td>{{ "%.0f"|format(model.success_rate * 100) }}%</td>
                <td>{{ "%.0f"|format(model.avg_response_time_ms) }}ms</td>
                <td>{{ model.tasks_completed }}</td>
                <td>{{ "%.1f"|format(model.memory_usage_mb / 1024) }}GB</td>
                <td>
                    {% for strength in model.strengths %}
                    <span class="tag">{{ strength }}</span>
                    {% endfor %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Time Series Chart -->
<div class="panel">
    <h3><i class="fas fa-chart-line"></i> 30-Day Trend</h3>
    <div class="chart-large">
        <canvas id="trendChart"></canvas>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const timeSeries = {{ metrics.time_series | tojson }};

const ctx = document.getElementById('trendChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: timeSeries.map(d => d.date),
        datasets: [
            {
                label: 'Success',
                data: timeSeries.map(d => d.success),
                borderColor: 'rgba(16, 185, 129, 1)',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                fill: true
            },
            {
                label: 'Failed',
                data: timeSeries.map(d => d.failed),
                borderColor: 'rgba(239, 68, 68, 1)',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                fill: true
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true }
        }
    }
});
</script>
{% endblock %}