johnandersen777.bsky.social/knotless

Switch repository

Loading…

<script lang="ts">
	import type { CheckView, MinutesView } from '#lib/lexicons/dev/knotless/defs.ts';
	import type { Snippet } from 'svelte';
	import { ago, byStanding, checkHref, checkSaid, overall, standing } from '#lib/format.ts';
	import { checkIcon } from '#lib/icons.ts';
	import Icon from '#lib/atoms/Icon.svelte';
	import Time from '#lib/atoms/Time.svelte';
	import RunImages from '#lib/molecules/RunImages.svelte';
	import MinutesNote from '#lib/molecules/MinutesNote.svelte';
	/** What the runners report of a pull's branch, or of what `label` names, a workflow to a row, each linked to its steps and log, and the pictures it made beneath it; `end`, at the end of its head. */
	let {
		checks,
		label,
		minutes = [],
		end
	}: { checks: CheckView[]; label?: string; minutes?: MinutesView[]; end?: Snippet } = $props();
	/** The runners whose minutes for the owner are at 80% of their allowance or more, beneath the rows. */
	const low = $derived(
		minutes.flatMap((m) =>
			m.allowance && m.minutes * 5 >= m.allowance * 4 ? [{ m, allowance: m.allowance }] : []
		)
	);
	const state = $derived(overall(checks.map((c) => c.status)));
	const heading = $derived(
		{
			success: 'All checks passed',
			running: 'Checks running',
			queued: 'Checks waiting for a runner',
			failure: 'Some checks failed',
			cancelled: 'Checks cancelled for a newer commit'
		}[state]
	);
</script>

<div class="box check-list">
	<div class="head {state}">
		<Icon name={checkIcon(state)} /><b>{label ? `${label}: ${heading?.toLowerCase()}` : heading}</b
		>{#if end}<span class="end">{@render end()}</span>{/if}
	</div>
	{#each byStanding(checks) as c (c.workflow)}
		<a class="row" href={checkHref(c.repo, c.uri)}
			><span class="mark {standing(c)}"><Icon name={checkIcon(standing(c))} /></span><b
				>{c.workflow}</b
			><span class="said" title={c.skipped ?? c.error ?? undefined}>{checkSaid(c)}</span><span
				class="end"><Time at={c.startedAt} show={ago} /></span
			><span class="details">Details</span></a
		>
		<RunImages images={c.images} />
	{/each}
	{#each low as { m, allowance } (m.runner.did)}<MinutesNote {m} {allowance} />{/each}
</div>