scroll + service ping bug

src/commons/component/host-detail.component.html

@@ -18,8 +18,8 @@
     <h3>{{host.name}} <span>{{host.address}}</span></h3>
   </div>
 
-  <p-tabView class="detail-content">
+  <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
-    <p-tabPanel header="General">
+    <p-tabPanel header=" General">
 
       <ul class="key-value">
 
@@ -70,11 +70,15 @@
     </p-tabPanel>
 
     <p-tabPanel header="Ports" *ngIf="host.portList">
-      <ul class="key-value">
+      <div of-auto-height>
-        <li *ngFor="let port of host.portList | sort: 'portNumber'">
+        <perfect-scrollbar>
-          <span class="meta-value">{{port.portNumber}} ({{port.metaPortType.key}})</span>
+          <ul class="key-value">
-        </li>
+            <li *ngFor="let port of host.portList | sort: 'portNumber'">
-      </ul>
+              <span class="meta-value">{{port.portNumber}} ({{port.metaPortType.key}})</span>
+            </li>
+          </ul>
+        </perfect-scrollbar>
+      </div>
     </p-tabPanel>
 
     <p-tabPanel header="Health">

src/commons/component/host-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 
 import { of } from 'rxjs';
 import { map, catchError, take } from 'rxjs/operators';
@@ -7,6 +7,7 @@ import { Host } from '@overflow/model/discovery';
 import { PingResult } from '@overflow/model/ping';
 
 import { ProbeService } from '../service/probe.service';
+import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
 
 
 @Component({
@@ -16,6 +17,8 @@ import { ProbeService } from '../service/probe.service';
 })
 export class HostDetailComponent implements OnChanges {
   @Input() host: Host;
+  @ViewChild(AutoHeightDirective) autoHeightDirective;
+
 
   pingWaiting: boolean;
 
@@ -26,6 +29,7 @@ export class HostDetailComponent implements OnChanges {
   pingResult: PingResult;
   pingResultRaw: string;
 
+
   constructor(
     private probeService: ProbeService,
   ) {
@@ -70,4 +74,8 @@ export class HostDetailComponent implements OnChanges {
       .subscribe();
   }
 
+  onTabViewChange($event) {
+    this.autoHeightDirective.forceCalculate();
+  }
+
 }

src/commons/component/service-detail.component.html

@@ -21,7 +21,7 @@
   </div>
 
 
-  <p-tabView class="detail-content">
+  <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
     <p-tabPanel header="General">
 
       <ul class="key-value">
@@ -46,18 +46,22 @@
     </p-tabPanel>
 
     <p-tabPanel header="Metadata" *ngIf="service.meta">
-      <ul class="detail-content-meta-title">
+      <div of-auto-height>
-        <li *ngFor="let key of service.meta | objectKeys">
+        <perfect-scrollbar>
-          {{key | stringPrettify}}
+          <ul class="detail-content-meta-title">
+            <li *ngFor="let key of service.meta | objectKeys">
+              {{key | stringPrettify}}
 
-          <ul class="key-value">
+              <ul class="key-value">
-            <li *ngFor="let skey of service.meta[key] | objectKeys">
+                <li *ngFor="let skey of service.meta[key] | objectKeys">
-              {{skey | stringPrettify}}
+                  {{skey | stringPrettify}}
-              <span class="meta-value">{{service.meta[key][skey]}}</span>
+                  <span class="meta-value">{{service.meta[key][skey]}}</span>
+                </li>
+              </ul>
             </li>
           </ul>
-        </li>
+        </perfect-scrollbar>
-      </ul>
+      </div>
     </p-tabPanel>
 
     <p-tabPanel header="Health" *ngIf="service.port.metaPortType.key === 'TCP'">

src/commons/component/service-detail.component.ts

@@ -1,18 +1,23 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
 import { Service } from '@overflow/model/discovery';
 import { PingResult } from '@overflow/model/ping';
 import { ProbeService } from '../service/probe.service';
 import { map, catchError, take } from 'rxjs/operators';
 import { of } from 'rxjs';
+import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
 
 @Component({
   selector: 'app-service-detail',
   templateUrl: './service-detail.component.html',
   styleUrls: ['./service-detail.component.scss'],
 })
-export class ServiceDetailComponent {
+export class ServiceDetailComponent implements OnChanges {
 
   @Input() service: Service;
+
+  @ViewChild(AutoHeightDirective) autoHeightDirective;
+
+
   pingWaiting: boolean;
   pingResult: PingResult;
   pingResultStr: string;
@@ -31,6 +36,15 @@ export class ServiceDetailComponent {
     this.deadline = 1;
   }
 
+  onTabViewChange($event) {
+    this.autoHeightDirective.forceCalculate();
+  }
+
+  ngOnChanges(simpleChanges: SimpleChanges): void {
+    this.pingResult = null;
+  }
+
+
   doPing() {
     this.pingWaiting = true;
 
@@ -60,4 +74,5 @@ export class ServiceDetailComponent {
       )
       .subscribe();
   }
+
 }