index.astro

---
import GhLabel from "@components/GhLabel.astro";
import { englishUtcFormatter } from "@lib/formatTime";
import { IssueSummary } from "@lib/repo-summaries";
import { agendaLengthSLO, groupBySlo } from "@lib/slo";
import * as ghLabels from "@lib/triage-labels";
import { getCollection } from "astro:content";
import assert from "node:assert";
import Layout from "../layouts/Layout.astro";

const repos = await getCollection("github");

let oldestCache: Date;
let newestCache = (oldestCache = new Date(repos[0].data.cachedAt));
for (const repo of repos) {
    const repoCachedAt = new Date(repo.data.cachedAt);
    if (repoCachedAt < oldestCache) {
        oldestCache = repoCachedAt;
    }
    if (repoCachedAt > newestCache) {
        newestCache = repoCachedAt;
    }
}
assert(oldestCache <= newestCache);

let totalTriageViolations = 0;
let totalUrgentViolations = 0;
let totalSoonViolations = 0;
let totalAgendaViolations = 0;
let totalNeedTriage = 0;
let totalUrgent = 0;
let totalSoon = 0;
let totalAgenda = 0;
let totalOther = 0;
let totalGroupsOverAgendaLimit = 0;

const andFormatter = new Intl.ListFormat("en", {
    style: "long",
    type: "conjunction",
});

const repoSummaries = repos.map((repo) => {
    const groups = groupBySlo(IssueSummary.array().parse(repo.data.issues));

    const triageViolations = groups.triageViolations.length;
    const urgentViolations = groups.urgentViolations.length;
    const soonViolations = groups.soonViolations.length;
    const agendaViolations = groups.agendaViolations.length;
    const needTriage = groups.untriaged.length;
    const urgent = groups.urgent.length;
    const soon = groups.soon.length;
    const agenda = groups.agenda.length;
    const other = groups.other.length;

    totalTriageViolations += triageViolations;
    totalUrgentViolations += urgentViolations;
    totalSoonViolations += soonViolations;
    totalAgendaViolations += agendaViolations;
    totalNeedTriage += needTriage;
    totalUrgent += urgent;
    totalSoon += soon;
    totalAgenda += agenda;
    totalOther += other;
    if (agenda + agendaViolations > agendaLengthSLO) {
        totalGroupsOverAgendaLimit++;
    }

    let message: string[] = [];
    let class_ = "";
    if (triageViolations > 0 || urgentViolations > 0) {
        class_ = "error";
        if (triageViolations > 0) {
            message.push(`${triageViolations} triage SLO violations`);
        }
        if (urgentViolations > 0) {
            message.push(`${urgentViolations} urgent SLO violations`);
        }
    } else if (
        soonViolations > 0 ||
        agendaViolations > 0 ||
        agenda + agendaViolations > agendaLengthSLO
    ) {
        class_ = "warning";
        if (soonViolations > 0) {
            message.push(`${soonViolations} soon SLO violations`);
        }
        if (agendaViolations > 0) {
            message.push(`${agendaViolations} agenda SLO violations`);
        }
        if (agenda + agendaViolations > agendaLengthSLO) {
            message.push(`${agenda + agendaViolations} issues on the agenda`);
        }
    } else if (needTriage > 0 || urgent > 0) {
        if (needTriage > 0) {
            message.push(`${needTriage} issues that need triage`);
        }
        if (urgent > 0) {
            message.push(`${urgent} urgent issues`);
        }
    } else if (soon > 0 || agenda > 0) {
        if (soon > 0) {
            message.push(`${soon} soon-priority issues`);
        }
        if (agenda > 0) {
            message.push(`${agenda} issues on the agenda`);
        }
    }

    return Object.assign({}, repo, {
        triageViolations,
        urgentViolations,
        soonViolations,
        agendaViolations,
        needTriage,
        urgent,
        soon,
        agenda,
        other,
        class_,
        message: andFormatter.format(message),
    });
});

function sortKey(summary: (typeof repoSummaries)[0]): {
    priority: number;
    count: number;
} {
    if (summary.triageViolations > 0 || summary.urgentViolations > 0) {
        return {
            priority: 4,
            count: summary.triageViolations + summary.urgentViolations,
        };
    } else if (
        summary.soonViolations > 0 ||
        summary.agendaViolations > 0 ||
        summary.agenda + summary.agendaViolations > agendaLengthSLO
    ) {
        let agendaIfTooMany = 0;
        if (summary.agenda + summary.agendaViolations > agendaLengthSLO) {
            agendaIfTooMany = summary.agenda;
        }
        return {
            priority: 3,
            count:
                summary.soonViolations +
                summary.agendaViolations +
                agendaIfTooMany,
        };
    } else if (summary.needTriage > 0 || summary.urgent > 0) {
        return { priority: 2, count: summary.needTriage + summary.urgent };
    } else if (summary.soon > 0 || summary.agenda > 0) {
        return { priority: 1, count: summary.soon + summary.agenda };
    } else {
        return { priority: 0, count: summary.other };
    }
}
function compareByKey(
    a: (typeof repoSummaries)[0],
    b: (typeof repoSummaries)[0]
): number {
    const aKey = sortKey(a),
        bKey = sortKey(b);
    if (aKey.priority != bKey.priority) {
        return bKey.priority - aKey.priority;
    }
    return bKey.count - aKey.count;
}
repoSummaries.sort(compareByKey);
---

<script>
    import "@components/local-time.js";
</script>

<Layout title="Browser Spec Maintenance Status">
    <main>
        <h1>Browser Spec Maintenance Status</h1>

        <p>
            Last updated <local-time
                frdom={oldestCache.toISOString()}
                to={newestCache.toISOString()}
                >{
                    englishUtcFormatter.formatRange(oldestCache, newestCache)
                }</local-time
            >.
        </p>

        <p>Across all browser specs, we have:</p>
        <ul>
            {
                totalTriageViolations > 0 ? (
                    <li class="error">
                        {totalTriageViolations} issues outside of the triage SLO
                    </li>
                ) : null
            }
            {
                totalUrgentViolations > 0 ? (
                    <li class="error">
                        {totalUrgentViolations} urgent issues outside of their
                        SLO
                    </li>
                ) : null
            }
            {
                totalSoonViolations > 0 ? (
                    <li class="warning">
                        {totalSoonViolations} soon-priority issues outside of
                        their SLO
                    </li>
                ) : null
            }
            {
                totalAgendaViolations > 0 ? (
                    <li class="warning">
                        {totalAgendaViolations} issues on the agenda outside of
                        their SLO
                    </li>
                ) : null
            }
            {
                totalGroupsOverAgendaLimit > 0 ? (
                    <li class="warning">
                        {totalGroupsOverAgendaLimit} group(s) with too many
                        issues on the agenda
                    </li>
                ) : null
            }
            {
                totalNeedTriage > 0 ? (
                    <li>{totalNeedTriage} issues that need triage</li>
                ) : null
            }
            {totalUrgent > 0 ? <li>{totalUrgent} urgent issues</li> : null}
            {totalSoon > 0 ? <li>{totalSoon} soon-priority issues</li> : null}
            {
                totalAgenda > 0 ? (
                    <li>{totalAgenda} issues on the agenda</li>
                ) : null
            }
            {totalOther > 0 ? <li>{totalOther} other issues</li> : null}
        </ul>

        <dl>
            {
                repoSummaries.map((repo) => (
                    <>
                        <dt>
                            <a href={`${repo.data.org}/${repo.data.repo}`}>
                                {repo.data.org}/{repo.data.repo}
                            </a>
                            {repo.data.labelsPresent ? null : (
                                <>
                                    (no <GhLabel {...ghLabels.eventually} />
                                    label; guessing triage status)
                                </>
                            )}
                        </dt>
                        <dd>
                            <span class={repo.class_}>{repo.message}</span>
                        </dd>
                    </>
                ))
            }
        </dl>
    </main>
</Layout>

<style is:global>
    .error {
        color: red;
    }
    .warning {
        color: orange;
    }
</style>