scroll + service ping bug

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

@@ -18,7 +18,7 @@
     <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">
 
       <ul class="key-value">
@@ -70,11 +70,15 @@
     </p-tabPanel>
 
     <p-tabPanel header="Ports" *ngIf="host.portList">
+      <div of-auto-height>
+        <perfect-scrollbar>
           <ul class="key-value">
             <li *ngFor="let port of host.portList | sort: 'portNumber'">
               <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,6 +46,8 @@
     </p-tabPanel>
 
     <p-tabPanel header="Metadata" *ngIf="service.meta">
+      <div of-auto-height>
+        <perfect-scrollbar>
           <ul class="detail-content-meta-title">
             <li *ngFor="let key of service.meta | objectKeys">
               {{key | stringPrettify}}
@@ -58,6 +60,8 @@
               </ul>
             </li>
           </ul>
+        </perfect-scrollbar>
+      </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();
   }
+
 }