probe arrange

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

@@ -1,5 +1,3 @@
 
 <button mat-raised-button color="primary" (click)="authProbe()">Probe 인증</button>
-<button mat-raised-button color="primary" (click)="discovery()">Probe Discovery</button>
-
 <of-infra-map></of-infra-map>

src/app/pages/infra/infra-page.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material';
-import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
 
 @Component({
   selector: 'of-infra-page',
@@ -16,17 +15,6 @@ export class InfraPageComponent implements OnInit {
   ngOnInit() {
   }
 
-  discovery() {
-    const dialogRef = this.dialog.open(DiscoverySettingComponent, {
-      width: '80%',
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      console.log('The dialog was closed');
-
-    });
-  }
-
   authProbe() {
   }
 }

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

@@ -6,7 +6,6 @@ import { InfraPageRoutingModule } from './infra-page-routing.module';
 import { MaterialModule } from 'packages/commons/material/material.module';
 
 import { InfraModule } from 'packages/infra/infra.module';
-import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
 import { InfraPageComponent } from './infra-page.component';
 import { DiscoveryModule } from 'packages/discovery/discovery.module';
 
@@ -21,8 +20,5 @@ import { DiscoveryModule } from 'packages/discovery/discovery.module';
   declarations: [
     InfraPageComponent,
   ],
-  entryComponents: [
-    DiscoverySettingComponent
-  ]
 })
 export class InfraPageModule { }

src/packages/infra/component/map/map.component.html

@@ -19,6 +19,7 @@
             </div>
           </mat-grid-tile>
           <mat-grid-tile [colspan]="1" [rowspan]="1">
+              Status: 기본 센서 데이터에서 저장한 metric으로..
           </mat-grid-tile>
           <mat-grid-tile [colspan]="2" [rowspan]="1" class="text-inside-grid">
             <div class="text-inside-grid">????</div>

src/packages/probe/component/detail/detail.component.html

@@ -1,23 +1,35 @@
-<div><h3>{{probe.displayName}}</h3></div>
+<div *ngIf="probe !== null">
-
-<div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
-  <mat-card [style.padding]="'15px 50px'">Status: {{probe.status.name}}</mat-card>
   <div>
+    <h3>{{probe.displayName}}</h3>
+  </div>
+
+  <div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
+    <mat-card [style.padding]="'15px 50px'">Status: {{probe.status.name}}</mat-card>
+    <div>
+      <button mat-raised-button color="primary" (click)="discovery()">Discovery</button>
+    </div>
+  </div>
+
+  <div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center" [style.margin]="'20px'">
+    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+      <of-info-table [title]="'Title1'" [data]="networkInfo"></of-info-table>
+    </mat-card>
+    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+      <of-info-table [title]="'Title2'" [data]="deviceInfo"></of-info-table>
+    </mat-card>
+    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+      <of-info-table [title]="'Title3'" [data]="probeInfo"></of-info-table>
+    </mat-card>
+  </div>
+
+  <div fxLayoutAlign="end">
     <button *ngIf="probe.status.id === 1" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
     <button *ngIf="probe.status.id === 2" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>
-    
+
     <button mat-raised-button color="warn" (click)="handleRemove()">Remove</button>
   </div>
 </div>
 
-<div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center" [style.margin]="'20px'">
+<div *ngIf="probe === null">
-  <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    <of-info-table [title]="'Title1'" [data]="networkInfo"></of-info-table>
-  </mat-card>
-  <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-    <of-info-table [title]="'Title2'" [data]="deviceInfo"></of-info-table>
-  </mat-card>
-  <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
-    <of-info-table [title]="'Title3'" [data]="probeInfo"></of-info-table>
-  </mat-card>
 </div>

src/packages/probe/component/detail/detail.component.ts

@@ -10,6 +10,8 @@ import { ConfirmDialogComponent } from 'packages/commons/component/confirm-dialo
 import * as DetailStore from '../../store/detail';
 import { DetailSelector } from '../../store';
 import { Probe } from '../../model';
+import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+import * as CIDR from 'ip-cidr';
 
 @Component({
   selector: 'of-probe-detail',
@@ -37,6 +39,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
       (probe: Probe) => {
         if (probe != null) {
           this.probe = probe;
+          console.log(probe);
           this.arrangeInfo();
         }
       },
@@ -56,18 +59,29 @@ export class DetailComponent implements OnInit, AfterContentInit {
   }
 
   arrangeInfo() {
+
+    const cidr = new CIDR(this.probe.cidr);
+    if (!cidr.isValid()) {
+    }
+    const startIP = cidr.addressStart.address;
+    const endIP = cidr.addressEnd.address;
+
     this.networkInfo = [
       {
-        key: 'IP',
+        key: 'Probe IP Range',
-        value: '192.168.1.1'
+        value: startIP + '~' + endIP,
+      },
+      {
+        key: 'Installed IP',
+        value: '???',
       },
       {
         key: 'NIC',
-        value: 'enps30'
+        value: '???'
       },
       {
         key: 'Targets',
-        value: '12'
+        value: 'count 반정규화 필요 '
       },
     ];
     this.deviceInfo = [
@@ -91,7 +105,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
     this.probeInfo = [
       {
         key: 'Authorized at',
-        value: String(new Date())
+        value: String(new Date(this.probe.authorizeDate))
       },
       {
         key: 'Authorized by',
@@ -99,11 +113,27 @@ export class DetailComponent implements OnInit, AfterContentInit {
       },
       {
         key: 'Installed at',
-        value: String(new Date())
+        value: String(new Date(this.probe.createDate))
+      },
+      {
+        key: 'Probe Key',
+        value: this.probe.probeKey,
       },
     ];
   }
 
+  discovery() {
+    const dialogRef = this.dialog.open(DiscoverySettingComponent, {
+      width: '80%',
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+
+    });
+  }
+
+
   handleStartStop() {
     // this.isUpState = !this.isUpState;
   }

src/packages/probe/probe.module.ts

@@ -10,6 +10,9 @@ import { ConfirmDialogComponent } from 'packages/commons/component/confirm-dialo
 import { COMPONENTS } from './component';
 import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
+import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+import { DiscoveryModule } from '../discovery/discovery.module';
+
 
 @NgModule({
   imports: [
@@ -18,6 +21,7 @@ import { SERVICES } from './service';
     InfoTableModule,
     ConfirmDialogModule,
     ProbeStoreModule,
+    DiscoveryModule
   ],
   declarations: [
     COMPONENTS,
@@ -30,6 +34,7 @@ import { SERVICES } from './service';
   ],
   entryComponents: [
     ConfirmDialogComponent,
+    DiscoverySettingComponent
   ]
 })
 export class ProbeModule { }