railwatch 0.6.1 → 0.7.0

data/app/frontend/pages/jobs/index.tsx

@@ -0,0 +1,381 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Workflow } from "lucide-react"
+
+import { ChartHoverProvider } from "@/components/railwatch/chart-hover"
+import { VolumePanel } from "@/components/railwatch/chart-panel"
+import { CursorLoadMore } from "@/components/railwatch/cursor-load-more"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { FilterBar } from "@/components/railwatch/filter-bar"
+import {
+  OriginIdentity,
+  type OriginIdentityData,
+} from "@/components/railwatch/origin-identity"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { PercentilePicker } from "@/components/railwatch/percentile-picker"
+import { SavedViewsMenu } from "@/components/railwatch/saved-views"
+import { SparklineCell } from "@/components/railwatch/sparkline-cell"
+import { StatusBadge } from "@/components/railwatch/status-badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { usePercentile } from "@/hooks/use-percentile"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, pct, when } from "@/lib/format"
+import * as R from "@/routes"
+import type {
+  CursorMeta,
+  DeployMarker,
+  GroupRow,
+  SeriesPoint,
+  SharedProps,
+} from "@/types"
+
+interface JobRow extends OriginIdentityData {
+  execution_id: string
+  name: string
+  outcome: string
+  queue: string
+  attempt: number
+  duration: number
+  queue_latency: number | null
+  occurred_at: string
+  exception_preview: string | null
+}
+interface Props {
+  classes: GroupRow[]
+  series: SeriesPoint[]
+  queues: {
+    queue: string
+    count: number
+    avg_latency: number
+    failed: number
+  }[]
+  recent: JobRow[]
+  pagination: CursorMeta
+  deploys: DeployMarker[]
+  q: string
+}
+
+export default function Jobs(p: Props) {
+  const { environment, window, range } = usePage<SharedProps>().props
+  const { percentile } = usePercentile()
+  const a = environment!.application_id
+  const e = environment!.id
+  const timeParams =
+    window === "custom"
+      ? { from: range?.from, to: range?.to }
+      : { window: window }
+  const cursorTimeParams = range
+    ? { from: range.from, to: range.to }
+    : timeParams
+  const recentPath = (cursor?: string) =>
+    R.applicationEnvironmentJobsPath(a, e, {
+      ...cursorTimeParams,
+      q: p.q || undefined,
+      cursor,
+      limit: p.pagination.limit,
+    })
+  const jobHref = (j: JobRow) =>
+    R.applicationEnvironmentJobPath(a, e, j.execution_id)
+  const classHref = (x: GroupRow) =>
+    R.klassApplicationEnvironmentJobsPath(a, e, x.group_hash, {
+      ...timeParams,
+      q: p.q || undefined,
+    })
+  return (
+    <EnvLayout title="Jobs">
+      <ChartHoverProvider>
+        <PageHeader
+          title="Jobs"
+          description="Active Job attempts by class and queue, with queue latency and failures."
+          actions={
+            <>
+              <SavedViewsMenu page="jobs" />
+              <PercentilePicker />
+            </>
+          }
+        />
+        <VolumePanel
+          legend="job"
+          label="Job attempts"
+          seriesLabel="Attempts"
+          data={p.series}
+          deploys={p.deploys}
+        />
+        <div className="grid gap-4 lg:grid-cols-3">
+          <Card className="lg:col-span-1">
+            <CardHeader>
+              <CardTitle>Queues</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <DataTable
+                rows={p.queues}
+                rowKey={(q) => q.queue ?? "-"}
+                columns={[
+                  {
+                    key: "q",
+                    header: "Queue",
+                    cell: (q) => (
+                      <span className="font-mono text-xs">{q.queue}</span>
+                    ),
+                  },
+                  {
+                    key: "n",
+                    header: "Attempts",
+                    align: "right",
+                    cell: (q) => count(q.count),
+                  },
+                  {
+                    key: "lat",
+                    hideOnMobile: true,
+                    header: "Avg wait",
+                    align: "right",
+                    cell: (q) => ms(q.avg_latency),
+                  },
+                  {
+                    key: "f",
+                    header: "Failed",
+                    align: "right",
+                    cell: (q) => q.failed,
+                  },
+                ]}
+              />
+            </CardContent>
+          </Card>
+          <Card className="lg:col-span-2">
+            <CardHeader>
+              <CardTitle>Recent runs</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <FilterBar
+                value={p.q}
+                fields={[
+                  { key: "after", label: "After" },
+                  { key: "before", label: "Before" },
+                  { key: "user", label: "User" },
+                  { key: "tenant", label: "Tenant" },
+                  { key: "deploy", label: "Deploy" },
+                  {
+                    key: "kind",
+                    label: "Execution kind",
+                    options: ["job"],
+                  },
+                  { key: "queue", label: "Queue" },
+                  { key: "class", label: "Job class" },
+                  { key: "job_id", label: "Job ID" },
+                  {
+                    key: "outcome",
+                    label: "Outcome",
+                    options: ["processed", "failed"],
+                  },
+                ]}
+                onChange={(q) =>
+                  router.visit(
+                    R.applicationEnvironmentJobsPath(a, e, {
+                      ...timeParams,
+                      q: q || undefined,
+                    }),
+                    {
+                      only: ["recent", "pagination", "q"],
+                      preserveState: true,
+                      reset: ["recent"],
+                    },
+                  )
+                }
+                placeholder="queue:default outcome:failed"
+              />
+              <DataTable
+                rows={p.recent}
+                rowKey={(j) => j.execution_id}
+                empty={
+                  <EmptyState
+                    icon={Workflow}
+                    title="No job runs in this window"
+                    description="Job classes appear here once Active Job executions are reported."
+                  />
+                }
+                onRowClick={(j) => router.visit(jobHref(j))}
+                keyboardNav={{
+                  onOpen: (j, opts) =>
+                    opts?.newTab
+                      ? globalThis.window.open(jobHref(j), "_blank")
+                      : router.visit(jobHref(j)),
+                }}
+                columns={[
+                  {
+                    key: "when",
+                    header: "When",
+                    cell: (j) => (
+                      <span className="text-xs">{when(j.occurred_at)}</span>
+                    ),
+                  },
+                  {
+                    key: "name",
+                    header: "Job",
+                    grow: true,
+                    cell: (j) => (
+                      <span className="font-mono text-xs">{j.name}</span>
+                    ),
+                  },
+                  {
+                    key: "st",
+                    header: "Outcome",
+                    cell: (j) => <StatusBadge outcome={j.outcome} />,
+                  },
+                  {
+                    key: "att",
+                    hideOnMobile: true,
+                    header: "Attempt",
+                    align: "right",
+                    cell: (j) => j.attempt,
+                  },
+                  {
+                    key: "user",
+                    // The card is two thirds of the page; below 2xl the job
+                    // name needs this width more. The job class page shows it.
+                    className: "hidden 2xl:table-cell",
+                    header: "Origin user",
+                    cell: (j) => (
+                      <OriginIdentity
+                        {...j}
+                        applicationId={a}
+                        environmentId={e}
+                        kind="user"
+                        range={range}
+                        window={window}
+                      />
+                    ),
+                  },
+                  {
+                    key: "tenant",
+                    // The card is two thirds of the page; below 2xl the job
+                    // name needs this width more. The job class page shows it.
+                    className: "hidden 2xl:table-cell",
+                    header: "Origin tenant",
+                    cell: (j) => (
+                      <OriginIdentity
+                        {...j}
+                        applicationId={a}
+                        environmentId={e}
+                        kind="tenant"
+                        range={range}
+                        window={window}
+                      />
+                    ),
+                  },
+                  {
+                    key: "ex",
+                    hideOnMobile: true,
+                    header: "Exception",
+                    // Capped so a long message truncates instead of
+                    // squeezing the job name out of a one-third-width card.
+                    className: "max-w-48",
+                    cell: (j) => (
+                      <span className="text-destructive block truncate text-xs">
+                        {j.exception_preview}
+                      </span>
+                    ),
+                  },
+                ]}
+              />
+              <CursorLoadMore
+                meta={p.pagination}
+                href={recentPath}
+                only={["recent", "pagination"]}
+              />
+            </CardContent>
+          </Card>
+        </div>
+        <DataTable
+          rows={p.classes}
+          rowKey={(x) => x.group_hash}
+          empty={
+            <EmptyState
+              icon={Workflow}
+              title="No job attempts in this window"
+              description="Individual job executions appear here as they run."
+            />
+          }
+          hoverKey={(x) => x.group_hash}
+          keyboardNav={{
+            onOpen: (x, opts) =>
+              opts?.newTab
+                ? globalThis.window.open(classHref(x), "_blank")
+                : router.visit(classHref(x)),
+          }}
+          columns={[
+            {
+              key: "name",
+              header: "Job",
+              grow: true,
+              cell: (x) => (
+                <Link
+                  className="font-mono text-xs hover:underline"
+                  href={classHref(x)}
+                >
+                  {x.name}
+                </Link>
+              ),
+            },
+            {
+              key: "trend",
+              hideOnMobile: true,
+              header: "Trend",
+              cell: (x) => (
+                <SparklineCell data={x.sparkline} hoverKey={x.group_hash} />
+              ),
+            },
+            {
+              key: "n",
+              header: "Attempts",
+              align: "right",
+              cell: (x) => count(x.count),
+            },
+            {
+              key: "f",
+              header: "Failed",
+              align: "right",
+              cell: (x) => (
+                <span className={x.errors ? "text-destructive" : ""}>
+                  {x.errors}
+                </span>
+              ),
+            },
+            {
+              key: "fr",
+              hideOnMobile: true,
+              header: "Failure %",
+              align: "right",
+              cell: (x) => pct(x.errors, x.count),
+            },
+            {
+              key: "avg",
+              hideOnMobile: true,
+              header: "Avg",
+              align: "right",
+              cell: (x) => ms(x.avg),
+            },
+            {
+              key: percentile,
+              header: percentile,
+              align: "right",
+              cell: (x) => (
+                <span className="font-semibold">{ms(x[percentile])}</span>
+              ),
+            },
+            {
+              key: "max",
+              hideOnMobile: true,
+              header: "Max",
+              align: "right",
+              cell: (x) => ms(x.max),
+            },
+          ]}
+        />
+        <p className="text-muted-foreground text-xs">
+          <StatusBadge outcome="processed" /> processed ·{" "}
+          <StatusBadge outcome="failed" /> failed
+        </p>
+      </ChartHoverProvider>
+    </EnvLayout>
+  )
+}

data/app/frontend/pages/jobs/klass.tsx

@@ -0,0 +1,215 @@
+import { router, usePage } from "@inertiajs/react"
+
+import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+import { FilterBar } from "@/components/railwatch/filter-bar"
+import {
+  OriginIdentity,
+  type OriginIdentityData,
+} from "@/components/railwatch/origin-identity"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { StatusBadge } from "@/components/railwatch/status-badge"
+import { useWindow } from "@/hooks/use-window"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, pct, when } from "@/lib/format"
+import * as R from "@/routes"
+import type {
+  DeployMarker,
+  SeriesPoint,
+  SharedProps,
+  SummaryWithDelta,
+} from "@/types"
+
+interface Attempt extends OriginIdentityData {
+  execution_id: string
+  name: string
+  outcome: string
+  queue: string
+  attempt: number
+  duration: number
+  queue_latency: number | null
+  occurred_at: string
+  exception_preview: string | null
+  job_id: string
+}
+interface Props {
+  name: string
+  group_hash: string
+  summary: SummaryWithDelta
+  series: SeriesPoint[]
+  attempts: Attempt[]
+  deploys: DeployMarker[]
+  q: string
+}
+
+export default function JobClass(p: Props) {
+  const { environment, window, range } = usePage<SharedProps>().props
+  const { window: currentWindow, label: windowLabel } = useWindow()
+  const a = environment!.application_id
+  const e = environment!.id
+  const timeParams =
+    window === "custom"
+      ? { from: range?.from, to: range?.to }
+      : { window: window }
+  const s = p.summary.current
+  const prev = p.summary.previous
+  const deltaCaption =
+    currentWindow === "custom"
+      ? "vs previous period"
+      : `vs previous ${windowLabel}`
+  return (
+    <EnvLayout
+      title={p.name}
+      crumbs={[
+        {
+          title: "Jobs",
+          href: R.applicationEnvironmentJobsPath(a, e, { window }),
+        },
+        { title: p.name, href: "#" },
+      ]}
+    >
+      <PageHeader title={<span className="font-mono">{p.name}</span>} />
+      <StatStrip>
+        <Stat label="Attempts" value={count(s.count)} />
+        <Stat
+          label="Failed"
+          value={pct(s.errors, s.count)}
+          tone={s.errors ? "destructive" : "success"}
+          delta={{
+            current: s.count ? (s.errors / s.count) * 100 : 0,
+            previous: prev.count ? (prev.errors / prev.count) * 100 : 0,
+            goodDirection: "down",
+          }}
+          deltaCaption={deltaCaption}
+        />
+        <Stat
+          label="p50 / p95"
+          value={ms(s.p50 / 1000)}
+          hint={`p95 ${ms(s.p95 / 1000)}`}
+          delta={{ current: s.p95, previous: prev.p95, goodDirection: "down" }}
+          deltaCaption={deltaCaption}
+        />
+        <Stat label="Max" value={ms(s.max / 1000)} />
+      </StatStrip>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <VolumePanel
+          legend="job"
+          label="Attempts"
+          seriesLabel="Attempts"
+          data={p.series}
+          deploys={p.deploys}
+        />
+        <DurationPanel label="Duration" data={p.series} deploys={p.deploys} />
+      </div>
+      <FilterBar
+        value={p.q}
+        fields={[
+          { key: "user", label: "Origin user" },
+          { key: "tenant", label: "Origin tenant" },
+          { key: "queue", label: "Queue" },
+          { key: "job_id", label: "Job ID" },
+          {
+            key: "outcome",
+            label: "Outcome",
+            options: ["processed", "failed"],
+          },
+        ]}
+        onChange={(q) =>
+          router.visit(
+            R.klassApplicationEnvironmentJobsPath(a, e, p.group_hash, {
+              ...timeParams,
+              q: q || undefined,
+            }),
+            { preserveState: true },
+          )
+        }
+        placeholder="Filter attempts by origin, queue, or outcome"
+      />
+      <DataTable
+        rows={p.attempts}
+        rowKey={(x) => x.execution_id}
+        onRowClick={(x) =>
+          router.visit(R.applicationEnvironmentJobPath(a, e, x.execution_id))
+        }
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (x) => <span className="text-xs">{when(x.occurred_at)}</span>,
+          },
+          {
+            key: "st",
+            header: "Outcome",
+            cell: (x) => <StatusBadge outcome={x.outcome} />,
+          },
+          {
+            key: "att",
+            hideOnMobile: true,
+            header: "Attempt",
+            align: "right",
+            cell: (x) => x.attempt,
+          },
+          {
+            key: "q",
+            hideOnMobile: true,
+            header: "Queue",
+            cell: (x) => x.queue,
+          },
+          {
+            key: "user",
+            hideOnMobile: true,
+            header: "Origin user",
+            cell: (x) => (
+              <OriginIdentity
+                {...x}
+                applicationId={a}
+                environmentId={e}
+                kind="user"
+                range={range}
+                window={window}
+              />
+            ),
+          },
+          {
+            key: "tenant",
+            hideOnMobile: true,
+            header: "Origin tenant",
+            cell: (x) => (
+              <OriginIdentity
+                {...x}
+                applicationId={a}
+                environmentId={e}
+                kind="tenant"
+                range={range}
+                window={window}
+              />
+            ),
+          },
+          {
+            key: "wait",
+            hideOnMobile: true,
+            header: "Waited",
+            align: "right",
+            cell: (x) => ms(x.queue_latency),
+          },
+          {
+            key: "dur",
+            header: "Duration",
+            align: "right",
+            cell: (x) => ms(x.duration),
+          },
+          {
+            key: "ex",
+            header: "Exception",
+            cell: (x) => (
+              <span className="text-destructive line-clamp-1 text-xs">
+                {x.exception_preview ?? ""}
+              </span>
+            ),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}