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.Statistics
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Sys

@inject HttpApiClient ApiClient
@inject NodeService NodeService
@inject AlertService AlertService
@inject ToastService ToastService
@inject ILogger<Index> Logger

@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>
                @{
                    var isFetched = StatusResponses.TryGetValue(context.Id, out var data);
                }

                @if (isFetched)
                {
                    if (data == null)
                    {
                        <div class="text-danger flex items-center">
                            <i class="icon-server-off text-base me-1"></i>
                            <span>
                                API Error
                            </span>
                        </div>
                    }
                    else
                    {
                        if (data.RoundtripSuccess)
                        {
                            <div class="text-success flex items-center">
                                <i class="icon-check text-base me-1"></i>
                                <span>Online (@(data.Version))</span>
                            </div>
                        }
                        else
                        {
                            <div class="text-danger flex items-center">
                                <i class="icon-server-off text-base me-1"></i>
                                <span class="me-2">
                                    Error
                                </span>
                                <a @onclick="() => ShowErrorDetails(context.Id)" @onclick:preventDefault
                                   href="#" class="ms-1 text-gray-600">Details</a>
                            </div>
                        }
                    }
                }
                else
                {
                    <div class="text-gray-500">
                        <i class="icon-loader text-base me-1 align-middle"></i>
                        <span class="align-middle">Loading</span>
                    </div>
                }
            </ColumnTemplate>
        </DataTableColumn>
        <DataTableColumn TItem="NodeDetailResponse"
                         Name="Utilization"
                         HeaderCss="p-2 font-semibold text-left hidden xl:table-cell"
                         ColumnCss="p-2 text-left font-normal hidden xl:table-cell">
            <ColumnTemplate>
                @{
                    var isFetched = Statistics.TryGetValue(context.Id, out var data);
                }

                @if (isFetched)
                {
                    if (data == null)
                    {
                        <div class="flex items-center text-danger">
                            <i class="icon-server-off text-base me-1"></i>
                            <span>
                                API Error
                            </span>
                        </div>
                    }
                    else
                    {
                        <div class="flex flex-row">
                            <div class="flex items-center">
                                <i class="text-primary text-base me-2 icon-cpu"></i>
                                <span>@(Math.Round(data.Cpu.Usage))%</span>
                            </div>
                        
                            <div class="flex items-center ms-5">
                                <i class="text-primary text-base me-2 icon-memory-stick"></i>
                                <span>
                                    @(Math.Round((data.Memory.Total - data.Memory.Free - data.Memory.Cached) / (double)data.Memory.Total * 100))%
                                </span>
                            </div>
                        </div>
                    }
                }
                else
                {
                    <div class="flex items-center text-gray-500">
                        <i class="icon-loader text-base me-1"></i>
                        <span>Loading</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?> StatusResponses = new();
    private Dictionary<int, StatisticsResponse?> Statistics = new();

    private async Task<IPagedData<NodeDetailResponse>> LoadData(PaginationOptions options)
    {
        Statistics.Clear();
        StatusResponses.Clear();

        var result = await ApiClient.GetJson<PagedData<NodeDetailResponse>>(
            $"api/admin/servers/nodes?page={options.Page}&pageSize={options.PerPage}"
        );

        Task.Run(async () =>
        {
            foreach (var item in result.Items)
            {
                try
                {
                    Statistics[item.Id] = await NodeService.GetStatistics(item.Id);
                }
                catch (Exception e)
                {
                    Logger.LogWarning(
                        "An error occured while fetching statistics for node {nodeId}: {e}",
                        item.Id,
                        e
                    );

                    Statistics[item.Id] = null;
                }

                await InvokeAsync(StateHasChanged);
                
                try
                {
                    StatusResponses[item.Id] = await NodeService.GetSystemStatus(item.Id);
                }
                catch (Exception e)
                {
                    Logger.LogWarning(
                        "An error occured while fetching status for node {nodeId}: {e}",
                        item.Id,
                        e
                    );

                    StatusResponses[item.Id] = null;
                }
                
                await InvokeAsync(StateHasChanged);
            }
        });

        return result;
    }

    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 async Task ShowErrorDetails(int id)
    {
        var data = StatusResponses.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);
    }
}