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

@page "/admin/servers/nodes"

@using Microsoft.Extensions.Logging
@using MoonCore.Blazor.FlyonUi.Alerts
@using MoonCore.Blazor.FlyonUi.Common
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Helpers
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Statistics
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Sys
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Grid
@using MoonCore.Blazor.FlyonUi.Grid.Columns
@using MoonCore.Common

@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>

<DataGrid @ref="Grid"
          TGridItem="NodeResponse"
          ItemSource="ItemSource">
    <PropertyColumn Field="x => x.Id"/>
    <TemplateColumn Title="Name">
        <td>
            <a class="text-primary" href="/admin/servers/nodes/update/@(context.Id)">
                @context.Name
            </a>
        </td>
    </TemplateColumn>
    <PropertyColumn Field="x => x.Fqdn"/>
    <TemplateColumn Title="Status">
        <td>
            @{
                var isFetched = StatusResponses.TryGetValue(context.Id, out var data);
            }

            @if (isFetched)
            {
                if (data == null)
                {
                    <div class="text-error 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-error flex items-center">
                            <i class="icon-server-off text-base me-1"></i>
                            <span class="me-2">
                                Error
                            </span>
                            <a @onclick="() => ShowErrorDetailsAsync(context.Id)" @onclick:preventDefault
                               href="#" class="ms-1 text-base-content/40">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>
            }
        </td>
    </TemplateColumn>
    <TemplateColumn Title="Utilization">
        <td>
            @{
                var isFetched = Statistics.TryGetValue(context.Id, out var data);
            }

            @if (isFetched)
            {
                if (data == null)
                {
                    <div class="flex items-center text-error">
                        <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>
            }
        </td>
    </TemplateColumn>
    <TemplateColumn Title="Actions">
        <td>
            <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="() => DeleteAsync(context)" @onclick:preventDefault
                   class="text-error">
                    <i class="icon-trash text-base"></i>
                </a>
            </div>
        </td>
    </TemplateColumn>
</DataGrid>

@code
{
    private DataGrid<NodeResponse> Grid;

    private Dictionary<int, NodeSystemStatusResponse?> StatusResponses = new();
    private Dictionary<int, StatisticsResponse?> Statistics = new();

    private ItemSource<NodeResponse> ItemSource => ItemSourceFactory.From(LoadAsync);
    
    private async Task<IEnumerable<NodeResponse>> LoadAsync(int startIndex, int count)
    {
        var query = $"?startIndex={startIndex}&count={count}";

        var countedData = await ApiClient.GetJson<CountedData<NodeResponse>>($"api/admin/servers/nodes{query}");

        Statistics.Clear();
        StatusResponses.Clear();
        
        Task.Run(async () =>
        {
            foreach (var item in countedData.Items)
            {
                try
                {
                    Statistics[item.Id] = await NodeService.GetStatisticsAsync(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.GetSystemStatusAsync(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 countedData;
    }

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

                await Grid.RefreshAsync();
            }
        );
    }

    private async Task ShowErrorDetailsAsync(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.ErrorAsync("Node error details", message);
    }
}