ModelingEvolution.Blazor.LogViewer 1.0.0

ModelingEvolution.Blazor.LogViewer

A reusable Blazor component for viewing logs from processes and Docker containers in real-time using XtermBlazor terminal.

Features

• Real-time log streaming from processes and Docker containers
• Multiple log source support with source switching
• Separate stdout/stderr views with toggle
• Copy to clipboard functionality
• ANSI color support via XtermBlazor
• Circular buffer with configurable max lines
• Extensible architecture for custom log sources

Installation

dotnet add package ModelingEvolution.Blazor.LogViewer

Quick Start

1. Add required resources to your App.razor or _Host.cshtml:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />


<link rel="stylesheet" href="_content/ModelingEvolution.XTermBlazor/XtermBlazor.min.css" />

<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="_content/ModelingEvolution.XTermBlazor/XtermBlazor.min.js"></script>

2. Add MudBlazor providers to your layout:

<MudThemeProvider IsDarkMode="true" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

3. Add the namespace to _Imports.razor:

@using ModelingEvolution.Blazor.LogViewer
@using MudBlazor

4. Use the LogViewer component:

<LogViewer Source="@_logSource" Height="500" />

@code {
    private ProcessLogSource _logSource;
    private event Action<string, StreamType>? _onOutput;

    protected override void OnInitialized()
    {
        _logSource = new ProcessLogSource(
            "My Process",
            handler => _onOutput += handler,
            handler => _onOutput -= handler);
    }
}

Log Sources

ProcessLogSource

Observes an externally-managed process via event subscription:

// Your process wrapper raises events
public event Action<string, StreamType>? OnOutput;

// Create a ProcessLogSource that subscribes to those events
var source = new ProcessLogSource(
    name: "My Process",
    subscribe: handler => OnOutput += handler,
    unsubscribe: handler => OnOutput -= handler,
    maxLines: 10_000);

// Start observing
source.StartObserving();

// Emit events from your process
OnOutput?.Invoke("Hello from stdout", StreamType.StandardOutput);
OnOutput?.Invoke("Error message", StreamType.ErrorOutput);

// Signal completion when process exits
source.SignalCompleted();

DockerLogSource

Streams logs from an already-running Docker container:

var source = new DockerLogSource(
    name: "My Container",
    containerIdOrName: "my-container-id",
    maxLines: 10_000);

source.StartObserving();
// Logs are automatically streamed from the container

MockLogSource

For testing and demos:

var source = new MockLogSource("Test");
source.StartObserving();

// Emit test lines
source.EmitLine("Standard output line");
source.EmitLine("Error line", isError: true);

Multi-Source Support

Display multiple log sources with a dropdown selector:

<LogViewer Sources="@_sources" Height="600" OnSourceChanged="HandleSourceChanged" />

@code {
    private List<ILogSubscriptionSource> _sources = new()
    {
        new MockLogSource("Source 1"),
        new MockLogSource("Source 2"),
        new MockLogSource("Source 3")
    };

    private void HandleSourceChanged(ILogSubscriptionSource source)
    {
        Console.WriteLine($"Switched to: {source.Name}");
    }
}

Parameters

Custom Tool Buttons

Add custom buttons to the toolbar:

<LogViewer Source="@_source" Height="500">
    <ToolButtons>
        <button @onclick="HandleClear">Clear</button>
        <button @onclick="HandleExport">Export</button>
    </ToolButtons>
</LogViewer>

Custom Log Source

Implement ILogSubscriptionSource for custom log sources:

public class MyCustomLogSource : ILogSubscriptionSource
{
    public string Name => "Custom";
    public LogSourceStatus Status { get; private set; }
    public event Action<LogSourceStatus>? OnStatusChanged;

    public void StartObserving() { /* ... */ }
    public void StopObserving() { /* ... */ }
    public IDisposable Subscribe(Action<string> onLine, LogMode mode) { /* ... */ }
    public void Dispose() { /* ... */ }
}

Example Application

The repository includes a complete example application demonstrating:

• Process logs with CliWrap
• Docker container logs
• Multi-source switching

Run the example:

cd examples/LogViewerExample
dotnet run

License

MIT

Contributing

Contributions are welcome! Please open an issue or submit a pull request.