LogStream

const logStreamFixture = {
  id: "log-stream",
  title: "ledger-api · production",
  intervalMs: 1900,
  prefill: 3,
  maxLines: 60,
  filters: true,
  paused: true,
  source: [
    { level: "INFO" as const, message: "GET /v2/ledger/entries 200 · 42ms", ts: "10:14:03.100" },
    { level: "WARN" as const, message: "retry queue depth 12 - approaching threshold", ts: "10:14:05.000" },
    { level: "ERR" as const, message: "analytics-ingest connection refused · retrying", ts: "10:14:07.400" },
  ],
};
 
import { LogStream } from "@grassroot/ui-react/advanced";
 
export default function LogStreamDemo() {
  const { id: _id, ...props } = logStreamFixture;
  return (
    <div>
      <LogStream {...props} />
    </div>
  );
}

<script setup lang="ts">
const logStreamFixture = {
  id: "log-stream",
  title: "ledger-api · production",
  intervalMs: 1900,
  prefill: 3,
  maxLines: 60,
  filters: true,
  paused: true,
  source: [
    { level: "INFO" as const, message: "GET /v2/ledger/entries 200 · 42ms", ts: "10:14:03.100" },
    { level: "WARN" as const, message: "retry queue depth 12 - approaching threshold", ts: "10:14:05.000" },
    { level: "ERR" as const, message: "analytics-ingest connection refused · retrying", ts: "10:14:07.400" },
  ],
};
 
import { LogStream } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <LogStream
      :source="logStreamFixture.source"
      :title="logStreamFixture.title"
      :interval-ms="logStreamFixture.intervalMs"
      :prefill="logStreamFixture.prefill"
      :max-lines="logStreamFixture.maxLines"
      :filters="logStreamFixture.filters"
      :paused="logStreamFixture.paused"
    />
  </div>
</template>

import { Component } from "@angular/core";
const logStreamFixture = {
  id: "log-stream",
  title: "ledger-api · production",
  intervalMs: 1900,
  prefill: 3,
  maxLines: 60,
  filters: true,
  paused: true,
  source: [
    { level: "INFO" as const, message: "GET /v2/ledger/entries 200 · 42ms", ts: "10:14:03.100" },
    { level: "WARN" as const, message: "retry queue depth 12 - approaching threshold", ts: "10:14:05.000" },
    { level: "ERR" as const, message: "analytics-ingest connection refused · retrying", ts: "10:14:07.400" },
  ],
};
 
import { GrassrootLogStream } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-log-stream-demo",
  standalone: true,
  imports: [GrassrootLogStream],
  template: `
    <div>
      <grassroot-log-stream
        [source]="fixture.source"
        [title]="fixture.title"
        [intervalMs]="fixture.intervalMs"
        [prefill]="fixture.prefill"
        [maxLines]="fixture.maxLines"
        [filters]="fixture.filters"
        [paused]="fixture.paused"
      />
    </div>
  `,
})
export class LogStreamDemoComponent {
  protected readonly fixture = logStreamFixture;
}
 
export default LogStreamDemoComponent;

<script lang="ts">
  const logStreamFixture = {
    id: "log-stream",
    title: "ledger-api · production",
    intervalMs: 1900,
    prefill: 3,
    maxLines: 60,
    filters: true,
    paused: true,
    source: [
      { level: "INFO" as const, message: "GET /v2/ledger/entries 200 · 42ms", ts: "10:14:03.100" },
      { level: "WARN" as const, message: "retry queue depth 12 - approaching threshold", ts: "10:14:05.000" },
      { level: "ERR" as const, message: "analytics-ingest connection refused · retrying", ts: "10:14:07.400" },
    ],
  };
 
  import { LogStream } from "@grassroot/ui-svelte";
</script>
 
<div>
  <LogStream
    source={logStreamFixture.source}
    title={logStreamFixture.title}
    intervalMs={logStreamFixture.intervalMs}
    prefill={logStreamFixture.prefill}
    maxLines={logStreamFixture.maxLines}
    filters={logStreamFixture.filters}
    paused={logStreamFixture.paused}
  />
</div>

/** @jsxImportSource solid-js */
const logStreamFixture = {
  id: "log-stream",
  title: "ledger-api · production",
  intervalMs: 1900,
  prefill: 3,
  maxLines: 60,
  filters: true,
  paused: true,
  source: [
    { level: "INFO" as const, message: "GET /v2/ledger/entries 200 · 42ms", ts: "10:14:03.100" },
    { level: "WARN" as const, message: "retry queue depth 12 - approaching threshold", ts: "10:14:05.000" },
    { level: "ERR" as const, message: "analytics-ingest connection refused · retrying", ts: "10:14:07.400" },
  ],
};
 
import { LogStream } from "@grassroot/ui-solid";
 
export default function LogStreamDemo() {
  return (
    <div>
      <LogStream
        source={logStreamFixture.source}
        title={logStreamFixture.title}
        intervalMs={logStreamFixture.intervalMs}
        prefill={logStreamFixture.prefill}
        maxLines={logStreamFixture.maxLines}
        filters={logStreamFixture.filters}
        paused={logStreamFixture.paused}
      />
    </div>
  );
}