dnet-applications/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts

import { Component, Inject,AfterViewInit, OnInit, ViewChild } from '@angular/core';
import { ISService } from '../is.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort, Sort } from '@angular/material/sort';
import { WfHistoryEntry } from '../model/controller.model';
import { ActivatedRoute, Params } from '@angular/router';
import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { KeyValue } from '../model/controller.model';

@Component({
  selector: 'app-wf-history',
  templateUrl: './wf-history.component.html',
  styleUrls: ['./wf-history.component.css']
})
export class WfHistoryComponent implements AfterViewInit , OnInit{

  historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);

  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).subscribe({
        next: (data: WfHistoryEntry[]) => this.historyDatasource.data = data,
        error: error => console.log(error),
        complete: () => console.log("Completed")
      })
    });
  }

  @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<KeyValue> = new MatTableDataSource<KeyValue>([]);
  colums: string[] = ['k', 'v'];

  constructor(
    public dialogRef: MatDialogRef<WfDialog>,
    @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;
}




}