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

add hostname component

parent 9915bb99
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
<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
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();
});
});
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
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