add monitors center and support tag group (#1029)

apache · Jun 15, 2023 · df5fe15 · df5fe15
1 parent 28c40ca
commit df5fe15
Show file tree

Hide file tree

Showing 16 changed files with 282 additions and 224 deletions.
diff --git a/common/src/main/java/org/dromara/hertzbeat/common/entity/alerter/AlertSilence.java b/common/src/main/java/org/dromara/hertzbeat/common/entity/alerter/AlertSilence.java
@@ -98,6 +98,7 @@ public class AlertSilence {
     @Schema(description = "匹配告警信息标签(monitorId:xxx,monitorName:xxx)", example = "{name: key1, value: value1}",
             accessMode = READ_WRITE)
     @Convert(converter = JsonTagListAttributeConverter.class)
+    @Column(length = 2048)
     private List<TagItem> tags;
 
     @Schema(title = "周期性静默时有效 星期几,多选,全选或空则为每天 7:周日 1:周一 2:周二 3:周三 4:周四 5:周五 6:周六", example = "[0,1]", accessMode = READ_WRITE)

diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java b/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java
diff --git a/web-app/src/app/layout/basic/widgets/search.component.ts b/web-app/src/app/layout/basic/widgets/search.component.ts
@@ -95,7 +95,7 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy {
       )
       .subscribe(value => {
         // 远程加载搜索数据
-        let searchMonitors$ = this.monitorSvc.searchMonitors(null, value, 9, 0, 10).subscribe(
+        let searchMonitors$ = this.monitorSvc.searchMonitors(undefined, undefined, value, 9, 0, 10).subscribe(
           message => {
             this.loading = false;
             searchMonitors$.unsubscribe();

diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html
@@ -39,7 +39,7 @@
     {{ 'common.search' | i18n }}
   </button>
   <input
-    style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
+    style="margin-right: 5px; float: right; width: 200px; border-radius: 9px; text-align: center"
     nz-input
     type="text"
     [placeholder]="'alert.center.search' | i18n"
@@ -50,7 +50,7 @@
   />
   <nz-select
     class="mobile-hide"
-    style="margin-right: 10px; float: right; width: 120px"
+    style="margin-right: 10px; float: right"
     nzAllowClear
     [nzPlaceHolder]="'alert.center.filter-status' | i18n"
     [(ngModel)]="filterStatus"
@@ -62,7 +62,7 @@
   </nz-select>
   <nz-select
     class="mobile-hide"
-    style="margin-right: 10px; float: right; width: 120px"
+    style="margin-right: 10px; float: right"
     nzAllowClear
     [nzPlaceHolder]="'alert.center.filter-priority' | i18n"
     [(ngModel)]="filterPriority"

diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -147,7 +147,7 @@
       [autoResize]="true"
       [loading]="alertsLoading"
       (chartInit)="onAlertNumChartInit($event)"
-      style="width: 100%; min-height: 300px"
+      style="width: 100%; height: 300px; padding-left: 30px"
       class="ant-card ant-card-bordered ant-card-hoverable"
     ></div>
   </div>
@@ -159,7 +159,7 @@
       [autoResize]="true"
       [loading]="alertsDealLoading"
       (chartInit)="onAlertRateChartInit($event)"
-      style="width: 100%; min-height: 300px"
+      style="width: 100%; height: 300px"
       class="ant-card ant-card-bordered ant-card-hoverable"
     ></div>
   </div>

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
@@ -7,14 +7,32 @@
     </a>
   </nz-breadcrumb-item>
   <nz-breadcrumb-item>
-    <i nz-icon nzType="reconciliation"></i>
-    <span>{{ 'monitors.list' | i18n }}</span>
-    <a routerLink="/setting/define" [queryParams]="{ app: app }">
+    <i *ngIf="app != undefined" nz-icon nzType="reconciliation"></i>
+    <i *ngIf="app == undefined" nz-icon nzType="laptop"></i>
+    <span *ngIf="app != undefined">{{ 'monitors.list' | i18n }}</span>
+    <span *ngIf="app == undefined">{{ 'menu.monitor.center' | i18n }}</span>
+    <a *ngIf="app != undefined" routerLink="/setting/define" [queryParams]="{ app: app }">
       <nz-tag style="font-size: 14px; border-radius: 4px; margin-left: 4px" nzColor="#3f51b5" class="hoverClass">
         <span>{{ 'monitor.app.' + app | i18n }}</span>
       </nz-tag>
     </a>
-    <a [href]="'https://hertzbeat.com/docs/help/' + app" target="_blank" style="float: right; margin-right: 5%" class="mobile-hide">
+    <nz-tag
+      *ngIf="tag != undefined"
+      style="font-size: 14px; border-radius: 4px; margin-left: 4px"
+      nzColor="#ff4081"
+      class="hoverClass"
+      nzMode="closeable"
+      (nzOnClose)="clearCurrentTag()"
+    >
+      <span nz-icon nzType="tag" nzTheme="outline"></span>
+      <span>{{ tag }}</span>
+    </nz-tag>
+    <a
+      [href]="'https://hertzbeat.com/docs/help/' + (app == undefined ? 'guide' : app)"
+      target="_blank"
+      style="float: right; margin-right: 5%"
+      class="mobile-hide"
+    >
       <button nz-button nzType="primary">
         <span>{{ 'common.button.help' | i18n }} </span>
         <span nz-icon nzType="question-circle"></span>
@@ -29,7 +47,7 @@
     <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
       <i nz-icon nzType="sync" nzTheme="outline"></i>
     </button>
-    <button nz-button nzType="primary">
+    <button *ngIf="app != undefined" nz-button nzType="primary">
       <a routerLink="/monitors/new" [queryParams]="{ app: app }">
         <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
         {{ 'monitors.new' | i18n }} {{ 'monitor.app.' + app | i18n }}
@@ -76,7 +94,7 @@
       {{ 'common.search' | i18n }}
     </button>
     <input
-      style="margin-right: 5px; float: right; width: 150px; border-radius: 9px; text-align: center"
+      style="margin-right: 5px; float: right; width: 200px; border-radius: 9px; text-align: center"
       nz-input
       type="text"
       [placeholder]="'monitors.search.placeholder' | i18n"
@@ -85,7 +103,7 @@
       [(ngModel)]="filterContent"
     />
     <nz-select
-      style="margin-right: 10px; float: right; width: 120px"
+      style="margin-right: 10px; float: right"
       nzAllowClear
       [nzPlaceHolder]="'monitors.search.filter' | i18n"
       [(ngModel)]="filterStatus"
@@ -117,12 +135,13 @@
   <thead>
     <tr>
       <th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
-      <th nzAlign="center" nzWidth="20%" nzColumnKey="name" [nzSortFn]="true">{{ 'monitor.name' | i18n }}</th>
-      <th nzAlign="center" nzWidth="12%" nzColumnKey="status" [nzSortFn]="true">{{ 'monitor.status' | i18n }}</th>
-      <th nzAlign="center" nzWidth="15%">{{ 'monitor.host' | i18n }}</th>
-      <th nzAlign="center" nzWidth="15%">{{ 'monitor.app' | i18n }}</th>
-      <th nzAlign="center" nzWidth="15%" nzColumnKey="gmtUpdate" [nzSortFn]="true">{{ 'common.edit-time' | i18n }}</th>
-      <th nzAlign="center" nzWidth="20%">{{ 'common.edit' | i18n }}</th>
+      <th nzAlign="center" nzWidth="17%" nzColumnKey="name" [nzSortFn]="true">{{ 'monitor.name' | i18n }}</th>
+      <th nzAlign="center" nzWidth="10%" nzColumnKey="status" [nzSortFn]="true">{{ 'monitor.status' | i18n }}</th>
+      <th nzAlign="center" nzWidth="12%">{{ 'monitor.host' | i18n }}</th>
+      <th nzAlign="center" nzWidth="10%">{{ 'monitor.app' | i18n }}</th>
+      <th nzAlign="center" nzWidth="16%">{{ 'tag' | i18n }}</th>
+      <th nzAlign="center" nzWidth="14%" nzColumnKey="gmtUpdate" [nzSortFn]="true">{{ 'common.edit-time' | i18n }}</th>
+      <th nzAlign="center" nzWidth="18%">{{ 'common.edit' | i18n }}</th>
     </tr>
   </thead>
   <tbody>
@@ -174,6 +193,13 @@
           </nz-tag>
         </a>
       </td>
+      <td nzAlign="left">
+        <a *ngFor="let tag of data?.tags; let i = index" routerLink="/monitors" [queryParams]="{ tag: sliceTagName(tag) }">
+          <nz-tag style="margin-top: 2px" [nzColor]="tag?.color" class="hoverClass">
+            {{ sliceTagName(tag) }}
+          </nz-tag>
+        </a>
+      </td>
       <td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">
         <button

diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
@@ -10,9 +10,9 @@ import { NzTableQueryParams } from 'ng-zorro-antd/table';
 import { NzUploadChangeParam } from 'ng-zorro-antd/upload';
 import { finalize } from 'rxjs/operators';
 
-import { Message } from '../../../pojo/Message';
 import { Monitor } from '../../../pojo/Monitor';
 import { MonitorService } from '../../../service/monitor.service';
+import { formatTagName } from '../../../shared/utils/common-util';
 
 @Component({
   selector: 'app-monitor-list',
@@ -25,13 +25,13 @@ export class MonitorListComponent implements OnInit {
     private router: Router,
     private modal: NzModalService,
     private notifySvc: NzNotificationService,
-    private msg: NzMessageService,
     private monitorSvc: MonitorService,
     private messageSvc: NzMessageService,
     @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
-  app!: string;
+  app!: string | undefined;
+  tag!: string | undefined;
   pageIndex: number = 1;
   pageSize: number = 8;
   total: number = 0;
@@ -52,9 +52,17 @@ export class MonitorListComponent implements OnInit {
 
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(paramMap => {
-      this.app = paramMap.get('app') || '';
-      if (this.app == '') {
-        this.router.navigateByUrl('/monitors?app=website');
+      let appStr = paramMap.get('app');
+      let tagStr = paramMap.get('tag');
+      if (tagStr != null) {
+        this.tag = tagStr;
+      } else {
+        this.tag = undefined;
+      }
+      if (appStr != null) {
+        this.app = appStr;
+      } else {
+        this.app = undefined;
       }
       this.pageIndex = 1;
       this.pageSize = 8;
@@ -67,7 +75,7 @@ export class MonitorListComponent implements OnInit {
   onFilterSearchMonitors() {
     this.tableLoading = true;
     let filter$ = this.monitorSvc
-      .searchMonitors(this.app, this.filterContent, this.filterStatus, this.pageIndex - 1, this.pageSize)
+      .searchMonitors(this.app, this.tag, this.filterContent, this.filterStatus, this.pageIndex - 1, this.pageSize)
       .subscribe(
         message => {
           filter$.unsubscribe();
@@ -95,9 +103,13 @@ export class MonitorListComponent implements OnInit {
     this.loadMonitorTable();
   }
 
+  clearCurrentTag() {
+    this.router.navigateByUrl(`/monitors`);
+  }
+
   loadMonitorTable(sortField?: string | null, sortOrder?: string | null) {
     this.tableLoading = true;
-    let monitorInit$ = this.monitorSvc.getMonitors(this.app, this.pageIndex - 1, this.pageSize, sortField, sortOrder).subscribe(
+    let monitorInit$ = this.monitorSvc.getMonitors(this.app, this.tag, this.pageIndex - 1, this.pageSize, sortField, sortOrder).subscribe(
       message => {
         this.tableLoading = false;
         this.checkedAll = false;
@@ -129,21 +141,6 @@ export class MonitorListComponent implements OnInit {
     // this.router.navigate(['/monitors/new'],{queryParams: {app: "linux"}});
   }
 
-  onEditMonitor() {
-    // 编辑时只能选中一个监控
-    if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) {
-      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.no-select-edit'), '');
-      return;
-    }
-    if (this.checkedMonitorIds.size > 1) {
-      this.notifySvc.warning(this.i18nSvc.fanyi('common.notify.one-select-edit'), '');
-      return;
-    }
-    let monitorId = 0;
-    this.checkedMonitorIds.forEach(item => (monitorId = item));
-    this.router.navigateByUrl(`/monitors/${monitorId}/edit`);
-  }
-
   onDeleteOneMonitor(monitorId: number) {
     let monitors = new Set<number>();
     monitors.add(monitorId);
@@ -410,4 +407,6 @@ export class MonitorListComponent implements OnInit {
     const sortOrder = (currentSort && currentSort.value) || null;
     this.loadMonitorTable(sortField, sortOrder);
   }
+
+  protected readonly sliceTagName = formatTagName;
 }
diff --git a/web-app/src/app/routes/routes-routing.module.ts b/web-app/src/app/routes/routes-routing.module.ts
@@ -20,7 +20,6 @@ const routes: Routes = [
     // 路由守卫 在路由之前判断是否有认证或者权限进入此路由
     canActivate: [DetectAuthGuard],
     children: [
-      // todo 根据路由自动生成面包屑
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
       { path: 'dashboard', component: DashboardComponent, data: { titleI18n: 'menu.dashboard' } },
       { path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) },

diff --git a/web-app/src/app/routes/setting/tags/tags.component.html b/web-app/src/app/routes/setting/tags/tags.component.html
@@ -66,27 +66,28 @@
   <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.color' | i18n }}</th>
-      <th nzAlign="center" nzWidth="15%">{{ 'tag.display' | 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">{{ data.name }}</td>
-      <td nzAlign="center">{{ data.value }}</td>
       <td nzAlign="center">
-        <nz-tag [nzColor]="data.color">{{ data.color }}</nz-tag>
+        <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.value }}</td>
       <td nzAlign="center">
-        <nz-tag *ngIf="data.value == undefined || data.value.trim() == ''" [nzColor]="data.color">{{ data.name }}</nz-tag>
-        <nz-tag *ngIf="data.value != undefined && data.value.trim() != ''" [nzColor]="data.color">{{
-          data.name + ':' + data.value
-        }}</nz-tag>
+        <nz-tag [nzColor]="data.color" style="font-weight: bold; font-size: larger">{{ data.color }}</nz-tag>
       </td>
       <td nzAlign="center">{{ data.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
       <td nzAlign="center">

diff --git a/web-app/src/app/routes/setting/tags/tags.component.ts b/web-app/src/app/routes/setting/tags/tags.component.ts
@@ -8,6 +8,7 @@ import { finalize } from 'rxjs/operators';
 
 import { Tag } from '../../../pojo/Tag';
 import { TagService } from '../../../service/tag.service';
+import { formatTagName } from '../../../shared/utils/common-util';
 
 @Component({
   selector: 'app-setting-tags',
@@ -211,4 +212,5 @@ export class SettingTagsComponent implements OnInit {
     }
   }
   // end 新增修改告警定义model
+  protected readonly formatTagName = formatTagName;
 }
diff --git a/web-app/src/app/service/monitor.service.ts b/web-app/src/app/service/monitor.service.ts
@@ -92,22 +92,27 @@ export class MonitorService {
   }
 
   public getMonitors(
-    app: string,
+    app: string | undefined,
+    tag: string | undefined,
     pageIndex: number,
     pageSize: number,
     sortField?: string | null,
     sortOrder?: string | null
   ): Observable<Message<Page<Monitor>>> {
-    app = app.trim();
     pageIndex = pageIndex ? pageIndex : 0;
     pageSize = pageSize ? pageSize : 8;
     // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象
     let httpParams = new HttpParams();
     httpParams = httpParams.appendAll({
-      app: app,
       pageIndex: pageIndex,
       pageSize: pageSize
     });
+    if (app != undefined) {
+      httpParams = httpParams.append('app', app.trim());
+    }
+    if (tag != undefined) {
+      httpParams = httpParams.append('tag', tag);
+    }
     if (sortField != null && sortOrder != null) {
       httpParams = httpParams.appendAll({
         sort: sortField,
@@ -119,7 +124,8 @@ export class MonitorService {
   }
 
   public searchMonitors(
-    app: string | null,
+    app: string | undefined,
+    tag: string | undefined,
     searchValue: string,
     status: number,
     pageIndex: number,
@@ -133,6 +139,9 @@ export class MonitorService {
       pageIndex: pageIndex,
       pageSize: pageSize
     });
+    if (tag != undefined) {
+      httpParams = httpParams.append('tag', tag);
+    }
     if (status != undefined && status != 9) {
       httpParams = httpParams.append('status', status);
     }

diff --git a/web-app/src/app/shared/utils/common-util.ts b/web-app/src/app/shared/utils/common-util.ts
@@ -0,0 +1,9 @@
+import { Tag } from '../../pojo/Tag';
+
+export function formatTagName(tag: Tag): string {
+  if (tag.value != undefined && tag.value.trim() != '') {
+    return `${tag.name}:${tag.value}`;
+  } else {
+    return tag.name;
+  }
+}
diff --git a/web-app/src/assets/app-data.json b/web-app/src/assets/app-data.json
@@ -29,6 +29,12 @@
       "group": true,
       "hideInBreadcrumb": true,
       "children": [
+        {
+          "text": "monitor-center",
+          "i18n": "menu.monitor.center",
+          "icon": "anticon-laptop",
+          "link": "/monitors"
+        },
         {
           "key": "service",
           "text": "应用服务",