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

Started adding stats to node overview

Browse Source
This commit is contained in:
Masu Baumgartner
2024-09-08 13:46:17 +02:00
parent 6d4e1cdaaf
commit b8db28b67b
1 changed files with 115 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
MoonlightServers.Client/UI/Views/Admin/Nodes.razor
View File

@@ -19,24 +19,81 @@
TUpdateForm="UpdateNodeRequest"
OnConfigure="OnConfigure">
<View Context="ViewContext">
<SmartColumn TItem="DetailNodeResponse" Field="@(x => x.Id)" Title="Id" />
<SmartColumn TItem="DetailNodeResponse" Field="@(x => x.Id)" Title="Id"/>
<SmartColumn TItem="DetailNodeResponse" Field="@(x => x.Name)" Title="Name">
<Template>
<a class="text-blue-500" href="#" @onclick:preventDefault @onclick="() => ViewContext.LaunchDetails(context)">@context.Name</a>
</Template>
</SmartColumn>
<SmartColumn TItem="DetailNodeResponse" Field="@(x => x.Fqdn)" Title="FQDN" />
<SmartColumn TItem="DetailNodeResponse" Field="@(x => x.Fqdn)" Title="FQDN"/>
<SmartColumn TItem="DetailNodeResponse" Field="@(x => x.Id)">
<Template>
<div class="flex justify-between">
@{
NodeFetchState? fetchState;
lock (StatusCache)
fetchState = StatusCache.ContainsKey(context.Id) ? StatusCache[context.Id] : null;
}
@if (fetchState == null)
{
<div class="text-slate-400">Loading status...</div>
}
else if (fetchState.Response != null)
{
var response = fetchState.Response!;
<div class="text-green-500">
<i class="mr-1 align-middle text-lg bi bi-check-circle-fill text-green-500"></i>
<span>Online</span>
</div>
<div>
<i class="bi bi-cpu text-lg text-slate-400 mr-1"></i>
<span class="text-white">
@(response.CpuUsage.Average(x => x))%
</span>
</div>
<div>
<i class="bi bi-memory text-lg text-slate-400 mr-1"></i>
<span class="text-white">
@Formatter.FormatSize((long)(response.MemoryTotal - response.MemoryAvailable))
<span>/</span>
@Formatter.FormatSize((long)response.MemoryTotal)
</span>
</div>
<div>
<i class="bi bi-hdd text-lg text-slate-400 mr-1"></i>
<span class="text-white">
@Formatter.FormatSize((long)(response.DiskTotal - response.DiskFree))
<span>/</span>
@Formatter.FormatSize((long)response.DiskTotal)
</span>
</div>
}
else if(fetchState.Exception != null)
{
<div class="text-white">
<i class="mr-1 align-middle text-lg bi bi-exclamation-triangle-fill text-red-500"></i>
<span class="mr-1">Offline:</span>
@fetchState.Exception.Message
</div>
}
</div>
</Template>
</SmartColumn>
</View>
<DetailView>
<SmartTabs>
<SmartTab Name="Overview">
<NodeOverview NodeId="@context.Id" />
<NodeOverview NodeId="@context.Id"/>
</SmartTab>
<SmartTab Name="Allocations">
<AllocationEditor NodeId="@context.Id" />
<AllocationEditor NodeId="@context.Id"/>
</SmartTab>
<SmartTab Name="Logs">
<NodeLogs NodeId="@context.Id" />
<NodeLogs NodeId="@context.Id"/>
</SmartTab>
</SmartTabs>
</DetailView>
@@ -45,10 +102,51 @@
@code
{
private readonly Dictionary<int, NodeFetchState> StatusCache = new();
private void OnConfigure(CrudOptions<DetailNodeResponse, CreateNodeRequest, UpdateNodeRequest> options)
{
options.Loader = async (page, pageSize) =>
await HttpApiClient.GetJson<PagedResponse<DetailNodeResponse>>($"admin/servers/nodes?page={page}&pageSize={pageSize}");
{
var response = await HttpApiClient
.GetJson<PagedResponse<DetailNodeResponse>>($"admin/servers/nodes?page={page}&pageSize={pageSize}");
lock (StatusCache)
StatusCache.Clear();
Task.Run(async () =>
{
foreach (var node in response.Items)
{
try
{
var status = await HttpApiClient.GetJson<StatusNodeResponse>($"admin/servers/nodes/{node.Id}/status");
lock (StatusCache)
{
StatusCache.Add(node.Id, new()
{
Response = status
});
}
}
catch (Exception e)
{
lock (StatusCache)
{
StatusCache.Add(node.Id, new()
{
Exception = e
});
}
}
await InvokeAsync(StateHasChanged);
}
});
return response;
};
options.CreateFunction = async request => await HttpApiClient.Post("admin/servers/nodes", request);
options.UpdateFunction = async (request, item) => await HttpApiClient.Patch($"admin/servers/nodes/{item.Id}", request);
@@ -104,4 +202,10 @@
.AddProperty(x => x.SslEnabled);
};
}
class NodeFetchState
{
public StatusNodeResponse? Response { get; set; }
public Exception? Exception { get; set; }
}
}