This is an automated email from the ASF dual-hosted git repository.
kerwin612 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new a1d73a292 [webapp] auto resize the monitor detail ui width (#2577)
a1d73a292 is described below
commit a1d73a292ca4a36a8ce532ee42e20cd5274e955b
Author: tomsun28 <[email protected]>
AuthorDate: Wed Aug 21 13:39:39 2024 +0800
[webapp] auto resize the monitor detail ui width (#2577)
Signed-off-by: tomsun28 <[email protected]>
Co-authored-by: YuLuo <[email protected]>
---
.../monitor-data-chart.component.html | 3 +-
.../monitor-data-chart.component.ts | 21 +++++++++++--
.../monitor-data-table.component.html | 4 +--
.../monitor-data-table.component.ts | 34 ++++++++++++++++++++--
.../monitor-detail/monitor-detail.component.html | 2 --
5 files changed, 53 insertions(+), 11 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.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..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
@@ -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,18 @@ 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;
+ this.cdr.detectChanges();
+ }
+ }
ngOnInit(): void {
this.scrollY = `calc(${this.height} - 130px)`;
@@ -80,9 +92,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..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
@@ -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"
@@ -81,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]
