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

Merge pull request #131 from Moonlight-Panel/UIFixes

Browse Source 
Added new beta server list ui and added days to uptime formatter
This commit is contained in:
Marcel Baumgartner
2023-05-26 15:21:16 +02:00
committed by GitHub
parent ca05f105cf 800f9fbb50
commit 93328b8b88
2 changed files with 150 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Moonlight/App/Helpers/Formatter.cs
View File

@@ -8,7 +8,7 @@ public static class Formatter
{
TimeSpan t = TimeSpan.FromMilliseconds(uptime);
return $"{t.Hours}h {t.Minutes}m {t.Seconds}s";
return $"{t.Days}d {t.Hours}h {t.Minutes}m {t.Seconds}s";
}
private static double Round(this double d, int decimals)

145
Moonlight/Shared/Views/Servers/Index.razor
View File

@@ -1,5 +1,4 @@
@page "/servers"
@using Moonlight.App.Services.Sessions
@using Moonlight.App.Repositories.Servers
@using Microsoft.EntityFrameworkCore
@using Moonlight.App.Database.Entities
@@ -11,7 +10,95 @@
<LazyLoader Load="Load">
@if (AllServers.Any())
{
@foreach (var server in AllServers)
if (UseSortedServerView)
{
var groupedServers = AllServers
.OrderBy(x => x.Name)
.GroupBy(x => x.Image.Name);
foreach (var groupedServer in groupedServers)
{
<div class="separator separator-content my-15">@(groupedServer.Key)</div>
<div class="card card-body bg-secondary py-0 my-0 mx-0 px-0">
@foreach (var server in groupedServer)
{
<div class="row mx-4 my-4">
<a class="card card-body" href="/server/@(server.Uuid)">
<div class="row">
<div class="col">
<div class="d-flex align-items-center">
<div class="symbol symbol-50px me-3">
<i class="bx bx-md bx-server"></i>
</div>
<div class="d-flex justify-content-start flex-column">
<a href="/server/@(server.Uuid)" class="text-gray-800 text-hover-primary mb-1 fs-5">
@(server.Name)
</a>
<span class="text-gray-400 fw-semibold d-block fs-6">
@(Math.Round(server.Memory / 1024D, 2)) GB / @(Math.Round(server.Disk / 1024D, 2)) GB / @(server.Node.Name) <span class="text-gray-700">- @(server.Image.Name)</span>
</span>
</div>
</div>
</div>
<div class="d-none d-sm-block col my-auto fs-6">
@(server.Node.Fqdn):@(server.MainAllocation.Port)
</div>
<div class="d-none d-sm-block col my-auto fs-6">
@if (StatusCache.ContainsKey(server))
{
var status = StatusCache[server];
switch (status)
{
case "offline":
<span class="text-danger">
<TL>Offline</TL>
</span>
break;
case "stopping":
<span class="text-warning">
<TL>Stopping</TL>
</span>
break;
case "starting":
<span class="text-warning">
<TL>Starting</TL>
</span>
break;
case "running":
<span class="text-success">
<TL>Running</TL>
</span>
break;
case "failed":
<span class="text-gray-400">
<TL>Failed</TL>
</span>
break;
default:
<span class="text-danger">
<TL>Offline</TL>
</span>
break;
}
}
else
{
<span class="text-gray-400">
<TL>Loading</TL>
</span>
}
</div>
</div>
</a>
</div>
}
</div>
}
}
else
{
foreach (var server in AllServers)
{
<div class="row px-5 mb-5">
<a class="card card-body" href="/server/@(server.Uuid)">
@@ -42,28 +129,42 @@
switch (status)
{
case "offline":
<span class="text-danger"><TL>Offline</TL></span>
<span class="text-danger">
<TL>Offline</TL>
</span>
break;
case "stopping":
<span class="text-warning"><TL>Stopping</TL></span>
<span class="text-warning">
<TL>Stopping</TL>
</span>
break;
case "starting":
<span class="text-warning"><TL>Starting</TL></span>
<span class="text-warning">
<TL>Starting</TL>
</span>
break;
case "running":
<span class="text-success"><TL>Running</TL></span>
<span class="text-success">
<TL>Running</TL>
</span>
break;
case "failed":
<span class="text-gray-400"><TL>Failed</TL></span>
<span class="text-gray-400">
<TL>Failed</TL>
</span>
break;
default:
<span class="text-danger"><TL>Offline</TL></span>
<span class="text-danger">
<TL>Offline</TL>
</span>
break;
}
}
else
{
<span class="text-gray-400"><TL>Loading</TL></span>
<span class="text-gray-400">
<TL>Loading</TL>
</span>
}
</div>
</div>
@@ -71,6 +172,7 @@
</div>
}
}
}
else
{
<div class="alert bg-info d-flex flex-column flex-sm-row w-100 p-5">
@@ -84,6 +186,27 @@
</div>
</div>
}
<div class="row mt-7 px-3">
<div class="card">
<div class="card-header">
<div class="card-title">
<span class="badge badge-primary badge-lg">Beta</span>
</div>
</div>
<div class="card-body">
<div class="row">
<label class="col-lg-4 col-form-label fw-semibold fs-6">Sorted server view</label>
<div class="col-lg-8 d-flex align-items-center">
<div class="form-check form-check-solid form-switch form-check-custom fv-row">
<input class="form-check-input w-45px h-30px" type="checkbox" id="sortedServerView" @bind="UseSortedServerView">
<label class="form-check-label" for="sortedServerView"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</LazyLoader>
@code
@@ -94,6 +217,8 @@
private Server[] AllServers;
private readonly Dictionary<Server, string> StatusCache = new();
private bool UseSortedServerView = false;
private Task Load(LazyLoader arg)
{
AllServers = ServerRepository
@@ -127,7 +252,7 @@
return Task.CompletedTask;
}
private void AddStatus(App.Database.Entities.Server server, string status)
private void AddStatus(Server server, string status)
{
lock (StatusCache)
{