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 c529768e9ad251aab1ce40db399488e3ff1dc517 Author: tomsun28 <[email protected]> AuthorDate: Wed Aug 21 09:28:46 2024 +0800 [webapp] auto resize the monitor detail ui width Signed-off-by: tomsun28 <[email protected]> --- .../monitor-data-chart.component.html | 3 ++- .../monitor-data-chart.component.ts | 21 ++++++++++++++++++--- .../monitor-data-table.component.ts | 1 + .../monitor-detail/monitor-detail.component.html | 1 - 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html index 8f1c4cb7f..e744e7afa 100644 --- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html +++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html @@ -17,7 +17,8 @@ ~ under the License. --> -<nz-card style="height: 100%" nzHoverable [nzBordered]="true"> +<div #targetElement></div> +<nz-card style="height: 100%" [style.width]="cardWidth + 'px'" nzHoverable [nzBordered]="true"> <div echarts [options]="eChartOption" diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts index 646e6fea7..1a6e98c5c 100644 --- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts +++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Component, Inject, Input, OnInit } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, Input, OnInit, ViewChild } from '@angular/core'; import { I18NService } from '@core'; import { ALAIN_I18N_TOKEN } from '@delon/theme'; import { EChartsOption } from 'echarts'; @@ -30,7 +30,7 @@ import { MonitorService } from '../../../service/monitor.service'; templateUrl: './monitor-data-chart.component.html', styles: [] }) -export class MonitorDataChartComponent implements OnInit { +export class MonitorDataChartComponent implements OnInit, AfterViewInit { @Input() get monitorId(): number { return this._monitorId; @@ -53,7 +53,19 @@ export class MonitorDataChartComponent implements OnInit { echartsInstance!: any; // Default historical data period is last 6 hours timePeriod: string = '6h'; - constructor(private monitorSvc: MonitorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService) {} + cardWidth: number = 600; + @ViewChild('targetElement', { static: false }) cardElement!: ElementRef; + + constructor(private monitorSvc: MonitorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService, private cdr: ChangeDetectorRef) {} + + ngAfterViewInit() { + if (this.cardElement.nativeElement) { + const grandparentElement = this.cardElement.nativeElement.parentElement.parentElement; + const grandparentWidth = grandparentElement.clientWidth; + this.cardWidth = grandparentWidth / 2 - 4; + this.cdr.detectChanges(); + } + } ngOnInit(): void { let metricsI18n = this.i18nSvc.fanyi(`monitor.app.${this.app}.metrics.${this.metrics}`); @@ -259,6 +271,9 @@ export class MonitorDataChartComponent implements OnInit { data: legend }; } + if (legend.length >= 5) { + this.cardWidth = this.cardWidth + this.cardWidth; + } this.lineHistoryTheme.series = []; let valueKeyArr = Object.keys(values); for (let index = 0; index < valueKeyArr.length; index++) { 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 a7cb85b93..11582d1d8 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 @@ -71,6 +71,7 @@ export class MonitorDataTableComponent implements OnInit, AfterViewInit { const grandparentElement = this.cardElement.nativeElement.parentElement.parentElement; const grandparentWidth = grandparentElement.clientWidth; this.cardWidth = grandparentWidth / 2 - 4; + this.cdr.detectChanges(); } } 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 88d762236..2dcdaa66e 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 @@ -80,7 +80,6 @@ </ng-template> <div class="cards"> <app-monitor-data-chart - class="card" *ngFor="let item of chartMetrics; let i = index" [app]="app" [metrics]="item.metrics" --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
