railscope 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20e48ad7fe43ee5328e378275905e48d2143baa04911db450d21e1d15e1003db
-  data.tar.gz: 4b38dabf84090b06b4b8df241501a1d8cc8efb4186352e4e4146be07cc8b94e1
+  metadata.gz: dadd56f657d2b5a308c35d1703985824c29bf51e7063a6199c6ec3c3f799ce5c
+  data.tar.gz: b68d74eabff7abe3fd12022a6774d13ec558c2034382de2a408ff7fa47c8a006
 SHA512:
-  metadata.gz: '09038c22c62ec87672ce438011f9e1e6daea7e3528edba9deae60a3c962330124dcf74ea928b93b4bd1d909876c1b55c9f225f3fb37c93cd56a2e909a469fdb1'
-  data.tar.gz: 002a7e89bd8c83bcd79287c6dbe17ba55e15cceebcb126d00f7b1030714061244b54147429d22301d6ba7c6d683e00aea913b3b4cc85c4147b1e9f16ba474ff3
+  metadata.gz: c88511328083da1c08c632b90265b8632b1f4a52d1a94bd1cc06b9adfd97896742566c7f9b56cd0c4fac0c38acbf5e77c81ad33c00945157cadae4a2d525d821
+  data.tar.gz: a814a913eb8b326b6c3ddfc17f563b38c898fd9f018144cdc8b4a8abcffcf3e82caae1ad708c359a91873cbc8aa0980658fc8bafaf7b8f27c4c6083e44dc854c

data/client/src/App.tsx

@@ -14,6 +14,7 @@ import DumpsIndex from './screens/dumps/Index'
 import QueriesIndex from './screens/queries/Index'
 import QueriesShow from './screens/queries/Show'
 import ModelsIndex from './screens/models/Index'
+import ModelsShow from './screens/models/Show'
 import EventsIndex from './screens/events/Index'
 import MailIndex from './screens/mail/Index'
 import NotificationsIndex from './screens/notifications/Index'
@@ -43,6 +44,7 @@ function App() {
         <Route path="/queries" element={<QueriesIndex />} />
         <Route path="/queries/:id" element={<QueriesShow />} />
         <Route path="/models" element={<ModelsIndex />} />
+        <Route path="/models/:id" element={<ModelsShow />} />
         <Route path="/events" element={<EventsIndex />} />
         <Route path="/mail" element={<MailIndex />} />
         <Route path="/notifications" element={<NotificationsIndex />} />

data/client/src/screens/commands/Show.tsx

@@ -369,6 +369,7 @@ function getEntryPath(entry: Entry): string {
     case 'job_enqueue':
     case 'job_perform': return `/jobs/${entry.id}`
     case 'request': return `/requests/${entry.id}`
+    case 'model': return `/models/${entry.id}`
     default: return `/${entry.entry_type}s/${entry.id}`
   }
 }

data/client/src/screens/exceptions/Show.tsx

@@ -380,6 +380,7 @@ function getEntryPath(entry: Entry): string {
     case 'job_perform': return `/jobs/${entry.id}`
     case 'request': return `/requests/${entry.id}`
     case 'command': return `/commands/${entry.id}`
+    case 'model': return `/models/${entry.id}`
     default: return `/${entry.entry_type}s/${entry.id}`
   }
 }
@@ -395,6 +396,8 @@ function getEntryDescription(entry: Entry, payload: Record<string, unknown>): st
     case 'job_enqueue':
     case 'job_perform':
       return `Job: ${payload.job_class}`
+    case 'model':
+      return `${payload.action} ${payload.model}`
     default:
       return entry.entry_type
   }

data/client/src/screens/jobs/Show.tsx

@@ -484,6 +484,7 @@ function getEntryPath(entry: Entry): string {
     case 'job_perform': return `/jobs/${entry.id}`
     case 'request': return `/requests/${entry.id}`
     case 'command': return `/commands/${entry.id}`
+    case 'model': return `/models/${entry.id}`
     default: return `/${entry.entry_type}s/${entry.id}`
   }
 }
@@ -501,6 +502,8 @@ function getEntryDescription(entry: Entry, payload: Record<string, unknown>): st
     case 'job_enqueue':
     case 'job_perform':
       return `Job: ${payload.job_class}`
+    case 'model':
+      return `${payload.action} ${payload.model}`
     default:
       return entry.entry_type
   }

data/client/src/screens/models/Index.tsx

@@ -1,15 +1,167 @@
-import PlaceholderPage from '@/components/PlaceholderPage'
+import { useState, useEffect } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { getEntries, getFamilyEntries } from '@/api/entries'
+import { Entry } from '@/lib/types'
+import { timeAgo } from '@/lib/utils'
+import { Card } from '@/components/ui/Card'
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/Table'
+import { Badge } from '@/components/ui/Badge'
+import { Pagination } from '@/components/ui/Pagination'
+import { SearchInput } from '@/components/ui/SearchInput'
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'purple'
+
+const actionVariant: Record<string, BadgeVariant> = {
+  created: 'success',
+  updated: 'info',
+  deleted: 'error',
+}
 
 export default function ModelsIndex() {
-  return (
-    <PlaceholderPage
-      title="Models"
-      description="ActiveRecord model events (create, update, delete)"
-      icon={
-        <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-        </svg>
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [entries, setEntries] = useState<Entry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [page, setPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+
+  const tagFilter = searchParams.get('tag') || ''
+  const familyHashFilter = searchParams.get('family_hash') || ''
+
+  useEffect(() => {
+    loadEntries()
+  }, [page, tagFilter, familyHashFilter])
+
+  async function loadEntries() {
+    setLoading(true)
+    try {
+      if (familyHashFilter) {
+        const response = await getFamilyEntries(familyHashFilter, page)
+        setEntries(response.data)
+        setTotalPages(response.meta.total_pages)
+      } else {
+        const response = await getEntries({
+          type: 'model',
+          tag: tagFilter || undefined,
+          page
+        })
+        setEntries(response.data)
+        setTotalPages(response.meta.total_pages)
       }
-    />
+    } catch (error) {
+      console.error('Failed to load entries:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function handleSearch(value: string) {
+    setPage(1)
+    if (value) {
+      setSearchParams({ tag: value })
+    } else {
+      setSearchParams({})
+    }
+  }
+
+  function handlePageChange(newPage: number) {
+    setPage(newPage)
+  }
+
+  function clearFamilyFilter() {
+    setSearchParams({})
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-semibold text-white">Models</h1>
+        <p className="text-dark-muted text-sm mt-1">
+          {familyHashFilter
+            ? 'Viewing similar model events'
+            : 'ActiveRecord model events (create, update, delete)'}
+        </p>
+      </div>
+
+      {familyHashFilter ? (
+        <div className="mb-4">
+          <button
+            onClick={clearFamilyFilter}
+            className="text-blue-400 hover:text-blue-300 text-sm"
+          >
+            &larr; Back to all models
+          </button>
+        </div>
+      ) : (
+        <div className="mb-4">
+          <SearchInput
+            placeholder="Search by tag (created, updated, deleted, user...)"
+            value={tagFilter}
+            onChange={handleSearch}
+            className="max-w-sm"
+          />
+        </div>
+      )}
+
+      <Card>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Model</TableHead>
+              <TableHead>Action</TableHead>
+              <TableHead>Tags</TableHead>
+              <TableHead>Happened</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell className="text-center text-dark-muted py-8" colSpan={4}>
+                  Loading...
+                </TableCell>
+              </TableRow>
+            ) : entries.length === 0 ? (
+              <TableRow>
+                <TableCell className="text-center text-dark-muted py-8" colSpan={4}>
+                  {familyHashFilter
+                    ? 'No similar model events found.'
+                    : tagFilter
+                      ? `No model events found with tag "${tagFilter}".`
+                      : 'No model events recorded yet.'}
+                </TableCell>
+              </TableRow>
+            ) : (
+              entries.map((entry) => {
+                const payload = entry.payload as Record<string, unknown>
+                const action = String(payload.action || '')
+                return (
+                  <TableRow key={entry.id} onClick={() => navigate(`/models/${entry.id}`)}>
+                    <TableCell className="font-mono text-sm">
+                      {String(payload.model || '')}
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={actionVariant[action] || 'default'}>
+                        {action}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-1">
+                        {entry.tags.slice(0, 3).map((tag) => (
+                          <Badge key={tag} variant="default">{tag}</Badge>
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-dark-muted" title={entry.occurred_at}>
+                      {timeAgo(entry.occurred_at)}
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            )}
+          </TableBody>
+        </Table>
+        <Pagination currentPage={page} totalPages={totalPages} onPageChange={handlePageChange} />
+      </Card>
+    </div>
   )
 }

data/client/src/screens/models/Show.tsx

@@ -0,0 +1,289 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { getEntry } from '@/api/entries'
+import { Entry } from '@/lib/types'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'
+import { Badge } from '@/components/ui/Badge'
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'purple'
+
+const actionVariant: Record<string, BadgeVariant> = {
+  created: 'success',
+  updated: 'info',
+  deleted: 'error',
+}
+
+export default function ModelsShow() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const [entry, setEntry] = useState<Entry | null>(null)
+  const [batch, setBatch] = useState<Entry[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadEntry()
+  }, [id])
+
+  async function loadEntry() {
+    if (!id) return
+    setLoading(true)
+    try {
+      const response = await getEntry(id)
+      setEntry(response.data)
+      setBatch(response.batch || [])
+    } catch (error) {
+      console.error('Failed to load entry:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <Card>
+          <CardContent className="py-12 text-center text-dark-muted">
+            Loading...
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  if (!entry) {
+    return (
+      <div className="p-6">
+        <Card>
+          <CardContent className="py-12 text-center text-dark-muted">
+            Model event not found.
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  const payload = entry.payload as Record<string, unknown>
+  const action = String(payload.action || '')
+  const changes = payload.changes as Record<string, unknown> | undefined
+
+  const formattedTime = new Date(entry.occurred_at).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  })
+  const timeAgoStr = getTimeAgo(entry.occurred_at)
+
+  return (
+    <div className="p-6 space-y-5">
+      {/* Model Details Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Model Details</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full">
+            <tbody>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap w-32">Model</td>
+                <td className="px-4 py-3 font-mono">{String(payload.model || '')}</td>
+              </tr>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Action</td>
+                <td className="px-4 py-3">
+                  <Badge variant={actionVariant[action] || 'default'}>
+                    {action}
+                  </Badge>
+                </td>
+              </tr>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Time</td>
+                <td className="px-4 py-3">{formattedTime} ({timeAgoStr})</td>
+              </tr>
+              <tr className="border-t border-dark-border">
+                <td className="px-4 py-3 text-dark-muted whitespace-nowrap">Occurrences</td>
+                <td className="px-4 py-3">
+                  <Link
+                    to={`/models?family_hash=${entry.family_hash}`}
+                    className="text-blue-400 hover:text-blue-300"
+                  >
+                    View Similar Events
+                  </Link>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+
+      {/* Changes Card */}
+      {action !== 'deleted' && changes && Object.keys(changes).length > 0 && (
+        <Card>
+          <div className="flex border-b border-dark-border">
+            <span className="px-4 py-2.5 text-sm font-medium bg-blue-500 text-white">
+              Changes
+            </span>
+          </div>
+          <div className="bg-[#1a1a2e] p-4 overflow-x-auto">
+            <pre className="font-mono text-sm text-purple-300 whitespace-pre-wrap">
+              {JSON.stringify(changes, null, 2)}
+            </pre>
+          </div>
+        </Card>
+      )}
+
+      {/* Related Entries */}
+      {batch.length > 0 && <RelatedEntries entries={batch} navigate={navigate} />}
+    </div>
+  )
+}
+
+function getTimeAgo(date: string): string {
+  const seconds = Math.floor((new Date().getTime() - new Date(date).getTime()) / 1000)
+  if (seconds < 60) return `${seconds}s ago`
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`
+  return `${Math.floor(seconds / 86400)}d ago`
+}
+
+interface RelatedEntriesProps {
+  entries: Entry[]
+  navigate: ReturnType<typeof useNavigate>
+}
+
+function RelatedEntries({ entries, navigate }: RelatedEntriesProps) {
+  const [currentTab, setCurrentTab] = useState<string>('')
+
+  const groupedEntries = entries.reduce((acc, entry) => {
+    const type = entry.entry_type
+    if (!acc[type]) acc[type] = []
+    acc[type].push(entry)
+    return acc
+  }, {} as Record<string, Entry[]>)
+
+  const tabs = Object.entries(groupedEntries).map(([type, items]) => ({
+    type,
+    label: getTypeLabel(type),
+    count: items.length
+  }))
+
+  useEffect(() => {
+    if (tabs.length > 0 && !currentTab) {
+      setCurrentTab(tabs[0].type)
+    }
+  }, [tabs.length])
+
+  if (tabs.length === 0) return null
+
+  const currentEntries = groupedEntries[currentTab] || []
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Related Entries</CardTitle>
+      </CardHeader>
+      <div className="flex flex-wrap border-b border-dark-border">
+        {tabs.map((tab) => (
+          <button
+            key={tab.type}
+            onClick={() => setCurrentTab(tab.type)}
+            className={`px-4 py-2.5 text-sm font-medium ${
+              currentTab === tab.type
+                ? 'bg-blue-500 text-white'
+                : 'text-dark-muted hover:text-dark-text'
+            }`}
+          >
+            {tab.label} ({tab.count})
+          </button>
+        ))}
+      </div>
+      <table className="w-full">
+        <tbody>
+          {currentEntries.map((relatedEntry) => {
+            const relPayload = relatedEntry.payload as Record<string, unknown>
+            const path = getEntryPath(relatedEntry)
+
+            return (
+              <tr
+                key={relatedEntry.id}
+                onClick={() => navigate(path)}
+                className="border-b border-dark-border hover:bg-white/[0.02] cursor-pointer"
+              >
+                <td className="px-4 py-3">
+                  <span className="text-dark-muted text-sm">{getEntryDescription(relatedEntry, relPayload)}</span>
+                </td>
+                <td className="px-4 py-3 w-12">
+                  <svg className="w-5 h-5 text-dark-muted" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 9.25a.75.75 0 000 1.5h4.59l-2.1 1.95a.75.75 0 001.02 1.1l3.5-3.25a.75.75 0 000-1.1l-3.5-3.25a.75.75 0 10-1.02 1.1l2.1 1.95H6.75z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </Card>
+  )
+}
+
+function getEntryPath(entry: Entry): string {
+  switch (entry.entry_type) {
+    case 'query': return `/queries/${entry.id}`
+    case 'exception': return `/exceptions/${entry.id}`
+    case 'job_enqueue':
+    case 'job_perform': return `/jobs/${entry.id}`
+    case 'request': return `/requests/${entry.id}`
+    case 'command': return `/commands/${entry.id}`
+    case 'model': return `/models/${entry.id}`
+    default: return `/${entry.entry_type}s/${entry.id}`
+  }
+}
+
+function getEntryDescription(entry: Entry, payload: Record<string, unknown>): string {
+  switch (entry.entry_type) {
+    case 'query':
+      return String(payload.sql || '').substring(0, 80)
+    case 'request':
+      return `${payload.method} ${payload.path}`
+    case 'command':
+      return `Command: ${payload.command}`
+    case 'exception':
+      return `${payload.class}: ${String(payload.message || '').substring(0, 50)}`
+    case 'job_enqueue':
+    case 'job_perform':
+      return `Job: ${payload.job_class}`
+    case 'model':
+      return `${payload.action} ${payload.model}`
+    default:
+      return entry.entry_type
+  }
+}
+
+function getTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    query: 'Queries',
+    exception: 'Exceptions',
+    job_enqueue: 'Jobs',
+    job_perform: 'Jobs',
+    request: 'Requests',
+    command: 'Commands',
+    log: 'Logs',
+    cache: 'Cache',
+    event: 'Events',
+    mail: 'Mail',
+    notification: 'Notifications',
+    model: 'Models',
+    gate: 'Gates',
+    redis: 'Redis',
+    view: 'Views',
+    client_request: 'HTTP Client'
+  }
+  return labels[type] || type
+}

data/client/src/screens/queries/Show.tsx

@@ -301,6 +301,7 @@ function getEntryPath(entry: Entry): string {
     case 'job_perform': return `/jobs/${entry.id}`
     case 'request': return `/requests/${entry.id}`
     case 'command': return `/commands/${entry.id}`
+    case 'model': return `/models/${entry.id}`
     default: return `/${entry.entry_type}s/${entry.id}`
   }
 }
@@ -318,6 +319,8 @@ function getEntryDescription(entry: Entry, payload: Record<string, unknown>): st
     case 'job_enqueue':
     case 'job_perform':
       return `Job: ${payload.job_class}`
+    case 'model':
+      return `${payload.action} ${payload.model}`
     default:
       return entry.entry_type
   }

data/client/src/screens/requests/Show.tsx

@@ -347,6 +347,7 @@ function getEntryPath(entry: Entry): string {
     case 'job_perform': return `/jobs/${entry.id}`
     case 'request': return `/requests/${entry.id}`
     case 'command': return `/commands/${entry.id}`
+    case 'model': return `/models/${entry.id}`
     case 'view': return `/views/${entry.id}`
     default: return `/${entry.entry_type}s/${entry.id}`
   }
@@ -365,6 +366,8 @@ function getEntryDescription(entry: Entry, payload: Record<string, unknown>): st
     case 'job_enqueue':
     case 'job_perform':
       return `Job: ${payload.job_class}`
+    case 'model':
+      return `${payload.action} ${payload.model}`
     case 'view':
       return `${payload.view_type}: ${payload.name || payload.path}`
     default:

data/client/src/screens/views/Show.tsx

@@ -289,6 +289,7 @@ function getEntryPath(entry: Entry): string {
     case 'job_perform': return `/jobs/${entry.id}`
     case 'request': return `/requests/${entry.id}`
     case 'command': return `/commands/${entry.id}`
+    case 'model': return `/models/${entry.id}`
     case 'view': return `/views/${entry.id}`
     default: return `/${entry.entry_type}s/${entry.id}`
   }
@@ -307,6 +308,8 @@ function getEntryDescription(entry: Entry, payload: Record<string, unknown>): st
     case 'job_enqueue':
     case 'job_perform':
       return `Job: ${payload.job_class}`
+    case 'model':
+      return `${payload.action} ${payload.model}`
     case 'view':
       return `${payload.view_type}: ${payload.name || payload.path}`
     default:

data/lib/generators/railscope/install_generator.rb

@@ -24,7 +24,8 @@ module Railscope
         say ""
         say "Next steps:"
         say "  1. Run migrations: rails db:migrate"
-        say "  2. Enable Railscope: add RAILSCOPE_ENABLED=true to your .env"
+        say "  2. Enable Railscope: set RAILSCOPE_ENABLED=true in your environment"
+        say "     or set config.enabled = true in config/initializers/railscope.rb"
         say "  3. Start your server and visit /railscope"
         say ""
       end

data/lib/generators/railscope/templates/initializer.rb

@@ -3,13 +3,23 @@
 # Railscope Configuration
 # =======================
 #
-# Railscope is disabled by default. Enable it by setting
-# the RAILSCOPE_ENABLED environment variable:
+# Railscope is disabled by default. Enable it via environment variable:
 #
 #   RAILSCOPE_ENABLED=true
 #
+# Or programmatically (useful with application.yml, credentials, etc.):
+#
+#   config.enabled = true
+#
 
 Railscope.configure do |config|
+  # Enable/Disable
+  # --------------
+  # Set this directly if your project doesn't use ENV variables
+  # (e.g., application.yml without Figaro, Rails credentials, etc.)
+  #
+  # config.enabled = true
+
   # Retention Period
   # ----------------
   # Number of days to keep entries before purging.

data/lib/railscope/engine.rb

@@ -7,6 +7,7 @@ require_relative "subscribers/exception_subscriber"
 require_relative "subscribers/job_subscriber"
 require_relative "subscribers/command_subscriber"
 require_relative "subscribers/view_subscriber"
+require_relative "subscribers/model_subscriber"
 
 module Railscope
   class Engine < ::Rails::Engine
@@ -58,9 +59,11 @@ module Railscope
       # ActiveRecord subscribers
       if defined?(ActiveRecord::Base)
         Railscope::Subscribers::QuerySubscriber.subscribe
+        Railscope::Subscribers::ModelSubscriber.subscribe
       else
         ActiveSupport.on_load(:active_record) do
           Railscope::Subscribers::QuerySubscriber.subscribe
+          Railscope::Subscribers::ModelSubscriber.subscribe
         end
       end