This is an automated email from the ASF dual-hosted git repository. gongchao pushed a commit to branch monitor-deatil-ui in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit 9d7a67030ff6a7783d753d7aab053b82d57e5935 Author: tomsun28 <[email protected]> AuthorDate: Wed Aug 21 09:05:59 2024 +0800 [webapp] auto resize the monitor detail ui width Signed-off-by: tomsun28 <[email protected]> --- .../monitor-data-table.component.html | 4 +-- .../monitor-data-table.component.ts | 33 ++++++++++++++++++++-- .../monitor-detail/monitor-detail.component.html | 1 - 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html index 019ef5535..05f4348eb 100644 --- a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html +++ b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.html @@ -16,10 +16,10 @@ ~ specific language governing permissions and limitations ~ under the License. --> - +<div #targetElement></div> <nz-card nzHoverable - [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column' }" + [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column', width: cardWidth + 'px' }" [nzBordered]="true" [nzBodyStyle]="{ overflow: !monitor ? 'hidden' : 'auto' }" [nzTitle]="card_title" diff --git a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts index a268d5bfe..a7cb85b93 100644 --- a/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts +++ b/web-app/src/app/routes/monitor/monitor-data-table/monitor-data-table.component.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { NzNotificationService } from 'ng-zorro-antd/notification'; import { finalize } from 'rxjs/operators'; @@ -28,7 +28,7 @@ import { MonitorService } from '../../../service/monitor.service'; templateUrl: './monitor-data-table.component.html', styleUrls: ['./monitor-data-table.component.less'] }) -export class MonitorDataTableComponent implements OnInit { +export class MonitorDataTableComponent implements OnInit, AfterViewInit { @Input() get monitorId(): number { return this._monitorId; @@ -53,6 +53,8 @@ export class MonitorDataTableComponent implements OnInit { @Input() height: string = '100%'; + @ViewChild('targetElement', { static: false }) cardElement!: ElementRef; + time!: any; fields!: any[]; valueRows!: any[]; @@ -60,8 +62,17 @@ export class MonitorDataTableComponent implements OnInit { isTable: boolean = true; scrollY: string = '100%'; loading: boolean = false; + cardWidth: number = 300; - constructor(private monitorSvc: MonitorService, private notifySvc: NzNotificationService) {} + constructor(private monitorSvc: MonitorService, private notifySvc: NzNotificationService, private cdr: ChangeDetectorRef) {} + + ngAfterViewInit() { + if (this.cardElement.nativeElement) { + const grandparentElement = this.cardElement.nativeElement.parentElement.parentElement; + const grandparentWidth = grandparentElement.clientWidth; + this.cardWidth = grandparentWidth / 2 - 4; + } + } ngOnInit(): void { this.scrollY = `calc(${this.height} - 130px)`; @@ -80,9 +91,25 @@ export class MonitorDataTableComponent implements OnInit { this.time = message.data.time; this.fields = message.data.fields; this.valueRows = message.data.valueRows; + let updateWidth = false; if (this.valueRows.length == 1) { this.isTable = false; this.rowValues = this.valueRows[0].values; + } else { + if (this.fields?.length >= 5) { + updateWidth = true; + } + } + this.valueRows.forEach(row => { + row.values.forEach((value: any) => { + if (value.origin?.length > 60) { + updateWidth = true; + } + }); + }); + if (updateWidth) { + this.cardWidth = this.cardWidth + this.cardWidth; + this.cdr.detectChanges(); } } else if (message.code !== 0) { this.notifySvc.warning(`${this.metrics}:${message.msg}`, ''); diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html index 7cf402565..88d762236 100755 --- a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html +++ b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html @@ -65,7 +65,6 @@ [app]="app" ></app-monitor-data-table> <app-monitor-data-table - class="card" [height]="'400px'" *ngFor="let metric of metrics; let i = index" [metrics]="metric" --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
