initial upload

src/Web/Insight.Web/Pages/Management/Customers/CustomerCreateDialog.razor

@@ -0,0 +1,38 @@
+@using MongoDB.Bson;
+
+<MudDrawer @bind-Open="_visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" Width="400px" Style="max-width:auto;">
+    <MudDrawerHeader>
+        <MudText Typo="Typo.h6">
+            Create Customer
+        </MudText>
+    </MudDrawerHeader>
+    <MudStack Class="px-6">
+        @if (Customer is not null)
+        {
+            <EditForm Model="@Customer" OnValidSubmit="SubmitAsync">
+                <DataAnnotationsValidator />
+                <MudStack Spacing="5">
+                    <MudTextField T="string" @bind-Value="Customer.Name" For="()=>Customer.Name" Label="Name" Variant="Variant.Text" Margin="Margin.Dense" AutoFocus Clearable />
+                    <MudTextField T="string" @bind-Value="Customer.Tag" For="()=>Customer.Tag" Label="Tag" Variant="Variant.Text" Margin="Margin.Dense" Clearable />
+                </MudStack>
+                <MudStack Justify="Justify.Center" Row Class="mt-7">
+                <MudButton OnClick="()=>_visible = false" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
+                    Cancel
+                    </MudButton>
+                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Success" Style="width: 100%;">
+                    Create
+                    </MudButton>
+                    </MudStack>
+                    </EditForm>
+        }
+    </MudStack>
+</MudDrawer>
+
+@code {
+    private bool _visible;
+    public void Toggle()
+    {
+        _visible = !_visible;
+        StateHasChanged();
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/CustomerCreateDialog.razor.cs

@@ -0,0 +1,52 @@
+using Insight.Infrastructure;
+using Insight.Infrastructure.Entities;
+using Insight.Web.Constants;
+using Microsoft.AspNetCore.Components;
+using MongoDB.Driver;
+using MudBlazor;
+
+namespace Insight.Web.Pages.Management.Customers;
+
+public partial class CustomerCreateDialog
+{
+    [Parameter] public EventCallback OnChanges { get; set; }
+
+    [Inject] private IMongoDatabase Database { get; init; } = default!;
+    [Inject] private ISnackbar Snackbar { get; init; } = default!;
+    [Inject] private ILogger<CustomerCreateDialog> Logger { get; init; } = default!;
+
+    private CustomerEntity? Customer { get; set; } = new();
+
+    private async Task SubmitAsync()
+    {
+        if (Customer is null) return;
+        Customer.Insert = DateTime.Now;
+
+        try
+        {
+            await Database.Customer()
+                .InsertOneAsync(Customer, cancellationToken: default)
+                .ConfigureAwait(false);
+
+            Notification.Success(Snackbar);
+
+            if (OnChanges.HasDelegate)
+            {
+                await InvokeAsync(async () =>
+                {
+                    await OnChanges.InvokeAsync(this);
+                });
+            }
+        }
+        catch (Exception ex)
+        {
+            Notification.Error(Snackbar);
+            Logger.LogError(ex.ToString());
+        }
+        finally
+        {
+            Customer = new();
+            _visible = false;
+        }
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/CustomerDeleteDialog.razor

@@ -0,0 +1,37 @@
+@using MongoDB.Bson;
+
+<MudDrawer @bind-Open="_visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" Width="400px" Style="max-width:auto;">
+    <MudDrawerHeader>
+        <MudText Typo="Typo.h6">
+            Delete Customer
+        </MudText>
+    </MudDrawerHeader>
+    <MudStack Class="px-6">
+        @if (Customer is not null)
+        {
+            <EditForm Model="@Customer" OnValidSubmit="SubmitAsync">
+                <MudStack Spacing="5">
+                    <MudTextField T="string" @bind-Value="Customer.Name" For="()=>Customer.Name" Label="Name" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly />
+                    <MudTextField T="string" @bind-Value="Customer.Tag" For="()=>Customer.Tag" Label="Tag" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly />
+                </MudStack>
+                <MudStack Justify="Justify.Center" Row Class="mt-7">
+                <MudButton OnClick="()=>_visible = false" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
+                    Cancel
+                    </MudButton>
+                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Error" Style="width: 100%;">
+                    Delete
+                    </MudButton>
+                    </MudStack>
+                    </EditForm>
+        }
+    </MudStack>
+</MudDrawer>
+
+@code {
+    private bool _visible;
+    public void Toggle()
+    {
+        _visible = !_visible;
+        StateHasChanged();
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/CustomerDeleteDialog.razor.cs

@@ -0,0 +1,50 @@
+using Insight.Infrastructure;
+using Insight.Infrastructure.Entities;
+using Insight.Web.Constants;
+using Microsoft.AspNetCore.Components;
+using MongoDB.Driver;
+using MudBlazor;
+
+namespace Insight.Web.Pages.Management.Customers;
+
+public partial class CustomerDeleteDialog
+{
+    [CascadingParameter(Name = "Customer")] public CustomerEntity? Customer { get; set; }
+    [Parameter] public EventCallback OnChanges { get; set; }
+
+    [Inject] private IMongoDatabase Database { get; init; } = default!;
+    [Inject] private ISnackbar Snackbar { get; init; } = default!;
+    [Inject] private ILogger<CustomerDeleteDialog> Logger { get; init; } = default!;
+
+    private async Task SubmitAsync()
+    {
+        if (Customer is null) return;
+
+        try
+        {
+            await Database.Customer()
+                .DeleteOneAsync(Builders<CustomerEntity>
+                .Filter.Eq(p => p.Id, Customer.Id),
+                cancellationToken: default).ConfigureAwait(false);
+
+            Notification.Success(Snackbar);
+
+            if (OnChanges.HasDelegate)
+            {
+                await InvokeAsync(async () =>
+                {
+                    await OnChanges.InvokeAsync(this);
+                });
+            }
+        }
+        catch (Exception ex)
+        {
+            Notification.Error(Snackbar);
+            Logger.LogError(ex.ToString());
+        }
+        finally
+        {
+            _visible = false;
+        }
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/CustomerEditDialog.razor

@@ -0,0 +1,47 @@
+@using MongoDB.Bson;
+
+<MudDrawer @bind-Open="_visible" Anchor="Anchor.End" Elevation="0" Variant="@DrawerVariant.Temporary" ClipMode="DrawerClipMode.Always" Width="400px" Style="max-width:auto;">
+    <MudDrawerHeader>
+        <MudText Typo="Typo.h6">
+            Edit Customer
+        </MudText>
+    </MudDrawerHeader>
+    <MudStack Class="px-6">
+        @if (Customer is not null)
+        {
+            <EditForm Model="@Customer" OnValidSubmit="SubmitAsync">
+                <DataAnnotationsValidator />
+                @*<MudStack Spacing="2">
+                    <MudTextField T="ObjectId?" @bind-Value="Customer.DocumentId" Label="Id" Variant="Variant.Text" Margin="Margin.Dense" DisableUnderLine Disabled ReadOnly />
+                    <MudStack Row>
+                        <MudTextField T="string" Text="@($"{Customer.Created?.ToLocalTime().ToString() ?? "-"}")" Label="Created" Variant="Variant.Text" Margin="Margin.Dense" DisableUnderLine Disabled ReadOnly />
+                        <MudTextField T="string" Text="@($"{Customer.Updated?.ToLocalTime().ToString() ?? "-"}")" Label="Updated" Variant="Variant.Text" Margin="Margin.Dense" DisableUnderLine Disabled ReadOnly />
+                    </MudStack>
+                </MudStack>
+                <MudDivider />*@
+                <MudStack Spacing="5">
+                    <MudTextField T="string" @bind-Value="Customer.Name" For="()=>Customer.Name" Label="Name" Variant="Variant.Text" Margin="Margin.Dense" AutoFocus Clearable />
+                    <MudTextField T="string" @bind-Value="Customer.Tag" For="()=>Customer.Tag" Label="Tag" Variant="Variant.Text" Margin="Margin.Dense" Clearable />
+                </MudStack>
+
+                <MudStack Justify="Justify.Center" Row Class="mt-7">
+                <MudButton OnClick="()=>_visible = false" Variant="Variant.Outlined" DisableElevation Size="Size.Large" Color="Color.Surface">
+                    Cancel
+                    </MudButton>
+                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" DisableElevation Size="Size.Large" Color="Color.Secondary" Style="width: 100%;">
+                    Edit
+                    </MudButton>
+                    </MudStack>
+                    </EditForm>
+        }
+    </MudStack>
+</MudDrawer>
+
+@code {
+    private bool _visible;
+    public void Toggle()
+    {
+        _visible = !_visible;
+        StateHasChanged();
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/CustomerEditDialog.razor.cs

@@ -0,0 +1,56 @@
+using Insight.Infrastructure;
+using Insight.Infrastructure.Entities;
+using Insight.Web.Constants;
+using Microsoft.AspNetCore.Components;
+using MongoDB.Driver;
+using MudBlazor;
+
+namespace Insight.Web.Pages.Management.Customers
+{
+    public partial class CustomerEditDialog
+    {
+        [CascadingParameter(Name = "Customer")] public CustomerEntity? Customer { get; set; }
+        [Parameter] public EventCallback OnChanges { get; set; }
+
+        [Inject] private IMongoDatabase Database { get; init; } = default!;
+        [Inject] private ISnackbar Snackbar { get; init; } = default!;
+        [Inject] private ILogger<CustomerEditDialog> Logger { get; init; } = default!;
+
+        private async Task SubmitAsync()
+        {
+            if (Customer is null) return;
+            Customer.Update = DateTime.Now;
+
+            try
+            {
+                await Database.Customer()
+                    .UpdateOneAsync(Builders<CustomerEntity>
+                    .Filter
+                    .Eq(p => p.Id, Customer.Id), Builders<CustomerEntity>
+                    .Update
+                    .Set(p => p.Update, DateTime.Now)
+                    .Set(p => p.Name, Customer.Name)
+                    .Set(p => p.Tag, Customer.Tag), default).ConfigureAwait(false);
+
+                Notification.Success(Snackbar);
+
+                if (OnChanges.HasDelegate)
+                {
+                    await InvokeAsync(async () =>
+                    {
+                        await OnChanges.InvokeAsync(this);
+                    });
+                }
+            }
+            catch (Exception ex)
+            {
+                Notification.Error(Snackbar);
+                Logger.LogError(ex.ToString());
+            }
+            finally
+            {
+                _visible = false;
+            }
+        }
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/Details.razor

@@ -0,0 +1,20 @@
+@inherits ComponentBase
+
+<BaseContainer Title="@Title" Breadcrumbs="@Breadcrumbs" LoadData="LoadDataAsync">
+    <Content>
+        @if (Customer is not null)
+        {
+            <MudGrid>
+                <MudItem xs="12" sm="6" md="6" lg="3">
+                    <KeyValueCard T="string" Key="Name" Value="@Customer.Name" />
+                </MudItem>
+                <MudItem xs="12" sm="6" md="6" lg="3">
+                    <KeyValueCard T="string" Key="Tag" Value="@(Customer.Tag ?? "-")" />
+                </MudItem>
+                <MudItem xs="12" sm="6" md="6" lg="3">
+                    <KeyValueCard T="int" Href="@Navigation.Management.Customers.HostsHref(CustomerId)" Key="Hosts" Value="@(Customer?.Hosts?.Count() ?? 0)" Icon="@Icons.Material.Outlined.Devices" IconColor="Color.Primary" />
+                </MudItem>
+            </MudGrid>
+        }
+    </Content>
+</BaseContainer>

src/Web/Insight.Web/Pages/Management/Customers/Details.razor.cs

@@ -0,0 +1,59 @@
+using Insight.Infrastructure;
+using Insight.Infrastructure.Entities;
+using Insight.Web.Constants;
+using Microsoft.AspNetCore.Components;
+using MongoDB.Bson;
+using MongoDB.Driver;
+using MudBlazor;
+
+namespace Insight.Web.Pages.Management.Customers;
+
+[Route(Navigation.Management.Customers.Details)]
+public partial class Details
+{
+    [Parameter] public string? CustomerId { get; set; }
+
+    [Inject] private IMongoDatabase Database { get; init; } = default!;
+    [Inject] private ISnackbar Snackbar { get; init; } = default!;
+    [Inject] private NavigationManager NavigationManager { get; init; } = default!;
+
+    private string Title { get; set; } = Global.Name;
+    private List<BreadcrumbItem> Breadcrumbs { get; } = new();
+    private CustomerEntity? Customer { get; set; }
+
+    private async Task LoadDataAsync()
+    {
+        Breadcrumbs.Clear();
+        Customer = null;
+
+        if (string.IsNullOrWhiteSpace(CustomerId) || ObjectId.TryParse(CustomerId, out var customerId) is false)
+        {
+            Notification.Error(Snackbar, "Not Found");
+            NavigationManager.NavigateTo(Navigation.Management.Customers.Index);
+            return;
+        }
+
+        Breadcrumbs.Add(new BreadcrumbItem("Home", href: Navigation.Home));
+        Breadcrumbs.Add(new BreadcrumbItem("Customers", href: Navigation.Management.Customers.Index));
+
+        StateHasChanged();
+
+        Customer = await Database.Customer()
+            .Aggregate()
+            .Match(Builders<CustomerEntity>.Filter.Eq(p => p.Id, CustomerId))
+            .Lookup<CustomerEntity, HostEntity, CustomerEntity>(Database.Host(), p => p.Id, p => p.Customer, p => p.Hosts)
+            .FirstOrDefaultAsync(default);
+
+        if (Customer is null)
+        {
+            Notification.Error(Snackbar, "Not Found");
+            NavigationManager.NavigateTo(Navigation.Management.Customers.Index);
+            return;
+        }
+
+        Title = $"Customer » {Customer.Name}｜Insight";
+        Breadcrumbs.Add(new BreadcrumbItem(Customer.Name, href: "#", true));
+
+        StateHasChanged();
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/Hosts.razor

@@ -0,0 +1,71 @@
+@inherits ComponentBase
+
+<TableContainer T="HostEntity" 
+    @ref="Container" 
+    @bind-Search="Search" 
+    Title="@Title" 
+    Breadcrumbs="@Breadcrumbs" 
+    Data="LoadDataAsync" 
+    OnAdd="OnAdd">
+    <Header>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Name" T="HostEntity">
+                Name
+            </MudTableSortLabel>
+        </MudTh>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Description" T="HostEntity">
+                Description
+            </MudTableSortLabel>
+        </MudTh>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Agent" T="HostEntity">
+                Agent
+            </MudTableSortLabel>
+        </MudTh>
+    </Header>
+    <RowTemplate>
+        <MudTd DataLabel="Name">
+            <MudLink Href="@Navigation.Management.Hosts.DetailsHref(context.Id)" Typo="Typo.inherit" Underline="Underline.None">
+                @context?.Name
+            </MudLink>
+        </MudTd>
+        <MudTd DataLabel="Description">
+            @context?.Description
+        </MudTd>
+        <MudTd DataLabel="Agent">
+            @{
+                if (string.IsNullOrWhiteSpace(context.Agent) is false && context.Agents is not null && context.Agents.Any())
+                {
+                    <MudLink Href="@Navigation.Management.Agents.DetailsHref(context.Agents.First().Id.ToString())" Typo="Typo.inherit" Underline="Underline.None">
+                        @context?.Agents.First()?.Serial
+                    </MudLink>
+                }
+                else
+                {
+                    @context?.Agent
+                }
+            }
+        </MudTd>
+    </RowTemplate>
+    <ActionTemplate>
+        <MudMenuItem OnClick="@(()=>OnUnassign(context))">
+            Unassign
+        </MudMenuItem>
+    </ActionTemplate>
+</TableContainer>
+
+<ActionDialog @bind-Visible="Unassign">
+    <Content>
+        <MudTextField T="string" @bind-Value="Model.Name" Label="Name" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly />
+        <MudTextField T="string" @bind-Value="Model.Description" Label="Description" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly />
+    </Content>
+    <Actions>
+        <MudButton OnClick="()=>Unassign = false">
+            Cancel
+        </MudButton>
+        <MudButton OnClick="OnUnassignSubmitAsync" Color="Color.Secondary">
+            Unassign
+        </MudButton>
+    </Actions>
+</ActionDialog>

src/Web/Insight.Web/Pages/Management/Customers/Hosts.razor.cs

@@ -0,0 +1,173 @@
+using Insight.Infrastructure;
+using Insight.Infrastructure.Entities;
+using Insight.Web.Components.Containers;
+using Insight.Web.Constants;
+using Microsoft.AspNetCore.Components;
+using MongoDB.Bson;
+using MongoDB.Driver;
+using MudBlazor;
+using System.Text.RegularExpressions;
+using SortDirection = MudBlazor.SortDirection;
+
+namespace Insight.Web.Pages.Management.Customers;
+
+[Route(Navigation.Management.Customers.Hosts)]
+public partial class Hosts
+{
+    [Parameter] public string? CustomerId { get; set; }
+
+    [Inject] private IMongoDatabase Database { get; init; } = default!;
+    [Inject] private ISnackbar Snackbar { get; init; } = default!;
+    [Inject] private NavigationManager NavigationManager { get; init; } = default!;
+
+    private TableContainer<HostEntity>? Container { get; set; }
+    private string Title { get; set; } = Global.Name;
+    private List<BreadcrumbItem> Breadcrumbs { get; } = new();
+    private string? Search { get; set; }
+
+    private HostEntity? Model { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (string.IsNullOrWhiteSpace(CustomerId))
+        {
+            Notification.Error(Snackbar, "Not Found");
+            NavigationManager.NavigateTo(Navigation.Management.Customers.Index);
+            return;
+        }
+
+        Breadcrumbs.Add(new BreadcrumbItem("Home", href: Navigation.Home));
+        Breadcrumbs.Add(new BreadcrumbItem("Customers", href: Navigation.Management.Customers.Index));
+
+        var customer = await Database.Customer()
+            .Aggregate()
+            .Match(Builders<CustomerEntity>.Filter.Eq(p => p.Id, CustomerId))
+            .FirstOrDefaultAsync(default);
+
+        if (customer is null)
+        {
+            Notification.Error(Snackbar, "Not Found");
+            NavigationManager.NavigateTo(Navigation.Management.Customers.Index);
+            return;
+        }
+
+        Title = $"Customer » {customer.Name} » Hosts｜Insight";
+        Breadcrumbs.Add(new BreadcrumbItem(customer.Name, href: Navigation.Management.Customers.DetailsHref(CustomerId)));
+        Breadcrumbs.Add(new BreadcrumbItem("Hosts", href: "#", true));
+    }
+
+    private async Task<TableData<HostEntity>> LoadDataAsync(TableState state)
+    {
+        try
+        {
+            var filter = Builders<HostEntity>.Filter.Eq(p => p.Customer, CustomerId);
+
+            if (string.IsNullOrWhiteSpace(Search) is false)
+            {
+                var regex = new BsonRegularExpression(new Regex(Search, RegexOptions.IgnoreCase));
+                filter &= Builders<HostEntity>.Filter.Regex(x => x.Name, regex) |
+                    Builders<HostEntity>.Filter.Regex(x => x.Description, regex) |
+                    Builders<HostEntity>.Filter.Regex(x => x.Agents.First().Serial, regex);
+            }
+
+            var query = Database.Host()
+                .Aggregate()
+                .Lookup<HostEntity, AgentEntity, HostEntity>(Database.Agent(), p => p.Agent, p => p.Id, p => p.Agents)
+                .Match(filter)
+                .Sort(state.SortDirection switch
+                {
+                    SortDirection.Ascending => state.SortLabel switch
+                    {
+                        "Name" => Builders<HostEntity>.Sort.Ascending(p => p.Name),
+                        "Description" => Builders<HostEntity>.Sort.Ascending(p => p.Description),
+                        "Agent" => Builders<HostEntity>.Sort.Ascending(p => p.Agents.First().Serial),
+                        _ => null
+                    },
+                    SortDirection.Descending => state.SortLabel switch
+                    {
+                        "Name" => Builders<HostEntity>.Sort.Descending(p => p.Name),
+                        "Description" => Builders<HostEntity>.Sort.Descending(p => p.Description),
+                        "Agent" => Builders<HostEntity>.Sort.Descending(p => p.Agents.First().Serial),
+                        _ => null
+                    },
+                    _ => Builders<HostEntity>.Sort.Ascending(p => p.Name)
+                });
+
+            var countResult = await query.Count().FirstOrDefaultAsync(default);
+
+            return new TableData<HostEntity>()
+            {
+                TotalItems = countResult is null ? 0 : (int)countResult.Count,
+                Items = await query.Skip(state.Page * state.PageSize).Limit(state.PageSize).ToListAsync(default)
+            };
+        }
+        catch (Exception)
+        {
+            Notification.Error(Snackbar);
+            return new TableData<HostEntity>();
+        }
+    }
+
+    private void OnAdd()
+    {
+        NavigationManager.NavigateTo(Navigation.Management.Customers.HostsAssignHref(CustomerId));
+    }
+
+    private bool _unassign;
+    public bool Unassign
+    {
+        get
+        {
+            return _unassign;
+        }
+        set
+        {
+            if (value != _unassign)
+            {
+                _unassign = value;
+                StateHasChanged();
+            }
+        }
+    }
+
+    private void OnUnassign(HostEntity model)
+    {
+        Model = new HostEntity
+        {
+            Id = model.Id,
+            Name = model?.Name,
+            Description = model?.Description
+        };
+
+        Unassign = true;
+    }
+
+    private async Task OnUnassignSubmitAsync()
+    {
+        try
+        {
+            await Database.Host()
+                .UpdateOneAsync(Builders<HostEntity>
+                .Filter
+                .Eq(p => p.Id, Model.Id), Builders<HostEntity>
+                .Update
+                .Set(p => p.Customer, null),
+                cancellationToken: default);
+
+            if (Container is not null)
+            {
+                await Container.RefreshAsync();
+            }
+
+            Notification.Success(Snackbar);
+        }
+        catch (Exception)
+        {
+            Notification.Error(Snackbar);
+        }
+        finally
+        {
+            Unassign = false;
+        }
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/HostsAssign.razor

@@ -0,0 +1,70 @@
+@inherits ComponentBase
+
+<TableContainer T="HostEntity" 
+    @ref="Container" 
+    @bind-Search="Search" 
+    Title="@Title" 
+    Breadcrumbs="@Breadcrumbs" 
+    Data="LoadDataAsync">
+    <Header>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Name" T="HostEntity">
+                Name
+            </MudTableSortLabel>
+        </MudTh>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Description" T="HostEntity">
+                Description
+            </MudTableSortLabel>
+        </MudTh>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Agent" T="HostEntity">
+                Agent
+            </MudTableSortLabel>
+        </MudTh>
+    </Header>
+    <RowTemplate>
+        <MudTd DataLabel="Name">
+            <MudLink Href="@Navigation.Management.Hosts.DetailsHref(context.Id.ToString())" Typo="Typo.inherit" Underline="Underline.None">
+                @context?.Name
+            </MudLink>
+        </MudTd>
+        <MudTd DataLabel="Description">
+            @context?.Description
+        </MudTd>
+        <MudTd DataLabel="Agent">
+            @{
+                if (string.IsNullOrWhiteSpace(context.Agent) is false && context.Agents is not null && context.Agents.Any())
+                {
+                    <MudLink Href="@Navigation.Management.Agents.DetailsHref(context.Agents.First().Id.ToString())" Typo="Typo.inherit" Underline="Underline.None">
+                        @context?.Agents.First()?.Serial
+                    </MudLink>
+                }
+                else
+                {
+                    @context?.Agent
+                }
+            }
+        </MudTd>
+    </RowTemplate>
+    <ActionTemplate>
+        <MudMenuItem OnClick="@(()=>OnAssign(context))">
+            Assign
+        </MudMenuItem>
+    </ActionTemplate>
+</TableContainer>
+
+<ActionDialog @bind-Visible="Assign">
+    <Content>
+        <MudTextField T="string" @bind-Value="Model.Name" Label="Name" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly />
+        <MudTextField T="string" @bind-Value="Model.Description" Label="Description" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly />
+    </Content>
+    <Actions>
+        <MudButton OnClick="()=>Assign = false">
+            Cancel
+        </MudButton>
+        <MudButton OnClick="OnAddSubmitAsync" Color="Color.Secondary">
+            Assign
+        </MudButton>
+    </Actions>
+</ActionDialog>

src/Web/Insight.Web/Pages/Management/Customers/HostsAssign.razor.cs

@@ -0,0 +1,165 @@
+using Insight.Infrastructure;
+using Insight.Infrastructure.Entities;
+using Insight.Web.Components.Containers;
+using Insight.Web.Constants;
+using Microsoft.AspNetCore.Components;
+using MongoDB.Bson;
+using MongoDB.Driver;
+using MudBlazor;
+using System.Text.RegularExpressions;
+using SortDirection = MudBlazor.SortDirection;
+
+namespace Insight.Web.Pages.Management.Customers;
+
+[Route(Navigation.Management.Customers.HostsAssign)]
+public partial class HostsAssign
+{
+    [Parameter] public string? CustomerId { get; set; }
+
+    [Inject] private IMongoDatabase Database { get; init; } = default!;
+    [Inject] private ISnackbar Snackbar { get; init; } = default!;
+    [Inject] private NavigationManager NavigationManager { get; init; } = default!;
+
+    private TableContainer<HostEntity>? Container { get; set; }
+    private string Title { get; set; } = Global.Name;
+    private List<BreadcrumbItem> Breadcrumbs { get; } = new();
+    private string? Search { get; set; }
+
+    private HostEntity? Model { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (string.IsNullOrWhiteSpace(CustomerId))
+        {
+            Notification.Error(Snackbar, "Not Found");
+            NavigationManager.NavigateTo(Navigation.Management.Customers.Index);
+            return;
+        }
+
+        Breadcrumbs.Add(new BreadcrumbItem("Home", href: Navigation.Home));
+        Breadcrumbs.Add(new BreadcrumbItem("Customers", href: Navigation.Management.Customers.Index));
+
+        var customer = await Database.Customer()
+            .Aggregate()
+            .Match(Builders<CustomerEntity>.Filter.Eq(p => p.Id, CustomerId))
+            .FirstOrDefaultAsync(default);
+
+        if (customer is null)
+        {
+            Notification.Error(Snackbar, "Not Found");
+            NavigationManager.NavigateTo(Navigation.Management.Customers.Index);
+            return;
+        }
+
+        Title = $"Customer » {customer.Name} » Assign Hosts｜Insight";
+        Breadcrumbs.Add(new BreadcrumbItem(customer.Name, href: Navigation.Management.Customers.DetailsHref(CustomerId)));
+        Breadcrumbs.Add(new BreadcrumbItem("Hosts", href: Navigation.Management.Customers.HostsHref(CustomerId)));
+        Breadcrumbs.Add(new BreadcrumbItem("Assign", href: "#", true));
+    }
+
+    private async Task<TableData<HostEntity>> LoadDataAsync(TableState state)
+    {
+        try
+        {
+            var filter = Builders<HostEntity>.Filter.Eq(x => x.Customer, null);
+
+            if (string.IsNullOrWhiteSpace(Search) is false)
+            {
+                var regex = new BsonRegularExpression(new Regex(Search, RegexOptions.IgnoreCase));
+                filter &= Builders<HostEntity>.Filter.Regex(x => x.Name, regex) |
+                    Builders<HostEntity>.Filter.Regex(x => x.Description, regex) |
+                    Builders<HostEntity>.Filter.Regex(x => x.Agents.First().Serial, regex);
+            }
+
+            var query = Database.Host()
+                .Aggregate()
+                .Lookup<HostEntity, AgentEntity, HostEntity>(Database.Agent(), p => p.Agent, p => p.Id, p => p.Agents)
+                .Match(filter)
+                .Sort(state.SortDirection switch
+                {
+                    SortDirection.Ascending => state.SortLabel switch
+                    {
+                        "Name" => Builders<HostEntity>.Sort.Ascending(p => p.Name),
+                        "Description" => Builders<HostEntity>.Sort.Ascending(p => p.Description),
+                        "Agent" => Builders<HostEntity>.Sort.Ascending(p => p.Agents.First().Serial),
+                        _ => null
+                    },
+                    SortDirection.Descending => state.SortLabel switch
+                    {
+                        "Name" => Builders<HostEntity>.Sort.Descending(p => p.Name),
+                        "Description" => Builders<HostEntity>.Sort.Descending(p => p.Description),
+                        "Agent" => Builders<HostEntity>.Sort.Descending(p => p.Agents.First().Serial),
+                        _ => null
+                    },
+                    _ => Builders<HostEntity>.Sort.Ascending(p => p.Name)
+                });
+
+            var countResult = await query.Count().FirstOrDefaultAsync(default);
+
+            return new TableData<HostEntity>()
+            {
+                TotalItems = countResult is null ? 0 : (int)countResult.Count,
+                Items = await query.Skip(state.Page * state.PageSize).Limit(state.PageSize).ToListAsync(default)
+            };
+        }
+        catch (Exception)
+        {
+            Notification.Error(Snackbar);
+            return new TableData<HostEntity>();
+        }
+    }
+
+
+    private bool _assign;
+    public bool Assign
+    {
+        get
+        {
+            return _assign;
+        }
+        set
+        {
+            if (value != _assign)
+            {
+                _assign = value;
+                StateHasChanged();
+            }
+        }
+    }
+
+    private void OnAssign(HostEntity? model)
+    {
+        Model = model;
+        Assign = true;
+    }
+
+    private async Task OnAddSubmitAsync()
+    {
+        try
+        {
+            await Database.Host()
+                .UpdateOneAsync(Builders<HostEntity>
+                .Filter
+                .Eq(p => p.Id, Model.Id), Builders<HostEntity>
+                .Update
+                .Set(p => p.Customer, CustomerId)
+                , cancellationToken: default);
+
+            if (Container is not null)
+            {
+                await Container.RefreshAsync();
+            }
+
+            Notification.Success(Snackbar);
+        }
+        catch (Exception)
+        {
+            Notification.Error(Snackbar);
+        }
+        finally
+        {
+            Assign = false;
+            NavigationManager?.NavigateTo(Navigation.Management.Customers.HostsHref(CustomerId));
+        }
+    }
+}

src/Web/Insight.Web/Pages/Management/Customers/Index.razor

@@ -0,0 +1,71 @@
+@inherits ComponentBase
+
+<TableContainer T="CustomerEntity" 
+    @ref="Container" 
+    @bind-Search="Search" 
+    Title="@Title" 
+    Breadcrumbs="@Breadcrumbs"
+    Data="LoadDataAsync" 
+    OnAdd="OnCreate">
+    <Header>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Name" T="CustomerEntity">
+                Name
+            </MudTableSortLabel>
+        </MudTh>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Tag" T="CustomerEntity">
+                Tag
+            </MudTableSortLabel>
+        </MudTh>
+        <MudTh>
+            <MudTableSortLabel SortLabel="Hosts" T="CustomerEntity">
+                Hosts
+            </MudTableSortLabel>
+        </MudTh>
+    </Header>
+    <RowTemplate>
+        <MudTd DataLabel="Name">
+                <MudLink Href="@Navigation.Management.Customers.DetailsHref(context?.Id)" Typo="Typo.inherit" Underline="Underline.None">
+                    @context?.Name
+                </MudLink>
+            </MudTd>
+            <MudTd DataLabel="Tag">
+                @context?.Tag
+            </MudTd>
+            <MudTd DataLabel="Hosts">
+                @{
+                    var value = "0";
+
+                    if (context.Hosts is not null && context.Hosts.Any())
+                    {
+                        value = @context.Hosts.Count.ToString();
+                    }
+
+                    <MudLink Href="@Navigation.Management.Customers.HostsHref(context.Id)" Typo="Typo.inherit" Underline="Underline.None">
+                        @value
+                    </MudLink>
+                }
+            </MudTd>
+    </RowTemplate>
+    <ActionTemplate>
+        <MudMenuItem OnClick="@(()=>OnEdit(context))">
+            Edit
+        </MudMenuItem>
+        <MudMenuItem OnClick="@(()=>OnDelete(context))">
+            Delete
+        </MudMenuItem>
+    </ActionTemplate>
+</TableContainer>
+
+<CascadingValue Name="Customer" Value="@Model">
+    <CustomerCreateDialog @ref="_createDialog" OnChanges="OnRefreshAsync" />
+    <CustomerEditDialog @ref="_editDialog" OnChanges="OnRefreshAsync" />
+    <CustomerDeleteDialog @ref="_deleteDialog" OnChanges="OnRefreshAsync" />
+</CascadingValue>
+
+@code{
+    private CustomerCreateDialog? _createDialog;
+    private CustomerEditDialog? _editDialog;
+    private CustomerDeleteDialog? _deleteDialog;
+}

src/Web/Insight.Web/Pages/Management/Customers/Index.razor.cs

@@ -0,0 +1,124 @@
+using Insight.Infrastructure;
+using Insight.Infrastructure.Entities;
+using Insight.Web.Components.Containers;
+using Insight.Web.Constants;
+using Microsoft.AspNetCore.Components;
+using MongoDB.Bson;
+using MongoDB.Driver;
+using MudBlazor;
+using System.Text.RegularExpressions;
+using SortDirection = MudBlazor.SortDirection;
+
+namespace Insight.Web.Pages.Management.Customers;
+
+[Route(Navigation.Management.Customers.Index)]
+public partial class Index
+{
+    [Inject] private IMongoDatabase Database { get; init; } = default!;
+    [Inject] private ISnackbar Snackbar { get; init; } = default!;
+
+    private TableContainer<CustomerEntity>? Container { get; set; }
+    private string Title { get; set; } = Global.Name;
+    private List<BreadcrumbItem> Breadcrumbs { get; } = new();
+    private string? Search { get; set; }
+
+    private CustomerEntity? Model { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Title = "Customers｜Insight";
+        Breadcrumbs.Add(new BreadcrumbItem("Home", href: Navigation.Home));
+        Breadcrumbs.Add(new BreadcrumbItem("Customers", href: Navigation.Management.Customers.Index, true));
+    }
+
+    private async Task<TableData<CustomerEntity>> LoadDataAsync(TableState state)
+    {
+        try
+        {
+            var filter = Builders<CustomerEntity>.Filter.Empty;
+
+            if (string.IsNullOrWhiteSpace(Search) is false)
+            {
+                var regex = new BsonRegularExpression(new Regex(Search, RegexOptions.IgnoreCase));
+                filter &= Builders<CustomerEntity>.Filter.Regex(x => x.Name, regex) |
+                    Builders<CustomerEntity>.Filter.Regex(x => x.Tag, regex) |
+                    Builders<CustomerEntity>.Filter.Regex(x => x.Hosts, regex);
+            }
+
+            var query = Database.Customer()
+                .Aggregate()
+                .Match(filter)
+                .Lookup<CustomerEntity, HostEntity, CustomerEntity>(Database.Host(), p => p.Id, p => p.Customer, p => p.Hosts)
+                .Sort(state.SortDirection switch
+                {
+                    SortDirection.Ascending => state.SortLabel switch
+                    {
+                        "Name" => Builders<CustomerEntity>.Sort.Ascending(p => p.Name),
+                        "Tag" => Builders<CustomerEntity>.Sort.Ascending(p => p.Tag),
+                        "Hosts" => Builders<CustomerEntity>.Sort.Ascending(p => p.Hosts),
+                        _ => null
+                    },
+                    SortDirection.Descending => state.SortLabel switch
+                    {
+                        "Name" => Builders<CustomerEntity>.Sort.Descending(p => p.Name),
+                        "Tag" => Builders<CustomerEntity>.Sort.Descending(p => p.Tag),
+                        "Hosts" => Builders<CustomerEntity>.Sort.Descending(p => p.Hosts),
+                        _ => null
+                    },
+                    _ => Builders<CustomerEntity>.Sort.Ascending(p => p.Name)
+                });
+
+            var countResult = await query.Count().FirstOrDefaultAsync(default);
+
+            return new TableData<CustomerEntity>()
+            {
+                TotalItems = countResult is null ? 0 : (int)countResult.Count,
+                Items = await query.Skip(state.Page * state.PageSize).Limit(state.PageSize).ToListAsync(default)
+            };
+        }
+        catch (Exception)
+        {
+            Notification.Error(Snackbar);
+            return new TableData<CustomerEntity>();
+        }
+    }
+
+    private async Task OnRefreshAsync()
+    {
+        if (Container is null) return;
+        await Container.RefreshAsync().ConfigureAwait(false);
+    }
+
+    private void OnCreate()
+    {
+        _createDialog?.Toggle();
+    }
+
+    private void OnEdit(CustomerEntity model)
+    {
+        Model = new CustomerEntity
+        {
+            Id = model.Id,
+            Insert = model?.Insert,
+            Update = model?.Update,
+            Name = model?.Name,
+            Tag = model?.Tag
+        };
+
+        _editDialog?.Toggle();
+    }
+
+    private void OnDelete(CustomerEntity model)
+    {
+        Model = new CustomerEntity
+        {
+            Id = model.Id,
+            Insert = model?.Insert,
+            Update = model?.Update,
+            Name = model?.Name,
+            Tag = model?.Tag
+        };
+
+        _deleteDialog?.Toggle();
+    }
+}