railwatch 0.6.1 → 0.7.0

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

@@ -0,0 +1,143 @@
+import { router, usePage } from "@inertiajs/react"
+import { Terminal } from "lucide-react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { StatusBadge } from "@/components/railwatch/status-badge"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { GroupRow, SharedProps } from "@/types"
+
+interface Run {
+  execution_id: string
+  name: string
+  status: number | null
+  duration: number
+  occurred_at: string
+  server: string | null
+  exception_preview: string | null
+}
+interface Props {
+  commands: GroupRow[]
+  runs: Run[]
+}
+
+export default function Commands(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const runHref = (r: Run) =>
+    R.applicationEnvironmentCommandPath(a, e, r.execution_id)
+  return (
+    <EnvLayout title="Commands">
+      <PageHeader
+        title="Commands"
+        description="Rake tasks and rails runner executions."
+      />
+      <DataTable
+        rows={p.commands}
+        rowKey={(c) => c.group_hash}
+        empty={
+          <EmptyState
+            icon={Terminal}
+            title="No commands ran in this window"
+            description="rails runner and console executions reported by the gem appear here."
+          />
+        }
+        columns={[
+          {
+            key: "n",
+            header: "Command",
+            cell: (c) => <span className="font-mono text-xs">{c.name}</span>,
+          },
+          {
+            key: "c",
+            header: "Runs",
+            align: "right",
+            cell: (c) => count(c.count),
+          },
+          {
+            key: "f",
+            hideOnMobile: true,
+            header: "Non-zero exit",
+            align: "right",
+            cell: (c) => c.errors,
+          },
+          {
+            key: "avg",
+            hideOnMobile: true,
+            header: "Avg",
+            align: "right",
+            cell: (c) => ms(c.avg),
+          },
+          {
+            key: "max",
+            hideOnMobile: true,
+            header: "Max",
+            align: "right",
+            cell: (c) => ms(c.max),
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Recent runs</h2>
+      <DataTable
+        rows={p.runs}
+        rowKey={(r) => r.execution_id}
+        onRowClick={(r) => router.visit(runHref(r))}
+        keyboardNav={{
+          onOpen: (r, opts) =>
+            opts?.newTab
+              ? window.open(runHref(r), "_blank")
+              : router.visit(runHref(r)),
+        }}
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (r) => <span className="text-xs">{when(r.occurred_at)}</span>,
+          },
+          {
+            key: "n",
+            header: "Command",
+            cell: (r) => <span className="font-mono text-xs">{r.name}</span>,
+          },
+          {
+            key: "x",
+            hideOnMobile: true,
+            header: "Exit",
+            cell: (r) => (
+              <StatusBadge
+                label={String(r.status ?? "?")}
+                outcome={r.status ? "failed" : "processed"}
+              />
+            ),
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (r) => ms(r.duration),
+          },
+          {
+            key: "s",
+            hideOnMobile: true,
+            header: "Server",
+            cell: (r) => <span className="font-mono text-xs">{r.server}</span>,
+          },
+          {
+            key: "ex",
+            hideOnMobile: true,
+            header: "Exception",
+            cell: (r) => (
+              <span className="text-destructive line-clamp-1 text-xs">
+                {r.exception_preview ?? ""}
+              </span>
+            ),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,94 @@
+import { router, usePage } from "@inertiajs/react"
+import { Rocket } from "lucide-react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import EnvLayout from "@/layouts/env-layout"
+import { count, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface DeployRow {
+  id: number
+  deploy: string
+  ref: string
+  name: string | null
+  url: string | null
+  server: string | null
+  deployed_at: string
+  commits_count: number
+  performer: string | null
+}
+
+export default function Deploys(p: { deploys: DeployRow[] }) {
+  const { environment } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const deployHref = (d: DeployRow) =>
+    R.applicationEnvironmentDeployPath(a, e, d.id)
+  return (
+    <EnvLayout title="Deploys">
+      <PageHeader
+        withWindow={false}
+        title="Deploys"
+        description="Recorded by bin/rails railwatch:deploy or the Kamal post-deploy hook. Click one to compare the hour before and after."
+      />
+      <DataTable
+        rows={p.deploys}
+        rowKey={(d) => d.id}
+        empty={
+          <EmptyState
+            icon={Rocket}
+            title="No deploys recorded"
+            description="Run bin/rails railwatch:deploy or install the Kamal hook to track deploys."
+          />
+        }
+        onRowClick={(d) => router.visit(deployHref(d))}
+        keyboardNav={{
+          onOpen: (d, opts) =>
+            opts?.newTab
+              ? window.open(deployHref(d), "_blank")
+              : router.visit(deployHref(d)),
+        }}
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (d) => <span className="text-xs">{when(d.deployed_at)}</span>,
+          },
+          {
+            key: "d",
+            header: "Deploy",
+            cell: (d) => <span className="font-mono text-xs">{d.deploy}</span>,
+          },
+          {
+            key: "r",
+            hideOnMobile: true,
+            header: "Ref",
+            cell: (d) => <span className="font-mono text-xs">{d.ref}</span>,
+          },
+          { key: "n", hideOnMobile: true, header: "Name", cell: (d) => d.name },
+          {
+            key: "by",
+            hideOnMobile: true,
+            header: "By",
+            cell: (d) => <span className="text-xs">{d.performer}</span>,
+          },
+          {
+            key: "c",
+            hideOnMobile: true,
+            header: "Commits",
+            align: "right",
+            cell: (d) => count(d.commits_count),
+          },
+          {
+            key: "s",
+            header: "Server",
+            cell: (d) => <span className="font-mono text-xs">{d.server}</span>,
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

data/app/frontend/pages/deploys/show.tsx

@@ -0,0 +1,309 @@
+import { Link, usePage } from "@inertiajs/react"
+import { AlertOctagon, GitCommitHorizontal } from "lucide-react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { RelativeTime } from "@/components/railwatch/relative-time"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { IssueStatusBadge } from "@/components/railwatch/status-badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, pct, when } from "@/lib/format"
+import { commitUrl, compareUrl } from "@/lib/source-link"
+import { ReleaseHealthStrip } from "@/pages/releases/release-health"
+import * as R from "@/routes"
+import type { ReleaseHealthSummary, SharedProps, Summary } from "@/types"
+
+interface Commit {
+  sha: string
+  author: string | null
+  message: string | null
+  at: string | null
+}
+
+interface Props {
+  deploy: {
+    id: number
+    deploy: string
+    ref: string
+    name: string | null
+    url: string | null
+    server: string | null
+    deployed_at: string
+    commits: Commit[]
+    previous_ref: string | null
+    repository_ref: string | null
+    detail: Record<string, string>
+  }
+  compare: Record<string, { before: Summary; after: Summary }>
+  health: ReleaseHealthSummary
+  new_issues: { id: number; key: string; title: string; status: string }[]
+  resolved_issues: { id: number; key: string; title: string }[]
+}
+
+function delta(before: number, after: number) {
+  if (!before) return null
+  const d = ((after - before) / before) * 100
+  return (
+    <span
+      className={
+        d > 10
+          ? "text-destructive"
+          : d < -10
+            ? "text-emerald-600"
+            : "text-muted-foreground"
+      }
+    >
+      {d > 0 ? "+" : ""}
+      {d.toFixed(0)}%
+    </span>
+  )
+}
+
+export default function DeployShow(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const r = p.compare.request
+  const j = p.compare.job_attempt
+  const repositoryUrl = environment!.repository_url
+  const compare = compareUrl(
+    repositoryUrl,
+    p.deploy.previous_ref,
+    p.deploy.repository_ref,
+  )
+  const codeHost = repositoryUrl?.includes("gitlab") ? "GitLab" : "GitHub"
+  return (
+    <EnvLayout
+      title={p.deploy.ref}
+      crumbs={[
+        { title: "Deploys", href: R.applicationEnvironmentDeploysPath(a, e) },
+        { title: p.deploy.ref, href: "#" },
+      ]}
+    >
+      <PageHeader
+        withWindow={false}
+        title={<span className="font-mono">{p.deploy.deploy}</span>}
+        description={`${when(p.deploy.deployed_at)}${p.deploy.name ? ` · ${p.deploy.name}` : ""}${p.deploy.url ? " · " : ""}`}
+        actions={
+          p.deploy.url && (
+            <a
+              className="text-sm underline"
+              href={p.deploy.url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Open
+            </a>
+          )
+        }
+      />
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold">
+          Changes
+          {p.deploy.previous_ref && (
+            <span className="text-muted-foreground ml-2 font-mono text-xs font-normal">
+              since {p.deploy.previous_ref.slice(0, 7)}
+            </span>
+          )}
+        </h2>
+        {compare && (
+          <Button asChild variant="outline" size="sm">
+            <a href={compare} target="_blank" rel="noreferrer">
+              Compare on {codeHost}
+            </a>
+          </Button>
+        )}
+      </div>
+      <DataTable
+        rows={p.deploy.commits}
+        rowKey={(c) => c.sha}
+        empty={
+          <EmptyState
+            icon={GitCommitHorizontal}
+            title="No commits recorded"
+            description="The post-deploy hook sends the commits in each deploy. Reinstall it with bin/rails generate railwatch:install."
+          />
+        }
+        columns={[
+          {
+            key: "sha",
+            header: "Commit",
+            cell: (c) => {
+              const url = commitUrl(repositoryUrl, c.sha)
+              const short = c.sha.slice(0, 7)
+              return url ? (
+                <a
+                  className="font-mono text-xs hover:underline"
+                  href={url}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {short}
+                </a>
+              ) : (
+                <span className="font-mono text-xs">{short}</span>
+              )
+            },
+          },
+          {
+            key: "m",
+            header: "Message",
+            cell: (c) => (
+              <span className="line-clamp-1 text-xs">{c.message}</span>
+            ),
+          },
+          {
+            key: "a",
+            hideOnMobile: true,
+            header: "Author",
+            cell: (c) => <span className="text-xs">{c.author}</span>,
+          },
+          {
+            key: "at",
+            hideOnMobile: true,
+            header: "When",
+            align: "right",
+            cell: (c) => <RelativeTime className="text-xs" iso={c.at} />,
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Release health</h2>
+      <ReleaseHealthStrip health={p.health} />
+      <h2 className="text-sm font-semibold">Hour before vs hour after</h2>
+      <StatStrip>
+        <Stat
+          label="Request p95"
+          value={
+            <>
+              {ms(r.after.p95 / 1000)} {delta(r.before.p95, r.after.p95)}
+            </>
+          }
+          hint={`was ${ms(r.before.p95 / 1000)}`}
+        />
+        <Stat
+          label="Request error rate"
+          value={
+            <>
+              {pct(r.after.errors, r.after.count)}{" "}
+              {delta(
+                r.before.errors / Math.max(1, r.before.count),
+                r.after.errors / Math.max(1, r.after.count),
+              )}
+            </>
+          }
+          hint={`was ${pct(r.before.errors, r.before.count)}`}
+        />
+        <Stat
+          label="Requests"
+          value={
+            <>
+              {count(r.after.count)} {delta(r.before.count, r.after.count)}
+            </>
+          }
+          hint={`was ${count(r.before.count)}`}
+        />
+        <Stat
+          label="Job failures"
+          value={
+            <>
+              {pct(j.after.errors, j.after.count)}{" "}
+              {delta(
+                j.before.errors / Math.max(1, j.before.count),
+                j.after.errors / Math.max(1, j.after.count),
+              )}
+            </>
+          }
+          hint={`was ${pct(j.before.errors, j.before.count)}`}
+        />
+      </StatStrip>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>New issues after this deploy</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              rows={p.new_issues}
+              rowKey={(i) => i.id}
+              empty={
+                <EmptyState
+                  icon={AlertOctagon}
+                  title="No new issues in the 24 hours after"
+                  description="Issues first seen after this deploy would show here."
+                />
+              }
+              columns={[
+                {
+                  key: "k",
+                  header: "Issue",
+                  cell: (i) => (
+                    <Link
+                      className="font-mono text-xs hover:underline"
+                      href={R.issuePath(i.id)}
+                    >
+                      {i.key}
+                    </Link>
+                  ),
+                },
+                {
+                  key: "t",
+                  header: "Title",
+                  cell: (i) => (
+                    <span className="line-clamp-1 text-xs">{i.title}</span>
+                  ),
+                },
+                {
+                  key: "s",
+                  header: "",
+                  cell: (i) => <IssueStatusBadge status={i.status} />,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Resolved in this deploy</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              rows={p.resolved_issues}
+              rowKey={(i) => i.id}
+              empty={
+                <EmptyState
+                  icon={AlertOctagon}
+                  title="No issues marked resolved in this deploy"
+                  description="Issues resolved and tagged with this deploy's ref would show here."
+                />
+              }
+              columns={[
+                {
+                  key: "k",
+                  header: "Issue",
+                  cell: (i) => (
+                    <Link
+                      className="font-mono text-xs hover:underline"
+                      href={R.issuePath(i.id)}
+                    >
+                      {i.key}
+                    </Link>
+                  ),
+                },
+                {
+                  key: "t",
+                  header: "Title",
+                  cell: (i) => (
+                    <span className="line-clamp-1 text-xs">{i.title}</span>
+                  ),
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </EnvLayout>
+  )
+}