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

Merge pull request #419 from Moonlight-Panel/v2_ModularUiImprovements

Browse Source 
V2 modular UI improvements
This commit is contained in:
Masu Baumgartner
2024-06-09 02:03:29 +02:00
committed by GitHub
parent ebe1c0b2df ac5890f115
commit b1854c1a30
12 changed files with 189 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Moonlight/Core/Models/Abstractions/UiComponent.cs
View File

@@ -7,4 +7,6 @@ public class UiComponent
public required RenderFragment Component { get; set; }
public int Index { get; set; } = 0;
public int RequiredPermissionLevel { get; set; } = 0;
}

4
Moonlight/Core/UI/Components/Cards/AdminUserCard.razor
View File

@@ -11,9 +11,9 @@
private int UserCount;
protected override async Task OnInitializedAsync()
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
UserCount = UserRepository.Get().Count();
}
}

15
Moonlight/Core/UI/Views/Admin/Index.razor
View File

@@ -1,31 +1,34 @@
@page "/admin"
@using MoonCore.Abstractions
@using Moonlight.Core.Database.Entities
@using Moonlight.Core.Interfaces
@using Moonlight.Core.Interfaces.Ui.Admin
@using Moonlight.Core.Models.Abstractions
@using Moonlight.Core.Services
@using Moonlight.Features.Servers.Entities
@inject PluginService PluginService
@inject IdentityService IdentityService
@attribute [RequirePermission(999)]
<LazyLoader Load="Load">
<div class="row mb-8">
@foreach(var column in Columns.OrderBy(x => x.Index))
<div class="row mb-8 gap-4">
@foreach (var column in Columns.OrderBy(x => x.Index))
{
if (column.RequiredPermissionLevel <= IdentityService.CurrentUser.Permissions)
{
<div class="col-12 col-lg-6 col-xl">
@column.Component
</div>
}
}
</div>
@foreach (var component in Components.OrderBy(x => x.Index))
{
if (component.RequiredPermissionLevel <= IdentityService.CurrentUser.Permissions)
{
<div class="mb-4">
@component.Component
</div>
}
}
</LazyLoader>

4
Moonlight/Core/UI/Views/Index.razor
View File

@@ -4,14 +4,18 @@
@using Moonlight.Core.Services
@inject PluginService PluginService
@inject IdentityService IdentityService
<LazyLoader Load="Load">
@foreach (var component in Components.OrderBy(x => x.Index))
{
if (component.RequiredPermissionLevel <= IdentityService.CurrentUser.Permissions)
{
<div class="mb-4">
@component.Component
</div>
}
}
</LazyLoader>
@code

3
Moonlight/Features/Servers/Implementations/UI/Admin/AdminColumns/ServerCount.cs
View File

@@ -11,7 +11,8 @@ public class ServerCount : IAdminDashboardColumn
{
var res = new UiComponent()
{
Component = ComponentHelper.FromType<AdminServersCard>()
Component = ComponentHelper.FromType<AdminServersCard>(),
RequiredPermissionLevel = 5000
};
return Task.FromResult(res);

20
Moonlight/Features/Servers/Implementations/UI/Admin/AdminComponents/NodeOverview.cs Normal file
View File

@@ -0,0 +1,20 @@
using MoonCoreUI.Helpers;
using Moonlight.Core.Interfaces.Ui.Admin;
using Moonlight.Core.Models.Abstractions;
using Moonlight.Features.Servers.UI.Components.Cards;
namespace Moonlight.Features.Servers.Implementations.UI.Admin.AdminComponents;
public class NodeOverview : IAdminDashboardComponent
{
public Task<UiComponent> Get()
{
var res = new UiComponent()
{
Component = ComponentHelper.FromType<AdminNodesComponent>(),
RequiredPermissionLevel = 5001
};
return Task.FromResult(res);
}
}

20
Moonlight/Features/Servers/Implementations/UI/UserDashboard/Components/UserDashboardServerCount.cs Normal file
View File

@@ -0,0 +1,20 @@
using MoonCoreUI.Helpers;
using Moonlight.Core.Interfaces.UI.User;
using Moonlight.Core.Models.Abstractions;
using Moonlight.Features.Servers.UI.Components.Cards;
namespace Moonlight.Features.Servers.Implementations.UI.UserDashboard.Components;
public class UserDashboardServerCount : IUserDashboardComponent
{
public Task<UiComponent> Get()
{
var res = new UiComponent()
{
Component = ComponentHelper.FromType<Servers.UI.Components.Cards.UserDashboardServerCount>(),
Index = int.MinValue + 100
};
return Task.FromResult(res);
}
}

7
Moonlight/Features/Servers/ServersFeature.cs
View File

@@ -3,6 +3,7 @@ using MoonCore.Services;
using Moonlight.Core.Configuration;
using Moonlight.Core.Interfaces;
using Moonlight.Core.Interfaces.Ui.Admin;
using Moonlight.Core.Interfaces.UI.User;
using Moonlight.Core.Models.Abstractions.Feature;
using Moonlight.Core.Services;
using Moonlight.Features.Servers.Actions;
@@ -10,9 +11,11 @@ using Moonlight.Features.Servers.Configuration;
using Moonlight.Features.Servers.Http.Middleware;
using Moonlight.Features.Servers.Implementations.Diagnose;
using Moonlight.Features.Servers.Implementations.UI.Admin.AdminColumns;
using Moonlight.Features.Servers.Implementations.UI.Admin.AdminComponents;
using Moonlight.Features.Servers.Models.Enums;
using Moonlight.Features.Servers.Services;
using Moonlight.Features.Servers.UI.Components.Cards;
using UserDashboardServerCount = Moonlight.Features.Servers.Implementations.UI.UserDashboard.Components.UserDashboardServerCount;
namespace Moonlight.Features.Servers;
@@ -100,6 +103,10 @@ public class ServersFeature : MoonlightFeature
await pluginService.RegisterImplementation<IDiagnoseAction>(new NodesDiagnoseAction());
await pluginService.RegisterImplementation<IAdminDashboardColumn>(new ServerCount());
await pluginService.RegisterImplementation<IAdminDashboardComponent>(new NodeOverview());
await pluginService.RegisterImplementation<IUserDashboardComponent>(new UserDashboardServerCount());
}
public override Task OnUiInitialized(UiInitContext context)

70
Moonlight/Features/Servers/UI/Components/Cards/AdminNodesComponent.razor Normal file
View File

@@ -0,0 +1,70 @@
@using MoonCore.Abstractions
@using Moonlight.Features.Servers.Api.Resources
@using Moonlight.Features.Servers.Entities
@using Moonlight.Features.Servers.Services
@inject NodeService NodeService
@inject Repository<ServerNode> NodeRepository
<div class="card">
<div class="card-body">
<h4 class="card-title mb-4 d-flex align-items-center gap-3">
<i class="bx bx-md bx-microchip text-primary"></i>
<span>Nodes Overview</span>
</h4>
<div class="row mx-2">
<LazyLoader Load="Load">
@if (Nodes.Any())
{
foreach (var node in Nodes)
{
<div class="col-12 col-md-6 col-3">
<a href="/admin/servers/nodes/view/@node.Item1.Id">
<div class="row">
<span class="col-auto d-flex align-items-center">
<span class="badge text-bg-@(node.Item2 == null ? "danger" : "success") text-capitalize">@(node.Item2 == null ? "offline" : "online")</span>
</span>
<div class="col">
<span class="fs-5 fw-bold d-block text-white">@node.Item1.Name</span>
<span class="text-muted text-lowercase fs-6 d-block">@node.Item1.Fqdn</span>
</div>
</div>
</a>
</div>
}
}
else
{
<span class="text-muted fs-4">You dont have any nodes.</span>
}
</LazyLoader>
</div>
</div>
</div>
@code {
private List<Tuple<ServerNode, SystemStatus?>> Nodes = new();
private async Task Load(LazyLoader arg)
{
foreach (var node in NodeRepository.Get().ToList())
{
SystemStatus? nodeStatus = null;
await arg.SetText("Fetching Nodes...");
try
{
nodeStatus = await NodeService.GetStatus(node);
}
catch
{
// Ignored
}
Nodes.Add(new Tuple<ServerNode, SystemStatus?>(node, nodeStatus));
}
}
}

3
Moonlight/Features/Servers/UI/Components/Cards/AdminServersCard.razor
View File

@@ -11,8 +11,9 @@
private int ServerCount;
protected override async Task OnInitializedAsync()
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
ServerCount = ServerRepository.Get().Count();
}

40
Moonlight/Features/Servers/UI/Components/Cards/UserDashboardServerCount.razor Normal file
View File

@@ -0,0 +1,40 @@
@using Microsoft.EntityFrameworkCore
@using MoonCore.Abstractions
@using Moonlight.Core.Services
@using Moonlight.Features.Servers.Entities
@inject Repository<Server> ServerRepository
@inject Repository<ServerNetwork> NetworkRepository
@inject IdentityService IdentityService
<div class="row mt-8">
<div class="col-12 col-md-6 mb-4">
<a href="/servers">
<StatCard Icon="bx-server" Description="Servers" Value="@ServerCount.ToString()">
</StatCard>
</a>
</div>
<div class="col-12 col-md-6">
<a href="/servers/network">
<StatCard Icon="bx-network-chart" Description="Networks" Value="@NetworksCount.ToString()">
</StatCard>
</a>
</div>
</div>
@code {
private int ServerCount = 0;
private int NetworksCount = 0;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
ServerCount = await ServerRepository.Get().Where(x => x.Owner == IdentityService.CurrentUser).CountAsync();
NetworksCount = await NetworkRepository.Get().Where(x => x.User == IdentityService.CurrentUser).CountAsync();
}
}
}

2
Moonlight/Moonlight.csproj
View File

@@ -53,7 +53,6 @@
<Folder Include="Core\Database\Migrations\" />
<Folder Include="Core\Http\Requests\" />
<Folder Include="Core\Http\Resources\" />
<Folder Include="Core\Implementations\UI\Admin\AdminComponents\" />
<Folder Include="Core\UI\Components\Forms\" />
<Folder Include="Features\Dummy\Configuration\" />
<Folder Include="Features\Dummy\Entities\" />
@@ -75,7 +74,6 @@
<Folder Include="Features\FileManager\Http\Requests\" />
<Folder Include="Features\FileManager\Http\Resources\" />
<Folder Include="Features\Servers\Http\Resources\" />
<Folder Include="Features\Servers\Implementations\UI\Admin\" />
<Folder Include="storage\" />
<Folder Include="Styles\" />
<Folder Include="wwwroot\css\" />