Started adding cpu core usage visualisation

MoonlightServers.Client/UI/Components/Partials/NodeOverview.razor

@@ -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)
         {

MoonlightServers.Client/UI/Components/Partials/TestC.razor

@@ -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;
+    }
+}