@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/explorer/RunsView.tsx

@@ -1,3 +1,5 @@
+import { IconArrowLeft } from '@tabler/icons-react';
+import { Alert, Anchor, Box, Button, Code, Flex, Group, List, Stack, Table, Text, TextInput, Title, VisuallyHidden } from '@mantine/core';
 /**
  * @module Runs view
  *
@@ -9,73 +11,142 @@ import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import { formatMs, type RunResult, type RunSummary } from '@crvouga/atlas/reports/test-catalog';
 import { Link } from '@tanstack/react-router';
 import { useMemo, useState } from 'react';
-
 import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
 import { Meter, StatusMark } from '../evidence/marks';
 import { useRunDetail, useRunList } from './catalog';
-import styles from './explorer.module.css';
 import { patched, useExplorerSearch } from './navigate';
 import { runName } from './parts';
-
 const RUN_ROWS = 50;
 const RESULT_ROWS = 200;
-
 /** The Runs tab: the run list, or the run opened in it. */
 export function RunsView() {
   const search = useExplorerSearch();
   return search.openRun ? <RunDetailView runKey={search.openRun} /> : <RunTable />;
 }
-
 function Counts({ run }: { run: RunSummary }) {
   return (
-    <span className={styles.runCounts}>
-      {run.counts.failed > 0 && <strong>{run.counts.failed} failed</strong>}
-      <span>{run.counts.passed} passed</span>
-      {run.counts['not-run'] > 0 && <span>{run.counts['not-run']} not run</span>}
-      {run.counts.running > 0 && <span data-status="running">{run.counts.running} running</span>}
-    </span>
+    <Text span inherit>
+      {run.counts.failed > 0 && (
+        <Text span inherit fw={600}>
+          {run.counts.failed} failed
+        </Text>
+      )}
+      <Text span inherit>
+        {run.counts.passed} passed
+      </Text>
+      {run.counts['not-run'] > 0 && (
+        <Text span inherit>
+          {run.counts['not-run']} not run
+        </Text>
+      )}
+      {run.counts.running > 0 && (
+        <Text data-status="running" span inherit>
+          {run.counts.running} running
+        </Text>
+      )}
+    </Text>
   );
 }
-
 function RunTable() {
   const runs = useRunList();
   const now = useNow();
   const [shown, setShown] = useState(RUN_ROWS);
-  if (runs.isPending) return <p className={styles.quiet} role="status">Reading the runs…</p>;
-  if (runs.isError) return <p className={styles.notice} role="alert">The runs could not be read. {runs.error.message}</p>;
+  if (runs.isPending)
+    return (
+      <Text role="status" component="div" c="dimmed">
+        Reading the runs…
+      </Text>
+    );
+  if (runs.isError)
+    return (
+      <Alert role="alert" color={'red'} my="sm">
+        The runs could not be read. {runs.error.message}
+      </Alert>
+    );
   const list = runs.data.runs;
-  if (!list.length) return <p className={styles.quiet}>No runs recorded yet.</p>;
+  if (!list.length)
+    return (
+      <Text component="div" c="dimmed">
+        No runs recorded yet.
+      </Text>
+    );
   return (
-    <section className={styles.runs} aria-label="Runs">
-      <p className={styles.showing}>{runs.data.total > list.length ? `The newest ${list.length} of ${plural(runs.data.total, 'run', 'runs')}` : plural(list.length, 'run', 'runs')}</p>
-      <div className={styles.tableScroll}>
-        <table className={styles.table} data-runs>
-          <thead>
-            <tr><th scope="col">Ended</th><th scope="col">Branch</th><th scope="col">Commit</th><th scope="col">Environments</th><th scope="col">Tests</th><th scope="col">Outcomes</th><th scope="col">Span</th><th scope="col"><span className="sr-only">CI run</span></th></tr>
-          </thead>
-          <tbody>
+    <Box aria-label="Runs" component="section" mb="lg">
+      <Flex gap="xs" align="center" wrap="wrap">
+        {runs.data.total > list.length
+          ? `The newest ${list.length} of ${plural(runs.data.total, 'run', 'runs')}`
+          : plural(list.length, 'run', 'runs')}
+      </Flex>
+      <Table.ScrollContainer minWidth={600}>
+        <Table data-runs>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th scope="col">Ended</Table.Th>
+              <Table.Th scope="col">Branch</Table.Th>
+              <Table.Th scope="col">Commit</Table.Th>
+              <Table.Th scope="col">Environments</Table.Th>
+              <Table.Th scope="col">Tests</Table.Th>
+              <Table.Th scope="col">Outcomes</Table.Th>
+              <Table.Th scope="col">Span</Table.Th>
+              <Table.Th scope="col">
+                <VisuallyHidden>CI run</VisuallyHidden>
+              </Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
             {list.slice(0, shown).map((run) => (
-              <tr key={run.key} data-status={run.counts.failed ? 'failed' : 'passed'}>
-                <td title={exactTime(run.endedAtMs)}><Link to="/" search={patched({ openRun: run.key })} resetScroll={false} activeOptions={{ exact: true }} aria-label={`Open run ${runName(run.key)}`}>{ago(run.endedAtMs, now)}</Link></td>
-                <td className={styles.ellipsis} title={run.branch ?? ''}>{run.branch ?? '—'}</td>
-                <td><code>{shortSha(run.sha) ?? '—'}</code></td>
-                <td>{run.environments.map((env) => environmentLabel(env)).join(', ') || '—'}</td>
-                <td className={styles.num}>{run.tests}</td>
-                <td><span className={styles.runMeter}><Meter counts={run.counts} /></span><Counts run={run} /></td>
-                <td className={styles.num}>{formatMs(run.spanMs)}</td>
-                <td>{run.runUrl ? <a href={run.runUrl} target="_blank" rel="noreferrer">CI run</a> : null}</td>
-              </tr>
+              <Table.Tr key={run.key} data-status={run.counts.failed ? 'failed' : 'passed'}>
+                <Table.Td title={exactTime(run.endedAtMs)}>
+                  <Anchor
+                    aria-label={`Open run ${runName(run.key)}`}
+                    renderRoot={(props) => (
+                      <Link {...props} to="/" search={patched({ openRun: run.key })} resetScroll={false} activeOptions={{ exact: true }} />
+                    )}
+                  >
+                    {ago(run.endedAtMs, now)}
+                  </Anchor>
+                </Table.Td>
+                <Table.Td title={run.branch ?? ''} c="dimmed">
+                  {run.branch ?? '—'}
+                </Table.Td>
+                <Table.Td>
+                  <Code>{shortSha(run.sha) ?? '—'}</Code>
+                </Table.Td>
+                <Table.Td>{run.environments.map((env) => environmentLabel(env)).join(', ') || '—'}</Table.Td>
+                <Table.Td>{run.tests}</Table.Td>
+                <Table.Td>
+                  <Text span inherit>
+                    <Meter counts={run.counts} />
+                  </Text>
+                  <Counts run={run} />
+                </Table.Td>
+                <Table.Td>{formatMs(run.spanMs)}</Table.Td>
+                <Table.Td>
+                  {run.runUrl ? (
+                    <Anchor href={run.runUrl} target="_blank" rel="noreferrer">
+                      CI run
+                    </Anchor>
+                  ) : null}
+                </Table.Td>
+              </Table.Tr>
             ))}
-          </tbody>
-        </table>
-      </div>
-      {list.length > shown && <button type="button" className={styles.link} onClick={() => setShown(shown + RUN_ROWS)}>Show more ({list.length - shown} more)</button>}
-    </section>
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+      {list.length > shown && (
+        <Button type="button" onClick={() => setShown(shown + RUN_ROWS)} variant="subtle">
+          Show more ({list.length - shown} more)
+        </Button>
+      )}
+    </Box>
   );
 }
-
-const RESULT_FILTERS = [{ id: '', label: 'All' }, { id: 'failed', label: 'Failed' }, { id: 'passed', label: 'Passed' }, { id: 'not-run', label: 'Not run' }] as const;
-
+const RESULT_FILTERS = [
+  { id: '', label: 'All' },
+  { id: 'failed', label: 'Failed' },
+  { id: 'passed', label: 'Passed' },
+  { id: 'not-run', label: 'Not run' }
+] as const;
 function RunDetailView({ runKey }: { runKey: string }) {
   const detail = useRunDetail(runKey);
   const now = useNow();
@@ -85,7 +156,13 @@ function RunDetailView({ runKey }: { runKey: string }) {
   const results = detail.data?.results ?? [];
   const filtered = useMemo(() => {
     const terms = words.toLowerCase().split(/\s+/).filter(Boolean);
-    return results.filter((result) => (!status || result.status === status) && terms.every((term) => `${result.title}\n${result.specPath ?? ''}\n${result.environment ?? ''}\n${result.producer}`.toLowerCase().includes(term)));
+    return results.filter(
+      (result) =>
+        (!status || result.status === status) &&
+        terms.every((term) =>
+          `${result.title}\n${result.specPath ?? ''}\n${result.environment ?? ''}\n${result.producer}`.toLowerCase().includes(term)
+        )
+    );
   }, [results, status, words]);
   const bySpec = useMemo(() => {
     const groups = new Map<string, RunResult[]>();
@@ -97,68 +174,204 @@ function RunDetailView({ runKey }: { runKey: string }) {
     }
     return [...groups];
   }, [filtered, shown]);
-  const back = <Link to="/" search={patched({ openRun: undefined })} resetScroll={false} activeOptions={{ exact: true }} className={styles.back}><span aria-hidden="true">←</span> All runs</Link>;
-  if (detail.isPending) return <>{back}<p className={styles.quiet} role="status">Reading the run…</p></>;
-  if (detail.isError) return <>{back}<p className={styles.notice} role="alert">The run could not be read. {detail.error.message}</p></>;
-  if (!detail.data) return <>{back}<p className={styles.notice}>That run is not in the report any more.</p></>;
+  const back = (
+    <Anchor
+      renderRoot={(props) => (
+        <Link {...props} to="/" search={patched({ openRun: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
+      )}
+    >
+      <Text aria-hidden="true" span inherit>
+        <IconArrowLeft size={16} aria-hidden="true" />
+      </Text>{' '}
+      All runs
+    </Anchor>
+  );
+  if (detail.isPending)
+    return (
+      <>
+        {back}
+        <Text role="status" component="div" c="dimmed">
+          Reading the run…
+        </Text>
+      </>
+    );
+  if (detail.isError)
+    return (
+      <>
+        {back}
+        <Alert role="alert" color={'red'} my="sm">
+          The run could not be read. {detail.error.message}
+        </Alert>
+      </>
+    );
+  if (!detail.data)
+    return (
+      <>
+        {back}
+        <Alert color={'blue'} my="sm">
+          That run is not in the report any more.
+        </Alert>
+      </>
+    );
   const { run } = detail.data;
   return (
-    <section className={styles.runs} aria-label={`Run ${runName(run.key)}`}>
+    <Box aria-label={`Run ${runName(run.key)}`} component="section" mb="lg">
       {back}
-      <h2 className={styles.runTitle}>Run {runName(run.key)}</h2>
-      <p className={styles.runMeta}>
-        {run.branch && <span>{run.branch}</span>}
-        {run.sha && <code>{shortSha(run.sha)}</code>}
-        <span title={exactTime(run.endedAtMs)}>ended {ago(run.endedAtMs, now)}</span>
-        <span>took {formatMs(run.spanMs)}</span>
-        {run.environments.length > 0 && <span>{run.environments.map((env) => environmentLabel(env)).join(', ')}</span>}
-        <span>{run.producers.join(', ')}</span>
-        {run.totalDurationMs !== null && <span>{formatMs(run.totalDurationMs)} of test time</span>}
-      </p>
-      <div className={styles.runSummary}>
-        <span className={styles.runMeter}><Meter counts={run.counts} /></span>
-        <span>{plural(run.tests, 'test', 'tests')}</span>
+      <Title order={2} mb="sm">
+        Run {runName(run.key)}
+      </Title>
+      <Text component="div">
+        {run.branch && (
+          <Text span inherit>
+            {run.branch}
+          </Text>
+        )}
+        {run.sha && <Code>{shortSha(run.sha)}</Code>}
+        <Text title={exactTime(run.endedAtMs)} span inherit>
+          ended {ago(run.endedAtMs, now)}
+        </Text>
+        <Text span inherit>
+          took {formatMs(run.spanMs)}
+        </Text>
+        {run.environments.length > 0 && (
+          <Text span inherit>
+            {run.environments.map((env) => environmentLabel(env)).join(', ')}
+          </Text>
+        )}
+        <Text span inherit>
+          {run.producers.join(', ')}
+        </Text>
+        {run.totalDurationMs !== null && (
+          <Text span inherit>
+            {formatMs(run.totalDurationMs)} of test time
+          </Text>
+        )}
+      </Text>
+      <Stack gap="sm">
+        <Text span inherit>
+          <Meter counts={run.counts} />
+        </Text>
+        <Text span inherit>
+          {plural(run.tests, 'test', 'tests')}
+        </Text>
         <Counts run={run} />
-      </div>
-      <p className={styles.actionsLine}>
-        <Link className={styles.primary} to="/" search={patched({ tab: undefined, openRun: undefined, inRun: run.key, test: undefined })} resetScroll={false} activeOptions={{ exact: true }}>Show these tests in the explorer</Link>
-        {run.runUrl && <a href={run.runUrl} target="_blank" rel="noreferrer">Open the CI run</a>}
-      </p>
-      <div className={styles.searchRow}>
-        <input type="search" className={styles.searchBox} aria-label="Search this run" placeholder="Search this run…" value={words} onChange={(event) => setWords(event.target.value)} />
-      </div>
-      <div className={styles.segments} role="group" aria-label="Result status">
+      </Stack>
+      <Flex gap="xs" align="center" wrap="wrap">
+        <Anchor
+          renderRoot={(props) => (
+            <Link
+              {...props}
+              to="/"
+              search={patched({ tab: undefined, openRun: undefined, inRun: run.key, test: undefined })}
+              resetScroll={false}
+              activeOptions={{ exact: true }}
+            />
+          )}
+        >
+          Show these tests in the explorer
+        </Anchor>
+        {run.runUrl && (
+          <Anchor href={run.runUrl} target="_blank" rel="noreferrer">
+            Open the CI run
+          </Anchor>
+        )}
+      </Flex>
+      <Flex gap="xs" align="center" wrap="wrap">
+        <TextInput
+          type="search"
+          aria-label="Search this run"
+          placeholder="Search this run…"
+          value={words}
+          onChange={(event) => setWords(event.target.value)}
+        />
+      </Flex>
+      <Flex role="group" aria-label="Result status" gap="xs" align="center" wrap="wrap">
         {RESULT_FILTERS.map((filter) => (
-          <button key={filter.id || 'all'} type="button" aria-pressed={status === filter.id} data-status={filter.id || undefined} onClick={() => setStatus(filter.id)}>
-            {filter.label} <span>{filter.id ? results.filter((result) => result.status === filter.id).length : results.length}</span>
-          </button>
+          <Button
+            key={filter.id || 'all'}
+            type="button"
+            aria-pressed={status === filter.id}
+            data-status={filter.id || undefined}
+            onClick={() => setStatus(filter.id)}
+            variant="light"
+          >
+            {filter.label}{' '}
+            <Text span inherit>
+              {filter.id ? results.filter((result) => result.status === filter.id).length : results.length}
+            </Text>
+          </Button>
         ))}
-      </div>
-      {!filtered.length && <p className={styles.quiet}>No result matches.</p>}
+      </Flex>
+      {!filtered.length && (
+        <Text component="div" c="dimmed">
+          No result matches.
+        </Text>
+      )}
       {bySpec.map(([spec, list]) => (
-        <section key={spec} className={styles.group} data-open aria-label={spec || 'No spec'}>
-          <div className={styles.groupHead} data-static>
-            <span className={styles.groupName}><code>{spec || 'No spec'}</code></span>
-            <span className={styles.groupTally}>{plural(list.length, 'result', 'results')}</span>
-          </div>
-          <ul className={styles.rows}>
+        <Box key={spec} data-open aria-label={spec || 'No spec'} component="section" mb="lg">
+          <Button data-static variant="default" fullWidth h="auto" py="sm" justify="flex-start">
+            <Flex component="span" direction="column" gap="xs" miw={0}>
+              <Code>{spec || 'No spec'}</Code>
+            </Flex>
+            <Flex component="span" display="inline-flex" gap="xs" align="center" wrap="wrap">
+              {plural(list.length, 'result', 'results')}
+            </Flex>
+          </Button>
+          <List spacing="xs" listStyleType="none">
             {list.map((result) => (
-              <li key={`${result.key}|${result.environment}|${result.producer}|${result.layer}`} className={styles.row} data-status={result.status}>
-                <Link to="/" search={patched({ tab: undefined, openRun: undefined, test: result.key })} resetScroll={false} activeOptions={{ exact: true }} className={styles.rowLink}>
+              <List.Item key={`${result.key}|${result.environment}|${result.producer}|${result.layer}`} data-status={result.status}>
+                <Anchor
+                  display="flex"
+                  p="sm"
+                  underline="never"
+                  renderRoot={(props) => (
+                    <Link
+                      {...props}
+                      to="/"
+                      search={patched({ tab: undefined, openRun: undefined, test: result.key })}
+                      resetScroll={false}
+                      activeOptions={{ exact: true }}
+                    />
+                  )}
+                >
                   <StatusMark status={result.status} size={14} />
-                  <span className={styles.rowMain}>
-                    <span className={styles.rowTitle}>{result.title}</span>
-                    <span className={styles.rowMeta}><span>{environmentLabel(result.environment)}</span><span>{result.producer}</span><span>{statusWord(result.status)}</span></span>
-                    {result.status === 'failed' && result.detail && <span className={styles.rowError}>{result.detail.split('\n')[0]}</span>}
-                  </span>
-                  <span className={styles.columns} data-one><span>{formatMs(result.durationMs)}</span></span>
-                </Link>
-              </li>
+                  <Flex component="span" direction="column" gap="xs" miw={0}>
+                    <Flex component="span" direction="column" gap="xs" miw={0}>
+                      {result.title}
+                    </Flex>
+                    <Flex component="span" display="inline-flex" gap="xs" align="center" wrap="wrap" c="dimmed">
+                      <Text span inherit>
+                        {environmentLabel(result.environment)}
+                      </Text>
+                      <Text span inherit>
+                        {result.producer}
+                      </Text>
+                      <Text span inherit>
+                        {statusWord(result.status)}
+                      </Text>
+                    </Flex>
+                    {result.status === 'failed' && result.detail && (
+                      <Text span inherit c="red.7" size="xs" lineClamp={2}>
+                        {result.detail.split('\n')[0]}
+                      </Text>
+                    )}
+                  </Flex>
+                  <Group data-one gap="md" ml="auto" visibleFrom="sm">
+                    <Text span inherit>
+                      {formatMs(result.durationMs)}
+                    </Text>
+                  </Group>
+                </Anchor>
+              </List.Item>
             ))}
-          </ul>
-        </section>
+          </List>
+        </Box>
       ))}
-      {filtered.length > shown && <button type="button" className={styles.link} onClick={() => setShown(shown + RESULT_ROWS)}>Show more ({filtered.length - shown} more)</button>}
-    </section>
+      {filtered.length > shown && (
+        <Button type="button" onClick={() => setShown(shown + RESULT_ROWS)} variant="subtle">
+          Show more ({filtered.length - shown} more)
+        </Button>
+      )}
+    </Box>
   );
 }