test
This commit is contained in:
insanity
parent
a066ffbfbe
commit
0ceb57af47
|
|
@ -1,3 +1,45 @@
|
|||
<p>
|
||||
list works!
|
||||
</p>
|
||||
<div class="example-container mat-elevation-z8" >
|
||||
<mat-table #table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="ip">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.ip}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="os">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> OS </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.os}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="cidr">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> CIDR </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.cidr}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="targetCnt">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Targets </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.targetCnt}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="date">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="authBy">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> AuthBy </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.authBy}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.example-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.mat-header-cell.mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -1,15 +1,63 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
export interface Probe {
|
||||
id: string;
|
||||
name: string;
|
||||
ip: string;
|
||||
os: string;
|
||||
cidr: string;
|
||||
targetCnt: number;
|
||||
date: string;
|
||||
authBy: string;
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'of-list',
|
||||
selector: 'of-sensor-item-list',
|
||||
templateUrl: './list.component.html',
|
||||
styleUrls: ['./list.component.scss']
|
||||
})
|
||||
export class ListComponent implements OnInit {
|
||||
export class ListComponent implements OnInit, AfterContentInit {
|
||||
|
||||
constructor() { }
|
||||
displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
|
||||
dataSource: MatTableDataSource<Probe>;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
/**
|
||||
* Set the sort after the view init since this component will
|
||||
* be able to query its view for the initialized sort.
|
||||
*/
|
||||
ngAfterContentInit() {
|
||||
// temporary data
|
||||
const data: Probe[] = new Array();
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const p: Probe = {
|
||||
id: String('id' + i),
|
||||
name: String('name' + i),
|
||||
ip: String('ip' + i),
|
||||
os: String('os' + i),
|
||||
cidr: String('cidr' + i),
|
||||
targetCnt: i,
|
||||
date: String('date' + i),
|
||||
authBy: String('insanity')
|
||||
};
|
||||
data.push(p);
|
||||
}
|
||||
|
||||
this.dataSource = new MatTableDataSource(data);
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
|
||||
constructor(private router: Router) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
handleRowClick(obj: Probe) {
|
||||
this.router.navigate(['probe', obj.id]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MaterialModule } from 'app/commons/ui/material/material.module';
|
||||
import { ListComponent } from './component/list/list.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -9,8 +10,10 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
|
|||
MaterialModule,
|
||||
],
|
||||
declarations: [
|
||||
ListComponent
|
||||
],
|
||||
exports: [
|
||||
ListComponent
|
||||
]
|
||||
})
|
||||
export class SensorItemModule { }
|
||||
|
|
|
|||
|
|
@ -1,29 +1,36 @@
|
|||
<div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlexFil fxFill fxLayoutGap="1px">
|
||||
<div fxFlex="70" fxLayout="column" class="mat-elevation-z2 activity-list-container">
|
||||
<perfect-scrollbar>
|
||||
|
||||
<div fxLayoutAlign="start center" fxLayout="row">
|
||||
<div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
|
||||
<of-dashboard-card [dashData]="dash"></of-dashboard-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<of-host-summary-card></of-host-summary-card>
|
||||
<of-app-summary-card></of-app-summary-card>
|
||||
</div>
|
||||
|
||||
<!-- <div fxLayoutAlign="start center" fxLayout="row">
|
||||
<div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
|
||||
<of-dashboard-card [dashData]="dash"></of-dashboard-card>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div fxLayout="row" fxLayoutWrap [style.margin]="'20px 0px'">
|
||||
<of-sensor-summary fxFlex="40" fxFlex.lt-sm="100" fxFlex.sm="100" fxFlex.md="70"></of-sensor-summary>
|
||||
<of-sensor-item-filter fxFlex="60"></of-sensor-item-filter>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" [style.margin]="'20px 0px'">
|
||||
<of-sensor-item-list fxFlex="100"></of-sensor-item-list>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row" fxLayoutWrap fxLayoutAlign="end">
|
||||
<!-- <of-sensor-item-table></of-sensor-item-table> -->
|
||||
<button mat-raised-button (click)="openDialog()">대시보드에 추가</button>
|
||||
</div>
|
||||
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add">
|
||||
<div fxFlex="10" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h3 class="mat-headline" fxFlex="80">Activities</h3>
|
||||
|
|
@ -44,5 +51,3 @@
|
|||
</perfect-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -13,6 +13,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
|
|||
import { HostSummaryCardComponent } from '../../commons/component/host-summary-card/host-summary-card.component';
|
||||
import { AppSummaryCardComponent } from '../../commons/component/app-summary-card/app-summary-card.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { SensorItemModule } from '../../packages/sensor-item/sensor-item.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -22,7 +23,8 @@ import { FormsModule } from '@angular/forms';
|
|||
MaterialModule,
|
||||
PerfectScrollbarModule,
|
||||
NgxChartsModule,
|
||||
FormsModule
|
||||
FormsModule,
|
||||
SensorItemModule,
|
||||
],
|
||||
declarations: [
|
||||
OverviewPageComponent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user