in progress

@overflow/noauth-probe/container/list/list-container.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
@@ -17,16 +16,12 @@ import { MessageService } from 'primeng/components/common/messageservice';
   templateUrl: './list-container.component.html',
   providers: [ConfirmationService, MessageService]
 })
-export class NoAuthProbeListContainerComponent implements OnInit, AfterContentInit, OnDestroy {
+export class NoAuthProbeListContainerComponent implements OnInit {
   noauthProbes$: Observable<NoAuthProbe[]>;
 
   constructor(
     private store: Store<ListStore.State>,
   ) {
-
-  }
-
-  ngOnInit() {
     this.noauthProbes$ = this.store.pipe(select(NoAuthProbeSelector.selectAll)).map((_noauthProbes: NoAuthProbe[]) => {
       if (null === _noauthProbes) {
         return null;
@@ -38,7 +33,7 @@ export class NoAuthProbeListContainerComponent implements OnInit, AfterContentIn
     });
   }
 
-  ngAfterContentInit() {
+  ngOnInit() {
     this.store.select(AuthSelector.select('domain')).subscribe(
       (domain: Domain) => {
         this.store.dispatch(new ListStore.ReadAllByDomainID(domain.id));
@@ -46,9 +41,6 @@ export class NoAuthProbeListContainerComponent implements OnInit, AfterContentIn
     );
   }
 
-  ngOnDestroy() {
-  }
-
   accept(selected) {
     this.store.dispatch(new ListStore.Accept(selected));
   }

@overflow/probe/component/detail/detail.component.html

@@ -8,12 +8,14 @@
     <div class="ui-g-6 ui-nopad">
       <h1>Info</h1>
     </div>
+
     <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
       <button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
       <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()" [disabled]="displayNameErrMsg || descriptionErrMsg"></button>
       <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
     </div>
   </div>
+  <p-messages [(value)]="connectionStatus" [closable]="false"></p-messages>
 
   <!-- Probe info -->
   <div class="ui-g ui-bottom-space-10">
@@ -38,7 +40,6 @@
             <div *ngIf="editMode" class="of-key-value-div">
               <span>Description</span>
               <span class="ng-star-inserted">
-                <!-- <input *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value"> -->
                 <input #description type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="onDescriptionEditing(description.value)"/>
                 <div *ngIf="descriptionErrMsg" class="ui-message ui-messages-error ui-corner-all">{{descriptionErrMsg}}</div>
               </span>
@@ -68,7 +69,7 @@
           </div>
 
           <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-            <of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6"></of-key-value>
+            <of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6 | uppercase"></of-key-value>
           </div>
 
           <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
@@ -85,7 +86,7 @@
 
   </div>
   <div class="ui-g" dir="rtl">
-    <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
+    <button class="ui-button-danger ui-button-width-fit" [disabled]="true" 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>

@overflow/probe/component/detail/detail.component.ts

@@ -1,19 +1,22 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
 import { MessageService } from 'primeng/components/common/messageservice';
+import { Message } from 'primeng/primeng';
 
 @Component({
   selector: 'of-probe-detail',
   templateUrl: './detail.component.html',
   providers: [MessageService]
 })
-export class ProbeDetailComponent {
+export class ProbeDetailComponent implements OnChanges {
 
   @Input() pending: boolean;
   @Input() probeHost: ProbeHost;
   @Output() modify = new EventEmitter<ProbeHost>();
   @Output() discovery = new EventEmitter<number>();
 
+  connectionStatus: Message[] = [];
+
   editMode = false;
   displayNameErrMsg: string;
   descriptionErrMsg: string;
@@ -23,6 +26,25 @@ export class ProbeDetailComponent {
   constructor(private messageService: MessageService) {
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['probeHost']) {
+      this.checkConnectStatus();
+    }
+  }
+
+  checkConnectStatus() {
+    this.connectionStatus = [];
+    const msg = this.probeHost.probe.connectDate ? {
+      severity: 'success',
+      summary: 'Connected',
+      detail: this.probeHost.probe.connectAddress
+    } : {
+      severity: 'warn', // info, warn, error
+      summary: 'Not Connected',
+    };
+    this.connectionStatus.push(msg);
+  }
+
   onDisplayNameEditing(value: string) {
     const msg: string = this.checkValidDisplayName(value);
     if (msg !== null) {

@overflow/probe/component/list/list.component.html

@@ -3,7 +3,7 @@
   <i class="fa ui-icon-lock block-icon"></i>
 </p-blockUI>
 <p-panel #content [showHeader]="false" class="block-panel">
-  <p-table [value]="probeHosts" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+  <p-table [value]="probeHosts" selectionMode="single" (onRowSelect)="onProbeSelect($event)" [resizableColumns]="true">
     <ng-template pTemplate="header">
       <tr>
         <th>Probe Name</th>

@overflow/probe/component/list/list.component.ts

@@ -13,15 +13,23 @@ export class ProbeListComponent {
   constructor() {
   }
 
-  onRowSelect(event) {
+  onProbeSelect(event) {
     this.select.emit(event.data);
   }
 
   getUptime(probe: Probe) {
-    // if (probe.connectDate === null || probe.connectDate ==== undefined) {
-    //   return 'Not Connected.';
-    // }
-    // const currentDate = new Date();
-    return 'Uptime';
+    if (!probe.connectDate) {
+      return 'Not Connected.';
+    }
+    const hours = Math.abs(new Date().getTime() - probe.connectDate.getTime());
+    return this.convertUptimeString(hours);
+  }
+
+  convertUptimeString(hours: number) {
+    if (hours === 0) {
+      return 'Less than an hour.';
+    } else {
+      return 'About ' + hours;
+    }
   }
 }