92 lines
4.6 KiB
HTML
92 lines
4.6 KiB
HTML
<section class="h-full p-1">
|
|
@if (execution()) {
|
|
<div class="h-full bg-white border border-slate-200 rounded-md flex flex-col overflow-hidden">
|
|
<div class="px-5 pt-2 border-b border-slate-200 bg-slate-50">
|
|
<div class="flex items-stretch justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-base font-semibold text-slate-900">{{ execution()!.name }}</h2>
|
|
<p class="text-sm text-slate-500">Execution ID: {{ execution()!.id }}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="self-stretch h-full w-10 rounded-md border border-emerald-300 bg-emerald-50 text-emerald-600 hover:bg-emerald-100 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
aria-label="Start execution"
|
|
[disabled]="!canStartExecution() || startInProgress()"
|
|
(click)="startExecution()">
|
|
<i class="bi bi-play-fill text-lg leading-none"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-1 grid grid-cols-1 md:grid-cols-5 gap-3 border-b border-slate-200">
|
|
<div class="bg-slate-50 border border-slate-200 rounded-md p-2">
|
|
<div class="text-xs text-slate-500">Status</div>
|
|
<div class="text-sm font-medium text-slate-800">{{ execution()!.context.status }}</div>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 rounded-md p-2">
|
|
<div class="text-xs text-slate-500">Start</div>
|
|
<div class="text-sm font-medium text-slate-800">{{ execution()!.context.startTime ? (execution()!.context.startTime | date:'dd/MM/yyyy HH:mm:ss') : '-' }}</div>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 rounded-md p-2">
|
|
<div class="text-xs text-slate-500">End</div>
|
|
<div class="text-sm font-medium text-slate-800">{{ execution()!.context.endTime ? (execution()!.context.endTime | date:'dd/MM/yyyy HH:mm:ss') : '-' }}</div>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 rounded-md p-2">
|
|
<div class="text-xs text-slate-500">Duration</div>
|
|
<div class="text-sm font-medium text-slate-800">{{ formattedDuration() }}</div>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 rounded-md p-2">
|
|
<div class="text-xs text-slate-500">Steps</div>
|
|
<div class="text-sm font-medium text-slate-800">{{ stepsArray().length }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 min-h-0 flex gap-2 p-1">
|
|
<div class="flex-1 border border-slate-200 rounded-md bg-slate-50 min-h-0 overflow-hidden">
|
|
<div class="px-3 py-2 text-xs font-semibold text-slate-600 border-b border-slate-200 bg-white">Execution Graph (read-only)</div>
|
|
<div class="h-[calc(100%-33px)] execution-rete-readonly">
|
|
<app-rete-editor
|
|
[flowId]="execution()!.id"
|
|
[flowData]="executionFlowData()"
|
|
[nodeView]="'execution'"
|
|
[readonly]="true">
|
|
</app-rete-editor>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
class="self-center h-16 w-7 shrink-0 rounded-md border border-slate-300 bg-white text-slate-600 hover:bg-slate-50"
|
|
(click)="toggleContextAside()"
|
|
[attr.aria-label]="contextAsideOpen() ? 'Close execution context' : 'Open execution context'">
|
|
<i class="bi" [class.bi-chevron-right]="contextAsideOpen()" [class.bi-chevron-left]="!contextAsideOpen()"></i>
|
|
</button>
|
|
|
|
@if (contextAsideOpen()) {
|
|
<aside class="w-[360px] border border-slate-200 rounded-md bg-white min-h-0 overflow-auto">
|
|
<div class="px-3 py-2 text-xs font-semibold text-slate-600 border-b border-slate-200 bg-slate-50">Execution Inputs</div>
|
|
<app-task-execution-inputs-panel
|
|
[editableInputs]="editableInputs()"
|
|
[authorizationRequirements]="missingAuthorizationRequirements()"
|
|
[authorizationValues]="pendingAuthorizationValues()"
|
|
[savingAuthorizations]="savingAuthorizations()"
|
|
[authorizationErrors]="authorizationErrors()"
|
|
[savingInputs]="savingInputs()"
|
|
[savingErrors]="savingErrors()"
|
|
[readOnly]="inputsReadOnly()"
|
|
(authorizationValueChange)="onAuthorizationValueChange($event.requirement, $event.value)"
|
|
(authorizationSubmit)="submitAuthorization($event)"
|
|
(textInputChange)="onTextInputChange($event.input, $event.value)"
|
|
(fileInputChange)="onFileInputChange($event.input, $event.file)">
|
|
</app-task-execution-inputs-panel>
|
|
</aside>
|
|
}
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="h-full bg-white border border-slate-200 rounded-md text-slate-400 text-center flex items-center justify-center">
|
|
Select an execution from the left panel
|
|
</div>
|
|
}
|
|
</section>
|