add collector card in dashboard (#1147)

apache · Mar 10, 2024 · 5a03122 · 5a03122
1 parent 2d4c3d0
commit 5a03122
Show file tree

Hide file tree

Showing 18 changed files with 256 additions and 60 deletions.
diff --git a/common/src/main/java/org/dromara/hertzbeat/common/entity/dto/CollectorSummary.java b/common/src/main/java/org/dromara/hertzbeat/common/entity/dto/CollectorSummary.java
@@ -0,0 +1,29 @@
+package org.dromara.hertzbeat.common.entity.dto;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+import org.dromara.hertzbeat.common.entity.manager.Collector;
+
+/**
+ * collector summary
+ * @author tom
+ */
+@Data
+@Builder
+@AllArgsConstructor
+@NoArgsConstructor
+@Schema(description = "collector summary")
+public class CollectorSummary {
+
+    @Schema(description = "the collector info")
+    private Collector collector;
+
+    @Schema(description = "the number of monitors pinned in this collector")
+    private int pinMonitorNum;
+
+    @Schema(description = "the number of monitors dispatched in this collector")
+    private int dispatchMonitorNum;
+}
diff --git a/home/static/img/home/1.png b/home/static/img/home/1.png
diff --git a/home/static/img/home/9.png b/home/static/img/home/9.png
diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/controller/CollectorController.java b/manager/src/main/java/org/dromara/hertzbeat/manager/controller/CollectorController.java
@@ -20,10 +20,13 @@
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.tags.Tag;
+import org.dromara.hertzbeat.common.entity.dto.CollectorSummary;
 import org.dromara.hertzbeat.common.entity.dto.Message;
 import org.dromara.hertzbeat.common.entity.manager.Collector;
 import org.dromara.hertzbeat.manager.service.CollectorService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
 import org.springframework.data.jpa.domain.Specification;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -32,7 +35,6 @@
 import org.springframework.web.bind.annotation.RestController;
 
 import javax.persistence.criteria.Predicate;
-import java.util.List;
 
 import static org.springframework.http.MediaType.APPLICATION_JSON_VALUE;
 
@@ -51,8 +53,13 @@ public class CollectorController {
     @GetMapping
     @Operation(summary = "Get a list of collectors based on query filter items",
             description = "根据查询过滤项获取采集器列表")
-    public ResponseEntity<Message<List<Collector>>> getCollectors(
-            @Parameter(description = "collector name", example = "tom") @RequestParam(required = false) final String name) {
+    public ResponseEntity<Message<Page<CollectorSummary>>> getCollectors(
+            @Parameter(description = "collector name", example = "tom") @RequestParam(required = false) final String name,
+            @Parameter(description = "List current page | 列表当前分页", example = "0") @RequestParam(defaultValue = "0") int pageIndex,
+            @Parameter(description = "Number of list pagination | 列表分页数量", example = "8") @RequestParam(required = false) Integer pageSize) {
+        if (pageSize == null) {
+            pageSize = Integer.MAX_VALUE;
+        }
         Specification<Collector> specification = (root, query, criteriaBuilder) -> {
             Predicate predicate = criteriaBuilder.conjunction();
             if (name != null && !"".equals(name)) {
@@ -61,8 +68,9 @@ public ResponseEntity<Message<List<Collector>>> getCollectors(
             }
             return predicate;
         };
-        List<Collector> receivers = collectorService.getCollectors(specification);
-        Message<List<Collector>> message = new Message<>(receivers);
+        PageRequest pageRequest = PageRequest.of(pageIndex, pageSize);
+        Page<CollectorSummary> receivers = collectorService.getCollectors(specification, pageRequest);
+        Message<Page<CollectorSummary>> message = new Message<>(receivers);
         return ResponseEntity.ok(message);
     }
 }
diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/service/CollectorService.java b/manager/src/main/java/org/dromara/hertzbeat/manager/service/CollectorService.java
@@ -1,10 +1,11 @@
 package org.dromara.hertzbeat.manager.service;
 
+import org.dromara.hertzbeat.common.entity.dto.CollectorSummary;
 import org.dromara.hertzbeat.common.entity.manager.Collector;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
 import org.springframework.data.jpa.domain.Specification;
 
-import java.util.List;
-
 /**
  * collector service
  * @author tom
@@ -13,9 +14,11 @@ public interface CollectorService {
 
     /**
      * Dynamic conditional query
-     * @param specification Query conditions   
-     * @return Search result   
+     *
+     * @param specification Query conditions
+     * @param pageRequest pageIndex pageSize
+     * @return Search result
      */
-    List<Collector> getCollectors(Specification<Collector> specification);
+    Page<CollectorSummary> getCollectors(Specification<Collector> specification, PageRequest pageRequest);
 
 }
diff --git a/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/CollectorServiceImpl.java b/manager/src/main/java/org/dromara/hertzbeat/manager/service/impl/CollectorServiceImpl.java
@@ -1,12 +1,19 @@
 package org.dromara.hertzbeat.manager.service.impl;
 
+import org.dromara.hertzbeat.common.entity.dto.CollectorSummary;
 import org.dromara.hertzbeat.common.entity.manager.Collector;
 import org.dromara.hertzbeat.manager.dao.CollectorDao;
+import org.dromara.hertzbeat.manager.scheduler.AssignJobs;
+import org.dromara.hertzbeat.manager.scheduler.ConsistentHash;
 import org.dromara.hertzbeat.manager.service.CollectorService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.PageRequest;
 import org.springframework.data.jpa.domain.Specification;
 import org.springframework.stereotype.Service;
 
+import java.util.LinkedList;
 import java.util.List;
 
 /**
@@ -19,8 +26,23 @@ public class CollectorServiceImpl implements CollectorService {
     @Autowired
     private CollectorDao collectorDao;
 
+    @Autowired
+    private ConsistentHash consistentHash;
+
     @Override
-    public List<Collector> getCollectors(Specification<Collector> specification) {
-        return collectorDao.findAll(specification);
+    public Page<CollectorSummary> getCollectors(Specification<Collector> specification, PageRequest pageRequest) {
+        Page<Collector> collectors = collectorDao.findAll(specification, pageRequest);
+        List<CollectorSummary> collectorSummaryList = new LinkedList<>();
+        for (Collector collector : collectors.getContent()) {
+            CollectorSummary.CollectorSummaryBuilder summaryBuilder = CollectorSummary.builder().collector(collector);
+            ConsistentHash.Node node = consistentHash.getNode(collector.getName());
+            if (node != null && node.getAssignJobs() != null) {
+                AssignJobs assignJobs = node.getAssignJobs();
+                summaryBuilder.pinMonitorNum(assignJobs.getPinnedJobs().size());
+                summaryBuilder.dispatchMonitorNum(assignJobs.getJobs().size());
+            }
+            collectorSummaryList.add(summaryBuilder.build());
+        }
+        return new PageImpl<>(collectorSummaryList, pageRequest, collectors.getTotalElements());
     }
 }
diff --git a/manager/src/main/resources/sureness.yml b/manager/src/main/resources/sureness.yml
@@ -50,6 +50,7 @@ resourceRole:
   - /api/summary/**===post===[admin,user]
   - /api/summary/**===put===[admin,user]
   - /api/summary/**===delete===[admin]
+  - /api/collector/**===get===[admin,user,guest]
 
 # 需要被过滤保护的资源,不认证鉴权直接访问
 # /api/v1/source3===get 表示 /api/v1/source3===get 可以被任何人访问 无需登录认证鉴权

diff --git a/web-app/src/app/pojo/CollectorSummary.ts b/web-app/src/app/pojo/CollectorSummary.ts
@@ -0,0 +1,7 @@
+import { Collector } from './Collector';
+
+export class CollectorSummary {
+  collector!: Collector;
+  pinMonitorNum!: number;
+  dispatchMonitorNum!: number;
+}
diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html
@@ -1,5 +1,5 @@
 <div nz-row nzGutter="16" style="margin-top: 70px">
-  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md hoverCard">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 12 }" [nzMd]="{ span: 6 }" class="mb-md hoverCard">
     <a [routerLink]="['/monitors']" [queryParams]="{ app: 'website' }">
       <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
         <div nz-col nzSpan="9" class="p-md text-white">
@@ -25,7 +25,7 @@
       </div>
     </a>
   </div>
-  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md hoverCard">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 12 }" [nzMd]="{ span: 6 }" class="mb-md hoverCard">
     <a [routerLink]="['/monitors']" [queryParams]="{ app: 'mysql' }">
       <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
         <div nz-col nzSpan="9" class="p-md text-white">
@@ -49,7 +49,7 @@
       </div>
     </a>
   </div>
-  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md hoverCard">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 12 }" [nzMd]="{ span: 6 }" class="mb-md hoverCard">
     <a [routerLink]="['/monitors']" [queryParams]="{ app: 'linux' }">
       <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
         <div nz-col nzSpan="9" class="p-md text-white">
@@ -73,7 +73,7 @@
       </div>
     </a>
   </div>
-  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md hoverCard">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 12 }" [nzMd]="{ span: 6 }" class="mb-md hoverCard">
     <a [routerLink]="['/monitors']" [queryParams]="{ app: 'kafka' }">
       <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
         <div nz-col nzSpan="9" class="p-md text-white">
@@ -100,19 +100,77 @@
   </div>
 </div>
 
-<div
-  echarts
-  [options]="appsCountEChartOption"
-  theme="default"
-  [autoResize]="true"
-  [loading]="appsCountLoading"
-  (chartClick)="onChartClick($event)"
-  (chartInit)="onAppsCountChartInit($event)"
-  style="width: 100%; height: 400px; margin-top: 1%"
-></div>
+<div nz-row nzGutter="16" style="margin-top: 25px; height: 400px">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 12, offset: 6 }" style="height: 100%">
+    <div
+      echarts
+      [options]="appsCountEChartOption"
+      theme="default"
+      [autoResize]="true"
+      [loading]="appsCountLoading"
+      (chartClick)="onChartClick($event)"
+      (chartInit)="onAppsCountChartInit($event)"
+      style="width: 100%; height: inherit"
+    ></div>
+  </div>
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }" style="height: 100%">
+    <div style="overflow-y: scroll; 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>
+        <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>
+    </div>
+  </div>
+</div>
 
 <div nz-row nzGutter="16" style="margin-top: 25px; height: 320px">
-  <div nz-col nzXs="24" nzSm="24" nzMd="12" class="mb-md" style="height: 100%">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 12 }" class="mb-md" style="height: 100%">
     <nz-card nzHoverable [nzTitle]="alertCardTitleTemplate" [nzExtra]="extraTemplate" style="height: inherit; overflow-y: scroll">
       <nz-timeline nzMode="left">
         <nz-timeline-item
@@ -139,7 +197,7 @@
       </nz-timeline>
     </nz-card>
   </div>
-  <div nz-col nzXs="24" nzSm="12" nzMd="7" class="mb-md" style="height: 100%">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 12 }" [nzMd]="{ span: 7 }" class="mb-md" style="height: 100%">
     <div
       echarts
       [options]="alertsEChartOption"
@@ -151,7 +209,7 @@
       class="ant-card ant-card-bordered ant-card-hoverable"
     ></div>
   </div>
-  <div nz-col nzXs="24" nzSm="12" nzMd="5" class="mb-md" style="height: 100%">
+  <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 12 }" [nzMd]="{ span: 5 }" class="mb-md" style="height: 100%">
     <div
       echarts
       [options]="alertsDealEChartOption"