This is an automated email from the ASF dual-hosted git repository.
gongchao 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 40aa5a4d7 Fixed the issue of style anomaly caused by incorrect usage
of nz-card-tab (#2368)
40aa5a4d7 is described below
commit 40aa5a4d73c66785f702c85aed1dec7041427178
Author: Kerwin Bryant <[email protected]>
AuthorDate: Wed Jul 24 23:48:47 2024 +0800
Fixed the issue of style anomaly caused by incorrect usage of nz-card-tab
(#2368)
Co-authored-by: tomsun28 <[email protected]>
---
.../app/routes/dashboard/dashboard.component.html | 94 ++++++++++++----------
.../app/routes/dashboard/dashboard.component.less | 15 ++--
.../app/routes/dashboard/dashboard.component.ts | 1 +
3 files changed, 59 insertions(+), 51 deletions(-)
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html
b/web-app/src/app/routes/dashboard/dashboard.component.html
index f5ca85ae1..ccbf4c627 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.html
+++ b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -328,55 +328,63 @@
<div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }"
style="height: 100%">
<nz-spin [nzSpinning]="collectorsLoading">
<div style="overflow-y: auto; height: inherit">
- <nz-card *ngFor="let item of collectors; let i = index"
class="rounded-lg" nzBordered="false" [nzTitle]="collectorCardTitle">
- <nz-card-tab>
- <nz-tabset nzSize="small">
- <nz-tab [nzTitle]="'collector.status' | i18n">
- <div class="rounded-lg" style="text-align: center; width:
100%; background-color: #8fccca; padding: 2%">
- <span [style]="'font-size: x-large; font-weight: bolder;' +
(item.collector.status == 0 ? 'color: green' : 'color: red')">
- {{
- item.collector.status == 0 ?
('monitor.collector.status.online' | i18n) :
('monitor.collector.status.offline' | i18n)
- }}
- </span>
- </div>
- </nz-tab>
- <nz-tab [nzTitle]="'collector.task' | i18n">
- <div class="rounded-lg" style="text-align: center; width:
100%; background-color: #8fccca; padding: 2%">
- <span style="font-size: xxx-large; font-weight: bolder;
color: white">
- {{ item.pinMonitorNum + item.dispatchMonitorNum }}
- </span>
- <br />
- <nz-tag style="margin-bottom: 4%; font-weight: bolder">{{
'collector.pinned' | i18n }}: {{ item.pinMonitorNum }}</nz-tag>
- <nz-tag style="margin-bottom: 4%; font-weight: bolder"
- >{{ 'collector.dispatched' | i18n }}: {{
item.dispatchMonitorNum }}</nz-tag
- >
- </div>
- </nz-tab>
- <nz-tab [nzTitle]="'collector.start-time' | i18n">
- <div class="rounded-lg" style="text-align: center; width:
100%; background-color: #8fccca; padding: 2%">
- <span style="font-size: x-large; font-weight: bolder; color:
white">{{
- (item.collector.gmtUpdate | date : 'YYYY-MM-dd
HH:mm:ss')?.trim()
- }}</span>
- </div>
- </nz-tab>
- <nz-tab [nzTitle]="'collector.ip' | i18n">
- <div class="rounded-lg" style="text-align: center; width:
100%; background-color: #8fccca; padding: 2%">
- <span style="font-size: x-large; font-weight: bolder; color:
white">{{ item.collector.ip }}</span>
- </div>
- </nz-tab>
- <nz-tab [nzTitle]="'collector.node' | i18n">
- <div class="rounded-lg" style="text-align: center; width:
100%; background-color: #8fccca; padding: 2%">
- <span style="font-size: x-large; font-weight: bolder; color:
white">{{ item.collector.name }}</span>
- </div>
- </nz-tab>
- </nz-tabset>
- </nz-card-tab>
+ <nz-card
+ *ngFor="let item of collectors; let i = index"
+ class="rounded-lg collectors"
+ nzBordered="false"
+ [nzTitle]="collectorCardTitle"
+ >
<ng-template #collectorCardTitle>
<span style="font-size: medium; font-weight: bold" nz-tooltip
[nzTooltipTitle]="item.collector.name">
<span nz-icon nzType="bug" nzTheme="outline"
style="margin-right: 4px"></span>
<span>{{ 'collector' | i18n }} : {{ item.collector.name }}</span>
</span>
</ng-template>
+ <nz-card-tab>
+ <nz-tabset nzSize="small"
[(nzSelectedIndex)]="collectorsTabSelectedIndex">
+ <nz-tab [nzTitle]="'collector.status' | i18n" />
+ <nz-tab [nzTitle]="'collector.task' | i18n" />
+ <nz-tab [nzTitle]="'collector.start-time' | i18n" />
+ <nz-tab [nzTitle]="'collector.ip' | i18n" />
+ <nz-tab [nzTitle]="'collector.node' | i18n" />
+ </nz-tabset>
+ </nz-card-tab>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 0">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
+ <span [style]="'font-size: x-large; font-weight: bolder;' +
(item.collector.status == 0 ? 'color: green' : 'color: red')">
+ {{ item.collector.status == 0 ?
('monitor.collector.status.online' | i18n) :
('monitor.collector.status.offline' | i18n) }}
+ </span>
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 1">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
+ <span style="font-size: xxx-large; font-weight: bolder; color:
white">
+ {{ item.pinMonitorNum + item.dispatchMonitorNum }}
+ </span>
+ <br />
+ <nz-tag style="margin-bottom: 4%; font-weight: bolder">{{
'collector.pinned' | i18n }}: {{ item.pinMonitorNum }}</nz-tag>
+ <nz-tag style="margin-bottom: 4%; font-weight: bolder"
+ >{{ 'collector.dispatched' | i18n }}: {{
item.dispatchMonitorNum }}</nz-tag
+ >
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 2">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
+ <span style="font-size: x-large; font-weight: bolder; color:
white">{{
+ (item.collector.gmtUpdate | date : 'YYYY-MM-dd
HH:mm:ss')?.trim()
+ }}</span>
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 3">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
+ <span style="font-size: x-large; font-weight: bolder; color:
white">{{ item.collector.ip }}</span>
+ </div>
+ </ng-container>
+ <ng-container *ngIf="collectorsTabSelectedIndex === 4">
+ <div class="rounded-lg" style="text-align: center; width: 100%;
background-color: #8fccca; padding: 2%">
+ <span style="font-size: x-large; font-weight: bolder; color:
white">{{ item.collector.name }}</span>
+ </div>
+ </ng-container>
</nz-card>
</div>
</nz-spin>
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.less
b/web-app/src/app/routes/dashboard/dashboard.component.less
index 1d2eadd30..9f3455d7e 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.less
+++ b/web-app/src/app/routes/dashboard/dashboard.component.less
@@ -22,10 +22,7 @@
}
}
.ant-card-head-title {
- padding-top: 6px;
- padding-right: 0;
- padding-bottom: 6px;
- padding-left: 0;
+ padding: 6px 0px;
}
.ant-card-head {
min-height: 24px;
@@ -34,10 +31,7 @@
font-size: 12px;
}
.ant-card-body {
- padding-top: 24px;
- padding-right: 24px;
- padding-bottom: 6px;
- padding-left: 24px;
+ padding: 24px 24px 6px 24px;
}
.ant-timeline-item {
padding-bottom: 10px;
@@ -63,6 +57,11 @@
}
}
}
+ .collectors {
+ .ant-card-body {
+ padding: 6px;
+ }
+ }
}
[data-theme='dark'] {
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts
b/web-app/src/app/routes/dashboard/dashboard.component.ts
index 2bbbaca04..5cb781173 100644
--- a/web-app/src/app/routes/dashboard/dashboard.component.ts
+++ b/web-app/src/app/routes/dashboard/dashboard.component.ts
@@ -171,6 +171,7 @@ export class DashboardComponent implements OnInit,
OnDestroy {
// collector list
collectorsLoading: boolean = false;
collectors!: CollectorSummary[];
+ collectorsTabSelectedIndex = 0;
// alert list
alerts!: Alert[];
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
