[web-app] 监控项数据详情编码

manager/src/main/java/com/usthe/manager/pojo/dto/MonitorDto.java

@@ -39,8 +39,6 @@ public class MonitorDto {
     private List<Param> params;
 
     @ApiModelProperty(value = "指标组列表", accessMode = READ_ONLY, position = 2)
-    @NotNull
-    @Valid
     private List<String> metrics;
 
     /**

web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html

@@ -0,0 +1,31 @@
+<nz-card *ngIf="isTable" nzHoverable style="height:auto;margin-left: 14px;" [nzBordered]="true"
+         [nzTitle]="monitor_metrics_card_title" >
+  <nz-table #smallTable nzSize="small" nzNoResult="No Metrics Data" nzFrontPagination="false" [nzData]="valueRows">
+    <thead>
+    <tr>
+      <th>instanceId</th>
+      <th *ngFor="let field of fields">{{field.name}}</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let valueRow of smallTable.data">
+      <td>{{valueRow.instance || ''}}</td>
+      <td *ngFor="let value of valueRow.values">{{ value.origin}}</td>
+    </tr>
+    </tbody>
+  </nz-table>
+</nz-card>
+
+<nz-card *ngIf="!isTable" nzHoverable style="height:auto;margin-left: 14px;" [nzBordered]="true"
+         [nzTitle]="monitor_metrics_card_title" >
+  <div *ngFor="let field of fields;let i = index;" nz-row nzGutter="16">
+    <div nz-col nzSpan="10"><p style="text-align: right">{{field.name}}</p></div>
+    <div nz-col nzSpan="14"><p style="text-align: left">{{rowValues[i].origin}}</p></div>
+  </div>
+</nz-card>
+
+<ng-template #monitor_metrics_card_title>
+  <p style="font-size: small; text-align: center; margin-bottom: 3px; color: #0c0c0c">{{metric}}</p>
+  <a nz-popover [nzPopoverContent]="'采集时间' + time"> <i nz-icon nzType="field-time" nzTheme="outline"></i></a>
+  <p style="font-size: 0.3px; font-weight: normal; text-align: left; margin-bottom: 1px; color: rgba(84,83,83,0.89)">采集时间:{{time}}</p>
+</ng-template>

web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less

@@ -0,0 +1,3 @@
+p {
+  font-size: xx-small;
+}

web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonitorDataChartComponent } from './monitor-data-chart.component';
+
+describe('MonitorDataChartComponent', () => {
+  let component: MonitorDataChartComponent;
+  let fixture: ComponentFixture<MonitorDataChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MonitorDataChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MonitorDataChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts

@@ -0,0 +1,71 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MonitorService} from "../../../service/monitor.service";
+import {finalize} from "rxjs/operators";
+
+@Component({
+  selector: 'app-monitor-data-chart',
+  templateUrl: './monitor-data-chart.component.html',
+  styleUrls: ['./monitor-data-chart.component.less']
+})
+export class MonitorDataChartComponent implements OnInit {
+
+  @Input()
+  get monitorId(): number { return this._monitorId; }
+  set monitorId(monitorId: number) {
+    this._monitorId = monitorId;
+    this.loadData();
+  }
+  private _monitorId!: number;
+  @Input()
+  metric!: string;
+
+  time!: any;
+  fields!: any[];
+  valueRows!: any[];
+  rowValues!: any[];
+  isTable: boolean = true;
+
+  constructor(private monitorSvc: MonitorService) { }
+  ngOnInit(): void {}
+
+  loadData() {
+    // 读取实时指标数据
+    let metricData$ = this.monitorSvc.getMonitorMetricData(this.monitorId, this.metric)
+      .subscribe(message => {
+        metricData$.unsubscribe();
+        if (message.code === 0) {
+          this.time = message.data.time;
+          this.fields = message.data.fields;
+          this.valueRows = message.data.valueRows;
+          if (this.valueRows.length == 1) {
+            this.isTable = false;
+            this.rowValues = this.valueRows[0].values;
+          }
+        } else {
+          console.error(message.msg);
+        }
+      }, error => {
+        metricData$.unsubscribe();
+      })
+  }
+
+
+  data = [
+    {
+      name: 'John Brown',
+      age: 32,
+      address: 'New York No. 1 Lake Park'
+    },
+    {
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park'
+    }
+  ];
+
+}

web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html

@@ -18,4 +18,66 @@
 </nz-breadcrumb>
 <nz-divider></nz-divider>
 
-<div echarts [options]="options" class="demo-chart"></div>
+<nz-layout>
+  <nz-sider nzWidth="19%" nzTheme="light">
+    <nz-card nzHoverable style="width:100%;height:100%" [nzBordered]="true" [nzTitle]="monitor_basic_card_title" >
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">ID</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitorId}}</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">名称</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.name}}</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">HOST</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.host}}</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">端口</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{port}}</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">描述</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.description}}</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">状态</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.status}}</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">采集间隔</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.intervals}}s</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">创建时间</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.gmtCreate}}</p></div>
+      </div>
+      <div nz-row nzGutter="16">
+        <div nz-col nzSpan="8"><p style="text-align: right">最近更新时间</p></div>
+        <div nz-col nzSpan="16"><p style="text-align: left">{{monitor?.gmtUpdate}}</p></div>
+      </div>
+    </nz-card>
+  </nz-sider>
+  <nz-layout>
+    <nz-content>
+      <nz-tabset nzType="card">
+        <nz-tab [nzTitle]="titleTemplate">
+          <ng-template #titleTemplate>
+            <i nz-icon nzType="pic-right" style="margin-left: 10px"></i>
+            监控数据报告详情
+          </ng-template>
+          <div style="display: flex;justify-content:flex-start;flex-wrap: wrap;">
+            <div *ngFor="let metric of metrics; let i = index">
+              <app-monitor-data-chart [metric]="metric" [monitorId]="monitorId"></app-monitor-data-chart>
+            </div>
+          </div>
+        </nz-tab>
+      </nz-tabset>
+    </nz-content>
+  </nz-layout>
+</nz-layout>
+
+<ng-template #monitor_basic_card_title>
+  <p style="font-size: small; text-align: left; margin-bottom: 3px; color: #0c0c0c">监控基本属性</p>
+</ng-template>

web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.less

@@ -0,0 +1,28 @@
+nz-sider {
+  background: #f5f7fa;
+  color: rgba(131, 61, 176, 0.51);
+  line-height: 120px;
+  margin-right: 15px;
+  height: 100%;
+}
+
+nz-content {
+  background: #fff;
+  color: rgba(131, 61, 176, 0.51);
+  min-height: 100%;
+  line-height: 120px;
+}
+
+nz-layout {
+  margin-bottom: 10px;
+  height: 100%;
+  background: #f5f7fa;
+}
+
+nz-layout:last-child {
+  margin: 0;
+}
+
+p {
+  font-size: xx-small;
+}

web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts

@@ -3,15 +3,13 @@ import {MonitorService} from "../../../service/monitor.service";
 import {ActivatedRoute, ParamMap, Router} from "@angular/router";
 import {TitleService} from "@delon/theme";
 import {switchMap} from "rxjs/operators";
-import {Message} from "../../../pojo/Message";
 import {Param} from "../../../pojo/Param";
-import {throwError} from "rxjs";
+import {Monitor} from "../../../pojo/Monitor";
 
 @Component({
   selector: 'app-monitor-detail',
   templateUrl: './monitor-detail.component.html',
-  styles: [
-  ]
+  styleUrls: ['./monitor-detail.component.less']
 })
 export class MonitorDetailComponent implements OnInit {
 
@@ -22,67 +20,38 @@ export class MonitorDetailComponent implements OnInit {
   isSpinning: boolean = false
   monitorId!: number;
   app: string | undefined;
-
+  monitor: Monitor | undefined;
   options: any;
+  port: number | undefined;
+  metrics!: string[];
 
   ngOnInit(): void {
     this.route.paramMap.pipe(
       switchMap((paramMap: ParamMap) => {
-        this.isSpinning = false;
+        this.isSpinning = true;
         let id = paramMap.get("monitorId");
         this.monitorId = Number(id);
         // 查询监控指标组结构信息
         return this.monitorSvc.getMonitor(this.monitorId);
       })
     ).subscribe(message => {
+      this.isSpinning = false;
       if (message.code === 0) {
-
+        this.monitor = message.data.monitor;
+        this.app = this.monitor?.app;
+        let params: Param[] = message.data.params;
+        // 取出端口信息
+        params.forEach(param => {
+          if (param.field === 'port') {
+            this.port = Number(param.value);
+          }
+        })
+        this.metrics = message.data.metrics;
       } else {
         console.warn(message.msg);
       }
+    }, error => {
+      this.isSpinning = false;
     });
-
-
-    const xAxisData = [];
-    const data1 = [];
-    const data2 = [];
-
-    for (let i = 0; i < 10; i++) {
-      xAxisData.push('category' + i);
-      data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
-      data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
-    }
-
-    this.options = {
-      legend: {
-        data: ['bar', 'bar2'],
-        align: 'left',
-      },
-      tooltip: {},
-      xAxis: {
-        data: xAxisData,
-        silent: false,
-        splitLine: {
-          show: false,
-        },
-      },
-      yAxis: {},
-      series: [
-        {
-          name: 'bar',
-          type: 'bar',
-          data: data1,
-          animationDelay: (idx: number) => idx * 10,
-        },
-        {
-          name: 'bar2',
-          type: 'bar',
-          data: data2,
-          animationDelay: (idx: number) => idx * 10 + 100,
-        },
-      ],
-      animationEasing: 'elasticOut',
-      animationDelayUpdate: (idx: number) => idx * 5,
-    };
   }
 }

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html

@@ -134,7 +134,7 @@
         <nz-form-label [nzSpan]="7" nzFor= 'description'>描述备注</nz-form-label>
         <nz-form-control [nzSpan]="8">
           <nz-textarea-count [nzMaxCharacterCount]="100">
-            <textarea rows="3" nz-input name="description" id="description"></textarea>
+            <textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
           </nz-textarea-count>
         </nz-form-control>
       </nz-form-item >

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html

@@ -135,7 +135,7 @@
         <nz-form-label [nzSpan]="7" nzFor= 'description'>描述备注</nz-form-label>
         <nz-form-control [nzSpan]="8">
           <nz-textarea-count [nzMaxCharacterCount]="100">
-            <textarea rows="3" nz-input name="description" id="description"></textarea>
+            <textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
           </nz-textarea-count>
         </nz-form-control>
       </nz-form-item >

web-app/src/app/routes/monitor/monitor.module.ts

@@ -11,25 +11,31 @@ import {NzSwitchModule} from "ng-zorro-antd/switch";
 import {NzTagModule} from "ng-zorro-antd/tag";
 import {NzRadioModule} from "ng-zorro-antd/radio";
 import {NgxEchartsModule} from "ngx-echarts";
+import {NzLayoutModule} from "ng-zorro-antd/layout";
+import {NzSpaceModule} from "ng-zorro-antd/space";
+import {MonitorDataChartComponent} from "./monitor-data-chart/monitor-data-chart.component";
 
 const COMPONENTS: Type<void>[] = [
   MonitorNewComponent,
   MonitorEditComponent,
   MonitorListComponent,
-  MonitorDetailComponent
+  MonitorDetailComponent,
+  MonitorDataChartComponent
 ];
 
 @NgModule({
-    imports: [
-        SharedModule,
-        MonitorRoutingModule,
-        NzBreadCrumbModule,
-        NzDividerModule,
-        NzSwitchModule,
-        NzTagModule,
-        NzRadioModule,
-        NgxEchartsModule
-    ],
+  imports: [
+    SharedModule,
+    MonitorRoutingModule,
+    NzBreadCrumbModule,
+    NzDividerModule,
+    NzSwitchModule,
+    NzTagModule,
+    NzRadioModule,
+    NgxEchartsModule,
+    NzLayoutModule,
+    NzSpaceModule
+  ],
   declarations: COMPONENTS,
 })
 export class MonitorModule { }

web-app/src/app/service/monitor.service.ts

@@ -83,4 +83,7 @@ export class MonitorService {
     return this.http.get<Message<Page<Monitor>>>(monitors_uri, options);
   }
 
+  public getMonitorMetricData(monitorId: number, metric: string) : Observable<Message<any>> {
+    return this.http.get<Message<any>>(`/monitors/${monitorId}/metrics/${metric}`);
+  }
 }