Files
Servers/MoonlightServers.Frontend/UI/Views/User/Manage.razor
2025-02-12 23:02:00 +01:00

250 lines
9.2 KiB
Plaintext

@page "/servers/{ServerId:int}"
@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.Shared.Enums
@using MoonlightServers.Frontend.UI.Components
@inject HttpApiClient ApiClient
@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-500",
ServerState.Offline => "bg-danger-500",
ServerState.Starting => "bg-warning-500",
ServerState.Stopping => "bg-warning-500",
ServerState.Online => "bg-success-500",
_ => "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>
}
<button type="button" class="btn btn-primary">
<i class="icon-rotate-ccw me-1 align-middle"></i>
<span class="align-middle">Restart</span>
</button>
@if (State == ServerState.Starting || State == ServerState.Online)
{
<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-5 mx-2 relative">
<ul class="relative text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
<li class="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
<a
href="/admin/servers/all"
class="block pb-3 text-white whitespace-nowrap border-b-2 border-primary-500">Console</a>
</li>
<li class="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
<a
href="/admin/servers"
class="block pb-3 text-gray-400 hover:text-white whitespace-nowrap hover:border-b-2 hover:border-primary-500">
Files
</a>
</li>
<li class="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
<a
href="/admin/servers/nodes"
class="block pb-3 text-gray-400 hover:text-white whitespace-nowrap hover:border-b-2 hover:border-primary-500">
Backups
</a>
</li>
<li class="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
<a
href="/admin/servers/stars"
class="block pb-3 text-gray-400 hover:text-white whitespace-nowrap hover:border-b-2 hover:border-primary-500">
Networking
</a>
</li>
<li class="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
<a
href="/admin/servers/manager"
class="block pb-3 text-gray-400 hover:text-white whitespace-nowrap hover:border-b-2 hover:border-primary-500">
Variables
</a>
</li>
</ul>
</div>
<div class="mt-3 h-44">
<XtermConsole @ref="XtermConsole" OnAfterInitialized="OnAfterConsoleInitialized"/>
</div>
}
</LazyLoader>
@code
{
[Parameter] public int ServerId { get; set; }
private ServerDetailResponse Server;
private bool NotFound = false;
private ServerState State;
private string InitialConsoleMessage; // TODO: When moving to a single component, fail safe when failed to load
private XtermConsole? XtermConsole;
private HubConnection WebSocketConnection;
private async Task Load(LazyLoader _)
{
try
{
// Load meta data
Server = await ApiClient.GetJson<ServerDetailResponse>(
$"api/servers/{ServerId}"
);
// Load initial status for first render
var status = await ApiClient.GetJson<ServerStatusResponse>(
$"api/servers/{ServerId}/status"
);
State = status.State;
// Load initial messages
var initialLogs = await ApiClient.GetJson<ServerLogsResponse>(
$"api/servers/{ServerId}/logs"
);
InitialConsoleMessage = "";
foreach (var message in initialLogs.Messages)
InitialConsoleMessage += message;
// Load websocket meta
var websocketDetails = await ApiClient.GetJson<ServerWebSocketResponse>(
$"api/servers/{ServerId}/ws"
);
// Build signal r
WebSocketConnection = new HubConnectionBuilder()
.WithUrl(websocketDetails.Target)
.Build();
// Define handlers
WebSocketConnection.On<string>("StateChanged", async stateStr =>
{
if (!Enum.TryParse(stateStr, out ServerState receivedState))
return;
State = receivedState;
await InvokeAsync(StateHasChanged);
});
WebSocketConnection.On<string>("ConsoleOutput", async content =>
{
if (XtermConsole != null)
await XtermConsole.Write(content);
await InvokeAsync(StateHasChanged);
});
// Connect
await WebSocketConnection.StartAsync();
// Authenticate
await WebSocketConnection.SendAsync("Authenticate", websocketDetails.AccessToken);
}
catch (HttpApiException e)
{
if (e.Status == 404)
NotFound = true;
else
throw;
}
}
private async Task OnAfterConsoleInitialized()
{
await XtermConsole!.Write(InitialConsoleMessage);
}
private async Task Start()
{
await ApiClient.Post($"api/servers/{Server.Id}/start");
}
private async Task Stop()
{
await ApiClient.Post($"api/servers/{Server.Id}/stop");
}
public async ValueTask DisposeAsync()
{
if (WebSocketConnection.State == HubConnectionState.Connected)
await WebSocketConnection.StopAsync();
await WebSocketConnection.DisposeAsync();
}
}