Changed node stats ui

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

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

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

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