test

src/app/packages/sensor-item/component/list/list.component.html

@@ -1,3 +1,45 @@
-<p>
+<div class="example-container mat-elevation-z8" >
-  list works!
+    <mat-table #table [dataSource]="dataSource" matSort>
-</p>
+  
+      <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>

src/app/packages/sensor-item/component/list/list.component.scss

@@ -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;
+  }

src/app/packages/sensor-item/component/list/list.component.ts

@@ -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]);
+  }
 }
+

src/app/packages/sensor-item/sensor-item.module.ts

@@ -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 { }

src/app/pages/overview/overview-page.component.html

@@ -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 fxLayout="row" fxLayoutAlign="space-between center">
+      <div fxLayoutAlign="start center" fxLayout="row">
-      <of-host-summary-card></of-host-summary-card>
+        <div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
-      <of-app-summary-card></of-app-summary-card>
+          <of-dashboard-card [dashData]="dash"></of-dashboard-card>
-    </div>
+        </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'">
+      <div fxLayout="row" fxLayoutAlign="space-between center">
-      <of-sensor-summary fxFlex="40" fxFlex.lt-sm="100" fxFlex.sm="100" fxFlex.md="70"></of-sensor-summary>
+        <of-host-summary-card></of-host-summary-card>
-      <of-sensor-item-filter fxFlex="60"></of-sensor-item-filter>
+        <of-app-summary-card></of-app-summary-card>
-    </div>
+      </div>
 
-    <div fxLayout="row" fxLayoutWrap fxLayoutAlign="end">
+      <div fxLayout="row" fxLayoutWrap [style.margin]="'20px 0px'">
-        <!-- <of-sensor-item-table></of-sensor-item-table> -->
+        <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">
         <button mat-raised-button (click)="openDialog()">대시보드에 추가</button>
-    </div>
+      </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>

src/app/pages/overview/overview-page.module.ts

@@ -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,