File
Implements
Metadata
| selector |
cd-task-manager |
| styleUrls |
./task-manager.component.scss |
| templateUrl |
./task-manager.component.html |
Methods
|
_handleTasks
|
_handleTasks(executingTasks: ExecutingTask[], finishedTasks: FinishedTask[])
|
|
|
Parameters :
| Name |
Type |
Optional |
| executingTasks |
ExecutingTask[]
|
No
|
| finishedTasks |
FinishedTask[]
|
No
|
|
|
_setIcon
|
_setIcon(executingTasks: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| executingTasks |
number
|
No
|
|
|
executingTasks
|
Type : ExecutingTask[]
|
Default value : []
|
|
|
|
finishedTasks
|
Type : FinishedTask[]
|
Default value : []
|
|
|
|
icon
|
Type : string
|
Default value : 'fa-hourglass-o'
|
|
|
import { Component, OnInit } from '@angular/core';
import { ExecutingTask } from '../../../shared/models/executing-task';
import { FinishedTask } from '../../../shared/models/finished-task';
import { SummaryService } from '../../../shared/services/summary.service';
import { TaskMessageService } from '../../../shared/services/task-message.service';
@Component({
selector: 'cd-task-manager',
templateUrl: './task-manager.component.html',
styleUrls: ['./task-manager.component.scss']
})
export class TaskManagerComponent implements OnInit {
executingTasks: ExecutingTask[] = [];
finishedTasks: FinishedTask[] = [];
icon = 'fa-hourglass-o';
constructor(
private summaryService: SummaryService,
private taskMessageService: TaskMessageService
) {}
ngOnInit() {
this.summaryService.subscribe((data: any) => {
if (!data) {
return;
}
this._handleTasks(data.executing_tasks, data.finished_tasks);
this._setIcon(data.executing_tasks.length);
});
}
_handleTasks(executingTasks: ExecutingTask[], finishedTasks: FinishedTask[]) {
for (const excutingTask of executingTasks) {
excutingTask.description = this.taskMessageService.getRunningTitle(excutingTask);
}
for (const finishedTask of finishedTasks) {
if (finishedTask.success === false) {
finishedTask.description = this.taskMessageService.getErrorTitle(finishedTask);
finishedTask.errorMessage = this.taskMessageService.getErrorMessage(finishedTask);
} else {
finishedTask.description = this.taskMessageService.getSuccessTitle(finishedTask);
}
}
this.executingTasks = executingTasks;
this.finishedTasks = finishedTasks;
}
_setIcon(executingTasks: number) {
const iconSuffix = ['o', 'start', 'half', 'end']; // TODO: Use all suffixes
const iconIndex = executingTasks > 0 ? 1 : 0;
this.icon = 'fa-hourglass-' + iconSuffix[iconIndex];
}
}
<ng-template #popTemplate>
<!-- Executing -->
<div *ngIf="executingTasks.length > 0">
<div class="separator">EXECUTING</div>
<hr>
<div *ngFor="let executingTask of executingTasks">
<table>
<tr>
<td rowspan="3" class="icon-col text-center">
<span class="fa-stack fa-2x text-info">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-spinner fa-spin"></i>
</span>
</td>
<td colspan="3"><strong>{{ executingTask.description }}</strong></td>
</tr>
<tr>
<td colspan="2">
<small class="date">{{ executingTask.begin_time | cdDate }}</small>
</td>
<td class="text-right italic" nowrap *ngIf="executingTask.progress"><span>{{ executingTask.progress }} %</span></td>
</tr>
</table>
<hr>
</div>
</div>
<!-- Finished -->
<div *ngIf="finishedTasks.length > 0">
<div class="separator">FINISHED</div>
<hr>
<div *ngFor="let finishedTask of finishedTasks">
<table>
<tr>
<td rowspan="3" class="icon-col text-center">
<span *ngIf="!finishedTask.errorMessage">
<span class="fa-stack fa-2x text-success">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-check"></i>
</span>
</span>
<span *ngIf="finishedTask.errorMessage">
<span class="fa-stack fa-2x text-danger">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x fa-inverse fa-exclamation-triangle"></i>
</span>
</span>
</td>
<td colspan="2">
<strong>{{ finishedTask.description }}</strong>
</td>
</tr>
<tr>
<td></td>
<td>
<span *ngIf="finishedTask.errorMessage" class="text-danger">
{{ finishedTask.errorMessage }}
</span>
</td>
</tr>
<tr>
<td colspan="2">
<small class="date">{{ finishedTask.end_time | cdDate }}</small>
</td>
</tr>
</table>
<hr>
</div>
</div>
<!-- Empty -->
<div *ngIf="executingTasks.length === 0 && finishedTasks.length === 0">
<div class="message" i18n>There are no background tasks.</div>
</div>
</ng-template>
<a [popover]="popTemplate"
placement="bottom"
container="body"
outsideClick="true"
i18n-title
title="Background Tasks">
<i class="fa fa-fw"
[ngClass]="icon"></i>
<span i18n
class="visible-xs-inline-block">Background Tasks</span>
<span *ngIf="executingTasks.length > 0"> ({{ executingTasks.length }})</span>
</a>
@import '../../../../styles/popover.scss';
Legend
Html element with directive