Function InvocationRow

packages/web/workspace/src/common/invocation.tsx:261–545

(props: {
  invocation: Invocation;
  onSavePayload?: () => void;
  local: boolean;
  mixed?: {
    description: string;
    link: string;
  };
  expanded?: boolean;
  onClick?: () => void;
  onReplay?: () => void;
})

});

export function InvocationRow(props: {
  invocation: Invocation;
  onSavePayload?: () => void;
  local: boolean;
  mixed?: {
    description: string;
    link: string;
  };
  expanded?: boolean;
  onClick?: () => void;
  onReplay?: () => void;
}) {
  const [tab, setTab] = createSignal<
    "logs" | "request" | "response" | "report"
  >("logs");

  const shortDate = createMemo(() =>
    new Intl.DateTimeFormat("en-US", shortDateOptions)
      .format(props.invocation.start)
      .replace(" at ", ", "),
  );
  const longDate = createMemo(() =>
    new Intl.DateTimeFormat("en-US", longDateOptions).format(
      props.invocation.start,
    ),
  );
  const [replaying, setReplaying] = createSignal(false);
  const level = createMemo(() =>
    props.invocation.errors.length
      ? props.invocation.errors.some((error) => error.failed)
        ? "fail"
        : "error"
      : "info",
  );

  return (
    <Root
      data-element="invocation"
      data-invocation-id={props.invocation.id}
      data-expanded={props.expanded ? true : undefined}
      expanded={props.expanded}
      level={level() === "info" ? "info" : "danger"}
      onClick={props.onClick}
    >
      <Summary>
        <Row flex={false} space="2" vertical="center">
          <CaretIcon>
            <IconCaretRight />
          </CaretIcon>
          <Level level={level()} />
        </Row>
        <Timestamp title={longDate()}>{shortDate()}</Timestamp>
        <Duration
          coldStart={props.invocation.cold}
          title={props.invocation.cold ? "Cold start" : ""}
        >
          {props.invocation.report?.duration
            ? formatDuration(props.invocation.report?.duration)