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

Started adding cpu core usage visualisation

Browse Source
This commit is contained in:
Masu Baumgartner
2024-09-11 16:57:47 +00:00
parent 80290564d0
commit 144267ce15
2 changed files with 90 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
@using System.Text.Json
@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
@implements IDisposable
@@ -5,7 +6,7 @@
@inject HttpApiClient HttpApiClient
<LazyLoader Load="Load">
<div class="mt-5">
<div class="mt-8">
@if (IsOffline)
{
<IconAlert Icon="bi bi-database-x"
@@ -19,7 +20,7 @@
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)}";
var diskUsage = $"{Formatter.FormatSize((long)(Status.DiskTotal - 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"/>
@@ -31,6 +32,28 @@
<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 class="my-4">
<h2 class="text-base font-semibold leading-7 text-slate-100">
CPU Cores
</h2>
<p class="mt-1 text-sm leading-6 text-slate-400">
View the nodes cpu usage in detail
</p>
</div>
<div class="mt-5 gap-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5">
@{
int index = 1;
}
@foreach (var usage in Status.CpuUsage)
{
<TestC Title="@("Core" + index)" CurrentValue="@usage" MaxValue="100"></TestC>
index++;
}
</div>
}
</div>
</LazyLoader>
@@ -67,6 +90,8 @@
try
{
Status = await HttpApiClient.GetJson<StatusNodeResponse>($"admin/servers/nodes/{NodeId}/status");
Console.WriteLine(JsonSerializer.Serialize(Status));
}
catch (Exception)
{

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

@@ -0,0 +1,63 @@
<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;
}
}