scadalink-design/src/ScadaLink.CentralUI/Components/Pages/Monitoring/Health.razor

@page "/monitoring/health"
@attribute [Authorize]
@using ScadaLink.Commons.Types.Enums
@using ScadaLink.Commons.Entities.Sites
@using ScadaLink.Commons.Interfaces.Repositories
@using ScadaLink.HealthMonitoring
@implements IDisposable
@inject ICentralHealthAggregator HealthAggregator
@inject ISiteRepository SiteRepository

<div class="container-fluid mt-3">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Health Dashboard</h4>
        <div>
            <span class="text-muted small me-2">Auto-refresh: @(_autoRefreshSeconds)s</span>
            <button class="btn btn-outline-secondary btn-sm" @onclick="RefreshNow">Refresh Now</button>
        </div>
    </div>

    @if (_siteStates.Count == 0)
    {
        <div class="alert alert-info">No site health reports received yet.</div>
    }
    else
    {
        @* Overview cards *@
        <div class="row g-3 mb-3">
            <div class="col-lg-4 col-md-6 col-12">
                <div class="card border-success h-100">
                    <div class="card-body text-center">
                        <h3 class="mb-0 text-success">@_siteStates.Values.Count(s => s.IsOnline)</h3>
                        <small class="text-muted">Sites Online</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12">
                <div class="card border-danger h-100">
                    <div class="card-body text-center">
                        <h3 class="mb-0 text-danger">@_siteStates.Values.Count(s => !s.IsOnline)</h3>
                        <small class="text-muted">Sites Offline</small>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12">
                <div class="card border-warning h-100">
                    <div class="card-body text-center">
                        <h3 class="mb-0 text-warning">@_siteStates.Values.Count(SiteHasActiveErrors)</h3>
                        <small class="text-muted">Sites with active errors</small>
                    </div>
                </div>
            </div>
        </div>

        @* Per-site detail cards — central cluster pinned to the top, then sites alphabetically *@
        @foreach (var (siteId, state) in _siteStates.OrderBy(s => s.Key == CentralHealthReportLoop.CentralSiteId ? 0 : 1).ThenBy(s => s.Key))
        {
            var isCentral = siteId == CentralHealthReportLoop.CentralSiteId;
            var siteName = isCentral ? "Central Cluster" : GetSiteName(siteId);
            var detailsCollapseId = $"site-details-{siteId}";
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <div>
                        @if (state.IsOnline)
                        {
                            <span class="badge bg-success me-2" aria-label="State: Online">@OnlineGlyph Online</span>
                        }
                        else
                        {
                            <span class="badge bg-danger me-2" aria-label="State: Offline">@OfflineGlyph Offline</span>
                        }
                        <strong class="fs-5">@siteName@(isCentral ? "" : $" ({siteId})")</strong>
                    </div>
                    <small class="text-muted">
                        Last report: <TimestampDisplay Value="@state.LastReportReceivedAt" Format="HH:mm:ss" NullText="awaiting first report" />
                        | Last heartbeat: <TimestampDisplay Value="@state.LastHeartbeatAt" Format="HH:mm:ss" />
                        | Seq: @state.LastSequenceNumber
                    </small>
                </div>
                <div class="card-body p-3">
                    @if (state.LatestReport != null)
                    {
                        var report = state.LatestReport;
                        <div class="row g-3">
                            @* Column 1: Nodes *@
                            <div class="col-md-6">
                                <h6 class="text-muted mb-2 border-bottom pb-1">Nodes</h6>
                                <table class="table table-sm table-borderless mb-0">
                                    <tbody>
                                        @if (report.ClusterNodes is { Count: > 0 })
                                        {
                                            @foreach (var node in report.ClusterNodes)
                                            {
                                                <tr>
                                                    <td class="small">@node.Hostname</td>
                                                    <td>
                                                        <span class="badge @(node.IsOnline ? "bg-success" : "bg-danger")"
                                                              aria-label="State: @(node.IsOnline ? "Online" : "Offline")">
                                                            @(node.IsOnline ? OnlineGlyph : OfflineGlyph) @(node.IsOnline ? "Online" : "Offline")
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span class="badge @(node.Role == "Primary" ? "bg-primary" : "bg-secondary")"
                                                              aria-label="State: @node.Role">
                                                            @(node.Role == "Primary" ? PrimaryGlyph : StandbyGlyph) @node.Role
                                                        </span>
                                                    </td>
                                                </tr>
                                            }
                                        }
                                        else
                                        {
                                            <tr>
                                                <td class="small">@(report.NodeHostname != "" ? report.NodeHostname : "Node")</td>
                                                <td>
                                                    <span class="badge @(state.IsOnline ? "bg-success" : "bg-danger")"
                                                          aria-label="State: @(state.IsOnline ? "Online" : "Offline")">
                                                        @(state.IsOnline ? OnlineGlyph : OfflineGlyph) @(state.IsOnline ? "Online" : "Offline")
                                                    </span>
                                                </td>
                                                <td>
                                                    @{
                                                        var roleLabel = report.NodeRole == "Active" ? "Primary" : "Standby";
                                                    }
                                                    <span class="badge @(report.NodeRole == "Active" ? "bg-primary" : "bg-secondary")"
                                                          aria-label="State: @roleLabel">
                                                        @(roleLabel == "Primary" ? PrimaryGlyph : StandbyGlyph) @roleLabel
                                                    </span>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>

                            @* Column 2: Data Connections (collapsible) *@
                            <div class="col-md-6">
                                <button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
                                        data-bs-toggle="collapse"
                                        data-bs-target="@($"#{detailsCollapseId}-conns")"
                                        aria-expanded="false">
                                    Data Connections (@report.DataConnectionStatuses.Count)
                                </button>
                                <div class="collapse" id="@($"{detailsCollapseId}-conns")">
                                    @if (report.DataConnectionStatuses.Count == 0)
                                    {
                                        <span class="text-muted small">None</span>
                                    }
                                    else
                                    {
                                        @foreach (var (connName, health) in report.DataConnectionStatuses)
                                        {
                                            var endpoint = report.DataConnectionEndpoints?.GetValueOrDefault(connName);
                                            var quality = report.DataConnectionTagQuality?.GetValueOrDefault(connName);
                                            <div class="mb-2">
                                                <div class="d-flex justify-content-between">
                                                    <strong class="small">@connName</strong>
                                                    <span class="small">@(endpoint ?? health.ToString())</span>
                                                </div>
                                                @if (quality != null)
                                                {
                                                    <table class="table table-sm table-borderless mb-0">
                                                        <tbody>
                                                            <tr>
                                                                <td class="small text-muted py-0">Tags good</td>
                                                                <td class="small text-end py-0">@quality.Good.ToString("N0")</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="small text-muted py-0">Tags bad</td>
                                                                <td class="small text-end py-0">@quality.Bad.ToString("N0")</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="small text-muted py-0">Tags uncertain</td>
                                                                <td class="small text-end py-0">@quality.Uncertain.ToString("N0")</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                }
                                            </div>
                                        }
                                    }
                                </div>
                            </div>

                            @* Column 3: Instances + Store-and-Forward (collapsible) *@
                            <div class="col-md-6">
                                <button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
                                        data-bs-toggle="collapse"
                                        data-bs-target="@($"#{detailsCollapseId}-queues")"
                                        aria-expanded="false">
                                    Instances &amp; Queues
                                </button>
                                <div class="collapse" id="@($"{detailsCollapseId}-queues")">
                                    <h6 class="text-muted mb-2 border-bottom pb-1">Instances</h6>
                                    <table class="table table-sm table-borderless mb-0">
                                        <tbody>
                                            <tr>
                                                <td class="small">Deployed</td>
                                                <td class="text-end">@report.DeployedInstanceCount</td>
                                            </tr>
                                            <tr>
                                                <td class="small">Enabled</td>
                                                <td class="text-end text-success">@report.EnabledInstanceCount</td>
                                            </tr>
                                            <tr>
                                                <td class="small">Disabled</td>
                                                <td class="text-end">@report.DisabledInstanceCount</td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Store-and-Forward Buffers</h6>
                                    @if (report.StoreAndForwardBufferDepths.Count == 0)
                                    {
                                        <span class="text-muted small">Empty</span>
                                    }
                                    else
                                    {
                                        @foreach (var (category, depth) in report.StoreAndForwardBufferDepths)
                                        {
                                            <div class="d-flex justify-content-between mb-1">
                                                <span class="small">@category</span>
                                                <span class="badge @(depth > 0 ? "bg-warning text-dark" : "bg-light text-dark")">@depth</span>
                                            </div>
                                        }
                                    }
                                </div>
                            </div>

                            @* Column 4: Error Counts + Parked Messages (collapsible) *@
                            <div class="col-md-6">
                                <button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
                                        data-bs-toggle="collapse"
                                        data-bs-target="@($"#{detailsCollapseId}-errors")"
                                        aria-expanded="false">
                                    Errors &amp; Parked Messages
                                </button>
                                <div class="collapse" id="@($"{detailsCollapseId}-errors")">
                                    <h6 class="text-muted mb-2 border-bottom pb-1">Error Counts</h6>
                                    <table class="table table-sm table-borderless mb-0">
                                        <tbody>
                                            <tr>
                                                <td class="small">Script Errors</td>
                                                <td class="text-end">
                                                    <span class="@(report.ScriptErrorCount > 0 ? "text-danger fw-bold" : "")">@report.ScriptErrorCount</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="small">Alarm Eval Errors</td>
                                                <td class="text-end">
                                                    <span class="@(report.AlarmEvaluationErrorCount > 0 ? "text-warning fw-bold" : "")">@report.AlarmEvaluationErrorCount</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="small">Dead Letters</td>
                                                <td class="text-end">
                                                    <span class="@(report.DeadLetterCount > 0 ? "text-danger fw-bold" : "")">@report.DeadLetterCount</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Parked Messages</h6>
                                    @if (report.ParkedMessageCount == 0)
                                    {
                                        <span class="text-muted small">Empty</span>
                                    }
                                    else
                                    {
                                        <span class="badge bg-warning text-dark">@report.ParkedMessageCount</span>
                                    }
                                </div>
                            </div>
                        </div>
                    }
                    else
                    {
                        <span class="text-muted">No report data available.</span>
                    }
                </div>
            </div>
        }
    }
</div>

@code {
    // Shape-coded status glyphs to pair with badge colour.
    private const string OnlineGlyph = "●";   // ●
    private const string OfflineGlyph = "○";  // ○
    private const string PrimaryGlyph = "▲";  // ▲
    private const string StandbyGlyph = "△";  // △

    private IReadOnlyDictionary<string, SiteHealthState> _siteStates = new Dictionary<string, SiteHealthState>();
    private Dictionary<string, string> _siteNames = new();
    private Timer? _refreshTimer;
    private int _autoRefreshSeconds = 10;

    private static bool SiteHasActiveErrors(SiteHealthState state)
    {
        var report = state.LatestReport;
        if (report == null) return false;
        return report.ScriptErrorCount > 0
            || report.AlarmEvaluationErrorCount > 0
            || report.DeadLetterCount > 0;
    }

    protected override async Task OnInitializedAsync()
    {
        // Load site names for display
        try
        {
            var sites = await SiteRepository.GetAllSitesAsync();
            _siteNames = sites.ToDictionary(s => s.SiteIdentifier, s => s.Name);
        }
        catch
        {
            // Non-fatal — fall back to showing siteId only
        }

        RefreshNow();
        _refreshTimer = new Timer(_ =>
        {
            InvokeAsync(() =>
            {
                RefreshNow();
                StateHasChanged();
            });
        }, null, TimeSpan.FromSeconds(_autoRefreshSeconds), TimeSpan.FromSeconds(_autoRefreshSeconds));
    }

    private void RefreshNow()
    {
        _siteStates = HealthAggregator.GetAllSiteStates();
    }

    private string GetSiteName(string siteId)
    {
        return _siteNames.GetValueOrDefault(siteId, siteId);
    }

    private static string GetConnectionHealthBadge(ConnectionHealth health) => health switch
    {
        ConnectionHealth.Connected => "bg-success",
        ConnectionHealth.Connecting => "bg-warning text-dark",
        ConnectionHealth.Disconnected => "bg-danger",
        _ => "bg-secondary"
    };

    public void Dispose()
    {
        _refreshTimer?.Dispose();
    }
}