ing
This commit is contained in:
parent
578a2af303
commit
c1f532e2a9
|
@ -6,6 +6,7 @@ import { Directive, AfterViewInit, Input, HostListener, ElementRef, ChangeDetect
|
|||
selector: '[of-auto-height]'
|
||||
})
|
||||
export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
|
||||
@Input() key: string;
|
||||
@Input() footerElement = null;
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
|
@ -29,6 +30,10 @@ export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
|
|||
ngOnDestroy(): void {
|
||||
}
|
||||
|
||||
onVisible(event) {
|
||||
console.log('visibilitychange');
|
||||
}
|
||||
|
||||
/**
|
||||
* forceCalculate
|
||||
*/
|
||||
|
|
|
@ -25,7 +25,6 @@ import { SERVICES } from '../commons/service';
|
|||
|
||||
AppRoutingModule,
|
||||
AppStoreModule,
|
||||
|
||||
],
|
||||
providers: [
|
||||
...SERVICES,
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Ports" *ngIf="host.portList">
|
||||
<div of-auto-height>
|
||||
<div of-auto-height key="2">
|
||||
<perfect-scrollbar>
|
||||
<ul class="key-value">
|
||||
<li *ngFor="let port of host.portList | sort: 'portNumber'">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
|
||||
|
||||
import { of } from 'rxjs';
|
||||
import { map, catchError, take } from 'rxjs/operators';
|
||||
|
@ -17,7 +17,8 @@ import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.
|
|||
})
|
||||
export class HostDetailComponent implements OnChanges {
|
||||
@Input() host: Host;
|
||||
@ViewChild(AutoHeightDirective) autoHeightDirective;
|
||||
|
||||
@ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
|
||||
|
||||
|
||||
pingWaiting: boolean;
|
||||
|
@ -75,7 +76,12 @@ export class HostDetailComponent implements OnChanges {
|
|||
}
|
||||
|
||||
onTabViewChange($event) {
|
||||
this.autoHeightDirective.forceCalculate();
|
||||
const index = String($event.index);
|
||||
this.autoHeightDirectives.map(item => {
|
||||
if (item.key === index) {
|
||||
item.forceCalculate();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Metadata" *ngIf="service.meta">
|
||||
<div of-auto-height>
|
||||
<div of-auto-height key="1">
|
||||
<perfect-scrollbar>
|
||||
<ul class="detail-content-meta-title">
|
||||
<li *ngFor="let key of service.meta | objectKeys">
|
||||
|
@ -105,8 +105,6 @@
|
|||
</p-table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</p-tabPanel>
|
||||
|
||||
</p-tabView>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, Output, EventEmitter, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
|
||||
import { Service } from '@overflow/model/discovery';
|
||||
import { PingResult } from '@overflow/model/ping';
|
||||
import { ProbeService } from '../service/probe.service';
|
||||
|
@ -15,7 +15,7 @@ export class ServiceDetailComponent implements OnChanges {
|
|||
|
||||
@Input() service: Service;
|
||||
|
||||
@ViewChild(AutoHeightDirective) autoHeightDirective;
|
||||
@ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
|
||||
|
||||
|
||||
pingWaiting: boolean;
|
||||
|
@ -36,10 +36,6 @@ export class ServiceDetailComponent implements OnChanges {
|
|||
this.deadline = 1;
|
||||
}
|
||||
|
||||
onTabViewChange($event) {
|
||||
this.autoHeightDirective.forceCalculate();
|
||||
}
|
||||
|
||||
ngOnChanges(simpleChanges: SimpleChanges): void {
|
||||
this.pingResult = null;
|
||||
}
|
||||
|
@ -75,4 +71,13 @@ export class ServiceDetailComponent implements OnChanges {
|
|||
.subscribe();
|
||||
}
|
||||
|
||||
onTabViewChange($event) {
|
||||
const index = String($event.index);
|
||||
this.autoHeightDirectives.map(item => {
|
||||
if (item.key === index) {
|
||||
item.forceCalculate();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -17,34 +17,36 @@
|
|||
<p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
|
||||
|
||||
<p-tabPanel header="General">
|
||||
<perfect-scrollbar>
|
||||
<ul class="key-value">
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</perfect-scrollbar>
|
||||
<div of-auto-height key="0">
|
||||
<perfect-scrollbar>
|
||||
<ul class="key-value">
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Hosts">
|
||||
<div of-auto-height>
|
||||
<div of-auto-height key="1">
|
||||
<perfect-scrollbar>
|
||||
<ul class="key-value">
|
||||
<li *ngFor="let host of zone.hostList | ipSort: 'address'">
|
||||
|
@ -57,7 +59,5 @@
|
|||
</perfect-scrollbar>
|
||||
</div>
|
||||
</p-tabPanel>
|
||||
|
||||
</p-tabView>
|
||||
|
||||
</div>
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
|
||||
import { Component, Input, OnInit, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core';
|
||||
import { Zone, Host } from '@overflow/model/discovery';
|
||||
import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
|
||||
|
||||
|
@ -14,7 +14,7 @@ export class ZoneDetailComponent implements OnInit {
|
|||
@Input() zone: Zone;
|
||||
@Output() otherHostSelect = new EventEmitter<Host>();
|
||||
|
||||
@ViewChild(AutoHeightDirective) autoHeightDirective;
|
||||
@ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
|
||||
|
||||
ipRange: string;
|
||||
|
||||
|
@ -36,7 +36,12 @@ export class ZoneDetailComponent implements OnInit {
|
|||
}
|
||||
|
||||
onTabViewChange($event) {
|
||||
this.autoHeightDirective.forceCalculate();
|
||||
const index = String($event.index);
|
||||
this.autoHeightDirectives.map(item => {
|
||||
if (item.key === index) {
|
||||
item.forceCalculate();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
10
yarn.lock
10
yarn.lock
|
@ -790,6 +790,12 @@ amdefine@>=0.0.4:
|
|||
version "1.0.1"
|
||||
resolved "https://nexus.loafle.net/repository/npm-all/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
|
||||
|
||||
angular-page-visibility@^6.1.3:
|
||||
version "6.1.3"
|
||||
resolved "https://nexus.loafle.net/repository/npm-all/angular-page-visibility/-/angular-page-visibility-6.1.3.tgz#d2cfaa5a73aec195f393be03cf9fc45f9b293e16"
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
ansi-align@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://nexus.loafle.net/repository/npm-all/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
|
||||
|
@ -6498,6 +6504,10 @@ rx@^4.1.0:
|
|||
version "4.1.0"
|
||||
resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
|
||||
|
||||
rxjs-compat@^6.3.3:
|
||||
version "6.3.3"
|
||||
resolved "https://nexus.loafle.net/repository/npm-all/rxjs-compat/-/rxjs-compat-6.3.3.tgz#2ab3b9ac0dac0c073749d55fef9c03ea1df2045c"
|
||||
|
||||
rxjs@^6.0.0, rxjs@^6.2.2:
|
||||
version "6.3.3"
|
||||
resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"
|
||||
|
|
Loading…
Reference in New Issue
Block a user