added java and typescript code to manage resource instances' table via

service (...work in progress...). Material Table restored.

src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/HostingNodeTypeDTO.java

@@ -0,0 +1,26 @@
+package org.gcube.fullstackapps.informationsystemmonitor.service.dto;
+
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class HostingNodeTypeDTO {
+	private String id;
+	private String name;
+	private HostingNodeTypeDTO[] children;
+	
+	/*
+	 *   
+  type:string;
+  name: string;
+  id: string;
+  status: string;
+  lastmod: string;
+  memavailable: string;
+  hdspace: string;
+	 */
+}

src/main/java/org/gcube/fullstackapps/informationsystemmonitor/service/dto/ResourceImplDTO.java

@@ -0,0 +1,18 @@
+package org.gcube.fullstackapps.informationsystemmonitor.service.dto;
+
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class ResourceImplDTO {
+	private String id;
+	private String name;
+	private String status;
+	private String lastMod;
+	private String avMemory;
+	private String hdSpace;
+}

src/main/java/org/gcube/fullstackapps/informationsystemmonitor/web/rest/InformationSystemResource.java

@@ -1,5 +1,7 @@
 package org.gcube.fullstackapps.informationsystemmonitor.web.rest;
 
+import java.text.Format;
+import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Iterator;
 import java.util.List;
@@ -9,6 +11,7 @@ import javax.annotation.Nullable;
 import org.gcube.com.fasterxml.jackson.databind.ObjectMapper;
 import org.gcube.fullstackapps.informationsystemmonitor.config.TokenManager;
 import org.gcube.fullstackapps.informationsystemmonitor.service.InformationSystemService;
+import org.gcube.fullstackapps.informationsystemmonitor.service.dto.ResourceImplDTO;
 import org.gcube.fullstackapps.informationsystemmonitor.service.dto.ResourceTypeDTO;
 import org.gcube.informationsystem.contexts.reference.entities.Context;
 import org.gcube.informationsystem.model.reference.entities.Resource;
@@ -127,22 +130,30 @@ public class InformationSystemResource {
 	@GetMapping("/resourceinstances")
 	public ResponseEntity<String> resourceInstances(@RequestParam @Nullable String currentContext, @RequestParam String resourceType) {
 		log.debug("Request resource instances");
+		List<ResourceImplDTO> instanceDtos = new ArrayList<ResourceImplDTO>();
+	    Format dateFormatter = new SimpleDateFormat("dd-MMM-yyyy");
+		
 		try {
 			informationSystemService.setUma(createUmaToken(currentContext));
 			List<Resource> resIntances = informationSystemService.getResourceInstances(resourceType);
-			/*
-			for(Type t : resTypes) {
-				t.getID();
-				t.getName();
-			}
-			*/
-			/*
-			informationSystemService.setUma(umaToken);
-			List<Type> resTypes = informationSystemService.getResourceTypes(currentContext);
-			*/
 			
-			String sc = ElementMapper.marshal(resIntances);
+			Iterator<Resource> resIt = resIntances.iterator();
-			return ResponseEntity.ok().body(sc);		
+			//dateFormatter.format(res.getMetadata().getLastUpdateTime())
+			while (resIt.hasNext()) {
+				Resource res = resIt.next();
+				//TODO: RIEMPIRE I CAMPI IN MODO SIGNIFICATIVO
+				ResourceImplDTO dto = new ResourceImplDTO(res.getID().toString(),
+						res.getExpectedtype(),
+						res.getTypeName(),
+						"-",
+						"-",
+						"-");
+				instanceDtos.add(dto);
+			}
+			ObjectMapper objectMapper = new ObjectMapper();
+			String sc = objectMapper.writeValueAsString(instanceDtos);
+			return ResponseEntity.ok().body(sc);
+
 		} catch (Exception e) {
 			log.error(e.getLocalizedMessage(), e);
 			return ResponseEntity.noContent()

src/main/webapp/app/app.module.ts

@@ -25,12 +25,11 @@ import { FooterComponent } from './layouts/footer/footer.component';
 import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component';
 import { ActiveMenuDirective } from './layouts/navbar/active-menu.directive';
 import { ErrorComponent } from './layouts/error/error.component';
-import { SortableDirective } from './table-nodes/sortable.directive';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { RawjsonPaneComponent } from './rawjson-pane/rawjson-pane.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RestypeTreeComponent } from './restype-tree/restype-tree.component';
+import { TableScreenComponent } from './table-screen/table-screen.component';
 
 @NgModule({
   imports: [
@@ -44,7 +43,6 @@ import { RestypeTreeComponent } from './restype-tree/restype-tree.component';
     HttpClientModule,
     NgxWebstorageModule.forRoot({ prefix: 'jhi', separator: '-', caseSensitive: true }),
     TranslationModule,
-    SortableDirective,
     NgbModule,
     RawjsonPaneComponent,
     ClipboardModule,

src/main/webapp/app/home/home.component.html

@@ -33,7 +33,7 @@
 
 						</div>
 					<div>
-						<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" >
+						<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" ></div>
 							
 					<div class="col-md-9 mt-2">
 						 <form [formGroup]="chooseContextForm">
@@ -60,15 +60,7 @@
 						      </button>
 						 </form>
 		  			</div>	
-		  				
+						<jhi-table-screen></jhi-table-screen>
-		  				
-					<div class="my-3">
-					<jhi-table-nodes></jhi-table-nodes>
-					</div>
-					<div>
-					<jhi-rawjson-pane></jhi-rawjson-pane>
-					</div>
-				</div>
 			</div>
 		</div>
 	

src/main/webapp/app/home/home.module.ts

@@ -5,25 +5,25 @@ import { SharedModule } from 'app/shared/shared.module';
 import { HOME_ROUTE } from './home.route';
 import { HomeComponent } from './home.component';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { TableNodesModule } from 'app/table-nodes/table-nodes.module';
 import { RscTreeModule } from 'app/rsc-tree/rsc-tree.module';
 import { RawjsonPaneComponent } from 'app/rawjson-pane/rawjson-pane.component';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatSelectFilterModule } from 'mat-select-filter';
+import { TableScreenModule } from 'app/table-screen/table-screen.module';
 
 @NgModule({
   imports: [SharedModule, 
   RouterModule.forChild([HOME_ROUTE]),
   NgbDropdownModule, 
-  TableNodesModule, 
   RscTreeModule,
   RawjsonPaneComponent,
   ClipboardModule,
   MatTabsModule,
   BrowserAnimationsModule,
-  MatSelectFilterModule
+  MatSelectFilterModule,
+  TableScreenModule
   ],
   declarations: [HomeComponent],
   schemas:[CUSTOM_ELEMENTS_SCHEMA]

src/main/webapp/app/services/hnodes.ts

@@ -1,6 +1,6 @@
-import { IHostingnode } from './i-hostinngnode';
+import { IResImpl } from './i-res-impl';
 
-export const HNODES: IHostingnode[] = [{
+export const HNODES: IResImpl[] = [{
   "type": "Hosting Node",
   "id": "id-ckan",
   "name": "ckan-d-d4s.d4science.org",

src/main/webapp/app/services/i-res-impl.ts

@@ -1,4 +1,4 @@
-export interface IHostingnode {
+export interface IResImpl {
   type:string;
   name: string;
   id: string;

src/main/webapp/app/services/resimpl-table-loader.service.old.txt

@@ -2,16 +2,15 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/adjacent-overload-signatures */
 
-import { Injectable, PipeTransform } from '@angular/core';
+import { Inject, Injectable, PipeTransform } from '@angular/core';
 import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
 import { IHostingnode } from './i-hostinngnode';
 import { DecimalPipe } from '@angular/common';
 import { debounceTime, delay, switchMap, tap } from 'rxjs/operators';
 import { SortColumn, SortDirection } from 'app/table-nodes/sortable.directive';
-import { HNODES } from './hnodes';
+//import { HNODES } from './hnodes';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { ResourcesImplService } from './resources-impl.service';
-import { appProperties } from 'app/config/app-properties';
+import { IContextNode } from './i-context-node';
-import { IResource } from './i-resource';
 
 
 
@@ -54,12 +53,7 @@ function matches(hnode: IHostingnode, term: string, pipe: PipeTransform){
 
 
 @Injectable({providedIn: 'root'})
-export class HnodesLoaderService {
+export class ResimplTableLoaderService {
-	
-	  httpOptions = {
-	    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
-	  };
-  
 	private _loading$ = new BehaviorSubject<boolean>(true);
 	private _search$ = new Subject<void>();
 	private _hnodes$ = new BehaviorSubject<IHostingnode[]>([]);
@@ -73,10 +67,7 @@ export class HnodesLoaderService {
 		sortDirection: '',
 	};
 	
-
+	constructor(private pipe: DecimalPipe, private myService: ResourcesImplService) {
-
-	constructor(private pipe: DecimalPipe, private http: HttpClient/*, private currentContext: string, private resourceType: string*/) {
-		 
 		this._search$
 			.pipe(
 				tap(() => this._loading$.next(true)),
@@ -92,15 +83,7 @@ export class HnodesLoaderService {
 
 		this._search$.next();
 	}
-	
+/*
-	//TODO: qui va messo parametro per paginazione
-	fetchAll(ctx:string, type:string): Observable<IHostingnode[]> {
-    	const SERVICE_URL = appProperties.BASEURL_API+'/is/resourceinstances';
-		let queryParams = new HttpParams();
-		queryParams = queryParams.append("currentContext",ctx).append("resourceType",type);
-		return this.http.get<IHostingnode[]>(SERVICE_URL,{params:queryParams});
-	  }
-
 	get hnodes$() {
 		return this._hnodes$.asObservable();
 	}
@@ -110,6 +93,7 @@ export class HnodesLoaderService {
 	get loading$() {
 		return this._loading$.asObservable();
 	}
+	*/
 	get page() {
 		return this._tnode.page;
 	}
@@ -140,14 +124,17 @@ export class HnodesLoaderService {
 		Object.assign(this._tnode, patch);
 		this._search$.next();
 	}
-	
+
- 
+//TODO: la paginazione va aggiustata e passata come parametro al servizio
-	private _search(/*ctx:string, type:string, pageresults*/): Observable<SearchResult> {
+	private _search(myService:ResourcesImplService, context:string, resourceType:string): Observable<SearchResult> {
 		const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._tnode;
 
+		//risorse ritornate dal servizio
+        const fetchedResources:Observable<IHostingnode[]>  = myService.fetchAll(context,resourceType);
 		// 1. sort
-		const hnodes = this.fetchAll("", 'HostingNode');
+		// return this.http.get<IContextNode[]>('http://localhost:3002/is/allcontexttree');
-		let nodes = sort(HNODES, sortColumn, sortDirection);
+		let nodes = sort(fetchedResources, sortColumn, sortDirection);
+
 		// 2. filter
 		nodes = nodes.filter((hnode) => matches(hnode, searchTerm, this.pipe));
 		const total = nodes.length;
@@ -156,4 +143,5 @@ export class HnodesLoaderService {
 		nodes = nodes.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
 		return of({ nodes, total });
 	}
+	
 }

src/main/webapp/app/services/resources-impl.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IResImpl } from './i-res-impl';
+import { appProperties } from 'app/config/app-properties';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class ResourcesImplService {
+
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+  };
+
+  constructor(private http: HttpClient) { }
+  
+  //TODO: qui va messo parametro per paginazione
+	fetchAll(ctx:string, type:string): Observable<IResImpl[]> {
+    	const SERVICE_URL = appProperties.BASEURL_API+'/is/resourceinstances';
+		let queryParams = new HttpParams();
+		queryParams = queryParams.append("currentContext",ctx).append("resourceType",type);
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+		return this.http.get<IResImpl[]>(SERVICE_URL,{params:queryParams});
+	  }
+	  
+	  
+}

src/main/webapp/app/services/resources-loader.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { IHostingnode } from './i-hostinngnode';
 import { IResource } from './i-resource';
+import { IResImpl } from './i-res-impl';
 
 @Injectable({
   providedIn: 'root',
@@ -19,8 +19,8 @@ export class ResourcesLoaderService {
  //TODO: pipe per gestione errori
  */
  
-  getHostingNodes(): Observable<IHostingnode[]> {
+  getHostingNodes(): Observable<IResImpl[]> {
-    return this.http.get<IHostingnode[]>('http://localhost:3002/is/hostingnodes/all');
+    return this.http.get<IResImpl[]>('http://localhost:3002/is/hostingnodes/all');
   }
 
   getResourcesByContext(): Observable<IResource[]> {

src/main/webapp/app/shared/shared.module.ts

@@ -15,11 +15,12 @@ import { ItemCountComponent } from './pagination/item-count.component';
 import { FilterComponent } from './filter/filter.component';
 import { ContextTransformPipe } from './pipe/contexttransform.pipe';
 import { NgbPagination, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
-import { SortableDirective } from 'app/table-nodes/sortable.directive';
+//import { SortableDirective } from 'app/table-nodes/sortable.directive';
 import { MaterialModule } from './material/material.module';
 
 @NgModule({
-  imports: [SharedLibsModule,SortableDirective],
+  //imports: [SharedLibsModule,SortableDirective],
+  imports: [SharedLibsModule],
   declarations: [
     FindLanguageFromKeyPipe,
     TranslateDirective,
@@ -53,7 +54,7 @@ import { MaterialModule } from './material/material.module';
     ContextTransformPipe,
     NgbPagination,
     NgbTypeahead,
-    SortableDirective,
+    /*SortableDirective,*/
     MaterialModule
   ],
 })

src/main/webapp/app/table-nodes/sortable.directive.ts

@@ -1,38 +0,0 @@
-/* eslint-disable @angular-eslint/directive-selector */
-/* eslint-disable @angular-eslint/no-host-metadata-property */
-import { Directive, EventEmitter, Input, Output } from '@angular/core';
-import { IHostingnode } from 'app/services/i-hostinngnode';
-//import { Country } from './country';
-
-export type SortColumn = keyof IHostingnode | '';
-export type SortDirection = 'asc' | 'desc' | '';
-const rotate: { [key: string]: SortDirection } = { asc: 'desc', desc: '', '': 'asc' };
-
-export interface SortEvent {
-	column: SortColumn;
-	direction: SortDirection;
-}
-
-
-@Directive({
-  selector: 'th[sortable]',
-  standalone: true,
-	host: {
-		'[class.asc]': 'direction === "asc"',
-		'[class.desc]': 'direction === "desc"',
-		'(click)': 'rotate()',
-	},
-})
-  
-  //export class NgbdSortableHeader 
- export class SortableDirective {
-	@Input() sortable: SortColumn = '';
-	@Input() direction: SortDirection = '';
-	@Output() sort = new EventEmitter<SortEvent>();
-
-	rotate():void {
-		this.direction = rotate[this.direction];
-		this.sort.emit({ column: this.sortable, direction: this.direction });
-	}
-}
-

src/main/webapp/app/table-nodes/table-nodes.component.html

@@ -1,49 +0,0 @@
-<form>
-	<div class="mb-3 row">
-		<label for="table-complete-search" class="col-xs-3 col-sm-auto col-form-label">Filter by name or UUID:</label>
-			<div class="col-xs-3 col-sm-auto">
-			<input type="text" id="table-complete-search"
-				[(ngModel)]="service.searchTerm"
-				class="form-control"
-				name="searchTerm"
-				/>
-			</div>
-		<span class="col col-form-label" *ngIf="service.loading$ | async">Loading...</span>
-	</div>
-	<table class="table table-striped">
-		<thead>
-			<tr>
-				<!--<th scope="col" sortable="type" (sort)="onSort($event)">Type</th>-->
-				<th scope="col" sortable="id" (sort)="onSort($event)">UUID</th>
-				<th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
-				<th scope="col" sortable="status" (sort)="onSort($event)">Status</th>
-				<th scope="col" sortable="lastmod" (sort)="onSort($event)">Last Modified</th>
-				<th scope="col" sortable="memavailable">Available Memory</th>
-				<th scope="col" sortable="hdspace" (sort)="onSort($event)">HD Space</th>
-				<th scope="col" ></th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr *ngFor="let hnode of hnodes$ | async">
-				<td><ngb-highlight [result]="hnode.id" [term]="service.searchTerm"></ngb-highlight></td>
-				<td><ngb-highlight [result]="hnode.name" [term]="service.searchTerm"></ngb-highlight></td>
-				<td><ngb-highlight [result]="hnode.status"></ngb-highlight></td>
-				<td><ngb-highlight [result]="hnode.lastmod"></ngb-highlight></td>
-				<td><ngb-highlight [result]="hnode.memavailable"></ngb-highlight></td>
-				<td><ngb-highlight [result]="hnode.hdspace"></ngb-highlight></td>
-				<td><button mat-button color="primary" (click)="addTab(hnode.id)"><mat-icon>visibility</mat-icon></button></td>
-			</tr>
-		</tbody>
-	</table>
-
-	<div class="d-flex justify-content-between p-2">
-		<ngb-pagination [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
-		</ngb-pagination>
-
-		<select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
-			<option [ngValue]="2">2 items per page</option>
-			<option [ngValue]="4">4 items per page</option>
-			<option [ngValue]="6">6 items per page</option>
-		</select>
-	</div>
-</form>

src/main/webapp/app/table-nodes/table-nodes.component.scss

@@ -1,20 +0,0 @@
-@import "~bootstrap-icons/font/bootstrap-icons.css";
-
-th[sortable] {
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none
-}
-
-th[sortable].desc:before,th[sortable].asc:before {
-    content: "^";
-    display: block;
-    float: left;
-    margin-left: 10px;
-    margin-right: 10px
-}
-
-th[sortable].desc:before {
-    transform: rotate(180deg);
-    -ms-transform: rotate(180deg)
-}

src/main/webapp/app/table-nodes/table-nodes.component.ts

@@ -1,108 +0,0 @@
-import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { IHostingnode } from 'app/services/i-hostinngnode';
-import { HnodesLoaderService } from 'app/services/hnodes-loader.service';
-import { DecimalPipe, NgIf } from '@angular/common';
-import { Observable } from 'rxjs';
-import { SortableDirective, SortEvent } from './sortable.directive';
-import { MatTab, MatTabGroup } from '@angular/material/tabs';
-import { ITabbedEntity } from 'app/i-tabbed-entity';
-
-/*
-Tabella con paginazione, ordinamento e ricerca - dati presi da servizio
-PARAMETRI: currCtx, resType (e poi anche # risultati per pagina)
-*/
-
-
-@Component({
-  selector: 'jhi-table-nodes',
-  templateUrl: './table-nodes.component.html',
-  styleUrls: ['./table-nodes.component.scss'],
-  providers: [/*{provide: 'currentContext', useValue: 'currCtx'},
-              {provide: 'resourceType', useValue: 'resType'},*/
- 			  HnodesLoaderService, DecimalPipe],
-     
-})
-export class TableNodesComponent{
-	
-  //per tabbed view
-  @ViewChild(MatTab)
-  public tabGroup: MatTabGroup | any;
-  public tabNodes: QueryList<MatTab> | any;
-  public closedTabs = [];
-  public tabs: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }];
-  selectedIdx = 0;
-  chosenIds: string[] = [];
-  ////////// fine tabbed view(MatTab)
-  
-  
-
-  hnodes$: Observable<IHostingnode[]>;
-  total$: Observable<number>;
-  
-
-  @ViewChildren(SortableDirective) headers: QueryList<SortableDirective>|any;
-
-	constructor(public service: HnodesLoaderService) {
-		this.hnodes$ = service.hnodes$;
-		this.total$ = service.total$;
-	}
-	
-	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-	onSort({ column, direction }: SortEvent) {
-		// resetting other headers
-		this.headers.forEach((header: { sortable: string; direction: string; }) => {
-			if (header.sortable !== column) {
-				header.direction = '';
-			}
-		});
-
-		this.service.sortColumn = column;
-		this.service.sortDirection = direction;
-	}
-	/*
-	addTab(id:string):void{
-		alert("id?..."+id);
-	}
-	*/
-	 // per tabbed pane (versione con aggiunta dinamica)
-
-  removeTab(index: number): void {
-    this.tabs.splice(index, 1);
-  }
-
-  addTab(itemId: string): void {
-    if (!this.chosenIds.includes(itemId)) {
-      const newItem = {
-        id: itemId,
-        title: itemId.substring(0, 20) + '...',
-        //TODO: content a regime è la stringa JSON
-        content: itemId,
-        type: 0,
-      };
-      this.selectedIdx++;
-      this.chosenIds.push(itemId);
-      this.tabs.push(newItem);
-    }
-  }
-
-  closeTab(index: number): void {
-	  /*
-    console.debug('---------');
-    console.debug(index);
-    console.debug('---IDs:');
-    console.debug(this.chosenIds);
-    console.debug(this.tabs[index].id);
-    console.debug('++++++++++');
-    */
-    const x = this.chosenIds.indexOf(this.tabs[index].id);
-    if (x !== -1) {
-      this.chosenIds.splice(x, 1);
-    }
-
-    // this.closedTabs.push(index);
-    this.tabGroup.selectedIndex = this.tabs.length - 1;
-    //this.chosenIds.indexOf();
-    this.tabs.splice(index, 1);
-  }
-
-}

src/main/webapp/app/table-nodes/table-nodes.module.ts

@@ -1,16 +0,0 @@
-import { NgModule} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from 'app/shared/shared.module';
-import { TableNodesComponent } from './table-nodes.component';
-
-@NgModule({
-  declarations: [TableNodesComponent],
-  imports: [
-    CommonModule,
-    SharedModule
-  ],
-  exports: [TableNodesComponent]
-})
-
-
-export class TableNodesModule { }

src/main/webapp/app/table-screen/table-screen.component.html

@@ -0,0 +1,80 @@
+<div class="col-md-9 mt-2">
+<div class="p-3">
+  <mat-form-field>
+    <mat-label>Search by UUID</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="UUID" #input />
+  </mat-form-field>
+
+  <div class="mat-elevation-z4">
+    <table mat-table [dataSource]="dataSource" matSort>
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header color="primary">Name</th>
+        <td mat-cell *matCellDef="let item">{{ item.name }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
+        <td mat-cell *matCellDef="let item">{{ item.id }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
+        <td mat-cell *matCellDef="let item">{{ item.status }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="lastmod">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Modified</th>
+        <td mat-cell *matCellDef="let item">{{ item.lastmod }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="memavailable">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Available Memory</th>
+        <td mat-cell *matCellDef="let item">{{ item.memavailable }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="hdspace">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header disabled>HD Space</th>
+        <td mat-cell *matCellDef="let item">{{ item.hdspace }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Actions</th>
+        <td mat-cell *matCellDef="let item">
+          <button mat-button color="primary" (click)="addTab(this.item.id)"><mat-icon>visibility</mat-icon></button>
+        </td>
+      </ng-container>
+      <!-- rows visualization -->
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+
+      <!-- Rows 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-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons> </mat-paginator>
+  </div>
+</div>
+<div class="p-3">
+  <mat-tab-group [selectedIndex]="selectedIdx">
+    <ng-container *ngFor="let tab of tabs; let index = index">
+      <mat-tab>
+        <!--stile linguetta tab begin-->
+        <ng-template mat-tab-label>
+          <div class="col" style="margin-left: 20px">{{ tab.title }}</div>
+          <button *ngIf="tab.title !== 'JSON View'" style="color: black" mat-icon-button (click)="closeTab(index)">
+            <mat-icon>close</mat-icon>
+          </button>
+        </ng-template>
+        <!--stile linguetta tab close-->
+        <div *ngIf="tab.title !== 'JSON View'; else mainTabMsg">
+          <jhi-rawjson-pane [chosenId]="tab.id"></jhi-rawjson-pane>
+        </div>
+        <ng-template #mainTabMsg>
+          <h2>JSON raw data will show here</h2>
+        </ng-template>
+      </mat-tab>
+    </ng-container>
+  </mat-tab-group>
+</div>
+</div>

src/main/webapp/app/table-screen/table-screen.component.scss

@@ -0,0 +1,34 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
+/*
+.mat-row {
+  width: 32px;
+  text-align: left;
+  font-weight: bold;
+}
+
+.mat-mdc-header-cell {
+  font-weight: bold;
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  cursor: pointer;
+}
+
+.mat-mdc-row:hover .mat-mdc-cell {
+  border-color: currentColor;
+}
+*/
+
+
+.mat-mdc-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
+	padding:18px;
+}
+
+.mat-header-cell {
+  font-size: 18px;
+  font-weight: 800;
+}

src/main/webapp/app/table-screen/table-screen.component.ts

@@ -0,0 +1,137 @@
+/* eslint-disable no-console */
+
+import {
+  Component,
+  Output,
+  EventEmitter,
+  OnInit,
+  ViewChild,
+  AfterViewInit,
+  OnChanges,
+  SimpleChanges,
+  Input,
+  QueryList,
+} from '@angular/core';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort} from '@angular/material/sort';
+import { IContextNode } from 'app/services/i-context-node';
+import { MatPaginator} from '@angular/material/paginator';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
+import { ITabbedEntity } from 'app/i-tabbed-entity';
+import { IResImpl } from 'app/services/i-res-impl';
+import { ResourcesImplService } from 'app/services/resources-impl.service';
+
+@Component({
+  selector: 'jhi-table-screen',
+  templateUrl: './table-screen.component.html',
+  styleUrls: ['./table-screen.component.scss'],
+  providers: [ResourcesLoaderService],
+})
+
+export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
+  //NB 'actions' CI DEVE ESSERE, altrimenti la tabella non viene visualizzata
+  displayedColumns: string[] = ['name', 'id', 'status', 'lastmod', 'memavailable', 'hdspace', 'actions'];
+  dataFromService: IResImpl[];
+  dataSource = new MatTableDataSource();
+  tableDetail: IResImpl;
+
+//TODO: questo è un tipo
+  @Input() myCtx: IContextNode; //fetching event from parent
+  @Output() jsonEmitter = new EventEmitter<IResImpl>();
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  //per tabbed view
+  @ViewChild(MatTab)
+  public tabGroup: MatTabGroup | any;
+  public tabNodes: QueryList<MatTab> | any;
+  public closedTabs = [];
+  public tabs: ITabbedEntity[] = [{ title: 'JSON View', content: '', type: 0, id: '' }];
+  selectedIdx = 0;
+  chosenIds: string[] = [];
+  ////////// fine tabbed view
+
+  constructor(private myDataService: ResourcesImplService) {
+    this.myCtx = {} as IContextNode;
+    this.tableDetail = {} as IResImpl;
+    this.dataFromService = [];
+    this.sort = new MatSort();
+    this.paginator = {} as MatPaginator;
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  ngOnInit(): void {
+    this.myDataService.fetchAll('','HostingNode').subscribe(res => {
+      this.dataFromService = res;
+      this.dataSource.data = res;
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    //  console.log('---NELLA ONCHANGES...' + this.myCtx.name);
+    for (const propName in changes) {
+      if (propName === 'myCtx') {
+        const param = changes[propName];
+        //TODO: questo è un tipo
+        this.myCtx = <IContextNode>param.currentValue;
+        //controllo che l'oggetto non sia vuoto
+        if (Object.keys(this.myCtx).length !== 0) {
+          //mt qui va passato il parametro ResourceType (preso dall'albero) al rest
+          this.myDataService.fetchAll('','HostingNode').subscribe(res => {
+            this.dataFromService = res;
+            this.dataSource.data = res;
+          });
+        }
+      }
+    }
+  }
+
+  applyFilter(event: Event): void {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  // per tabbed pane (versione con aggiunta dinamica)
+
+  removeTab(index: number): void {
+    this.tabs.splice(index, 1);
+  }
+
+  addTab(itemId: string): void {
+    if (!this.chosenIds.includes(itemId)) {
+      const newItem = {
+        id: itemId,
+        title: itemId.substring(0, 20) + '...',
+        //TODO: content a regime è la stringa JSON
+        content: itemId,
+        type: 0,
+      };
+      this.selectedIdx++;
+      this.chosenIds.push(itemId);
+      this.tabs.push(newItem);
+    }
+  }
+
+  closeTab(index: number): void {
+    console.debug('---------');
+    console.debug(index);
+    console.debug('---IDs:');
+    console.debug(this.chosenIds);
+    console.debug(this.tabs[index].id);
+    console.debug('++++++++++');
+    const x = this.chosenIds.indexOf(this.tabs[index].id);
+    if (x !== -1) {
+      this.chosenIds.splice(x, 1);
+    }
+
+    // this.closedTabs.push(index);
+    this.tabGroup.selectedIndex = this.tabs.length - 1;
+    //this.chosenIds.indexOf();
+    this.tabs.splice(index, 1);
+  }
+}

src/main/webapp/app/table-screen/table-screen.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from 'app/shared/shared.module';
+import { MatTableModule } from '@angular/material/table';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSortModule } from '@angular/material/sort';
+import { TableScreenComponent } from './table-screen.component';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { RawjsonPaneComponent } from 'app/rawjson-pane/rawjson-pane.component';
+
+
+
+@NgModule({
+  imports: [
+    SharedModule,MatTableModule,MatIconModule,MatSortModule,MatPaginatorModule,RawjsonPaneComponent
+  ],
+  declarations:[TableScreenComponent],
+  entryComponents: [TableScreenComponent],
+  exports: [TableScreenComponent]
+})
+
+export class TableScreenModule {
+	
+	
+ }