OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[web-app] http拦截器修改，新增监控页面编码

Browse Source
This commit is contained in:
tomsun28
2021-11-30 22:16:38 +08:00
parent 4d63afc669
commit ca5547c27d
37 changed files with 663 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html Normal file
View File

@@ -0,0 +1 @@
<p>monitor-detail works!</p>

25
web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.spec.ts Normal file
View File

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

16
web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-monitor-detail',
templateUrl: './monitor-detail.component.html',
styles: [
]
})
export class MonitorDetailComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

1
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html Normal file
View File

@@ -0,0 +1 @@
<p>monitor-modify works!</p>

25
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.spec.ts Normal file
View File

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

16
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-monitor-modify',
templateUrl: './monitor-edit.component.html',
styles: [
]
})
export class MonitorEditComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

2
web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html Normal file
View File

@@ -0,0 +1,2 @@
<nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb>
<p>monitor-list works!</p>

25
web-app/src/app/routes/monitor/monitor-list/monitor-list.component.spec.ts Normal file
View File

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

16
web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts Normal file
View File

@@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-monitor-list',
templateUrl: './monitor-list.component.html',
styles: [
]
})
export class MonitorListComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

136
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html Normal file
View File

@@ -0,0 +1,136 @@
<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']">
<i nz-icon nzType="monitor"></i>
<span>监控列表</span>
</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<i nz-icon nzType="plus-circle"></i>
<span>新增 {{monitor.app}} 监控</span>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>
<div class = "-inner-content">
<form nz-form (ngSubmit)="onSubmit()">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true">监控Host</nz-form-label>
<nz-form-control [nzSpan]="10">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host">
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">监控名称</nz-form-label>
<nz-form-control [nzSpan]="10">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name">
</nz-form-control>
</nz-form-item >
<nz-divider></nz-divider>
<nz-form-item *ngFor="let paramDefine of paramDefines; let i = index">
<nz-form-label *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'"
nzSpan="7"
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="10">
<input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field" [type]="paramDefine.type" [id]="paramDefine.field">
</nz-form-control>
<nz-form-label *ngIf="paramDefine.type === 'password'"
nzSpan="7"
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="10">
<nz-input-group [nzSuffix]="suffixTemplate">
<input
[type]="passwordVisible ? 'text' : 'password'"
nz-input
placeholder="input password"
[(ngModel)]="params[i].value"
[id]="paramDefine.field"
[name]="paramDefine.field"
/>
</nz-input-group>
<ng-template #suffixTemplate>
<i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
</ng-template>
</nz-form-control>
<nz-form-label *ngIf="paramDefine.type === 'number'"
nzSpan="7"
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="10">
<nz-input-number
[(ngModel)]="params[i].value"
[nzMin]="-1000"
[nzMax]="65535"
[nzStep]="1"
[nzPlaceHolder]="paramDefine.name"
[name]="paramDefine.field" [id]="paramDefine.field"
></nz-input-number>
</nz-form-control>
<nz-form-label *ngIf="paramDefine.type === 'boolean'"
nzSpan="7"
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="10">
<nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch>
</nz-form-control>
</nz-form-item >
<nz-divider></nz-divider>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "intervals">采集间隔</nz-form-label>
<nz-form-control nzSpan="10">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="10" id="intervals"></nz-input-number>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "detect">启动探测</nz-form-label>
<nz-form-control nzSpan="10">
<nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'description'>描述备注</nz-form-label>
<nz-form-control [nzSpan]="10">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea rows="3" nz-input name="description" id="description"></textarea>
</nz-textarea-count>
</nz-form-control>
</nz-form-item >
<div nz-row>
<div nz-col nzSpan="8" nzOffset="9">
<button nz-button nzType="primary" type="submit">
探测
</button>
<button nz-button nzType="primary" type="submit">
确定
</button>
<button nz-button nzType="primary" nzDanger="true" type="reset">
取消
</button>
</div>
</div>
</form>
</div>

25
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.spec.ts Normal file
View File

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

77
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts Normal file
View File

@@ -0,0 +1,77 @@
import { Component, OnInit } from '@angular/core';
import {ParamDefine} from "../../../pojo/ParamDefine";
import {AppDefineService} from "../../../service/app-define.service";
import {ActivatedRoute, ParamMap, Router} from "@angular/router";
import {switchMap} from "rxjs/operators";
import {FormBuilder, FormControl, FormGroup} from "@angular/forms";
import {I18NService} from "@core";
import {Param} from "../../../pojo/Param";
import {Monitor} from "../../../pojo/Monitor";
import {MonitorService} from "../../../service/monitor.service";
import {NzNotificationService} from "ng-zorro-antd/notification";
@Component({
selector: 'app-monitor-add',
templateUrl: './monitor-new.component.html',
styles: [
]
})
export class MonitorNewComponent implements OnInit {
paramDefines!: ParamDefine[];
params!: Param[];
monitor!: Monitor;
profileForm: FormGroup = new FormGroup({});
detected: boolean = true;
passwordVisible!: boolean;
constructor(private appDefineSvc: AppDefineService,
private monitorSvc: MonitorService,
private route: ActivatedRoute,
private router: Router,
private notifySvc: NzNotificationService,
private i18n: I18NService,
private formBuilder: FormBuilder) {
this.monitor = new Monitor();
}
ngOnInit(): void {
const paramDefine$ = this.route.queryParamMap.pipe(
switchMap((paramMap: ParamMap) => {
this.monitor.app = paramMap.get("app") || '';
return this.appDefineSvc.getAppParamsDefine(this.monitor.app);
})
).subscribe(message => {
if (message.code === 0) {
this.paramDefines = message.data;
this.params = [];
this.paramDefines.forEach(define => {
let param = new Param();
param.field = define.field;
param.type = define.type === "number" ? 0 : 1;
this.params.push(param);
})
} else {
console.warn(message.msg);
}
paramDefine$.unsubscribe();
});
}
onSubmit() {
let addMonitor = {
"detected": this.detected,
"monitor": this.monitor,
"params": this.params
};
this.monitorSvc.newMonitor(addMonitor)
.subscribe(message => {
if (message.code === 0) {
this.notifySvc.success("新增监控成功", "");
this.router.navigateByUrl("/monitors")
} else {
this.notifySvc.error("新增监控失败", message.msg);
}
})
}
}

9
web-app/src/app/routes/monitor/monitor-routing.module.ts
View File

@@ -1,7 +1,16 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {MonitorListComponent} from "./monitor-list/monitor-list.component";
import {MonitorNewComponent} from "./monitor-new/monitor-new.component";
import {MonitorEditComponent} from "./monitor-edit/monitor-edit.component";
import {MonitorDetailComponent} from "./monitor-detail/monitor-detail.component";
const routes: Routes = [
{ path: '', component: MonitorNewComponent },
{ path: 'new', component: MonitorNewComponent },
{ path: ':monitorId/edit', component: MonitorEditComponent },
{ path: ':monitorId', component: MonitorDetailComponent },
{ path: '**', component: MonitorListComponent }
];
@NgModule({

25
web-app/src/app/routes/monitor/monitor.module.ts
View File

@@ -1,14 +1,29 @@
import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared';
import { MonitorRoutingModule } from './monitor-routing.module';
import {MonitorNewComponent} from "./monitor-new/monitor-new.component";
import {MonitorEditComponent} from "./monitor-edit/monitor-edit.component";
import {MonitorListComponent} from "./monitor-list/monitor-list.component";
import {MonitorDetailComponent} from "./monitor-detail/monitor-detail.component";
import {NzBreadCrumbModule} from "ng-zorro-antd/breadcrumb";
import {NzDividerModule} from "ng-zorro-antd/divider";
import {NzSwitchModule} from "ng-zorro-antd/switch";
const COMPONENTS: Type<void>[] = [];
const COMPONENTS: Type<void>[] = [
MonitorNewComponent,
MonitorEditComponent,
MonitorListComponent,
MonitorDetailComponent
];
@NgModule({
imports: [
SharedModule,
MonitorRoutingModule
],
imports: [
SharedModule,
MonitorRoutingModule,
NzBreadCrumbModule,
NzDividerModule,
NzSwitchModule
],
declarations: COMPONENTS,
})
export class MonitorModule { }