From 93560e881e6ebe83503590c48cf81dc0c2e5e002 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Fri, 20 Jan 2023 11:39:34 +0100
Subject: [PATCH] info and protocols

---
 .../src/app/app-routing.module.ts             |   4 +-
 .../src/app/app.component.css                 |  18 +++
 .../src/app/app.component.html                |  32 ++++-
 .../src/app/app.component.spec.ts             |  41 +++++-
 .../src/app/app.component.ts                  |  13 +-
 .../dnet-is-application/src/app/app.module.ts |  16 +--
 .../src/app/info/info.component.html          | 121 +++++++++---------
 .../src/app/info/info.component.ts            |  16 +--
 .../src/app/iscommon.service.ts               |   6 +-
 .../main-container.component.css              |  17 ---
 .../main-container.component.html             |  26 ----
 .../main-container.component.spec.ts          |  40 ------
 .../main-container.component.ts               |  21 ---
 .../main-menu-tree.component.ts               |   2 +
 .../src/app/model/controller.model.ts         |  14 +-
 .../src/app/protocols/protocols.component.css |   0
 .../app/protocols/protocols.component.html    |  51 ++++++++
 .../app/protocols/protocols.component.spec.ts |  23 ++++
 .../src/app/protocols/protocols.component.ts  |  35 +++++
 19 files changed, 297 insertions(+), 199 deletions(-)
 delete mode 100644 frontends/dnet-is-application/src/app/main-container/main-container.component.css
 delete mode 100644 frontends/dnet-is-application/src/app/main-container/main-container.component.html
 delete mode 100644 frontends/dnet-is-application/src/app/main-container/main-container.component.spec.ts
 delete mode 100644 frontends/dnet-is-application/src/app/main-container/main-container.component.ts
 create mode 100644 frontends/dnet-is-application/src/app/protocols/protocols.component.css
 create mode 100644 frontends/dnet-is-application/src/app/protocols/protocols.component.html
 create mode 100644 frontends/dnet-is-application/src/app/protocols/protocols.component.spec.ts
 create mode 100644 frontends/dnet-is-application/src/app/protocols/protocols.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 eed5d44a..835c774c 100644
--- a/frontends/dnet-is-application/src/app/app-routing.module.ts
+++ b/frontends/dnet-is-application/src/app/app-routing.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { InfoComponent } from './info/info.component';
+import { ProtocolsComponent } from './protocols/protocols.component';
 
 const routes: Routes = [
-  {path:"info", component:InfoComponent}
+  { path:"info"                   , component:InfoComponent},
+  { path:"adv_resources/protocol" , component:ProtocolsComponent}
 ];
 
 @NgModule({
diff --git a/frontends/dnet-is-application/src/app/app.component.css b/frontends/dnet-is-application/src/app/app.component.css
index e69de29b..16aa103f 100644
--- a/frontends/dnet-is-application/src/app/app.component.css
+++ b/frontends/dnet-is-application/src/app/app.component.css
@@ -0,0 +1,18 @@
+.sidenav-container {
+    height: 100%;
+  }
+  
+ .sidenav {
+    width: 400px;
+ }
+  
+ .sidenav .mat-toolbar {
+    background: inherit;
+ }
+  
+ .mat-toolbar.mat-primary {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+ }
+  
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/app.component.html b/frontends/dnet-is-application/src/app/app.component.html
index 69ad4098..699393a0 100644
--- a/frontends/dnet-is-application/src/app/app.component.html
+++ b/frontends/dnet-is-application/src/app/app.component.html
@@ -1,5 +1,27 @@
-<app-main-container></app-main-container>
-
-
-
-
+<mat-sidenav-container class="sidenav-container">
+    <mat-sidenav #drawer class="sidenav" fixedInViewport
+        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+        [mode]="(isHandset$ | async) ? 'over' : 'side'"
+        [opened]="(isHandset$ | async) === false">
+      <mat-toolbar>Menu</mat-toolbar>
+      <app-main-menu-tree></app-main-menu-tree>
+    </mat-sidenav>
+    <mat-sidenav-content>
+      <mat-toolbar color="primary">
+        <button
+          type="button"
+          aria-label="Toggle sidenav"
+          mat-icon-button
+          (click)="drawer.toggle()"
+          *ngIf="isHandset$ | async">
+          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        </button>
+        <span>{{title}}</span>
+      </mat-toolbar>
+    
+      <!-- The routed views render in the <router-outlet>-->
+      <router-outlet></router-outlet>
+    
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+  
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/app.component.spec.ts b/frontends/dnet-is-application/src/app/app.component.spec.ts
index 32f1f92c..56222f55 100644
--- a/frontends/dnet-is-application/src/app/app.component.spec.ts
+++ b/frontends/dnet-is-application/src/app/app.component.spec.ts
@@ -1,8 +1,44 @@
-import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { LayoutModule } from '@angular/cdk/layout';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
+
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [AppComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
@@ -33,3 +69,6 @@ describe('AppComponent', () => {
     expect(compiled.querySelector('.content span')?.textContent).toContain('dnet-is-application app is running!');
   });
 });
+
+
+
diff --git a/frontends/dnet-is-application/src/app/app.component.ts b/frontends/dnet-is-application/src/app/app.component.ts
index c5d87ed9..3ddfee01 100644
--- a/frontends/dnet-is-application/src/app/app.component.ts
+++ b/frontends/dnet-is-application/src/app/app.component.ts
@@ -1,5 +1,8 @@
 import { Component } from '@angular/core';
 import { TitleStrategy } from '@angular/router';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -7,6 +10,14 @@ import { TitleStrategy } from '@angular/router';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'dnet-is-application';
+  title = 'D-NET Information Service Application';
   
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+  .pipe(
+    map(result => result.matches),
+    shareReplay()
+  );
+
+  constructor(private breakpointObserver: BreakpointObserver) {}
+
 }
diff --git a/frontends/dnet-is-application/src/app/app.module.ts b/frontends/dnet-is-application/src/app/app.module.ts
index 460ffe7b..b8e42ec0 100644
--- a/frontends/dnet-is-application/src/app/app.module.ts
+++ b/frontends/dnet-is-application/src/app/app.module.ts
@@ -14,24 +14,22 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
-import {FlatTreeControl} from '@angular/cdk/tree';
-import {MatTree, MatTreeFlatDataSource, MatTreeFlattener, MatTreeNode, MatTreeModule} from '@angular/material/tree';
-import { MainContainerComponent } from './main-container/main-container.component';
+import { MatTreeModule} from '@angular/material/tree';
 import { MainMenuTreeComponent } from './main-menu-tree/main-menu-tree.component';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatCardModule } from '@angular/material/card';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input'
-import {MatTableModule} from '@angular/material/table';
-
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input'
+import { MatTableModule } from '@angular/material/table';
+import { ProtocolsComponent } from './protocols/protocols.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     InfoComponent,
     DatafilterPipe,
-    MainContainerComponent,
-    MainMenuTreeComponent
+    MainMenuTreeComponent,
+    ProtocolsComponent
   ],
   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 e582a1c0..3768a4f4 100644
--- a/frontends/dnet-is-application/src/app/info/info.component.html
+++ b/frontends/dnet-is-application/src/app/info/info.component.html
@@ -1,79 +1,80 @@
-<div class="infoPage">
-
-  <h1>Container Info </h1>
-
-  <mat-form-field>
+<mat-card>
+  <mat-card-header>
+    <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>
-  </mat-form-field>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
+    </mat-form-field>
 
-  <ng-container *ngFor="let section of kvDatasources">
-    <mat-card *ngIf="section.datasource.filteredData.length > 0">
-      <mat-card-header>
-          <mat-card-title>{{section.name}}</mat-card-title>
-      </mat-card-header>
-      <mat-card-content>
+    <div *ngFor="let section of kvDatasources">
+      <div style="margin-top: 3em;" *ngIf="section.datasource.filteredData.length > 0">
+        <h3>{{section.name}}</h3>
         <table mat-table [dataSource]="section.datasource" class="mat-elevation-z8">
-        
+
           <ng-container matColumnDef="k">
             <th mat-header-cell *matHeaderCellDef> Property </th>
             <td mat-cell *matCellDef="let element"> {{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>
           </ng-container>
-        
+
           <tr mat-row *matRowDef="let row; columns: displayedKVColumns;"></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 "{{input.value}}"</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+
+      <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>
-      </mat-card-content>
-    </mat-card>
-  </ng-container>
+      </div>
+
+  </mat-card-content>
+</mat-card>
+
+
+
 
-  <mat-card *ngIf="moduleDatasource.filteredData.length > 0">
-    <mat-card-header>
-        <mat-card-title>Modules</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-      <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>
-    </mat-card-content>
-  </mat-card>
-</div>
 
 
 
@@ -118,6 +119,4 @@
 
     </mat-card>
 </ng-container>
--->
-
-
+-->
\ No newline at end of file
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 1c617ebd..eec79597 100644
--- a/frontends/dnet-is-application/src/app/info/info.component.ts
+++ b/frontends/dnet-is-application/src/app/info/info.component.ts
@@ -16,7 +16,7 @@ export interface Module {
 
 export interface KeyValueDatasource {
   name: string;
-  datasource: MatTableDataSource<any[]>;
+  datasource: MatTableDataSource<any>;
 }
 
 
@@ -26,7 +26,6 @@ export interface KeyValueDatasource {
   styleUrls: ['./info.component.css']
 })
 export class InfoComponent {
-  infoFilter?:string;
   
   kvDatasources:KeyValueDatasource[] = [];
   moduleDatasource:MatTableDataSource<Module[]> = new MatTableDataSource<Module[]>([]); 
@@ -58,18 +57,5 @@ export class InfoComponent {
     this.kvDatasources.forEach(s => s.datasource.filter = filterValue)
     this.moduleDatasource.filter = filterValue;
   }
-  
-  getFilteredInfo(data:any[]) {
-    if (this.infoFilter) {
-      return data.filter(obj => {
-        return Object.keys(obj).reduce((acc, curr) => {            
-            return acc || obj[curr].toString().toLowerCase().includes(this.infoFilter);
-        }, false);
-      })
-    }
-    else
-    return data
-    
-  }
 
 }
diff --git a/frontends/dnet-is-application/src/app/iscommon.service.ts b/frontends/dnet-is-application/src/app/iscommon.service.ts
index 1ff5af32..798f3cef 100644
--- a/frontends/dnet-is-application/src/app/iscommon.service.ts
+++ b/frontends/dnet-is-application/src/app/iscommon.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { ResourceType } from './model/controller.model';
+import { ResourceType,Protocol } from './model/controller.model';
 import { Observable, Observer } from 'rxjs';
+
 @Injectable({
   providedIn: 'root'
 })
@@ -18,5 +19,8 @@ export class ISCommonService {
     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-container/main-container.component.css b/frontends/dnet-is-application/src/app/main-container/main-container.component.css
deleted file mode 100644
index ac9b3b14..00000000
--- a/frontends/dnet-is-application/src/app/main-container/main-container.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.sidenav-container {
-  height: 100%;
-}
-
-.sidenav {
-  width: 400px;
-}
-
-.sidenav .mat-toolbar {
-  background: inherit;
-}
-
-.mat-toolbar.mat-primary {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
diff --git a/frontends/dnet-is-application/src/app/main-container/main-container.component.html b/frontends/dnet-is-application/src/app/main-container/main-container.component.html
deleted file mode 100644
index cd9d52b1..00000000
--- a/frontends/dnet-is-application/src/app/main-container/main-container.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<mat-sidenav-container class="sidenav-container">
-  <mat-sidenav #drawer class="sidenav" fixedInViewport
-      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-      [mode]="(isHandset$ | async) ? 'over' : 'side'"
-      [opened]="(isHandset$ | async) === false">
-    <mat-toolbar>Menu</mat-toolbar>
-    <app-main-menu-tree></app-main-menu-tree>
-  </mat-sidenav>
-  <mat-sidenav-content>
-    <mat-toolbar color="primary">
-      <button
-        type="button"
-        aria-label="Toggle sidenav"
-        mat-icon-button
-        (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
-      <span>dnet-is-application</span>
-    </mat-toolbar>
-  
-    <!-- The routed views render in the <router-outlet>-->
-    <router-outlet></router-outlet>
-  
-  </mat-sidenav-content>
-</mat-sidenav-container>
diff --git a/frontends/dnet-is-application/src/app/main-container/main-container.component.spec.ts b/frontends/dnet-is-application/src/app/main-container/main-container.component.spec.ts
deleted file mode 100644
index 552f7705..00000000
--- a/frontends/dnet-is-application/src/app/main-container/main-container.component.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { LayoutModule } from '@angular/cdk/layout';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatToolbarModule } from '@angular/material/toolbar';
-
-import { MainContainerComponent } from './main-container.component';
-
-describe('MainContainerComponent', () => {
-  let component: MainContainerComponent;
-  let fixture: ComponentFixture<MainContainerComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [MainContainerComponent],
-      imports: [
-        NoopAnimationsModule,
-        LayoutModule,
-        MatButtonModule,
-        MatIconModule,
-        MatListModule,
-        MatSidenavModule,
-        MatToolbarModule,
-      ]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MainContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should compile', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontends/dnet-is-application/src/app/main-container/main-container.component.ts b/frontends/dnet-is-application/src/app/main-container/main-container.component.ts
deleted file mode 100644
index 6b7e30d4..00000000
--- a/frontends/dnet-is-application/src/app/main-container/main-container.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-main-container',
-  templateUrl: './main-container.component.html',
-  styleUrls: ['./main-container.component.css']
-})
-export class MainContainerComponent {
-
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
-
-  constructor(private breakpointObserver: BreakpointObserver) {}
-
-}
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 0c4bcf4b..671fce34 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
@@ -56,8 +56,10 @@ export class MainMenuTreeComponent {
             badge: resType.count.toString()
           }
           if (resType.simple) {
+            item.route = '/resources/' + resType.id;
             simpleResources.push(item)
           } else {
+            item.route = '/adv_resources/' + resType.id;
             advancedResources.push(item)
           }
         })
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 75a17602..e9e8119d 100644
--- a/frontends/dnet-is-application/src/app/model/controller.model.ts
+++ b/frontends/dnet-is-application/src/app/model/controller.model.ts
@@ -1,4 +1,4 @@
-export interface ResourceType{
+export interface ResourceType {
     id:string
     name:string
     contentType:string
@@ -6,3 +6,15 @@ export interface ResourceType{
     simple:boolean	
 }
 
+export interface ProtocolParams {
+    name:string
+    label:string
+    type:string
+    optional:boolean
+    hasSelFunction:boolean
+}
+
+export interface Protocol {
+    id: string
+    params: ProtocolParams[]
+}
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/protocols/protocols.component.css b/frontends/dnet-is-application/src/app/protocols/protocols.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontends/dnet-is-application/src/app/protocols/protocols.component.html b/frontends/dnet-is-application/src/app/protocols/protocols.component.html
new file mode 100644
index 00000000..c9b1046d
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/protocols/protocols.component.html
@@ -0,0 +1,51 @@
+<mat-card>
+    <mat-card-header>
+        <mat-card-title>Harvesting Protocols</mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <div style="margin-top: 20px;" *ngFor="let prot of protDatasources">
+            <h3>{{prot.protocol}}</h3>
+
+            <table mat-table [dataSource]="prot.datasource" class="mat-elevation-z8">
+
+                <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="label">
+                    <th mat-header-cell *matHeaderCellDef> Label </th>
+                    <td mat-cell *matCellDef="let element"> {{element.label}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="type">
+                    <th mat-header-cell *matHeaderCellDef> Type </th>
+                    <td mat-cell *matCellDef="let element"> {{element.type}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="optional">
+                    <th mat-header-cell *matHeaderCellDef> Required </th>
+                    <td mat-cell *matCellDef="let element">
+                        <mat-icon fontIcon="check" *ngIf="!element.optional"></mat-icon>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="hasSelFunction">
+                    <th mat-header-cell *matHeaderCellDef> Has Sel Function </th>
+                    <td mat-cell *matCellDef="let element">
+                        <mat-icon fontIcon="check" *ngIf="element.hasSelFunction"></mat-icon>
+                    </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="5">No parameters</td>
+                </tr>
+            </table>
+        </div>
+    </mat-card-content>
+
+</mat-card>
\ No newline at end of file
diff --git a/frontends/dnet-is-application/src/app/protocols/protocols.component.spec.ts b/frontends/dnet-is-application/src/app/protocols/protocols.component.spec.ts
new file mode 100644
index 00000000..341b9b31
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/protocols/protocols.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProtocolsComponent } from './protocols.component';
+
+describe('ProtocolsComponent', () => {
+  let component: ProtocolsComponent;
+  let fixture: ComponentFixture<ProtocolsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProtocolsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProtocolsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontends/dnet-is-application/src/app/protocols/protocols.component.ts b/frontends/dnet-is-application/src/app/protocols/protocols.component.ts
new file mode 100644
index 00000000..6602d753
--- /dev/null
+++ b/frontends/dnet-is-application/src/app/protocols/protocols.component.ts
@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { ISCommonService } from '../iscommon.service';
+import { MatTableDataSource } from '@angular/material/table';
+import { Protocol, ProtocolParams } from '../model/controller.model';
+
+export interface ProtocolDatasource {
+  protocol: string;
+  datasource: MatTableDataSource<ProtocolParams>;
+}
+
+@Component({
+  selector: 'app-protocols',
+  templateUrl: './protocols.component.html',
+  styleUrls: ['./protocols.component.css']
+})
+export class ProtocolsComponent {
+  protDatasources:ProtocolDatasource[] = [];
+  colums : string[] = ['name', 'label', 'type', 'optional', 'hasSelFunction'];
+
+  constructor(public service:ISCommonService)  {
+    this.service.loadProtocols().subscribe({
+      next:(data:Protocol[]) => {
+        data.forEach(p => {
+          this.protDatasources.push({
+            protocol   : p.id,
+            datasource : new MatTableDataSource(p.params)
+         });
+        })
+      },
+      error:error => console.log(error),
+      complete:() => console.log("Completed")
+    })
+  }
+
+}