{% extends "layouts/base.html" %}

{% block title %} Dashboard {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<main class="content">

    {% include 'includes/navigation.html' %}

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
        <div class="btn-toolbar dropdown">
            <button class="btn btn-primary btn-sm mr-2 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <span class="fas fa-plus mr-2"></span>New Task
            </button>
            <div class="dropdown-menu dashboard-dropdown dropdown-menu-left mt-2">
                {% if "yoda" in current_user.role or "darth_vader" in current_user.role %}
                <a class="dropdown-item font-weight-bold" href="users-new"><span class="fas fa-user-shield"></span>New
                    user account</a>
                <a class="dropdown-item font-weight-bold" href="stacks-new"><span class="fas fa-box-open"></span>New
                    Stack</a>
                {% endif %}
                <a class="dropdown-item font-weight-bold" href="stacks-list"><span class="fas fa-layer-group"></span>New
                    Deploy</a>
                <div role="separator" class="dropdown-divider"></div>
            </div>
        </div>
        <div class="btn-group">
        </div>
    </div>
                    <div><h1>Services Status</h1></div>

    <div class="row justify-content-md-center">
        <div class="col-12 mb-4">

        </div>

        <div class="col-12 col-sm-6 col-xl-4 mb-4 ">
            <div class="card border-light shadow-sm">
                <div class="card-body">
                    <div class="row d-block d-xl-flex align-items-center">
                        <div
                            class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
                            <div class="icon icon-shape icon-md icon-shape-blue rounded mr-4 mr-sm-0"><span
                                    class="fas fa-layer-group"></span></div>
                        </div>
                        <div class="col-12 col-xl-7 px-xl-0">
                            <div class="d-none d-sm-block">
                                <h2 class="h5">Stacks</h2>


                                <h3 class="mb-1">{{ stacks|length }}</h3>
                            </div>
                            <div class="small mt-2">
                                <span class="text-success font-weight-bold"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 mb-4">
            <div class="card border-light shadow-sm">
                <div class="card-body">
                    <div class="row d-block d-xl-flex align-items-center">
                        <div
                            class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
                            <div class="icon icon-shape icon-md icon-shape-blue rounded mr-4"><span
                                    class="fas fa-box-open"></span></div>
                        </div>
                        <div class="col-12 col-xl-7 px-xl-0">
                            <div class="d-none d-sm-block">
                                <h2 class="h5">Deployments</h2>
                                <h3 class="mb-1">{{ deployments|length }}</h3>
                            </div>
                            <div class="small mt-2">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 mb-4">
            <div class="card border-light shadow-sm">
                <div class="card-body">
                    <div class="row d-block d-xl-flex align-items-center">
                        <div
                            class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
                            <div class="icon icon-shape icon-md icon-shape-quaternary rounded mr-4"><span
                                    class="fas fa-tasks"></span></div>
                        </div>
                        <div class="col-12 col-xl-7 px-xl-0">
                            <div class="d-none d-sm-block">
                                <h2 class="h5">Tasks</h2>
                                <h3 class="mb-1">{{ tasks|length }}</h3>
                            </div>
                            <div class="small mt-2">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-4 mb-4">
            <div class="card border-light shadow-sm">
                <div class="card-body">
                    <div class="row d-block d-xl-flex align-items-center">
                        <div
                            class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
                            {% if "healthy" in api_healthy['status'] %}
                            <div class="icon icon-shape icon-md icon-shape-tertiary rounded mr-4"><span
                                    class="fas fa-code"></span></div>
                        </div>
                        <div class="col-12 col-xl-7 px-xl-0">
                            <div class="d-none d-sm-block">
                                <h2 class="h5">Api</h2>
                                <h3 class="mb-1">{{ api_healthy['status'] }}</h3>
                            </div>
                            <div class="small mt-2">
                                {% else %}
                                <div class="icon icon-shape icon-md icon-shape-primary rounded mr-4"><span
                                        class="fas fa-code"></span></div>
                            </div>
                            <div class="col-12 col-xl-7 px-xl-0">
                                <div class="d-none d-sm-block">
                                    <h2 class="h5">Api</h2>
                                    <h3 class="mb-1">down</h3>
                                </div>
                                <div class="small mt-2">
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-xl-4 mb-4">
                <div class="card border-light shadow-sm">
                    <div class="card-body">
                        <div class="row d-block d-xl-flex align-items-center">
                            <div
                                class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
                                {% if "healthy" in remote_state_healthy['status'] %}
                                <div class="icon icon-shape icon-md icon-shape-tertiary rounded mr-4"><span
                                        class="fas fa-project-diagram"></span></div>
                            </div>
                            <div class="col-12 col-xl-7 px-xl-0">
                                <div class="d-none d-sm-block">
                                    <h2 class="h5">RemoteState</h2>
                                    <h3 class="mb-1">{{ remote_state_healthy['status'] }}</h3>
                                </div>
                                <div class="small mt-2">
                                    {% else %}
                                    <div class="icon icon-shape icon-md icon-shape-primary rounded mr-4"><span
                                            class="fas fa-project-diagram"></span></div>
                                </div>
                                <div class="col-12 col-xl-7 px-xl-0">
                                    <div class="d-none d-sm-block">
                                        <h2 class="h5">RemoteState</h2>
                                        <h3 class="mb-1">down</h3>
                                    </div>
                                    <div class="small mt-2">
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-4 mb-4">
                    <div class="card border-light shadow-sm">
                        <div class="card-body">
                            <div class="row d-block d-xl-flex align-items-center">
                                <div
                                    class="col-12 col-xl-5 text-xl-center mb-3 mb-xl-0 d-flex align-items-center justify-content-xl-center">
                                    {% if "healthy" in schedule_healthy['status'] %}
                                    <div class="icon icon-shape icon-md icon-shape-tertiary rounded mr-4"><span
                                            class="far fa-calendar-check"></span></div>
                                </div>
                                <div class="col-12 col-xl-7 px-xl-0">
                                    <div class="d-none d-sm-block">
                                        <h2 class="h5">Schedule</h2>
                                        <h3 class="mb-1">{{ schedule_healthy['status'] }}</h3>
                                    </div>
                                    <div class="small mt-2">
                                        {% else %}
                                        <div class="icon icon-shape icon-md icon-shape-primary rounded mr-4"><span
                                                class="far fa-calendar-times"></span></div>
                                    </div>
                                    <div class="col-12 col-xl-7 px-xl-0">
                                        <div class="d-none d-sm-block">
                                            <h2 class="h5">Schedule</h2>
                                            <h3 class="mb-1">down</h3>
                                        </div>
                                        <div class="small mt-2">
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <div><h1>Metrics</h1></div>
   <!-- Fila para Gráficos -->
<!-- Fila para Gráficos -->
<div class="row">
    <!-- Columna para el Gráfico de Actividad del Usuario -->
    <div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
        <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
            <div class="card-body">
                <canvas id="userActivityChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Columna para el Gráfico de Acciones -->
    <div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
        <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
            <div class="card-body">
                <canvas id="actionCountChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Columna para el Gráfico de Uso de Entorno -->
    <div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
        <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
            <div class="card-body">
                <canvas id="environmentCountChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Columna para el Gráfico de Uso de Stacks -->
    <div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
        <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
            <div class="card-body">
                <canvas id="stackUsageChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Columna para el Gráfico de Conteo de Implementaciones por Escuadrón -->
<div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
    <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
        <div class="card-body">
            <canvas id="squadDeployCountChart"></canvas>
        </div>
    </div>
</div>


<!-- Columna para el Gráfico de Uso de Proveedor de Nube -->
<div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
    <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
        <div class="card-body">
            <canvas id="cloudProviderUsageChart"></canvas>
        </div>
    </div>
</div>

<!-- Columna para el Gráfico de Uso de Entorno por Escuadrón -->
<div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
    <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
        <div class="card-body">
            <canvas id="squadEnvironmentUsageChart"></canvas>
        </div>
    </div>
</div>

<!-- Columna para el Gráfico de Uso de Entorno por Escuadrón -->
<div class="col-md-12 col-lg-6 mb-4"> <!-- Añadir margen inferior -->
    <div class="card bg-white-alt shadow-sm px-3"> <!-- Añadir relleno horizontal -->
        <div class="card-body">
            <canvas id="squadEnvironmentUsageChart2"></canvas>
        </div>
    </div>
</div>


    </div>
    </div>


                    {% include 'includes/footer.html' %}

</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script src='/static/assets/js/Chart.min.js'></script>

<script>
    var metrics = {{ metrics | tojson }};

    // Función para generar un color aleatorio
    function randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return 'rgba(' + r + ', ' + g + ', ' + b + ', 0.5)';
    }

    // Limitar a los 5 usuarios principales
    var topUsers = metrics.user_activity.slice(0, 5);

    // Generar un color para cada uno de los 5 usuarios principales
    var colors = topUsers.map(function() {
        return randomColor();
    });

    var ctx = document.getElementById('userActivityChart').getContext('2d');
    var userActivityChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: topUsers.map(function(a) { return a.username; }),
            datasets: [{
                label: 'Deployments by users',
                data: topUsers.map(function(a) { return a.deploy_count; }),
                backgroundColor: colors
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }

    });
        // Gráfico de Acciones (Pie Chart)
    var ctx = document.getElementById('actionCountChart').getContext('2d');
    var actionCountChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: metrics.action_count.map(function(a) { return a.action; }),
            datasets: [{
                data: metrics.action_count.map(function(a) { return a.count; }),
                backgroundColor: metrics.action_count.map(function() { return randomColor(); })
            }]
        }
    });

 // Gráfico de Uso de Entorno (Polar Area Chart)
var ctx = document.getElementById('environmentCountChart').getContext('2d');
var environmentCountChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: metrics.environment_count.map(function(a) { return a.environment; }),
        datasets: [{
            label: 'Deployments by environment',
            data: metrics.environment_count.map(function(a) { return a.count; }),
            // Asignar un color único a cada entorno
            backgroundColor: [
                'rgba(255, 99, 132, 0.5)', // Rojo
                'rgba(54, 162, 235, 0.5)', // Azul
                'rgba(255, 206, 86, 0.5)',  // Amarillo
                'rgba(75, 192, 192, 0.5)',  // Verde
                'rgba(153, 102, 255, 0.5)', // Púrpura
                // ... añade más colores según el número de entornos
            ],
            fill: false
        }]
    }
});

    // Gráfico de Uso de Stacks (Bar Chart)
    var ctx = document.getElementById('stackUsageChart').getContext('2d');

    var topStacks = metrics.stack_usage.sort(function(a, b) {
        return b.count - a.count;
    }).slice(0, 5);

    var stackUsageChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: topStacks.map(function(a) { return a.stack_name; }),
            datasets: [{
                label: 'top 5 stacks most used',
                data: topStacks.map(function(a) { return a.count; }),
                backgroundColor: topStacks.map(function() { return randomColor(); })
            }]
        }
    });

// Gráfico "squad_deploy_count" (Bar Chart)
var ctx = document.getElementById('squadDeployCountChart').getContext('2d');
var squadDeployCountChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: metrics.squad_deploy_count.map(function(a) { return a.squad; }),
        datasets: [{
            label: 'Deployments by squad',
            data: metrics.squad_deploy_count.map(function(a) { return a.count; }),
            backgroundColor: metrics.squad_deploy_count.map(function() { return randomColor(); })
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

// Gráfico "cloud_provider_usage" (Pie Chart)
var ctx = document.getElementById('cloudProviderUsageChart').getContext('2d');
var cloudProviderUsageChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: metrics.cloud_provider_usage.map(function(a) { return a.provider; }),
        datasets: [{
            data: metrics.cloud_provider_usage.map(function(a) { return a.count; }),
            backgroundColor: metrics.cloud_provider_usage.map(function() { return randomColor(); })
        }]
    }
});

// Gráfico "squad_environment_usage" (Bar Chart)
var ctx = document.getElementById('squadEnvironmentUsageChart').getContext('2d');
var squadEnvironmentUsageChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: metrics.squad_environment_usage.map(function(a) { return a.squad + ' - ' + a.environment; }),
        datasets: [{
            label: 'Deployments by squad and environment',
            data: metrics.squad_environment_usage.map(function(a) { return a.count; }),
            backgroundColor: metrics.squad_environment_usage.map(function() { return randomColor(); })
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

var ctx = document.getElementById('squadEnvironmentUsageChart2').getContext('2d');
var squadEnvironmentUsageChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: metrics.squad_environment_usage.map(function(a) { return a.squad + ' - ' + a.environment; }),
        datasets: [{
            label: 'Deployments by squad and environment',
            data: metrics.squad_environment_usage.map(function(a) { return a.count; }),
            backgroundColor: metrics.squad_environment_usage.map(function() { return randomColor(); }),
            pointRadius: 5 // Aumenta el tamaño de los puntos aquí
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});



</script>

{% endblock javascripts %}