feat(alerts): alerts page — list, detail, actions, contextual entry points

Alerts page: list, detail, actions, contextual entry points, and legacy
replacement flow.

Mono-RevId: 3d801a2f11f2ab62ab8f661c25bf31898b7f801d

Author: kathiekiwi

apps/webapp/app/components/BlankStatePanels.tsx

@@ -1,7 +1,6 @@
 import { DeploymentOnboardingFrame } from "./deployments/DeploymentOnboardingFrame";
 import {
   BeakerIcon,
-  BellAlertIcon,
   BookOpenIcon,
   ChatBubbleLeftRightIcon,
   CheckIcon,
@@ -25,7 +24,7 @@ import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { type MinimumEnvironment } from "~/presenters/SelectBestEnvironmentPresenter.server";
 import { type BranchableEnvironmentToken } from "~/utils/branchableEnvironment";
-import { NewBranchPanel } from "~/routes/resources.branches.create";
+import { NewBranchPanel } from "~/components/branches/NewBranchPanel";
 import { GitHubSettingsPanel } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.github";
 import { deployNowPath } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deploy-now";
 import { VercelAtomicDeploymentNotice } from "~/components/deployments/VercelAtomicDeploymentNotice";
@@ -39,7 +38,6 @@ import {
   v3DeploymentPath,
   v3DeploymentsPath,
   v3EnvironmentPath,
-  v3NewProjectAlertPath,
 } from "~/utils/pathBuilder";
 import { AskAgentButton } from "./dashboard-agent/AskAgentButton";
 import { CodeBlock } from "./code/CodeBlock";
@@ -436,79 +434,6 @@ export function DeploymentsNoneDev({ enhanced = false }: { enhanced?: boolean }
   );
 }
 
-export function AlertsNoneDev() {
-  return (
-    <div className="space-y-8">
-      <InfoPanel
-        icon={BellAlertIcon}
-        iconClassName="text-alerts"
-        title="Adding alerts"
-        panelClassName="max-w-full"
-      >
-        <Paragraph spacing variant="small">
-          You can get alerted when deployed runs fail.
-        </Paragraph>
-        <Paragraph spacing variant="small">
-          We don't support alerts in the Development environment. Switch to a deployed environment
-          to setup alerts.
-        </Paragraph>
-        <div className="flex gap-3">
-          <LinkButton
-            to={docsPath("troubleshooting-alerts")}
-            variant="docs/medium"
-            LeadingIcon={BookOpenIcon}
-            className="inline-flex"
-          >
-            How to setup alerts
-          </LinkButton>
-        </div>
-      </InfoPanel>
-      <SwitcherPanel />
-    </div>
-  );
-}
-
-export function AlertsNoneDeployed() {
-  const organization = useOrganization();
-  const project = useProject();
-  const environment = useEnvironment();
-
-  return (
-    <div className="space-y-8">
-      <InfoPanel
-        icon={BellAlertIcon}
-        iconClassName="text-alerts"
-        title="Adding alerts"
-        panelClassName="max-w-full"
-      >
-        <Paragraph spacing variant="small">
-          You can get alerted when deployed runs fail. We currently support sending Slack, Email,
-          and webhooks.
-        </Paragraph>
-
-        <div className="flex items-center justify-between gap-3">
-          <LinkButton
-            to={docsPath("troubleshooting-alerts")}
-            variant="docs/medium"
-            LeadingIcon={BookOpenIcon}
-            className="inline-flex"
-          >
-            Alerts docs
-          </LinkButton>
-          <LinkButton
-            to={v3NewProjectAlertPath(organization, project, environment)}
-            variant="primary/medium"
-            LeadingIcon={PlusIcon}
-            shortcut={{ key: "n" }}
-          >
-            New alert
-          </LinkButton>
-        </div>
-      </InfoPanel>
-    </div>
-  );
-}
-
 export function NoWaitpointTokens() {
   return (
     <InfoPanel
@@ -662,26 +587,6 @@ export function BranchesNoBranches({
   );
 }
 
-function SwitcherPanel({ title = "Switch to a deployed environment" }: { title?: string }) {
-  const organization = useOrganization();
-  const project = useProject();
-  const environment = useEnvironment();
-
-  return (
-    <div className="flex items-center rounded-md border border-grid-bright bg-background-bright p-3">
-      <Paragraph variant="small" className="grow">
-        {title}
-      </Paragraph>
-      <EnvironmentSelector
-        organization={organization}
-        project={project}
-        environment={environment}
-        className="w-auto grow-0 rounded-sm bg-grid-bright"
-      />
-    </div>
-  );
-}
-
 export function BulkActionsNone() {
   const organization = useOrganization();
   const project = useProject();

apps/webapp/app/components/alerts/ActivityBars.tsx

@@ -0,0 +1,101 @@
+import { buildActivityTimeAxis } from "~/components/primitives/charts/activityTimeAxis";
+import type { ChartBarReferenceArea } from "~/components/primitives/charts/ChartBar";
+import { Chart, type ChartConfig } from "~/components/primitives/charts/ChartCompound";
+import { cn } from "~/utils/cn";
+
+export const EVENT_CHART_COLOR = "#6c5ce7";
+
+export type ActivityPoint = { bucket: number } & Record<string, number | string | null | undefined>;
+
+export type ActivitySeries = { key: string; label: string; color: string };
+
+export type ActivityYAxisMode = "unit" | "count";
+
+type ActivityYAxis = React.ComponentProps<typeof Chart.Bar>["yAxisProps"];
+
+const Y_AXIS: Record<ActivityYAxisMode, ActivityYAxis> = {
+  unit: { hide: true, domain: [0, 1] },
+  count: {
+    allowDecimals: false,
+    domain: [0, (dataMax: number) => Math.max(1, Math.ceil(dataMax * 1.15))],
+  },
+};
+
+const ACTIVITY_BARS_CLASS =
+  "min-h-0 w-full [&_.recharts-cartesian-grid_line]:[stroke-dasharray:3px_3px]";
+
+export function raiseBucket(data: ActivityPoint[], raisedAt: Date): number | undefined {
+  const at = raisedAt.getTime();
+  return data.find(
+    (row, index) =>
+      row.bucket <= at && (data[index + 1] === undefined || data[index + 1]!.bucket > at)
+  )?.bucket;
+}
+
+export function ActivityBars({
+  data,
+  series,
+  yAxis,
+  valueFormatter,
+  raisedAt,
+  referenceArea,
+  height,
+  timeZone,
+}: {
+  data: ActivityPoint[];
+  series: ActivitySeries[];
+  yAxis?: ActivityYAxisMode;
+  valueFormatter?: (value: number) => string;
+  raisedAt?: Date | null;
+  referenceArea?: ChartBarReferenceArea | ChartBarReferenceArea[] | null;
+  /** Fixed height; fills the parent when omitted. */
+  height?: number;
+  timeZone?: string;
+}) {
+  const { tickFormatter, tooltipLabelFormatter } = buildActivityTimeAxis(
+    data,
+    undefined,
+    undefined,
+    timeZone
+  );
+  const config: ChartConfig = Object.fromEntries(
+    series.map((s) => [s.key, { label: s.label, color: s.color }])
+  );
+
+  const raiseTick = raisedAt ? raiseBucket(data, raisedAt) : undefined;
+  // Chart.Bar has no vertical reference line, so the raise gets its own labelled tick.
+  const ticks =
+    raiseTick === undefined
+      ? undefined
+      : [...new Set([data[0]!.bucket, raiseTick, data[data.length - 1]!.bucket])];
+
+  return (
+    <div
+      className={cn(ACTIVITY_BARS_CLASS, !height && "h-full")}
+      style={height ? { height, minHeight: height } : undefined}
+    >
+      <Chart.Root
+        config={config}
+        data={data}
+        dataKey="bucket"
+        series={series.map((s) => s.key)}
+        fillContainer
+      >
+        <Chart.Bar
+          stackId="activity"
+          barRadius={0}
+          xAxisProps={{
+            // A `ticks: undefined` key would still override Chart.Bar's auto ticks.
+            ...(ticks !== undefined ? { ticks } : {}),
+            tickFormatter: (value: number) =>
+              value === raiseTick ? `▲ raised ${tickFormatter(value)}` : tickFormatter(value),
+          }}
+          yAxisProps={yAxis ? Y_AXIS[yAxis] : undefined}
+          referenceArea={referenceArea}
+          tooltipLabelFormatter={tooltipLabelFormatter}
+          tooltipValueFormatter={valueFormatter}
+        />
+      </Chart.Root>
+    </div>
+  );
+}