Moonlight-Panel/Servers
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented server console streaming in the frontend with xterm. Added logs endpoint for servers

Browse Source
This commit is contained in:
ChiaraBm
2024-12-31 17:57:39 +01:00
parent 6d674e153a
commit f652945a3f
19 changed files with 419 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
MoonlightServers.Frontend/UI/Components/XtermConsole.razor Normal file
View File

@@ -0,0 +1,97 @@
@using XtermBlazor
@inject IJSRuntime JsRuntime
@inject ILogger<XtermConsole> Logger
<div class="bg-black rounded-lg p-2">
@if (IsInitialized)
{
<Xterm @ref="Terminal"
Addons="Addons"
Options="Options"
OnFirstRender="HandleFirstRender"/>
}
</div>
@code
{
[Parameter] public Func<Task>? OnAfterInitialized { get; set; }
[Parameter] public Func<Task>? OnFirstRender { get; set; }
private Xterm Terminal;
private bool IsInitialized = false;
private bool HadFirstRender = false;
private readonly Queue<string> MessageCache = new();
private readonly HashSet<string> Addons = ["addon-fit"];
private readonly TerminalOptions Options = new()
{
CursorBlink = false,
CursorStyle = CursorStyle.Bar,
CursorWidth = 1,
FontFamily = "Space Mono, monospace",
DisableStdin = true,
CursorInactiveStyle = CursorInactiveStyle.None,
Theme =
{
Background = "#000000"
}
};
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(!firstRender)
return;
// Initialize addons
try
{
await JsRuntime.InvokeVoidAsync("moonlightServers.loadAddons");
}
catch (Exception e)
{
Logger.LogError("An error occured while initializing addons: {e}", e);
}
IsInitialized = true;
await InvokeAsync(StateHasChanged);
if(OnAfterInitialized != null)
await OnAfterInitialized.Invoke();
}
private async Task HandleFirstRender()
{
try
{
await Terminal.Addon("addon-fit").InvokeVoidAsync("fit");
}
catch (Exception e)
{
Logger.LogError("An error occured while calling addons: {e}", e);
}
HadFirstRender = true;
// Write out cache
while (MessageCache.Count > 0)
{
await Terminal.Write(MessageCache.Dequeue());
}
if (OnFirstRender != null)
await OnFirstRender.Invoke();
}
public async Task Write(string content)
{
// We cache messages here as there is the chance that the console isn't ready for input while receiving write tasks
if (HadFirstRender)
await Terminal.Write(content);
else
MessageCache.Enqueue(content);
}
}

77
MoonlightServers.Frontend/UI/Views/User/Manage.razor
View File

@@ -6,6 +6,7 @@
@using MoonCore.Exceptions
@using MoonCore.Helpers
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Frontend.UI.Components
@inject HttpApiClient ApiClient
@@ -67,11 +68,11 @@
}
<div class="flex gap-x-1.5">
<WButton CssClasses="btn btn-primary" OnClick="_ => DoSmth()">
<button class="btn btn-success">
<i class="icon-play me-1 align-middle"></i>
<span class="align-middle">Start</span>
</WButton>
<button type="button" class="btn btn-tertiary">
</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>
@@ -85,27 +86,33 @@
<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"
class="block pb-3 text-gray-400 hover:text-white whitespace-nowrap hover:border-b-2 hover:border-primary-500">Console</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/all"
class="block pb-3 text-white whitespace-nowrap border-b-2 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>
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>
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>
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>
@@ -116,8 +123,11 @@
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 _)
@@ -136,6 +146,16 @@
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"
@@ -161,6 +181,14 @@
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();
@@ -175,23 +203,10 @@
throw;
}
}
private async Task DoSmth()
private async Task OnAfterConsoleInitialized()
{
await AddTask("Creating storage");
await Task.Delay(1500);
await AddTask("Pulling docker image");
await Task.Delay(1500);
await AddTask("Removing container");
await Task.Delay(1500);
await AddTask("Creating container");
await Task.Delay(1500);
await AddTask("Starting container");
await Task.Delay(1500);
await XtermConsole!.Write(InitialConsoleMessage);
}
private async Task AddTask(string message)
@@ -201,7 +216,7 @@
Task.Run(async () =>
{
await Task.Delay(2000);
await Task.Delay(3000);
if (CurrentTask != message)
return;