Added Card 'RunsOn' Navigation links

RackPeek.Web/Components/Components/ServersListComponent.razor

@@ -19,84 +19,7 @@
             @foreach (var server in _servers)
             {
                 <NavLink href="@($"/resources/hardware/{server.Name}")" class="block">
-                    <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">
-                                @server.Name
-                            </div>
-
-                            @if (server.Ipmi == true)
-                            {
-                                <span class="text-xs text-emerald-400">IPMI</span>
-                            }
-                        </div>
-
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
-
-                            @if (server.Cpus?.Any() == true)
-                            {
-                                <div>
-                                    <div class="text-zinc-400 mb-1">CPU</div>
-                                    @foreach (var cpu in server.Cpus)
-                                    {
-                                        <div class="text-zinc-300">
-                                            @cpu.Model — @cpu.Cores cores / @cpu.Threads threads
-                                        </div>
-                                    }
-                                </div>
-                            }
-
-                            @if (server.Ram is not null)
-                            {
-                                <div>
-                                    <div class="text-zinc-400 mb-1">RAM</div>
-                                    <div class="text-zinc-300">
-                                        @server.Ram.Size GB @server.Ram.Mts MT/s
-                                    </div>
-                                </div>
-                            }
-
-                            @if (server.Drives?.Any() == true)
-                            {
-                                <div>
-                                    <div class="text-zinc-400 mb-1">Drives</div>
-                                    @foreach (var drive in server.Drives)
-                                    {
-                                        <div class="text-zinc-300">
-                                            @drive.Type — @drive.Size GB
-                                        </div>
-                                    }
-                                </div>
-                            }
-
-                            @if (server.Nics?.Any() == true)
-                            {
-                                <div>
-                                    <div class="text-zinc-400 mb-1">NICs</div>
-                                    @foreach (var nic in server.Nics)
-                                    {
-                                        <div class="text-zinc-300">
-                                            @nic.Type — @nic.Speed Gbps (@nic.Ports ports)
-                                        </div>
-                                    }
-                                </div>
-                            }
-
-                            @if (server.Gpus?.Any() == true)
-                            {
-                                <div>
-                                    <div class="text-zinc-400 mb-1">GPU</div>
-                                    @foreach (var gpu in server.Gpus)
-                                    {
-                                        <div class="text-zinc-300">
-                                            @gpu.Model — @gpu.Vram GB VRAM
-                                        </div>
-                                    }
-                                </div>
-                            }
-
-                        </div>
-                    </div>
+                    <ServerCardComponent Server="server" />
                 </NavLink>
             }
         </div>

RackPeek.Web/Components/Components/ServiceCardComponent.razor

@@ -9,9 +9,11 @@
 
         @if (!string.IsNullOrWhiteSpace(Service.RunsOn))
         {
-            <span class="text-xs text-emerald-400">
-                Runs on: @Service.RunsOn
-            </span>
+            <NavLink href="@($"/resources/systems/{Service.RunsOn}")" class="block">
+                <span class="text-xs text-emerald-400">
+                    Runs on: @Service.RunsOn
+                </span>
+            </NavLink>
         }
     </div>
 

RackPeek.Web/Components/Components/SystemCardComponent.razor

@@ -9,9 +9,11 @@
 
         @if (!string.IsNullOrWhiteSpace(System.RunsOn))
         {
-            <span class="text-xs text-emerald-400">
-                Runs on: @System.RunsOn
-            </span>
+            <NavLink href="@($"/resources/hardware/{System.RunsOn}")" class="block">
+                <span class="text-xs text-emerald-400">
+                    Runs on: @System.RunsOn
+                </span>
+            </NavLink>
         }
     </div>
 

RackPeek.Web/Components/Components/SystemsListComponent.razor

@@ -17,68 +17,7 @@
             @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>
+                    <SystemCardComponent System="system" />
                 </NavLink>
             }
         </div>