From 118c3ac7d3ddf026bd454af5e274185a9e9a8ac8 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Fri, 20 Jan 2023 16:57:03 +0100
Subject: [PATCH] wf history

---
 .../src/app/app-routing.module.ts             |  4 +-
 .../dnet-is-application/src/app/app.module.ts |  4 +-
 .../src/app/info/info.component.html          | 66 ++++++++---------
 .../src/app/info/info.component.ts            |  7 +-
 ...mon.service.spec.ts => is.service.spec.ts} |  8 +-
 .../dnet-is-application/src/app/is.service.ts | 37 ++++++++++
 .../src/app/iscommon.service.ts               | 26 -------
 .../main-menu-panels.component.css            |  3 +
 .../main-menu-panels.component.html           |  8 +-
 .../main-menu-panels.component.ts             | 12 ++-
 .../main-menu-tree.component.html             |  4 +
 .../main-menu-tree.component.ts               |  4 +-
 .../src/app/model/controller.model.ts         | 13 ++++
 .../src/app/protocols/protocols.component.ts  |  4 +-
 .../app/wf-history/wf-history.component.css   |  0
 .../app/wf-history/wf-history.component.html  | 74 +++++++++++++++++++
 .../wf-history/wf-history.component.spec.ts   | 23 ++++++
 .../app/wf-history/wf-history.component.ts    | 45 +++++++++++
 18 files changed, 264 insertions(+), 78 deletions(-)
 rename frontends/dnet-is-application/src/app/{iscommon.service.spec.ts => is.service.spec.ts} (53%)
 create mode 100644 frontends/dnet-is-application/src/app/is.service.ts
 delete mode 100644 frontends/dnet-is-application/src/app/iscommon.service.ts
 create mode 100644 frontends/dnet-is-application/src/app/wf-history/wf-history.component.css
 create mode 100644 frontends/dnet-is-application/src/app/wf-history/wf-history.component.html
 create mode 100644 frontends/dnet-is-application/src/app/wf-history/wf-history.component.spec.ts
 create mode 100644 frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts

diff --git a/frontends/dnet-is-application/src/app/app-routing.module.ts b/frontends/dnet-is-application/src/app/app-routing.module.ts
index 835c774c..16f82460 100644
--- a/frontends/dnet-is-application/src/app/app-routing.module.ts
+++ b/frontends/dnet-is-application/src/app/app-routing.module.ts
@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { InfoComponent } from './info/info.component';
 import { ProtocolsComponent } from './protocols/protocols.component';
+import { WfHistoryComponent } from './wf-history/wf-history.component';
 
 const routes: Routes = [
   { path:"info"                   , component:InfoComponent},
-  { path:"adv_resources/protocol" , component:ProtocolsComponent}
+  { path:"adv_resources/protocol" , component:ProtocolsComponent},
+  { path:"wf_history"             , component:WfHistoryComponent}
 ];
 
 @NgModule({
diff --git a/frontends/dnet-is-application/src/app/app.module.ts b/frontends/dnet-is-application/src/app/app.module.ts
index 7b4deb15..16c370b6 100644
--- a/frontends/dnet-is-application/src/app/app.module.ts
+++ b/frontends/dnet-is-application/src/app/app.module.ts
@@ -24,6 +24,7 @@ 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';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { MatExpansionModule } from '@angular/material/expansion';
     DatafilterPipe,
     MainMenuTreeComponent,
     ProtocolsComponent,
-    MainMenuPanelsComponent
+    MainMenuPanelsComponent,
+    WfHistoryComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontends/dnet-is-application/src/app/info/info.component.html b/frontends/dnet-is-application/src/app/info/info.component.html
index 3768a4f4..3532f3a9 100644
--- a/frontends/dnet-is-application/src/app/info/info.component.html
+++ b/frontends/dnet-is-application/src/app/info/info.component.html
@@ -3,7 +3,7 @@
     <mat-card-title>Container Info</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    
+
     <mat-form-field style="margin-top: 3em; width: 100%;">
       <mat-label>Filter</mat-label>
       <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
@@ -35,39 +35,39 @@
     </div>
 
 
-      <div style="margin-top: 3em;" *ngIf="moduleDatasource.filteredData.length > 0">
-        <h3>Modules</h3>
-        <table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">
+    <div style="margin-top: 3em;" *ngIf="moduleDatasource.filteredData.length > 0">
+      <h3>Modules</h3>
+      <table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">
 
-          <ng-container matColumnDef="group">
-            <th mat-header-cell *matHeaderCellDef> Group </th>
-            <td mat-cell *matCellDef="let element"> {{element.group}} </td>
-          </ng-container>
-    
-          <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef> 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>
-          </ng-container>
-    
-          <ng-container matColumnDef="files">
-            <th mat-header-cell *matHeaderCellDef> Files </th>
-            <td mat-cell *matCellDef="let element"> {{element.files}} </td>
-          </ng-container>
-    
-          <tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedModuleColumns;"></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>
-      </div>
+        <ng-container matColumnDef="group">
+          <th mat-header-cell *matHeaderCellDef> Group </th>
+          <td mat-cell *matCellDef="let element"> {{element.group}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef> 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>
+        </ng-container>
+
+        <ng-container matColumnDef="files">
+          <th mat-header-cell *matHeaderCellDef> Files </th>
+          <td mat-cell *matCellDef="let element"> {{element.files}} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedModuleColumns;"></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>
+    </div>
 
   </mat-card-content>
 </mat-card>
diff --git a/frontends/dnet-is-application/src/app/info/info.component.ts b/frontends/dnet-is-application/src/app/info/info.component.ts
index eec79597..1416a49c 100644
--- a/frontends/dnet-is-application/src/app/info/info.component.ts
+++ b/frontends/dnet-is-application/src/app/info/info.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ISCommonService } from '../iscommon.service';
+import { ISService } from '../is.service';
 import { MatTableDataSource } from '@angular/material/table';
 
 export interface KeyValue {
@@ -19,7 +19,6 @@ export interface KeyValueDatasource {
   datasource: MatTableDataSource<any>;
 }
 
-
 @Component({
   selector: 'app-info',
   templateUrl: './info.component.html',
@@ -28,12 +27,12 @@ export interface KeyValueDatasource {
 export class InfoComponent {
   
   kvDatasources:KeyValueDatasource[] = [];
-  moduleDatasource:MatTableDataSource<Module[]> = new MatTableDataSource<Module[]>([]); 
+  moduleDatasource:MatTableDataSource<Module> = new MatTableDataSource<Module>([]); 
 
   displayedKVColumns: string[] = ['k', 'v'];
   displayedModuleColumns: string[] = ['group', 'name', 'versions', 'files'];
  
-  constructor(public service:ISCommonService)  {
+  constructor(public service:ISService)  {
     this.service.loadInfo().subscribe({
       next:(data:any[]) => {
         data.forEach(section => {
diff --git a/frontends/dnet-is-application/src/app/iscommon.service.spec.ts b/frontends/dnet-is-application/src/app/is.service.spec.ts
similarity index 53%
rename from frontends/dnet-is-application/src/app/iscommon.service.spec.ts
rename to frontends/dnet-is-application/src/app/is.service.spec.ts
index 06bf113e..ed56fec7 100644
--- a/frontends/dnet-is-application/src/app/iscommon.service.spec.ts
+++ b/frontends/dnet-is-application/src/app/is.service.spec.ts
@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { ISCommonService } from './iscommon.service';
+import { ISService } from './is.service';
 
-describe('ISCommonService', () => {
-  let service: ISCommonService;
+describe('ISService', () => {
+  let service: ISService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(ISCommonService);
+    service = TestBed.inject(ISService);
   });
 
   it('should be created', () => {
diff --git a/frontends/dnet-is-application/src/app/is.service.ts b/frontends/dnet-is-application/src/app/is.service.ts
new file mode 100644
index 00000000..3b2dcb77
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/is.service.ts
@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { ResourceType,Protocol,WfHistoryEntry } from './model/controller.model';
+import { Observable, Observer } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ISService {
+
+  constructor(public client:HttpClient) { }
+
+
+  loadResourceTypes():Observable<ResourceType[]> {
+    return this.client.get<ResourceType[]>("/ajax/resourceTypes");
+  }
+
+  loadInfo():Observable<any[]> {
+    return this.client.get<any[]>("/ajax/info/");
+  }
+
+  loadProtocols():Observable<Protocol[]> {
+    return this.client.get<Protocol[]>("/ajax/protocols/");
+  }
+
+  loadWfHistory(total?:number, from?:number, to?:number):Observable<WfHistoryEntry[]>  {
+    let params = new HttpParams();
+
+    if (total && total > 0) { params = params.append('total', total); }
+    if (from && from > 0) {  params = params.append('from', from); }
+    if (to && to > 0) {  params = params.append('to', to); }
+   
+  
+    return this.client.get<WfHistoryEntry[]>('/ajax/wfs/', {params: params});
+  } 
+
+}
diff --git a/frontends/dnet-is-application/src/app/iscommon.service.ts b/frontends/dnet-is-application/src/app/iscommon.service.ts
deleted file mode 100644
index 798f3cef..00000000
--- a/frontends/dnet-is-application/src/app/iscommon.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { ResourceType,Protocol } from './model/controller.model';
-import { Observable, Observer } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ISCommonService {
-
-  constructor(public client:HttpClient) { }
-
-
-  loadResourceTypes():Observable<ResourceType[]> {
-    return this.client.get<ResourceType[]>("/ajax/resourceTypes");
-  }
-
-  loadInfo():Observable<any[]> {
-    return this.client.get<any[]>("/ajax/info/");
-  }
-
-  loadProtocols():Observable<Protocol[]> {
-    return this.client.get<any[]>("/ajax/protocols/");
-  }
-
-}
diff --git a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
index 92f09260..491543a1 100644
--- a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
+++ b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css
@@ -11,3 +11,6 @@
     text-align: center;
     float: right;
 }
+
+.collapse-buttons { text-align: right; }
+.collapse-buttons button { font-size: 0.6em; }
diff --git a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html
index c91f0cb0..296d335b 100644
--- a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html
+++ b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html
@@ -1,4 +1,10 @@
-<mat-accordion>
+
+<div class="collapse-buttons">
+    <button mat-button (click)="accordion.openAll()">Expand All</button>
+    <button mat-button (click)="accordion.closeAll()">Collapse All</button>
+</div>
+
+<mat-accordion multi>
     <mat-expansion-panel>
         <mat-expansion-panel-header>
             <mat-panel-title>Home</mat-panel-title>
diff --git a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.ts b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.ts
index 21d7f30a..bf0046b7 100644
--- a/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.ts
+++ b/frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.ts
@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import { ResourceType } from '../model/controller.model';
-import { ISCommonService } from '../iscommon.service';
+import { ISService } from '../is.service';
+import {MatAccordion} from '@angular/material/expansion';
 
 @Component({
   selector: 'app-main-menu-panels',
@@ -8,10 +9,13 @@ import { ISCommonService } from '../iscommon.service';
   styleUrls: ['./main-menu-panels.component.css']
 })
 export class MainMenuPanelsComponent {
-  
+
+  @ViewChild(MatAccordion) 
+  accordion!:MatAccordion;
+
   resTypes:ResourceType[] = [];
 
-  constructor(public service:ISCommonService) {
+  constructor(public service:ISService) {
     this.service.loadResourceTypes().subscribe((data:ResourceType[]) => this.resTypes = data);
   }
 }
diff --git a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html b/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html
index e4307f5a..a84203f7 100644
--- a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html
+++ b/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.html
@@ -1,3 +1,7 @@
+
+
+
+
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
     <button mat-icon-button disabled></button>
diff --git a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts b/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts
index 671fce34..107db5f0 100644
--- a/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts
+++ b/frontends/dnet-is-application/src/app/main-menu-tree/main-menu-tree.component.ts
@@ -3,7 +3,7 @@ import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { menuData } from './menu-data';
 import { ResourceType } from '../model/controller.model';
-import { ISCommonService } from '../iscommon.service';
+import { ISService } from '../is.service';
 
 export interface MenuNode {
   name: string;
@@ -38,7 +38,7 @@ export class MainMenuTreeComponent {
   /** The MatTreeFlatDataSource connects the control and flattener to provide data. */
   dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;
 
-  constructor(public service:ISCommonService) {
+  constructor(public service:ISService) {
     this.treeFlattener = new MatTreeFlattener(
       this.transformer,
       this.getLevel,
diff --git a/frontends/dnet-is-application/src/app/model/controller.model.ts b/frontends/dnet-is-application/src/app/model/controller.model.ts
index e9e8119d..2d02df5a 100644
--- a/frontends/dnet-is-application/src/app/model/controller.model.ts
+++ b/frontends/dnet-is-application/src/app/model/controller.model.ts
@@ -17,4 +17,17 @@ export interface ProtocolParams {
 export interface Protocol {
     id: string
     params: ProtocolParams[]
+}
+
+export interface WfHistoryEntry {
+    processId: string,
+    name: string,
+    family: string,
+    status: string,
+    startDate: string,
+    endDate: string,
+    dsId?: string,
+    dsName?: string,
+    dsApi?: string,
+    details: Map<string,string>
 }
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/protocols/protocols.component.ts b/frontends/dnet-is-application/src/app/protocols/protocols.component.ts
index 6602d753..76d92f36 100644
--- a/frontends/dnet-is-application/src/app/protocols/protocols.component.ts
+++ b/frontends/dnet-is-application/src/app/protocols/protocols.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ISCommonService } from '../iscommon.service';
+import { ISService } from '../is.service';
 import { MatTableDataSource } from '@angular/material/table';
 import { Protocol, ProtocolParams } from '../model/controller.model';
 
@@ -17,7 +17,7 @@ export class ProtocolsComponent {
   protDatasources:ProtocolDatasource[] = [];
   colums : string[] = ['name', 'label', 'type', 'optional', 'hasSelFunction'];
 
-  constructor(public service:ISCommonService)  {
+  constructor(public service:ISService)  {
     this.service.loadProtocols().subscribe({
       next:(data:Protocol[]) => {
         data.forEach(p => {
diff --git a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.css b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.html b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.html
new file mode 100644
index 00000000..9f5a8726
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.html
@@ -0,0 +1,74 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Workflow History</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+
+    <mat-form-field style="margin-top: 3em; 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> {{wfDatasource.filteredData.length}}</span>
+    </p>   
+
+
+
+      <table mat-table [dataSource]="wfDatasource" 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>
+        </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="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>
+
+  </mat-card-content>
+</mat-card>
+
+
+
diff --git a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.spec.ts b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.spec.ts
new file mode 100644
index 00000000..203ed650
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WfHistoryComponent } from './wf-history.component';
+
+describe('WfHistoryComponent', () => {
+  let component: WfHistoryComponent;
+  let fixture: ComponentFixture<WfHistoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WfHistoryComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WfHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts
new file mode 100644
index 00000000..444f1990
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts
@@ -0,0 +1,45 @@
+import { Component } 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';
+
+@Component({
+  selector: 'app-wf-history',
+  templateUrl: './wf-history.component.html',
+  styleUrls: ['./wf-history.component.css']
+})
+export class WfHistoryComponent {
+
+  wfDatasource:MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]); 
+  
+  colums : string[] = ['processId', 'name', 'family', 'status', 'startDate', 'endDate', 'dsName'];
+
+  total:number = 100
+  from:number = -1
+  to:number = -1
+
+  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');
+
+    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.wfDatasource.data = data,
+      error:error => console.log(error),
+      complete:() => console.log("Completed")
+    })
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
+    this.wfDatasource.filter = filterValue;
+  }
+}
\ No newline at end of file