From 9d9f24a21d237aa36f046736019c546031d1f388 Mon Sep 17 00:00:00 2001
From: Masu Baumgartner <marcel.kbkm@gmail.com>
Date: Sun, 8 Sep 2024 12:52:06 +0000
Subject: [PATCH] Improved node list status display. Started overview live
 status

---
 .../UI/Components/Partials/NodeOverview.razor | 86 ++++++++++++++++---
 .../UI/Views/Admin/Nodes.razor                |  2 +-
 2 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/MoonlightServers.Client/UI/Components/Partials/NodeOverview.razor b/MoonlightServers.Client/UI/Components/Partials/NodeOverview.razor
index 4656be1..b524dbe 100644
--- a/MoonlightServers.Client/UI/Components/Partials/NodeOverview.razor
+++ b/MoonlightServers.Client/UI/Components/Partials/NodeOverview.razor
@@ -1,15 +1,81 @@
-<div class="mt-5 gap-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-    <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"/>
-    <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"/>
-    <StatCard Title="Uptime" Text="57d 2h 51m 50s" Icon="bi bi-clock-history"/>
-    <StatCard Title="Containers" Text="11" Icon="bi bi-box-seam"/>
-    <StatCard Title="Disk Usage" Text="318.84 GB / 904.12 GB" Icon="bi bi-hdd"/>
-    <StatCard Title="Version" Text="v2.1 - Galaxy (Release #1)" Icon="bi bi-tag"/>
-</div>
+@using MoonlightServers.Shared.Http.Responses.Admin.Nodes
+
+@implements IDisposable
+
+@inject HttpApiClient HttpApiClient
+
+<LazyLoader Load="Load">
+    <div class="mt-5">
+        @if (IsOffline)
+        {
+            <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
 {
     [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;
+    }
 }
\ No newline at end of file
diff --git a/MoonlightServers.Client/UI/Views/Admin/Nodes.razor b/MoonlightServers.Client/UI/Views/Admin/Nodes.razor
index acf37b5..298c6b3 100644
--- a/MoonlightServers.Client/UI/Views/Admin/Nodes.razor
+++ b/MoonlightServers.Client/UI/Views/Admin/Nodes.razor
@@ -51,7 +51,7 @@
                             <div>
                                 <i class="bi bi-cpu text-lg text-slate-400 mr-1"></i>
                                 <span class="text-white">
-                                    @(response.CpuUsage.Average(x => x))%
+                                    @(Math.Round(response.CpuUsage.Average(x => x), 2))%
                                 </span>
                             </div>
                             <div>