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

@page "/admin/servers/nodes"

@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Dt
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Sys

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

@attribute [Authorize(Policy = "permissions:admin.servers.nodes.get")]

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

<div class="mb-5">
    <PageHeader Title="Nodes">
        <a href="/admin/servers/nodes/create" class="btn btn-primary">
            Create
        </a>
    </PageHeader>
</div>

<DataTable TItem="NodeDetailResponse">
    <Configuration>
        <Pagination TItem="NodeDetailResponse" ItemSource="LoadData" />
        
        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Id)" Name="Id"/>
        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Name)" Name="Name">
            <ColumnTemplate>
                <a class="text-primary" href="/admin/servers/nodes/update/@(context.Id)">
                    @context.Name
                </a>
            </ColumnTemplate>
        </DataTableColumn>
        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Name="Fqdn"/>
        <DataTableColumn TItem="NodeDetailResponse" Field="@(x => x.Fqdn)" Name="Status">
            <ColumnTemplate>
                <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">
                                <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">
                                    <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">
                                    <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>
            </ColumnTemplate>
        </DataTableColumn>
        <DataTableColumn TItem="NodeDetailResponse"
                         HeaderCss="p-2 font-semibold text-left hidden xl:table-cell"
                         ColumnCss="p-2 text-left font-normal hidden xl:table-cell">
            <ColumnTemplate>
                <div>
                    <i class="icon-cpu text-lg me-1 align-middle text-primary"></i>
                    <span class="align-middle">33% of 6 Cores</span>
                </div>
            </ColumnTemplate>
        </DataTableColumn>
        <DataTableColumn TItem="NodeDetailResponse"
                         HeaderCss="p-2 font-semibold text-left hidden xl:table-cell"
                         ColumnCss="p-2 text-left font-normal hidden xl:table-cell">
            <ColumnTemplate>
                <div>
                    <i class="icon-memory-stick text-lg me-1 align-middle text-primary"></i>
                    <span class="align-middle">1.56GB / 64GB</span>
                </div>
            </ColumnTemplate>
        </DataTableColumn>
        <DataTableColumn TItem="NodeDetailResponse"
                         HeaderCss="p-2 font-semibold text-left hidden xl:table-cell"
                         ColumnCss="p-2 text-left font-normal hidden xl:table-cell">
            <ColumnTemplate>
                <div>
                    <i class="icon-hard-drive text-lg me-1 align-middle text-primary"></i>
                    <span class="align-middle">78.68GB / 1TB</span>
                </div>
            </ColumnTemplate>
        </DataTableColumn>
        <DataTableColumn TItem="NodeDetailResponse">
            <ColumnTemplate>
                <div class="flex justify-end">
                    <a href="/admin/servers/nodes/update/@(context.Id)" class="text-primary mr-2 sm:mr-3">
                        <i class="icon-pencil text-base"></i>
                    </a>

                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
                       class="text-danger">
                        <i class="icon-trash text-base"></i>
                    </a>
                </div>
            </ColumnTemplate>
        </DataTableColumn>
    </Configuration>
</DataTable>

@code
{
    private DataTable<NodeDetailResponse> Table;

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

    private async Task<IPagedData<NodeDetailResponse>> LoadData(PaginationOptions options)
        => await ApiClient.GetJson<PagedData<NodeDetailResponse>>($"api/admin/servers/nodes?page={options.Page}&pageSize={options.PerPage}");

    private async Task Delete(NodeDetailResponse detailResponse)
    {
        await AlertService.ConfirmDanger(
            "Node deletion",
            $"Do you really want to delete the node '{detailResponse.Name}'",
            async () =>
            {
                await ApiClient.Delete($"api/admin/servers/nodes/{detailResponse.Id}");
                await ToastService.Success("Successfully deleted node");

                await Table.Refresh();
            }
        );
    }

    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);
    }
}