This is an automated email from the ASF dual-hosted git repository. gongchao pushed a commit to branch alarm-1-3 in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit ca63726cd214d7aa391af5a9030aefc3e0f69c4c Author: tomsun28 <[email protected]> AuthorDate: Fri Jan 3 17:05:39 2025 +0800 [webapp] update labels Signed-off-by: tomsun28 <[email protected]> --- web-app/src/app/routes/setting/setting.module.ts | 6 +- .../app/routes/setting/tags/tags.component.html | 95 +++++++--------------- .../app/routes/setting/tags/tags.component.less | 80 ++++++++++++++++++ .../src/app/routes/setting/tags/tags.component.ts | 13 ++- 4 files changed, 128 insertions(+), 66 deletions(-) diff --git a/web-app/src/app/routes/setting/setting.module.ts b/web-app/src/app/routes/setting/setting.module.ts index 08d23546e..108221d3b 100644 --- a/web-app/src/app/routes/setting/setting.module.ts +++ b/web-app/src/app/routes/setting/setting.module.ts @@ -26,8 +26,10 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor'; import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzDividerModule } from 'ng-zorro-antd/divider'; +import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzListModule } from 'ng-zorro-antd/list'; +import { NzPaginationComponent } from 'ng-zorro-antd/pagination'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzSwitchModule } from 'ng-zorro-antd/switch'; import { NzTagModule } from 'ng-zorro-antd/tag'; @@ -74,7 +76,9 @@ const COMPONENTS: Array<Type<void>> = [ ClipboardModule, NzBadgeModule, NzRadioModule, - NzUploadComponent + NzUploadComponent, + NzPaginationComponent, + NzDropDownModule ], declarations: COMPONENTS }) diff --git a/web-app/src/app/routes/setting/tags/tags.component.html b/web-app/src/app/routes/setting/tags/tags.component.html index 75683c288..9de6b5ca5 100644 --- a/web-app/src/app/routes/setting/tags/tags.component.html +++ b/web-app/src/app/routes/setting/tags/tags.component.html @@ -60,73 +60,38 @@ </ng-template> </app-toolbar> -<nz-table - #fixedTable - [nzData]="tags" - [nzPageIndex]="pageIndex" - [nzPageSize]="pageSize" - [nzTotal]="total" - nzFrontPagination="false" - [nzLoading]="tableLoading" - nzShowSizeChanger - [nzShowTotal]="rangeTemplate" - [nzPageSizeOptions]="[8, 15, 25]" - (nzQueryParams)="onTablePageChange($event)" - nzShowPagination="true" - [nzScroll]="{ x: '1240px' }" -> - <thead> - <tr> - <th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th> - <th nzAlign="center" nzWidth="15%">{{ 'tag' | i18n }}</th> - <th nzAlign="center" nzWidth="15%">{{ 'tag.name' | i18n }}</th> - <th nzAlign="center" nzWidth="15%">{{ 'tag.value' | i18n }}</th> - <th nzAlign="center" nzWidth="15%">{{ 'tag.description' | i18n }}</th> - <th nzAlign="center" nzWidth="20%">{{ 'tag.update-time' | i18n }}</th> - <th nzAlign="center" nzWidth="17%">{{ 'common.edit' | i18n }}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let data of fixedTable.data"> - <td nzAlign="center" nzLeft [nzChecked]="checkedTagIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td> - <td nzAlign="center"> - <a routerLink="/monitors" [queryParams]="{ tag: formatTagName(data) }"> - <nz-tag [nzColor]="data.color" style="font-weight: bold; font-size: larger" class="hoverClass"> - {{ formatTagName(data) }} - </nz-tag> - </a> - </td> - <td nzAlign="center">{{ data.name }}</td> - <td nzAlign="center">{{ data.tagValue }}</td> - <td nzAlign="center">{{ data.description }}</td> - <td nzAlign="center">{{ data.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</td> - <td nzAlign="center"> - <div class="actions"> - <button nz-button nzType="primary" (click)="onEditOneTag(data)" nz-tooltip [nzTooltipTitle]="'tag.edit' | i18n"> - <i nz-icon nzType="edit" nzTheme="outline"></i> - </button> - <button nz-button nz-dropdown [nzDropdownMenu]="more_menu"> - <span nz-icon nzType="ellipsis"></span> - </button> - <nz-dropdown-menu #more_menu="nzDropdownMenu"> - <ul nz-menu> - <li nz-menu-item> - <button nz-button nzDanger (click)="onDeleteOneTag(data.id)"> - <i nz-icon nzType="delete" nzTheme="outline"></i> - {{ 'common.button.delete' | i18n }} - </button> - </li> - </ul> - </nz-dropdown-menu> +<div class="tag-cards-container"> + <nz-row [nzGutter]="[12, 12]"> + <nz-col [nzXs]="12" [nzSm]="8" [nzMd]="6" [nzLg]="4" *ngFor="let data of tags"> + <nz-card [nzActions]="[editAction, deleteAction]" [nzBorderless]="true" class="tag-card"> + <div class="tag-header"> + <a routerLink="/monitors" [queryParams]="{ tag: formatTagName(data) }"> + <nz-tag [nzColor]="data.color" class="tag-name"> + {{ formatTagName(data) }} + </nz-tag> + </a> </div> - </td> - </tr> - </tbody> -</nz-table> -<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template> + <div class="tag-description" *ngIf="data.description"> + {{ data.description }} + </div> + + <ng-template #editAction> + <span nz-tooltip [nzTooltipTitle]="'tag.edit' | i18n" (click)="onEditOneTag(data)"> + <i nz-icon nzType="edit" nzTheme="outline"></i> + </span> + </ng-template> + + <ng-template #deleteAction> + <span nz-tooltip [nzTooltipTitle]="'common.button.delete' | i18n" (click)="onDeleteOneTag(data.id)"> + <i nz-icon nzType="delete" nzTheme="outline"></i> + </span> + </ng-template> + </nz-card> + </nz-col> + </nz-row> +</div> -<!-- new or update TAG pop-up box --> <nz-modal [(nzVisible)]="isManageModalVisible" [nzTitle]="isManageModalAdd ? ('tag.new' | i18n) : ('tag.edit' | i18n)" @@ -184,3 +149,5 @@ </form> </div> </nz-modal> + +<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template> diff --git a/web-app/src/app/routes/setting/tags/tags.component.less b/web-app/src/app/routes/setting/tags/tags.component.less new file mode 100644 index 000000000..192b580e2 --- /dev/null +++ b/web-app/src/app/routes/setting/tags/tags.component.less @@ -0,0 +1,80 @@ +.tag-cards-container { + padding: 24px 0; + + .tag-card { + transition: all 0.3s; + border-radius: 8px; + background: #fff; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } + + ::ng-deep { + .ant-card-body { + padding: 12px; + min-height: 80px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .ant-card-actions { + border-radius: 0 0 8px 8px; + background: #fafafa; + border-top: 1px solid #f0f0f0; + min-height: 32px; + + > li { + margin: 0; + + > span { + padding: 4px 0; + + &:hover { + color: #1890ff; + } + + i { + font-size: 14px; + } + } + } + } + } + } + + .tag-header { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 8px; + + .tag-name { + font-size: 16px; + padding: 4px 16px; + border-radius: 4px; + margin: 0; + font-weight: 500; + line-height: 1.4; + text-align: center; + } + } + + .tag-description { + color: rgba(0, 0, 0, 0.65); + font-size: 14px; + line-height: 1.5; + margin: 0; + min-height: 32px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + width: 100%; + } +} \ No newline at end of file diff --git a/web-app/src/app/routes/setting/tags/tags.component.ts b/web-app/src/app/routes/setting/tags/tags.component.ts index e3aee2fe4..928d800f7 100644 --- a/web-app/src/app/routes/setting/tags/tags.component.ts +++ b/web-app/src/app/routes/setting/tags/tags.component.ts @@ -32,7 +32,8 @@ import { formatTagName } from '../../../shared/utils/common-util'; @Component({ selector: 'app-setting-tags', - templateUrl: './tags.component.html' + templateUrl: './tags.component.html', + styleUrls: ['./tags.component.less'] }) export class SettingTagsComponent implements OnInit { @ViewChild('tagForm', { static: false }) tagForm: NgForm | undefined; @@ -253,4 +254,14 @@ export class SettingTagsComponent implements OnInit { } // end 新增修改告警定义model protected readonly formatTagName = formatTagName; + + onPageIndexChange(index: number): void { + this.pageIndex = index; + this.loadTagsTable(); + } + + onPageSizeChange(size: number): void { + this.pageSize = size; + this.loadTagsTable(); + } } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
