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