railwatch 0.9.4 → 1.1.0

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

@@ -1,143 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,309 +0,0 @@
-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>
-  )
-}