new-is-app-angular2 #12
|
@ -12,12 +12,12 @@
|
|||
|
||||
<ng-container matColumnDef="k">
|
||||
<th mat-header-cell *matHeaderCellDef> Property </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.k}} </td>
|
||||
<td mat-cell *matCellDef="let element" style="width: 30%"> {{element.k}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="v">
|
||||
<th mat-header-cell *matHeaderCellDef> Value </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.v}} </td>
|
||||
<td mat-cell *matCellDef="let element" style="width: 70%"> {{element.v}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-row *matRowDef="let row; columns: displayedKVColumns;"></tr>
|
||||
|
@ -36,23 +36,23 @@
|
|||
<table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="group">
|
||||
<th mat-header-cell *matHeaderCellDef> Group </th>
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> Group </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.group}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="versions">
|
||||
<th mat-header-cell *matHeaderCellDef> Versions </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.versions}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 10%;"> Versions </th>
|
||||
<td mat-cell *matCellDef="let element"> <span *ngFor="let v of element.versions">{{v}}<br /></span> </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="files">
|
||||
<th mat-header-cell *matHeaderCellDef> Files </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.files}} </td>
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 60%;"> Files </th>
|
||||
<td mat-cell *matCellDef="let element"> <span *ngFor="let f of element.files">{{f}}<br /></span> </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>
|
||||
|
|
|
@ -14,3 +14,5 @@
|
|||
|
||||
.collapse-buttons { text-align: right; }
|
||||
.collapse-buttons button { font-size: 0.6em; }
|
||||
|
||||
.mat-expansion-panel-spacing { margin: 0; }
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<h1 mat-dialog-title>Details</h1>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<p style="font-size: 0.8em;">
|
||||
<b>Started at: </b>{{startDate}}<br />
|
||||
<b>Finished at: </b>{{endDate}}<br />
|
||||
<b>Duration: </b>{{duration}}<br />
|
||||
</p>
|
||||
|
||||
<mat-form-field style="width: 100%;">
|
||||
<mat-label>Filter</mat-label>
|
||||
|
@ -11,12 +16,12 @@
|
|||
|
||||
<ng-container matColumnDef="k">
|
||||
<th mat-header-cell *matHeaderCellDef>k</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.k}}</td>
|
||||
<td mat-cell *matCellDef="let element" style="width: 30%;">{{element.k}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="v">
|
||||
<th mat-header-cell *matHeaderCellDef>v</th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.v}} </td>
|
||||
<td mat-cell *matCellDef="let element" style="width: 70%;"> {{element.v}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- <tr mat-header-row *matHeaderRowDef="colums"></tr> -->
|
||||
|
@ -29,3 +34,7 @@
|
|||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button mat-dialog-close>Close</button>
|
||||
</div>
|
||||
|
|
|
@ -1,70 +1,67 @@
|
|||
<h2>Workflow History</h2>
|
||||
<h2>Workflow History</h2>
|
||||
|
||||
<mat-form-field style="width: 100%;">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%;">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<p>
|
||||
<span *ngIf="from < 0 && to < 0"><b>Recent workflows</b> (max {{total}})</span>
|
||||
<span *ngIf="from >= 0 && to >= 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> {{to | date:"yyyy-MM-dd HH:mm:ss"}}</span>
|
||||
<span *ngIf="from >= 0 && to < 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> <i>undefined</i></span>
|
||||
<span *ngIf="from < 0 && to >= 0"><b>Workflows from </b><i>undefined</i> <b>to</b> {{to | date:"yyyy-MM-dd HH:mm:ss"}}</span>
|
||||
<br />
|
||||
<span><b>Count :</b> {{historyDatasource.filteredData.length}}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span *ngIf="from < 0 && to < 0"><b>Recent workflows</b> (max {{total}})</span>
|
||||
<span *ngIf="from >= 0 && to >= 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b> {{to |
|
||||
date:"yyyy-MM-dd HH:mm:ss"}}</span>
|
||||
<span *ngIf="from >= 0 && to < 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b>
|
||||
<i>undefined</i></span>
|
||||
<span *ngIf="from < 0 && to >= 0"><b>Workflows from </b><i>undefined</i> <b>to</b> {{to | date:"yyyy-MM-dd
|
||||
HH:mm:ss"}}</span>
|
||||
<br />
|
||||
<span><b>Count :</b> {{historyDatasource.filteredData.length}}</span>
|
||||
</p>
|
||||
|
||||
<table mat-table [dataSource]="historyDatasource" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="processId">
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> Process Id </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<a (click)="openWfDialog(element)">{{element.processId}}</a>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<table mat-table [dataSource]="historyDatasource" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 15%;"> Workflow Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="processId">
|
||||
<th mat-header-cell *matHeaderCellDef> Process Id </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<a (click)="openWfDialog(element)">{{element.processId}}</a>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="family">
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 10%;"> Workflow Family </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.family}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Workflow Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="dsName">
|
||||
<th mat-header-cell *matHeaderCellDef style="width: 20%;"> Datasource </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.dsName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="family">
|
||||
<th mat-header-cell *matHeaderCellDef> Workflow Family </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.family}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="dsName">
|
||||
<th mat-header-cell *matHeaderCellDef> Datasource </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.dsName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef> Status </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.status}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="startDate">
|
||||
<th mat-header-cell *matHeaderCellDef> Start Date </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="endDate">
|
||||
<th mat-header-cell *matHeaderCellDef> End Date </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.endDate}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="colums"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: colums;"></tr>
|
||||
|
||||
<!-- Row shown when there is no matching data. -->
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
|
||||
</tr>
|
||||
</table>
|
||||
<ng-container matColumnDef="status" style="width: 10%;">
|
||||
<th mat-header-cell *matHeaderCellDef> Status </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.status}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="startDate" style="width: 15%;">
|
||||
<th mat-header-cell *matHeaderCellDef> Start Date </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="endDate" style="width: 15%;">
|
||||
<th mat-header-cell *matHeaderCellDef> End Date </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.endDate}} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="colums"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: colums;"></tr>
|
||||
|
||||
<!-- Row shown when there is no matching data. -->
|
||||
<tr class="mat-row" *matNoDataRow>
|
||||
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
|
||||
</tr>
|
||||
</table>
|
|
@ -17,7 +17,7 @@ export class WfHistoryComponent {
|
|||
|
||||
historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
|
||||
|
||||
colums: string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
|
||||
colums: string[] = ['processId', 'name', 'family', 'dsName', 'status', 'startDate', 'endDate'];
|
||||
|
||||
total: number = 100
|
||||
from: number = -1
|
||||
|
@ -55,8 +55,13 @@ export class WfHistoryComponent {
|
|||
@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'];
|
||||
|
@ -66,10 +71,17 @@ export class WfDialog {
|
|||
@Inject(MAT_DIALOG_DATA) public data: WfHistoryEntry,
|
||||
) {
|
||||
let list:KeyValue[] = [];
|
||||
for (let [key, value] of new Map(Object.entries(data.details))) {
|
||||
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();
|
||||
|
@ -78,4 +90,57 @@ export class WfDialog {
|
|||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
|
@ -15,7 +15,7 @@ table {
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
a:not([href]) {
|
||||
a, a:not([href]) {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
@ -25,3 +25,21 @@ a:not([href]) {
|
|||
color: #336699;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed !important;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
th, td {
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
font-size: 0.9em !important;
|
||||
padding-top: 0.5em !important;
|
||||
padding-bottom: 0.5em !important;
|
||||
}
|
||||
|
||||
.muted { color: darkgray; }
|
||||
|
|
Loading…
Reference in New Issue