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

Changed node stats ui

Browse Source
This commit is contained in:
Masu Baumgartner
2024-09-13 14:59:49 +00:00
parent 144267ce15
commit 7659403dc8
2 changed files with 16 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,17 @@
}
else
{
@*
<div class="mt-8 mb-4">
<h2 class="text-base font-semibold leading-7 text-slate-100">
Node overview
</h2>
<p class="mt-1 text-sm leading-6 text-slate-400">
See all important details of this node at one quick look
</p>
</div>
*@
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);
@@ -49,7 +60,7 @@
@foreach (var usage in Status.CpuUsage)
{
<TestC Title="@("Core" + index)" CurrentValue="@usage" MaxValue="100"></TestC>
<ProgressStatCard Title="@("Core #" + index)" CurrentValue="@usage" MaxValue="100"></ProgressStatCard>
index++;
}

63
MoonlightServers.Client/UI/Components/Partials/TestC.razor
View File

@@ -1,63 +0,0 @@
<div class="relative overflow-hidden rounded-lg bg-slate-800 px-4 @(string.IsNullOrEmpty(Icon) ? "pt-3 pb-3" : "pb-5 pt-5") shadow">
<div>
@if (!string.IsNullOrEmpty(Icon))
{
<div class="absolute rounded-md p-3 @(IconColor)">
<div class="h-6 w-6 flex justify-center items-center">
<i class="@(Icon) text-3xl text-white"></i>
</div>
</div>
}
<p class="@(string.IsNullOrEmpty(Icon) ? "ml-2" : "ml-16") truncate text-sm font-medium text-slate-500">@(Title)</p>
</div>
<div class="@(string.IsNullOrEmpty(Icon) ? "ml-2" : "ml-16") flex items-baseline">
<div class="mt-2.5 w-full rounded-full mb-2 h-4 bg-slate-700">
@{
var percent = CalculatePercent();
var percentRounded = Math.Round(percent);
string color;
if (UsePercentColor)
{
if (percentRounded >= 60 && percentRounded < 80)
color = "bg-amber-400";
else if (percentRounded >= 80)
color = "bg-red-400";
else
color = "bg-blue-500";
}
else
color = ProgressColor;
}
<div class="h-4 rounded-full text-center text-white text-xs font-medium @color" style="width: @(percentRounded)%">
@if (ShowPercent)
{
<span>@(percentRounded)%</span>
}
</div>
</div>
</div>
</div>
@code
{
[Parameter] public string Icon { get; set; } = "";
[Parameter] public string IconColor { get; set; } = "bg-indigo-600";
[Parameter] public string Title { get; set; } = "";
[Parameter] public double CurrentValue { get; set; } = 0;
[Parameter] public double MaxValue { get; set; } = 0;
[Parameter] public bool ShowPercent { get; set; } = false;
[Parameter] public bool UsePercentColor { get; set; } = true;
[Parameter] public string ProgressColor { get; set; } = "";
private double CalculatePercent()
{
if (MaxValue <= 0 || CurrentValue <= 0)
return 0;
return CurrentValue * MaxValue / 100;
}
}