Rendered resource list by dientifying facets

.vscode/launch.json

@@ -4,13 +4,21 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Launch Chrome 127.0.0.1 (2)",
+      "type": "chrome",
+      "request": "launch",
+      "port": 9281,
+      "webRoot": "${workspaceFolder}",
+      "url": "http://127.0.0.1:39447/p/is-monitor/is-monitor-frontend/src/index.html?_cmAuth\u003dwfreghlipl"
+    },
     {
       "name": "Launch Chrome 127.0.0.1",
       "type": "chrome",
       "request": "launch",
-      "port": 9207,
+      "port": 9225,
       "webRoot": "${workspaceFolder}",
-      "url": "http://127.0.0.1:39447/p/is-monitor/is-monitor-frontend/src/index.html?_cmAuth\u003dwfreghlipl"
+      "url": "http://127.0.0.1:39447/p/is-monitor/is-monitor-frontend/src/app/app.component.html?_cmAuth\u003dwfreghlipl"
     }
   ]
 }

is-monitor-frontend/src/app/is.service.ts

@@ -1,8 +1,10 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 import { ISType } from './ISType';
 import { types } from './types';
+import { list } from './list';
 
 
 @Injectable({
@@ -12,6 +14,12 @@ export class IsService {
 
   constructor(private httpClient: HttpClient) { }
 
+  private baseURL = 'http://pc-frosini.isti.cnr.it:8080/resource-registry';
+  private typesURL = this.baseURL + '/types';
+  private instancesURL = this.baseURL + '/instances';
+  private queryURL = this.baseURL + '/query';
+
+
   /* NextNext Token */
   private token = '';
 
@@ -23,25 +31,30 @@ export class IsService {
    */
   private handleError<T>(operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {
-      console.error(error);
+      console.error(`${operation} failed: ${error.message}`);
-      console.error(`${operation} failed: ${error.message}`); // log to console instead
+      if (result) {
-      // Let the app keep running by returning an empty result.
+        console.warn(`${operation} is going to provide hard-coded data which is better than nothing.`);
+      }
       return of(result as T);
     };
   }
 
   public getResourceTypes(callback: (isTypes: ISType[]) => void): void {
-
+    const url = this.typesURL + '/Resource?polymorphic=true&gcube-token=' + this.token;
-    const url = 'http://pc-frosini.isti.cnr.it:8080/resource-registry/types/Resource?polymorphic=true&gcube-token=' + this.token;
     // const observable: Observable<ISType[]> = of(types);
     const observable: Observable<ISType[]> = this.httpClient.get<ISType[]>(url);
-    /*
     observable.pipe(
-      tap(_ => console.info('Fetched Resource Types')),
       catchError(this.handleError<ISType[]>('getResourceTypes()', types))
-    );
+    ).subscribe(data => callback(data));
-    */
+  }
-    observable.subscribe(data => callback(data));
+
+  public getIdentifyingFacets(resourceType: string, callback: (instances: any[]) => void): void {
+    const url = this.queryURL +  resourceType + '?polymorphic=true&gcube-token=' + this.token;
+    // const observable: Observable<ISType[]> = of(types);
+    const observable: Observable<any[]> = this.httpClient.get<any[]>(url);
+    observable.pipe(
+      catchError(this.handleError<any[]>('getResourceInstances()', list))
+    ).subscribe(data => callback(data));
   }
 
 }

is-monitor-frontend/src/app/list.ts

@@ -0,0 +1,38 @@
+export const list: any[] = [
+    {
+        "@class": "SoftwareFacet",
+        "group": "vre-management",
+        "name": "whn-manager",
+        "version": "1.3.0"
+    },
+    {
+        "@class": "SoftwareFacet",
+        "group": "vre-management",
+        "name": "smart-executor",
+        "version": "2.0.0"
+    },
+    {
+        "@class": "SoftwareFacet",
+        "group": "information-system",
+        "name": "resource-registry",
+        "version": "2.1.0"
+    },
+    {
+        "@class": "SoftwareFacet",
+        "group": "data-publishing",
+        "name": "gcat",
+        "version": "2.3.0"
+    },
+    {
+        "@class": "SoftwareFacet",
+        "group": "vre-management",
+        "name": "whn-manager",
+        "version": "1.3.0"
+    },
+    {
+        "@class": "SoftwareFacet",
+        "group": "vre-management",
+        "name": "whn-manager",
+        "version": "1.3.0"
+    }
+];

is-monitor-frontend/src/app/resource-list/resource-list.component.html

@@ -1,26 +1,19 @@
-<table class="table table-striped table-bordered">
+<div style="margin-left:5px;">
-    <thead>
+    <table class="table table-striped table-bordered" *ngFor="let resourceIdentification of resourceIdentificationList">
-        <tr>
+        <thead>
-            <th scope="col">Group</th>
+            <tr>
-            <th scope="col">Name</th>
+                <th [attr.colspan]="resourceIdentification.mandatoryProperties.size">{{resourceIdentification.type}}</th>
-            <th scope="col">Version</th>
+            </tr>
-        </tr>
+            <tr>
-    </thead>
+                <th scope="col" *ngFor="let property of resourceIdentification.mandatoryProperties">
-    <tbody>
+                    {{ property.charAt(0).toLocaleUpperCase() + property.substr(1) }}
-        <tr>
+                </th>
-            <td>vre-management</td>
+            </tr>
-            <td>smart-executor</td>
+        </thead>
-            <td>2.0.0</td>
+        <tbody>
-        </tr>
+            <tr *ngFor="let facet of resourceIdentification.instances">
-        <tr>
+                <td *ngFor="let property of resourceIdentification.mandatoryProperties">{{ facet[property] }}</td>
-            <td>information-system</td>
+            </tr>
-            <td>resource-registry</td>
+        </tbody>
-            <td>2.1.0</td>
+    </table>
-        </tr>
+</div>
-        <tr>
-            <td>data-publishing</td>
-            <td>gcat</td>
-            <td>2.3.0</td>
-        </tr>
-    </tbody>
-</table>

is-monitor-frontend/src/app/resource-list/resource-list.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { IsService } from '../is.service';
+import { ResourceIdentification, TYPE_PROPERTY_KEY } from './resourceidentification';
 
 @Component({
   selector: 'app-resource-list',
@@ -7,9 +9,36 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ResourceListComponent implements OnInit {
 
-  constructor() { }
+  public resourceIdentificationList: Array<ResourceIdentification>;
+
+  constructor(private isService: IsService) { }
 
   ngOnInit() {
+    // this.isService.getIdentifyingFacets('Service', facets => {this.identifyingFacets = facets;});
+    this.isService.getIdentifyingFacets('Service', facets => { this.resourceIdentificationList = this.analyseIdentifyingFacets(facets); });
+  }
+
+  analyseIdentifyingFacets(identifyingFacets: any[]): Array<ResourceIdentification> {
+
+    const map = new Map<string, ResourceIdentification>();
+    const facets = new Array<ResourceIdentification>();
+
+    for (const facet of identifyingFacets) {
+
+      const facetType: string = facet[TYPE_PROPERTY_KEY];
+      let facetList: ResourceIdentification;
+
+      if (map.has(facetType)) {
+        facetList = map.get(facetType);
+      } else {
+        facetList = new ResourceIdentification(facetType);
+        map.set(facetType, facetList);
+        facets.push(facetList);
+      }
+      facetList.add(facet);
+    }
+
+    return facets;
   }
 
 }

is-monitor-frontend/src/app/resource-list/resourceidentification.ts

@@ -0,0 +1,30 @@
+export const TYPE_PROPERTY_KEY = '@class';
+
+export class ResourceIdentification {
+
+    public type: string;
+    public mandatoryProperties: Set<string>;
+    public instances: any[];
+
+    private first = true;
+
+    constructor(type: string) {
+        this.type = type;
+        this.mandatoryProperties = new Set<string>();
+        this.instances = new Array<any>();
+    }
+
+    public add(facet: any) {
+        if (this.first) {
+            for (const propertyKey in facet) {
+                if (propertyKey.localeCompare(TYPE_PROPERTY_KEY) === 0) {
+                    continue;
+                }
+                this.mandatoryProperties.add(propertyKey);
+            }
+            this.first = false;
+        }
+        this.instances.push(facet);
+    }
+
+}

is-monitor-frontend/src/app/resource-types-tree/resource-types-tree.component.ts

@@ -17,10 +17,10 @@ export class ResourceTypesTreeComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.isService.getResourceTypes(isTypes => {this.resources = this.analyseTypes(isTypes)});
+    this.isService.getResourceTypes(isTypes => { this.resources = this.analyseTypes(isTypes); });
   }
 
-  private analyseUnassociated = function(type: Type, map: Map<string, Type>, unassociated: Map<string, ISType>) {
+  analyseUnassociated(type: Type, map: Map<string, Type>, unassociated: Map<string, ISType>) {
     const associated: string[] = new Array();
 
     for (const name of unassociated.keys()) {
@@ -36,9 +36,9 @@ export class ResourceTypesTreeComponent implements OnInit {
       unassociated.delete(a);
     }
 
-  };
+  }
 
-  private analyseType = function(isType: ISType, map: Map<string, Type>, unassociated: Map<string, ISType>) {
+  analyseType(isType: ISType, map: Map<string, Type>, unassociated: Map<string, ISType>) {
 
     const type: Type = new Type(isType);
 
@@ -53,9 +53,9 @@ export class ResourceTypesTreeComponent implements OnInit {
         unassociated.set(type.name, isType);
       }
     }
-  };
+  }
 
-  private analyseTypes = function(isTypes: ISType[]): Type[] {
+  analyseTypes(isTypes: ISType[]): Type[] {
 
     const map = new Map<string, Type>();
     const unassociated = new Map<string, ISType>();
@@ -65,8 +65,7 @@ export class ResourceTypesTreeComponent implements OnInit {
     }
 
     return map.get('Resource').children;
-  };
+  }
-
 
   loadResources(typeName: string) {
     window.alert('Loading ' + typeName + ' resources');

is-monitor-frontend/src/app/type.ts

@@ -21,4 +21,4 @@ export class Type {
     this.children.sort((left, right) => left.name.localeCompare(right.name));
   }
 
-}
+}