D-Net
/
dnet-applications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ui

This commit is contained in:
Michele Artini 2023-01-24 10:08:55 +01:00
parent 9d8159b392
commit 4a41d8cf84
7 changed files with 164 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontends/dnet-is-application/src/app/info/info.component.html
View File

@ -12,12 +12,12 @@
<ng-container matColumnDef="k"> <ng-container matColumnDef="k">
<th mat-header-cell *matHeaderCellDef> Property </th> <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>
<ng-container matColumnDef="v"> <ng-container matColumnDef="v">
<th mat-header-cell *matHeaderCellDef> Value </th> <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> </ng-container>
<tr mat-row *matRowDef="let row; columns: displayedKVColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedKVColumns;"></tr>
@ -36,23 +36,23 @@
<table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8"> <table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">
<ng-container matColumnDef="group"> <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> <td mat-cell *matCellDef="let element"> {{element.group}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <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> <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="versions"> <ng-container matColumnDef="versions">
<th mat-header-cell *matHeaderCellDef> Versions </th> <th mat-header-cell *matHeaderCellDef style="width: 10%;"> Versions </th>
<td mat-cell *matCellDef="let element"> {{element.versions}} </td> <td mat-cell *matCellDef="let element"> <span *ngFor="let v of element.versions">{{v}}<br /></span> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="files"> <ng-container matColumnDef="files">
<th mat-header-cell *matHeaderCellDef> Files </th> <th mat-header-cell *matHeaderCellDef style="width: 60%;"> Files </th>
<td mat-cell *matCellDef="let element"> {{element.files}} </td> <td mat-cell *matCellDef="let element"> <span *ngFor="let f of element.files">{{f}}<br /></span> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>

2
frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
View File

@ -14,3 +14,5 @@
.collapse-buttons { text-align: right; } .collapse-buttons { text-align: right; }
.collapse-buttons button { font-size: 0.6em; } .collapse-buttons button { font-size: 0.6em; }
.mat-expansion-panel-spacing { margin: 0; }

15
frontends/dnet-is-application/src/app/wf-history/wf-dialog.html
View File

@ -1,6 +1,11 @@
<h1 mat-dialog-title>Details</h1> <h1 mat-dialog-title>Details</h1>
<div mat-dialog-content> <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-form-field style="width: 100%;">
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
@ -11,12 +16,12 @@
<ng-container matColumnDef="k"> <ng-container matColumnDef="k">
<th mat-header-cell *matHeaderCellDef>k</th> <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>
<ng-container matColumnDef="v"> <ng-container matColumnDef="v">
<th mat-header-cell *matHeaderCellDef>v</th> <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> </ng-container>
<!-- <tr mat-header-row *matHeaderRowDef="colums"></tr> --> <!-- <tr mat-header-row *matHeaderRowDef="colums"></tr> -->
@ -28,4 +33,8 @@
</tr> </tr>
</table> </table>
</div> </div>
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Close</button>
</div>

1
frontends/dnet-is-application/src/app/wf-history/wf-history.component.css
View File

@ -0,0 +1 @@

111
frontends/dnet-is-application/src/app/wf-history/wf-history.component.html
View File

@ -1,70 +1,67 @@
<h2>Workflow History</h2> <h2>Workflow History</h2>
<mat-form-field style="width: 100%;"> <mat-form-field style="width: 100%;">
<mat-label>Filter</mat-label> <mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input /> <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
</mat-form-field> </mat-form-field>
<p> <p>
<span *ngIf="from < 0 && to < 0"><b>Recent workflows</b> (max {{total}})</span> <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> {{to |
<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> date:"yyyy-MM-dd HH:mm:ss"}}</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> <span *ngIf="from >= 0 && to < 0"><b>Workflows from </b>{{from | date:"yyyy-MM-dd HH:mm:ss"}} <b>to</b>
<br /> <i>undefined</i></span>
<span><b>Count :</b> {{historyDatasource.filteredData.length}}</span> <span *ngIf="from < 0 && to >= 0"><b>Workflows from </b><i>undefined</i> <b>to</b> {{to | date:"yyyy-MM-dd
</p> 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"> <ng-container matColumnDef="family">
<th mat-header-cell *matHeaderCellDef> Process Id </th> <th mat-header-cell *matHeaderCellDef style="width: 10%;"> Workflow Family </th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element"> {{element.family}} </td>
<a (click)="openWfDialog(element)">{{element.processId}}</a> </ng-container>
</td>
</ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="dsName">
<th mat-header-cell *matHeaderCellDef> Workflow Name </th> <th mat-header-cell *matHeaderCellDef style="width: 20%;"> Datasource </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td> <td mat-cell *matCellDef="let element"> {{element.dsName}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="family"> <ng-container matColumnDef="status" style="width: 10%;">
<th mat-header-cell *matHeaderCellDef> Workflow Family </th> <th mat-header-cell *matHeaderCellDef> Status </th>
<td mat-cell *matCellDef="let element"> {{element.family}} </td> <td mat-cell *matCellDef="let element"> {{element.status}} </td>
</ng-container> </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="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>

69
frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts
View File

@ -17,7 +17,7 @@ export class WfHistoryComponent {
historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]); 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 total: number = 100
from: number = -1 from: number = -1
@ -55,8 +55,13 @@ export class WfHistoryComponent {
@Component({ @Component({
selector: 'wf-dialog', selector: 'wf-dialog',
templateUrl: 'wf-dialog.html', templateUrl: 'wf-dialog.html',
styleUrls: ['wf-history.component.css']
}) })
export class WfDialog { export class WfDialog {
startDate:string = '';
endDate:string = '';
duration:string = '';
wfDatasource: MatTableDataSource<KeyValue> = new MatTableDataSource<KeyValue>([]); wfDatasource: MatTableDataSource<KeyValue> = new MatTableDataSource<KeyValue>([]);
colums: string[] = ['k', 'v']; colums: string[] = ['k', 'v'];
@ -66,10 +71,17 @@ export class WfDialog {
@Inject(MAT_DIALOG_DATA) public data: WfHistoryEntry, @Inject(MAT_DIALOG_DATA) public data: WfHistoryEntry,
) { ) {
let list:KeyValue[] = []; 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}); list.push({k: key, v: value});
} }
this.wfDatasource.data = list; 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) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase(); const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
@ -78,4 +90,57 @@ export class WfDialog {
onNoClick(): void { onNoClick(): void {
this.dialogRef.close(); 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;
}
} }

22
frontends/dnet-is-application/src/styles.css
View File

@ -15,7 +15,7 @@ table {
font-family: monospace; font-family: monospace;
} }
a:not([href]) { a, a:not([href]) {
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -24,4 +24,22 @@ a:not([href]) {
text-underline-offset: 3px; text-underline-offset: 3px;
color: #336699; 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; }