Started implementing dynamic server tabs

MoonlightServers.Frontend/Models/ServerTab.cs

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

MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/BaseServerTab.razor

@@ -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; }
+}

MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/ConsoleTab.razor

@@ -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);
+    }
+}

MoonlightServers.Frontend/UI/Views/User/Manage.razor

@@ -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
 
@@ -117,49 +118,17 @@
                 </div>
             </div>
         </div>
+        
+        <div class="mt-5">
+            <Tabs NavStyle="true">
+                <Tab Name="Console">
+                    <ConsoleTab Parent="this" Server="Server" State="State" HubConnection="HubConnection" InitialConsoleMessage="@InitialConsoleMessage" />
+                </Tab>
 
-        <div class="mt-5 mx-2 relative">
+                <Tab Name="Testy">
-            <ul class="relative text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
+                    
-
+                </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">
+            </Tabs>
-                    <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>
@@ -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 HubConnection;
-
-    private HubConnection WebSocketConnection;
 
     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)
+                // Update initial message
-                    await XtermConsole.Write(content);
+                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)
+        if (HubConnection.State == HubConnectionState.Connected)
-            await WebSocketConnection.StopAsync();
+            await HubConnection.StopAsync();
 
-        await WebSocketConnection.DisposeAsync();
+        await HubConnection.DisposeAsync();
     }
 }