From 2ffdda8f26f06cba5946a75b3de3847c9365b805 Mon Sep 17 00:00:00 2001 From: Kerwin Bryant Date: Wed, 3 Jul 2024 14:31:48 +0800 Subject: [PATCH] [improve] optimize the monitoring editing form. (#2172) Signed-off-by: Kerwin Bryant Co-authored-by: tomsun28 --- .../monitor-edit/monitor-edit.component.html | 468 +---------------- .../monitor-edit/monitor-edit.component.ts | 161 +----- .../monitor-form/monitor-form.component.html | 139 +++++ .../monitor-form.component.spec.ts | 43 ++ .../monitor-form/monitor-form.component.ts | 156 ++++++ .../monitor-new/monitor-new.component.html | 478 +----------------- .../monitor-new/monitor-new.component.ts | 200 +------- .../src/app/routes/monitor/monitor.module.ts | 2 + .../form-item/form-item.component.html | 288 +++++++++++ .../form-item/form-item.component.less | 0 .../form-item/form-item.component.spec.ts | 43 ++ .../form-item/form-item.component.ts | 123 +++++ web-app/src/app/shared/shared.module.ts | 9 +- 13 files changed, 853 insertions(+), 1257 deletions(-) create mode 100644 web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html create mode 100644 web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts create mode 100644 web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts create mode 100644 web-app/src/app/shared/components/form-item/form-item.component.html create mode 100644 web-app/src/app/shared/components/form-item/form-item.component.less create mode 100644 web-app/src/app/shared/components/form-item/form-item.component.spec.ts create mode 100644 web-app/src/app/shared/components/form-item/form-item.component.ts 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 25ae21ee7ae..8660943796f 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 @@ -23,457 +23,21 @@ [guild_link]="'monitor.app.' + monitor.app + '.helpLink' | i18n" [icon_name]="'edit'" > - - - -
-
- - - {{ hostName ? hostName : ('monitor.host' | i18n) }} - - - - - - - - {{ 'monitor.name' | i18n }} - - - - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - - - - - - - {{ paramDefine.name }} - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - - - {{ paramDefine.name }} - - - - - - - - - - - - - - - {{ 'monitor.collector' | i18n }} - - - - - {{ 'monitor.collector.system.default' | i18n }} - {{ 'collector.mode.public' | i18n }} - - - {{ - item.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n) - }} - - {{ item.name }} - {{ item.ip }} - - {{ item.mode == 'private' ? ('collector.mode.private' | i18n) : ('collector.mode.public' | i18n) }} - - - - - {{ selected.nzLabel }} - - - - - - - {{ 'monitor.intervals' | i18n }} - - - - - {{ 'common.time.unit.second' | i18n }} - - - - - - {{ 'tag.bind' | i18n }} - - - - {{ sliceTagName(tag) }} - - - - - {{ 'tag.new' | i18n }} - - - - - - - - {{ 'monitor.description' | i18n }} - - - - - - - - -
-
- - - -
-
-
-
- + - - -
- - - - - - - {{ 'tag' | i18n }} - - - - - - - {{ data.name }} - - {{ data.name + ':' + data.tagValue }} - - - - - -
- + diff --git 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 index b33393e432e..72ff1bebe18 100644 --- 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 @@ -24,18 +24,16 @@ import { I18NService } from '@core'; import { ALAIN_I18N_TOKEN, TitleService } from '@delon/theme'; import { NzNotificationService } from 'ng-zorro-antd/notification'; import { throwError } from 'rxjs'; -import { finalize, switchMap } from 'rxjs/operators'; +import { switchMap } from 'rxjs/operators'; import { Collector } from '../../../pojo/Collector'; import { Message } from '../../../pojo/Message'; import { Monitor } from '../../../pojo/Monitor'; import { Param } from '../../../pojo/Param'; import { ParamDefine } from '../../../pojo/ParamDefine'; -import { Tag } from '../../../pojo/Tag'; import { AppDefineService } from '../../../service/app-define.service'; import { CollectorService } from '../../../service/collector.service'; import { MonitorService } from '../../../service/monitor.service'; -import { TagService } from '../../../service/tag.service'; @Component({ selector: 'app-monitor-modify', @@ -50,7 +48,6 @@ export class MonitorEditComponent implements OnInit { private router: Router, private titleSvc: TitleService, private notifySvc: NzNotificationService, - private tagSvc: TagService, private collectorSvc: CollectorService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService ) {} @@ -64,7 +61,6 @@ export class MonitorEditComponent implements OnInit { monitor = new Monitor(); collectors!: Collector[]; collector: string = ''; - profileForm: FormGroup = new FormGroup({}); detected: boolean = false; isSpinning: boolean = false; spinningTip: string = 'Loading...'; @@ -203,21 +199,6 @@ export class MonitorEditComponent implements OnInit { }); } - onParamBooleanChanged(booleanValue: boolean, field: string) { - // 对SSL的端口联动处理, 不开启SSL默认80端口，开启SSL默认443 - if (field === 'ssl') { - this.params.forEach(param => { - if (param.field === 'port') { - if (booleanValue) { - param.paramValue = '443'; - } else { - param.paramValue = '80'; - } - } - }); - } - } - onDependChanged(dependValue: string, dependField: string) { this.paramDefines.forEach((paramDefine, index) => { if (paramDefine.depend) { @@ -243,37 +224,12 @@ export class MonitorEditComponent implements OnInit { }); } - onSubmit(formGroup: FormGroup) { - if (formGroup.invalid) { - Object.values(formGroup.controls).forEach(control => { - if (control.invalid) { - control.markAsDirty(); - control.updateValueAndValidity({ onlySelf: true }); - } - }); - return; - } - this.monitor.host = this.monitor.host.trim(); - this.monitor.name = this.monitor.name.trim(); - // todo 暂时单独设置host属性值 - this.params.forEach(param => { - if (param.field === 'host') { - param.paramValue = this.monitor.host; - } - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); - this.advancedParams.forEach(param => { - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); + onSubmit(info: any) { let addMonitor = { detected: this.detected, - monitor: this.monitor, + monitor: info.monitor, collector: this.collector, - params: this.params.concat(this.advancedParams) + params: info.params.concat(info.advancedParams) }; if (this.detected) { this.spinningTip = this.i18nSvc.fanyi('monitors.spinning-tip.detecting'); @@ -286,7 +242,7 @@ export class MonitorEditComponent implements OnInit { this.isSpinning = false; if (message.code === 0) { this.notifySvc.success(this.i18nSvc.fanyi('monitors.edit.success'), ''); - this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`); + this.router.navigateByUrl(`/monitors?app=${info.monitor.app}`); } else { this.notifySvc.error(this.i18nSvc.fanyi('monitors.edit.failed'), message.msg); } @@ -298,37 +254,12 @@ export class MonitorEditComponent implements OnInit { ); } - onDetect(formGroup: FormGroup) { - if (formGroup.invalid) { - Object.values(formGroup.controls).forEach(control => { - if (control.invalid) { - control.markAsDirty(); - control.updateValueAndValidity({ onlySelf: true }); - } - }); - return; - } - this.monitor.host = this.monitor.host.trim(); - this.monitor.name = this.monitor.name.trim(); - // todo 暂时单独设置host属性值 - this.params.forEach(param => { - if (param.field === 'host') { - param.paramValue = this.monitor.host; - } - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); - this.advancedParams.forEach(param => { - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); + onDetect(info: any) { let detectMonitor = { detected: this.detected, - monitor: this.monitor, + monitor: info.monitor, collector: this.collector, - params: this.params.concat(this.advancedParams) + params: info.params.concat(info.advancedParams) }; this.spinningTip = this.i18nSvc.fanyi('monitors.spinning-tip.detecting'); this.isSpinning = true; @@ -353,80 +284,4 @@ export class MonitorEditComponent implements OnInit { app = app ? app : ''; this.router.navigateByUrl(`/monitors?app=${app}`); } - - onRemoveTag(tag: Tag) { - if (this.monitor != undefined && this.monitor.tags != undefined) { - this.monitor.tags = this.monitor.tags.filter(item => item !== tag); - } - } - - sliceTagName(tag: Tag): string { - if (tag.tagValue != undefined && tag.tagValue.trim() != '') { - return `${tag.name}:${tag.tagValue}`; - } else { - return tag.name; - } - } - - // start Tag model - isManageModalVisible = false; - isManageModalOkLoading = false; - tagCheckedAll: boolean = false; - tagTableLoading = false; - tagSearch!: string; - tags!: Tag[]; - checkedTags = new Set(); - loadTagsTable() { - this.tagTableLoading = true; - let tagsReq$ = this.tagSvc.loadTags(this.tagSearch, 1, 0, 1000).subscribe( - message => { - this.tagTableLoading = false; - this.tagCheckedAll = false; - this.checkedTags.clear(); - if (message.code === 0) { - let page = message.data; - this.tags = page.content; - } else { - console.warn(message.msg); - } - tagsReq$.unsubscribe(); - }, - error => { - this.tagTableLoading = false; - tagsReq$.unsubscribe(); - } - ); - } - onShowTagsModal() { - this.isManageModalVisible = true; - this.loadTagsTable(); - } - onManageModalCancel() { - this.isManageModalVisible = false; - } - onManageModalOk() { - this.isManageModalOkLoading = true; - this.checkedTags.forEach(item => { - if (this.monitor.tags.find(tag => tag.id == item.id) == undefined) { - this.monitor.tags.push(item); - } - }); - this.isManageModalOkLoading = false; - this.isManageModalVisible = false; - } - onAllChecked(checked: boolean) { - if (checked) { - this.tags.forEach(tag => this.checkedTags.add(tag)); - } else { - this.checkedTags.clear(); - } - } - onItemChecked(tag: Tag, checked: boolean) { - if (checked) { - this.checkedTags.add(tag); - } else { - this.checkedTags.delete(tag); - } - } - // end tag model } diff --git a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html new file mode 100644 index 00000000000..33351b86b45 --- /dev/null +++ b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.html @@ -0,0 +1,139 @@ + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ +
+ diff --git a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts new file mode 100644 index 00000000000..9a3dbd6e288 --- /dev/null +++ b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.spec.ts @@ -0,0 +1,43 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MonitorFormComponent } from './monitor-form.component'; + +describe('MonitorFormComponent', () => { + let component: MonitorFormComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [MonitorFormComponent] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MonitorFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts new file mode 100644 index 00000000000..d28d9fa795b --- /dev/null +++ b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.ts @@ -0,0 +1,156 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { FormGroup } from '@angular/forms'; + +import { Collector } from '../../../pojo/Collector'; +import { Param } from '../../../pojo/Param'; +import { ParamDefine } from '../../../pojo/ParamDefine'; + +@Component({ + selector: 'app-monitor-form', + templateUrl: './monitor-form.component.html', + styles: [] +}) +export class MonitorFormComponent { + @Input() monitor!: any; + @Input() loading!: boolean; + @Input() loadingTip!: string; + @Input() hostName!: string; + @Input() collector!: string; + @Input() collectors!: Collector[]; + @Input() params!: Param[]; + @Input() advancedParams!: Param[]; + @Input() paramDefines!: ParamDefine[]; + @Input() advancedParamDefines!: ParamDefine[]; + + @Output() readonly formSubmit = new EventEmitter(); + @Output() readonly formCancel = new EventEmitter(); + @Output() readonly formDetect = new EventEmitter(); + @Output() readonly hostChange = new EventEmitter(); + + constructor() {} + + onDetect(formGroup: FormGroup) { + if (formGroup.invalid) { + Object.values(formGroup.controls).forEach(control => { + if (control.invalid) { + control.markAsDirty(); + control.updateValueAndValidity({ onlySelf: true }); + } + }); + return; + } + this.monitor.host = this.monitor.host.trim(); + this.monitor.name = this.monitor.name.trim(); + // todo 暂时单独设置host属性值 + this.params.forEach(param => { + if (param.field === 'host') { + param.paramValue = this.monitor.host; + } + if (param.paramValue != null && typeof param.paramValue == 'string') { + param.paramValue = (param.paramValue as string).trim(); + } + }); + this.advancedParams.forEach(param => { + if (param.paramValue != null && typeof param.paramValue == 'string') { + param.paramValue = (param.paramValue as string).trim(); + } + }); + this.formDetect.emit({ monitor: this.monitor, params: this.params, advancedParams: this.advancedParams }); + } + + onSubmit(formGroup: FormGroup) { + if (formGroup.invalid) { + Object.values(formGroup.controls).forEach(control => { + if (control.invalid) { + control.markAsDirty(); + control.updateValueAndValidity({ onlySelf: true }); + } + }); + return; + } + this.monitor.host = this.monitor.host.trim(); + this.monitor.name = this.monitor.name.trim(); + // todo 暂时单独设置host属性值 + this.params.forEach(param => { + if (param.field === 'host') { + param.paramValue = this.monitor.host; + } + if (param.paramValue != null && typeof param.paramValue == 'string') { + param.paramValue = (param.paramValue as string).trim(); + } + }); + this.advancedParams.forEach(param => { + if (param.paramValue != null && typeof param.paramValue == 'string') { + param.paramValue = (param.paramValue as string).trim(); + } + }); + this.formSubmit.emit({ monitor: this.monitor, params: this.params, advancedParams: this.advancedParams }); + } + + onCancel() { + this.formCancel.emit(); + } + + onHostChange(host: string) { + this.hostChange.emit(host); + } + + onParamBooleanChanged(booleanValue: boolean, field: string) { + // 对SSL的端口联动处理, 不开启SSL默认80端口，开启SSL默认443 + if (field === 'ssl') { + this.params.forEach(param => { + if (param.field === 'port') { + if (booleanValue) { + param.paramValue = '443'; + } else { + param.paramValue = '80'; + } + } + }); + } + } + + onDependChanged(dependValue: string, dependField: string) { + this.paramDefines.forEach((paramDefine, index) => { + if (paramDefine.depend) { + let fieldValues = new Map(Object.entries(paramDefine.depend)).get(dependField); + if (fieldValues) { + this.params[index].display = false; + if (fieldValues.map(String).includes(dependValue)) { + this.params[index].display = true; + } + } + } + }); + this.advancedParamDefines.forEach((advancedParamDefine, index) => { + if (advancedParamDefine.depend) { + let fieldValues = new Map(Object.entries(advancedParamDefine.depend)).get(dependField); + if (fieldValues) { + this.advancedParams[index].display = false; + if (fieldValues.map(String).includes(dependValue)) { + this.advancedParams[index].display = true; + } + } + } + }); + } +} 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 e5779cb8aa8..6e0c211cef5 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 @@ -23,466 +23,22 @@ [guild_link]="'monitor.app.' + monitor.app + '.helpLink' | i18n" [icon_name]="'plus-circle'" > - - - -
-
- - - {{ hostName ? hostName : ('monitor.host' | i18n) }} - - - - - - - - {{ 'monitor.name' | i18n }} - - - - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - - - - - - - {{ paramDefine.name }} - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - {{ paramDefine.name }} - - - - - - - - {{ paramDefine.name }} - - - - - - - - - - - - - - - {{ 'monitor.collector' | i18n }} - - - - - {{ 'monitor.collector.system.default' | i18n }} - {{ 'collector.mode.public' | i18n }} - - - {{ - item.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n) - }} - - {{ item.name }} - {{ item.ip }} - - {{ item.mode == 'private' ? ('collector.mode.private' | i18n) : ('collector.mode.public' | i18n) }} - - - - - {{ selected.nzLabel }} - - - - - - - {{ 'monitor.intervals' | i18n }} - - - - - {{ 'common.time.unit.second' | i18n }} - - - - - - {{ 'tag.bind' | i18n }} - - - - {{ sliceTagName(tag) }} - - - - - {{ 'tag.new' | i18n }} - - - - - - - - {{ 'monitor.description' | i18n }} - - - - - - - - -
-
- - - -
-
-
-
- + - - -
- - - - - - - {{ 'tag' | i18n }} - - - - - - - {{ data.name }} - - {{ data.name + ':' + data.tagValue }} - - - - - -
- + diff --git 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 index 0f439adb95c..3b3ff37b9dc 100644 --- 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 @@ -17,12 +17,11 @@ * under the License. */ -import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { Component, Inject, OnInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { I18NService } from '@core'; import { ALAIN_I18N_TOKEN, TitleService } from '@delon/theme'; -import { List } from 'echarts'; import { NzNotificationService } from 'ng-zorro-antd/notification'; import { switchMap } from 'rxjs/operators'; @@ -31,11 +30,9 @@ import { Message } from '../../../pojo/Message'; import { Monitor } from '../../../pojo/Monitor'; import { Param } from '../../../pojo/Param'; import { ParamDefine } from '../../../pojo/ParamDefine'; -import { Tag } from '../../../pojo/Tag'; import { AppDefineService } from '../../../service/app-define.service'; import { CollectorService } from '../../../service/collector.service'; import { MonitorService } from '../../../service/monitor.service'; -import { TagService } from '../../../service/tag.service'; @Component({ selector: 'app-monitor-add', @@ -61,12 +58,9 @@ export class MonitorNewComponent implements OnInit { private route: ActivatedRoute, private router: Router, private notifySvc: NzNotificationService, - private cdr: ChangeDetectorRef, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService, private titleSvc: TitleService, - private tagSvc: TagService, - private collectorSvc: CollectorService, - private formBuilder: FormBuilder + private collectorSvc: CollectorService ) { this.monitor = new Monitor(); this.monitor.tags = []; @@ -163,77 +157,12 @@ export class MonitorNewComponent implements OnInit { } } - onParamBooleanChanged(booleanValue: boolean, field: string) { - // 对SSL的端口联动处理, 不开启SSL默认80端口，开启SSL默认443 - if (field === 'ssl') { - this.params.forEach(param => { - if (param.field === 'port') { - if (booleanValue) { - param.paramValue = '443'; - } else { - param.paramValue = '80'; - } - } - }); - } - } - - onDependChanged(dependValue: string, dependField: string) { - this.paramDefines.forEach((paramDefine, index) => { - if (paramDefine.depend) { - let fieldValues = new Map(Object.entries(paramDefine.depend)).get(dependField); - if (fieldValues) { - this.params[index].display = false; - if (fieldValues.map(String).includes(dependValue)) { - this.params[index].display = true; - } - } - } - }); - this.advancedParamDefines.forEach((advancedParamDefine, index) => { - if (advancedParamDefine.depend) { - let fieldValues = new Map(Object.entries(advancedParamDefine.depend)).get(dependField); - if (fieldValues) { - this.advancedParams[index].display = false; - if (fieldValues.map(String).includes(dependValue)) { - this.advancedParams[index].display = true; - } - } - } - }); - } - - onSubmit(formGroup: FormGroup) { - if (formGroup.invalid) { - Object.values(formGroup.controls).forEach(control => { - if (control.invalid) { - control.markAsDirty(); - control.updateValueAndValidity({ onlySelf: true }); - } - }); - return; - } - this.monitor.host = this.monitor.host.trim(); - this.monitor.name = this.monitor.name.trim(); - // todo 暂时单独设置host属性值 - this.params.forEach(param => { - if (param.field === 'host') { - param.paramValue = this.monitor.host; - } - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); - this.advancedParams.forEach(param => { - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); + onSubmit(info: any) { let addMonitor = { detected: this.detected, + monitor: info.monitor, collector: this.collector, - monitor: this.monitor, - params: this.params.concat(this.advancedParams) + params: info.params.concat(info.advancedParams) }; if (this.detected) { this.spinningTip = this.i18nSvc.fanyi('monitors.spinning-tip.detecting'); @@ -246,7 +175,7 @@ export class MonitorNewComponent implements OnInit { this.isSpinning = false; if (message.code === 0) { this.notifySvc.success(this.i18nSvc.fanyi('monitors.new.success'), ''); - this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`); + this.router.navigateByUrl(`/monitors?app=${info.monitor.app}`); } else { this.notifySvc.error(this.i18nSvc.fanyi('monitors.new.failed'), message.msg); } @@ -258,37 +187,12 @@ export class MonitorNewComponent implements OnInit { ); } - onDetect(formGroup: FormGroup) { - if (formGroup.invalid) { - Object.values(formGroup.controls).forEach(control => { - if (control.invalid) { - control.markAsDirty(); - control.updateValueAndValidity({ onlySelf: true }); - } - }); - return; - } - this.monitor.host = this.monitor.host.trim(); - this.monitor.name = this.monitor.name.trim(); - // todo 暂时单独设置host属性值 - this.params.forEach(param => { - if (param.field === 'host') { - param.paramValue = this.monitor.host; - } - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); - this.advancedParams.forEach(param => { - if (param.paramValue != null && typeof param.paramValue == 'string') { - param.paramValue = (param.paramValue as string).trim(); - } - }); + onDetect(info: any) { let detectMonitor = { detected: true, + monitor: info.monitor, collector: this.collector, - monitor: this.monitor, - params: this.params.concat(this.advancedParams) + params: info.params.concat(info.advancedParams) }; this.spinningTip = this.i18nSvc.fanyi('monitors.spinning-tip.detecting'); this.isSpinning = true; @@ -313,88 +217,4 @@ export class MonitorNewComponent implements OnInit { app = app ? app : ''; this.router.navigateByUrl(`/monitors?app=${app}`); } - - onRemoveTag(tag: Tag) { - if (this.monitor != undefined && this.monitor.tags != undefined) { - this.monitor.tags = this.monitor.tags.filter(item => item !== tag); - } - } - - sliceTagName(tag: Tag): string { - if (tag.tagValue != undefined && tag.tagValue.trim() != '') { - return `${tag.name}:${tag.tagValue}`; - } else { - return tag.name; - } - } - - // start Tag model - isManageModalVisible = false; - isManageModalOkLoading = false; - tagCheckedAll: boolean = false; - tagTableLoading = false; - tagSearch!: string; - tags!: Tag[]; - checkedTags = new Set(); - loadTagsTable() { - this.tagTableLoading = true; - let tagsReq$ = this.tagSvc.loadTags(this.tagSearch, 1, 0, 1000).subscribe( - message => { - this.tagTableLoading = false; - this.tagCheckedAll = false; - this.checkedTags.clear(); - if (message.code === 0) { - let page = message.data; - this.tags = page.content; - } else { - console.warn(message.msg); - } - tagsReq$.unsubscribe(); - }, - error => { - this.tagTableLoading = false; - tagsReq$.unsubscribe(); - } - ); - } - onShowTagsModal() { - this.isManageModalVisible = true; - this.loadTagsTable(); - } - onManageModalCancel() { - this.isManageModalVisible = false; - } - onManageModalOk() { - this.isManageModalOkLoading = true; - this.checkedTags.forEach(item => { - if (this.monitor.tags.find(tag => tag.id == item.id) == undefined) { - this.monitor.tags.push(item); - } - }); - this.isManageModalOkLoading = false; - this.isManageModalVisible = false; - } - onAllChecked(checked: boolean) { - if (checked) { - this.tags.forEach(tag => this.checkedTags.add(tag)); - } else { - this.checkedTags.clear(); - } - } - onItemChecked(tag: Tag, checked: boolean) { - if (checked) { - this.checkedTags.add(tag); - } else { - this.checkedTags.delete(tag); - } - } - - getNumber(rangeString: string, index: number): number | undefined { - if (rangeString == undefined || rangeString == '' || rangeString.length <= index) { - return undefined; - } - const rangeArray = JSON.parse(rangeString); - return rangeArray[index]; - } - // end tag model } diff --git a/web-app/src/app/routes/monitor/monitor.module.ts b/web-app/src/app/routes/monitor/monitor.module.ts index af3794bad42..abef9b4cfea 100644 --- a/web-app/src/app/routes/monitor/monitor.module.ts +++ b/web-app/src/app/routes/monitor/monitor.module.ts @@ -36,6 +36,7 @@ import { MonitorDataChartComponent } from './monitor-data-chart/monitor-data-cha import { MonitorDataTableComponent } from './monitor-data-table/monitor-data-table.component'; import { MonitorDetailComponent } from './monitor-detail/monitor-detail.component'; import { MonitorEditComponent } from './monitor-edit/monitor-edit.component'; +import { MonitorFormComponent } from './monitor-form/monitor-form.component'; import { MonitorListComponent } from './monitor-list/monitor-list.component'; import { MonitorNewComponent } from './monitor-new/monitor-new.component'; import { MonitorRoutingModule } from './monitor-routing.module'; @@ -43,6 +44,7 @@ import { MonitorRoutingModule } from './monitor-routing.module'; const COMPONENTS: Array> = [ MonitorNewComponent, MonitorEditComponent, + MonitorFormComponent, MonitorListComponent, MonitorDetailComponent, MonitorDataTableComponent, diff --git a/web-app/src/app/shared/components/form-item/form-item.component.html b/web-app/src/app/shared/components/form-item/form-item.component.html new file mode 100644 index 00000000000..3865f54a448 --- /dev/null +++ b/web-app/src/app/shared/components/form-item/form-item.component.html @@ -0,0 +1,288 @@ + + + + {{ item.name }} + + + + + + + {{ item.name }} + + + + + + + {{ item.name }} + + + + + + + {{ item.name }} + + + + + + + {{ item.name }} + + + + + + + {{ item.name }} + + + + + + + + + {{ item.name }} + + + + + + + {{ item.name }} + + + + + + + {{ item.name }} + + + + + {{ 'monitor.collector.system.default' | i18n }} + {{ 'collector.mode.public' | i18n }} + + + {{ + item.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n) + }} + + {{ item.name }} + {{ item.ip }} + + {{ item.mode == 'private' ? ('collector.mode.private' | i18n) : ('collector.mode.public' | i18n) }} + + + + + {{ selected.nzLabel }} + + + + + + {{ item.name }} + + + + + {{ 'common.time.unit.second' | i18n }} + + + + + {{ item.name }} + + + + {{ sliceTagName(tag) }} + + + + + {{ 'tag.new' | i18n }} + + + + + + + {{ item.name }} + + + + + + + + + + +
+ + + + + + + {{ 'tag' | i18n }} + + + + + + + {{ data.name }} + + {{ data.name + ':' + data.tagValue }} + + + + + +
+ diff --git a/web-app/src/app/shared/components/form-item/form-item.component.less b/web-app/src/app/shared/components/form-item/form-item.component.less new file mode 100644 index 00000000000..e69de29bb2d diff --git a/web-app/src/app/shared/components/form-item/form-item.component.spec.ts b/web-app/src/app/shared/components/form-item/form-item.component.spec.ts new file mode 100644 index 00000000000..581e39d34ec --- /dev/null +++ b/web-app/src/app/shared/components/form-item/form-item.component.spec.ts @@ -0,0 +1,43 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FormItemComponent } from './form-item.component'; + +describe('FormItemComponent', () => { + let component: FormItemComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FormItemComponent] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FormItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web-app/src/app/shared/components/form-item/form-item.component.ts b/web-app/src/app/shared/components/form-item/form-item.component.ts new file mode 100644 index 00000000000..18fbe33e830 --- /dev/null +++ b/web-app/src/app/shared/components/form-item/form-item.component.ts @@ -0,0 +1,123 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +import { TagItem } from '../../../pojo/NoticeRule'; +import { Tag } from '../../../pojo/Tag'; +import { TagService } from '../../../service/tag.service'; + +@Component({ + selector: 'app-form-item', + templateUrl: './form-item.component.html', + styleUrls: ['./form-item.component.less'] +}) +export class FormItemComponent { + constructor(private tagSvc: TagService) {} + @Input() item!: any; + @Input() value!: any; + @Input() extra: any = {}; + @Output() readonly valueChange = new EventEmitter(); + + isManageModalVisible = false; + isManageModalOkLoading = false; + checkedTags = new Set(); + tagTableLoading = false; + tagCheckedAll: boolean = false; + tagSearch!: string; + tags!: Tag[]; + + loadTagsTable() { + this.tagTableLoading = true; + let tagsReq$ = this.tagSvc.loadTags(this.tagSearch, 1, 0, 1000).subscribe( + message => { + this.tagTableLoading = false; + this.tagCheckedAll = false; + this.checkedTags.clear(); + if (message.code === 0) { + let page = message.data; + this.tags = page.content; + } else { + console.warn(message.msg); + } + tagsReq$.unsubscribe(); + }, + error => { + this.tagTableLoading = false; + tagsReq$.unsubscribe(); + } + ); + } + + onChange(value: any) { + this.valueChange.emit(value); + } + + onRemoveTag(tag: TagItem) { + if (this.value != undefined) { + this.onChange(this.value.filter((item: TagItem) => item !== tag)); + } + } + + sliceTagName(tag: any): string { + if (tag.value != undefined && tag.value.trim() != '') { + return `${tag.name}:${tag.value}`; + } else { + return tag.name; + } + } + + onShowTagsModal() { + this.isManageModalVisible = true; + this.loadTagsTable(); + } + + onManageModalCancel() { + this.isManageModalVisible = false; + } + + onManageModalOk() { + this.isManageModalOkLoading = true; + let value = this.value == undefined ? [] : this.value; + this.checkedTags.forEach(item => { + if (this.value.find((tag: { id: number }) => tag.id == item.id) == undefined) { + value.push(item); + } + }); + this.onChange(value); + this.isManageModalOkLoading = false; + this.isManageModalVisible = false; + } + + onAllChecked(checked: boolean) { + if (checked) { + this.tags.forEach(tag => this.checkedTags.add(tag)); + } else { + this.checkedTags.clear(); + } + } + + onItemChecked(tag: Tag, checked: boolean) { + if (checked) { + this.checkedTags.add(tag); + } else { + this.checkedTags.delete(tag); + } + } +} diff --git a/web-app/src/app/shared/shared.module.ts b/web-app/src/app/shared/shared.module.ts index 4f73806be3d..4091bc6b49a 100644 --- a/web-app/src/app/shared/shared.module.ts +++ b/web-app/src/app/shared/shared.module.ts @@ -7,8 +7,11 @@ import { DelonFormModule } from '@delon/form'; import { AlainThemeModule } from '@delon/theme'; import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; import { NzDividerComponent } from 'ng-zorro-antd/divider'; +import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio'; +import { NzSwitchComponent } from 'ng-zorro-antd/switch'; import { NzTagModule } from 'ng-zorro-antd/tag'; +import { FormItemComponent } from './components/form-item/form-item.component'; import { HelpMessageShowComponent } from './components/help-message-show/help-message-show.component'; import { KeyValueInputComponent } from './components/key-value-input/key-value-input.component'; import { MetricsFieldInputComponent } from './components/metrics-field-input/metrics-field-input.component'; @@ -28,6 +31,7 @@ const COMPONENTS: Array> = [ HelpMessageShowComponent, MetricsFieldInputComponent, ToolbarComponent, + FormItemComponent, MonitorSelectMenuComponent ]; const DIRECTIVES: Array> = [TimezonePipe, I18nElsePipe, ElapsedTimePipe]; @@ -46,7 +50,10 @@ const DIRECTIVES: Array> = [TimezonePipe, I18nElsePipe, ElapsedTimePi ...ThirdModules, NzBreadCrumbModule, NzTagModule, - NzDividerComponent + NzDividerComponent, + NzRadioGroupComponent, + NzRadioComponent, + NzSwitchComponent ], declarations: [...COMPONENTS, ...DIRECTIVES, HelpMessageShowComponent], exports: [