Commit 22a8085a authored by Jie Yuan's avatar Jie Yuan

add fulltable for service view

parent 534da7a7
table {
width: 90%;
text-align: left;
margin:0 auto;
}
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);
}
.mat-filter-div {
width: 20%;
text-align: left;
margin:0 auto;
left: 8%;
position: relative;
}
\ No newline at end of file
<div>
<mat-sidenav-container class="example-container" *ngIf="shouldRun">
<mat-sidenav *ngIf="sidebarOpen" mode="side" opened>
<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>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!--- 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">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Site </th>
<td mat-cell *matCellDef="let element" matTooltip="Show {{element.siteName}} Info" (click)="onClick(element)"> {{element.siteName}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="hostName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> URL </th>
<td mat-cell *matCellDef="let element" > {{element.hostName}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="hostNameOS" >
<th mat-header-cell *matHeaderCellDef mat-sort-header> Operating System</th>
<td mat-cell *matCellDef="let element"> {{element.hostNameOS}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="hostNameStatus">
<th mat-header-cell *matHeaderCellDef>Statsu </th>
<td mat-cell *matCellDef="let element"> {{element.hostNameStatus}} </td>
</ng-container>
<ng-container matColumnDef="servCompServiceType">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Service </th>
<td mat-cell *matCellDef="let element" matTooltip="Show All Component of {{element.servCompServiceType}}"> {{element.servCompServiceType}} </td>
</ng-container>
<ng-container matColumnDef="servCompName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Component </th>
<td mat-cell *matCellDef="let element" matTooltip="Show Services Having {{element.servCompName}}" > {{element.servCompName}} </td>
</ng-container>
<ng-container matColumnDef="servCompTagAtSite">
<th mat-header-cell *matHeaderCellDef> Version </th>
<td mat-cell *matCellDef="let element" matTooltip="Show Record History" (click)="onServiceComponentSelected(element)" > {{element.servCompTagAtSite}} </td>
</ng-container>
<ng-container matColumnDef="servCompCreatedTime">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Report</th>
<td mat-cell *matCellDef="let element"> {{element.servCompCreatedTime}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20,40]" showFirstLastButtons></mat-paginator>
</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 { FulltableComponent } from './fulltable.component';
describe('FulltableComponent', () => {
let component: FulltableComponent;
let fixture: ComponentFixture<FulltableComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FulltableComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FulltableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
This diff is collapsed.
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