Started implementing dynamic server tabs

This commit is contained in:
2025-02-17 21:26:57 +01:00
parent 4c9a2f1824
commit c452e652a2
4 changed files with 73 additions and 62 deletions

View File

@@ -0,0 +1,7 @@
namespace MoonlightServers.Frontend.Models;
public class ServerTab
{
public string Path { get; set; }
public string Name { get; set; }
}

View File

@@ -0,0 +1,13 @@
@using Microsoft.AspNetCore.SignalR.Client
@using MoonlightServers.Frontend.UI.Views.User
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Shared.Http.Responses.Users.Servers
@code
{
[Parameter] public ServerDetailResponse Server { get; set; }
[Parameter] public ServerState State { get; set; }
[Parameter] public string InitialConsoleMessage { get; set; }
[Parameter] public HubConnection HubConnection { get; set; }
[Parameter] public Manage Parent { get; set; }
}

View File

@@ -0,0 +1,30 @@
@using Microsoft.AspNetCore.SignalR.Client
@inherits BaseServerTab
<div class="h-44">
<XtermConsole @ref="XtermConsole" OnAfterInitialized="OnAfterConsoleInitialized"/>
</div>
@code
{
private XtermConsole? XtermConsole;
protected override Task OnInitializedAsync()
{
// We are already connected to the hub at this point
HubConnection.On<string>("ConsoleOutput", async content =>
{
if(XtermConsole != null)
await XtermConsole.Write(content);
});
return Task.CompletedTask;
}
private async Task OnAfterConsoleInitialized()
{
await XtermConsole!.Write(InitialConsoleMessage);
}
}

View File

@@ -7,6 +7,7 @@
@using MoonCore.Helpers
@using MoonlightServers.Shared.Enums
@using MoonlightServers.Frontend.UI.Components
@using MoonlightServers.Frontend.UI.Components.Servers.ServerTabs
@inject HttpApiClient ApiClient
@@ -118,48 +119,16 @@
</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">
<div class="mt-5">
<Tabs NavStyle="true">
<Tab Name="Console">
<ConsoleTab Parent="this" Server="Server" State="State" HubConnection="HubConnection" InitialConsoleMessage="@InitialConsoleMessage" />
</Tab>
<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>
<Tab Name="Testy">
<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"/>
</Tab>
</Tabs>
</div>
}
</LazyLoader>
@@ -171,11 +140,9 @@
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 string InitialConsoleMessage;
private XtermConsole? XtermConsole;
private HubConnection WebSocketConnection;
private HubConnection HubConnection;
private async Task Load(LazyLoader _)
{
@@ -209,12 +176,12 @@
);
// Build signal r
WebSocketConnection = new HubConnectionBuilder()
HubConnection = new HubConnectionBuilder()
.WithUrl(websocketDetails.Target)
.Build();
// Define handlers
WebSocketConnection.On<string>("StateChanged", async stateStr =>
HubConnection.On<string>("StateChanged", async stateStr =>
{
if (!Enum.TryParse(stateStr, out ServerState receivedState))
return;
@@ -223,19 +190,18 @@
await InvokeAsync(StateHasChanged);
});
WebSocketConnection.On<string>("ConsoleOutput", async content =>
HubConnection.On<string>("ConsoleOutput", async content =>
{
if (XtermConsole != null)
await XtermConsole.Write(content);
// Update initial message
InitialConsoleMessage += content;
await InvokeAsync(StateHasChanged);
});
// Connect
await WebSocketConnection.StartAsync();
await HubConnection.StartAsync();
// Authenticate
await WebSocketConnection.SendAsync("Authenticate", websocketDetails.AccessToken);
await HubConnection.SendAsync("Authenticate", websocketDetails.AccessToken);
}
catch (HttpApiException e)
{
@@ -246,11 +212,6 @@
}
}
private async Task OnAfterConsoleInitialized()
{
await XtermConsole!.Write(InitialConsoleMessage);
}
private async Task Start()
=> await ApiClient.Post($"api/servers/{Server.Id}/start");
@@ -262,9 +223,9 @@
public async ValueTask DisposeAsync()
{
if (WebSocketConnection.State == HubConnectionState.Connected)
await WebSocketConnection.StopAsync();
if (HubConnection.State == HubConnectionState.Connected)
await HubConnection.StopAsync();
await WebSocketConnection.DisposeAsync();
await HubConnection.DisposeAsync();
}
}