railwatch 0.9.4 → 1.0.0

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

@@ -1,303 +0,0 @@
-import { Link, router, usePage } from "@inertiajs/react"
-import { FileText } from "lucide-react"
-import { useState } from "react"
-
-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 { PageHeader } from "@/components/railwatch/page-header"
-import { SavedViewsMenu } from "@/components/railwatch/saved-views"
-import { Segmented, SegmentedItem } from "@/components/railwatch/segmented"
-import { LevelBadge } from "@/components/railwatch/status-badge"
-import EnvLayout from "@/layouts/env-layout"
-import { parseFilter, serializeFilter } from "@/lib/filter"
-import { count, when } from "@/lib/format"
-import { cn } from "@/lib/utils"
-import * as R from "@/routes"
-import type { CursorMeta, SharedProps } from "@/types"
-
-interface LogRow {
-  id: number
-  level: string
-  message: string
-  tags: string[]
-  occurred_at: string
-  execution_id: string | null
-  execution_source: string | null
-  execution_preview: string | null
-  source: string | null
-  tenant: string | null
-  user_ref: string | null
-  context: string | null
-}
-interface Props {
-  logs: LogRow[]
-  counts: Record<string, number>
-  // id -> the matching part of the message, each hit wrapped in MARK. Only
-  // present for rows the full-text search actually matched.
-  highlights: Record<number, string>
-  pagination: CursorMeta
-  q: string
-}
-
-// Telemetry::Log::SNIPPET_MARK: one character opens and closes every hit, so
-// the odd-numbered pieces of the split are the ones to mark.
-const MARK = "\u001f"
-
-// Long lines (structured events, stack dumps) are clamped to a few rows so
-// the table stays scannable, especially on phones where the message column
-// is narrow. Tapping the message toggles the full text. Short lines have
-// nothing to expand, so they are plain.
-const CLAMP_AT = 160
-
-function LogMessage({
-  message,
-  highlight,
-  tags,
-}: {
-  message: string
-  highlight?: string
-  tags: string[]
-}) {
-  const [open, setOpen] = useState(false)
-  const long = message.length > CLAMP_AT || message.includes("\n")
-  const body = (
-    <span
-      className={cn(
-        "font-mono text-xs break-all whitespace-pre-wrap",
-        long && !open && "line-clamp-3",
-      )}
-    >
-      {highlight ? <Snippet text={highlight} /> : message}
-      {tags.length > 0 && (
-        <span className="text-muted-foreground"> [{tags.join(", ")}]</span>
-      )}
-    </span>
-  )
-  if (!long) return body
-  return (
-    <button
-      type="button"
-      onClick={() => setOpen((o) => !o)}
-      aria-expanded={open}
-      className="block w-full cursor-pointer text-left"
-      title={open ? "Collapse" : "Expand"}
-    >
-      {body}
-    </button>
-  )
-}
-
-function Snippet({ text }: { text: string }) {
-  return (
-    <>
-      {text.split(MARK).map((part, i) =>
-        i % 2 === 1 ? (
-          <mark key={i} className="fts-mark">
-            {part}
-          </mark>
-        ) : (
-          <span key={i}>{part}</span>
-        ),
-      )}
-    </>
-  )
-}
-
-export default function Logs(p: Props) {
-  const { environment, window, range } = usePage<SharedProps>().props
-  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 visit = (q: string) =>
-    router.visit(
-      R.applicationEnvironmentLogsPath(a, e, {
-        ...timeParams,
-        q: q || undefined,
-      }),
-      {
-        only: ["logs", "pagination", "highlights", "counts", "q"],
-        preserveState: true,
-        preserveScroll: true,
-        reset: ["logs", "highlights"],
-      },
-    )
-  const logsPath = (cursor?: string) =>
-    R.applicationEnvironmentLogsPath(a, e, {
-      ...cursorTimeParams,
-      q: p.q || undefined,
-      cursor,
-      limit: p.pagination.limit,
-    })
-  const currentLevel = parseFilter(p.q).fields.level
-  const setLevel = (level: string | undefined) => {
-    const parsed = parseFilter(p.q)
-    const fields = { ...parsed.fields }
-    if (level) fields.level = level
-    else delete fields.level
-    visit(serializeFilter({ text: parsed.text, fields }))
-  }
-  return (
-    <EnvLayout title="Logs">
-      <PageHeader
-        title="Logs"
-        description="Rails.logger lines and Rails.event structured events, linked to the request or job that wrote them."
-        actions={<SavedViewsMenu page="logs" />}
-      />
-      <div className="-mx-3 [scrollbar-width:none] overflow-x-auto px-3 md:mx-0 md:px-0 [&::-webkit-scrollbar]:hidden">
-        <Segmented className="w-max">
-          <SegmentedItem
-            active={!currentLevel}
-            onClick={() => setLevel(undefined)}
-          >
-            All
-          </SegmentedItem>
-          {["debug", "info", "warn", "error", "fatal", "event"].map((l) => (
-            <SegmentedItem
-              key={l}
-              active={currentLevel === l}
-              onClick={() => setLevel(l)}
-              className="gap-1.5"
-            >
-              {l}
-              <span className="opacity-60">{count(p.counts[l] ?? 0)}</span>
-            </SegmentedItem>
-          ))}
-        </Segmented>
-      </div>
-      <FilterBar
-        value={p.q}
-        fields={[
-          { key: "after", label: "After" },
-          { key: "before", label: "Before" },
-          { key: "user", label: "User" },
-          { key: "deploy", label: "Deploy" },
-          {
-            key: "level",
-            label: "Level",
-            options: [
-              "debug",
-              "info",
-              "warn",
-              "error",
-              "fatal",
-              "event",
-              "unknown",
-            ],
-          },
-          {
-            key: "kind",
-            label: "Execution kind",
-            options: ["request", "job", "scheduled_task", "command"],
-          },
-          { key: "source", label: "Source" },
-          { key: "tenant", label: "Tenant" },
-        ]}
-        onChange={visit}
-        placeholder="level:error kind:job source:app/jobs/sync_job.rb:12"
-      />
-      <div className="text-muted-foreground flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xs">
-        <span className="font-mono tabular-nums">
-          {count(p.logs.length)} {p.logs.length === 1 ? "line" : "lines"}
-        </span>
-        <span>
-          Full-text search: quotes for phrases, -word to exclude, prefixes match
-        </span>
-      </div>
-      <DataTable
-        rows={p.logs}
-        rowKey={(l) => l.id}
-        empty={
-          <EmptyState
-            icon={FileText}
-            title="No log lines match"
-            signal="caution"
-            description="Log lines are captured from your app's Rails logger."
-          />
-        }
-        columns={[
-          {
-            key: "when",
-            header: "When",
-            className: "w-40",
-            cell: (l) => (
-              <span className="text-xs tabular-nums">
-                {when(l.occurred_at)}
-              </span>
-            ),
-          },
-          {
-            key: "lvl",
-            header: "Level",
-            cell: (l) => <LevelBadge level={l.level} />,
-          },
-          {
-            key: "msg",
-            header: "Message",
-            grow: true,
-            className: "whitespace-normal",
-            cell: (l) => (
-              <LogMessage
-                message={l.message}
-                highlight={p.highlights[l.id]}
-                tags={l.tags}
-              />
-            ),
-          },
-          {
-            key: "in",
-            hideOnMobile: true,
-            header: "In",
-            cell: (l) =>
-              l.execution_id ? (
-                <Link
-                  className="font-mono text-xs hover:underline"
-                  href={R.applicationEnvironmentRequestPath(
-                    a,
-                    e,
-                    l.execution_id,
-                  )}
-                >
-                  {l.execution_preview}
-                </Link>
-              ) : null,
-          },
-          {
-            key: "t",
-            hideOnMobile: true,
-            header: "Tenant",
-            cell: (l) =>
-              l.tenant ? (
-                <button
-                  className="font-mono text-xs hover:underline"
-                  onClick={() => {
-                    const parsed = parseFilter(p.q)
-                    visit(
-                      serializeFilter({
-                        text: parsed.text,
-                        fields: { ...parsed.fields, tenant: l.tenant! },
-                      }),
-                    )
-                  }}
-                >
-                  {l.tenant}
-                </button>
-              ) : null,
-          },
-        ]}
-      />
-      <CursorLoadMore
-        meta={p.pagination}
-        href={logsPath}
-        only={["logs", "pagination", "highlights"]}
-      />
-    </EnvLayout>
-  )
-}

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

@@ -1,218 +0,0 @@
-import { Link, router, usePage } from "@inertiajs/react"
-import { Mail } from "lucide-react"
-
-import { VolumePanel } from "@/components/railwatch/chart-panel"
-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 { PercentilePicker } from "@/components/railwatch/percentile-picker"
-import { SparklineCell } from "@/components/railwatch/sparkline-cell"
-import { Badge } from "@/components/ui/badge"
-import { usePercentile } from "@/hooks/use-percentile"
-import EnvLayout from "@/layouts/env-layout"
-import { count, ms, when } from "@/lib/format"
-import * as R from "@/routes"
-import type { GroupRow, SeriesPoint, SharedProps } from "@/types"
-
-interface MailRow {
-  id: number
-  mailer: string
-  subject: string
-  to: number
-  cc: number
-  bcc: number
-  attachments: number
-  delivery_method: string | null
-  duration: number
-  failed: boolean
-  occurred_at: string
-  execution_id: string | null
-  execution_preview: string | null
-}
-interface Props {
-  mailers: GroupRow[]
-  series: SeriesPoint[]
-  recent: MailRow[]
-  q: string
-}
-
-export default function Mails(p: Props) {
-  const { environment, window } = usePage<SharedProps>().props
-  const { percentile } = usePercentile()
-  const a = environment!.application_id
-  const e = environment!.id
-  const mailHref = (m: MailRow) =>
-    m.execution_id
-      ? R.applicationEnvironmentRequestPath(a, e, m.execution_id)
-      : null
-  return (
-    <EnvLayout title="Mail">
-      <PageHeader
-        title="Mail"
-        description="Action Mailer deliveries: recipients, delivery method, render and send time."
-        actions={<PercentilePicker />}
-      />
-      <VolumePanel
-        legend="outcome"
-        label="Deliveries"
-        seriesLabel="Deliveries"
-        data={p.series}
-      />
-      <DataTable
-        rows={p.mailers}
-        rowKey={(m) => m.group_hash}
-        empty={
-          <EmptyState
-            icon={Mail}
-            title="No mail sent in this window"
-            description="ActionMailer deliveries appear here as your app sends them."
-          />
-        }
-        columns={[
-          {
-            key: "m",
-            header: "Mailer",
-            cell: (m) => <span className="font-mono text-xs">{m.name}</span>,
-          },
-          {
-            key: "trend",
-            hideOnMobile: true,
-            header: "Trend",
-            cell: (m) => <SparklineCell data={m.sparkline} />,
-          },
-          {
-            key: "n",
-            header: "Sent",
-            align: "right",
-            cell: (m) => count(m.count),
-          },
-          {
-            key: "f",
-            hideOnMobile: true,
-            header: "Failed",
-            align: "right",
-            cell: (m) => m.errors,
-          },
-          {
-            key: "avg",
-            hideOnMobile: true,
-            header: "Avg",
-            align: "right",
-            cell: (m) => ms(m.avg),
-          },
-          {
-            key: percentile,
-            header: percentile,
-            align: "right",
-            cell: (m) => (
-              <span className="font-semibold">{ms(m[percentile])}</span>
-            ),
-          },
-        ]}
-      />
-      <h2 className="text-sm font-semibold">Recent</h2>
-      <FilterBar
-        value={p.q}
-        fields={[
-          { key: "mailer", label: "Mailer" },
-          { key: "kind", label: "Kind" },
-        ]}
-        onChange={(q) =>
-          router.visit(
-            R.applicationEnvironmentMailsPath(a, e, {
-              window,
-              q: q || undefined,
-            }),
-            { preserveState: true },
-          )
-        }
-        placeholder="mailer:WidgetMailer kind:smtp"
-      />
-      <DataTable
-        rows={p.recent}
-        rowKey={(m) => m.id}
-        empty={
-          <EmptyState
-            icon={Mail}
-            title="No mail sent in this window"
-            description="ActionMailer deliveries appear here as your app sends them."
-          />
-        }
-        keyboardNav={{
-          onOpen: (m, opts) => {
-            const href = mailHref(m)
-            if (!href) return
-            if (opts?.newTab) globalThis.window.open(href, "_blank")
-            else router.visit(href)
-          },
-        }}
-        columns={[
-          {
-            key: "when",
-            header: "When",
-            cell: (m) => <span className="text-xs">{when(m.occurred_at)}</span>,
-          },
-          {
-            key: "m",
-            header: "Mailer",
-            cell: (m) => <span className="font-mono text-xs">{m.mailer}</span>,
-          },
-          {
-            key: "s",
-            header: "Subject",
-            cell: (m) => (
-              <span className="line-clamp-1 text-xs">{m.subject}</span>
-            ),
-          },
-          {
-            key: "to",
-            hideOnMobile: true,
-            header: "To/CC/BCC",
-            align: "right",
-            cell: (m) => `${m.to}/${m.cc}/${m.bcc}`,
-          },
-          {
-            key: "att",
-            hideOnMobile: true,
-            header: "Att.",
-            align: "right",
-            cell: (m) => m.attachments,
-          },
-          {
-            key: "dm",
-            hideOnMobile: true,
-            header: "Via",
-            cell: (m) => m.delivery_method,
-          },
-          {
-            key: "st",
-            header: "",
-            cell: (m) =>
-              m.failed ? <Badge variant="destructive">failed</Badge> : null,
-          },
-          {
-            key: "d",
-            hideOnMobile: true,
-            header: "Duration",
-            align: "right",
-            cell: (m) => ms(m.duration),
-          },
-          {
-            key: "in",
-            hideOnMobile: true,
-            header: "In",
-            cell: (m) => {
-              const href = mailHref(m)
-              return href ? (
-                <Link className="font-mono text-xs hover:underline" href={href}>
-                  {m.execution_preview}
-                </Link>
-              ) : null
-            },
-          },
-        ]}
-      />
-    </EnvLayout>
-  )
-}

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

@@ -1,161 +0,0 @@
-import { Link, router, usePage } from "@inertiajs/react"
-import { BellRing } 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 Group {
-  group_hash: string
-  name: string
-  count: number
-  errors: number
-  avg: number
-  p95: number
-}
-interface Recent {
-  id: number
-  notifier: string | null
-  delivery_method: string | null
-  duration: number
-  failed: boolean
-  occurred_at: string
-  execution_id: string | null
-  execution_preview: string | null
-}
-interface Props {
-  groups: Group[]
-  recent: Recent[]
-}
-
-export default function Notifications(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="Notifications">
-      <PageHeader
-        title="Notifications"
-        description="ActionMailer/Noticed deliveries, grouped by notifier and delivery method."
-      />
-      <DataTable
-        rows={p.groups}
-        rowKey={(g) => g.group_hash}
-        empty={
-          <EmptyState
-            icon={BellRing}
-            title="No notifications in this window"
-            description="Notifications delivered by your app appear here as they're sent."
-          />
-        }
-        columns={[
-          {
-            key: "n",
-            header: "Notifier",
-            cell: (g) => <span className="font-mono text-xs">{g.name}</span>,
-          },
-          {
-            key: "c",
-            hideOnMobile: true,
-            header: "Count",
-            align: "right",
-            cell: (g) => count(g.count),
-          },
-          {
-            key: "f",
-            hideOnMobile: true,
-            header: "Failed",
-            align: "right",
-            cell: (g) => count(g.errors),
-          },
-          {
-            key: "avg",
-            hideOnMobile: true,
-            header: "Avg",
-            align: "right",
-            cell: (g) => ms(g.avg, 3),
-          },
-          {
-            key: "p95",
-            header: "p95",
-            align: "right",
-            cell: (g) => ms(g.p95, 3),
-          },
-        ]}
-      />
-      <h2 className="text-sm font-semibold">Recent</h2>
-      <DataTable
-        rows={p.recent}
-        rowKey={(r) => r.id}
-        empty={
-          <EmptyState
-            icon={BellRing}
-            title="No notifications in this window"
-            description="Notifications delivered by your app appear here as they're sent."
-          />
-        }
-        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: "n",
-            header: "Notifier",
-            cell: (r) => (
-              <span className="font-mono text-xs">{r.notifier}</span>
-            ),
-          },
-          {
-            key: "dm",
-            hideOnMobile: true,
-            header: "Delivery method",
-            cell: (r) => r.delivery_method,
-          },
-          {
-            key: "f",
-            hideOnMobile: true,
-            header: "Failed",
-            cell: (r) => (r.failed ? "yes" : ""),
-          },
-          {
-            key: "d",
-            header: "Duration",
-            align: "right",
-            cell: (r) => ms(r.duration, 3),
-          },
-          {
-            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>
-  )
-}