@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/client/pages/automations/AutomationExecutionStatusChart.tsx

@@ -1,11 +1,10 @@
 import type { AutomationExecutionStatusDay } from "@sentry/junior/api/schema";
+import { Bar, BarChart, CartesianGrid } from "recharts";
 import {
-  ActivityChartDateLabels,
-  ActivityChartGrid,
-  ActivityChartTooltip,
-  ActivityTooltipRows,
-  ChartSvg,
-  createActivityChartLayout,
+  activityChartMargin,
+  ActivityChartTooltipContent,
+  ActivityChartXAxis,
+  ActivityChartYAxis,
 } from "../../components/charts/ActivityChart";
 import { ChartLegend } from "../../components/charts/ChartLegend";
 import {
@@ -13,6 +12,7 @@ import {
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
+import { ChartContainer, ChartTooltip } from "../../components/ui/chart";
 
 const series = [
   { color: "var(--color-emerald-300)", key: "completed", label: "Completed" },
@@ -20,6 +20,10 @@ const series = [
   { color: "var(--color-amber-300)", key: "blocked", label: "Blocked" },
 ] as const;
 
+const chartConfig = Object.fromEntries(
+  series.map((item) => [item.key, { color: item.color, label: item.label }]),
+);
+
 /** Render one automation's terminal executions by status over a trailing window. */
 export function AutomationExecutionStatusChart(props: {
   bucketUnit?: TimeRangeBucketUnit;
@@ -30,12 +34,8 @@ export function AutomationExecutionStatusChart(props: {
   const bucketUnit = props.bucketUnit ?? "day";
 
   const days = props.days;
-  const layout = createActivityChartLayout(220);
   const totals = days.map((day) => day.completed + day.failed + day.blocked);
   const maximum = Math.max(1, ...totals);
-  const step =
-    days.length > 0 ? layout.plotWidth / days.length : layout.plotWidth;
-  const barWidth = Math.max(2, Math.min(13, step * 0.68));
   const hasExecutions = totals.some((total) => total > 0);
 
   return (
@@ -59,67 +59,44 @@ export function AutomationExecutionStatusChart(props: {
       />
 
       <div className="relative mt-3 overflow-hidden">
-        <ChartSvg
-          aria-label={`Automation executions during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
-          className="min-h-40"
-          layout={layout}
+        <ChartContainer
+          className="aspect-auto h-55 w-full"
+          config={chartConfig}
         >
-          <ActivityChartGrid layout={layout} maximum={maximum} />
-          {days.map((day, dayIndex) => {
-            let stackedHeight = 0;
-            const x = layout.left + dayIndex * step + (step - barWidth) / 2;
-            const total = totals[dayIndex] ?? 0;
-            return (
-              <ActivityChartTooltip
-                key={day.date}
-                content={
-                  <ActivityTooltipRows
-                    rows={[
-                      ["completed", day.completed],
-                      ["failed", day.failed],
-                      ["blocked", day.blocked],
-                      ["total", total],
-                    ]}
-                  />
-                }
-                date={day.date}
-                summary={`${day.completed} completed, ${day.failed} failed, ${day.blocked} blocked, ${total} total`}
-              >
-                <g tabIndex={0}>
-                  {series.map((item) => {
-                    const value = day[item.key];
-                    const segmentHeight = (value / maximum) * layout.plotHeight;
-                    stackedHeight += segmentHeight;
-                    return (
-                      <rect
-                        fill={item.color}
-                        height={segmentHeight}
-                        key={item.key}
-                        opacity={0.82}
-                        rx="1"
-                        width={barWidth}
-                        x={x}
-                        y={layout.top + layout.plotHeight - stackedHeight}
-                      />
-                    );
-                  })}
-                  <rect
-                    fill="transparent"
-                    height={layout.plotHeight}
-                    width={Math.max(barWidth, 8)}
-                    x={x - (Math.max(barWidth, 8) - barWidth) / 2}
-                    y={layout.top}
-                  />
-                </g>
-              </ActivityChartTooltip>
-            );
-          })}
-          <ActivityChartDateLabels
-            dates={days.map((day) => day.date)}
-            layout={layout}
-            xPosition={(index) => layout.left + index * step + step / 2}
-          />
-        </ChartSvg>
+          <BarChart
+            aria-label={`Automation executions during the last ${props.range === 1 ? "24 hours" : `${props.range} days`}`}
+            data={days}
+            margin={activityChartMargin}
+            role="img"
+          >
+            <CartesianGrid strokeDasharray="3 5" vertical={false} />
+            <ActivityChartYAxis maximum={maximum} />
+            <ActivityChartXAxis keys={days.map((day) => day.date)} />
+            <ChartTooltip
+              content={
+                <ActivityChartTooltipContent
+                  rows={(day: AutomationExecutionStatusDay) => [
+                    ["completed", day.completed],
+                    ["failed", day.failed],
+                    ["blocked", day.blocked],
+                    ["total", day.completed + day.failed + day.blocked],
+                  ]}
+                />
+              }
+            />
+            {series.map((item) => (
+              <Bar
+                dataKey={item.key}
+                fill={`var(--color-${item.key})`}
+                fillOpacity={0.82}
+                isAnimationActive={false}
+                key={item.key}
+                maxBarSize={13}
+                stackId="status"
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
         {!hasExecutions ? (
           <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No automation executions in this period.

package/src/client/pages/automations/AutomationExecutionsPage.tsx

@@ -1,21 +1,16 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, type KeyboardEvent } from "react";
 import { ArrowLeft } from "lucide-react";
-import {
-  Link,
-  Navigate,
-  useNavigate,
-  useParams,
-  useSearchParams,
-} from "react-router";
+import { Link, Navigate, useParams, useSearchParams } from "react-router";
 import type {
   AutomationExecution,
   AutomationExecutionList,
+  AutomationRun,
 } from "@sentry/junior/api/schema";
 
 import { useAutomationExecutionsData } from "../../api";
 import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
-import type { StatusChipTone } from "../../components/StatusChip";
+import { SelectableRow } from "../../components/SelectableRow";
 import { StatusDot } from "../../components/StatusDot";
 import {
   selectTimeSeries,
@@ -24,83 +19,130 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
-import { conversationPath } from "../../conversations/conversationRoutes";
 import {
   formatCompactNumber,
   formatCostSummary,
   formatRuntime,
-  formatTime,
   automationPath,
 } from "../../format";
 import { DashboardApiError } from "../../http";
 import { pathWithSearch } from "../../searchParams";
 import { cn } from "../../styles";
 import { AutomationExecutionStatusChart } from "./AutomationExecutionStatusChart";
+import {
+  AUTOMATION_RUN_PARAM,
+  AutomationRunDetails,
+  AutomationRunsFrame,
+  RunConversationLink,
+  useAutomationRunSelection,
+} from "./AutomationRunDetails";
+import {
+  automationRunStatusTone,
+  automationRunTitle,
+  formatAutomationRunTime,
+} from "./automationFormat";
 
 /** Leading conversation column flexes; metric columns stay equal fixed widths. */
-const EXECUTION_GRID = "grid-cols-[minmax(0,1fr)_5.5rem_5.5rem_5.5rem_auto]";
+const EXECUTION_GRID =
+  "grid-cols-[minmax(0,1fr)_5.5rem_5.5rem_5.5rem_auto_2rem]";
 
-/** Render one automation's terminal executions as a conversation-style list. */
+/** Render one automation's terminal executions beside the selected run. */
 export function AutomationExecutionsPage(props: { enabled: boolean }) {
   const { automationId } = useParams();
   const [searchParams] = useSearchParams();
   const query = useAutomationExecutionsData(props.enabled, automationId);
+  const backSearch = new URLSearchParams(searchParams);
+  backSearch.delete(AUTOMATION_RUN_PARAM);
   const backTo = pathWithSearch(
     automationId ? automationPath(automationId) : "/automations/list",
-    searchParams,
+    backSearch,
+  );
+  const runs = useMemo(
+    () =>
+      query.data
+        ? query.data.executions.map(
+            (execution): AutomationRun => ({
+              ...execution,
+              automationId: query.data.automation.id,
+              automationTitle: query.data.automation.title,
+              kind: query.data.automation.kind,
+            }),
+          )
+        : [],
+    [query.data],
+  );
+  const selection = useAutomationRunSelection(
+    runs.map((run) => run.executionId),
   );
 
   if (!automationId) {
     return <Navigate replace to="/automations" />;
   }
-  if (!query.data && !query.error) {
-    return (
-      <>
-        <PageHeader
-          description="Terminal runs for one scheduled or event automation."
-          title="Automation executions"
-        />
-        <PageContentSkeleton
-          label="Loading automation executions"
-          variant="list"
-        />
-      </>
-    );
-  }
-  if (query.error || !query.data) {
-    return (
-      <>
-        <PageHeader
-          description="Terminal runs for one scheduled or event automation."
-          title="Automation executions"
+  const loading = !query.data && !query.error;
+  return (
+    <AutomationRunsFrame
+      details={
+        selection.runId ? (
+          <AutomationRunDetails
+            key={selection.runId}
+            loading={loading}
+            onClose={selection.close}
+            run={runs.find((run) => run.executionId === selection.runId)}
+            showAutomation={false}
+          />
+        ) : null
+      }
+      label="Executions list"
+      listRef={selection.listRef}
+    >
+      {query.data ? (
+        <AutomationExecutionsView
+          backTo={backTo}
+          data={query.data}
+          onRowsKeyDown={selection.onRowsKeyDown}
+          onSelect={selection.toggle}
+          selectedRunId={selection.runId}
         />
-        <Card padding="md">
-          <InlineError>
-            {query.error instanceof DashboardApiError &&
-            query.error.status === 404
-              ? "This automation was not found or is not visible to you."
-              : "Automation executions could not be loaded. Try again."}
-          </InlineError>
-          <Link
-            className="mt-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
-            to={
-              automationId ? automationPath(automationId) : "/automations/list"
-            }
-          >
-            <ArrowLeft aria-hidden="true" size={14} />
-            Back to automations
-          </Link>
-        </Card>
-      </>
-    );
-  }
-
-  return <AutomationExecutionsView backTo={backTo} data={query.data} />;
+      ) : (
+        <>
+          <PageHeader
+            description="Terminal runs for one scheduled or event automation."
+            title="Automation executions"
+          />
+          {loading ? (
+            <PageContentSkeleton
+              label="Loading automation executions"
+              variant="list"
+            />
+          ) : (
+            <Card padding="md">
+              <InlineError>
+                {query.error instanceof DashboardApiError &&
+                query.error.status === 404
+                  ? "This automation was not found or is not visible to you."
+                  : "Automation executions could not be loaded. Try again."}
+              </InlineError>
+              <Link
+                className="mt-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+                to={automationPath(automationId)}
+              >
+                <ArrowLeft aria-hidden="true" size={14} />
+                Back to automations
+              </Link>
+            </Card>
+          )}
+        </>
+      )}
+    </AutomationRunsFrame>
+  );
 }
 
 function AutomationExecutionsView(props: {
   backTo: string;
   data: AutomationExecutionList;
+  onRowsKeyDown(event: KeyboardEvent<HTMLElement>): void;
+  onSelect(executionId: string): void;
+  selectedRunId: string | undefined;
 }) {
   const { data } = props;
   const [range, setRange] = useState<TimeRangeDays>(30);
@@ -171,24 +213,29 @@ function AutomationExecutionsView(props: {
           <div className="min-w-0 overflow-x-auto">
             <div className="min-w-[36rem]">
               <div
+                aria-hidden="true"
                 className={cn(
                   "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted md:grid",
                   EXECUTION_GRID,
                 )}
-                role="row"
               >
-                <div>Conversation</div>
+                <div>Run</div>
                 <div>Duration</div>
                 <div>Tokens</div>
                 <div>Cost</div>
-                <div className="sr-only">Status</div>
               </div>
-              <div className="min-w-0" role="table">
+              <div
+                className="min-w-0"
+                onKeyDown={props.onRowsKeyDown}
+                role="list"
+              >
                 {data.executions.map((execution) => (
                   <ExecutionRow
                     execution={execution}
                     fallbackTitle={data.automation.title}
                     key={execution.executionId}
+                    onSelect={() => props.onSelect(execution.executionId)}
+                    selected={props.selectedRunId === execution.executionId}
                   />
                 ))}
               </div>
@@ -209,12 +256,10 @@ function AutomationExecutionsView(props: {
 function ExecutionRow(props: {
   execution: AutomationExecution;
   fallbackTitle: string;
+  onSelect(): void;
+  selected: boolean;
 }) {
-  const { execution, fallbackTitle } = props;
-  const navigate = useNavigate();
-  const title =
-    execution.title?.trim() ||
-    (execution.conversationId ? fallbackTitle : "No conversation");
+  const { execution } = props;
   const costLabel =
     formatCostSummary(
       execution.costUsd === undefined
@@ -226,56 +271,52 @@ function ExecutionRow(props: {
     execution.totalTokens === undefined
       ? "—"
       : formatCompactNumber(execution.totalTokens);
-  const openConversation = () => {
-    if (!execution.conversationId) return;
-    navigate(conversationPath(execution.conversationId));
-  };
+  const tone = automationRunStatusTone(execution.status);
 
   return (
     <div
-      aria-disabled={!execution.conversationId}
-      className={cn(
-        "group grid min-w-0 items-center gap-4 overflow-hidden border-b border-dashboard-border-subtle px-4 py-3 text-left text-inherit transition-colors last:border-b-0 max-md:grid-cols-1 max-md:gap-y-2 max-md:px-4 max-md:py-3.5 md:grid",
-        EXECUTION_GRID,
-        execution.conversationId
-          ? "cursor-pointer hover:bg-dashboard-fill-soft"
-          : "cursor-default opacity-80",
-      )}
-      onClick={openConversation}
-      onKeyDown={(event) => {
-        if (!execution.conversationId) return;
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          openConversation();
-        }
-      }}
-      role={execution.conversationId ? "link" : "row"}
-      tabIndex={execution.conversationId ? 0 : undefined}
+      className="border-b border-dashboard-border-subtle last:border-b-0"
+      data-run-id={execution.executionId}
+      role="listitem"
     >
-      <div className="min-w-0 overflow-hidden">
-        <div className="flex min-w-0 items-center gap-2 overflow-hidden">
-          <StatusDot
-            className="md:hidden"
-            label={execution.status}
-            tone={runStatusTone(execution.status)}
-          />
-          <div className="min-w-0 truncate text-sm font-medium leading-snug text-dashboard-text">
-            {title}
-          </div>
+      <SelectableRow
+        className={cn(
+          "grid min-w-0 items-center gap-4 overflow-hidden px-4 py-3 max-md:grid-cols-1 max-md:gap-y-2 max-md:py-3.5",
+          EXECUTION_GRID,
+        )}
+        onSelect={props.onSelect}
+        selected={props.selected}
+      >
+        <button
+          aria-expanded={props.selected}
+          className="block min-w-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+          onClick={props.onSelect}
+          type="button"
+        >
+          <span className="flex min-w-0 items-center gap-2 overflow-hidden">
+            <StatusDot
+              className="md:hidden"
+              label={execution.status}
+              tone={tone}
+            />
+            <span className="min-w-0 truncate text-sm font-medium leading-snug text-dashboard-text">
+              {automationRunTitle(execution, props.fallbackTitle)}
+            </span>
+          </span>
+          <span className="mt-1 block truncate text-xs leading-relaxed text-dashboard-text-muted">
+            {formatAutomationRunTime(execution.executedAt)}
+          </span>
+        </button>
+        <MetricCell label="Duration" value={durationLabel} />
+        <MetricCell label="Tokens" value={tokensLabel} />
+        <MetricCell label="Cost" value={costLabel} />
+        <div className="hidden justify-self-center md:block">
+          <StatusDot label={execution.status} tone={tone} />
         </div>
-        <div className="mt-1 truncate text-xs leading-relaxed text-dashboard-text-muted">
-          {formatRunDate(execution.executedAt)}
+        <div className="max-md:hidden">
+          <RunConversationLink conversationId={execution.conversationId} />
         </div>
-      </div>
-      <MetricCell label="Duration" value={durationLabel} />
-      <MetricCell label="Tokens" value={tokensLabel} />
-      <MetricCell label="Cost" value={costLabel} />
-      <div className="hidden justify-self-center md:block">
-        <StatusDot
-          label={execution.status}
-          tone={runStatusTone(execution.status)}
-        />
-      </div>
+      </SelectableRow>
     </div>
   );
 }
@@ -297,12 +338,6 @@ function MetricCell(props: { label: string; value: string }) {
   );
 }
 
-function runStatusTone(status: AutomationExecution["status"]): StatusChipTone {
-  if (status === "failed") return "danger";
-  if (status === "blocked") return "warning";
-  return "success";
-}
-
 function countByStatus(executions: AutomationExecution[]) {
   return executions.reduce(
     (counts, execution) => {
@@ -312,14 +347,3 @@ function countByStatus(executions: AutomationExecution[]) {
     { blocked: 0, completed: 0, failed: 0 },
   );
 }
-
-function formatRunDate(value: string): string {
-  return formatTime(value, {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short",
-    year: "numeric",
-  });
-}