From 7b703dfa0d25ba79fb0cee6a75dfefe706a60d04 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Thu, 19 Apr 2018 15:37:10 +0900
Subject: [PATCH] keyvalue component

---
 .../component/detail/detail.component.html    | 37 ++++++-------------
 .../component/detail/detail.component.ts      |  8 ++--
 src/packages/probe/probe.module.ts            |  6 +--
 3 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/src/packages/probe/component/detail/detail.component.html b/src/packages/probe/component/detail/detail.component.html
index 7f5340f..97f1f5a 100644
--- a/src/packages/probe/component/detail/detail.component.html
+++ b/src/packages/probe/component/detail/detail.component.html
@@ -3,46 +3,33 @@
   <of-discovery-setting (close)="onDiscoverycloseDialog()"></of-discovery-setting>
 </p-dialog>
 <div *ngIf="probe">
+
   <div class="ui-g form-group">
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
-        <input type="text" pInputText readonly value="{{probe.displayName}}">
-        <label>Alias</label>
-      </span>
+      <of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
-        <input type="text" pInputText readonly value="{{probe.cidr}}">
-        <label>CIDR</label>
-      </span>
+      <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
-        <input type="text" pInputText readonly value="{{probe.description}}">
-        <label>Description</label>
-      </span>
+      <of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
-        <input type="text" pInputText readonly value="{{probe.probeKey}}">
-        <label>Key</label>
-      </span>
+      <of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
-        <input type="text" pInputText readonly value="{{probe.authorizeDate | date: 'dd/MM/yyyy'}}">
-        <label>Authrozied at</label>
-      </span>
+      <of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
     </div>
     <div class="ui-g-12 ui-md-6 ui-lg-4">
-      <span class="md-inputfield">
-        <input type="text" pInputText readonly value="{{probe.authorizeMember.name}}">
-        <label>Authrozied by</label>
-      </span>
+      <of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
+    </div>
+    <div class="ui-g-12 ui-md-6 ui-lg-4">
+      <of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
     </div>
   </div>
   <div class="ui-bottom-space-10" dir="rtl">
-    <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
+    <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
+      (click)="onRemoveClick()"></button>
     <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
   </div>
   <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
\ No newline at end of file
diff --git a/src/packages/probe/component/detail/detail.component.ts b/src/packages/probe/component/detail/detail.component.ts
index 8023624..b5899ce 100644
--- a/src/packages/probe/component/detail/detail.component.ts
+++ b/src/packages/probe/component/detail/detail.component.ts
@@ -19,8 +19,7 @@ export class DetailComponent implements OnInit, AfterContentInit {
 
   probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
   probe: Probe = null;
-  startIP: string;
-  endIP: string;
+  IPRange: string;
   display = false;
 
   constructor(
@@ -56,13 +55,12 @@ export class DetailComponent implements OnInit, AfterContentInit {
   arrangeInfo() {
     const cidr = new CIDR(this.probe.cidr);
     if (!cidr.isValid()) {
+      return;
     }
-    this.startIP = cidr.addressStart.address;
-    this.endIP = cidr.addressEnd.address;
+    this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address;
   }
 
   onDiscoveryClick() {
-    // alert('Discovery를 열거라 대훈');
     this.display = true;
   }
 
diff --git a/src/packages/probe/probe.module.ts b/src/packages/probe/probe.module.ts
index e3a0c06..327ca7f 100644
--- a/src/packages/probe/probe.module.ts
+++ b/src/packages/probe/probe.module.ts
@@ -6,9 +6,8 @@ import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
 import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 import { FormsModule } from '@angular/forms';
-// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
-// import { DiscoveryModule } from '../discovery/discovery.module';
 import { DiscoveryModule } from 'packages/discovery/discovery.module';
+import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
 
 @NgModule({
   imports: [
@@ -16,7 +15,8 @@ import { DiscoveryModule } from 'packages/discovery/discovery.module';
     PrimeNGModules,
     ProbeStoreModule,
     FormsModule,
-    DiscoveryModule
+    DiscoveryModule,
+    KeyValueModule
   ],
   declarations: [
     COMPONENTS,