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

Refactored frontend to work with the latest mooncore changes

Browse Source
This commit is contained in:
ChiaraBm
2025-07-16 20:46:45 +02:00
parent 383d4bb24b
commit 61253919cf
93 changed files with 3347 additions and 1661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
MoonlightServers.Frontend/UI/Views/Admin/All/Create.razor
View File

@@ -2,11 +2,13 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using Moonlight.Shared.Http.Responses.Admin.Users
@using MoonlightServers.Shared.Http.Requests.Admin.Servers
@using MoonlightServers.Frontend.UI.Components.Servers.CreateServerPartials
@using MoonlightServers.Shared.Http.Responses.Admin.NodeAllocations
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@using MoonlightServers.Shared.Http.Responses.Admin.Stars
@inject HttpApiClient ApiClient
@inject NavigationManager Navigation
@@ -29,13 +31,13 @@
<HandleForm @ref="Form" Model="Request" OnValidSubmit="OnSubmit">
<Tabs>
<Tab Name="General">
<GeneralServerCreate Request="Request" />
<GeneralServerCreate Request="Request" Star="Star" Node="Node" User="Owner" />
</Tab>
<Tab Name="Allocations">
<AllocationsServerCreate Request="Request" />
<AllocationsServerCreate Request="Request" Allocations="Allocations" Node="Node" />
</Tab>
<Tab Name="Variables">
<VariablesServerCreate Request="Request" />
<VariablesServerCreate Request="Request" Star="Star" />
</Tab>
<Tab Name="Advanced">
<AdvancedServerCreate Request="Request" />
@@ -49,6 +51,11 @@
private HandleForm Form;
private CreateServerRequest Request;
private List<NodeAllocationResponse> Allocations = new();
private UserResponse? Owner;
private StarDetailResponse? Star;
private NodeResponse? Node;
protected override void OnInitialized()
{
Request = new();
@@ -56,6 +63,14 @@
private async Task OnSubmit()
{
Request.AllocationIds = Allocations
.Select(x => x.Id)
.ToArray();
Request.StarId = Star?.Id ?? -1;
Request.NodeId = Node?.Id ?? -1;
Request.OwnerId = Owner?.Id ?? -1;
await ApiClient.Post("api/admin/servers", Request);
await ToastService.Success("Successfully created Server");

7
MoonlightServers.Frontend/UI/Views/Admin/All/Index.razor
View File

@@ -3,15 +3,12 @@
@using MoonCore.Blazor.FlyonUi.Alerts
@using MoonCore.Blazor.FlyonUi.DataTables
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@using MoonlightServers.Shared.Http.Responses.Admin.Servers
@using MoonlightServers.Shared.Http.Responses.Admin.Stars
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Dt
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Blazor.FlyonUi.Components
@inject HttpApiClient ApiClient
@inject AlertService AlertService
@@ -67,7 +64,7 @@
</a>
<a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
class="text-danger">
class="text-error">
<i class="icon-trash text-base"></i>
</a>
</div>

45
MoonlightServers.Frontend/UI/Views/Admin/All/Update.razor
View File

@@ -2,12 +2,12 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using Moonlight.Shared.Http.Responses.Admin.Users
@using MoonlightServers.Shared.Http.Requests.Admin.Servers
@using MoonlightServers.Shared.Http.Responses.Admin.Servers
@using MoonlightServers.Frontend.UI.Components.Servers.UpdateServerPartials
@using MoonlightServers.Shared.Http.Responses.Admin.NodeAllocations
@inject HttpApiClient ApiClient
@inject NavigationManager Navigation
@@ -31,16 +31,16 @@
<HandleForm @ref="Form" Model="Request" OnValidSubmit="OnSubmit">
<Tabs>
<Tab Name="General">
<GeneralServerUpdate Request="Request" />
<GeneralServerUpdate Request="Request" Owner="Owner"/>
</Tab>
<Tab Name="Allocations">
<AllocationsServerUpdate Request="Request" Server="Server" />
<AllocationsServerUpdate Request="Request" Server="Server" Allocations="Allocations"/>
</Tab>
<Tab Name="Variables">
<VariablesServerUpdate Request="Request" Server="Server" />
<VariablesServerUpdate Request="Request" Server="Server"/>
</Tab>
<Tab Name="Advanced">
<AdvancedServerUpdate Request="Request" />
<AdvancedServerUpdate Request="Request"/>
</Tab>
</Tabs>
</HandleForm>
@@ -55,14 +55,45 @@
private UpdateServerRequest Request;
private ServerResponse Server;
private List<NodeAllocationResponse> Allocations = new();
private UserResponse Owner;
private async Task Load(LazyLoader _)
{
Server = await ApiClient.GetJson<ServerResponse>($"api/admin/servers/{Id}");
Request = Mapper.Map<UpdateServerRequest>(Server);
Request = new()
{
Name = Server.Name,
AllocationIds = Server.AllocationIds,
OwnerId = Server.OwnerId,
Bandwidth = Server.Bandwidth,
Cpu = Server.Cpu,
Disk = Server.Disk,
DockerImageIndex = Server.DockerImageIndex,
Memory = Server.Memory,
StartupOverride = Server.StartupOverride
};
foreach (var allocationId in Server.AllocationIds)
{
var allocation = await ApiClient.GetJson<NodeAllocationResponse>(
$"api/admin/servers/nodes/{Server.NodeId}/allocations/{allocationId}"
);
Allocations.Add(allocation);
}
Owner = await ApiClient.GetJson<UserResponse>(
$"api/admin/users/{Server.OwnerId}"
);
}
private async Task OnSubmit()
{
Request.AllocationIds = Allocations.Select(x => x.Id).ToArray();
Request.OwnerId = Owner.Id;
await ApiClient.Patch($"api/admin/servers/{Id}", Request);
await ToastService.Success("Successfully updated server");

2
MoonlightServers.Frontend/UI/Views/Admin/Index.razor
View File

@@ -1,6 +1,6 @@
@page "/admin/servers"
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Components
@attribute [Authorize(Policy = "permissions:admin.servers.overview")]

18
MoonlightServers.Frontend/UI/Views/Admin/Nodes/Create.razor
View File

@@ -2,8 +2,6 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using MoonlightServers.Shared.Http.Requests.Admin.Nodes
@@ -28,27 +26,27 @@
<HandleForm @ref="Form" Model="Request" OnValidSubmit="OnSubmit">
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Name</label>
<label class="block text-sm font-medium leading-6 text-base-content">Name</label>
<div class="mt-2">
<input @bind="Request.Name" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.Name" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Fqdn</label>
<label class="block text-sm font-medium leading-6 text-base-content">Fqdn</label>
<div class="mt-2">
<input @bind="Request.Fqdn" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.Fqdn" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">HttpPort</label>
<label class="block text-sm font-medium leading-6 text-base-content">HttpPort</label>
<div class="mt-2">
<input @bind="Request.HttpPort" type="number" autocomplete="off" class="form-input w-full">
<input @bind="Request.HttpPort" type="number" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">FtpPort</label>
<label class="block text-sm font-medium leading-6 text-base-content">FtpPort</label>
<div class="mt-2">
<input @bind="Request.FtpPort" type="number" autocomplete="off" class="form-input w-full">
<input @bind="Request.FtpPort" type="number" autocomplete="off" class="input w-full">
</div>
</div>
</div>

18
MoonlightServers.Frontend/UI/Views/Admin/Nodes/Index.razor
View File

@@ -1,18 +1,16 @@
@page "/admin/servers/nodes"
@using Microsoft.Extensions.Logging
@using MoonCore.Blazor.FlyonUi.Alerts
@using MoonCore.Blazor.FlyonUi.DataTables
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Dt
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Statistics
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes.Sys
@using MoonCore.Blazor.FlyonUi.Components
@inject HttpApiClient ApiClient
@inject NodeService NodeService
@@ -57,7 +55,7 @@
{
if (data == null)
{
<div class="text-danger flex items-center">
<div class="text-error flex items-center">
<i class="icon-server-off text-base me-1"></i>
<span>
API Error
@@ -75,13 +73,13 @@
}
else
{
<div class="text-danger flex items-center">
<div class="text-error flex items-center">
<i class="icon-server-off text-base me-1"></i>
<span class="me-2">
Error
</span>
<a @onclick="() => ShowErrorDetails(context.Id)" @onclick:preventDefault
href="#" class="ms-1 text-gray-600">Details</a>
href="#" class="ms-1 text-base-content/40">Details</a>
</div>
}
}
@@ -108,7 +106,7 @@
{
if (data == null)
{
<div class="flex items-center text-danger">
<div class="flex items-center text-error">
<i class="icon-server-off text-base me-1"></i>
<span>
API Error
@@ -149,7 +147,7 @@
</a>
<a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
class="text-danger">
class="text-error">
<i class="icon-trash text-base"></i>
</a>
</div>
@@ -243,6 +241,6 @@
(data.RoundtripRemoteFailure ? "(Failed at node)" : "(Failed at api server)") +
$" {data.RoundtripError}";
await AlertService.Danger("Node error details", message);
await AlertService.Error("Node error details", message);
}
}

13
MoonlightServers.Frontend/UI/Views/Admin/Nodes/Update.razor
View File

@@ -2,8 +2,6 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using MoonlightServers.Shared.Http.Requests.Admin.Nodes
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@@ -63,7 +61,16 @@
private async Task Load(LazyLoader _)
{
Node = await ApiClient.GetJson<NodeResponse>($"api/admin/servers/nodes/{Id}");
Request = Mapper.Map<UpdateNodeRequest>(Node);
Request = new UpdateNodeRequest()
{
Name = Node.Name,
EnableDynamicFirewall = Node.EnableDynamicFirewall,
EnableTransparentMode = Node.EnableTransparentMode,
Fqdn = Node.Fqdn,
FtpPort = Node.FtpPort,
HttpPort = Node.HttpPort
};
}
private async Task OnSubmit()

10
MoonlightServers.Frontend/UI/Views/Admin/Stars/Create.razor
View File

@@ -3,8 +3,6 @@
@using Microsoft.AspNetCore.Components.Authorization
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using MoonlightServers.Shared.Http.Requests.Admin.Stars
@@ -29,15 +27,15 @@
<HandleForm @ref="Form" Model="Request" OnValidSubmit="OnSubmit">
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Name</label>
<label class="block text-sm font-medium leading-6 text-base-content">Name</label>
<div class="mt-2">
<input @bind="Request.Name" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.Name" type="text" autocomplete="off" class="input w-full">
</div>
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-white">Author</label>
<label class="block text-sm font-medium leading-6 text-base-content">Author</label>
<div class="mt-2">
<input @bind="Request.Author" type="text" autocomplete="off" class="form-input w-full">
<input @bind="Request.Author" type="text" autocomplete="off" class="input w-full">
</div>
</div>
</div>

20
MoonlightServers.Frontend/UI/Views/Admin/Stars/Index.razor
View File

@@ -4,15 +4,11 @@
@using MoonCore.Blazor.FlyonUi.DataTables
@using MoonCore.Blazor.FlyonUi.Helpers
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Shared.Http.Responses.Admin.Stars
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Dt
@using MoonCore.Blazor.Tailwind.Services
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Exceptions
@using MoonCore.Blazor.FlyonUi.Components
@inject HttpApiClient ApiClient
@inject DownloadService DownloadService
@@ -28,7 +24,7 @@
<div class="mb-5">
<PageHeader Title="Stars">
<InputFile id="import-file" hidden="" multiple OnChange="OnImportFiles"/>
<label for="import-file" class="btn btn-tertiary cursor-pointer">
<label for="import-file" class="btn btn-accent cursor-pointer">
<i class="icon-file-up mr-2"></i>
Import
</label>
@@ -58,7 +54,7 @@
<div class="flex justify-end">
@if (!string.IsNullOrEmpty(context.DonateUrl))
{
<a href="@context.DonateUrl" target="_blank" class="text-red-500 mr-3">
<a href="@context.DonateUrl" target="_blank" class="text-accent mr-3">
<i class="icon-heart align-middle"></i>
<span class="align-middle">Donate</span>
</a>
@@ -66,7 +62,7 @@
@if (!string.IsNullOrEmpty(context.UpdateUrl))
{
<a href="#" @onclick:preventDefault class="text-tertiary mr-3">
<a href="#" @onclick:preventDefault class="text-accent mr-3">
<i class="icon-refresh-cw align-middle"></i>
<span class="align-middle">Update</span>
</a>
@@ -82,7 +78,7 @@
</a>
<a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
class="text-danger">
class="text-error">
<i class="icon-trash text-base"></i>
</a>
</div>
@@ -119,7 +115,7 @@
var formattedFileName = star.Name.Replace(" ", "_") + ".json";
await DownloadService.DownloadString(formattedFileName, json);
await DownloadService.Download(formattedFileName, json);
await ToastService.Success($"Successfully exported '{star.Name}'");
}
@@ -141,7 +137,7 @@
{
if (!file.Name.EndsWith(".json"))
{
await ToastService.Danger($"Failed to import '{file.Name}': Only json files are supported");
await ToastService.Error($"Failed to import '{file.Name}': Only json files are supported");
continue;
}
@@ -155,7 +151,7 @@
}
catch (HttpApiException e)
{
await ToastService.Danger($"Failed to import '{file.Name}': {e.Title}");
await ToastService.Error($"Failed to import '{file.Name}': {e.Title}");
}
}

21
MoonlightServers.Frontend/UI/Views/Admin/Stars/Update.razor
View File

@@ -2,8 +2,6 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using MoonlightServers.Shared.Http.Requests.Admin.Stars
@using MoonlightServers.Shared.Http.Responses.Admin.Stars
@@ -75,7 +73,24 @@
private async Task Load(LazyLoader _)
{
Detail = await ApiClient.GetJson<StarDetailResponse>($"api/admin/servers/stars/{Id}");
Request = Mapper.Map<UpdateStarRequest>(Detail);
Request = new()
{
Name = Detail.Name,
AllowDockerImageChange = Detail.AllowDockerImageChange,
Author = Detail.Author,
DefaultDockerImage = Detail.DefaultDockerImage,
DonateUrl = Detail.DonateUrl,
InstallDockerImage = Detail.InstallDockerImage,
InstallScript = Detail.InstallScript,
InstallShell = Detail.InstallShell,
OnlineDetection = Detail.OnlineDetection,
ParseConfiguration = Detail.ParseConfiguration,
RequiredAllocations = Detail.RequiredAllocations,
StartupCommand = Detail.StartupCommand,
StopCommand = Detail.StopCommand,
UpdateUrl = Detail.UpdateUrl,
Version = Detail.Version
};
}
private async Task OnSubmit()

1
MoonlightServers.Frontend/UI/Views/Client/Index.razor
View File

@@ -2,7 +2,6 @@
@using MoonCore.Blazor.FlyonUi.Components
@using MoonlightServers.Frontend.UI.Components.Servers
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Models
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Http.Responses.Client.Servers

27
MoonlightServers.Frontend/UI/Views/Client/Manage.razor
View File

@@ -3,7 +3,6 @@
@using Microsoft.AspNetCore.SignalR.Client
@using MoonCore.Blazor.FlyonUi.Components
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Exceptions
@using MoonCore.Helpers
@using MoonlightServers.Frontend.Interfaces
@@ -21,15 +20,9 @@
<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>
<IconAlert Title="Server not found" Icon="icon-search" Color="text-primary">
The requested server could not be found
</IconAlert>
}
else
{
@@ -39,7 +32,7 @@
var bgColor = State switch
{
ServerState.Installing => "bg-primary",
ServerState.Offline => "bg-danger",
ServerState.Offline => "bg-error",
ServerState.Starting => "bg-warning",
ServerState.Stopping => "bg-warning",
ServerState.Online => "bg-success",
@@ -51,7 +44,7 @@
<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">
<div class="hidden text-sm text-base-content/60 md:flex gap-x-3">
<span>
<i class="icon-sparkles me-0.5 align-middle"></i>
<span class="align-middle">@Server.StarName</span>
@@ -102,14 +95,14 @@
{
if (State == ServerState.Stopping)
{
<WButton CssClasses="btn btn-danger" OnClick="_ => Kill()">
<WButton CssClasses="btn btn-error" OnClick="_ => Kill()">
<i class="icon-bomb me-1 align-middle"></i>
<span class="align-middle">Kill</span>
</WButton>
}
else
{
<WButton CssClasses="btn btn-danger" OnClick="_ => Stop()">
<WButton CssClasses="btn btn-error" OnClick="_ => Stop()">
<i class="icon-squircle me-1 align-middle"></i>
<span class="align-middle">Stop</span>
</WButton>
@@ -117,7 +110,7 @@
}
else
{
<button type="button" class="btn btn-danger" disabled="disabled">
<button type="button" class="btn btn-error" disabled="disabled">
<i class="icon-squircle me-1 align-middle"></i>
<span class="align-middle">Stop</span>
</button>
@@ -135,7 +128,7 @@
<span class="align-middle">Restart</span>
</button>
<button type="button" class="btn btn-danger" disabled="disabled">
<button type="button" class="btn btn-error" disabled="disabled">
<i class="icon-squircle me-1 align-middle"></i>
<span class="align-middle">Stop</span>
</button>
@@ -160,7 +153,7 @@
{
<a href="/servers/@(ServerId)/@(tab.Path)" @onclick:preventDefault
@onclick="() => SwitchTab(tab)"
class="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-gray-700/60 hover:border-gray-600 shadow-sm bg-gray-800 text-gray-400 transition">
class="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-gray-700/60 hover:border-gray-600 shadow-sm bg-gray-800 text-base-content/60 transition">
@tab.Name
</a>
}