This is an automated email from the ASF dual-hosted git repository. gongchao pushed a commit to branch alarm-inhibit in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit a15f2ac8a24034dc0985c9fcc7d37a939a005b21 Author: tomsun28 <[email protected]> AuthorDate: Mon Jan 6 22:56:36 2025 +0800 [webapp] update UI Signed-off-by: tomsun28 <[email protected]> --- .../alert-setting/alert-setting.component.html | 36 ++++++++------ .../alert-setting/alert-setting.component.less | 58 ++++++++++++++++++++++ .../app/routes/dashboard/dashboard.component.html | 28 ++++++----- .../monitor-list/monitor-list.component.html | 37 ++++++++------ .../monitor-list/monitor-list.component.less | 58 ++++++++++++++++++++++ 5 files changed, 176 insertions(+), 41 deletions(-) diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html index 82d49955a..d07b75ce2 100644 --- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html +++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html @@ -609,22 +609,30 @@ [(nzVisible)]="isSwitchExportTypeModalVisible" [nzTitle]="'alert.export.switch-type' | i18n" (nzOnCancel)="onExportTypeModalCancel()" - nzOkDisabled="true" - [nzFooter]="switchExportTypeModalFooter" + nzWidth="600px" + [nzFooter]="null" > <ng-container *nzModalContent> - <p style="text-align: center"> - <button nz-button nzType="primary" nzSize="large" (click)="exportDefines('JSON')" [nzLoading]="exportJsonButtonLoading"> - <span nz-icon nzType="download"></span> - {{ 'alert.export.use-type' | i18n : { type: 'JSON' } }} - </button> - </p> - <p style="text-align: center"> - <button nz-button nzType="primary" nzSize="large" (click)="exportDefines('EXCEL')" [nzLoading]="exportExcelButtonLoading"> - <span nz-icon nzType="download"></span> - {{ 'alert.export.use-type' | i18n : { type: 'EXCEL' } }} - </button> - </p> + <div class="export-type-container"> + <div class="export-type-card" (click)="exportDefines('JSON')" [class.loading]="exportJsonButtonLoading"> + <div class="export-type-icon"> + <i nz-icon nzType="code" nzTheme="outline"></i> + </div> + <div class="export-type-info"> + <h3>JSON</h3> + <p>{{ 'alert.export.use-type' | i18n : { type: 'JSON' } }}</p> + </div> + </div> + <div class="export-type-card" (click)="exportDefines('EXCEL')" [class.loading]="exportExcelButtonLoading"> + <div class="export-type-icon"> + <i nz-icon nzType="file-excel" nzTheme="outline"></i> + </div> + <div class="export-type-info"> + <h3>EXCEL</h3> + <p>{{ 'alert.export.use-type' | i18n : { type: 'EXCEL' } }}</p> + </div> + </div> + </div> </ng-container> </nz-modal> diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less index aaba18e78..13d33ea01 100644 --- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less +++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less @@ -1,3 +1,4 @@ +@import '@delon/theme/index'; ::ng-deep { .row { @@ -180,4 +181,61 @@ border-left: none; border-radius: 0 2px 2px 0; } + + .export-type-container { + display: flex; + justify-content: space-between; + gap: 20px; + padding: 20px 0; + } + + .export-type-card { + flex: 1; + display: flex; + align-items: center; + padding: 24px; + border: 1px solid #e8e8e8; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s; + } + + .export-type-card:hover { + border-color: @primary-color; + box-shadow: 0 0 8px rgba(24, 144, 255, 0.2); + } + + .export-type-icon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + margin-right: 16px; + font-size: 24px; + color: @primary-color; + background: rgba(24, 144, 255, 0.1); + border-radius: 8px; + } + + .export-type-info { + flex: 1; + } + + .export-type-info h3 { + margin: 0 0 8px; + font-size: 16px; + font-weight: 500; + } + + .export-type-info p { + margin: 0; + color: #666; + font-size: 14px; + } + + .export-type-card.loading { + opacity: 0.7; + cursor: not-allowed; + } } diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html index 4bc50fbed..06dfcc269 100644 --- a/web-app/src/app/routes/dashboard/dashboard.component.html +++ b/web-app/src/app/routes/dashboard/dashboard.component.html @@ -398,19 +398,21 @@ <nz-timeline nzMode="left"> <nz-timeline-item *ngFor="let alert of alerts; let i = index" [nzLabel]="(alert.activeAt | date : 'YYYY-MM-dd HH:mm:ss')?.trim()"> <p style="font-weight: 400"> - <!-- <nz-tag *ngIf="alert.severity == 0" nzColor="red">--> - <!-- <i nz-icon nzType="bell" nzTheme="outline"></i>--> - <!-- <span>{{ 'alert.severity.0' | i18n }}</span>--> - <!-- </nz-tag>--> - <!-- <nz-tag *ngIf="alert.severity == 1" nzColor="orange">--> - <!-- <i nz-icon nzType="bell" nzTheme="outline"></i>--> - <!-- <span>{{ 'alert.severity.1' | i18n }}</span>--> - <!-- </nz-tag>--> - <!-- <nz-tag *ngIf="alert.severity == 2" nzColor="yellow">--> - <!-- <i nz-icon nzType="bell" nzTheme="outline"></i>--> - <!-- <span>{{ 'alert.severity.2' | i18n }}</span>--> - <!-- </nz-tag>--> - <!-- <span>[{{ alert.tags.monitorName }}] </span>--> + <nz-tag *ngIf="alert.labels.severity == 'emergency'" nzColor="red"> + <i nz-icon nzType="bell" nzTheme="outline"></i> + <span>{{ 'alert.severity.0' | i18n }}</span> + </nz-tag> + <nz-tag *ngIf="alert.labels.severity == 'critical'" nzColor="orange"> + <i nz-icon nzType="bell" nzTheme="outline"></i> + <span>{{ 'alert.severity.1' | i18n }}</span> + </nz-tag> + <nz-tag *ngIf="alert.labels.severity == 'warning'" nzColor="yellow"> + <i nz-icon nzType="bell" nzTheme="outline"></i> + <span>{{ 'alert.severity.2' | i18n }}</span> + </nz-tag> + <nz-tag *ngIf="alert.labels.alertname"> + <span>{{ alert.labels.alertname }}</span> + </nz-tag> {{ alert.content }} </p> </nz-timeline-item> diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html index 9e94607af..65cb0e02b 100644 --- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html +++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html @@ -273,22 +273,31 @@ <nz-modal [(nzVisible)]="isSwitchExportTypeModalVisible" [nzTitle]="'monitors.export.switch-type' | i18n" - nzOkDisabled="true" - [nzFooter]="switchExportTypeModalFooter" + (nzOnCancel)="isSwitchExportTypeModalVisible = false" + nzWidth="600px" + [nzFooter]="null" > <ng-container *nzModalContent> - <p style="text-align: center"> - <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('JSON')" [nzLoading]="exportJsonButtonLoading"> - <span nz-icon nzType="download"></span> - {{ 'monitors.export.use-type' | i18n : { type: 'JSON' } }} - </button> - </p> - <p style="text-align: center"> - <button nz-button nzType="primary" nzSize="large" (click)="exportMonitors('EXCEL')" [nzLoading]="exportExcelButtonLoading"> - <span nz-icon nzType="download"></span> - {{ 'monitors.export.use-type' | i18n : { type: 'EXCEL' } }} - </button> - </p> + <div class="export-type-container"> + <div class="export-type-card" (click)="exportMonitors('JSON')" [class.loading]="exportJsonButtonLoading"> + <div class="export-type-icon"> + <i nz-icon nzType="code" nzTheme="outline"></i> + </div> + <div class="export-type-info"> + <h3>JSON</h3> + <p>{{ 'monitors.export.use-type' | i18n : { type: 'JSON' } }}</p> + </div> + </div> + <div class="export-type-card" (click)="exportMonitors('EXCEL')" [class.loading]="exportExcelButtonLoading"> + <div class="export-type-icon"> + <i nz-icon nzType="file-excel" nzTheme="outline"></i> + </div> + <div class="export-type-info"> + <h3>EXCEL</h3> + <p>{{ 'monitors.export.use-type' | i18n : { type: 'EXCEL' } }}</p> + </div> + </div> + </div> </ng-container> </nz-modal> diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.less b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.less index 667151641..2f692a257 100644 --- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.less +++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.less @@ -1,3 +1,4 @@ +@import '@delon/theme/index'; ::ng-deep { .monitor-select-menu-modal { .ant-spin-container { @@ -6,3 +7,60 @@ } } } + +.export-type-container { + display: flex; + justify-content: space-between; + gap: 20px; + padding: 20px 0; +} + +.export-type-card { + flex: 1; + display: flex; + align-items: center; + padding: 24px; + border: 1px solid #e8e8e8; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s; +} + +.export-type-card:hover { + border-color: @primary-color; + box-shadow: 0 0 8px rgba(24, 144, 255, 0.2); +} + +.export-type-icon { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + margin-right: 16px; + font-size: 24px; + color: @primary-color; + background: rgba(24, 144, 255, 0.1); + border-radius: 8px; +} + +.export-type-info { + flex: 1; +} + +.export-type-info h3 { + margin: 0 0 8px; + font-size: 16px; + font-weight: 500; +} + +.export-type-info p { + margin: 0; + color: #666; + font-size: 14px; +} + +.export-type-card.loading { + opacity: 0.7; + cursor: not-allowed; +} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
