railwatch 0.6.1 → 0.7.0

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

@@ -0,0 +1,150 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { HardDrive } 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, ms, when } from "@/lib/format"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+interface Op {
+  service: string
+  op: string
+  count: number
+  avg: number
+  max: number
+}
+interface Recent {
+  id: number
+  service: string
+  op: string
+  key: string
+  duration: number
+  occurred_at: string
+  execution_id: string | null
+  execution_preview: string | null
+}
+interface Props {
+  ops: Op[]
+  recent: Recent[]
+}
+
+export default function StorageOps(p: Props) {
+  const { environment } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const recentHref = (r: Recent) =>
+    r.execution_id
+      ? R.applicationEnvironmentRequestPath(a, e, r.execution_id)
+      : null
+  return (
+    <EnvLayout title="Storage">
+      <PageHeader
+        title="Storage"
+        description="Active Storage service operations: uploads, downloads, deletes, URL generation, analysis, and transforms."
+      />
+      <DataTable
+        rows={p.ops}
+        rowKey={(o) => `${o.service}-${o.op}`}
+        empty={
+          <EmptyState
+            icon={HardDrive}
+            title="No storage operations in this window"
+            description="Active Storage reads and writes instrumented by the gem appear here."
+          />
+        }
+        columns={[
+          { key: "s", header: "Service", cell: (o) => o.service },
+          {
+            key: "o",
+            header: "Operation",
+            cell: (o) => <span className="font-mono text-xs">{o.op}</span>,
+          },
+          {
+            key: "n",
+            header: "Count",
+            align: "right",
+            cell: (o) => count(o.count),
+          },
+          {
+            key: "avg",
+            hideOnMobile: true,
+            header: "Avg",
+            align: "right",
+            cell: (o) => ms(o.avg),
+          },
+          {
+            key: "max",
+            hideOnMobile: true,
+            header: "Max",
+            align: "right",
+            cell: (o) => ms(o.max),
+          },
+        ]}
+      />
+      <h2 className="text-sm font-semibold">Recent</h2>
+      <DataTable
+        rows={p.recent}
+        rowKey={(r) => r.id}
+        empty={
+          <EmptyState
+            icon={HardDrive}
+            title="No storage operations in this window"
+            description="Active Storage reads and writes instrumented by the gem appear here."
+          />
+        }
+        keyboardNav={{
+          onOpen: (r, opts) => {
+            const href = recentHref(r)
+            if (!href) return
+            if (opts?.newTab) window.open(href, "_blank")
+            else router.visit(href)
+          },
+        }}
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (r) => <span className="text-xs">{when(r.occurred_at)}</span>,
+          },
+          {
+            key: "o",
+            header: "Op",
+            cell: (r) => (
+              <span className="font-mono text-xs">
+                {r.service} {r.op}
+              </span>
+            ),
+          },
+          {
+            key: "k",
+            hideOnMobile: true,
+            header: "Key",
+            cell: (r) => <span className="font-mono text-xs">{r.key}</span>,
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (r) => ms(r.duration),
+          },
+          {
+            key: "in",
+            hideOnMobile: true,
+            header: "In",
+            cell: (r) => {
+              const href = recentHref(r)
+              return href ? (
+                <Link className="font-mono text-xs hover:underline" href={href}>
+                  {r.execution_preview}
+                </Link>
+              ) : null
+            },
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

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

@@ -0,0 +1,236 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Building2 } from "lucide-react"
+
+import { ChartHoverProvider } from "@/components/railwatch/chart-hover"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { FilterBar } from "@/components/railwatch/filter-bar"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { SortHeader } from "@/components/railwatch/sort-header"
+import { SparklineCell } from "@/components/railwatch/sparkline-cell"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import EnvLayout from "@/layouts/env-layout"
+import { ago, count, ms } from "@/lib/format"
+import { tenantPath } from "@/pages/tenants/tenant-path"
+import * as R from "@/routes"
+import type { SharedProps } from "@/types"
+
+export interface TenantRow {
+  tenant: string
+  requests: number
+  errors: number
+  avg: number
+  max: number
+  p95: number
+  jobs: number
+  failed_jobs: number
+  exceptions: number
+  logs: number
+  users: number
+  last_seen_at: string | null
+  sparkline: number[]
+}
+
+interface Props {
+  tenants: TenantRow[]
+  summary: {
+    tenants: number
+    top_tenant: string | null
+    top_share: number
+    with_errors: number
+    untagged_share: number
+  }
+  sort: string
+  dir: string
+  q: string
+}
+
+export default function Tenants(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+
+  const visit = (params: Record<string, string | undefined>) =>
+    router.visit(
+      R.applicationEnvironmentTenantsPath(a, e, {
+        window,
+        sort: p.sort,
+        dir: p.dir,
+        q: p.q || undefined,
+        ...params,
+      }),
+      { preserveState: true },
+    )
+
+  const sortBy = (field: string) =>
+    visit({
+      sort: field,
+      dir: p.sort === field && p.dir === "desc" ? "asc" : "desc",
+    })
+
+  const href = (x: TenantRow) => tenantPath(a, e, x.tenant, { window })
+
+  return (
+    <EnvLayout title="Tenants">
+      <ChartHoverProvider>
+        <PageHeader
+          title="Tenants"
+          description="Your application's own tenants, aggregated from the tenant tag on every record."
+        />
+        <StatStrip>
+          <Stat label="Tenants active" value={count(p.summary.tenants)} />
+          <Stat
+            label="Top tenant"
+            value={`${p.summary.top_share}%`}
+            hint={p.summary.top_tenant ?? "none"}
+          />
+          <Stat
+            label="With 5xx"
+            value={count(p.summary.with_errors)}
+            tone={p.summary.with_errors ? "destructive" : "success"}
+          />
+          <Stat
+            label="Untagged"
+            value={`${p.summary.untagged_share}%`}
+            hint="requests with no tenant"
+          />
+        </StatStrip>
+        <FilterBar
+          value={p.q}
+          fields={[]}
+          onChange={(q) => visit({ q: q || undefined })}
+          placeholder="Filter tenants"
+        />
+        <DataTable
+          rows={p.tenants}
+          rowKey={(x) => x.tenant}
+          empty={
+            <EmptyState
+              icon={Building2}
+              title="No tenant-tagged records in this window"
+              description="Records carry the tenant from ActiveRecord::Tenanted / TenantRecord.current_tenant, or call Railwatch.context(tenant: org.slug)"
+            />
+          }
+          hoverKey={(x) => x.tenant}
+          onRowClick={(x) => router.visit(href(x))}
+          keyboardNav={{
+            onOpen: (x, opts) =>
+              opts?.newTab
+                ? globalThis.window.open(href(x), "_blank")
+                : router.visit(href(x)),
+          }}
+          columns={[
+            {
+              key: "tenant",
+              header: "Tenant",
+              cell: (x) => (
+                <Link
+                  className="font-mono text-xs hover:underline"
+                  href={href(x)}
+                >
+                  {x.tenant}
+                </Link>
+              ),
+            },
+            {
+              key: "trend",
+              hideOnMobile: true,
+              header: "Trend",
+              cell: (x) => (
+                <SparklineCell data={x.sparkline} hoverKey={x.tenant} />
+              ),
+            },
+            {
+              key: "requests",
+              header: (
+                <SortHeader
+                  label="Requests"
+                  active={p.sort === "requests"}
+                  dir={p.dir === "asc" ? "asc" : "desc"}
+                  onClick={() => sortBy("requests")}
+                />
+              ),
+              align: "right",
+              cell: (x) => count(x.requests),
+            },
+            {
+              key: "5xx",
+              header: (
+                <SortHeader
+                  label="5xx"
+                  active={p.sort === "errors"}
+                  dir={p.dir === "asc" ? "asc" : "desc"}
+                  onClick={() => sortBy("errors")}
+                />
+              ),
+              align: "right",
+              cell: (x) => (
+                <span className={x.errors ? "text-destructive" : ""}>
+                  {count(x.errors)}
+                </span>
+              ),
+            },
+            {
+              key: "p95",
+              header: (
+                <SortHeader
+                  label="p95"
+                  active={p.sort === "p95"}
+                  dir={p.dir === "asc" ? "asc" : "desc"}
+                  onClick={() => sortBy("p95")}
+                />
+              ),
+              align: "right",
+              cell: (x) => <span className="font-semibold">{ms(x.p95)}</span>,
+            },
+            {
+              key: "jobs",
+              hideOnMobile: true,
+              header: "Jobs",
+              align: "right",
+              cell: (x) => count(x.jobs),
+            },
+            {
+              key: "failed",
+              hideOnMobile: true,
+              header: "Failed",
+              align: "right",
+              cell: (x) => (
+                <span className={x.failed_jobs ? "text-destructive" : ""}>
+                  {count(x.failed_jobs)}
+                </span>
+              ),
+            },
+            {
+              key: "exceptions",
+              hideOnMobile: true,
+              header: "Exceptions",
+              align: "right",
+              cell: (x) => count(x.exceptions),
+            },
+            {
+              key: "users",
+              hideOnMobile: true,
+              header: (
+                <SortHeader
+                  label="Users"
+                  active={p.sort === "users"}
+                  dir={p.dir === "asc" ? "asc" : "desc"}
+                  onClick={() => sortBy("users")}
+                />
+              ),
+              align: "right",
+              cell: (x) => count(x.users),
+            },
+            {
+              key: "seen",
+              header: "Last seen",
+              align: "right",
+              cell: (x) => ago(x.last_seen_at),
+            },
+          ]}
+        />
+      </ChartHoverProvider>
+    </EnvLayout>
+  )
+}