Servers/MoonlightServers.Frontend/UI/Views/Client/Manage.razor

@page "/servers/{ServerId:int}"
@page "/servers/{ServerId:int}/{TabPath:alpha}"

@using Microsoft.AspNetCore.Http.Connections
@using Microsoft.AspNetCore.SignalR.Client
@using MoonlightServers.Shared.Http.Responses.Users.Servers
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Exceptions
@using MoonCore.Helpers
@using MoonlightServers.Frontend.Interfaces
@using MoonlightServers.Frontend.Models
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Enums

@inject ServerService ServerService
@inject NavigationManager Navigation
@inject IEnumerable<IServerTabProvider> TabProviders

@implements IAsyncDisposable

<LazyLoader Load="Load">
    @if (NotFound)
    {
        <div class="flex flex-col justify-center text-center">
            <img class="h-48 mt-5 mb-3" src="/svg/notfound.svg" alt="Not found illustration">
            <h3 class="mt-2 font-semibold text-white text-lg">
                Server not found
            </h3>
            <p class="mt-1 text-gray-300">
                The server you requested does not exist
            </p>
        </div>
    }
    else
    {
        <div class="card card-body justify-between py-2.5 px-5 flex-row">
            <div class="flex flex-row items-center">
                @{
                    var bgColor = State switch
                    {
                        ServerState.Installing => "bg-primary",
                        ServerState.Offline => "bg-danger",
                        ServerState.Starting => "bg-warning",
                        ServerState.Stopping => "bg-warning",
                        ServerState.Online => "bg-success",
                        _ => "bg-gray-500"
                    };
                }

                <div class="p-2.5 rounded-full @bgColor me-3"></div>

                <div class="flex flex-col">
                    <div class="hidden sm:flex text-lg font-semibold">@Server.Name</div>
                    <div class="hidden text-sm text-gray-400 md:flex gap-x-3">
                        <span>
                            <i class="icon-sparkles me-0.5 align-middle"></i>
                            <span class="align-middle">@Server.StarName</span>
                        </span>

                        <span>
                            <i class="icon-database me-0.5 align-middle"></i>
                            <span class="align-middle">@Server.NodeName</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex flex-row items-center">
                <div class="flex gap-x-1.5">
                    @if (State == ServerState.Offline)
                    {
                        <WButton CssClasses="btn btn-success" OnClick="_ => Start()">
                            <i class="icon-play me-1 align-middle"></i>
                            <span class="align-middle">Start</span>
                        </WButton>
                    }
                    else
                    {
                        <button type="button" class="btn btn-success" disabled="disabled">
                            <i class="icon-play me-1 align-middle"></i>
                            <span class="align-middle">Start</span>
                        </button>
                    }

                    @if (State == ServerState.Online)
                    {
                        <button type="button" class="btn btn-primary">
                            <i class="icon-rotate-ccw me-1 align-middle"></i>
                            <span class="align-middle">Restart</span>
                        </button>
                    }
                    else
                    {
                        <button type="button" class="btn btn-primary" disabled="disabled">
                            <i class="icon-rotate-ccw me-1 align-middle"></i>
                            <span class="align-middle">Restart</span>
                        </button>
                    }

                    @if (State == ServerState.Starting || State == ServerState.Online || State == ServerState.Stopping)
                    {
                        if (State == ServerState.Stopping)
                        {
                            <WButton CssClasses="btn btn-danger" OnClick="_ => Kill()">
                                <i class="icon-bomb me-1 align-middle"></i>
                                <span class="align-middle">Kill</span>
                            </WButton>
                        }
                        else
                        {
                            <WButton CssClasses="btn btn-danger" OnClick="_ => Stop()">
                                <i class="icon-squircle me-1 align-middle"></i>
                                <span class="align-middle">Stop</span>
                            </WButton>
                        }
                    }
                    else
                    {
                        <button type="button" class="btn btn-danger" disabled="disabled">
                            <i class="icon-squircle me-1 align-middle"></i>
                            <span class="align-middle">Stop</span>
                        </button>
                    }
                </div>
            </div>
        </div>

        <div class="mt-3">
            <ul class="flex flex-wrap -m-1">
                @foreach (var tab in Tabs)
                {
                    <li class="m-1">
                        @if (tab == CurrentTab)
                        {
                            <a href="/servers/@(ServerId)/@(tab.Path)"
                               class="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-gray-100 text-gray-800 transition">
                                @tab.Name
                            </a>
                        }
                        else
                        {
                            <a href="/servers/@(ServerId)/@(tab.Path)" @onclick:preventDefault
                               @onclick="() => SwitchTab(tab)"
                               class="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-gray-700/60 hover:border-gray-600 shadow-sm bg-gray-800 text-gray-400 transition">
                                @tab.Name
                            </a>
                        }
                    </li>
                }
            </ul>

            @{
                var rf = ComponentHelper.FromType(CurrentTab!.ComponentType, parameters =>
                {
                    parameters.Add("Server", Server);
                    parameters.Add("State", State);
                    parameters.Add("InitialConsoleMessage", InitialConsoleMessage);
                    parameters.Add("HubConnection", HubConnection);
                    parameters.Add("Parent", this);
                });
            }

            <div class="mt-5">
                @rf
            </div>
        </div>
    }
</LazyLoader>

@code
{
    [Parameter] public int ServerId { get; set; }
    [Parameter] public string? TabPath { get; set; }

    private ServerTab[] Tabs;
    private ServerTab? CurrentTab;

    private ServerDetailResponse Server;
    private bool NotFound = false;
    private ServerState State;
    private string InitialConsoleMessage;

    private HubConnection HubConnection;

    private async Task Load(LazyLoader _)
    {
        try
        {
            // Load meta data
            Server = await ServerService.GetServer(ServerId);

            // Load server tabs
            var tmpTabs = new List<ServerTab>();

            foreach (var serverTabProvider in TabProviders)
                tmpTabs.AddRange(await serverTabProvider.GetTabs(Server));

            Tabs = tmpTabs.OrderBy(x => x.Priority).ToArray();

            // Find current tab
            if (!string.IsNullOrEmpty(TabPath))
            {
                CurrentTab = Tabs.FirstOrDefault(
                    x => TabPath.Equals(x.Path, StringComparison.InvariantCultureIgnoreCase)
                );
            }

            if (CurrentTab == null)
                CurrentTab = Tabs.First();

            // Load initial status for first render
            var status = await ServerService.GetStatus(ServerId);

            State = status.State;

            // Load initial messages
            var initialLogs = await ServerService.GetLogs(ServerId);

            InitialConsoleMessage = "";

            foreach (var message in initialLogs.Messages)
                InitialConsoleMessage += message;

            // Load websocket meta
            var websocketDetails = await ServerService.GetWebSocket(ServerId);

            // Build signal r
            HubConnection = new HubConnectionBuilder()
                .WithUrl(websocketDetails.Target, options =>
                {
                    options.AccessTokenProvider = async () =>
                    {
                        var details = await ServerService.GetWebSocket(ServerId);
                        return details.AccessToken;
                    };
                })
                .WithAutomaticReconnect()
                .Build();

            // Define handlers
            HubConnection.On<string>("StateChanged", async stateStr =>
            {
                if (!Enum.TryParse(stateStr, out ServerState receivedState))
                    return;

                State = receivedState;
                await InvokeAsync(StateHasChanged);
            });

            HubConnection.On<string>("ConsoleOutput", async content =>
            {
                // Update initial message
                InitialConsoleMessage += content;
                await InvokeAsync(StateHasChanged);
            });

            // Connect
            await HubConnection.StartAsync();
        }
        catch (HttpApiException e)
        {
            if (e.Status == 404)
                NotFound = true;
            else
                throw;
        }
    }

    private async Task SwitchTab(ServerTab tab)
    {
        CurrentTab = tab;
        Navigation.NavigateTo($"/servers/{ServerId}/{tab.Path}");

        await InvokeAsync(StateHasChanged);
    }

    private async Task Start()
        => await ServerService.Start(ServerId);

    private async Task Stop()
        => await ServerService.Stop(ServerId);

    private async Task Kill()
        => await ServerService.Kill(ServerId);

    public async ValueTask DisposeAsync()
    {
        if (HubConnection.State == HubConnectionState.Connected)
            await HubConnection.StopAsync();

        await HubConnection.DisposeAsync();
    }
}