ahriman/package/share/ahriman/templates/build-status/dashboard.jinja2

<div id="dashboard-modal" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
             <div id="dashboard-modal-header" class="modal-header">
                <h4 class="modal-title">System health</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group row mt-2">
                    <div class="col-4 col-lg-2" style="text-align: right">Repository name</div>
                    <div id="dashboard-name" class="col-8 col-lg-3"></div>
                    <div class="col-4 col-lg-2" style="text-align: right">Repository architecture</div>
                    <div id="dashboard-architecture" class="col-8 col-lg-3"></div>
                </div>

                <div class="form-group row mt-2">
                    <div class="col-4 col-lg-2" style="text-align: right">Current status</div>
                    <div id="dashboard-status" class="col-8 col-lg-3"></div>
                    <div class="col-4 col-lg-2" style="text-align: right">Updated at</div>
                    <div id="dashboard-status-timestamp" class="col-8 col-lg-3"></div>
                </div>

                <div id="dashboard-canvas" class="form-group row mt-2">
                    <div class="col-8 col-lg-6">
                        <canvas id="dashboard-packages-count-chart"></canvas>
                    </div>
                    <div class="col-8 col-lg-6">
                        <canvas id="dashboard-packages-statuses-chart"></canvas>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal"><i class="bi bi-x"></i><span class="d-none d-sm-inline"> close</span></button>
            </div>
        </div>
    </div>
</div>

<script>
    const dashboardModal = document.getElementById("dashboard-modal");
    const dashboardModalHeader = document.getElementById("dashboard-modal-header");

    const dashboardName = document.getElementById("dashboard-name");
    const dashboardArchitecture = document.getElementById("dashboard-architecture");
    const dashboardStatus = document.getElementById("dashboard-status");
    const dashboardStatusTimestamp = document.getElementById("dashboard-status-timestamp");

    const dashboardCanvas = document.getElementById("dashboard-canvas");
    const dashboardPackagesStatusesChartCanvas = document.getElementById("dashboard-packages-statuses-chart");
    let dashboardPackagesStatusesChart = null;
    const dashboardPackagesCountChartCanvas = document.getElementById("dashboard-packages-count-chart");
    let dashboardPackagesCountChart = null;

    function statusLoad() {
        const badgeClass = status => {
            if (status === "pending") return "btn-outline-warning";
            if (status === "building") return "btn-outline-warning";
            if (status === "failed") return "btn-outline-danger";
            if (status === "success") return "btn-outline-success";
            return "btn-outline-secondary";
        };

        makeRequest(
            "/api/v1/status",
            {
                query: {
                    architecture: repository.architecture,
                    repository: repository.repository,
                },
                convert: response => response.json(),
            },
            data => {
                versionBadge.innerHTML = `<i class="bi bi-github"></i> ahriman ${safe(data.version)}`;

                dashboardButton.classList.remove(...dashboardButton.classList);
                dashboardButton.classList.add("btn");
                dashboardButton.classList.add(badgeClass(data.status.status));

                dashboardModalHeader.classList.remove(...dashboardModalHeader.classList);
                dashboardModalHeader.classList.add("modal-header");
                headerClass(data.status.status).forEach(clz => dashboardModalHeader.classList.add(clz));

                dashboardName.textContent = data.repository;
                dashboardArchitecture.textContent = data.architecture;
                dashboardStatus.textContent = data.status.status;
                dashboardStatusTimestamp.textContent = new Date(1000 * data.status.timestamp).toISOStringShort();

                if (dashboardPackagesStatusesChart) {
                    const labels = [
                        "unknown",
                        "pending",
                        "building",
                        "failed",
                        "success",
                    ];
                    dashboardPackagesStatusesChart.config.data = {
                        labels: labels,
                        datasets: [{
                            label: "packages in status",
                            data: labels.map(label => data.packages[label]),
                            backgroundColor: [
                                "rgb(55, 58, 60)",
                                "rgb(255, 117, 24)",
                                "rgb(255, 117, 24)",
                                "rgb(255, 0, 57)",
                                "rgb(63, 182, 24)",  // copy-paste from current style
                            ],
                        }],
                    };
                    dashboardPackagesStatusesChart.update();
                }

                if (dashboardPackagesCountChart) {
                    dashboardPackagesCountChart.config.data = {
                        labels: ["packages"],
                        datasets: [
                            {
                                label: "archives",
                                data: [data.stats.packages],
                            },
                            {
                                label: "bases",
                                data: [data.stats.bases],
                            },
                        ],
                    };
                    dashboardPackagesCountChart.update();
                }

                dashboardCanvas.hidden = data.status.total > 0;
            },
        );
    }

    ready(_ => {
        dashboardPackagesStatusesChart = new Chart(dashboardPackagesStatusesChartCanvas, {
            type: "pie",
            data: {},
            options: {
                responsive: true,
            },
        });
        dashboardPackagesCountChart = new Chart(dashboardPackagesCountChartCanvas, {
            type: "bar",
            data: {},
            options: {
                maintainAspectRatio: false,
                responsive: true,
                scales: {
                    x: {
                        stacked: true,
                    },
                },
            },
        });
    });
</script>