Log Viewer

Displays structured application logs with filtering by level.

Preview · Log Viewer

Code

HTML · @primus/ui-core

<div class="table" style="font-size:0.8rem">
  <table>
    <thead><tr><th>Time</th><th>Level</th><th>Message</th></tr></thead>
    <tbody>
      <tr><td style="color:var(--muted-foreground)">14:23:01</td><td><span class="badge success">INFO</span></td><td>Tenant Acme Corp authenticated</td></tr>
      <tr><td style="color:var(--muted-foreground)">14:23:05</td><td><span class="badge warning">WARN</span></td><td>Rate limit approaching for Globex</td></tr>
      <tr><td style="color:var(--muted-foreground)">14:23:09</td><td><span class="badge danger">ERROR</span></td><td>DB connection timeout on shard 2</td></tr>
    </tbody>
  </table>
</div>

React

import { PrimusLogViewer } from '@/components/ui/primus-log-viewer';

const logs = [
  {
    id: '1',
    timestamp: new Date().toISOString(),
    level: 'info',
    message: 'Tenant Acme Corp authenticated',
    source: 'auth',
  },
  {
    id: '2',
    timestamp: new Date().toISOString(),
    level: 'warn',
    message: 'Rate limit approaching for Globex',
    source: 'rate-limiter',
  },
  {
    id: '3',
    timestamp: new Date().toISOString(),
    level: 'error',
    message: 'DB connection timeout on shard 2',
    source: 'database',
  },
];

<PrimusLogViewer logs={logs} maxHeight="400px" />

Angular

<primus-log-viewer [apiUrl]="'https://api.yourdomain.com'"></primus-log-viewer>

Props

Prop	Type	Default	Description
logs	LogEntry[]	required	Log entries to display
maxHeight	string	'500px'	Max height of the scrollable log list
onLogClick	(log: LogEntry) => void	—	Called when a log entry is clicked
autoScroll	boolean	—	Auto-scroll to newest entry

TypeScript interfaces

interface LogEntry {
  id:        string;
  timestamp: string;   // ISO 8601
  level:     'debug' | 'info' | 'warn' | 'error' | 'fatal';
  message:   string;
  source?:   string;
  metadata?: Record<string, any>;
}

Version history

See the Changelog for version history and breaking changes.