first dialog

frontends/dnet-is-application/src/app/app.component.css

@@ -3,7 +3,7 @@
   }
   
  .sidenav {
-    width: 400px;
+    width: 350px;
  }
   
  .sidenav .mat-toolbar {
@@ -15,4 +15,3 @@
     top: 0;
     z-index: 1;
  }
-  

frontends/dnet-is-application/src/app/app.module.ts

@@ -6,7 +6,6 @@ import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { InfoComponent } from './info/info.component';
-import { DatafilterPipe } from './datafilter.pipe';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -24,17 +23,18 @@ import { MatTableModule } from '@angular/material/table';
 import { ProtocolsComponent } from './protocols/protocols.component';
 import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.component';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { WfHistoryComponent } from './wf-history/wf-history.component';
+import { WfDialog, WfHistoryComponent } from './wf-history/wf-history.component';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [
     AppComponent,
-    InfoComponent,
-    DatafilterPipe,
-    MainMenuTreeComponent,
-    ProtocolsComponent,
     MainMenuPanelsComponent,
-    WfHistoryComponent
+    MainMenuTreeComponent,
+    InfoComponent,
+    ProtocolsComponent,
+    WfHistoryComponent,
+    WfDialog
   ],
   imports: [
     BrowserModule,
@@ -54,7 +54,8 @@ import { WfHistoryComponent } from './wf-history/wf-history.component';
     MatFormFieldModule,
     MatInputModule,
     MatTableModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatDialogModule
   ],
   providers: [],
   bootstrap: [AppComponent]

frontends/dnet-is-application/src/app/datafilter.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { DatafilterPipe } from './datafilter.pipe';
-
-describe('DatafilterPipe', () => {
-  it('create an instance', () => {
-    const pipe = new DatafilterPipe();
-    expect(pipe).toBeTruthy();
-  });
-});

frontends/dnet-is-application/src/app/datafilter.pipe.ts

@@ -1,22 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'datafilter'
-})
-export class DatafilterPipe implements PipeTransform {
-
-  transform(items: any[], searchTerm?: string) {
-    let filteredList: any[] = [];
-    if (searchTerm) {      
-      return items.filter(item => 
-        Object.keys(item).some(k => item[k] != null && 
-        item[k].toString().toLowerCase()
-        .includes(searchTerm.toLowerCase()))
-        );
-    }
-    else {
-      return items;
-    }
-  }
-
-}

frontends/dnet-is-application/src/app/info/info.component.ts

@@ -1,18 +1,7 @@
 import { Component } from '@angular/core';
 import { ISService } from '../is.service';
 import { MatTableDataSource } from '@angular/material/table';
-
-export interface KeyValue {
-  k: string;
-  v: string;
-}
-
-export interface Module {
-  group: string;
-  name: string;
-  versions: string[];
-  files: string[];
-}
+import { KeyValue, Module } from '../model/controller.model';
 
 export interface KeyValueDatasource {
   name: string;

frontends/dnet-is-application/src/app/model/controller.model.ts

@@ -6,6 +6,18 @@ export interface ResourceType {
     simple:boolean	
 }
 
+export interface KeyValue {
+    k: string;
+    v: string;
+  }
+  
+  export interface Module {
+    group: string;
+    name: string;
+    versions: string[];
+    files: string[];
+  }
+
 export interface ProtocolParams {
     name:string
     label:string

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

@@ -0,0 +1,31 @@
+<h1 mat-dialog-title>Details</h1>
+
+<div mat-dialog-content>
+
+  <mat-form-field style="width: 100%;">
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #filterParams />
+  </mat-form-field>
+
+  <table mat-table [dataSource]="wfDatasource" class="mat-elevation-z8">
+
+    <ng-container matColumnDef="k">
+      <th mat-header-cell *matHeaderCellDef>k</th>
+      <td mat-cell *matCellDef="let element">{{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>
+    </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="2">No data matching the filter "{{filterParams.value}}"</td>
+    </tr>
+  </table>
+
+</div>

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

@@ -12,16 +12,18 @@
         <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> {{wfDatasource.filteredData.length}}</span>
+        <span><b>Count :</b> {{historyDatasource.filteredData.length}}</span>
     </p>   
 
 
 
-      <table mat-table [dataSource]="wfDatasource" class="mat-elevation-z8">
+      <table mat-table [dataSource]="historyDatasource" class="mat-elevation-z8">
 
         <ng-container matColumnDef="processId">
           <th mat-header-cell *matHeaderCellDef> Process Id </th>
-          <td mat-cell *matCellDef="let element"> {{element.processId}} </td>
+          <td mat-cell *matCellDef="let element">
+            <a (click)="openWfDialog(element)">{{element.processId}}</a>
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="name">

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

@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { ISService } from '../is.service';
 import { MatTableDataSource } from '@angular/material/table';
 import { WfHistoryEntry } from '../model/controller.model';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import {map} from 'rxjs/operators';
+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',
@@ -13,16 +15,16 @@ import {map} from 'rxjs/operators';
 })
 export class WfHistoryComponent {
 
-  wfDatasource:MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]); 
-  
-  colums : string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
+  historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
 
-  total:number = 100
-  from:number = -1
-  to:number = -1
+  colums: string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
+
+  total: number = 100
+  from: number = -1
+  to: number = -1
+
+  constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) {
 
-  constructor(public service:ISService, route: ActivatedRoute)  {
-    
     let totalP = route.snapshot.paramMap.get('total');
     let fromP = route.snapshot.queryParamMap.get('from');
     let toP = route.snapshot.queryParamMap.get('to');
@@ -32,14 +34,48 @@ export class WfHistoryComponent {
     if (toP) { this.to = parseInt(toP); }
 
     this.service.loadWfHistory(this.total, this.from, this.to).subscribe({
-      next:(data:WfHistoryEntry[]) => this.wfDatasource.data = data,
-      error:error => console.log(error),
-      complete:() => console.log("Completed")
+      next: (data: WfHistoryEntry[]) => this.historyDatasource.data = data,
+      error: error => console.log(error),
+      complete: () => console.log("Completed")
     })
   }
 
+  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',
+})
+export class WfDialog {
+
+  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[] = [];
+    for (let [key, value] of new Map(Object.entries(data.details))) {
+      list.push({k: key, v: value});
+    }
+    this.wfDatasource.data = list;
+  }
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
     this.wfDatasource.filter = filterValue;
   }
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
 }

frontends/dnet-is-application/src/styles.css

@@ -14,3 +14,14 @@ table {
 .text-monospace {
     font-family: monospace;
 }
+
+a:not([href]) {
+    cursor: pointer; 
+    -webkit-user-select: none; 
+    -moz-user-select: none; 
+    user-select: none;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    color: #336699;
+}
+