add hostname component

576c502b · Jie Yuan · 9915bb99 · 576c502b · 576c502b · 576c502b
Commit 576c502b authored Apr 23, 2019 by Jie Yuan
4 changed files
--- a/src/app/dashboard/hostname/hostname.component.css
+++ b/src/app/dashboard/hostname/hostname.component.css
+
+
+
+th.mat-sort-header-sorted {
+  color: black;
+}
+
+.table-container {
+  max-width: 40%;
+  padding: 10px 10px;
+  margin:0 auto;
+  font-size: 30px;
+}
+
+.sidebar-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #eee;
+  z-index: 1;
+}
+
+
+
+
+.example-container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.example-is-mobile .example-toolbar {
+  position: fixed;
+  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
+  z-index: 2;
+}
+
+h1.example-app-name {
+  margin-left: 8px;
+}
+
+.example-sidenav-container {
+  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
+     causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
+  flex: 1;
+}
+
+.example-is-mobile .example-sidenav-container {
+  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
+     `<body>` to be our scrolling element for mobile layouts. */
+  flex: 1 0 auto;
+}
+
+
+.example-toolbar {
+  z-index: auto;
+}
+
+.basic-container {
+  padding: 30px;
+}
+
+.example-fill-remaining-space {
+  /* This fills the remaining space, by using flexbox. 
+     Every toolbar row uses a flexbox row layout. */
+  flex: 1 1 auto;
+}
+
+mat-sidenav {
+  width: 15%;
+}
+
+.menu-button {
+  border:none;
+}
+
+
+
+.example-card {
+ 
+  margin: 2%;
+  font-size: 45px;
+  text-align: left;
+}
+
+.example-card-right {
+  
+  margin: 2.5%;
+ 
+  text-align: left;
+  margin: 2% ;
+
+}
+
+.example-header-image {
+  
+  background-size: cover;
+}
+
+table{
+  border-spacing: 7px;
+  font-size: 130%;
+  column-gap: 3px;
+}
+
+
+
+
+.div-top1{
+  position: absolute;
+  left: 5%;
+  top: 12%;
+  width: 90%;
+  height: 40%;
+}
+
+
+.div-top2{
+  position: absolute;
+  left: 5%;
+  top: 50%;
+  width: 90%;
+  height: 40%;
+}
+
+.div-top{
+  position: absolute;
+  left: 5%;
+  top: 10%;
+  width: 86%;
+  height: 5%;
+}
+
+td, th{
+  width: 21%;
+}
+
+h3 {
+  text-align: center;
+}
+
+img {
+  width: 86%;
+}
+
+.toolbar-div {
+  background: rgb(184, 197, 196);
+}
\ No newline at end of file
--- a/src/app/dashboard/hostname/hostname.component.html
+++ b/src/app/dashboard/hostname/hostname.component.html
+
+
+<div>
+<mat-sidenav-container class="example-container" >
+  <mat-sidenav *ngIf="sidebarOpen" mode="side" opened>
+
+<div>
+ <img src="assets/logoSideBar.png" alt="Banner Image" class="logoSideBarImg"/>
+</div>
+
+    <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>
+  </mat-select>
+</mat-form-field>
+</div>
+  <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>
+  </mat-select>
+</mat-form-field>
+</div>
+
+  <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>
+  </mat-select>
+</mat-form-field>
+</div>
+   </mat-sidenav>
+
+
+  <mat-sidenav-content>
+
+
+ <div>
+<mat-toolbar class="toolbar-div">
+
+<button class="menu-button" mat-icon-button (click)="sidenavtoggle()"><mat-icon>menu</mat-icon></button>
+
+  <span class="example-fill-remaining-space"></span>
+
+  <button class="menu-button" mat-button [matMenuTriggerFor]="menusite">Site</button>
+<mat-menu  #menusite="matMenu">
+  <button mat-menu-item  (click)="onClickSite('dpmt')">DPMT</button>
+  <button mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
+  <button mat-menu-item (click)="onClickSite('eosc')">EOSC</button>
+</mat-menu> 
+
+&nbsp; &nbsp;
+<button class="menu-button" mat-button [matMenuTriggerFor]="menuservice">Service</button>
+<mat-menu #menuservice="matMenu">
+  <button mat-menu-item (click)="onClickService('dpmt')">DPMT</button>
+  <button mat-menu-item (click)="onClickService('gocdb')">GOCDB</button>
+  <button mat-menu-item (click)="onClickService('eosc')">EOSC</button>
+</mat-menu>
+
+
+&nbsp; &nbsp;
+
+<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>
+</mat-menu>
+
+</mat-toolbar>
+</div>
+
+
+
+<div class="div-top">
+  <button mat-button (click)="onBackClick()">Back</button>  
+</div>
+
+
+
+
+
+<div class="div-top1">
+<mat-card class="example-card-right">
+  <mat-card-header>
+
+    <mat-card-title>Hosts at {{siteName}}</mat-card-title>
+    <mat-icon>home</mat-icon>
+  </mat-card-header>
+  
+  <mat-card-content>
+       <table >
+            <thead>
+            <tr>
+              <th>Hostname</th>
+              <th>URL</th>
+              <th>Production</th>
+              <th>operatingSystem</th>
+              <th>Service Components</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let host of hostList">
+              <td>{{host.name}}</td>
+              <td>{{host.url}}</td>
+              <td>{{host.productionTag}}</td>
+              <td>{{host.operatingSystem}}</td>
+              <td>{{host.noOfServiceComp}}</td>
+            </tr>
+            </tbody>
+          </table>
+          
+  </mat-card-content>
+</mat-card>
+</div>
+
+
+<div class="div-top2" *ngIf="noOfServices">
+<mat-card class="example-card-right">
+  <mat-card-header>
+
+    <mat-card-title>Services at {{siteName}}</mat-card-title>
+    <mat-icon>home</mat-icon>
+  </mat-card-header>
+  
+  <mat-card-content>
+     <table class="table table-striped">
+            <thead>
+            <tr>
+              <th>Hostname</th>
+              <th>Service</th>
+              <th>Components</th>
+              <th>Version</th>
+              <th>LastChangedOn</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let serv of servList">
+              <td>{{serv.hostname}}</td>
+              <td>{{serv.type}}</td>
+              <td>{{serv.name}}</td>
+              <td>{{serv.tagAtSite}}</td>
+              <td>{{serv.updatedOn}}</td>
+            </tr>
+            </tbody>
+        </table>  
+  </mat-card-content>
+</mat-card>
+</div>
+
+
+
+
+
+
+
+
+
+
+  </mat-sidenav-content>
+</mat-sidenav-container>
+</div>
+
+<router-outlet></router-outlet>
\ No newline at end of file
--- a/src/app/dashboard/hostname/hostname.component.spec.ts
+++ b/src/app/dashboard/hostname/hostname.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HostnameComponent } from './hostname.component';
+
+describe('HostnameComponent', () => {
+  let component: HostnameComponent;
+  let fixture: ComponentFixture<HostnameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HostnameComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostnameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/dashboard/hostname/hostname.component.ts
+++ b/src/app/dashboard/hostname/hostname.component.ts
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import {HostNameShort} from '../../model/host-name-short';
+import {SiteShortService} from '../../site-short.service';
+import {PreparedServiceComponentShort} from '../../model/prepared-service-component-short';
+
+import {Site} from '../../model/site';
+import { AuthService } from 'src/app/auth.service';
+
+@Component({
+  selector: 'app-hostname',
+  templateUrl: './hostname.component.html',
+  styleUrls: ['./hostname.component.css']
+})
+export class HostnameComponent implements OnInit, OnDestroy {
+ // export class ServiceCompComponent implements OnDestroy {
+  hostList: HostNameShort[];
+  servList: PreparedServiceComponentShort[];
+
+  siteName: string;
+  serviceName: string;
+  noOfServices: number;
+  eoscSiteNames: string[];
+  gocdbSiteNames: string[];
+  dpmtSiteNames: string[];
+  sidebarOpen:boolean = false;
+
+
+  constructor(private siteService: SiteShortService, public router: Router,
+    public route: ActivatedRoute, public authService: AuthService) {
+   // this.siteName = '';
+    // this.hostList = [];
+    this.siteName = this.siteService.currentSite;
+    console.log('now in hostname component');
+    console.log(this.siteName);
+    console.log(this.hostList);
+    sessionStorage.setItem('preSitePage','Host');
+    const hostSessionData = sessionStorage.getItem('currentHostList');
+    if ( hostSessionData !== null) {
+      this.hostList = JSON.parse(hostSessionData);
+      this.noOfServices = Number(sessionStorage.getItem('noOfServices'));
+      const servCompSessionData = sessionStorage.getItem('currentServCompList');
+      if ( servCompSessionData !== null ) {
+        this.servList = JSON.parse(servCompSessionData);
+      } else {
+      this.setServiceComponentList(this.hostList);
+      }
+    } else {
+      this.setHostShortList();
+      console.log(this.hostList);
+      this.setServiceComponentList(this.hostList);
+      console.log(this.servList);
+    }
+    this.setNameLists();
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnDestroy() {
+  }
+
+  setHostShortList() {
+    this.hostList = this.siteService.getHostsShort();
+    this.hostList.sort(function(a, b) {
+      if ( a.noOfServiceComp < b.noOfServiceComp) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+    sessionStorage.setItem('currentHostList', JSON.stringify(this.hostList));
+  }
+
+  setHostList() {
+    //this.siteService.setHosts(this.siteName);
+    this.siteService.getHosts()
+    .then(
+      (list: HostNameShort[]) => {
+        console.log('Loaded hostname list: ', list);
+        this.hostList = list;
+        
+        //console.log("done");
+      }
+    ).catch(
+      error => {
+        console.log('Error while loading hosts ');
+        console.log(error);
+        this.hostList = [];
+        this.servList = [];
+      }
+    );
+
+  }
+
+  setServiceComponentList(hostList: HostNameShort[]) {
+    this.servList = [];
+    this.noOfServices = 0;
+     for ( const iter of hostList) {
+          if ( iter.noOfServiceComp !== 0 ) {
+            console.log(iter.name);
+            let serv;
+            serv = new PreparedServiceComponentShort(iter.name);
+            for (let i = 0; i < iter.noOfServiceComp; i++) {
+              serv.type=iter.serviceTypes[i];
+              serv.updatedOn=iter.changedDate[i];
+              serv.tagAtSite=iter.tagOfServiceComp[i];
+              serv.name=iter.nameOfServiceComp[i];
+              this.servList.push(serv);
+              this.noOfServices = this.noOfServices + 1;
+              console.log(serv);
+            }
+          }
+     }
+     sessionStorage.setItem('noOfServices', this.noOfServices.toString());
+    if ( this.servList !== null && this.servList !== []  ) {
+      sessionStorage.setItem('currentServCompList', JSON.stringify(this.servList));
+    }
+  }
+
+
+
+  onBackClick() {
+    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) {
+
+  console.log('site clicked with');
+
+  sessionStorage.setItem('preSitePage', 'Site')
+  sessionStorage.setItem('currentSiteShortSource',source);
+  sessionStorage.setItem('currentSiteShortSource', source);
+  this.router.navigate(['/dashboard'], { relativeTo: this.route });
+
+}
+
+
+public onClickService(source: string) {
+
+  console.log('service clicked with');
+
+  sessionStorage.setItem('preSitePage', 'Service')
+  sessionStorage.setItem('currentServiceSource',source);
+  sessionStorage.setItem('currentSiteShortSource', source);
+  this.router.navigate(['/dashboard/fullTableComponent'], { relativeTo: this.route });
+}
+
+onSiteNameSelected(name: string) {
+  console.log('Selected new site: ' , name);
+  this.siteService.getASite(name)
+      .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);
+        }
+      );
+}
+
+sidenavtoggle(){
+  this.sidebarOpen = ! this.sidebarOpen;
+}
+
+
+onLogout(){
+  this.authService.logout();
+}
+
+}
\ No newline at end of file