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

2021-12-05 18:23:45 +08:00
parent 5b86e9f48e
commit 206408e80e
15 changed files with 352 additions and 7 deletions
--- a/web-app/src/app/app.module.ts
+++ b/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,
--- 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
@@ -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>
--- 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
@@ -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,
+    };
+  }
 }
--- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
+++ b/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)
--- 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
@@ -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>
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
+++ b/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;
--- a/web-app/src/app/routes/monitor/monitor.module.ts
+++ b/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,
 })