Addd System / Service pages to WebUI

RackPeek.Web/Components/Components/ServiceCardComponent.razor

@@ -0,0 +1,61 @@
+@using RackPeek.Domain.Resources.Services
+@typeparam TService where TService : Service
+
+<div class="border border-zinc-800 rounded p-4 bg-zinc-900">
+    <div class="flex justify-between items-center mb-3">
+        <div class="text-zinc-100">
+            @Service.Name
+        </div>
+
+        @if (!string.IsNullOrWhiteSpace(Service.RunsOn))
+        {
+            <span class="text-xs text-emerald-400">
+                Runs on: @Service.RunsOn
+            </span>
+        }
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+
+        @if (Service.Network is not null)
+        {
+            @if (!string.IsNullOrWhiteSpace(Service.Network.Ip))
+            {
+                <div>
+                    <div class="text-zinc-400 mb-1">IP</div>
+                    <div class="text-zinc-300">@Service.Network.Ip</div>
+                </div>
+            }
+
+            @if (Service.Network.Port.HasValue)
+            {
+                <div>
+                    <div class="text-zinc-400 mb-1">Port</div>
+                    <div class="text-zinc-300">@Service.Network.Port</div>
+                </div>
+            }
+
+            @if (!string.IsNullOrWhiteSpace(Service.Network.Protocol))
+            {
+                <div>
+                    <div class="text-zinc-400 mb-1">Protocol</div>
+                    <div class="text-zinc-300">@Service.Network.Protocol</div>
+                </div>
+            }
+
+            @if (!string.IsNullOrWhiteSpace(Service.Network.Url))
+            {
+                <div>
+                    <div class="text-zinc-400 mb-1">URL</div>
+                    <div class="text-zinc-300 break-all">@Service.Network.Url</div>
+                </div>
+            }
+        }
+
+    </div>
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public TService Service { get; set; } = default!;
+}

RackPeek.Web/Components/Components/ServicesListComponent.razor

@@ -0,0 +1,35 @@
+@using RackPeek.Domain.Resources.Services
+@inject IServiceRepository ServiceRepository
+
+<PageTitle>Services</PageTitle>
+
+<div class="min-h-screen bg-zinc-950 text-zinc-200 font-mono p-6">
+    @if (_services is null)
+    {
+        <div class="text-zinc-500">loading services…</div>
+    }
+    else if (_services.Count == 0)
+    {
+        <div class="text-zinc-500">no services found</div>
+    }
+    else
+    {
+        <div class="space-y-4">
+            @foreach (var svc in _services)
+            {
+                <NavLink href="@($"/resources/services/{svc.Name}")" class="block">
+                    <ServiceCardComponent TService="Service" Service="svc" />
+                </NavLink>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private IReadOnlyList<Service>? _services;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _services = await ServiceRepository.GetAllAsync();
+    }
+}

RackPeek.Web/Components/Components/SystemCardComponent.razor

@@ -0,0 +1,71 @@
+@using RackPeek.Domain.Resources.SystemResources
+@typeparam TSystem where TSystem : SystemResource
+
+<div class="border border-zinc-800 rounded p-4 bg-zinc-900">
+    <div class="flex justify-between items-center mb-3">
+        <div class="text-zinc-100">
+            @System.Name
+        </div>
+
+        @if (!string.IsNullOrWhiteSpace(System.RunsOn))
+        {
+            <span class="text-xs text-emerald-400">
+                Runs on: @System.RunsOn
+            </span>
+        }
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+
+        @if (!string.IsNullOrWhiteSpace(System.Type))
+        {
+            <div>
+                <div class="text-zinc-400 mb-1">Type</div>
+                <div class="text-zinc-300">@System.Type</div>
+            </div>
+        }
+
+        @if (!string.IsNullOrWhiteSpace(System.Os))
+        {
+            <div>
+                <div class="text-zinc-400 mb-1">OS</div>
+                <div class="text-zinc-300">@System.Os</div>
+            </div>
+        }
+
+        @if (System.Cores.HasValue)
+        {
+            <div>
+                <div class="text-zinc-400 mb-1">Cores</div>
+                <div class="text-zinc-300">@System.Cores</div>
+            </div>
+        }
+
+        @if (System.Ram.HasValue)
+        {
+            <div>
+                <div class="text-zinc-400 mb-1">RAM</div>
+                <div class="text-zinc-300">@System.Ram GB</div>
+            </div>
+        }
+
+        @if (System.Drives?.Any() == true)
+        {
+            <div>
+                <div class="text-zinc-400 mb-1">Drives</div>
+                @foreach (var drive in System.Drives)
+                {
+                    <div class="text-zinc-300">
+                        @drive.Type — @drive.Size GB
+                    </div>
+                }
+            </div>
+        }
+
+    </div>
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public TSystem System { get; set; } = default!;
+}

RackPeek.Web/Components/Components/SystemsListComponent.razor

@@ -0,0 +1,95 @@
+@using RackPeek.Domain.Resources.Hardware.Models
+@using RackPeek.Domain.Resources.SystemResources
+@inject ISystemRepository SystemRepository
+
+<div class="min-h-screen bg-zinc-950 text-zinc-200 font-mono p-6">
+    @if (_systems is null)
+    {
+        <div class="text-zinc-500">loading systems…</div>
+    }
+    else if (_systems.Count == 0)
+    {
+        <div class="text-zinc-500">no systems found</div>
+    }
+    else
+    {
+        <div class="space-y-4">
+            @foreach (var system in _systems)
+            {
+                <NavLink href="@($"/resources/systems/{system.Name}")" class="block">
+                    <div class="border border-zinc-800 rounded p-4 bg-zinc-900 hover:bg-zinc-800 transition-colors">
+                        <div class="flex justify-between items-center mb-3">
+                            <div class="text-zinc-100">
+                                @system.Name
+                            </div>
+                            @if (!string.IsNullOrWhiteSpace(system.RunsOn))
+                            {
+                                <span class="text-xs text-emerald-400">
+                                    Runs on: @system.RunsOn
+                                </span>
+                            }
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+
+                            @if (!string.IsNullOrWhiteSpace(system.Type))
+                            {
+                                <div>
+                                    <div class="text-zinc-400 mb-1">Type</div>
+                                    <div class="text-zinc-300">@system.Type</div>
+                                </div>
+                            }
+
+                            @if (!string.IsNullOrWhiteSpace(system.Os))
+                            {
+                                <div>
+                                    <div class="text-zinc-400 mb-1">OS</div>
+                                    <div class="text-zinc-300">@system.Os</div>
+                                </div>
+                            }
+
+                            @if (system.Cores.HasValue)
+                            {
+                                <div>
+                                    <div class="text-zinc-400 mb-1">Cores</div>
+                                    <div class="text-zinc-300">@system.Cores</div>
+                                </div>
+                            }
+
+                            @if (system.Ram.HasValue)
+                            {
+                                <div>
+                                    <div class="text-zinc-400 mb-1">RAM</div>
+                                    <div class="text-zinc-300">@system.Ram GB</div>
+                                </div>
+                            }
+
+                            @if (system.Drives?.Any() == true)
+                            {
+                                <div>
+                                    <div class="text-zinc-400 mb-1">Drives</div>
+                                    @foreach (var drive in system.Drives)
+                                    {
+                                        <div class="text-zinc-300">
+                                            @drive.Type — @drive.Size GB
+                                        </div>
+                                    }
+                                </div>
+                            }
+
+                        </div>
+                    </div>
+                </NavLink>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private IReadOnlyList<SystemResource>? _systems;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _systems = await SystemRepository.GetAllAsync();
+    }
+}

RackPeek.Web/Components/Layout/MainLayout.razor

@@ -16,6 +16,12 @@
             <NavLink href="/servers/list" class="hover:text-emerald-400" activeClass="text-emerald-400 font-semibold">
                 Servers
             </NavLink>
+            <NavLink href="/systems/list" class="hover:text-emerald-400" activeClass="text-emerald-400 font-semibold">
+                Systems
+            </NavLink>
+            <NavLink href="/services/list" class="hover:text-emerald-400" activeClass="text-emerald-400 font-semibold">
+                Services
+            </NavLink>
         </nav>
     </header>
 

RackPeek.Web/Components/Pages/HardwareTreePage.razor

@@ -45,18 +45,23 @@
                                     {
                                         <li>
                                             <!-- System -->
-                                            <div class="text-zinc-300">
-                                                └─ @system.SystemName
-                                            </div>
+                                            <NavLink href="@($"/resources/systems/{system.SystemName}")" class="block">
+                                                <div class="text-zinc-300">
+                                                    └─ @system.SystemName
+                                                </div>
+                                            </NavLink>
 
                                             @if (system.Services.Any())
                                             {
                                                 <ul class="ml-4 mt-1 space-y-1">
                                                     @foreach (var service in system.Services.OrderBy(s => s))
                                                     {
-                                                        <li class="text-zinc-500">
-                                                            > @service
-                                                        </li>
+                                                        <NavLink href="@($"/resources/services/{service}")" class="block">
+
+                                                            <li class="text-zinc-500">
+                                                                > @service
+                                                            </li>
+                                                        </NavLink>
                                                     }
                                                 </ul>
                                             }

RackPeek.Web/Components/Pages/ServiceDetailsPage.razor

@@ -0,0 +1,43 @@
+@page "/resources/services/{ServiceName}"
+@using RackPeek.Domain.Resources.Hardware
+@using RackPeek.Domain.Resources.Hardware.Models
+@using RackPeek.Domain.Resources.Services
+@using RackPeek.Domain.Resources.SystemResources
+@using RackPeek.Web.Components.Components
+@inject IServiceRepository ServiceRepository
+
+<PageTitle>Service Details</PageTitle>
+
+<div class="min-h-screen bg-zinc-950 text-zinc-200 font-mono p-6">
+    @if (_service is null && !_loading)
+    {
+        <div class="text-zinc-500">Service not found</div>
+    }
+    else if (_loading)
+    {
+        <div class="text-zinc-500">loading service…</div>
+    }
+    else
+    {
+        <h1 class="text-lg text-zinc-100 mb-6">
+            @_service.Name (@_service.Kind)
+        </h1>
+
+        <ServiceCardComponent Service="_service" />
+
+    }
+</div>
+
+@code {
+    [Parameter]
+    public string ServiceName { get; set; } = string.Empty;
+
+    private Service? _service;
+    private bool _loading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _service = await ServiceRepository.GetByNameAsync(ServiceName);
+        _loading = false;
+    }
+}

RackPeek.Web/Components/Pages/ServicesListPage.razor

@@ -0,0 +1,6 @@
+@page "/services/list"
+@using RackPeek.Web.Components.Components
+
+<PageTitle>Services</PageTitle>
+
+<ServicesListComponent/>

RackPeek.Web/Components/Pages/SystemsDetailsPage.razor

@@ -0,0 +1,42 @@
+@page "/resources/systems/{SystemName}"
+@using RackPeek.Domain.Resources.Hardware
+@using RackPeek.Domain.Resources.Hardware.Models
+@using RackPeek.Domain.Resources.SystemResources
+@using RackPeek.Web.Components.Components
+@inject ISystemRepository SystemRepository
+
+<PageTitle>System Details</PageTitle>
+
+<div class="min-h-screen bg-zinc-950 text-zinc-200 font-mono p-6">
+    @if (_system is null && !_loading)
+    {
+        <div class="text-zinc-500">System not found</div>
+    }
+    else if (_loading)
+    {
+        <div class="text-zinc-500">loading system…</div>
+    }
+    else
+    {
+        <h1 class="text-lg text-zinc-100 mb-6">
+            @_system.Name (@_system.Kind)
+        </h1>
+
+        <SystemCardComponent System="_system" />
+
+    }
+</div>
+
+@code {
+    [Parameter]
+    public string SystemName { get; set; } = string.Empty;
+
+    private SystemResource? _system;
+    private bool _loading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _system = await SystemRepository.GetByNameAsync(SystemName);
+        _loading = false;
+    }
+}

RackPeek.Web/Components/Pages/SystemsListPage.razor

@@ -0,0 +1,6 @@
+@page "/systems/list"
+@using RackPeek.Web.Components.Components
+
+<PageTitle>Systems</PageTitle>
+
+<SystemsListComponent/>