Servers/MoonlightServers.Frontend/UI/Views/Admin/Nodes/Index.razor

@page "/admin/servers/nodes"

@using System.Diagnostics
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Blazor.Tailwind.MinimalCrud
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonCore.Blazor.Tailwind.DataTable
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@using MoonCore.Blazor.Tailwind.Components
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Sys

@inject HttpApiClient ApiClient
@inject NodeService NodeService
@inject AlertService AlertService

<div class="mb-3">
    <NavTabs Index="2" Names="@UiConstants.AdminNavNames" Links="@UiConstants.AdminNavLinks"/>
</div>

<MinimalCrud TItem="NodeDetailResponse" OnConfigure="OnConfigure">
    <ChildContent>
        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Id)" Title="Id" IsSortable="true"/>
        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Name)" Title="Name" IsSortable="true"/>
        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Title="Fqdn"/>
        <DataColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Title="Status">
            <Template>
                <LazyLoader Load="_ => LoadNodeStatus(context.Id)">
                    @{
                        bool isFetched;
                        NodeSystemStatusResponse? data;

                        lock (Responses)
                            isFetched = Responses.TryGetValue(context.Id, out data);
                    }

                    @if (isFetched)
                    {
                        if (data == null)
                        {
                            <span class="text-danger-500">
                                <i class="icon-server-offg text-base me-1 align-middle"></i>
                                <span class="align-middle">
                                    API Error
                                </span>
                            </span>
                        }
                        else
                        {
                            if (data.RoundtripSuccess)
                            {
                                <span class="text-success-500">
                                    <i class="icon-check text-base me-1 align-middle"></i>
                                    <span class="align-middle">Online (@(data.Version))</span>
                                </span>
                            }
                            else
                            {
                                <span class="text-danger-500">
                                    <i class="icon-server-off text-base me-1 align-middle"></i>
                                    <span class="align-middle">
                                        Error
                                        <a @onclick="() => ShowErrorDetails(context.Id)" @onclick:preventDefault
                                           href="#" class="ms-1 text-gray-600">Details</a>
                                    </span>
                                </span>
                            }
                        }
                    }
                    else
                    {
                        <span class="text-gray-500">
                            <i class="icon-loader text-base me-1 align-middle"></i>
                            <span class="align-middle">Loading</span>
                        </span>
                    }
                </LazyLoader>
            </Template>
        </DataColumn>
        <DataColumn TItem="NodeDetailResponse"
                    Title=""
                    HeadCssClasses="p-2 font-semibold text-left hidden xl:table-cell"
                    CssClasses="p-2 text-left font-normal hidden xl:table-cell">
            <Template>
                <div>
                    <i class="icon-cpu text-lg me-1 align-middle text-primary-500"></i>
                    <span class="align-middle">33% of 6 Cores</span>
                </div>
            </Template>
        </DataColumn>
        <DataColumn TItem="NodeDetailResponse"
                    Title=""
                    HeadCssClasses="p-2 font-semibold text-left hidden xl:table-cell"
                    CssClasses="p-2 text-left font-normal hidden xl:table-cell">
            <Template>
                <div>
                    <i class="icon-memory-stick text-lg me-1 align-middle text-primary-500"></i>
                    <span class="align-middle">1.56GB / 64GB</span>
                </div>
            </Template>
        </DataColumn>
        <DataColumn TItem="NodeDetailResponse"
                    Title=""
                    HeadCssClasses="p-2 font-semibold text-left hidden xl:table-cell"
                    CssClasses="p-2 text-left font-normal hidden xl:table-cell">
            <Template>
                <div>
                    <i class="icon-hard-drive text-lg me-1 align-middle text-primary-500"></i>
                    <span class="align-middle">78.68GB / 1TB</span>
                </div>
            </Template>
        </DataColumn>
    </ChildContent>
</MinimalCrud>

@code
{
    private Dictionary<int, NodeSystemStatusResponse?> Responses = new();

    private Task LoadNodeStatus(int node)
    {
        Task.Run(async () =>
        {
            try
            {
                var status = await NodeService.GetSystemStatus(node);

                lock (Responses)
                    Responses[node] = status;
            }
            catch (Exception e)
            {
                lock (Responses)
                    Responses[node] = null;
            }

            await InvokeAsync(StateHasChanged);
        });

        return Task.CompletedTask;
    }

    private async Task ShowErrorDetails(int id)
    {
        NodeSystemStatusResponse? data;

        lock (Responses)
            data = Responses.GetValueOrDefault(id);

        if (data == null)
            return;

        var message = $"Failed after {Math.Round(data.RoundtripTime.TotalSeconds, 2)} seconds: " +
                      (data.RoundtripRemoteFailure ? "(Failed at node)" : "(Failed at api server)") +
                      $" {data.RoundtripError}";

        await AlertService.Danger("Node error details", message);
    }

    private void OnConfigure(MinimalCrudOptions<NodeDetailResponse> options)
    {
        options.Title = "Nodes";
        options.ItemLoader = async (page, pageSize) =>
            await ApiClient.GetJson<PagedData<NodeDetailResponse>>($"api/admin/servers/nodes?page={page}&pageSize={pageSize}");

        options.CreateUrl = ComponentHelper.GetRouteOfComponent<Create>();
        options.UpdateUrl = item => ComponentHelper.GetRouteOfComponent<Update>(item.Id)!;
        options.DeleteFunction = async item => await ApiClient.Delete($"api/admin/servers/nodes/{item.Id}");
    }
}