Skip to content

S
svmon-web
Commit 534da7a7 authored by Jie Yuan's avatar Jie Yuan
Browse files
Options

add table comp for site view

parent 0f929907
Hide whitespace changes
Inline Side-by-side
Showing with 594 additions and 0 deletions
src/app/dashboard/table/table.component.css 0 → 100644
View file @ 534da7a7
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
View file @ 534da7a7
<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
View file @ 534da7a7
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
View file @ 534da7a7
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();
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment