Servers/MoonlightServers.Frontend/UI/Components/Servers/ServerCard.razor

@using Microsoft.Extensions.Logging
@using MoonCore.Helpers
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Shared.Http.Responses.Client.Servers

@inject ServerService ServerService
@inject ILogger<ServerCard> Logger

@{
    var gradient = "from-base-100/20";
    var border = "border-base-content/80";

    if (IsLoaded && !IsFailed)
    {
        gradient = Status.State switch
        {
            ServerState.Installing => "from-primary/20",
            ServerState.Offline => "from-error/20",
            ServerState.Starting => "from-warning/20",
            ServerState.Stopping => "from-warning/20",
            ServerState.Online => "from-success/20",
            _ => "from-base-100"
        };
        
        border = Status.State switch
        {
            ServerState.Installing => "border-primary",
            ServerState.Offline => "border-error",
            ServerState.Starting => "border-warning",
            ServerState.Stopping => "border-warning",
            ServerState.Online => "border-success",
            _ => "border-base-content/80"
        };
    }
}

<a href="/servers/@Server.Id"
   class="w-full bg-gradient-to-r @gradient to-base-100/75 to-25% px-5 py-3.5 rounded-xl border-l-8 @border">
    <div class="grid grid-cols-6">
        <div class="flex items-center col-span-6 sm:col-span-2 2xl:col-span-1">
            <div class="bg-base-content/10 bg-opacity-45 py-1 px-2 rounded-lg flex items-center">
                <i class="icon-server me-3 align-middle"></i>
                <div class="text-lg align-middle">
                    @Server.Name
                </div>
            </div>
        </div>

        <div class="hidden sm:flex items-center justify-end gap-x-3 sm:col-span-4 2xl:col-span-3">
            @if (
                IsLoaded &&
                !IsFailed &&
                Status.State is ServerState.Starting or ServerState.Stopping or ServerState.Online
            )
            {
                <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row">
                    <div>
                        <i class="icon-cpu"></i>
                    </div>

                    <div class="ms-3">@(Stats.CpuUsage)%</div>
                </div>

                <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row">
                    <div>
                        <i class="icon-memory-stick"></i>
                    </div>

                    <div class="ms-3">@(Formatter.FormatSize(Stats.MemoryUsage)) / @(Formatter.FormatSize(ByteConverter.FromMegaBytes(Server.Memory).Bytes))</div>
                </div>

                <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row">
                    <div>
                        <i class="icon-hard-drive"></i>
                    </div>

                    <div class="ms-3">53 GB / 100GB</div>
                </div>
            }
            else
            {
                if (!IsLoaded)
                {
                    <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row text-gray-700">
                        <div>
                            <i class="icon-loader"></i>
                        </div>

                        <div class="ms-3">Loading</div>
                    </div>
                }
                else if (IsFailed)
                {
                    <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row text-error">
                        <div>
                            <i class="icon-cable"></i>
                        </div>

                        <div class="ms-3">Unreachable</div>
                    </div>
                }
                else if (IsLoaded && !IsFailed && Status.State is ServerState.Offline)
                {
                    <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row text-error">
                        <div>
                            <i class="icon-power-off"></i>
                        </div>

                        <div class="ms-3">Offline</div>
                    </div>
                }
                else if (IsLoaded && !IsFailed && Status.State is ServerState.Installing)
                {
                    <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row text-primary">
                        <div>
                            <i class="icon-hammer"></i>
                        </div>

                        <div class="ms-3">Installing</div>
                    </div>
                }
            }
        </div>

        <div class="hidden 2xl:flex items-center justify-end gap-x-3 2xl:col-span-2">

            @if (Server.Share != null)
            {
                <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row col-span-2">
                    <div>
                        <i class="icon-share-2"></i>
                    </div>

                    <div class="ms-3">Shared by <span class="text-primary">@Server.Share.SharedBy</span></div>
                </div>
            }
            else
            {
                <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row">
                    <div>
                        <i class="icon-sparkles"></i>
                    </div>

                    <div class="ms-3">@Server.StarName</div>
                </div>

                <div class="bg-base-200/75 py-1 px-2 rounded-lg flex flex-row">
                    <div>
                        <i class="icon-database"></i>
                    </div>

                    <div class="ms-3">@Server.NodeName</div>
                </div>
            }
        </div>
    </div>
</a>

@code
{
    [Parameter] public ServerDetailResponse Server { get; set; }

    private ServerStatusResponse Status;
    private ServerStatsResponse Stats;

    private bool IsFailed = false;
    private bool IsLoaded = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
            return;

        try
        {
            Status = await ServerService.GetStatusAsync(Server.Id);
            Stats = await ServerService.GetStatsAsync(Server.Id);
        }
        catch (Exception e)
        {
            IsFailed = true;
            Logger.LogWarning("Unable to fetch status from server {id}: {e}", Server.Id, e);
        }

        IsLoaded = true;
        await InvokeAsync(StateHasChanged);
    }
}