import { Component, Inject,AfterViewInit, OnInit, ViewChild } from '@angular/core'; import { ISService } from '../common/is.service'; import { MatTableDataSource } from '@angular/material/table'; import { MatSort } from '@angular/material/sort'; import { WfHistoryEntry, KeyValue } from '../common/is.model'; import { ActivatedRoute, Params } from '@angular/router'; import { combineLatest } from 'rxjs'; import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; @Component({ selector: 'app-wf-history', templateUrl: './wf-history.component.html', styleUrls: ['./wf-history.component.css'] }) export class WfHistoryComponent implements AfterViewInit , OnInit{ historyDatasource: MatTableDataSource = new MatTableDataSource([]); colums: string[] = ['processId', 'name', 'family', 'dsName', 'status', 'startDate', 'endDate']; total: number = 100 from: number = -1 to: number = -1 constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) { } ngOnInit() { combineLatest([ this.route.params, this.route.queryParams ], (params: Params, queryParams: Params) => ({ params, queryParams }) ).subscribe((res: { params: Params; queryParams: Params }) => { const { params, queryParams} = res; let totalP = queryParams['total']; let fromP = queryParams['from']; let toP = queryParams['to']; if (totalP) { this.total = parseInt(totalP); } if (fromP) { this.from = parseInt(fromP); } if (toP) { this.to = parseInt(toP); } this.service.loadWfHistory(this.total, this.from, this.to, (data: WfHistoryEntry[]) => this.historyDatasource.data = data); }); } @ViewChild(MatSort) sort: MatSort | undefined ngAfterViewInit() { if(this.sort) this.historyDatasource.sort = this.sort; } applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase(); this.historyDatasource.filter = filterValue; } openWfDialog(wf: WfHistoryEntry): void { const wfDialogRef = this.dialog.open(WfDialog, { data: wf }); } } @Component({ selector: 'wf-dialog', templateUrl: 'wf-dialog.html', styleUrls: ['wf-history.component.css'] }) export class WfDialog { startDate:string = ''; endDate:string = ''; duration:string = ''; wfDatasource: MatTableDataSource = new MatTableDataSource([]); colums: string[] = ['k', 'v']; constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: WfHistoryEntry, ) { let list:KeyValue[] = []; let map = new Map(Object.entries(data.details)); for (let [key, value] of map) { list.push({k: key, v: value}); } this.wfDatasource.data = list; this.startDate = data.startDate; this.endDate = data.endDate; this.duration = this.calculateDateDiff( parseInt(map.get('system:startDate')), parseInt(map.get('system:endDate')) ); } applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase(); this.wfDatasource.filter = filterValue; } onNoClick(): void { this.dialogRef.close(); } calculateDateDiff(start:number, end:number):string { if (start <= 0 || end <= 0) { return '-'; } var seconds = 0; var minutes = 0; var hours = 0; var days = 0; if (end > start) { seconds = Math.round((end - start) / 1000); if (seconds > 60) { minutes = Math.floor(seconds / 60); seconds = seconds % 60; if (minutes > 60) { hours = Math.floor(minutes / 60); minutes = minutes % 60; if (hours > 24) { days = Math.floor(hours / 24); hours = hours % 24; } } } } var res = ''; if (days > 0) { if (res) { res += ', '; } res += days + " day(s)" } if (hours > 0) { if (res) { res += ', '; } res += hours + " hour(s)" } if (minutes > 0) { if (res) { res += ', '; } res += minutes + " minute(s)" } if (seconds > 0) { if (res) { res += ', '; } res += seconds + " second(s)" } if (!res) { res = '0 seconds'; } return res; } }