railwatch 0.9.3 → 1.0.0

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

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

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