add site name and source in hostname component

src/app/dashboard/hostname/hostname.component.html

@@ -8,33 +8,34 @@
  <img src="assets/mainLogo.png" />
 </div>
  <p></p>
-    <div>
+ <div class="form-div">
   <mat-form-field>
   <mat-label>------DPMT------</mat-label>
   <mat-select>
-    <mat-option *ngFor="let name of dpmtSiteNames" [value]="name" (click)="onSiteNameSelected(name)">
-      {{name}}
+    <mat-option *ngFor="let dpmtsite of dpmtSiteNameAndSources"  (click)="onSiteNameAndSourceSelected(dpmtsite)">
+      {{dpmtsite.siteName}}
     </mat-option>
   </mat-select>
 </mat-form-field>
-</div>
-  <div>
+</div >
+
+  <div class="form-div">
   <mat-form-field>
   <mat-label>------GOCDB------</mat-label>
   <mat-select>
-    <mat-option *ngFor="let namegoc of gocdbSiteNames" [value]="namegoc"(click)="onSiteNameSelected(namegoc)">
-      {{namegoc}}
+    <mat-option *ngFor="let gocdbsite of gocdbSiteNameAndSources" (click)="onSiteNameAndSourceSelected(gocdbsite)">
+      {{gocdbsite.siteName}}
     </mat-option>
   </mat-select>
 </mat-form-field>
 </div>
 
-  <div>
+  <div class="form-div">
   <mat-form-field>
   <mat-label>------EOSC------</mat-label>
   <mat-select>
-    <mat-option *ngFor="let name2 of eoscSiteNames" [value]="name2" (click)="onSiteNameSelected(name2)">
-      {{name2}}
+    <mat-option *ngFor="let asite of eoscSiteNameAndSources"  (click)="onSiteNameAndSourceSelected(asite)">
+      {{asite.siteName + "--" + asite.siteSource}}
     </mat-option>
   </mat-select>
 </mat-form-field>
@@ -52,7 +53,7 @@
 
   <span class="example-fill-remaining-space"></span>
 
-  <button class="menu-button" mat-button [matMenuTriggerFor]="menusite">Site</button>
+  <button class="menu-button" mat-button [matMenuTriggerFor]="menusite">Sites</button>
 <mat-menu  #menusite="matMenu">
   <button mat-menu-item  (click)="onClickSite('dpmt')">DPMT</button>
   <button mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
@@ -60,7 +61,7 @@
 </mat-menu> 
 
 &nbsp; &nbsp;
-<button class="menu-button" mat-button [matMenuTriggerFor]="menuservice">Service</button>
+<button class="menu-button" mat-button [matMenuTriggerFor]="menuservice">Services</button>
 <mat-menu #menuservice="matMenu">
   <button mat-menu-item (click)="onClickService('dpmt')">DPMT</button>
   <button mat-menu-item (click)="onClickService('gocdb')">GOCDB</button>
@@ -73,7 +74,7 @@
 <button class="menu-button"  mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
 <mat-menu #menuuser="matMenu">
   <button mat-menu-item>Profile</button>
-  <button mat-menu-item>Logout</button>
+  <button mat-menu-item (click)="onLogout()">Logout</button>
 </mat-menu>
 
 </mat-toolbar>

src/app/dashboard/hostname/hostname.component.ts

@@ -3,6 +3,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 
 import {HostNameShort} from '../../model/host-name-short';
 import {SiteShortService} from '../../site-short.service';
+import {SitenameAndSource} from '../../model/sitenameAndSource';
 import {PreparedServiceComponentShort} from '../../model/prepared-service-component-short';
 
 import {Site} from '../../model/site';
@@ -21,9 +22,9 @@ export class HostnameComponent implements OnInit, OnDestroy {
   siteName: string;
   serviceName: string;
   noOfServices: number;
-  eoscSiteNames: string[];
-  gocdbSiteNames: string[];
-  dpmtSiteNames: string[];
+  eoscSiteNameAndSources: SitenameAndSource[];
+  dpmtSiteNameAndSources: SitenameAndSource[];
+  gocdbSiteNameAndSources: SitenameAndSource[];
   sidebarOpen:boolean = true;
   username: string;
 
@@ -53,7 +54,7 @@ export class HostnameComponent implements OnInit, OnDestroy {
       this.setServiceComponentList(this.hostList);
       console.log(this.servList);
     }
-    this.setNameLists();
+    this.setNameSourceLists();
   }
 
   ngOnInit() {
@@ -123,51 +124,11 @@ export class HostnameComponent implements OnInit, OnDestroy {
 
 
   onBackClick() {
-    console.log('on back click from hostname view');
+   console.log('on back click from hostname view');
    this.router.navigate(['/dashboard'], { relativeTo: this.route });
     
 }
 
-setNameLists(){
-  this.setNameListsFromSource('dpmt');
-  this.setNameListsFromSource('gocdb');
-  this.setNameListsFromSource('eosc');
-}
-
-setNameListsFromSource(source: string){
-  const stmp = 'JsonSiteNameList' + source.toUpperCase();
-  const ltmp = sessionStorage.getItem(stmp) ;
-  if( ltmp !== null) {
-      const ldata = JSON.parse(ltmp);
-      if ( source === 'dpmt') {
-        this.dpmtSiteNames = ldata;
-      } else if (source === 'gocdb') {
-        this.gocdbSiteNames = ldata;
-      } else if (source === 'eosc') {
-        this.eoscSiteNames = ldata;
-      }
-  } else {
-    this.siteService.getSiteNameListFromSource(source)
-          .then((ldata: string[]) => {
-            if ( source === 'dpmt') {
-              this.dpmtSiteNames = ldata;
-            } else if (source === 'gocdb') {
-              this.gocdbSiteNames = ldata;
-            } else if (source === 'eosc') {
-              this.eoscSiteNames = ldata;
-            }
-            const tmp = 'JsonSiteNameList' + source.toUpperCase();
-             sessionStorage.setItem(tmp, JSON.stringify(ldata));
-          }
-          ).catch((error) => {
-            console.log('Loading server list from DPMT: ', error);
-        });
-    
-  }
-  
-  
-}
-
 
 
 public onClickSite(source: string) {
@@ -217,4 +178,71 @@ onLogout(){
   this.authService.logout();
 }
 
+setNameSourceLists(){
+  //this.setNameListsFromSource('dpmt');
+  //this.setNameListsFromSource('gocdb');
+  this.setNameAndSourceListsFromSource('dpmt');
+  this.setNameAndSourceListsFromSource('gocdb');
+  this.setNameAndSourceListsFromSource('eosc');
+}
+
+
+
+
+
+
+  setNameAndSourceListsFromSource(source: string){
+    const stmp = 'JsonSiteNameSourceList' + source.toUpperCase();
+    const ltmp = sessionStorage.getItem(stmp) ;
+    if( ltmp !== null) {
+        const ldata = JSON.parse(ltmp);
+        if ( source === 'dpmt') {
+          this.dpmtSiteNameAndSources = ldata;
+        } else if (source === 'gocdb') {
+          this.gocdbSiteNameAndSources = ldata;
+        } else if (source === 'eosc') {
+          this.eoscSiteNameAndSources = ldata;
+        }
+    } else {
+      this.siteService.getSiteNameAndSourceListFromSource(source)
+            .then((ldata: SitenameAndSource[]) => {
+              if ( source === 'dpmt') {
+                this.dpmtSiteNameAndSources = ldata;
+              } else if (source === 'gocdb') {
+                this.gocdbSiteNameAndSources = ldata;
+              } else if (source === 'eosc') {
+                this.eoscSiteNameAndSources = ldata;
+              }
+              const tmp = 'JsonSiteNameSourceList' + source.toUpperCase();
+               sessionStorage.setItem(tmp, JSON.stringify(ldata));
+            }
+            ).catch((error) => {
+              console.log('Loading server list from DPMT: ', error);
+          });
+      
+    } 
+}
+
+onSiteNameAndSourceSelected(siteNameSource: SitenameAndSource) {
+  console.log('Selected new eosc site: ' , siteNameSource.siteName + ' from ' + siteNameSource.siteSource);
+  sessionStorage.setItem('preSitePage','Site');
+  //const tmp = siteNameSource.siteSource.toUpperCase() + siteNameSource.siteName;
+  //this.onSiteNameSelected(tmp);
+  this.siteService.getASiteById(siteNameSource.siteId)
+  .then(
+    (asite: Site) => {
+      sessionStorage.setItem('currentSelectedSite', JSON.stringify(asite) );
+      this.router.navigate(['/dashboard/site'], { relativeTo: this.route });
+    }
+  ).catch(
+    error => {
+      console.log('Error while loading sites ');
+      console.log(error);
+    }
+  );
+
+}
+
+
+
 }
\ No newline at end of file