Implement sort by status
This commit is contained in:
Sipke Schoorstra
parent
9774e35e12
commit
b5dc232c13
|
|
@ -156,10 +156,6 @@ export namespace Components {
|
|||
interface ElsaWorkflowSettingsModal {
|
||||
"workflowDefinition": WorkflowDefinition;
|
||||
}
|
||||
interface WorkflowInstancesListScreen {
|
||||
"history"?: RouterHistory;
|
||||
"serverUrl": string;
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
|
||||
|
|
@ -348,12 +344,6 @@ declare global {
|
|||
prototype: HTMLElsaWorkflowSettingsModalElement;
|
||||
new (): HTMLElsaWorkflowSettingsModalElement;
|
||||
};
|
||||
interface HTMLWorkflowInstancesListScreenElement extends Components.WorkflowInstancesListScreen, HTMLStencilElement {
|
||||
}
|
||||
var HTMLWorkflowInstancesListScreenElement: {
|
||||
prototype: HTMLWorkflowInstancesListScreenElement;
|
||||
new (): HTMLWorkflowInstancesListScreenElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"app-root": HTMLAppRootElement;
|
||||
"app-workflow-definitions-edit": HTMLAppWorkflowDefinitionsEditElement;
|
||||
|
|
@ -386,7 +376,6 @@ declare global {
|
|||
"elsa-workflow-instances-list-screen": HTMLElsaWorkflowInstancesListScreenElement;
|
||||
"elsa-workflow-publish-button": HTMLElsaWorkflowPublishButtonElement;
|
||||
"elsa-workflow-settings-modal": HTMLElsaWorkflowSettingsModalElement;
|
||||
"workflow-instances-list-screen": HTMLWorkflowInstancesListScreenElement;
|
||||
}
|
||||
}
|
||||
declare namespace LocalJSX {
|
||||
|
|
@ -533,10 +522,6 @@ declare namespace LocalJSX {
|
|||
interface ElsaWorkflowSettingsModal {
|
||||
"workflowDefinition"?: WorkflowDefinition;
|
||||
}
|
||||
interface WorkflowInstancesListScreen {
|
||||
"history"?: RouterHistory;
|
||||
"serverUrl"?: string;
|
||||
}
|
||||
interface IntrinsicElements {
|
||||
"app-root": AppRoot;
|
||||
"app-workflow-definitions-edit": AppWorkflowDefinitionsEdit;
|
||||
|
|
@ -569,7 +554,6 @@ declare namespace LocalJSX {
|
|||
"elsa-workflow-instances-list-screen": ElsaWorkflowInstancesListScreen;
|
||||
"elsa-workflow-publish-button": ElsaWorkflowPublishButton;
|
||||
"elsa-workflow-settings-modal": ElsaWorkflowSettingsModal;
|
||||
"workflow-instances-list-screen": WorkflowInstancesListScreen;
|
||||
}
|
||||
}
|
||||
export { LocalJSX as JSX };
|
||||
|
|
@ -607,7 +591,6 @@ declare module "@stencil/core" {
|
|||
"elsa-workflow-instances-list-screen": LocalJSX.ElsaWorkflowInstancesListScreen & JSXBase.HTMLAttributes<HTMLElsaWorkflowInstancesListScreenElement>;
|
||||
"elsa-workflow-publish-button": LocalJSX.ElsaWorkflowPublishButton & JSXBase.HTMLAttributes<HTMLElsaWorkflowPublishButtonElement>;
|
||||
"elsa-workflow-settings-modal": LocalJSX.ElsaWorkflowSettingsModal & JSXBase.HTMLAttributes<HTMLElsaWorkflowSettingsModalElement>;
|
||||
"workflow-instances-list-screen": LocalJSX.WorkflowInstancesListScreen & JSXBase.HTMLAttributes<HTMLWorkflowInstancesListScreenElement>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {createElsaClient} from "../../../../services/elsa-client";
|
|||
import {OrderBy, PagedList, VersionOptions, WorkflowBlueprintSummary, WorkflowInstanceSummary, WorkflowStatus} from "../../../../models";
|
||||
import {DropdownButtonItem, DropdownButtonOrigin} from "../../../controls/elsa-dropdown-button/models";
|
||||
import {Map, parseQuery} from '../../../../utils/utils';
|
||||
import {parseQueryString} from "@stencil/router/dist/types/utils/path-utils";
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-workflow-instances-list-screen',
|
||||
|
|
@ -20,7 +19,7 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
@State() workflowInstances: PagedList<WorkflowInstanceSummary> = {items: [], page: 1, pageSize: 50, totalCount: 0};
|
||||
@State() selectedWorkflowId?: string;
|
||||
@State() selectedWorkflowStatus?: WorkflowStatus;
|
||||
@State() selectedOrderBy?: OrderBy;
|
||||
@State() selectedOrderBy?: OrderBy = OrderBy.Started;
|
||||
@State() selectedWorkflowInstanceIds: Array<string> = [];
|
||||
|
||||
confirmDialog: HTMLElsaConfirmDialogElement;
|
||||
|
|
@ -44,8 +43,9 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
applyQueryString(queryString?: string){
|
||||
const query = parseQuery(queryString);
|
||||
|
||||
this.selectedWorkflowId = !!query.workflow ? query.workflow : null;
|
||||
this.selectedWorkflowStatus = !!query.status ? this.parseStatusText(query.status) : null;
|
||||
this.selectedWorkflowId = query.workflow;
|
||||
this.selectedWorkflowStatus = query.status;
|
||||
this.selectedOrderBy = query.orderBy ?? OrderBy.Started;
|
||||
}
|
||||
|
||||
async loadWorkflowBlueprints() {
|
||||
|
|
@ -73,19 +73,16 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
}
|
||||
|
||||
buildFilterUrl(workflowId?: string, workflowStatus?: WorkflowStatus, orderBy?: OrderBy) {
|
||||
const workflowStatusText = workflowStatus != null ? this.getStatusText(workflowStatus) : null;
|
||||
const orderByText = !!orderBy ? orderBy.toString() : null;
|
||||
|
||||
const filters: Map<string> = {};
|
||||
|
||||
if (!!workflowId)
|
||||
filters['workflow'] = workflowId;
|
||||
|
||||
if (!!workflowStatusText)
|
||||
filters['status'] = workflowStatusText;
|
||||
if (!!workflowStatus)
|
||||
filters['status'] = workflowStatus;
|
||||
|
||||
if (!!orderByText)
|
||||
filters['orderBy'] = orderByText;
|
||||
if (!!orderBy)
|
||||
filters['orderBy'] = orderBy;
|
||||
|
||||
const queryString = collection.map(filters, (v, k) => `${k}=${v}`).join('&');
|
||||
return `/workflow-instances?${queryString}`;
|
||||
|
|
@ -108,45 +105,6 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
return "yellow";
|
||||
}
|
||||
}
|
||||
|
||||
getStatusText(status: WorkflowStatus){
|
||||
switch (status) {
|
||||
default:
|
||||
case WorkflowStatus.Idle:
|
||||
return "Idle";
|
||||
case WorkflowStatus.Running:
|
||||
return "Running";
|
||||
case WorkflowStatus.Suspended:
|
||||
return "Suspended";
|
||||
case WorkflowStatus.Finished:
|
||||
return "Finished";
|
||||
case WorkflowStatus.Faulted:
|
||||
return "Faulted";
|
||||
case WorkflowStatus.Cancelled:
|
||||
return "Cancelled";
|
||||
}
|
||||
}
|
||||
|
||||
parseStatusText(status?: string): WorkflowStatus {
|
||||
if(!status)
|
||||
return null;
|
||||
|
||||
switch (status.toLowerCase()) {
|
||||
default:
|
||||
case 'idle':
|
||||
return WorkflowStatus.Idle;
|
||||
case 'running':
|
||||
return WorkflowStatus.Running;
|
||||
case 'suspended':
|
||||
return WorkflowStatus.Suspended;
|
||||
case 'finished':
|
||||
return WorkflowStatus.Finished;
|
||||
case 'faulted':
|
||||
return WorkflowStatus.Faulted;
|
||||
case 'cancelled':
|
||||
return WorkflowStatus.Cancelled;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const workflowInstances = this.workflowInstances.items;
|
||||
|
|
@ -163,7 +121,7 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
</div>
|
||||
{this.renderWorkflowFilter()}
|
||||
{this.renderStatusFilter()}
|
||||
<elsa-dropdown-button text="@SelectedOrderByText" items={[]} icon={null} origin={DropdownButtonOrigin.TopRight}/>
|
||||
{this.renderOrderByFilter()}
|
||||
</div>
|
||||
|
||||
<div class="mt-8 sm:block">
|
||||
|
|
@ -209,6 +167,7 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
const workflowBlueprint = workflowBlueprints.find(x => x.id == workflowInstance.definitionId && x.version == workflowInstance.version) ?? {displayName: '(Workflow definition not found)'};
|
||||
const displayName = workflowBlueprint.displayName;
|
||||
const statusColor = this.getStatusColor(workflowInstance.workflowStatus);
|
||||
debugger;
|
||||
const viewUrl = `/workflow-instances/${workflowInstance.id}/viewer`;
|
||||
const instanceName = !workflowInstance.name ? '' : workflowInstance.name;
|
||||
const isSelected = this.selectedWorkflowInstanceIds.findIndex(x => x === workflowInstance.id) >= 0;
|
||||
|
|
@ -234,7 +193,7 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
</td>
|
||||
<td class="hidden md:table-cell px-6 py-3 whitespace-no-wrap text-sm leading-5 text-gray-500 text-right">
|
||||
<div class="flex items-center space-x-3 lg:pl-2">
|
||||
<div class="flex-shrink-0 w-2.5 h-2.5 rounded-full bg-@statusColor-600"/>
|
||||
<div class={`flex-shrink-0 w-2.5 h-2.5 rounded-full bg-${statusColor}-600`}/>
|
||||
<span>{workflowInstance.workflowStatus}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -288,20 +247,47 @@ export class ElsaWorkflowInstancesListScreen {
|
|||
let items: Array<DropdownButtonItem> = latestWorkflowBlueprints.map(x => ({text: x.displayName!, value: x.id, url: this.buildFilterUrl(x.id, selectedWorkflowStatus, SelectedOrderBy), isSelected: x.id == selectedWorkflowId}));
|
||||
|
||||
items = [{text: 'All', value: null, url: this.buildFilterUrl(null, selectedWorkflowStatus, SelectedOrderBy), isSelected: !selectedWorkflowId}, ...items];
|
||||
|
||||
const icon = <svg class="mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<rect x="4" y="4" width="6" height="6" rx="1"/>
|
||||
<rect x="14" y="4" width="6" height="6" rx="1"/>
|
||||
<rect x="4" y="14" width="6" height="6" rx="1"/>
|
||||
<rect x="14" y="14" width="6" height="6" rx="1"/>
|
||||
</svg>;
|
||||
|
||||
return <elsa-dropdown-button text={selectedWorkflowText} items={items} icon={null} origin={DropdownButtonOrigin.TopRight} onItemSelected={e => this.selectedWorkflowId = e.detail.value as string}/>
|
||||
return <elsa-dropdown-button text={selectedWorkflowText} items={items} icon={icon} origin={DropdownButtonOrigin.TopRight} onItemSelected={e => this.selectedWorkflowId = e.detail.value as string}/>
|
||||
}
|
||||
|
||||
renderStatusFilter(){
|
||||
const selectedWorkflowStatus = this.selectedWorkflowStatus;
|
||||
const selectedWorkflowStatusText = selectedWorkflowStatus != null ? this.getStatusText(selectedWorkflowStatus) : 'Status';
|
||||
const selectedWorkflowStatusText = !!selectedWorkflowStatus ? selectedWorkflowStatus : 'Status';
|
||||
const statuses: Array<WorkflowStatus> = [null, WorkflowStatus.Running, WorkflowStatus.Suspended, WorkflowStatus.Finished, WorkflowStatus.Faulted, WorkflowStatus.Cancelled, WorkflowStatus.Idle];
|
||||
|
||||
const items: Array<DropdownButtonItem> = statuses.map(x => {
|
||||
const enumText = x != null ? this.getStatusText(x) : null;
|
||||
const text = !!enumText ? enumText : 'All';
|
||||
const text = x ?? 'All';
|
||||
return ({text: text, url: this.buildFilterUrl(this.selectedWorkflowId, x, this.selectedOrderBy), isSelected: x == selectedWorkflowStatus});
|
||||
});
|
||||
|
||||
return <elsa-dropdown-button text={selectedWorkflowStatusText} items={items} icon={null} origin={DropdownButtonOrigin.TopRight}/>
|
||||
const icon = <svg class="mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<circle cx="12" cy="12" r="10"/> <polygon points="10 8 16 12 10 16 10 8"/>
|
||||
</svg>;
|
||||
|
||||
return <elsa-dropdown-button text={selectedWorkflowStatusText} items={items} icon={icon} origin={DropdownButtonOrigin.TopRight}/>
|
||||
}
|
||||
|
||||
renderOrderByFilter(){
|
||||
const selectedOrderBy = this.selectedOrderBy;
|
||||
const selectedOrderByText = !!selectedOrderBy ? `Sort by: ${selectedOrderBy}` : 'Sort';
|
||||
const orderByValues: Array<OrderBy> = [OrderBy.Finished, OrderBy.LastExecuted, OrderBy.Started];
|
||||
const items: Array<DropdownButtonItem> = orderByValues.map(x => {
|
||||
return ({text: x, url: this.buildFilterUrl(this.selectedWorkflowId, this.selectedWorkflowStatus, x), isSelected: x == selectedOrderBy});
|
||||
});
|
||||
|
||||
const icon = <svg class="mr-3 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"/>
|
||||
</svg>;
|
||||
|
||||
return <elsa-dropdown-button text={selectedOrderByText} items={items} icon={icon} origin={DropdownButtonOrigin.TopRight}/>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,15 +99,15 @@ export interface WorkflowContextOptions {
|
|||
}
|
||||
|
||||
export enum WorkflowContextFidelity {
|
||||
Burst,
|
||||
Activity
|
||||
Burst= 'Burst',
|
||||
Activity = 'Activity'
|
||||
}
|
||||
|
||||
export enum WorkflowPersistenceBehavior {
|
||||
Suspended,
|
||||
WorkflowBurst,
|
||||
WorkflowPassCompleted,
|
||||
ActivityExecuted
|
||||
Suspended= 'Suspended',
|
||||
WorkflowBurst= ' WorkflowBurst',
|
||||
WorkflowPassCompleted = 'WorkflowPassCompleted',
|
||||
ActivityExecuted = 'ActivityExecuted'
|
||||
}
|
||||
|
||||
export interface VersionOptions {
|
||||
|
|
@ -120,18 +120,18 @@ export interface VersionOptions {
|
|||
}
|
||||
|
||||
export enum WorkflowStatus {
|
||||
Idle,
|
||||
Running,
|
||||
Finished,
|
||||
Suspended,
|
||||
Faulted,
|
||||
Cancelled
|
||||
Idle= 'Idle',
|
||||
Running = 'Running',
|
||||
Finished = 'Finished',
|
||||
Suspended = 'Suspended',
|
||||
Faulted = 'Faulted',
|
||||
Cancelled = 'Cancelled'
|
||||
}
|
||||
|
||||
export enum OrderBy {
|
||||
Started,
|
||||
LastExecuted,
|
||||
Finished
|
||||
Started= 'Started',
|
||||
LastExecuted = 'LastExecuted',
|
||||
Finished = 'Finished'
|
||||
}
|
||||
|
||||
export const getVersionOptionsString = (versionOptions?: VersionOptions) => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ module.exports = {
|
|||
enabled: !dev,
|
||||
content: ['./src/**/*.tsx', './src/**/*.html'],
|
||||
options: {
|
||||
safelist: ['jtk-connector', 'rose', 'light-blue']
|
||||
safelist: ['jtk-connector', 'rose', 'light-blue', 'bg-gray-600', 'bg-pink-600', 'bg-blue-600', 'bg-green-600', 'bg-red-600', 'bg-yellow-600']
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue