Gateway log

The tail of the gateway's stream, newest at the bottom, filterable by level and text and following new lines; reads logLines().

Preview

app/engineering/monitoring/components/service-logs.tsx

"use client"

import { LogViewer, type LogLine } from "@/components/ui/log-viewer"
import { Widget } from "@/components/ui/widget"

export type ServiceLogsProps = { lines: LogLine[] }

/** The tail of the gateway log. The lines arrive read from the server page. */
export function ServiceLogs({ lines }: ServiceLogsProps) {
  return (
    <Widget
      data-widget="widget-engineering-monitoring-service-logs"
      title="Gateway log"
      description="The tail of the stream, newest at the bottom"
      className="h-full"
      contentClassName="px-0"
    >
      <LogViewer lines={lines} height={320} filterable follow showTimestamps />
    </Widget>
  )
}

Install

npx shadcn@latest add @vibra/widget-engineering-monitoring-service-logs

Needs the @vibra registry in your components.json — set it up once.

Source

app/engineering/monitoring/components/service-logs.tsx

"use client"

import { LogViewer, type LogLine } from "@/components/ui/log-viewer"
import { Widget } from "@/components/ui/widget"

export type ServiceLogsProps = { lines: LogLine[] }

/** The tail of the gateway log. The lines arrive read from the server page. */
export function ServiceLogs({ lines }: ServiceLogsProps) {
  return (
    <Widget
      data-widget="widget-engineering-monitoring-service-logs"
      title="Gateway log"
      description="The tail of the stream, newest at the bottom"
      className="h-full"
      contentClassName="px-0"
    >
      <LogViewer lines={lines} height={320} filterable follow showTimestamps />
    </Widget>
  )
}

Its page

On its page the card sits among the rest of the dashboard and shares its range and its data with them.

From the Monitoring console page