Merge pull request #69 from Timmoth/WebUi-Delete-Resources

Added ability to delete resources in the WebUI

RackPeek.Web/Components/Hardware/HardwareDetailsPage.razor

@@ -33,7 +33,7 @@
 
         @if (_hardware is Server server)
         {
-            <ServerCardComponent Server="server"/>
+            <ServerCardComponent Server="server" OnDeleted="Callback"/>
         }
         else if (_hardware is Desktop desktop)
         {
@@ -91,4 +91,17 @@
     }
 
 
+    private async Task Callback(string obj)
+    {
+        _loading = true;
+        _hardware = await HardwareRepository.GetByNameAsync(HardwareName);
+        _tree = null;
+        if (!string.IsNullOrEmpty(_hardware?.Name))
+        {
+            _tree = await GetHardwareSystemTreeUseCase.ExecuteAsync(_hardware?.Name!);
+        }
+
+        _loading = false;
+    }
+
 }

RackPeek.Web/Components/Modals/ConfirmModal.razor

@@ -0,0 +1,60 @@
+@if (IsOpen)
+{
+    <div class="fixed inset-0 z-50 flex items-center justify-center">
+        <!-- Backdrop -->
+        <div
+            class="absolute inset-0 bg-black/60"
+            @onclick="Close">
+        </div>
+
+        <!-- Modal -->
+        <div class="relative z-10 w-full max-w-md rounded border border-zinc-800 bg-zinc-900 p-4 shadow-lg">
+            <div class="mb-3 text-lg font-semibold text-zinc-100">
+                @Title
+            </div>
+
+            <div class="mb-4 text-sm text-zinc-300">
+                @ChildContent
+            </div>
+
+            <div class="flex justify-end gap-2">
+                <button
+                    class="px-3 py-1 text-sm rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition"
+                    @onclick="Close">
+                    Cancel
+                </button>
+
+                <button
+                    class="px-3 py-1 text-sm rounded text-white transition @ConfirmClass"
+                    @onclick="Confirm">
+                    @ConfirmText
+                </button>
+            </div>
+        </div>
+    </div>
+}
+
+@code{
+    [Parameter] public bool IsOpen { get; set; }
+    [Parameter] public EventCallback<bool> IsOpenChanged { get; set; }
+
+    [Parameter, EditorRequired] public string Title { get; set; } = default!;
+    [Parameter] public string ConfirmText { get; set; } = "Confirm";
+    [Parameter] public string ConfirmClass { get; set; } = "bg-emerald-600 hover:bg-emerald-500";
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    [Parameter, EditorRequired] public EventCallback OnConfirm { get; set; }
+
+    async Task Close()
+    {
+        IsOpen = false;
+        await IsOpenChanged.InvokeAsync(false);
+    }
+
+    async Task Confirm()
+    {
+        await OnConfirm.InvokeAsync();
+        await Close();
+    }
+}

RackPeek.Web/Components/Servers/ServerCardComponent.razor

@@ -24,17 +24,29 @@
 
 @inject GetServerUseCase GetServerUseCase
 @inject UpdateServerUseCase UpdateServerUseCase
+@inject DeleteServerUseCase DeleteServerUseCase
 
 <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
+        <NavLink href="@($"/resources/hardware/{Server.Name}")" class="block">
+            <div class="text-zinc-100">
+                @Server.Name
+            </div>
+        </NavLink>
+
+        <div class="flex justify-between items-center mb-3">
+   
+            <div class="flex items-center gap-2">
+                
+                <button
+                    class="text-xs text-red-400 hover:text-red-300 transition"
+                    title="Delete server"
+                    @onclick="ConfirmDelete">
+                    Delete
+                </button>
+            </div>
         </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">
@@ -234,6 +246,17 @@
     OnSubmit="HandleGpuSubmit"
     OnDelete="HandleGpuDelete" />
 
+<ConfirmModal
+    IsOpen="_confirmDeleteOpen"
+    IsOpenChanged="v => _confirmDeleteOpen = v"
+    Title="Delete server"
+    ConfirmText="Delete"
+    ConfirmClass="bg-red-600 hover:bg-red-500"
+    OnConfirm="DeleteServer">
+    Are you sure you want to delete <strong>@Server.Name</strong>?
+    <br />
+    This will detach all dependent systems.
+</ConfirmModal>
 
 @code {
     [Parameter] [EditorRequired]
@@ -450,3 +473,24 @@
     #endregion
 
 }
+
+@code {
+    private bool _confirmDeleteOpen;
+    [Parameter]
+    public EventCallback<string> OnDeleted { get; set; }
+    
+    void ConfirmDelete()
+    {
+        _confirmDeleteOpen = true;
+    }
+
+    async Task DeleteServer()
+    {
+        _confirmDeleteOpen = false;
+
+        await DeleteServerUseCase.ExecuteAsync(Server.Name);
+
+        if (OnDeleted.HasDelegate)
+            await OnDeleted.InvokeAsync(Server.Name);
+    }
+}

RackPeek.Web/Components/Servers/ServersListComponent.razor

@@ -22,9 +22,7 @@
         <div class="space-y-4">
             @foreach (var server in _servers.OrderBy(s => s.Name))
             {
-                <NavLink href="@($"/resources/hardware/{server.Name}")" class="block">
-                    <ServerCardComponent Server="server"/>
-                </NavLink>
+                    <ServerCardComponent Server="server" OnDeleted="Callback"/>
             }
         </div>
     }
@@ -44,4 +42,9 @@
         return Task.CompletedTask;
     }
 
+    private async Task Callback(string obj)
+    {
+        _servers = await GetServers.ExecuteAsync();
+    }
+
 }

RackPeek.Web/Components/Services/ServiceCardComponent.razor

@@ -5,12 +5,15 @@
 @using RackPeek.Web.Components.Modals
 @inject UpdateServiceUseCase UpdateServiceUseCase
 @inject GetServiceUseCase GetServiceUseCase
-
+@inject DeleteServiceUseCase DeleteServiceUseCase
 <div class="border border-zinc-800 rounded p-4 bg-zinc-900">
     <div class="flex justify-between items-center mb-3">
+        <NavLink href="@($"/resources/services/{Service.Name}")" class="block">
+
         <div class="text-zinc-100">
             @Service.Name
         </div>
+        </NavLink>
 
         <div class="flex gap-3 text-xs">
             @if (!_isEditing)
@@ -19,6 +22,13 @@
                         @onclick="BeginEdit">
                     Edit
                 </button>
+                
+                <button
+                    class="text-xs text-red-400 hover:text-red-300 transition"
+                    title="Delete server"
+                    @onclick="ConfirmDelete">
+                    Delete
+                </button>
             }
             else
             {
@@ -181,3 +191,35 @@
     }
 
 }
+
+<ConfirmModal
+    IsOpen="_confirmDeleteOpen"
+    IsOpenChanged="v => _confirmDeleteOpen = v"
+    Title="Delete service"
+    ConfirmText="Delete"
+    ConfirmClass="bg-red-600 hover:bg-red-500"
+    OnConfirm="DeleteServer">
+    Are you sure you want to delete <strong>@Service.Name</strong>?
+    <br />
+</ConfirmModal>
+
+@code {
+    private bool _confirmDeleteOpen;
+    [Parameter]
+    public EventCallback<string> OnDeleted { get; set; }
+    
+    void ConfirmDelete()
+    {
+        _confirmDeleteOpen = true;
+    }
+
+    async Task DeleteServer()
+    {
+        _confirmDeleteOpen = false;
+
+        await DeleteServiceUseCase.ExecuteAsync(Service.Name);
+
+        if (OnDeleted.HasDelegate)
+            await OnDeleted.InvokeAsync(Service.Name);
+    }
+}

RackPeek.Web/Components/Services/ServicesListComponent.razor

@@ -24,9 +24,7 @@
             {
                 foreach (var svc in group)
                 {
-                    <NavLink href="@($"/resources/services/{svc.Name}")" class="block">
-                        <ServiceCardComponent Service="svc" OnSave="UpdateService"/>
-                    </NavLink>
+                        <ServiceCardComponent Service="svc" OnSave="UpdateService" OnDeleted="Callback"/>
                 }
             }
         </div>
@@ -59,4 +57,9 @@
         return Task.CompletedTask;
     }
 
+    private async Task Callback(string obj)
+    {
+        _services = await ServiceRepository.GetAllAsync();
+    }
+
 }

RackPeek.Web/Components/Systems/SystemCardComponent.razor

@@ -3,7 +3,7 @@
 @inject AddSystemDriveUseCase AddSystemDriveUseCase
 @inject RemoveSystemDriveUseCase RemoveSystemDriveUseCase
 @inject UpdateSystemDriveUseCase UpdateSystemDriveUseCase
-
+@inject DeleteSystemUseCase DeleteSystemUseCase
 @using RackPeek.Domain.Resources.Hardware.Models
 @using RackPeek.Domain.Resources.Hardware.Servers
 @using RackPeek.Domain.Resources.Hardware.Servers.Drives
@@ -12,9 +12,12 @@
 @using RackPeek.Web.Components.Modals
 <div class="border border-zinc-800 rounded p-4 bg-zinc-900">
     <div class="flex justify-between items-center mb-3">
+        <NavLink href="@($"/resources/systems/{System.Name}")" class="block">
+
         <div class="text-zinc-100">
             @System.Name
         </div>
+        </NavLink>
 
         <div class="flex gap-3 text-xs">
             @if (!_isEditing)
@@ -23,6 +26,13 @@
                         @onclick="BeginEdit">
                     Edit
                 </button>
+                
+                <button
+                    class="text-xs text-red-400 hover:text-red-300 transition"
+                    title="Delete server"
+                    @onclick="ConfirmDelete">
+                    Delete
+                </button>
             }
             else
             {
@@ -176,6 +186,17 @@
     OnSubmit="HandleDriveSubmit" 
     OnDelete="HandleDriveDelete"/>
 
+<ConfirmModal
+    IsOpen="_confirmDeleteOpen"
+    IsOpenChanged="v => _confirmDeleteOpen = v"
+    Title="Delete service"
+    ConfirmText="Delete"
+    ConfirmClass="bg-red-600 hover:bg-red-500"
+    OnConfirm="DeleteServer">
+    Are you sure you want to delete <strong>@System.Name</strong>?
+    <br />
+    This will detach all dependent systems.
+</ConfirmModal>
 @code {
     [Parameter] [EditorRequired] public SystemResource System { get; set; } = default!;
 
@@ -265,5 +286,28 @@
     
         
     #endregion
+    
 
 }
+
+
+@code {
+    private bool _confirmDeleteOpen;
+    [Parameter]
+    public EventCallback<string> OnDeleted { get; set; }
+    
+    void ConfirmDelete()
+    {
+        _confirmDeleteOpen = true;
+    }
+
+    async Task DeleteServer()
+    {
+        _confirmDeleteOpen = false;
+
+        await DeleteSystemUseCase.ExecuteAsync(System.Name);
+
+        if (OnDeleted.HasDelegate)
+            await OnDeleted.InvokeAsync(System.Name);
+    }
+}

RackPeek.Web/Components/Systems/SystemsListComponent.razor

@@ -23,9 +23,7 @@
             {
                 foreach (var systemResource in group)
                 {
-                    <NavLink href="@($"/resources/systems/{systemResource.Name}")" class="block">
-                        <SystemCardComponent System="systemResource" OnSave="UpdateSystem"/>
-                    </NavLink>
+                        <SystemCardComponent System="systemResource" OnSave="UpdateSystem" OnDeleted="Callback"/>
                 }
             }
         </div>
@@ -58,4 +56,9 @@
         return Task.CompletedTask;
     }
 
+    private async Task Callback(string obj)
+    {
+        _systems = await SystemRepository.GetAllAsync();
+    }
+
 }