D-Net
/
dnet-applications
23
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">
<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>

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 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>
<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> -->
@ -28,4 +33,8 @@
</tr>
</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-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>

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>([]);
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;
}
}

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

@ -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;
@ -24,4 +24,22 @@ a:not([href]) {
text-underline-offset: 3px;
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; }