76 lines
2.9 KiB
HTML
76 lines
2.9 KiB
HTML
<aside class="tasks-list-shell">
|
|
|
|
<div class="tasks-list-search">
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Search executions</mat-label>
|
|
<mat-icon matPrefix fontIcon="search"></mat-icon>
|
|
<input matInput placeholder="Search executions..." [(ngModel)]="searchTerm" />
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="tasks-list-filter">
|
|
<mat-button-toggle-group class="tasks-list-filter-group" [value]="filter()" (valueChange)="filter.set($event)">
|
|
<mat-button-toggle value="all">All</mat-button-toggle>
|
|
<mat-button-toggle value="INIT">Init</mat-button-toggle>
|
|
<mat-button-toggle value="RUNNING">Running</mat-button-toggle>
|
|
<mat-button-toggle value="PAUSED">Paused</mat-button-toggle>
|
|
<mat-button-toggle value="FINAL">Final</mat-button-toggle>
|
|
</mat-button-toggle-group>
|
|
</div>
|
|
|
|
<div class="tasks-list-ordering">
|
|
<app-ordering
|
|
[orderFields]="orderFields"
|
|
[orderView]="orderView"
|
|
(orderChanged)="onOrderChanged($event)">
|
|
</app-ordering>
|
|
</div>
|
|
|
|
<div class="tasks-list-items">
|
|
@if (!filteredExecutions().length) {
|
|
<div class="tasks-list-empty">No executions available</div>
|
|
} @else {
|
|
<mat-list class="tasks-list-list">
|
|
@for (execution of filteredExecutions(); track execution.id) {
|
|
<mat-list-item class="tasks-list-list-item">
|
|
<mat-card
|
|
class="tasks-list-item"
|
|
[class.border-blue-300]="execution.id === selectedExecutionId()"
|
|
[class.bg-blue-50]="execution.id === selectedExecutionId()"
|
|
[class.border-slate-200]="execution.id !== selectedExecutionId()"
|
|
[class.bg-white]="execution.id !== selectedExecutionId()"
|
|
(click)="selectExecution(execution.id)">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="tasks-list-item-meta">
|
|
<div class="tasks-list-item-title">{{ execution.title }}</div>
|
|
<div class="tasks-list-item-subtitle">{{ execution.flowName }}</div>
|
|
</div>
|
|
<span class="tasks-list-status"
|
|
[ngClass]="statusBadgeClass(execution.status)">
|
|
{{ execution.status }}
|
|
</span>
|
|
</div>
|
|
<div class="tasks-list-item-footer">
|
|
<span>{{ execution.startedAt }}</span>
|
|
<div class="tasks-list-item-actions">
|
|
<span>{{ execution.duration || '-' }}</span>
|
|
<button
|
|
type="button"
|
|
mat-icon-button
|
|
class="!h-8 !w-8 enabled:!text-red-600 disabled:!text-red-200"
|
|
matTooltip="Delete execution"
|
|
aria-label="Delete execution"
|
|
[disabled]="isDeleteDisabled(execution.status)"
|
|
(click)="requestDeleteExecution(execution.id, $event)">
|
|
<mat-icon fontIcon="delete"></mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card>
|
|
</mat-list-item>
|
|
}
|
|
</mat-list>
|
|
}
|
|
</div>
|
|
</aside>
|