Commit 576c502b authored by Jie Yuan's avatar Jie Yuan
Browse files

add hostname component

parent 9915bb99

src/app/dashboard/hostname/hostname.component.css

0 → 100644
+154 −0
Original line number Diff line number Diff line 






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

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

0 → 100644
+173 −0
Original line number Diff line number Diff line 




<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

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

0 → 100644
+25 −0
Original line number Diff line number Diff line 
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();

  });

});

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

0 → 100644
+219 −0
Original line number Diff line number Diff line 
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