Skip to content

S
svmon-web
Commit 9915bb99 authored by Jie Yuan's avatar Jie Yuan
Browse files
Options

add site detail view

parent fca76224
Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 0 deletions
src/app/dashboard/site/site.component.css 0 → 100644
View file @ 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-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
View file @ 9915bb99
<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
View file @ 9915bb99
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
View file @ 9915bb99
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
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