237 lines
9.9 KiB
Plaintext
237 lines
9.9 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 = PowerState switch
|
|
{
|
|
ServerPowerState.Installing => "bg-primary-500",
|
|
ServerPowerState.Offline => "bg-danger-500",
|
|
ServerPowerState.Starting => "bg-warning-500",
|
|
ServerPowerState.Stopping => "bg-warning-500",
|
|
ServerPowerState.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">
|
|
@if (!string.IsNullOrEmpty(CurrentTask))
|
|
{
|
|
<div class="hidden md:flex me-8 items-center text-gray-600">
|
|
<i class="icon-loader me-1.5 animate-spin text-lg align-middle"></i>
|
|
<span class="text-base align-middle">
|
|
@CurrentTask
|
|
</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="flex gap-x-1.5">
|
|
<button class="btn btn-success">
|
|
<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>
|
|
<button type="button" class="btn btn-danger">
|
|
<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 ServerPowerState PowerState;
|
|
private string InitialConsoleMessage; // TODO: When moving to a single component, fail safe when failed to load
|
|
|
|
private string CurrentTask = "";
|
|
private XtermConsole? XtermConsole;
|
|
|
|
private HubConnection ConsoleConnection;
|
|
|
|
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"
|
|
);
|
|
|
|
PowerState = status.PowerState;
|
|
|
|
// Load initial messages
|
|
var initialLogs = await ApiClient.GetJson<ServerLogsResponse>(
|
|
$"api/servers/{ServerId}/logs"
|
|
);
|
|
|
|
InitialConsoleMessage = "";
|
|
|
|
foreach (var message in initialLogs.Messages)
|
|
InitialConsoleMessage += message;
|
|
|
|
// Load console meta
|
|
var consoleDetails = await ApiClient.GetJson<ServerConsoleResponse>(
|
|
$"api/servers/{ServerId}/console"
|
|
);
|
|
|
|
// Build signal r
|
|
ConsoleConnection = new HubConnectionBuilder()
|
|
.WithUrl(consoleDetails.Target)
|
|
.Build();
|
|
|
|
// Define handlers
|
|
ConsoleConnection.On<string>("PowerStateChanged", async powerStateStr =>
|
|
{
|
|
if(!Enum.TryParse(powerStateStr, out ServerPowerState receivedState))
|
|
return;
|
|
|
|
PowerState = receivedState;
|
|
await InvokeAsync(StateHasChanged);
|
|
});
|
|
|
|
ConsoleConnection.On<string>("TaskNotify", async task =>
|
|
{
|
|
await AddTask(Formatter.ConvertCamelCaseToSpaces(task));
|
|
});
|
|
|
|
ConsoleConnection.On<string>("ConsoleOutput", async content =>
|
|
{
|
|
if (XtermConsole != null)
|
|
await XtermConsole.Write(content);
|
|
|
|
await InvokeAsync(StateHasChanged);
|
|
});
|
|
|
|
// Connect
|
|
await ConsoleConnection.StartAsync();
|
|
|
|
// Authenticate
|
|
await ConsoleConnection.SendAsync("Authenticate", consoleDetails.AccessToken);
|
|
}
|
|
catch (HttpApiException e)
|
|
{
|
|
if (e.Status == 404)
|
|
NotFound = true;
|
|
else
|
|
throw;
|
|
}
|
|
}
|
|
|
|
private async Task OnAfterConsoleInitialized()
|
|
{
|
|
await XtermConsole!.Write(InitialConsoleMessage);
|
|
}
|
|
|
|
private async Task AddTask(string message)
|
|
{
|
|
CurrentTask = message;
|
|
await InvokeAsync(StateHasChanged);
|
|
|
|
Task.Run(async () =>
|
|
{
|
|
await Task.Delay(3000);
|
|
|
|
if (CurrentTask != message)
|
|
return;
|
|
|
|
CurrentTask = "";
|
|
await InvokeAsync(StateHasChanged);
|
|
});
|
|
}
|
|
|
|
public async ValueTask DisposeAsync()
|
|
{
|
|
if (ConsoleConnection.State == HubConnectionState.Connected)
|
|
await ConsoleConnection.StopAsync();
|
|
|
|
await ConsoleConnection.DisposeAsync();
|
|
}
|
|
}
|