Commit 534da7a7 authored by Jie Yuan's avatar Jie Yuan
Browse files

add table comp for site view

parent 0f929907

src/app/dashboard/table/table.component.css

0 → 100644
+107 −0
Original line number Diff line number Diff line 
table {

    width: 90%;

    text-align: left;

    margin:0 auto;

  }  



.mat-table-div {

  width: 90%;

  text-align: left;

  margin:0 auto;

}



.mat-filter-div {

  width: 20%;

  text-align: left;

  margin:0 auto;

  left: 8%;

  position: relative;

}





  th.mat-sort-header-sorted {

    color: black;

  }



  .table-container {

    max-width: 90%;

    padding: 40px 40px;

    margin:0 auto;

    vertical-align:middle;

  }

  

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

  }



  img {

    width: 86%;

  }



  .toolbar-div {

    background: rgb(184, 197, 196);

  }
 
 No newline at end of file

src/app/dashboard/table/table.component.html

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












<div>

<mat-sidenav-container class="example-container" *ngIf="shouldRun">

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



<mat-form-field class="mat-filter-div">

  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

</mat-form-field>



<mat-table  [dataSource]="dataSource" matSort class="mat-elevation-z8 mat-table-div"  >



  <!--- Note that these columns can be defined in any order.

        The actual rendered columns are set as a property on the row definition" -->



  <!-- Position Column -->

  <ng-container matColumnDef="siteName">

    <mat-header-cell *matHeaderCellDef  mat-sort-header> Site </mat-header-cell>

    <mat-cell *matCellDef="let element" (click)="onClick(element)" matTooltip="Show {{element.siteName}} Info" > {{element.siteName}} </mat-cell>

  </ng-container>



  <!-- Name Column -->

  <ng-container matColumnDef="siteUrl">

    <mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>

    <mat-cell *matCellDef="let element" (click)="onClick(element)" matTooltip="Show {{element.siteName}} Info"> {{element.siteUrl}} </mat-cell>

  </ng-container>



  <!-- Weight Column -->

  <ng-container matColumnDef="siteCountry">

    <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>

    <mat-cell *matCellDef="let element" (click)="onClick(element)" matTooltip="Show {{element.siteName}} Info"> {{element.siteCountry}} </mat-cell>

  </ng-container>



  <!-- Symbol Column -->

  <ng-container matColumnDef="siteNoOfHosts">

    <mat-header-cell *matHeaderCellDef mat-sort-header>Hosts </mat-header-cell>

    <mat-cell *matCellDef="let element"  (click)="onHostsSelected(element)" matTooltip="Show Hosts amd Services @{{element.siteName}}" > {{element.siteNoOfHosts}}

     </mat-cell>

  </ng-container>



  <ng-container matColumnDef="siteNoOfServices">

    <mat-header-cell *matHeaderCellDef mat-sort-header> Services </mat-header-cell>

    <mat-cell *matCellDef="let element" (click)="onHostsSelected(element)" matTooltip="Show Hosts amd Services @{{element.siteName}}"> {{element.siteNoOfServices}} 

    </mat-cell>

  </ng-container>



  <ng-container matColumnDef="lastUpdateOn">

    <mat-header-cell *matHeaderCellDef> LastUpdated</mat-header-cell>

    <mat-cell *matCellDef="let element"> {{element.lastUpdateOn}} </mat-cell>

  </ng-container>



  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>









 <mat-paginator [pageSizeOptions]="[5, 10, 20,40]" showFirstLastButtons></mat-paginator>

</div>



  </mat-sidenav-content>

</mat-sidenav-container>

</div>

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

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



import { TableComponent } from './table.component';



describe('TableComponent', () => {

  let component: TableComponent;

  let fixture: ComponentFixture<TableComponent>;



  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [ TableComponent ]

    })

    .compileComponents();

  }));



  beforeEach(() => {

    fixture = TestBed.createComponent(TableComponent);

    component = fixture.componentInstance;

    fixture.detectChanges();

  });



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

    expect(component).toBeTruthy();

  });

});

src/app/dashboard/table/table.component.ts

0 → 100644
+318 −0
Original line number Diff line number Diff line 
import {Component, OnInit, Inject, ViewContainerRef,Input, DoCheck,ViewChild,OnDestroy,ChangeDetectorRef,AfterViewInit, ViewChildren} from '@angular/core';

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



import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';

import {MediaMatcher} from '@angular/cdk/layout';



import {SiteShort} from '../../model/site-short';

import {SiteShortService} from '../../site-short.service';



import {SharedService} from '../../shared-service';

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

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











@Component({

  selector: 'app-table',

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

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

})

export class TableComponent implements OnInit, DoCheck,AfterViewInit {



  displayedColumns: string[] = ['siteName','siteUrl','siteCountry','siteNoOfHosts','siteNoOfServices','lastUpdateOn'];

  shouldRun: boolean = true;

  sidebarOpen: boolean = false;

  currentSiteSource: string;

 

  serverList: SiteShort[];



  dataSource : MatTableDataSource<SiteShort>;

  

  eoscSiteNames: string[];

  gocdbSiteNames: string[];

  dpmtSiteNames: string[];



  @ViewChild(MatPaginator) paginator: MatPaginator;

  @ViewChild(MatSort) sort: MatSort;



  constructor(

    public siteService: SiteShortService,

    public router: Router,

    public route: ActivatedRoute,

    public authService: AuthService

  ) {

    console.log('table constructor');

    

    const stmp = sessionStorage.getItem('currentSiteShortSource');

    console.log(stmp);

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

      this.currentSiteSource = 'dpmt';

      sessionStorage.setItem('currentSiteShortSource',this.currentSiteSource);

    } else {

      this.currentSiteSource = stmp;

    }

   

    const tmp = 'JsonSiteShortList' + this.currentSiteSource.toUpperCase();

    const ltmp = sessionStorage.getItem(tmp);

  

    if (ltmp !== null) {

      const list = JSON.parse(ltmp);

      this.serverList = list;

      this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);

      this.dataSource.paginator = this.paginator;

      this.dataSource.sort = this.sort;



    } else {

      

      siteService.getSiteListFromSource(this.currentSiteSource)

      .then(

        (serverList: SiteShort[]) => {

          console.log('Loaded servers list: ', serverList);

          this.serverList = serverList;

        

          const tmp = 'JsonSiteShortList' + this.currentSiteSource.toUpperCase();

          sessionStorage.setItem(tmp, JSON.stringify(this.serverList));

          this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);

          this.dataSource.sort = this.sort;

          this.dataSource.paginator = this.paginator;

          



        }

      ).catch(

        error => {

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

          console.log(error);

          this.serverList = [];

        }

      );

      

    }

    siteService.siteSourceSubscription.subscribe(

      data => {

        this.serverList = data;

      //  this.dataSource = new MatTableDataSource<SiteShort>(this.serverList)

      }

      );



      this.setNameLists();

      sessionStorage.setItem('preSitePage','Site');

      

    

    

}







  

  ngOnInit() {

    console.log('table init');

  

   

  }



  ngAfterViewInit(){

    console.log('table after init');

    //this.dataSource.paginator = this.paginator;

    this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);

    this.dataSource.paginator = this.paginator;

    this.dataSource.sort = this.sort;

  }





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

          });

      

    }

    

    

  }







 

  sidenavtoggle(){

    this.sidebarOpen = ! this.sidebarOpen;

  }





onClick(serverData: SiteShort) {

  console.log('click on table');

  this.siteService.getASite(serverData.siteName)

      .then(

        (asite: Site) => {

          sessionStorage.setItem('preSitePage', '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);

        }

      );

}







onSiteNameSelected(name: string) {

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

  sessionStorage.setItem('preSitePage','Site');

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

        }

      );

}



public onClickSite(source: string) {



  console.log('site clicked with');



  sessionStorage.setItem('preSitePage', 'Site')

  sessionStorage.setItem('currentSiteShortSource',source);

  //sessionStorage.setItem('currentSiteShortSource', 'dpmt');

 // 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', 'dpmt');

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



}

  





ngDoCheck() {

  if ( sessionStorage.getItem('currentSiteShortSource') !== null && this.currentSiteSource !== sessionStorage.getItem('currentSiteShortSource')) {

    this.currentSiteSource = sessionStorage.getItem('currentSiteShortSource');

    const tmp = 'JsonSiteShortList' + this.currentSiteSource.toUpperCase();

    

    const sessionData = sessionStorage.getItem(tmp);



    if (sessionData !== null ) {

      const list = JSON.parse(sessionData);

      this.serverList = list;

      this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);

      this.dataSource.paginator = this.paginator;

      this.dataSource.sort = this.sort;



     

   } else {

    if (this.currentSiteSource !== 'all') {

      this.siteService.getSiteListFromSource(this.currentSiteSource)

    .then(

      (serverList: SiteShort[]) => {

        console.log('Loaded servers list: ', serverList);

        const stmp  = 'JsonSiteShortList' + this.currentSiteSource.toUpperCase();

        this.serverList = serverList;

        sessionStorage.setItem(stmp, JSON.stringify(this.serverList));

        this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);

        this.dataSource.paginator = this.paginator;

        this.dataSource.sort = this.sort;

        

      }

    ).catch(

      error => {

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

        console.log(error);

        this.serverList = [];

      }

    );



    } else {

      this.siteService.getSiteList()

      .then(

        (serverList: SiteShort[]) => {

          console.log('Loaded servers list: ', serverList);

          this.serverList = serverList;

          this.dataSource = new MatTableDataSource<SiteShort>(this.serverList);

          this.dataSource.paginator = this.paginator;

          this.dataSource.sort = this.sort;

         

        }

      ).catch(

        error => {

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

          console.log(error);

          this.serverList = [];

        }

      );

    }

  }

}

}

  



public onHostsSelected(site: SiteShort) {

  console.log('hello');

  //console.log(site.siteName);

  if (site.siteNoOfHosts !== 0) {

    this.siteService.setCurrentSite(site.siteName);

    this.siteService.setSelectedSite(site);

    sessionStorage.removeItem('currentHostList');

    sessionStorage.removeItem('currentServCompList');

    sessionStorage.removeItem('noOfServices');

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

  }



}



onLogout(){

  this.authService.logout();

}





applyFilter(filterValue: string) {

  this.dataSource.filter = filterValue.trim().toLowerCase();

}

}