From df5fe15973a74f935b6ba938c49f3a5cce60955e Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Thu, 15 Jun 2023 21:46:20 +0800
Subject: [PATCH] add monitors center and support tag group (#1029)

---
 .../common/entity/alerter/AlertSilence.java   |   1 +
 .../controller/MonitorsController.java        | 323 +++++++++---------
 .../layout/basic/widgets/search.component.ts  |   2 +-
 .../alert-center/alert-center.component.html  |   6 +-
 .../routes/dashboard/dashboard.component.html |   4 +-
 .../monitor-list/monitor-list.component.html  |  52 ++-
 .../monitor-list/monitor-list.component.ts    |  45 ++-
 .../src/app/routes/routes-routing.module.ts   |   1 -
 .../routes/setting/tags/tags.component.html   |  17 +-
 .../app/routes/setting/tags/tags.component.ts |   2 +
 web-app/src/app/service/monitor.service.ts    |  17 +-
 web-app/src/app/shared/utils/common-util.ts   |   9 +
 web-app/src/assets/app-data.json              |   6 +
 web-app/src/assets/i18n/en-US.json            |   7 +-
 web-app/src/assets/i18n/zh-CN.json            |   7 +-
 web-app/src/assets/i18n/zh-TW.json            |   7 +-
 16 files changed, 282 insertions(+), 224 deletions(-)
 create mode 100644 web-app/src/app/shared/utils/common-util.ts

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
index 3230d50db3d..73f1ca717f8 100644
--- 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
index 7c7786722a9..f9357534b81 100644
--- a/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java
+++ b/manager/src/main/java/org/dromara/hertzbeat/manager/controller/MonitorsController.java
@@ -56,164 +56,167 @@
 @RestController
 @RequestMapping(path = "/api/monitors", produces = {APPLICATION_JSON_VALUE})
 public class MonitorsController {
-
-    private static final byte ALL_MONITOR_STATUS = 9;
-
-    @Autowired
-    private MonitorService monitorService;
-
-    @GetMapping
-    @Operation(summary = "Obtain a list of monitoring information based on query filter items",
-            description = "根据查询过滤项获取监控信息列表")
-    public ResponseEntity<Message<Page<Monitor>>> getMonitors(
-            @Parameter(description = "Monitor ID | 监控ID", example = "6565463543") @RequestParam(required = false) final List<Long> ids,
-            @Parameter(description = "Monitor Type | 监控类型", example = "linux") @RequestParam(required = false) final String app,
-            @Parameter(description = "Monitor Name | 监控名称，模糊查询", example = "linux-127.0.0.1") @RequestParam(required = false) final String name,
-            @Parameter(description = "Monitor Host | 监控Host，模糊查询", example = "127.0.0.1") @RequestParam(required = false) final String host,
-            @Parameter(description = "Monitor Status | 监控状态 0:未监控,1:可用,2:不可用,3:不可达,4:挂起,9:全部状态", example = "1") @RequestParam(required = false) final Byte status,
-            @Parameter(description = "Sort Field | 排序字段", example = "name") @RequestParam(defaultValue = "gmtCreate") final String sort,
-            @Parameter(description = "Sort by | 排序方式，asc:升序，desc:降序", example = "desc") @RequestParam(defaultValue = "desc") final String order,
-            @Parameter(description = "List current page | 列表当前分页", example = "0") @RequestParam(defaultValue = "0") int pageIndex,
-            @Parameter(description = "Number of list pagination | 列表分页数量", example = "8") @RequestParam(defaultValue = "8") int pageSize,
-            @Parameter(description = "Monitor tags | 监控标签", example = "") @RequestBody(required = false) final List<org.dromara.hertzbeat.common.entity.manager.Tag> tags) {
-        Specification<Monitor> specification = (root, query, criteriaBuilder) -> {
-            List<Predicate> andList = new ArrayList<>();
-            if (ids != null && !ids.isEmpty()) {
-                CriteriaBuilder.In<Long> inPredicate = criteriaBuilder.in(root.get("id"));
-                for (long id : ids) {
-                    inPredicate.value(id);
-                }
-                andList.add(inPredicate);
-            }
-            if (StringUtils.hasText(app)) {
-                Predicate predicateApp = criteriaBuilder.equal(root.get("app"), app);
-                andList.add(predicateApp);
-            }
-            if (status != null && status >= 0 && status < ALL_MONITOR_STATUS) {
-                Predicate predicateStatus = criteriaBuilder.equal(root.get("status"), status);
-                andList.add(predicateStatus);
-            }
-
-        if (tags != null && !tags.isEmpty()) {
-            tags.stream().forEach(tag->{
-                ListJoin<Monitor, org.dromara.hertzbeat.common.entity.manager.Tag> monitors = root
-                        .join(root.getModel()
-                                .getList("tags", org.dromara.hertzbeat.common.entity.manager.Tag.class), JoinType.LEFT);
-                andList.add(criteriaBuilder.equal(monitors.get("id"), tag.getId()));
-            });
-        }
-            Predicate[] andPredicates = new Predicate[andList.size()];
-            Predicate andPredicate = criteriaBuilder.and(andList.toArray(andPredicates));
-
-            List<Predicate> orList = new ArrayList<>();
-            if (StringUtils.hasText(host)) {
-                Predicate predicateHost = criteriaBuilder.like(root.get("host"), "%" + host + "%");
-                orList.add(predicateHost);
-            }
-            if (StringUtils.hasText(name)) {
-                Predicate predicateName = criteriaBuilder.like(root.get("name"), "%" + name + "%");
-                orList.add(predicateName);
-            }
-            Predicate[] orPredicates = new Predicate[orList.size()];
-            Predicate orPredicate = criteriaBuilder.or(orList.toArray(orPredicates));
-
-            if (andPredicate.getExpressions().isEmpty() && orPredicate.getExpressions().isEmpty()) {
-                return query.where().getRestriction();
-            } else if (andPredicate.getExpressions().isEmpty()) {
-                return query.where(orPredicate).getRestriction();
-            } else if (orPredicate.getExpressions().isEmpty()) {
-                return query.where(andPredicate).getRestriction();
-            } else {
-                return query.where(andPredicate, orPredicate).getRestriction();
-            }
-        };
-        // Pagination is a must         分页是必须的
-        Sort sortExp = Sort.by(new Sort.Order(Sort.Direction.fromString(order), sort));
-        PageRequest pageRequest = PageRequest.of(pageIndex, pageSize, sortExp);
-        Page<Monitor> monitorPage = monitorService.getMonitors(specification, pageRequest);
-        Message<Page<Monitor>> message = new Message<>(monitorPage);
-        return ResponseEntity.ok(message);
-    }
-
-    @GetMapping(path = "/{app}")
-    @Operation(summary = "Filter all acquired monitoring information lists of the specified monitoring type according to the query",
-            description = "根据查询过滤指定监控类型的所有获取监控信息列表")
-    public ResponseEntity<Message<List<Monitor>>> getAppMonitors(
-            @Parameter(description = "en: Monitoring type,zh: 监控类型", example = "linux") @PathVariable(required = false) final String app) {
-        List<Monitor> monitors = monitorService.getAppMonitors(app);
-        Message<List<Monitor>> message = new Message<>(monitors);
-        return ResponseEntity.ok(message);
-    }
-
-    @DeleteMapping
-    @Operation(summary = "Delete monitoring items in batches according to the monitoring ID list",
-            description = "根据监控ID列表批量删除监控项")
-    public ResponseEntity<Message<Void>> deleteMonitors(
-            @Parameter(description = "en: Monitoring ID List,zh: 监控ID列表", example = "6565463543") @RequestParam(required = false) List<Long> ids
-    ) {
-        if (ids != null && !ids.isEmpty()) {
-            monitorService.deleteMonitors(new HashSet<>(ids));
-        }
-        Message<Void> message = new Message<>();
-        return ResponseEntity.ok(message);
-    }
-
-    @DeleteMapping("manage")
-    @Operation(summary = "Unmanaged monitoring items in batches according to the monitoring ID list",
-            description = "根据监控ID列表批量取消纳管监控项")
-    public ResponseEntity<Message<Void>> cancelManageMonitors(
-            @Parameter(description = "en: Monitoring ID List,zh: 监控ID列表", example = "6565463543") @RequestParam(required = false) List<Long> ids
-    ) {
-        if (ids != null && !ids.isEmpty()) {
-            monitorService.cancelManageMonitors(new HashSet<>(ids));
-        }
-        Message<Void> message = new Message<>();
-        return ResponseEntity.ok(message);
-    }
-
-    @GetMapping("manage")
-    @Operation(summary = "Start the managed monitoring items in batches according to the monitoring ID list",
-            description = "根据监控ID列表批量启动纳管监控项")
-    public ResponseEntity<Message<Void>> enableManageMonitors(
-            @Parameter(description = "Monitor ID List | 监控ID列表", example = "6565463543") @RequestParam(required = false) List<Long> ids
-    ) {
-        if (ids != null && !ids.isEmpty()) {
-            monitorService.enableManageMonitors(new HashSet<>(ids));
-        }
-        Message<Void> message = new Message<>();
-        return ResponseEntity.ok(message);
-    }
-
-    @GetMapping("/export")
-    @Operation(summary = "export monitor config", description = "导出监控配置")
-    public void export(
-            @Parameter(description = "Monitor ID List | 监控ID列表", example = "6565463543") @RequestParam List<Long> ids,
-            @Parameter(description = "Export Type:JSON,EXCEL,YAML") @RequestParam(defaultValue = "JSON") String type,
-            HttpServletResponse res) throws Exception {
-        monitorService.export(ids, type, res);
-    }
-
-    @PostMapping("/import")
-    @Operation(summary = "import monitor config", description = "导入监控配置")
-    public ResponseEntity<Message<Void>> export(MultipartFile file) throws Exception {
-        monitorService.importConfig(file);
-        return ResponseEntity.ok(new Message<>("Import success"));
-    }
-
-
-    @PostMapping("/copy")
-    @Operation(summary = "copy monitors by ids", description = "根据id批量复制monitor")
-    public ResponseEntity<Message<Void>> duplicateMonitors(
-            @Parameter(description = "Monitor ID List | 监控ID列表", example = "6565463543") @RequestParam List<Long> ids
-    ) throws Exception {
-        if (ids != null && !ids.isEmpty()) {
-            monitorService.copyMonitors(ids);
-        }
-        return ResponseEntity.ok(new Message<>("copy success"));
-    }
-
-
-
-
-
+	
+	private static final byte ALL_MONITOR_STATUS = 9;
+	
+	@Autowired
+	private MonitorService monitorService;
+	
+	@GetMapping
+	@Operation(summary = "Obtain a list of monitoring information based on query filter items",
+			description = "根据查询过滤项获取监控信息列表")
+	public ResponseEntity<Message<Page<Monitor>>> getMonitors(
+			@Parameter(description = "Monitor ID | 监控ID", example = "6565463543") @RequestParam(required = false) final List<Long> ids,
+			@Parameter(description = "Monitor Type | 监控类型", example = "linux") @RequestParam(required = false) final String app,
+			@Parameter(description = "Monitor Name | 监控名称，模糊查询", example = "linux-127.0.0.1") @RequestParam(required = false) final String name,
+			@Parameter(description = "Monitor Host | 监控Host，模糊查询", example = "127.0.0.1") @RequestParam(required = false) final String host,
+			@Parameter(description = "Monitor Status | 监控状态 0:未监控,1:可用,2:不可用,3:不可达,4:挂起,9:全部状态", example = "1") @RequestParam(required = false) final Byte status,
+			@Parameter(description = "Sort Field | 排序字段", example = "name") @RequestParam(defaultValue = "gmtCreate") final String sort,
+			@Parameter(description = "Sort by | 排序方式，asc:升序，desc:降序", example = "desc") @RequestParam(defaultValue = "desc") final String order,
+			@Parameter(description = "List current page | 列表当前分页", example = "0") @RequestParam(defaultValue = "0") int pageIndex,
+			@Parameter(description = "Number of list pagination | 列表分页数量", example = "8") @RequestParam(defaultValue = "8") int pageSize,
+			@Parameter(description = "Monitor tag | 监控标签", example = "env:prod") @RequestParam(required = false) final String tag) {
+		Specification<Monitor> specification = (root, query, criteriaBuilder) -> {
+			List<Predicate> andList = new ArrayList<>();
+			if (ids != null && !ids.isEmpty()) {
+				CriteriaBuilder.In<Long> inPredicate = criteriaBuilder.in(root.get("id"));
+				for (long id : ids) {
+					inPredicate.value(id);
+				}
+				andList.add(inPredicate);
+			}
+			if (StringUtils.hasText(app)) {
+				Predicate predicateApp = criteriaBuilder.equal(root.get("app"), app);
+				andList.add(predicateApp);
+			}
+			if (status != null && status >= 0 && status < ALL_MONITOR_STATUS) {
+				Predicate predicateStatus = criteriaBuilder.equal(root.get("status"), status);
+				andList.add(predicateStatus);
+			}
+			
+			if (StringUtils.hasText(tag)) {
+				String[] tagArr = tag.split(":");
+				String tagName = tagArr[0];
+				String tagValue = tagArr[1];
+				ListJoin<Monitor, org.dromara.hertzbeat.common.entity.manager.Tag> tagJoin = root
+						.join(root.getModel()
+								.getList("tags", org.dromara.hertzbeat.common.entity.manager.Tag.class), JoinType.LEFT);
+				if (tagArr.length == 2) {
+					andList.add(criteriaBuilder.equal(tagJoin.get("name"), tagName));
+					andList.add(criteriaBuilder.equal(tagJoin.get("value"), tagValue));
+				} else {
+					andList.add(criteriaBuilder.equal(tagJoin.get("name"), tag));
+				}
+			}
+			Predicate[] andPredicates = new Predicate[andList.size()];
+			Predicate andPredicate = criteriaBuilder.and(andList.toArray(andPredicates));
+			
+			List<Predicate> orList = new ArrayList<>();
+			if (StringUtils.hasText(host)) {
+				Predicate predicateHost = criteriaBuilder.like(root.get("host"), "%" + host + "%");
+				orList.add(predicateHost);
+			}
+			if (StringUtils.hasText(name)) {
+				Predicate predicateName = criteriaBuilder.like(root.get("name"), "%" + name + "%");
+				orList.add(predicateName);
+			}
+			Predicate[] orPredicates = new Predicate[orList.size()];
+			Predicate orPredicate = criteriaBuilder.or(orList.toArray(orPredicates));
+			
+			if (andPredicate.getExpressions().isEmpty() && orPredicate.getExpressions().isEmpty()) {
+				return query.where().getRestriction();
+			} else if (andPredicate.getExpressions().isEmpty()) {
+				return query.where(orPredicate).getRestriction();
+			} else if (orPredicate.getExpressions().isEmpty()) {
+				return query.where(andPredicate).getRestriction();
+			} else {
+				return query.where(andPredicate, orPredicate).getRestriction();
+			}
+		};
+		// Pagination is a must         分页是必须的
+		Sort sortExp = Sort.by(new Sort.Order(Sort.Direction.fromString(order), sort));
+		PageRequest pageRequest = PageRequest.of(pageIndex, pageSize, sortExp);
+		Page<Monitor> monitorPage = monitorService.getMonitors(specification, pageRequest);
+		Message<Page<Monitor>> message = new Message<>(monitorPage);
+		return ResponseEntity.ok(message);
+	}
+	
+	@GetMapping(path = "/{app}")
+	@Operation(summary = "Filter all acquired monitoring information lists of the specified monitoring type according to the query",
+			description = "根据查询过滤指定监控类型的所有获取监控信息列表")
+	public ResponseEntity<Message<List<Monitor>>> getAppMonitors(
+			@Parameter(description = "en: Monitoring type,zh: 监控类型", example = "linux") @PathVariable(required = false) final String app) {
+		List<Monitor> monitors = monitorService.getAppMonitors(app);
+		Message<List<Monitor>> message = new Message<>(monitors);
+		return ResponseEntity.ok(message);
+	}
+	
+	@DeleteMapping
+	@Operation(summary = "Delete monitoring items in batches according to the monitoring ID list",
+			description = "根据监控ID列表批量删除监控项")
+	public ResponseEntity<Message<Void>> deleteMonitors(
+			@Parameter(description = "en: Monitoring ID List,zh: 监控ID列表", example = "6565463543") @RequestParam(required = false) List<Long> ids
+	) {
+		if (ids != null && !ids.isEmpty()) {
+			monitorService.deleteMonitors(new HashSet<>(ids));
+		}
+		Message<Void> message = new Message<>();
+		return ResponseEntity.ok(message);
+	}
+	
+	@DeleteMapping("manage")
+	@Operation(summary = "Unmanaged monitoring items in batches according to the monitoring ID list",
+			description = "根据监控ID列表批量取消纳管监控项")
+	public ResponseEntity<Message<Void>> cancelManageMonitors(
+			@Parameter(description = "en: Monitoring ID List,zh: 监控ID列表", example = "6565463543") @RequestParam(required = false) List<Long> ids
+	) {
+		if (ids != null && !ids.isEmpty()) {
+			monitorService.cancelManageMonitors(new HashSet<>(ids));
+		}
+		Message<Void> message = new Message<>();
+		return ResponseEntity.ok(message);
+	}
+	
+	@GetMapping("manage")
+	@Operation(summary = "Start the managed monitoring items in batches according to the monitoring ID list",
+			description = "根据监控ID列表批量启动纳管监控项")
+	public ResponseEntity<Message<Void>> enableManageMonitors(
+			@Parameter(description = "Monitor ID List | 监控ID列表", example = "6565463543") @RequestParam(required = false) List<Long> ids
+	) {
+		if (ids != null && !ids.isEmpty()) {
+			monitorService.enableManageMonitors(new HashSet<>(ids));
+		}
+		Message<Void> message = new Message<>();
+		return ResponseEntity.ok(message);
+	}
+	
+	@GetMapping("/export")
+	@Operation(summary = "export monitor config", description = "导出监控配置")
+	public void export(
+			@Parameter(description = "Monitor ID List | 监控ID列表", example = "6565463543") @RequestParam List<Long> ids,
+			@Parameter(description = "Export Type:JSON,EXCEL,YAML") @RequestParam(defaultValue = "JSON") String type,
+			HttpServletResponse res) throws Exception {
+		monitorService.export(ids, type, res);
+	}
+	
+	@PostMapping("/import")
+	@Operation(summary = "import monitor config", description = "导入监控配置")
+	public ResponseEntity<Message<Void>> export(MultipartFile file) throws Exception {
+		monitorService.importConfig(file);
+		return ResponseEntity.ok(new Message<>("Import success"));
+	}
+	
+	
+	@PostMapping("/copy")
+	@Operation(summary = "copy monitors by ids", description = "根据id批量复制monitor")
+	public ResponseEntity<Message<Void>> duplicateMonitors(
+			@Parameter(description = "Monitor ID List | 监控ID列表", example = "6565463543") @RequestParam List<Long> ids
+	) throws Exception {
+		if (ids != null && !ids.isEmpty()) {
+			monitorService.copyMonitors(ids);
+		}
+		return ResponseEntity.ok(new Message<>("copy success"));
+	}
+	
+	
 }
diff --git a/web-app/src/app/layout/basic/widgets/search.component.ts b/web-app/src/app/layout/basic/widgets/search.component.ts
index 72277e9e6eb..0e72cdcb2b9 100644
--- 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
index afc3bb2ac57..c8ee888c3e2 100644
--- 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
index e3f75490e39..9015fb87e69 100644
--- 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
index b36bd428c99..00f96e9b457 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
@@ -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
index e77c82a97f0..4b98e0782f8 100644
--- 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
index 40a89da92b9..48b1f8c2451 100644
--- 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
index 574a63bd53f..1dc13644af7 100644
--- a/web-app/src/app/routes/setting/tags/tags.component.html
+++ b/web-app/src/app/routes/setting/tags/tags.component.html
@@ -66,10 +66,10 @@
   <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>
@@ -77,16 +77,17 @@
   <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
index 435ebb36ef7..7e201689366 100644
--- 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
index 4dfbd25be5f..022c8b8ed5c 100644
--- 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
new file mode 100644
index 00000000000..f2a6dc58f1f
--- /dev/null
+++ 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
index 9cc2661defe..3193bb66ca1 100644
--- 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": "应用服务",
diff --git a/web-app/src/assets/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json
index c558d393067..1111ec73f34 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -9,6 +9,7 @@
     "clear.local.storage": "Clear Local Storage",
     "monitor": {
       "": "Monitor",
+      "center": "Monitor Center",
       "service": "Service Monitor",
       "db": "DB Monitor",
       "os": "OS Monitor",
@@ -151,8 +152,8 @@
   "alert.center.deal": "Mark Processed",
   "alert.center.no-deal": "Mark Pending",
   "alert.center.search": "Search Alert Content",
-  "alert.center.filter-status": "Filter Alert Status",
-  "alert.center.filter-priority": "Filter Alert Priority",
+  "alert.center.filter-status": "Alert Status",
+  "alert.center.filter-priority": "Alert Priority",
   "alert.center.target": "Metric Target",
   "alert.center.monitor": "Belong Monitor",
   "alert.center.priority": "Priority",
@@ -264,7 +265,7 @@
   "monitors.export": "Export Monitor",
   "monitors.import": "Import Monitor",
   "monitors.search.placeholder": "Search Monitor",
-  "monitors.search.filter": "Filter Monitor Status",
+  "monitors.search.filter": "Monitor Status",
   "monitors.total": "Total",
   "monitors.advanced": "Advanced",
   "monitors.advanced.tip": "Setting Advanced Param",
diff --git a/web-app/src/assets/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json
index 1fcdd0b3931..489458dc0c4 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -9,6 +9,7 @@
     "clear.local.storage": "清理本地缓存",
     "monitor": {
       "": "监控",
+      "center": "监控中心",
       "service": "应用服务监控",
       "db": "数据库监控",
       "os": "操作系统监控",
@@ -151,8 +152,8 @@
   "alert.center.deal": "标记已处理",
   "alert.center.no-deal": "标记未处理",
   "alert.center.search": "搜索告警内容",
-  "alert.center.filter-status": "告警状态过滤",
-  "alert.center.filter-priority": "告警级别过滤",
+  "alert.center.filter-status": "告警状态",
+  "alert.center.filter-priority": "告警级别",
   "alert.center.target": "告警对象",
   "alert.center.monitor": "所属监控",
   "alert.center.priority": "级别",
@@ -266,7 +267,7 @@
   "monitors.export.use-type": "以 {{type}} 文件格式导出监控",
   "monitors.import": "导入监控",
   "monitors.search.placeholder": "搜索监控",
-  "monitors.search.filter": "监控状态过滤",
+  "monitors.search.filter": "监控状态",
   "monitors.total": "总量",
   "monitors.advanced": "高级设置",
   "monitors.advanced.tip": "设置高级可选参数",
diff --git a/web-app/src/assets/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json
index 0ff4cd25dd8..a5958b7ef69 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -9,6 +9,7 @@
     "clear.local.storage": "清理本地緩存",
     "monitor": {
       "": "監控",
+      "center": "監控中心",
       "service": "應用服務監控",
       "db": "數據庫監控",
       "os": "操作系統監控",
@@ -151,8 +152,8 @@
   "alert.center.deal": "標記已處理",
   "alert.center.no-deal": "標記未處理",
   "alert.center.search": "搜索告警內容",
-  "alert.center.filter-status": "告警狀態過濾",
-  "alert.center.filter-priority": "告警級別過濾",
+  "alert.center.filter-status": "告警狀態",
+  "alert.center.filter-priority": "告警級別",
   "alert.center.target": "告警對象",
   "alert.center.monitor": "所屬監控",
   "alert.center.priority": "級別",
@@ -264,7 +265,7 @@
   "monitors.export": "導出監控",
   "monitors.import": "導入監控",
   "monitors.search.placeholder": "搜索監控",
-  "monitors.search.filter": "監控狀態過濾",
+  "monitors.search.filter": "監控狀態",
   "monitors.total": "總量",
   "monitors.advanced": "高級設置",
   "monitors.advanced.tip": "設置高級可選參數",