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

Improved node list status display. Started overview live status

Browse Source
This commit is contained in:
Masu Baumgartner
2024-09-08 12:52:06 +00:00
parent b8db28b67b
commit 9d9f24a21d
2 changed files with 77 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
MoonlightServers.Client/UI/Components/Partials/NodeOverview.razor
View File

@@ -1,15 +1,81 @@
<div class="mt-5 gap-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"> @using MoonlightServers.Shared.Http.Responses.Admin.Nodes
<StatCard Title="CPU Model" Text="AMD Ryzen 7 1700X Eight-Core Processor" Icon="bi bi-cpu"/>
<StatCard Title="CPU Usage" Text="24,19%" Icon="bi bi-speedometer2"/> @implements IDisposable
<StatCard Title="Memory Usage" Text="21.31 GB / 62.75 GB" Icon="bi bi-memory"/>
<StatCard Title="Host OS" Text="Arch Linux" Icon="bi bi-motherboard"/> @inject HttpApiClient HttpApiClient
<StatCard Title="Uptime" Text="57d 2h 51m 50s" Icon="bi bi-clock-history"/>
<StatCard Title="Containers" Text="11" Icon="bi bi-box-seam"/> <LazyLoader Load="Load">
<StatCard Title="Disk Usage" Text="318.84 GB / 904.12 GB" Icon="bi bi-hdd"/> <div class="mt-5">
<StatCard Title="Version" Text="v2.1 - Galaxy (Release #1)" Icon="bi bi-tag"/> @if (IsOffline)
</div> {
<IconAlert Icon="bi bi-database-x"
Color="text-red-500"
Title="Unable to fetch the node status"
Description="We were unable to fetch the node status. Please check if the node is online and the daemon running">
</IconAlert>
}
else
{
var cpuUsage = Math.Round(Status.CpuUsage.Average(x => x), 2) + "%";
var memoryUsage = $"{Formatter.FormatSize((long)(Status.MemoryTotal - Status.MemoryAvailable))} / {Formatter.FormatSize((long)Status.MemoryTotal)}";
var uptime = Formatter.FormatUptime(Status.Uptime);
var diskUsage = $"{Formatter.FormatSize((long)Status.DiskFree)} / {Formatter.FormatSize((long)Status.DiskTotal)}";
<div class="mt-5 gap-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
<StatCard Title="CPU Model" Text="@Status.CpuModel" Icon="bi bi-cpu"/>
<StatCard Title="CPU Usage" Text="@cpuUsage" Icon="bi bi-speedometer2"/>
<StatCard Title="Memory Usage" Text="@memoryUsage" Icon="bi bi-memory"/>
<StatCard Title="Host OS" Text="Arch Linux" Icon="bi bi-motherboard"/>
<StatCard Title="Uptime" Text="@uptime" Icon="bi bi-clock-history"/>
<StatCard Title="Containers" Text="11" Icon="bi bi-box-seam"/>
<StatCard Title="Disk Usage" Text="@diskUsage" Icon="bi bi-hdd"/>
<StatCard Title="Version" Text="v2.1 - Galaxy (Release #1)" Icon="bi bi-tag"/>
</div>
}
</div>
</LazyLoader>
@code @code
{ {
[Parameter] public int NodeId { get; set; } [Parameter] public int NodeId { get; set; }
private bool IsOffline = false;
private bool KeepRefreshing = true;
private StatusNodeResponse Status;
private async Task Load(LazyLoader arg)
{
await UpdateStatus();
Task.Run(async () =>
{
while (KeepRefreshing)
{
await UpdateStatus();
await InvokeAsync(StateHasChanged);
await Task.Delay(TimeSpan.FromSeconds(1));
}
});
}
private async Task UpdateStatus()
{
IsOffline = false;
try
{
Status = await HttpApiClient.GetJson<StatusNodeResponse>($"admin/servers/nodes/{NodeId}/status");
}
catch (Exception)
{
IsOffline = true;
}
}
public void Dispose()
{
KeepRefreshing = false;
}
} }

2
MoonlightServers.Client/UI/Views/Admin/Nodes.razor
View File

@@ -51,7 +51,7 @@
<div> <div>
<i class="bi bi-cpu text-lg text-slate-400 mr-1"></i> <i class="bi bi-cpu text-lg text-slate-400 mr-1"></i>
<span class="text-white"> <span class="text-white">
@(response.CpuUsage.Average(x => x))% @(Math.Round(response.CpuUsage.Average(x => x), 2))%
</span> </span>
</div> </div>
<div> <div>