From 154777a5cc79617ed2361bc7f1a2141710716aac Mon Sep 17 00:00:00 2001 From: kerwin612 Date: Thu, 4 Jul 2024 14:27:22 +0800 Subject: [PATCH 1/2] Optimize the dashboard. --- .../routes/dashboard/dashboard.component.html | 241 +++++++++--------- .../routes/dashboard/dashboard.component.less | 21 ++ .../routes/dashboard/dashboard.component.ts | 119 +++++---- 3 files changed, 213 insertions(+), 168 deletions(-) diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html index 8cef82b0a32..f5ca85ae1d8 100644 --- a/web-app/src/app/routes/dashboard/dashboard.component.html +++ b/web-app/src/app/routes/dashboard/dashboard.component.html @@ -290,131 +290,142 @@
- - + + + +
-
+ +
+
-
- - - - -
- - {{ - item.collector.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n) - }} - -
- - -
- - {{ item.pinMonitorNum + item.dispatchMonitorNum }} - -
- {{ 'collector.pinned' | i18n }}: {{ item.pinMonitorNum }} - {{ 'collector.dispatched' | i18n }}: {{ item.dispatchMonitorNum }} -
- - -
- {{ - (item.collector.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss')?.trim() - }} -
- - -
- {{ item.collector.ip }} -
- - -
- {{ item.collector.name }} -
- - - - - - - {{ 'collector' | i18n }} : {{ item.collector.name }} - - - -
+ +
+ + + + +
+ + {{ + item.collector.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n) + }} + +
+ + +
+ + {{ item.pinMonitorNum + item.dispatchMonitorNum }} + +
+ {{ 'collector.pinned' | i18n }}: {{ item.pinMonitorNum }} + {{ 'collector.dispatched' | i18n }}: {{ item.dispatchMonitorNum }} +
+ + +
+ {{ + (item.collector.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss')?.trim() + }} +
+ + +
+ {{ item.collector.ip }} +
+ + +
+ {{ item.collector.name }} +
+ + + + + + + {{ 'collector' | i18n }} : {{ item.collector.name }} + + + +
+
-
- - - -

- - - {{ 'alert.priority.0' | i18n }} - - - - {{ 'alert.priority.1' | i18n }} - - - - {{ 'alert.priority.2' | i18n }} - - [{{ alert.tags.monitorName }}] - {{ alert.content }} -

- - - +
+ + + + +

+ + + {{ 'alert.priority.0' | i18n }} + + + + {{ 'alert.priority.1' | i18n }} + + + + {{ 'alert.priority.2' | i18n }} + + [{{ alert.tags.monitorName }}] + {{ alert.content }} +

+ + + +
-
+ +
+
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.less b/web-app/src/app/routes/dashboard/dashboard.component.less index 17b7e2a49be..1d2eadd30b7 100644 --- a/web-app/src/app/routes/dashboard/dashboard.component.less +++ b/web-app/src/app/routes/dashboard/dashboard.component.less @@ -42,7 +42,28 @@ .ant-timeline-item { padding-bottom: 10px; } + .tag-animation-delay { + cursor: pointer; } + .ant-spin-nested-loading, .ant-spin-container { + height: 100%; + } + .timeline-card { + .ant-card { + display: flex; + flex-direction: column; + cursor: default!important; + .ant-card-head { + flex-shrink: 0; + } + .ant-card-body { + flex: 1; + overflow-y: auto; + margin-bottom: 12px; + } + } + } +} [data-theme='dark'] { :host ::ng-deep { diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts b/web-app/src/app/routes/dashboard/dashboard.component.ts index c7595104228..7f6b3cb772b 100644 --- a/web-app/src/app/routes/dashboard/dashboard.component.ts +++ b/web-app/src/app/routes/dashboard/dashboard.component.ts @@ -25,6 +25,7 @@ import { CloudData } from 'angular-tag-cloud-module'; import { EChartsOption } from 'echarts'; import { NzMessageService } from 'ng-zorro-antd/message'; import { fromEvent } from 'rxjs'; +import { finalize } from 'rxjs/operators'; import { Alert } from '../../pojo/Alert'; import { AppCount } from '../../pojo/AppCount'; @@ -55,6 +56,7 @@ export class DashboardComponent implements OnInit, OnDestroy { // Tag Word Cloud wordCloudData: CloudData[] = []; + wordCloudDataLoading: boolean = false; defaultWordCloudData: CloudData[] = [ { text: 'HertzBeat', weight: 5 }, { text: 'Env:Prod', weight: 8 }, @@ -77,34 +79,37 @@ export class DashboardComponent implements OnInit, OnDestroy { ]; refreshWordCloudContent(): void { - let tagsInit$ = this.tagSvc.loadTags(undefined, 1, 0, 10000).subscribe( - message => { - if (message.code === 0) { - let page = message.data; - let tags = page.content; - if (tags != null && tags.length != 0) { - let tmpData: CloudData[] = []; - tags.forEach(item => { - tmpData.push({ - text: formatTagName(item), - weight: Math.random() * (10 - 5) + 5 + this.wordCloudDataLoading = true; + let tagsInit$ = this.tagSvc.loadTags(undefined, 1, 0, 10000) + .pipe(finalize(() => (this.wordCloudDataLoading = false))) + .subscribe( + message => { + if (message.code === 0) { + let page = message.data; + let tags = page.content; + if (tags != null && tags.length != 0) { + let tmpData: CloudData[] = []; + tags.forEach(item => { + tmpData.push({ + text: formatTagName(item), + weight: Math.random() * (10 - 5) + 5 + }); }); - }); - this.wordCloudData = tmpData; + this.wordCloudData = tmpData; + } else { + this.wordCloudData = this.defaultWordCloudData; + } + this.cdr.detectChanges(); } else { - this.wordCloudData = this.defaultWordCloudData; + console.warn(message.msg); } - this.cdr.detectChanges(); - } else { - console.warn(message.msg); + tagsInit$.unsubscribe(); + }, + error => { + tagsInit$.unsubscribe(); + console.error(error.msg); } - tagsInit$.unsubscribe(); - }, - error => { - tagsInit$.unsubscribe(); - console.error(error.msg); - } - ); + ); } onTagCloudClick(data: CloudData): void { @@ -163,10 +168,12 @@ export class DashboardComponent implements OnInit, OnDestroy { pageResize$!: any; // collector list + collectorsLoading: boolean = false; collectors!: CollectorSummary[]; // 告警列表 alerts!: Alert[]; + alertContentLoading: boolean = false; ngOnInit(): void { this.appsCountTheme = { @@ -559,40 +566,46 @@ export class DashboardComponent implements OnInit, OnDestroy { alertsDealLoading: boolean = true; refreshAlertContentList(): void { - let alertsInit$ = this.alertSvc.loadAlerts(undefined, undefined, undefined, 0, 10).subscribe( - message => { - if (message.code === 0) { - let page = message.data; - this.alerts = page.content; - this.cdr.detectChanges(); - } else { - console.warn(message.msg); + this.alertContentLoading = true; + let alertsInit$ = this.alertSvc.loadAlerts(undefined, undefined, undefined, 0, 10) + .pipe(finalize(() => (this.alertContentLoading = false))) + .subscribe( + message => { + if (message.code === 0) { + let page = message.data; + this.alerts = page.content; + this.cdr.detectChanges(); + } else { + console.warn(message.msg); + } + alertsInit$.unsubscribe(); + }, + error => { + alertsInit$.unsubscribe(); + console.error(error.msg); } - alertsInit$.unsubscribe(); - }, - error => { - alertsInit$.unsubscribe(); - console.error(error.msg); - } - ); + ); } refreshCollectorContentList(): void { - let collectorInit$ = this.collectorSvc.getCollectors().subscribe( - message => { - if (message.code === 0) { - this.collectors = message.data.content; - this.cdr.detectChanges(); - } else { - console.warn(message.msg); + this.collectorsLoading = true; + let collectorInit$ = this.collectorSvc.getCollectors() + .pipe(finalize(() => (this.collectorsLoading = false))) + .subscribe( + message => { + if (message.code === 0) { + this.collectors = message.data.content; + this.cdr.detectChanges(); + } else { + console.warn(message.msg); + } + collectorInit$.unsubscribe(); + }, + error => { + collectorInit$.unsubscribe(); + console.error(error.msg); } - collectorInit$.unsubscribe(); - }, - error => { - collectorInit$.unsubscribe(); - console.error(error.msg); - } - ); + ); } refreshAlertSummary(): void { From 784fe86872f1ad5d24c514450444fda7cbd8b251 Mon Sep 17 00:00:00 2001 From: kerwin612 Date: Thu, 4 Jul 2024 14:48:32 +0800 Subject: [PATCH 2/2] Fixed lint error --- web-app/src/app/routes/dashboard/dashboard.component.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts b/web-app/src/app/routes/dashboard/dashboard.component.ts index 7f6b3cb772b..08f72c9d8a8 100644 --- a/web-app/src/app/routes/dashboard/dashboard.component.ts +++ b/web-app/src/app/routes/dashboard/dashboard.component.ts @@ -80,7 +80,8 @@ export class DashboardComponent implements OnInit, OnDestroy { refreshWordCloudContent(): void { this.wordCloudDataLoading = true; - let tagsInit$ = this.tagSvc.loadTags(undefined, 1, 0, 10000) + let tagsInit$ = this.tagSvc + .loadTags(undefined, 1, 0, 10000) .pipe(finalize(() => (this.wordCloudDataLoading = false))) .subscribe( message => { @@ -567,7 +568,8 @@ export class DashboardComponent implements OnInit, OnDestroy { refreshAlertContentList(): void { this.alertContentLoading = true; - let alertsInit$ = this.alertSvc.loadAlerts(undefined, undefined, undefined, 0, 10) + let alertsInit$ = this.alertSvc + .loadAlerts(undefined, undefined, undefined, 0, 10) .pipe(finalize(() => (this.alertContentLoading = false))) .subscribe( message => { @@ -589,7 +591,8 @@ export class DashboardComponent implements OnInit, OnDestroy { refreshCollectorContentList(): void { this.collectorsLoading = true; - let collectorInit$ = this.collectorSvc.getCollectors() + let collectorInit$ = this.collectorSvc + .getCollectors() .pipe(finalize(() => (this.collectorsLoading = false))) .subscribe( message => {