[monitor] 提供指标实时数据查询API，初始化监控详情页代码

web-app/package.json

@@ -41,8 +41,10 @@
     "@delon/util": "^12.4.2",
     "ajv": "^8.6.2",
     "ajv-formats": "^2.1.1",
+    "echarts": "^5.2.2",
     "ng-alain": "^12.4.2",
     "ng-zorro-antd": "^12.0.2",
+    "ngx-echarts": "^v7.1.0",
     "rxjs": "~6.6.0",
     "screenfull": "^5.1.0",
     "tslib": "^2.3.0",
@@ -60,6 +62,7 @@
     "@angular/language-service": "~12.2.0",
     "@delon/testing": "^12.4.2",
     "@ngx-formly/schematics": "^5.10.23",
+    "@types/echarts": "^4.9.12",
     "@types/jasmine": "~3.8.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "~4.29.2",

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

@@ -84,6 +84,7 @@ import { RoutesModule } from './routes/routes.module';
 import { SharedModule } from './shared/shared.module';
 import { STWidgetModule } from './shared/st-widget/st-widget.module';
 import { ReactiveFormsModule } from '@angular/forms';
+import { NgxEchartsModule } from 'ngx-echarts';
 
 @NgModule({
   declarations: [
@@ -103,7 +104,10 @@ import { ReactiveFormsModule } from '@angular/forms';
     NzNotificationModule,
     ...FORM_MODULES,
     ...GLOBAL_THIRD_MODULES,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    })
   ],
   providers: [
     ...LANG_PROVIDES,

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

@@ -1 +1,21 @@
-<p>monitor-detail works!</p>
+<nz-divider></nz-divider>
+<nz-breadcrumb>
+  <nz-breadcrumb-item>
+    <a [routerLink]="['/']">
+      <i nz-icon nzType="home"></i>
+    </a>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item>
+    <a [routerLink]="['/monitors']" [queryParams]="{app: app ? app : ''}">
+      <i nz-icon nzType="monitor"></i>
+      <span>监控列表</span>
+    </a>
+  </nz-breadcrumb-item>
+  <nz-breadcrumb-item>
+    <i nz-icon nzType="pie-chart"></i>
+    <span>{{'monitor.app.' + app | i18n}} 监控详情</span>
+  </nz-breadcrumb-item>
+</nz-breadcrumb>
+<nz-divider></nz-divider>
+
+<div echarts [options]="options" class="demo-chart"></div>

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

@@ -1,4 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+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";
 
 @Component({
   selector: 'app-monitor-detail',
@@ -8,9 +15,74 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MonitorDetailComponent implements OnInit {
 
-  constructor() { }
+  constructor(private monitorSvc: MonitorService,
+              private route: ActivatedRoute,
+              private router: Router,
+              private titleSvc: TitleService) { }
+  isSpinning: boolean = false
+  monitorId!: number;
+  app: string | undefined;
+
+  options: any;
 
   ngOnInit(): void {
-  }
+    this.route.paramMap.pipe(
+      switchMap((paramMap: ParamMap) => {
+        this.isSpinning = false;
+        let id = paramMap.get("monitorId");
+        this.monitorId = Number(id);
+        // 查询监控指标组结构信息
+        return this.monitorSvc.getMonitor(this.monitorId);
+      })
+    ).subscribe(message => {
+      if (message.code === 0) {
 
+      } else {
+        console.warn(message.msg);
+      }
+    });
+
+
+    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.ts

@@ -10,6 +10,7 @@ import {Monitor} from "../../../pojo/Monitor";
 import {FormGroup} from "@angular/forms";
 import {Message} from "../../../pojo/Message";
 import {throwError} from "rxjs";
+import {TitleService} from "@delon/theme";
 
 @Component({
   selector: 'app-monitor-modify',
@@ -23,6 +24,7 @@ export class MonitorEditComponent implements OnInit {
               private monitorSvc: MonitorService,
               private route: ActivatedRoute,
               private router: Router,
+              private titleSvc: TitleService,
               private notifySvc: NzNotificationService,) { }
 
   paramDefines!: ParamDefine[];
@@ -47,6 +49,7 @@ export class MonitorEditComponent implements OnInit {
     ).pipe(switchMap((message: Message<any>) => {
       if (message.code === 0) {
         this.monitor = message.data.monitor;
+        this.titleSvc.setTitleByI18n('monitor.app.' + this.monitor.app)
         if (message.data.params != null) {
           message.data.params.forEach((item: Param) => {
             this.paramValueMap.set(item.field, item)

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

@@ -58,7 +58,11 @@
   <tbody>
   <tr *ngFor="let data of fixedTable.data">
     <td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
-    <td nzAlign="center">{{ data.name }}</td>
+    <td nzAlign="center">
+      <a [routerLink]="['/monitors/' + data.id]">
+        <span>{{ data.name }}</span>
+      </a>
+    </td>
     <td nzAlign="center">
       <nz-tag *ngIf="data.status == 0" nzColor="default">
         <i nz-icon nzType="robot" nzTheme="outline"></i>

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

@@ -9,6 +9,7 @@ import {Param} from "../../../pojo/Param";
 import {Monitor} from "../../../pojo/Monitor";
 import {MonitorService} from "../../../service/monitor.service";
 import {NzNotificationService} from "ng-zorro-antd/notification";
+import {TitleService} from "@delon/theme";
 
 @Component({
   selector: 'app-monitor-add',
@@ -32,6 +33,7 @@ export class MonitorNewComponent implements OnInit {
               private notifySvc: NzNotificationService,
               private cdr: ChangeDetectorRef,
               private i18n: I18NService,
+              private titleSvc: TitleService,
               private formBuilder: FormBuilder) {
     this.monitor = new Monitor();
   }
@@ -40,6 +42,7 @@ export class MonitorNewComponent implements OnInit {
     this.route.queryParamMap.pipe(
       switchMap((paramMap: ParamMap) => {
         this.monitor.app = paramMap.get("app") || '';
+        this.titleSvc.setTitleByI18n('monitor.app.' + this.monitor.app)
         this.detected = true;
         this.passwordVisible = false;
         this.isSpinning = false;

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

@@ -10,6 +10,7 @@ import {NzDividerModule} from "ng-zorro-antd/divider";
 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";
 
 const COMPONENTS: Type<void>[] = [
   MonitorNewComponent,
@@ -26,7 +27,8 @@ const COMPONENTS: Type<void>[] = [
         NzDividerModule,
         NzSwitchModule,
         NzTagModule,
-        NzRadioModule
+        NzRadioModule,
+        NgxEchartsModule
     ],
   declarations: COMPONENTS,
 })