DiunaBI/DiunaBI.UI.Shared/Pages/Jobs/Index.razor

@page "/jobs"
@using MudBlazor.Internal
@using DiunaBI.Domain.Entities
@implements IDisposable

<PageTitle>Jobs</PageTitle>

<MudContainer MaxWidth="MaxWidth.ExtraExtraLarge">
    <MudExpansionPanels Class="mb-4">
        <MudExpansionPanel Icon="@Icons.Material.Filled.FilterList"
                           Text="Filters"
                           Expanded="true">
            <MudGrid AlignItems="Center">
                <MudItem xs="12" sm="6" md="3">
                    <MudSelect T="JobStatus?"
                               @bind-Value="selectedStatus"
                               Label="Status"
                               Placeholder="All statuses"
                               Clearable="true"
                               OnClearButtonClick="OnStatusClear">
                        @foreach (JobStatus status in Enum.GetValues(typeof(JobStatus)))
                        {
                            <MudSelectItem T="JobStatus?" Value="@status">@status.ToString()</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>

                <MudItem xs="12" sm="6" md="3">
                    <MudSelect T="JobType?"
                               @bind-Value="selectedJobType"
                               Label="Job Type"
                               Placeholder="All types"
                               Clearable="true"
                               OnClearButtonClick="OnJobTypeClear">
                        @foreach (JobType type in Enum.GetValues(typeof(JobType)))
                        {
                            <MudSelectItem T="JobType?" Value="@type">@type.ToString()</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>

                <MudItem xs="12" sm="12" md="6" Class="d-flex justify-end align-center">
                    <MudIconButton Icon="@Icons.Material.Filled.Refresh"
                                   OnClick="LoadJobs"
                                   Color="Color.Primary"
                                   Size="Size.Medium"
                                   Title="Refresh"/>
                    <MudIconButton Icon="@Icons.Material.Filled.Clear"
                                   OnClick="ClearFilters"
                                   Color="Color.Default"
                                   Size="Size.Medium"
                                   Title="Clear filters"/>
                </MudItem>
            </MudGrid>
        </MudExpansionPanel>
    </MudExpansionPanels>

    <MudDivider Class="my-4"></MudDivider>

    <MudTable Items="jobs.Items"
              Dense="true"
              Hover="true"
              Loading="isLoading"
              LoadingProgressColor="Color.Primary"
              OnRowClick="@((TableRowClickEventArgs<QueueJob> args) => OnRowClick(args.Item))"
              T="QueueJob"
              Style="cursor: pointer;">
        <HeaderContent>
            <MudTh>Layer Name</MudTh>
            <MudTh>Plugin</MudTh>
            <MudTh>Type</MudTh>
            <MudTh>Status</MudTh>
            <MudTh>Priority</MudTh>
            <MudTh>Retry</MudTh>
            <MudTh>Created</MudTh>
            <MudTh>Last Attempt</MudTh>
        </HeaderContent>
        <RowTemplate Context="row">
            <MudTd DataLabel="Layer Name">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    @row.LayerName
                </div>
            </MudTd>
            <MudTd DataLabel="Plugin">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    @row.PluginName
                </div>
            </MudTd>
            <MudTd DataLabel="Type">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    <MudChip T="string" Size="Size.Small" Color="@GetJobTypeColor(row.JobType)">@row.JobType</MudChip>
                </div>
            </MudTd>
            <MudTd DataLabel="Status">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    <MudChip T="string" Size="Size.Small" Color="@GetStatusColor(row.Status)">@row.Status</MudChip>
                </div>
            </MudTd>
            <MudTd DataLabel="Priority">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    @row.Priority
                </div>
            </MudTd>
            <MudTd DataLabel="Retry">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    @row.RetryCount / @row.MaxRetries
                </div>
            </MudTd>
            <MudTd DataLabel="Created">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    @row.CreatedAt.ToString("yyyy-MM-dd HH:mm")
                </div>
            </MudTd>
            <MudTd DataLabel="Last Attempt">
                <div @oncontextmenu="@(async (e) => await OnRowRightClick(e, row))" @oncontextmenu:preventDefault="true">
                    @(row.LastAttemptAt?.ToString("yyyy-MM-dd HH:mm") ?? "-")
                </div>
            </MudTd>
        </RowTemplate>
        <NoRecordsContent>
            <MudText>No jobs to display</MudText>
        </NoRecordsContent>
        <LoadingContent>
            Loading...
        </LoadingContent>
    </MudTable>

    @if (jobs.TotalCount > 0)
    {
        <MudGrid Class="mt-4" AlignItems="Center.Center">
            <MudItem xs="12" sm="6">
                <MudText Typo="Typo.body2">
                    Results @((jobs.Page - 1) * jobs.PageSize + 1) - @Math.Min(jobs.Page * jobs.PageSize, jobs.TotalCount)
                    of @jobs.TotalCount
                </MudText>
            </MudItem>
            <MudItem xs="12" sm="6" Class="d-flex justify-end">
                <MudPagination Count="jobs.TotalPages"
                               Selected="jobs.Page"
                               SelectedChanged="OnPageChanged"
                               ShowFirstButton="true"
                               ShowLastButton="true"
                               Variant="Variant.Outlined"
                               />
            </MudItem>
        </MudGrid>
    }
</MudContainer>