test

package-lock.json

@@ -483,6 +483,11 @@
         }
       }
     },
+    "angular-google-recaptcha": {
+      "version": "1.0.3",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/angular-google-recaptcha/-/angular-google-recaptcha-1.0.3.tgz",
+      "integrity": "sha512-Nf+7bFQdoxXgoPiIaKGauBNuhdY1UMGNVkdQGPBk0CutFMlT1tx7gbbw/D7/2FGGvfdW7JrHzl1VKeW1w3Ha8g=="
+    },
     "angular-l10n": {
       "version": "4.1.5",
       "resolved": "https://nexus.loafle.net/repository/npm-all/angular-l10n/-/angular-l10n-4.1.5.tgz",
@@ -4634,11 +4639,6 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
-    "hammer": {
-      "version": "0.0.5",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/hammer/-/hammer-0.0.5.tgz",
-      "integrity": "sha1-DqG/gc9+reY5qgQXJywnGCxeh2Q="
-    },
     "handle-thing": {
       "version": "1.2.5",
       "resolved": "https://nexus.loafle.net/repository/npm-all/handle-thing/-/handle-thing-1.2.5.tgz",
@@ -7078,14 +7078,6 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
-    "ng4-loader-bar": {
-      "version": "1.0.3",
-      "resolved": "https://nexus.loafle.net/repository/npm-all/ng4-loader-bar/-/ng4-loader-bar-1.0.3.tgz",
-      "integrity": "sha1-4mXOirdy4HOh3E0MUCwCAOVaBoo=",
-      "requires": {
-        "hammer": "0.0.5"
-      }
-    },
     "ngx-cookie-service": {
       "version": "1.0.10",
       "resolved": "https://nexus.loafle.net/repository/npm-all/ngx-cookie-service/-/ngx-cookie-service-1.0.10.tgz",

src/packages/discovery/component/setting/setting.component.ts

@@ -41,21 +41,25 @@ import { trigger, state, transition, style, animate } from '@angular/core';
       'discoveryFilter', [
         state('summary', style({
           height: '70px',
+          opacity: 0.9,
         })),
         state('full', style({
           height: '500px',
+          opacity: 1,
         })),
-        transition('* => *', animate('200ms cubic-bezier(0.86, 0, 0.07, 1)')),
+        transition('* => *', animate('200ms ease-in')),
       ]),
     trigger(
       'result', [
         state('show', style({
           height: '300px',
+          opacity: 1,
         })),
         state('hidden', style({
           height: '0px',
+          opacity: 0,
         })),
-        transition('* => *', animate('200ms cubic-bezier(0.86, 0, 0.07, 1)')),
+        transition('* => *', animate('200ms ease-in')),
       ]
     )
   ]

src/packages/discovery/discovery.module.ts

@@ -10,7 +10,6 @@ import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
-import {AngularLoadingBarModule} from 'ng4-loader-bar';
 
 @NgModule({
   imports: [
@@ -21,7 +20,6 @@ import {AngularLoadingBarModule} from 'ng4-loader-bar';
     DiscoveryRPCModule,
     DiscoveryLoggerModule,
     KeyValueModule,
-    AngularLoadingBarModule.forRoot()
   ],
   declarations: [
     COMPONENTS

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

@@ -1,4 +1,6 @@
 <h1>Info</h1>
+<button *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
+<button *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()"></button>
 
 <p-dialog [showHeader]="false" [closeOnEscape]="false" [modal]="true" header="Discovery" [width]="800" [(visible)]="display">
   <of-discovery-setting [probe]="probe" [visible]="display" (close)="onDiscoveryClose()"></of-discovery-setting>
@@ -7,20 +9,20 @@
   <p-panel [showHeader]="false" class="nopad">
     <div *ngIf="probe">
 
-      <div class="ui-inputgroup">
-        <span class="md-inputfield">
-          <input #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
-          <label></label>
-        </span>
-        <button pButton label="Save" type="button" (click)="onDisplayNameChange(input.value)"></button>
-      </div>
 
       <div class="ui-g form-group">
+
+        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+          <input *ngIf="editMode" #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+          <of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probe.displayName"></of-key-value>
+        </div>
+
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
           <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
         </div>
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-          <of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
+          <input *ngIf="editMode" #input type="text" pInputText value="{{probe.description}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+          <of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probe.description"></of-key-value>
         </div>
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
           <of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>

src/packages/probe/component/list/list.component.html

@@ -3,6 +3,7 @@
   <ng-template pTemplate="header">
     <tr>
       <th>Probe Name</th>
+      <th>Uptime</th>
       <th style="width:10em">IP</th>
       <th style="width:8em">OS</th>
       <th style="width:10em">CIDR</th>
@@ -14,6 +15,7 @@
   <ng-template pTemplate="body" let-probeHost>
     <tr [pSelectableRow]="probeHost">
       <td>{{probeHost.probe.displayName}}</td>
+      <td>{{getUptime(probeHost.probe)}}</td>
       <td>{{probeHost.host.ipv4}}</td>
       <td>{{probeHost.host.os.vendor.name}}</td>
       <td>{{probeHost.probe.cidr}}</td>

src/packages/probe/component/list/list.component.ts

@@ -59,4 +59,13 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
   onRowSelect(event) {
     this.router.navigate(['probe', event.data.probe.id, 'info']);
   }
+
+  getUptime(probe: Probe) {
+    // if (probe.connectDate === null || probe.connectDate ==== undefined) {
+    //   return 'Not Connected.';
+    // }
+    // const currentDate = new Date();
+
+    return 'Uptime구해와';
+  }
 }