Added image update pages. Added forms models. Implemented parts of the image editor components

Moonlight/Core/UI/Components/Forms/AutoListCrud.razor

@@ -1,6 +1,7 @@
 @using BlazorTable
 @using System.Linq.Expressions
 @using Mappy.Net
+@using Moonlight.Core.Repositories
 @using Moonlight.Core.Services.Interop
 
 @typeparam TItem where TItem : class
@@ -9,6 +10,8 @@
 @typeparam TUpdateForm
 
 @inject ToastService ToastService
+@inject Repository<TRootItem> RootRepository
+@inject Repository<TItem> ItemRepository
 
 <div class="card">
     <div class="card-header">
@@ -174,7 +177,7 @@
         if (ValidateUpdate != null) // Optional additional validation
             await ValidateUpdate.Invoke(item);
         
-        //ItemRepository.Update(item);
+        ItemRepository.Update(item);
 
     // Reset
         await UpdateModal.Hide();
@@ -196,6 +199,7 @@
             await ValidateAdd.Invoke(item);
         
         Field.Invoke(RootItem).Add(item);
+        RootRepository.Update(RootItem);
 
     // Reset
         await CreateModal.Hide();
@@ -215,6 +219,13 @@
             await ValidateDelete.Invoke(ItemToDelete);
 
         Field.Invoke(RootItem).Remove(ItemToDelete);
+        RootRepository.Update(RootItem);
+
+        try
+        {
+            ItemRepository.Delete(ItemToDelete);
+        }
+        catch (Exception) { /* ignored, as we dont want such an operation to fail the request */ }
 
     // Reset
         await DeleteModal.Hide();

Moonlight/Core/UI/Components/Partials/Sidebar.razor

@@ -94,6 +94,17 @@
                             </span>
                         </a>
                     </div>
+                    
+                    <div class="menu-item">
+                        <a class="menu-link " href="/admin/servers">
+                            <span class="menu-icon">
+                                <i class="bx bx-sm bx-server"></i>
+                            </span>
+                            <span class="menu-title">
+                                Servers
+                            </span>
+                        </a>
+                    </div>
 
                     <div class="menu-item">
                         <a class="menu-link " href="/admin/store">

Moonlight/Features/Servers/Models/Forms/Admin/Images/CreateDockerImage.cs

@@ -0,0 +1,18 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+
+public class CreateDockerImage
+{
+    [Required(ErrorMessage = "You need to specify a docker image name")]
+    [Description("This is the name of the docker image. E.g. moonlightpanel/moonlight:canary")]
+    public string Name { get; set; }
+    
+    [Required(ErrorMessage = "You need to specify a display name")]
+    [Description("This will be shown if the user is able to change the docker image as the image name")]
+    public string DisplayName { get; set; }
+    
+    [Description("Specifies if the docker image should be pulled/updated when creating a server instance. Disable this for only local existing docker images")]
+    public bool AutoPull { get; set; } = true;
+}

Moonlight/Features/Servers/Models/Forms/Admin/Images/CreateImageForm.cs

@@ -0,0 +1,19 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+
+public class CreateImageForm
+{
+    [Required(ErrorMessage = "You need to specify a name")]
+    public string Name { get; set; }
+
+    [Required(ErrorMessage = "You need to specify a author")]
+    public string Author { get; set; }
+    
+    [Description("The donate button on your image will lead to the page you specify here")]
+    public string? DonateUrl { get; set; }
+    
+    [Description("This field allows you to specify an direct http(s) url to fetch image updates from")]
+    public string? UpdateUrl { get; set; }
+}

Moonlight/Features/Servers/Models/Forms/Admin/Images/Parsing/ParseConfigForm.cs

@@ -1,6 +1,6 @@
 using System.ComponentModel.DataAnnotations;
 
-namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images.Parsing;
 
 public class ParseConfigForm
 {

Moonlight/Features/Servers/Models/Forms/Admin/Images/Parsing/ParseConfigOptionForm.cs

@@ -1,6 +1,6 @@
 using System.ComponentModel.DataAnnotations;
 
-namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images.Parsing;
 
 public class ParseConfigOptionForm
 {

Moonlight/Features/Servers/Models/Forms/Admin/Images/UpdateDockerImage.cs

@@ -0,0 +1,18 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+
+public class UpdateDockerImage
+{
+    [Required(ErrorMessage = "You need to specify a docker image name")]
+    [Description("This is the name of the docker image. E.g. moonlightpanel/moonlight:canary")]
+    public string Name { get; set; }
+    
+    [Required(ErrorMessage = "You need to specify a display name")]
+    [Description("This will be shown if the user is able to change the docker image as the image name")]
+    public string DisplayName { get; set; }
+    
+    [Description("Specifies if the docker image should be pulled/updated when creating a server instance. Disable this for only local existing docker images")]
+    public bool AutoPull { get; set; } = true;
+}

Moonlight/Features/Servers/Models/Forms/Admin/Images/UpdateImageDetailsForm.cs

@@ -0,0 +1,23 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+
+public class UpdateImageDetailsForm
+{
+    [Description("The allocations (aka. ports) a image needs in order to be created")]
+    [Range(1, int.MaxValue)]
+    public int AllocationsNeeded { get; set; }
+    
+    [Required(ErrorMessage = "You need to specify a startup command")]
+    [Description("This command gets passed to the container of the image to execute")]
+    public string StartupCommand { get; set; }
+    
+    [Required(ErrorMessage = "You need to specify a stop command")]
+    [Description("This command will get written into the input stream of the server process when the server should get stopped")]
+    public string StopCommand { get; set; }
+    
+    [Required(ErrorMessage = "You need to specify a online detection")]
+    [Description("The regex string you specify here will be used in order to detect if a server is up and running")]
+    public string OnlineDetection { get; set; }
+}

Moonlight/Features/Servers/Models/Forms/Admin/Images/UpdateImageForm.cs

@@ -0,0 +1,19 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+
+public class UpdateImageForm
+{
+    [Required(ErrorMessage = "You need to specify a name")]
+    public string Name { get; set; }
+
+    [Required(ErrorMessage = "You need to specify a author")]
+    public string Author { get; set; }
+    
+    [Description("The donate button on your image will lead to the page you specify here")]
+    public string? DonateUrl { get; set; }
+    
+    [Description("This field allows you to specify an direct http(s) url to fetch image updates from")]
+    public string? UpdateUrl { get; set; }
+}

Moonlight/Features/Servers/Models/Forms/Admin/Images/UpdateImageInstallationForm.cs

@@ -0,0 +1,18 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+
+namespace Moonlight.Features.Servers.Models.Forms.Admin.Images;
+
+public class UpdateImageInstallationForm
+{
+    [Required(ErrorMessage = "You need to specify a install docker image")]
+    [Description("This specifies the docker image to use for the script execution")]
+    public string InstallDockerImage { get; set; }
+    
+    [Required(ErrorMessage = "You need to specify a install shell")]
+    [Description("This is the shell to pass the install script to")]
+    public string InstallShell { get; set; }
+    
+    [Required(ErrorMessage = "You need to specify a install script")]
+    public string InstallScript { get; set; }
+}

Moonlight/Features/Servers/UI/Components/AdminImageViewNavigation.razor

@@ -0,0 +1,43 @@
+<div class="card mb-5 mb-xl-10">
+    <div class="card-body pt-0 pb-0">
+        <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
+            <li class="nav-item mt-2">
+                <a class="nav-link text-active-primary ms-0 me-10 py-5 @(Index == 0 ? "active" : "")" href="/admin/servers/images/@(ImageId)">
+                    <i class="bx bx-sm bx-tag me-2"></i> General
+                </a>
+            </li>
+            <li class="nav-item mt-2">
+                <a class="nav-link text-active-primary ms-0 me-10 py-5 @(Index == 1 ? "active" : "")" href="/admin/servers/images/@(ImageId)/details">
+                    <i class="bx bx-sm bx-detail me-2"></i> Details
+                </a>
+            </li>
+            <li class="nav-item mt-2">
+                <a class="nav-link text-active-primary ms-0 me-10 py-5 @(Index == 2 ? "active" : "")" href="/admin/servers/images/@(ImageId)/configparsing">
+                    <i class="bx bx-sm bx-cog me-2"></i> Configuration Parsing
+                </a>
+            </li>
+            <li class="nav-item mt-2">
+                <a class="nav-link text-active-primary ms-0 me-10 py-5 @(Index == 3 ? "active" : "")" href="/admin/servers/images/@(ImageId)/installation">
+                    <i class="bx bx-sm bx-terminal me-2"></i> Installation
+                </a>
+            </li>
+            <li class="nav-item mt-2">
+                <a class="nav-link text-active-primary ms-0 me-10 py-5 @(Index == 4 ? "active" : "")" href="/admin/servers/images/@(ImageId)/dockerimages">
+                    <i class="bx bx-sm bxl-docker me-2"></i> Docker Images
+                </a>
+            </li>
+            <li class="nav-item mt-2">
+                <a class="nav-link text-active-primary ms-0 me-10 py-5 @(Index == 5 ? "active" : "")" href="/admin/servers/images/@(ImageId)/variables">
+                    <i class="bx bx-sm bx-wrench me-2"></i> Variables
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+@code
+{
+    [Parameter] public int Index { get; set; }
+
+    [Parameter] public int ImageId { get; set; }
+}

Moonlight/Features/Servers/UI/Components/ImageEditor.razor

@@ -1,154 +0,0 @@
-<SmartForm Model="Form" OnValidSubmit="AddImage">
-    <div class="card">
-        <div class="card-header">
-            <span class="card-title">General</span>
-        </div>
-        <div class="card-body">
-            <div class="row g-5">
-                <div class="col-md-6">
-                    <label class="form-label">Name</label>
-                    <input @bind="Form.Name" type="text" class="form-control form-control-solid" placeholder="Name of your image">
-                </div>
-                <div class="col-md-6">
-                    <label class="form-label">Author</label>
-                    <input @bind="Form.Author" type="text" class="form-control form-control-solid" placeholder="Name of the image author">
-                </div>
-                <div class="col-md-6">
-                    <label class="form-label">Donate URL</label>
-                    <div class="form-text fs-5 mb-2 mt-0">
-                        (Optional) URL to link donation pages for the author
-                    </div>
-                    <input @bind="Form.DonateUrl" type="text" class="form-control form-control-solid">
-                </div>
-                <div class="col-md-6">
-                    <label class="form-label">Update URL</label>
-                    <div class="form-text fs-5 mb-2 mt-0">
-                        (Optional) URL to enable auto updates on images. This link needs to be a direct download link to a json file
-                    </div>
-                    <input @bind="Form.UpdateUrl" type="text" class="form-control form-control-solid">
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="card mt-5">
-        <div class="card-header">
-            <span class="card-title">Installation</span>
-        </div>
-        <div class="card-body">
-            <div class="row g-5 mb-5">
-                <div class="col-md-6">
-                    <label class="form-label">Install docker image</label>
-                    <div class="form-text fs-5 mb-2 mt-0">
-                        This specifies the docker image to use for the script execution
-                    </div>
-                    <input @bind="Form.InstallDockerImage" type="text" class="form-control form-control-solid">
-                </div>
-                <div class="col-md-6">
-                    <label class="form-label">Install shell</label>
-                    <div class="form-text fs-5 mb-2 mt-0">
-                        This is the shell to pass the install script to
-                    </div>
-                    <input @bind="Form.InstallShell" type="text" class="form-control form-control-solid">
-                </div>
-            </div>
-            @* TODO: Add vscode editor or similar *@
-            <label class="form-label">Install script</label>
-            <textarea @bind="Form.InstallScript" class="form-control form-control-solid"></textarea>
-        </div>
-    </div>
-    <div class="card mt-5">
-        <div class="card-header">
-            <span class="card-title">Startup, Control & Allocations</span>
-        </div>
-        <div class="card-body">
-            <label class="form-label">Startup command</label>
-            <div class="form-text fs-5 mb-2 mt-0">
-                This command gets passed to the container of the image to execute. Server variables can be used here
-            </div>
-            <input @bind="Form.StartupCommand" type="text" class="form-control form-control-solid"/>
-            <div class="row g-5 mt-5">
-                <div class="col-md-4">
-                    <label class="form-label">Stop command</label>
-                    <div class="form-text fs-5 mb-2 mt-0">
-                        This command will get written into the input stream of the server process when the server should get stopped
-                    </div>
-                    <input @bind="Form.StopCommand" type="text" class="form-control form-control-solid">
-                </div>
-                <div class="col-md-4">
-                    <label class="form-label">Online detection</label>
-                    <div class="form-text fs-5 mb-2 mt-0">
-                        The regex string you specify here will be used in order to detect if a server is up and running
-                    </div>
-                    <input @bind="Form.OnlineDetection" type="text" class="form-control form-control-solid">
-                </div>
-                <div class="col-md-4">
-                    <label class="form-label">Allocations Amount</label>
-                    <div class="form-text fs-5 mb-2 mt-0">
-                        The allocations (aka. ports) a image needs in order to be created
-                    </div>
-                    <input @bind="Form.AllocationsNeeded" type="number" class="form-control form-control-solid">
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="card mt-5">
-        <div class="card-header">
-            <span class="card-title">Docker images</span>
-            <div class="card-toolbar">
-                <button @onclick="AddDockerImage" type="button" class="btn btn-icon btn-success">
-                    <i class="bx bx-sm bx-plus"></i>
-                </button>
-            </div>
-        </div>
-        <div class="card-body">
-            <div class="row g-5">
-                @foreach (var dockerImage in DockerImages)
-                {
-                    <div class="col-md-6">
-                        <div class="input-group">
-                            <input @bind="dockerImage.Name" type="text" class="form-control form-control-solid" placeholder="moonlightpanel/images:minecraft17">
-                            <WButton OnClick="() => RemoveDockerImage(dockerImage)" CssClasses="btn btn-danger">Remove</WButton>
-                        </div>
-                    </div>
-                }
-            </div>
-        </div>
-    </div>
-    <div class="card mt-5">
-        <div class="card-header">
-            <span class="card-title">Variables</span>
-            <div class="card-toolbar">
-                <button @onclick="AddVariable" type="button" class="btn btn-icon btn-success">
-                    <i class="bx bx-sm bx-plus"></i>
-                </button>
-            </div>
-        </div>
-        <div class="card-body">
-            <div class="row g-5">
-                @foreach (var variable in Variables)
-                {
-                    <div class="col-md-6">
-                        <div class="input-group">
-                            <input @bind="variable.Key" type="text" class="form-control form-control-solid" placeholder="Key">
-                            <input @bind="variable.Value" type="text" class="form-control form-control-solid" placeholder="Default value">
-                            <WButton OnClick="() => RemoveVariable(variable)" CssClasses="btn btn-danger">Remove</WButton>
-                        </div>
-                    </div>
-                }
-            </div>
-        </div>
-    </div>
-    <div class="mt-5">
-        <ParseConfigEditor @ref="ParseConfigEditor"/>
-    </div>
-    <div class="card mt-5">
-        <div class="card-body text-end">
-            <button class="btn btn-success" type="submit">Save changes</button>
-        </div>
-    </div>
-</SmartForm>
-
-@code
-{
-    
-}

Moonlight/Features/Servers/UI/Components/ParseConfigEditor.razor

@@ -3,6 +3,7 @@
 @using Moonlight.Core.Helpers
 @using Moonlight.Features.Servers.Models
 @using Moonlight.Features.Servers.Models.Forms.Admin.Images
+@using Moonlight.Features.Servers.Models.Forms.Admin.Images.Parsing
 
 <div class="card">
     <div class="card-header">

Moonlight/Features/Servers/UI/Views/Admin/Images/Index.razor

@@ -6,6 +6,7 @@
 @using Moonlight.Core.Repositories
 @using Moonlight.Core.Services.Interop
 @using Moonlight.Features.Servers.Entities
+@using Moonlight.Features.Servers.UI.Components
 
 @inject Repository<ServerImage> ImageRepository
 @inject Repository<ServerImageVariable> ImageVariableRepository
@@ -13,6 +14,8 @@
 @inject Repository<Server> ServerRepository
 @inject ToastService ToastService
 
+<AdminServersNavigation Index="1"/>
+
 <div class="card">
     <div class="card-header">
         <h3 class="card-title">Manage server images</h3>
@@ -30,7 +33,13 @@
                    TableClass="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 fs-6"
                    TableHeadClass="fw-bold text-muted">
                 <Column TableItem="ServerImage" Field="@(x => x.Id)" Title="Id"/>
-                <Column TableItem="ServerImage" Field="@(x => x.Name)" Title="Name"/>
+                <Column TableItem="ServerImage" Field="@(x => x.Name)" Title="Name">
+                    <Template>
+                        <a href="/admin/servers/images/@(context.Id)">
+                            @context.Name
+                        </a>
+                    </Template>
+                </Column>
                 <Column TableItem="ServerImage" Field="@(x => x.Author)" Title="Author"/>
                 <Column TableItem="ServerImage" Field="@(x => x.Id)" Title="">
                     <Template>
@@ -54,7 +63,7 @@
                     <Template>
                         <div class="text-end">
                             <div class="btn-group">
-                                <a href="/admin/servers/images/view/@(context.Id)" class="btn btn-icon btn-warning">
+                                <a href="/admin/servers/images/@(context.Id)" class="btn btn-icon btn-warning">
                                     <i class="bx bx-sm bx-slider"></i>
                                 </a>
                                 <ConfirmButton OnClick="() => Delete(context)" CssClasses="btn btn-icon btn-danger">

Moonlight/Features/Servers/UI/Views/Admin/Images/New.razor

@@ -1,10 +1,53 @@
 @page "/admin/servers/images/new"
 
+@using Moonlight.Features.Servers.Models.Forms.Admin.Images
+@using Moonlight.Core.Services.Interop
+@using Moonlight.Core.Repositories
 @using Moonlight.Features.Servers.Entities
+@using Mappy.Net
 
+@inject NavigationManager Navigation
+@inject ToastService ToastService
+@inject Repository<ServerImage> ImageRepository
 
+<div class="card">
+    <div class="card-header">
+        <span class="card-title">Create new image</span>
+    </div>
+    <SmartForm Model="Form" OnValidSubmit="Submit">
+        <div class="card-body row">
+            <AutoForm TForm="CreateImageForm" Model="Form" />
+        </div>
+        <div class="card-footer">
+            <div class="d-flex justify-content-end">
+                <button type="submit" class="btn btn-success">Create</button>
+            </div>
+        </div>
+    </SmartForm>
+</div>
 
 @code
 {
-    private ServerImage Image;
+    private CreateImageForm Form = new();
-}
+
+    private async Task Submit()
+    {
+        var image = Mapper.Map<ServerImage>(Form);
+
+        image.InstallDockerImage = "alpine:latest";
+        image.InstallShell = "/bin/ash";
+        image.InstallScript = "#! /bin/ash\necho Installation done";
+
+        image.AllocationsNeeded = 1;
+        image.StartupCommand = "";
+        image.StopCommand = "^C";
+        image.OnlineDetection = "Done";
+
+        image.ParseConfigurations = "[]";
+
+        ImageRepository.Add(image);
+        
+        await ToastService.Success("Successfully created image");
+        Navigation.NavigateTo("/admin/servers/images");
+    }
+}

Moonlight/Features/Servers/UI/Views/Admin/Images/View/ConfigParsing.razor

@@ -0,0 +1,35 @@
+@page "/admin/servers/images/{Id:int}/configparsing"
+
+@using Moonlight.Features.Servers.Entities
+@using Moonlight.Core.Repositories
+@using Moonlight.Features.Servers.UI.Components
+
+@inject Repository<ServerImage> ImageRepository
+
+<LazyLoader ShowAsCard="true" Load="Load">
+    @if (Image == null)
+    {
+        <NotFoundAlert />
+    }
+    else
+    {
+        <AdminImageViewNavigation Index="2" ImageId="@Id" />
+    }
+</LazyLoader>
+
+@code
+{
+    [Parameter]
+    public int Id { get; set; }
+
+    private ServerImage? Image;
+
+    private Task Load(LazyLoader arg)
+    {
+        Image = ImageRepository
+            .Get()
+            .FirstOrDefault(x => x.Id == Id);
+        
+        return Task.CompletedTask;
+    }
+}

Moonlight/Features/Servers/UI/Views/Admin/Images/View/Details.razor

@@ -0,0 +1,70 @@
+@page "/admin/servers/images/{Id:int}/details"
+
+@using Moonlight.Features.Servers.Entities
+@using Moonlight.Core.Repositories
+@using Moonlight.Features.Servers.Models.Forms.Admin.Images
+@using Mappy.Net
+@using Moonlight.Core.Services.Interop
+@using Moonlight.Features.Servers.UI.Components
+
+@inject Repository<ServerImage> ImageRepository
+@inject ToastService ToastService
+
+<LazyLoader ShowAsCard="true" Load="Load">
+    @if (Image == null)
+    {
+        <NotFoundAlert />
+    }
+    else
+    {
+        <AdminImageViewNavigation Index="1" ImageId="@Id" />
+        
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Update image details</span>
+            </div>
+            <SmartForm Model="Form" OnValidSubmit="Submit">
+                <div class="card-body row">
+                    <AutoForm TForm="UpdateImageDetailsForm" Model="Form" />
+                </div>
+                <div class="card-footer">
+                    <div class="d-flex justify-content-end">
+                        <button type="submit" class="btn btn-success">Create</button>
+                    </div>
+                </div>
+            </SmartForm>
+        </div>
+    }
+</LazyLoader>
+
+@code
+{
+    [Parameter]
+    public int Id { get; set; }
+
+    private ServerImage? Image;
+    
+    private UpdateImageDetailsForm Form = new();
+
+    private Task Load(LazyLoader arg)
+    {
+        Image = ImageRepository
+            .Get()
+            .FirstOrDefault(x => x.Id == Id);
+
+        if (Image != null)
+        {
+            Form = Mapper.Map<UpdateImageDetailsForm>(Image);
+        }
+        
+        return Task.CompletedTask;
+    }
+
+    private async Task Submit()
+    {
+        Image = Mapper.Map(Image, Form);
+        ImageRepository.Update(Image!);
+        
+        await ToastService.Success("Successfully updated image");
+    }
+}

Moonlight/Features/Servers/UI/Views/Admin/Images/View/DockerImages.razor

@@ -0,0 +1,65 @@
+@page "/admin/servers/images/{Id:int}/dockerimages"
+
+@using Moonlight.Features.Servers.Entities
+@using Moonlight.Core.Repositories
+@using Moonlight.Features.Servers.Models.Forms.Admin.Images
+@using Moonlight.Features.Servers.UI.Components
+@using BlazorTable
+@using Microsoft.EntityFrameworkCore
+
+@inject Repository<ServerImage> ImageRepository
+
+<LazyLoader ShowAsCard="true" Load="Load">
+    @if (Image == null)
+    {
+        <NotFoundAlert />
+    }
+    else
+    {
+        <AdminImageViewNavigation Index="4" ImageId="@Id" />
+        
+        <AutoListCrud TItem="ServerDockerImage"
+                      TRootItem="ServerImage"
+                      TCreateForm="CreateDockerImage"
+                      TUpdateForm="UpdateDockerImage"
+                      Field="@(x => x.DockerImages)"
+                      RootItem="Image"
+                      Title="Manage docker images">
+            <View>
+                <Column TableItem="ServerDockerImage" Field="@(x => x.Id)" Title="Id" />
+                <Column TableItem="ServerDockerImage" Field="@(x => x.DisplayName)" Title="Display name" />
+                <Column TableItem="ServerDockerImage" Field="@(x => x.Name)" Title="Name" />
+                <Column TableItem="ServerDockerImage" Field="@(x => x.AutoPull)" Title="">
+                    <Template>
+                        @if (context.AutoPull)
+                        {
+                            <i class="bx bx-sm bx-check text-success"></i>
+                        }
+                        else
+                        {
+                            <i class="bx bx-sm bx-x text-danger"></i>
+                        }
+                    </Template>
+                </Column>
+            </View>
+        </AutoListCrud>
+    }
+</LazyLoader>
+
+@code
+{
+    [Parameter]
+    public int Id { get; set; }
+
+    private ServerImage? Image;
+
+    private Task Load(LazyLoader arg)
+    {
+        Image = ImageRepository
+            .Get()
+            .Include(x => x.DockerImages)
+            .FirstOrDefault(x => x.Id == Id);
+        
+        return Task.CompletedTask;
+    }
+}

Moonlight/Features/Servers/UI/Views/Admin/Images/View/Index.razor

@@ -0,0 +1,70 @@
+@page "/admin/servers/images/{Id:int}"
+
+@using Moonlight.Features.Servers.Entities
+@using Moonlight.Core.Repositories
+@using Moonlight.Features.Servers.Models.Forms.Admin.Images
+@using Mappy.Net
+@using Moonlight.Core.Services.Interop
+@using Moonlight.Features.Servers.UI.Components
+
+@inject Repository<ServerImage> ImageRepository
+@inject ToastService ToastService
+
+<LazyLoader ShowAsCard="true" Load="Load">
+    @if (Image == null)
+    {
+        <NotFoundAlert />
+    }
+    else
+    {
+        <AdminImageViewNavigation Index="0" ImageId="@Id" />
+        
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Update image</span>
+            </div>
+            <SmartForm Model="Form" OnValidSubmit="Submit">
+                <div class="card-body row">
+                    <AutoForm TForm="UpdateImageForm" Model="Form" />
+                </div>
+                <div class="card-footer">
+                    <div class="d-flex justify-content-end">
+                        <button type="submit" class="btn btn-success">Create</button>
+                    </div>
+                </div>
+            </SmartForm>
+        </div>
+    }
+</LazyLoader>
+
+@code
+{
+    [Parameter]
+    public int Id { get; set; }
+
+    private ServerImage? Image;
+    
+    private UpdateImageForm Form = new();
+
+    private Task Load(LazyLoader arg)
+    {
+        Image = ImageRepository
+            .Get()
+            .FirstOrDefault(x => x.Id == Id);
+
+        if (Image != null)
+        {
+            Form = Mapper.Map<UpdateImageForm>(Image);
+        }
+        
+        return Task.CompletedTask;
+    }
+
+    private async Task Submit()
+    {
+        Image = Mapper.Map(Image, Form);
+        ImageRepository.Update(Image!);
+        
+        await ToastService.Success("Successfully updated image");
+    }
+}

Moonlight/Features/Servers/UI/Views/Admin/Images/View/Installation.razor

@@ -0,0 +1,70 @@
+@page "/admin/servers/images/{Id:int}/installation"
+
+@using Moonlight.Features.Servers.Entities
+@using Moonlight.Core.Repositories
+@using Moonlight.Features.Servers.Models.Forms.Admin.Images
+@using Mappy.Net
+@using Moonlight.Core.Services.Interop
+@using Moonlight.Features.Servers.UI.Components
+
+@inject Repository<ServerImage> ImageRepository
+@inject ToastService ToastService
+
+<LazyLoader ShowAsCard="true" Load="Load">
+    @if (Image == null)
+    {
+        <NotFoundAlert />
+    }
+    else
+    {
+        <AdminImageViewNavigation Index="3" ImageId="@Id" />
+        
+        <div class="card">
+            <div class="card-header">
+                <span class="card-title">Update image installation details</span>
+            </div>
+            <SmartForm Model="Form" OnValidSubmit="Submit">
+                <div class="card-body row">
+                    <AutoForm TForm="UpdateImageInstallationForm" Model="Form" />
+                </div>
+                <div class="card-footer">
+                    <div class="d-flex justify-content-end">
+                        <button type="submit" class="btn btn-success">Create</button>
+                    </div>
+                </div>
+            </SmartForm>
+        </div>
+    }
+</LazyLoader>
+
+@code
+{
+    [Parameter]
+    public int Id { get; set; }
+
+    private ServerImage? Image;
+    
+    private UpdateImageInstallationForm Form = new();
+
+    private Task Load(LazyLoader arg)
+    {
+        Image = ImageRepository
+            .Get()
+            .FirstOrDefault(x => x.Id == Id);
+
+        if (Image != null)
+        {
+            Form = Mapper.Map<UpdateImageInstallationForm>(Image);
+        }
+        
+        return Task.CompletedTask;
+    }
+
+    private async Task Submit()
+    {
+        Image = Mapper.Map(Image, Form);
+        ImageRepository.Update(Image!);
+        
+        await ToastService.Success("Successfully updated image");
+    }
+}

Moonlight/Features/Servers/UI/Views/Admin/Images/View/Variables.razor

@@ -0,0 +1,35 @@
+@page "/admin/servers/images/{Id:int}/variables"
+
+@using Moonlight.Features.Servers.Entities
+@using Moonlight.Core.Repositories
+@using Moonlight.Features.Servers.UI.Components
+
+@inject Repository<ServerImage> ImageRepository
+
+<LazyLoader ShowAsCard="true" Load="Load">
+    @if (Image == null)
+    {
+        <NotFoundAlert />
+    }
+    else
+    {
+        <AdminImageViewNavigation Index="5" ImageId="@Id" />
+    }
+</LazyLoader>
+
+@code
+{
+    [Parameter]
+    public int Id { get; set; }
+
+    private ServerImage? Image;
+
+    private Task Load(LazyLoader arg)
+    {
+        Image = ImageRepository
+            .Get()
+            .FirstOrDefault(x => x.Id == Id);
+        
+        return Task.CompletedTask;
+    }
+}