diff --git a/manager/src/main/java/com/usthe/manager/pojo/dto/MonitorDto.java b/manager/src/main/java/com/usthe/manager/pojo/dto/MonitorDto.java index 45ba02c..5e677e0 100644 --- a/manager/src/main/java/com/usthe/manager/pojo/dto/MonitorDto.java +++ b/manager/src/main/java/com/usthe/manager/pojo/dto/MonitorDto.java @@ -39,8 +39,6 @@ public class MonitorDto { private List params; @ApiModelProperty(value = "指标组列表", accessMode = READ_ONLY, position = 2) - @NotNull - @Valid private List metrics; /** diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html new file mode 100644 index 0000000..1dc069b --- /dev/null +++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html @@ -0,0 +1,31 @@ + + + + + instanceId + {{field.name}} + + + + + {{valueRow.instance || ''}} + {{ value.origin}} + + + + + + +
+

{{field.name}}

+

{{rowValues[i].origin}}

+
+ + + +

{{metric}}

+ +

采集时间:{{time}}

+ diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less new file mode 100644 index 0000000..4af969a --- /dev/null +++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.less @@ -0,0 +1,3 @@ +p { + font-size: xx-small; +} diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.spec.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.spec.ts new file mode 100644 index 0000000..599eaa4 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MonitorDataChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MonitorDataChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts new file mode 100644 index 0000000..bded980 --- /dev/null +++ b/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' + } + ]; + +} diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html index 596d8a8..77bb458 100644 --- a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html +++ b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html @@ -18,4 +18,66 @@ -
+ + + +
+

ID

+

{{monitorId}}

+
+
+

名称

+

{{monitor?.name}}

+
+
+

HOST

+

{{monitor?.host}}

+
+
+

端口

+

{{port}}

+
+
+

描述

+

{{monitor?.description}}

+
+
+

状态

+

{{monitor?.status}}

+
+
+

采集间隔

+

{{monitor?.intervals}}s

+
+
+

创建时间

+

{{monitor?.gmtCreate}}

+
+
+

最近更新时间

+

{{monitor?.gmtUpdate}}

+
+ + + + + + + + + 监控数据报告详情 + +
+
+ +
+
+ + + + + + + +

监控基本属性

+ diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.less b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.less new file mode 100644 index 0000000..10b4627 --- /dev/null +++ b/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; +} diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts index 947dec5..67421f3 100644 --- a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts +++ b/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, - }; } } diff --git a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html index f9daf74..9cbf363 100644 --- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html +++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html @@ -134,7 +134,7 @@ 描述备注 - + diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html index 97bb375..d53ce83 100644 --- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html +++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html @@ -135,7 +135,7 @@ 描述备注 - + diff --git a/web-app/src/app/routes/monitor/monitor.module.ts b/web-app/src/app/routes/monitor/monitor.module.ts index 29187b6..071799c 100644 --- a/web-app/src/app/routes/monitor/monitor.module.ts +++ b/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[] = [ 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 { } diff --git a/web-app/src/app/service/monitor.service.ts b/web-app/src/app/service/monitor.service.ts index 1361371..4e05865 100644 --- a/web-app/src/app/service/monitor.service.ts +++ b/web-app/src/app/service/monitor.service.ts @@ -83,4 +83,7 @@ export class MonitorService { return this.http.get>>(monitors_uri, options); } + public getMonitorMetricData(monitorId: number, metric: string) : Observable> { + return this.http.get>(`/monitors/${monitorId}/metrics/${metric}`); + } }