Commit 9915bb99 authored by Jie Yuan's avatar Jie Yuan
Browse files

add site detail view

parent fca76224

src/app/dashboard/site/site.component.css

0 → 100644
+175 −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-left-top{

  position: absolute;

  left: 5%;

  top: 20%;

  width: 45%;

  height: 20%;

}



.div-right-top{

  position: absolute;

  left: 50%;

  top: 20%;

  width: 45%;

  height: 20%;

}



.div-left-down{

  position: absolute;

  left: 5%;

  top: 45%;

  width: 45%;

  height: 25%;

}



.div-right-down{

  position: absolute;

  left: 50%;

  top: 45%;

  width: 45%;

  height: 25%;

}



.div-down{

  position: absolute;

  left: 5%;

  top: 70%;

  width: 90%;

  

}



.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/site/site.component.html

0 → 100644
+289 −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 (click)="onLogout()">Logout</button>

</mat-menu>



</mat-toolbar>

</div>









<div class="div-top">



   <h4>  {{site.officialName}} ({{site.idName}})</h4>

  

  <button mat-button (click)="onBackClick()"  matTooltip="To {{previousView}} View">Back</button>  

 

</div>







<div class="div-right-down">

<mat-card class="example-card">

  <mat-card-header>

    

    <mat-card-title>Contact</mat-card-title>

    <mat-icon>home</mat-icon>

  </mat-card-header>

  

  <mat-card-content>

          <div>

            <table >

              <tbody >

              <tr>

                <td>E-mail</td>

                <td>{{site.contactEmail}}</td>

              </tr>

              <tr>

                <td>Telephone</td>

                <td>{{site.contactTel}}</td>

              </tr>

              <tr>

                <td>CSIRT Email</td>

                <td>{{site.csirtEmail}}</td>

              </tr>

              <tr>

                <td>Notifications</td>

                <td>

                  <i  *ngIf="site.notifications">Yes</i>

                  <i  *ngIf="!site.notifications" >No</i>

                </td>

              </tr>

              </tbody>

            </table>

          </div>

  </mat-card-content>

</mat-card>

</div>



<div class="div-right-top">

<mat-card class="example-card">

  <mat-card-header>



    <mat-card-title>Project Data</mat-card-title>

    <mat-icon>home</mat-icon>

  </mat-card-header>

  

  <mat-card-content>

          <div >

        <table>

              <tbody>

              <tr>

                <td>NGI/ROC</td>

                <td>{{site.roc}}</td>

              </tr>

              <tr>

                <td>Infrastructure</td>

                <td>{{site.productionInfrastructure}}</td>

              </tr>

              <tr>

                <td>Certification status</td>

                <td>{{site.certificationStatus}}</td>

              </tr>

              <tr>

                <td>Scope Tags</td>

                <td>{{site.scopeList}}</td>

              </tr>

              </tbody>

            </table>

          </div>

          

  </mat-card-content>

</mat-card>

</div>









<div class="div-left-down">

<mat-card class="example-card">

  <mat-card-header>



    <mat-card-title>Networking</mat-card-title>

    <mat-icon>home</mat-icon>

  </mat-card-header>

  

  <mat-card-content>

          <div >

        <table>

              <tbody>

              <tr>

                <td>Home URL</td>

                <td matTooltip="{{site.homeUrl}}" >{{shorthomeUrl}}</td>

              </tr>

              <tr>

                <td>GIIS URL</td>

                <td matTooltip="{{site.giisUrl}}">{{shortgiisUrl}}</td>

              </tr>

              <tr>

                <td>Domain</td>

                <td>{{site.domainName}}</td>

              </tr>

              <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

              </tr>

              </tbody>

            </table>

          </div>

          

  </mat-card-content>

</mat-card>

</div>





<div class="div-left-top">

<mat-card class="example-card">

  <mat-card-header>



    <mat-card-title>Location</mat-card-title>

    <mat-icon>home</mat-icon>

  </mat-card-header>

  

  <mat-card-content>

          <div >

        <table>

              <tbody>

              <tr>

                <td>Country</td>

                <td>{{site.country}}</td>

              </tr>

              <tr>

                <td>Latitude</td>

                <td>{{site.latitude}}</td>

              </tr>

              <tr>

                <td>Longitude</td>

                <td>{{site.longitude}}</td>

              </tr>

              <tr>

                <td>Time Zone</td>

                <td>{{site.timeZone}}</td>

              </tr>

              </tbody>

            </table>

          </div>

          

  </mat-card-content>

</mat-card>

</div>





<div class="div-down" *ngIf="hasHosts">

<mat-card class="example-card-right">

  <mat-card-header>



    <mat-card-title>Hosts</mat-card-title>

    <mat-icon>home</mat-icon>

  </mat-card-header>

  

  <mat-card-content>

          <div >

  <table >

              <thead>

              <tr>

                <th>Hostname</th>

                <th>URL</th>

                <th>Production</th>

                <th>Monitored</th>

                <th>Scope tags</th>

              </tr>

              </thead>

              <tbody>

              <tr *ngFor="let hostName of site.hostNames" >

                <td >{{hostName.name}}</td>

                <td >{{hostName.url}}</td>

                <td >{{hostName.hostNameStatus}}</td>

                <td >

                  <i  *ngIf="hostName.nodeMonitored" class="material-icons centerIcon">done</i>

                  <i  *ngIf="!hostName.nodeMonitored" class="material-icons centerIcon">error</i>

                </td>

                <td *ngIf = "hostName.scopeList.indexOf('cms') !== -1">{{hostName.scopeList}}</td>

              </tr>

              </tbody>

           

            </table>

          </div>

          

  </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/site/site.component.spec.ts

0 → 100644
+25 −0
Original line number Diff line number Diff line 
import { async, ComponentFixture, TestBed } from '@angular/core/testing';



import { SiteComponent } from './site.component';



describe('SiteComponent', () => {

  let component: SiteComponent;

  let fixture: ComponentFixture<SiteComponent>;



  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [ SiteComponent ]

    })

    .compileComponents();

  }));



  beforeEach(() => {

    fixture = TestBed.createComponent(SiteComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

  });



  it('should create', () => {

    expect(component).toBeTruthy();

  });

});

src/app/dashboard/site/site.component.ts

0 → 100644
+193 −0
Original line number Diff line number Diff line 
import {Component, OnDestroy, OnInit} from '@angular/core';

import {Subscription} from 'rxjs/Subscription';

import {ActivatedRoute, Router} from '@angular/router';

import {Site} from '../../model/site';

import {SiteService} from '../../site.service';

import { AuthService } from 'src/app/auth.service';





@Component({

  selector: 'app-site',

  templateUrl: './site.component.html',

  styleUrls: ['./site.component.css']

})

export class SiteComponent implements OnInit, OnDestroy {

//export class SiteComponent implements  OnDestroy {

  site: Site;

  siteUpdateSubscription: Subscription;

  sidebarOpen: boolean = false;

  hasHosts: boolean  = false;

  eoscSiteNames: string[];

  gocdbSiteNames: string[];

  dpmtSiteNames: string[];

  shorthomeUrl: string;

  shortgiisUrl: string;

  previousView: string;



  constructor(private siteService: SiteService,

    public router: Router,

    public route: ActivatedRoute,

    public authService: AuthService

    ) {

    console.log('in site view constructor');

    this.site = this.siteService.getCurrentSelectedSite();

    this.cuturls();

    if ( this.site.hostNames !== null && this.site.hostNames.length >0) {

      this.hasHosts = true;

    } else {

      this.hasHosts = false;

    }

    const tmp =sessionStorage.getItem('preSitePage')

    if (tmp !== null && tmp !== ''){

      this.previousView = tmp;

    }

    this.siteUpdateSubscription = this.siteService.siteSubscription.subscribe(

      (newSite: Site) => {

        this.site = newSite;



       

      }

    );

    this.setNameLists();

    console.log('site view constructed');

  }



  ngOnInit() {

  }



  cuturls(){

    if ( this.site.homeUrl !== null && this.site.homeUrl.length > 30){

      this.shorthomeUrl= this.site.homeUrl.substring(0,30) + '...';

    }else {

      this.shorthomeUrl = this.site.homeUrl;

    }

    console.log(this.site.homeUrl);

    console.log(this.shorthomeUrl);

    

    if (this.site.giisUrl !== null &&this.site.giisUrl.length > 30){

      this.shortgiisUrl= this.site.giisUrl.substring(0,30) + '...';

    }else {

      this.shortgiisUrl = this.site.giisUrl;

    }

    





  }



  ngOnDestroy() {

    this.siteUpdateSubscription.unsubscribe();

  }



  onBackClick() {

      console.log('on back click from site view');

      const history = sessionStorage.getItem('preSitePage');

      if ( history === null || history === '') {

        this.router.navigate(['/dashboard'], { relativeTo: this.route });

      } else if (history === 'Site') {

        this.router.navigate(['/dashboard'], { relativeTo: this.route });

      } else if (history === 'Service') {

        this.router.navigate(['/dashboard/fullTableComponent'], { relativeTo: this.route });

      }

  }

  sidenavtoggle(){

    this.sidebarOpen = ! this.sidebarOpen;

  }



  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);

          });

      

    }

    

    

  }

  onSiteNameSelected(name: string) {

    console.log('Selected new site: ' , name);

    this.siteService.getASite(name)

        .then(

          (asite: Site) => {

            sessionStorage.setItem('currentSelectedSite', JSON.stringify(asite) );

            this.site = asite;

            if ( this.site.hostNames !== null && this.site.hostNames.length >0) {

              this.hasHosts = true;

            } else {

              this.hasHosts = false;

            }

          

            this.siteUpdateSubscription = this.siteService.siteSubscription.subscribe(

              (newSite: Site) => {

                this.site = newSite;

               

               

              }

            );

            this.setNameLists();

            this.cuturls();

          }

        ).catch(

          error => {

            console.log('Error while loading sites ');

            console.log(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 });

  }

  

  onLogout(){

    this.authService.logout();

  }

  



}
 
 No newline at end of file