src/app/tasks/task-schedule/summary/task-schedule-summary.component.ts
Component that shows the summary details of a Task Schedule
selector | app-task-schedule-summary |
styleUrls | .styles.scss |
templateUrl | task-schedule-summary.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, router: Router, tasksService: TasksService)
|
||||||||||||||||
Constructor
Parameters :
|
detailsTask | ||||||||
detailsTask(taskName: string)
|
||||||||
Navigate to the task page
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Init component, call refresh method
Returns :
void
|
refresh |
refresh()
|
Refresh
Returns :
void
|
schedule$ |
schedule$:
|
Type : Observable<any>
|
Observable of schedule information Contains the task schedule and a related task definition |
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { mergeMap, map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { TasksService } from '../../tasks.service';
import { TaskDefinition } from '../../model/task-definition';
import { TaskSchedule } from '../../model/task-schedule';
/**
* Component that shows the summary details of a Task Schedule
*
* @author Damien Vitrac
*/
@Component({
selector: 'app-task-schedule-summary',
templateUrl: 'task-schedule-summary.component.html',
styleUrls: ['../styles.scss'],
})
export class TaskScheduleSummaryComponent implements OnInit {
/**
* Observable of schedule information
* Contains the task schedule and a related task definition
*/
schedule$: Observable<any>;
/**
* Constructor
*
* @param {ActivatedRoute} route
* @param {Router} router
* @param {TasksService} tasksService
*/
constructor(private route: ActivatedRoute,
private router: Router,
private tasksService: TasksService) {
}
/**
* Init component, call refresh method
*/
ngOnInit() {
this.refresh();
}
/**
* Refresh
*/
refresh() {
this.schedule$ = this.route.parent.params
.pipe(mergeMap(
(params: Params) => this.tasksService.getSchedule(params.id)
))
.pipe(mergeMap(
(schedule: TaskSchedule) => this.tasksService.getDefinition(schedule.taskName)
.pipe(map((task: TaskDefinition) => {
return {
schedule: schedule,
task: task
};
})),
));
}
/**
* Navigate to the task page
* @param {string} taskName
*/
detailsTask(taskName: string) {
this.router.navigate([`/tasks/definitions/${taskName}`]);
}
}
<div *ngIf="schedule$ | async as schedule; else loading" dataflowLayoutType type="large">
<div>
<div class="row schedule-summary-row">
<div class="col-md-3">
<strong>Schedule name:</strong>
</div>
<div class="col-md-21">
{{ schedule.schedule.name }}
</div>
</div>
<div class="row schedule-summary-row">
<div class="col-md-3">
<strong>Task name:</strong>
</div>
<div class="col-md-21">
<a style="cursor: pointer" (click)="detailsTask(schedule.task.name)">
{{ schedule.task.name }}
</a>
</div>
</div>
<div class="row schedule-summary-row">
<div class="col-md-3">
<strong>Task definition:</strong>
</div>
<div class="col-md-21">
<app-stream-dsl>{{ schedule.task.dslText }}</app-stream-dsl>
</div>
</div>
<hr>
<div class="row schedule-summary-row" *ngIf="schedule.schedule.cronExpression">
<div class="col-md-3">
<strong>Cron Expression:</strong>
</div>
<div class="col-md-21">
{{ schedule.schedule.cronExpression }}
</div>
</div>
</div>
</div>
<ng-template #loading>
<app-loader></app-loader>
</ng-template>