Refactored frontend to work with the latest mooncore changes

This commit is contained in:
2025-07-16 20:46:45 +02:00
parent 383d4bb24b
commit 61253919cf
93 changed files with 3347 additions and 1661 deletions

View File

@@ -2,19 +2,23 @@
@using MoonlightServers.Shared.Http.Requests.Admin.Nodes
<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">Enable Transparent
Mode</label>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-base-content">Enable Transparent
Mode
</label>
<div class="mt-2">
<div class="flex items-center">
<Switch @bind-Value="Request.EnableTransparentMode" />
<Switch @bind-Value="Request.EnableTransparentMode"/>
</div>
</div>
</div>
<div class="sm:col-span-2"><label class="block text-sm font-medium leading-6 text-white">Enable Dynamic
Firewall</label>
<div class="sm:col-span-2">
<label class="block text-sm font-medium leading-6 text-base-content">
Enable Dynamic Firewall
</label>
<div class="mt-2">
<div class="flex items-center">
<Switch @bind-Value="Request.EnableDynamicFirewall" />
<Switch @bind-Value="Request.EnableDynamicFirewall"/>
</div>
</div>
</div>

View File

@@ -2,11 +2,7 @@
@using MoonCore.Blazor.FlyonUi.DataTables
@using MoonCore.Blazor.FlyonUi.Modals
@using MoonCore.Blazor.FlyonUi.Toasts
@using MoonCore.Blazor.Tailwind.Alerts
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@using MoonCore.Blazor.Tailwind.Dt
@using MoonCore.Blazor.Tailwind.Modals
@using MoonCore.Blazor.Tailwind.Toasts
@using MoonCore.Helpers
@using MoonCore.Models
@using MoonlightServers.Frontend.UI.Components.Nodes.Modals
@@ -21,15 +17,14 @@
<div class="grid grid-cols-1 md:grid-cols-3 md:gap-x-5">
<div class="col-span-1">
<div class="card">
<div
class="card-header card-header bg-gray-700 rounded-t-lg text-gray-500 bg-opacity-50 border-0 py-2 text-base font-semibold">
<span class="card-title">Actions</span>
<div class="card-header">
Actions
</div>
<div class="card-body">
<div class="flex flex-col gap-y-3">
<button @onclick="AddAllocation" class="btn btn-primary">Create</button>
<button @onclick="AddAllocationRange" class="btn btn-tertiary">Create multiple</button>
<button @onclick="DeleteAllAllocations" class="btn btn-danger">Delete all</button>
<button type="button" @onclick="AddAllocation" class="btn btn-primary">Create</button>
<button type="button" @onclick="AddAllocationRange" class="btn btn-accent">Create multiple</button>
<button type="button" @onclick="DeleteAllAllocations" class="btn btn-error">Delete all</button>
</div>
</div>
</div>
@@ -37,19 +32,21 @@
<div class="col-span-1 md:col-span-2 -mb-3">
<DataTable @ref="Table" TItem="NodeAllocationResponse">
<Configuration>
<Pagination TItem="NodeAllocationResponse" ItemSource="LoadData" />
<Pagination TItem="NodeAllocationResponse" ItemSource="LoadData"/>
<DataTableColumn TItem="NodeAllocationResponse" Field="@(x => x.IpAddress)" Name="IP Address"/>
<DataTableColumn TItem="NodeAllocationResponse" Field="@(x => x.Port)" Name="Port"/>
<DataTableColumn TItem="NodeAllocationResponse">
<ColumnTemplate>
<div class="flex justify-end items-center">
<a @onclick="() => UpdateAllocation(context)" @onclick:preventDefault href="#"
<a @onclick="() => UpdateAllocation(context)"
@onclick:preventDefault href="#"
class="text-primary mr-2 sm:mr-3">
<i class="icon-pencil text-base"></i>
</a>
<a @onclick="() => DeleteAllocation(context)" @onclick:preventDefault href="#"
class="text-danger">
<a @onclick="() => DeleteAllocation(context)"
@onclick:preventDefault href="#"
class="text-error">
<i class="icon-trash text-base"></i>
</a>
</div>
@@ -83,10 +80,7 @@
await Table.Refresh();
};
await ModalService.Launch<CreateMultipleAllocationModal>(parameters =>
{
parameters.Add("OnSubmit", onSubmit);
});
await ModalService.Launch<CreateMultipleAllocationModal>(parameters => { parameters.Add("OnSubmit", onSubmit); });
}
private async Task AddAllocation()
@@ -133,7 +127,7 @@
}
);
}
private async Task DeleteAllAllocations()
{
await AlertService.ConfirmDanger(

View File

@@ -2,26 +2,26 @@
<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">Http Port</label>
<label class="block text-sm font-medium leading-6 text-base-content">Http Port</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">Ftp Port</label>
<div class="sm:col-span-2"><label class="block text-sm font-medium leading-6 text-base-content">Ftp Port</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>

View File

@@ -1,7 +1,6 @@
@using Microsoft.Extensions.Logging
@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.Frontend.Services
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@@ -22,8 +21,8 @@
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<div class="col-span-1 card card-body">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-200">
@Math.Round(Statistics.Cpu.Usage, 2)%
<p class="text-xl font-semibold text-base-content">
@(Math.Round(Statistics.Cpu.Usage, 2))%
</p>
<i class="icon-cpu text-4xl text-primary"></i>
</div>
@@ -36,10 +35,10 @@
<div class="col-span-1 card card-body">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-200">
@Formatter.FormatSize(Statistics.Memory.Total - Statistics.Memory.Available)
<p class="text-xl font-semibold text-base-content">
@(Formatter.FormatSize(Statistics.Memory.Total - Statistics.Memory.Available))
/
@Formatter.FormatSize(Statistics.Memory.Total)
@(Formatter.FormatSize(Statistics.Memory.Total))
</p>
<i class="icon-memory-stick text-4xl text-primary"></i>
</div>
@@ -50,10 +49,10 @@
<div class="col-span-1 card card-body">
<div class="flex justify-between">
<div class="text-xl font-semibold text-slate-200">
@Formatter.FormatSize(Statistics.Memory.SwapTotal - Statistics.Memory.SwapFree)
<div class="text-xl font-semibold text-base-content">
@(Formatter.FormatSize(Statistics.Memory.SwapTotal - Statistics.Memory.SwapFree))
/
@Formatter.FormatSize(Statistics.Memory.SwapTotal)
@(Formatter.FormatSize(Statistics.Memory.SwapTotal))
</div>
<i class="icon-shapes text-4xl text-primary"></i>
</div>
@@ -81,9 +80,8 @@
<span>#@(i)</span>
</div>
<div class="grow">
<div class="progress bg-gray-750">
<div style="width: @(usage)%"
class="progress-bar h-3 @(GetBackgroundColorByPercent(percentRounded))"></div>
<div class="progress h-2" role="progressbar">
<div class="progress-bar transition-all duration-300 ease-in-out @(GetBackgroundColorByPercent(percentRounded))" style="width: @(usage)%"></div>
</div>
</div>
</div>
@@ -105,9 +103,8 @@
<div class="col-span-1 card card-body">
<div class="flex items-center">
<div class="grow">
<div class="progress bg-gray-750">
<div style="width: @(usedPercent)%"
class="progress-bar h-3 @(GetBackgroundColorByPercent(usedPercent))"></div>
<div class="progress h-2" role="progressbar">
<div class="progress-bar transition-all duration-300 ease-in-out @(GetBackgroundColorByPercent(usedPercent))" style="width: @(usedPercent)%"></div>
</div>
</div>
</div>
@@ -134,7 +131,7 @@
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<div class="col-span-1 card card-body">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-200">
<p class="text-xl font-semibold text-base-content">
@Formatter.FormatSize(DockerStatistics.ImagesUsed) (@Formatter.FormatSize(DockerStatistics.ImagesReclaimable) unused)
</p>
<i class="icon-gallery-horizontal-end text-4xl text-primary"></i>
@@ -146,7 +143,7 @@
<div class="col-span-1 card card-body">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-200">
<p class="text-xl font-semibold text-base-content">
@Formatter.FormatSize(DockerStatistics.ContainersUsed) ( @Formatter.FormatSize(DockerStatistics.ContainersReclaimable) unused)
</p>
<i class="icon-container text-4xl text-primary"></i>
@@ -158,7 +155,7 @@
<div class="col-span-1 card card-body">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-200">
<p class="text-xl font-semibold text-base-content">
@Formatter.FormatSize(DockerStatistics.BuildCacheUsed) (@Formatter.FormatSize(DockerStatistics.BuildCacheReclaimable) unused)
</p>
<i class="icon-hard-hat text-4xl text-primary"></i>
@@ -199,7 +196,7 @@
catch (Exception e)
{
Logger.LogWarning("An error occured while fetching status update: {e}", e);
await ToastService.Danger("Unable to fetch status update", e.Message);
await ToastService.Error("Unable to fetch status update", e.Message);
}
}
@@ -210,7 +207,7 @@
else if (percent < 80)
return "bg-warning";
else
return "bg-danger";
return "bg-error";
}
public void Dispose()