target detail

src/app/commons/component/info-table/info-table.component.html

@@ -1,6 +1,11 @@
-<table *ngFor="let elem of data">
+<!-- <table>
-  <tr>
+  <tr *ngFor="let elem of data">
     <td>{{elem.key}}</td>
     <td>{{elem.value}}</td>
   </tr>
-</table>
+</table> -->
+<form *ngFor="let elem of data">
+  <mat-form-field class="example-full-width" >
+    <input matInput placeholder={{elem.key}} value={{elem.value}} readonly="readonly">
+  </mat-form-field>
+</form>

src/app/packages/target/component/detail/detail.component.html

@@ -9,35 +9,51 @@
     </div>
 
     <div fxLayoutAlign="end">
-      <button mat-raised-button>Check Alive</button>
+      <button mat-raised-button (click)="handleCheckAlive">Check Alive</button>
-      <button mat-raised-button>Traceroute</button>
+      <button mat-raised-button (click)="handleTraceroute">Traceroute</button>
     </div>
 
-    <div fxLayout="row" fxLayout.xs="column">
+    <div fxLayout="row">
-      <div fxFlex.gt-xs="35" style="padding-top: 10px;">
-        info
 
+      <div fxFlex="20" fxFlex.lt-sm="20" fxFlex.sm="20">
+        <of-info-table [data]="basicInfo"></of-info-table>
+      </div>
+      <div fxFlex="20" fxFlex.lt-sm="20" fxFlex.sm="20">
+        <of-info-table [data]="metaInfo"></of-info-table>
       </div>
 
-      <div fxFlex.gt-xs="10"></div>
 
-      <div style="padding: 5px 10px;" fxFlex.gt-xs="55">
+      <div fxFlex="60" fxFlex.lt-sm="60" fxFlex.sm="60">
-        <div style="height: 300px;">
+        <div>
+          <!-- Sensors  -->
+          <h3 matLine>Sensors</h3>
+          <mat-table #table [dataSource]="sensors">
 
-          <table class="table">
+            <ng-container matColumnDef="sensorType">
-            <tr *ngFor="let detail of tableData">
+              <mat-header-cell *matHeaderCellDef> SensorType </mat-header-cell>
-              <td class="mat-subheading-1">{{ detail?.country }}</td>
+              <mat-cell *matCellDef="let element"> {{element.sensorType}} </mat-cell>
-              <td class="text-right mat-subheading-1">{{ detail?.sales }}</td>
+            </ng-container>
-              <td class="text-right mat-subheading-1">{{ detail?.percentage }}</td>
+
-            </tr>
+            <ng-container matColumnDef="itemCnt">
-          </table>
+              <mat-header-cell *matHeaderCellDef> Items </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.itemCnt}} items </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="status">
+              <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.status}} </mat-cell>
+            </ng-container>
+
+            <!-- <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row> -->
+            <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleSensorClick(row)"></mat-row>
+          </mat-table>
+
+          <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
+          </mat-paginator>
 
         </div>
       </div>
     </div>
 
   </div>
-</div>
+</div>
-
-
-

src/app/packages/target/component/detail/detail.component.scss

@@ -25,3 +25,13 @@ th, td {
     box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
   }
 }
+.example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }

src/app/packages/target/component/detail/detail.component.ts

@@ -1,17 +1,87 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, ViewChild, OnInit, Input } from '@angular/core';
+import { MatPaginator, MatTableDataSource } from '@angular/material';
+import { AfterContentInit, AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';
 
 @Component({
   selector: 'of-target-detail',
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.scss']
 })
-export class DetailComponent implements OnInit {
+export class DetailComponent implements OnInit, AfterViewInit, AfterContentInit {
 
-  @Input() sensors = [];
+  displayedColumns = ['sensorType', 'itemCnt', 'status'];
+  sensors: MatTableDataSource<any> = null;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  basicInfo = [
+    {
+      key: 'IP',
+      value: '192.168.1.105',
+    },
+    {
+      key: 'Mac',
+      value: 'aaaaaaaaaaaaa',
+    },
+    {
+      key: 'OS',
+      value: 'Ubuntu',
+    },
+    {
+      key: 'Port',
+      value: '80',
+    },
+  ];
+  metaInfo = [
+    {
+      key: 'Meta1',
+      value: 'value1',
+    },
+    {
+      key: 'Meta2',
+      value: 'value2',
+    },
+    {
+      key: 'Meta3',
+      value: 'value3',
+    },
+    {
+      key: 'Meta4',
+      value: 'value4',
+    },
+  ];
 
   constructor() { }
 
   ngOnInit() {
   }
 
+  ngAfterViewInit() {
+    this.sensors.paginator = this.paginator;
+  }
+
+  ngAfterContentInit() {
+    const sensors = [
+      {
+        sensorType: 'WMI',
+        itemCnt: '5',
+        status: 'Up',
+      },
+      {
+        sensorType: 'SSH',
+        itemCnt: '5',
+        status: 'Up',
+      },
+    ];
+    this.sensors = new MatTableDataSource<any>(sensors);
+  }
+
+  handleSensorClick(row: any) {
+    console.log(row);
+  }
+
+  handleCheckAlive() {
+  }
+
+  handleTraceroute() {
+  }
 }