the header row survives only on narrow screens; on desktop its lone occupant, log out, joins pause in the sidebar footer, both full width. pause leaves the query detail page's related actions, where a global control had no business, and its hand-rolled duration dropdown becomes a react-aria menu with real keyboard navigation, dismissal and positioning.
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
/**
|
|
* The links out of one query's detail, shared by the persisted detail page and
|
|
* the in-place detail a streamed row opens.
|
|
*
|
|
* Both surfaces answer the same four follow-up questions, and both are read
|
|
* from an investigation that has a time range. Every link therefore carries
|
|
* absolute bounds: a link that said "recently" would show a different set of
|
|
* queries every time it was opened, which is the opposite of what linking to an
|
|
* incident is for.
|
|
*/
|
|
|
|
import { Link } from "@tanstack/react-router";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { provenanceRelatedLink } from "./ProvenanceDetail";
|
|
import { diagnosticsBounds, relatedBounds } from "./relatedLinks";
|
|
import type { ActivitySearch } from "./search";
|
|
|
|
interface Props {
|
|
domain: string;
|
|
client: string;
|
|
/** The second this query was answered, which every window is centred on. */
|
|
ts: number;
|
|
/** The Activity search the reader came from; its bounds win over the defaults. */
|
|
origin: Pick<ActivitySearch, "since" | "until">;
|
|
}
|
|
|
|
export default function RelatedActions({ domain, client, ts, origin }: Props) {
|
|
const bounds = relatedBounds(ts, origin);
|
|
const window = diagnosticsBounds(ts);
|
|
return (
|
|
<>
|
|
<Link to="/activity/test" search={{ domain }} {...stylex.props(provenanceRelatedLink, shared.focusRing)}>
|
|
Test this domain against current policy
|
|
</Link>
|
|
<Link
|
|
to="/activity"
|
|
search={{ mode: "history", domain, client: undefined, blocked: undefined, ...bounds }}
|
|
{...stylex.props(provenanceRelatedLink, shared.focusRing)}
|
|
>
|
|
All activity for this domain
|
|
</Link>
|
|
<Link
|
|
to="/activity"
|
|
search={{ mode: "history", client, domain: undefined, blocked: undefined, ...bounds }}
|
|
{...stylex.props(provenanceRelatedLink, shared.focusRing)}
|
|
>
|
|
All activity from this client
|
|
</Link>
|
|
<Link
|
|
to="/diagnostics"
|
|
search={{ since: window.since, until: window.until }}
|
|
{...stylex.props(provenanceRelatedLink, shared.focusRing)}
|
|
>
|
|
Diagnostics around this query
|
|
</Link>
|
|
</>
|
|
);
|
|
}
|