railwatch 0.6.0 → 0.7.0

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

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

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

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