This is an automated email from the ASF dual-hosted git repository.
gongchao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new 3e50b9632 Fixed failure of monitoring form validation (#2258)
3e50b9632 is described below
commit 3e50b96322bb925cf186da3b9c0dbcfd76c40af1
Author: Kerwin Bryant <[email protected]>
AuthorDate: Wed Jul 10 15:42:10 2024 +0800
Fixed failure of monitoring form validation (#2258)
---
.../alert-setting/alert-setting.component.html | 24 ++-
.../monitor-form/monitor-form.component.html | 192 ++++++++++-------
.../monitor-form/monitor-form.component.less | 6 +-
.../form-field/form-field.component.html | 171 ++++++++++++++++
.../form-field.component.less} | 0
.../form-field.component.spec.ts} | 12 +-
.../components/form-field/form-field.component.ts | 81 ++++++++
.../components/form-item/form-item.component.html | 227 ---------------------
.../components/form-item/form-item.component.ts | 37 ----
web-app/src/app/shared/shared.module.ts | 4 +-
10 files changed, 392 insertions(+), 362 deletions(-)
diff --git
a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
old mode 100755
new mode 100644
index b25c9978b..5bba7bbb1
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -495,16 +495,20 @@
</nz-collapse>
</nz-form-control>
</nz-form-item>
- <app-form-item
- [item]="{
- field: 'tags',
- type: 'tags-selection',
- name: 'tag.bind' | i18n,
- tooltip: 'tag.bind.tip' | i18n
- }"
- [extra]="{ tag_mode: 'closeable' }"
- [(value)]="define.tags"
- />
+ <nz-form-item>
+ <nz-form-label nzSpan="7" [nzFor]="'tags'"
[nzTooltipTitle]="'tag.bind.tip' | i18n">{{ 'tag.bind' | i18n }}
</nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="{
+ field: 'tags',
+ type: 'tags-selection'
+ }"
+ [extra]="{ tag_mode: 'closeable' }"
+ [name]="'tags'"
+ [(ngModel)]="define.tags"
+ />
+ </nz-form-control>
+ </nz-form-item>
<nz-form-item>
<nz-form-label nzSpan="7" nzFor="preset"
[nzTooltipTitle]="'alert.setting.default.tip' | i18n">
{{ 'alert.setting.default' | i18n }}
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
index d163ca445..c96cf1197 100644
--- 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
@@ -20,42 +20,57 @@
<nz-spin [nzSpinning]="loading" [nzTip]="loadingTip" nzSize="large">
<div class="-inner-content">
<form nz-form #form="ngForm">
- <app-form-item
- [item]="{
- field: 'host',
- type: 'text',
- name: hostName ? hostName : ('monitor.host' | i18n),
- required: true,
- placeholder: 'monitor.host.tip' | i18n
- }"
- [(value)]="monitor.host"
- (valueChange)="onHostChange($event)"
- />
+ <nz-form-item>
+ <nz-form-label nzSpan="7" [nzRequired]="true" [nzFor]="'host'">{{
hostName ? hostName : ('monitor.host' | i18n) }} </nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="{
+ field: 'host',
+ type: 'text',
+ required: true,
+ placeholder: 'monitor.host.tip' | i18n
+ }"
+ [name]="'host'"
+ [(ngModel)]="monitor.host"
+ (ngModelChange)="onHostChange($event)"
+ />
+ </nz-form-control>
+ </nz-form-item>
- <app-form-item
- [item]="{
- field: 'name',
- type: 'text',
- name: 'monitor.name' | i18n,
- required: true,
- placeholder: 'monitor.name.tip' | i18n
- }"
- [(value)]="monitor.name"
- />
+ <nz-form-item>
+ <nz-form-label nzSpan="7" [nzRequired]="true" [nzFor]="'name'">{{
'monitor.name' | i18n }} </nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="{
+ field: 'name',
+ type: 'text',
+ required: true,
+ placeholder: 'monitor.name.tip' | i18n
+ }"
+ [name]="'name'"
+ [(ngModel)]="monitor.name"
+ />
+ </nz-form-control>
+ </nz-form-item>
<ng-container *ngFor="let paramDefine of paramDefines; let i = index">
- <app-form-item
- *ngIf="params[i].display !== false && paramDefine.field !== 'host'"
- [item]="paramDefine"
- [(value)]="params[i].paramValue"
- (valueChange)="
- paramDefine.type === 'boolean'
- ? onParamBooleanChanged($event, paramDefine.field)
- : paramDefine.type === 'radio'
- ? onDependChanged($event, paramDefine.field)
- : null
- "
- />
+ <nz-form-item *ngIf="params[i].display !== false && paramDefine.field
!== 'host'">
+ <nz-form-label nzSpan="7" [nzRequired]="paramDefine.required"
[nzFor]="paramDefine.field">{{ paramDefine.name }} </nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="paramDefine"
+ [name]="paramDefine.field"
+ [(ngModel)]="params[i].paramValue"
+ (ngModelChange)="
+ paramDefine.type === 'boolean'
+ ? onParamBooleanChanged($event, paramDefine.field)
+ : paramDefine.type === 'radio'
+ ? onDependChanged($event, paramDefine.field)
+ : null
+ "
+ />
+ </nz-form-control>
+ </nz-form-item>
</ng-container>
<nz-collapse *ngIf="hasAdvancedParams" [nzGhost]="true"
style="background: ghostwhite; margin-bottom: 24px">
@@ -67,56 +82,81 @@
</ng-template>
<nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
<ng-container *ngFor="let paramDefine of advancedParamDefines; let i
= index">
- <app-form-item
- *ngIf="advancedParams[i].display && paramDefine.field !== 'host'"
- [item]="paramDefine"
- [(value)]="advancedParams[i].paramValue"
- />
+ <nz-form-item *ngIf="advancedParams[i].display !== false &&
paramDefine.field !== 'host'">
+ <nz-form-label nzSpan="7" [nzRequired]="paramDefine.required"
[nzFor]="paramDefine.field"
+ >{{ paramDefine.name }}
+ </nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required'
| i18n">
+ <app-form-field [item]="paramDefine"
[name]="paramDefine.field" [(ngModel)]="advancedParams[i].paramValue" />
+ </nz-form-control>
+ </nz-form-item>
</ng-container>
</nz-collapse-panel>
</nz-collapse>
- <app-form-item
- [item]="{
- field: 'collector',
- type: 'collectors-selection',
- name: 'monitor.collector' | i18n,
- tooltip: 'monitor.collector.tip' | i18n
- }"
- [extra]="{collectors}"
- [(value)]="collector"
- />
+ <nz-form-item>
+ <nz-form-label nzSpan="7" [nzFor]="'collector'"
[nzTooltipTitle]="'monitor.collector.tip' | i18n"
+ >{{ 'monitor.collector' | i18n }}
+ </nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="{
+ field: 'collector',
+ type: 'collectors-selection'
+ }"
+ [extra]="{collectors}"
+ [name]="'collector'"
+ [(ngModel)]="collector"
+ />
+ </nz-form-control>
+ </nz-form-item>
- <app-form-item
- [item]="{
- field: 'intervals',
- type: 'intervals',
- name: 'monitor.intervals' | i18n,
- tooltip: 'monitor.intervals.tip' | i18n
- }"
- [extra]="{ interval_type: monitor.app }"
- [(value)]="monitor.intervals"
- />
+ <nz-form-item>
+ <nz-form-label nzSpan="7" [nzFor]="'intervals'"
[nzTooltipTitle]="'monitor.intervals.tip' | i18n"
+ >{{ 'monitor.intervals' | i18n }}
+ </nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="{
+ field: 'intervals',
+ type: 'intervals'
+ }"
+ [extra]="{ interval_type: monitor.app }"
+ [name]="'intervals'"
+ [(ngModel)]="monitor.intervals"
+ />
+ </nz-form-control>
+ </nz-form-item>
- <app-form-item
- [item]="{
- field: 'tags',
- type: 'tags-selection',
- name: 'tag.bind' | i18n,
- tooltip: 'tag.bind.tip' | i18n
- }"
- [(value)]="monitor.tags"
- />
+ <nz-form-item>
+ <nz-form-label nzSpan="7" [nzFor]="'tags'"
[nzTooltipTitle]="'tag.bind.tip' | i18n">{{ 'tag.bind' | i18n }}
</nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="{
+ field: 'tags',
+ type: 'tags-selection'
+ }"
+ [name]="'tags'"
+ [(ngModel)]="monitor.tags"
+ />
+ </nz-form-control>
+ </nz-form-item>
- <app-form-item
- [item]="{
- field: 'description',
- type: 'textarea-limit',
- name: 'monitor.description' | i18n,
- tooltip: 'monitor.description.tip' | i18n
- }"
- [(value)]="monitor.description"
- />
+ <nz-form-item>
+ <nz-form-label nzSpan="7" [nzFor]="'description'"
[nzTooltipTitle]="'monitor.description.tip' | i18n"
+ >{{ 'monitor.description' | i18n }}
+ </nz-form-label>
+ <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' |
i18n">
+ <app-form-field
+ [item]="{
+ field: 'description',
+ type: 'textarea-limit'
+ }"
+ [name]="'description'"
+ [(ngModel)]="monitor.description"
+ />
+ </nz-form-control>
+ </nz-form-item>
<div nz-row>
<div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 8, offset: 7 }"
style="text-align: center">
diff --git
a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less
b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less
index a4d26c668..65cf20207 100644
--- a/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less
+++ b/web-app/src/app/routes/monitor/monitor-form/monitor-form.component.less
@@ -1,10 +1,8 @@
:host {
::ng-deep {
.ant-collapse-content-box {
- :last-child {
- .ant-form-item {
- margin-bottom: 0!important;
- }
+ .ant-form-item:last-child {
+ margin-bottom: 0!important;
}
}
}
diff --git
a/web-app/src/app/shared/components/form-field/form-field.component.html
b/web-app/src/app/shared/components/form-field/form-field.component.html
new file mode 100644
index 000000000..f03ef101b
--- /dev/null
+++ b/web-app/src/app/shared/components/form-field/form-field.component.html
@@ -0,0 +1,171 @@
+<!--
+ ~ 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.
+-->
+
+<app-multi-func-input
+ *ngIf="item.type === 'text' || item.type === 'array'"
+ [(value)]="value"
+ (valueChange)="onChange($event)"
+ [required]="item.required"
+ [name]="item.field"
+ [type]="item.type"
+ [id]="item.field"
+ [placeholder]="item.placeholder ? item.placeholder : ''"
+ groupStyle="width: 100%"
+/>
+
+<textarea
+ nz-input
+ *ngIf="item.type === 'textarea'"
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
+ [required]="item.required"
+ [name]="item.field"
+ [id]="item.field"
+ [placeholder]="item.placeholder ? item.placeholder : ''"
+ rows="8"
+></textarea>
+
+<app-multi-func-input
+ *ngIf="item.type === 'password'"
+ [placeholder]="item.placeholder ? item.placeholder : ''"
+ [(value)]="value"
+ (valueChange)="onChange($event)"
+ [required]="item.required"
+ [name]="item.field"
+ [id]="item.field"
+ groupStyle="width: 100%"
+ type="password"
+/>
+
+<nz-input-number
+ *ngIf="item.type === 'number'"
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
+ [required]="item.required"
+ [nzMin]="-1000"
+ [nzMax]="65535"
+ [nzStep]="1"
+ [nzPlaceHolder]="item.placeholder ? item.placeholder : ''"
+ [name]="item.field"
+ [id]="item.field"
+/>
+
+<nz-switch
+ *ngIf="item.type === 'boolean'"
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
+ [required]="item.required"
+ [name]="item.field"
+ [id]="item.field"
+/>
+
+<nz-radio-group
+ *ngIf="item.type === 'radio'"
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
+ [required]="item.required"
+ nzButtonStyle="solid"
+ [name]="item.field"
+ [id]="item.field"
+>
+ <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem
of item.options">
+ {{ optionItem.label }}
+ </label>
+</nz-radio-group>
+
+<app-key-value-input
+ *ngIf="item.type === 'key-value'"
+ [(value)]="value"
+ (valueChange)="onChange($event)"
+ [id]="item.field"
+ keyAlias="Header Name"
+ valueAlias="Header Value"
+/>
+
+<app-metrics-field-input
+ *ngIf="item.type === 'metrics-field'"
+ [(value)]="value"
+ (valueChange)="onChange($event)"
+ [id]="item.field"
+ [FieldAlias]="'Field'"
+ [UnitAlias]="'Unit'"
+ [TypeAlias]="'Type'"
+/>
+
+<ng-container *ngIf="item.type === 'collectors-selection'">
+ <nz-select
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
+ [nzDropdownMatchSelectWidth]="false"
+ name="collector"
+ id="collector"
+ [nzCustomTemplate]="collectorTemplate"
+ >
+ <nz-option
+ nzCustomContent
+ [nzValue]="''"
+ [nzLabel]="('monitor.collector.system.default' | i18n) + '-' +
('collector.mode.public' | i18n)"
+ >
+ <nz-tag nzColor="processing">{{ 'monitor.collector.system.default' |
i18n }}</nz-tag>
+ <nz-tag nzColor="success">{{ 'collector.mode.public' | i18n }}</nz-tag>
+ </nz-option>
+ <nz-option nzCustomContent *ngFor="let item of extra.collectors"
[nzValue]="item.name" [nzLabel]="item.name">
+ <nz-tag [nzColor]="item.status == 0 ? 'processing' : 'error'">{{
+ item.status == 0 ? ('monitor.collector.status.online' | i18n) :
('monitor.collector.status.offline' | i18n)
+ }}</nz-tag>
+ <span nz-icon nzType="bug" nzTheme="outline" style="margin-right:
8px"></span>
+ <nz-tag nzColor="processing">{{ item.name }}</nz-tag>
+ <nz-tag nzColor="processing">{{ item.ip }}</nz-tag>
+ <nz-tag [nzColor]="item.mode == 'private' ? 'warning' : 'success'">
+ {{ item.mode == 'private' ? ('collector.mode.private' | i18n) :
('collector.mode.public' | i18n) }}
+ </nz-tag>
+ </nz-option>
+ </nz-select>
+ <ng-template #collectorTemplate let-selected>
+ <nz-tag nzColor="processing">{{ selected.nzLabel }}</nz-tag>
+ </ng-template>
+</ng-container>
+
+<ng-container *ngIf="item.type === 'intervals'">
+ <nz-input-number
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
+ [nzMin]="extra.interval_type === 'push' ? 1 : 30"
+ [nzMax]="604800"
+ [nzStep]="extra.interval_type === 'push' ? 1 : 60"
+ name="intervals"
+ id="intervals"
+ >
+ </nz-input-number>
+ <nz-tag style="margin-left: 6px">{{ 'common.time.unit.second' | i18n
}}</nz-tag>
+</ng-container>
+
+<app-tags-select *ngIf="item.type === 'tags-selection'"
[mode]="extra.tag_mode" [(value)]="value" (valueChange)="onChange($event)" />
+
+<nz-textarea-count *ngIf="item.type === 'textarea-limit'"
[nzMaxCharacterCount]="extra.textarea_limit || 100">
+ <textarea
+ [(ngModel)]="value"
+ (ngModelChange)="onChange($event)"
+ rows="3"
+ nz-input
+ [name]="item.field"
+ [id]="item.field"
+ [placeholder]="item.placeholder ? item.placeholder : ''"
+ ></textarea>
+</nz-textarea-count>
diff --git
a/web-app/src/app/shared/components/form-item/form-item.component.less
b/web-app/src/app/shared/components/form-field/form-field.component.less
similarity index 100%
rename from web-app/src/app/shared/components/form-item/form-item.component.less
rename to web-app/src/app/shared/components/form-field/form-field.component.less
diff --git
a/web-app/src/app/shared/components/form-item/form-item.component.spec.ts
b/web-app/src/app/shared/components/form-field/form-field.component.spec.ts
similarity index 80%
rename from
web-app/src/app/shared/components/form-item/form-item.component.spec.ts
rename to
web-app/src/app/shared/components/form-field/form-field.component.spec.ts
index 581e39d34..971578a9d 100644
--- a/web-app/src/app/shared/components/form-item/form-item.component.spec.ts
+++ b/web-app/src/app/shared/components/form-field/form-field.component.spec.ts
@@ -19,20 +19,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormItemComponent } from './form-item.component';
+import { FormFieldComponent } from './form-field.component';
-describe('FormItemComponent', () => {
- let component: FormItemComponent;
- let fixture: ComponentFixture<FormItemComponent>;
+describe('FormFieldComponent', () => {
+ let component: FormFieldComponent;
+ let fixture: ComponentFixture<FormFieldComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [FormItemComponent]
+ declarations: [FormFieldComponent]
}).compileComponents();
});
beforeEach(() => {
- fixture = TestBed.createComponent(FormItemComponent);
+ fixture = TestBed.createComponent(FormFieldComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git
a/web-app/src/app/shared/components/form-field/form-field.component.ts
b/web-app/src/app/shared/components/form-field/form-field.component.ts
new file mode 100644
index 000000000..35da45aac
--- /dev/null
+++ b/web-app/src/app/shared/components/form-field/form-field.component.ts
@@ -0,0 +1,81 @@
+/*
+ * 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 { AbstractControl, ControlValueAccessor, NG_VALIDATORS,
NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+
+@Component({
+ selector: 'app-form-field',
+ templateUrl: './form-field.component.html',
+ styleUrls: ['./form-field.component.less'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ multi: true,
+ useExisting: FormFieldComponent
+ },
+ {
+ provide: NG_VALIDATORS,
+ multi: true,
+ useExisting: FormFieldComponent
+ }
+ ]
+})
+export class FormFieldComponent implements ControlValueAccessor, Validator {
+ constructor() {}
+ @Input() item!: any;
+ @Input() extra: any = {};
+
+ value: any;
+ validateStatus!: string;
+
+ _onChange: Function = () => {};
+ _onTouched: Function = () => {};
+
+ writeValue(value: any): void {
+ this.value = value;
+ }
+
+ registerOnChange(fn: Function): void {
+ this._onChange = fn;
+ }
+
+ registerOnTouched(fn: Function): void {
+ this._onTouched = fn;
+ }
+
+ validate(control: AbstractControl): ValidationErrors | null {
+ // if (!(control.dirty) && !(control.touched)) return null;
+ let { value } = control;
+ if (this.item.required && (value === null || value === undefined || value
=== '')) {
+ this.validateStatus = 'error';
+ return {
+ required: {
+ valid: false
+ }
+ };
+ }
+ this.validateStatus = '';
+ return null;
+ }
+
+ onChange(value: any) {
+ this._onChange(value);
+ }
+}
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
deleted file mode 100644
index 9d7656628..000000000
--- a/web-app/src/app/shared/components/form-item/form-item.component.html
+++ /dev/null
@@ -1,227 +0,0 @@
-<!--
- ~ 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.
--->
-
-<nz-form-item *ngIf="item.type === 'text' || item.type === 'array'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <input
- nz-input
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- [required]="item.required"
- [name]="item.field"
- [type]="item.type"
- [id]="item.field"
- [placeholder]="item.placeholder ? item.placeholder : ''"
- />
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'textarea'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <textarea
- nz-input
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- [required]="item.required"
- [name]="item.field"
- [id]="item.field"
- [placeholder]="item.placeholder ? item.placeholder : ''"
- rows="8"
- ></textarea>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'password'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <app-multi-func-input
- [placeholder]="item.placeholder ? item.placeholder : ''"
- [(value)]="value"
- (valueChange)="onChange($event)"
- [required]="item.required"
- [name]="item.field"
- [id]="item.field"
- groupStyle="width: 100%"
- type="password"
- />
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'number'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <nz-input-number
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- [required]="item.required"
- [nzMin]="-1000"
- [nzMax]="65535"
- [nzStep]="1"
- [nzPlaceHolder]="item.placeholder ? item.placeholder : ''"
- [name]="item.field"
- [id]="item.field"
- ></nz-input-number>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'boolean'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <nz-switch
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- [required]="item.required"
- [name]="item.field"
- [id]="item.field"
- ></nz-switch>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'radio'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <nz-radio-group
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- [required]="item.required"
- nzButtonStyle="solid"
- [name]="item.field"
- [id]="item.field"
- >
- <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let
optionItem of item.options">
- {{ optionItem.label }}
- </label>
- </nz-radio-group>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'key-value'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <app-key-value-input
- [(value)]="value"
- (valueChange)="onChange($event)"
- [id]="item.field"
- keyAlias="Header Name"
- valueAlias="Header Value"
- ></app-key-value-input>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'metrics-field'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required"
[nzFor]="item.field">{{ item.name }} </nz-form-label>
- <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
- <app-metrics-field-input
- [(value)]="value"
- (valueChange)="onChange($event)"
- [id]="item.field"
- [FieldAlias]="'Field'"
- [UnitAlias]="'Unit'"
- [TypeAlias]="'Type'"
- ></app-metrics-field-input>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'collectors-selection'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required" [nzFor]="item.field"
[nzTooltipTitle]="item.tooltip"
- >{{ item.name }}
- </nz-form-label>
- <nz-form-control nzSpan="8">
- <nz-select
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- [nzDropdownMatchSelectWidth]="false"
- name="collector"
- id="collector"
- [nzCustomTemplate]="collectorTemplate"
- >
- <nz-option
- nzCustomContent
- [nzValue]="''"
- [nzLabel]="('monitor.collector.system.default' | i18n) + '-' +
('collector.mode.public' | i18n)"
- >
- <nz-tag nzColor="processing">{{ 'monitor.collector.system.default' |
i18n }}</nz-tag>
- <nz-tag nzColor="success">{{ 'collector.mode.public' | i18n }}</nz-tag>
- </nz-option>
- <nz-option nzCustomContent *ngFor="let item of extra.collectors"
[nzValue]="item.name" [nzLabel]="item.name">
- <nz-tag [nzColor]="item.status == 0 ? 'processing' : 'error'">{{
- item.status == 0 ? ('monitor.collector.status.online' | i18n) :
('monitor.collector.status.offline' | i18n)
- }}</nz-tag>
- <span nz-icon nzType="bug" nzTheme="outline" style="margin-right:
8px"></span>
- <nz-tag nzColor="processing">{{ item.name }}</nz-tag>
- <nz-tag nzColor="processing">{{ item.ip }}</nz-tag>
- <nz-tag [nzColor]="item.mode == 'private' ? 'warning' : 'success'">
- {{ item.mode == 'private' ? ('collector.mode.private' | i18n) :
('collector.mode.public' | i18n) }}
- </nz-tag>
- </nz-option>
- </nz-select>
- <ng-template #collectorTemplate let-selected>
- <nz-tag nzColor="processing">{{ selected.nzLabel }}</nz-tag>
- </ng-template>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'intervals'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required" [nzFor]="item.field"
[nzTooltipTitle]="item.tooltip"
- >{{ item.name }}
- </nz-form-label>
- <nz-form-control nzSpan="8">
- <nz-input-number
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- [nzMin]="extra.interval_type === 'push' ? 1 : 30"
- [nzMax]="604800"
- [nzStep]="extra.interval_type === 'push' ? 1 : 60"
- name="intervals"
- id="intervals"
- >
- </nz-input-number>
- <nz-tag style="margin-left: 6px">{{ 'common.time.unit.second' | i18n
}}</nz-tag>
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'tags-selection'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required" [nzFor]="item.field"
[nzTooltipTitle]="item.tooltip"
- >{{ item.name }}
- </nz-form-label>
- <nz-form-control nzSpan="8">
- <app-tags-select [mode]="extra.tag_mode" [(value)]="value"
(valueChange)="onChange($event)" />
- </nz-form-control>
-</nz-form-item>
-
-<nz-form-item *ngIf="item.type === 'textarea-limit'">
- <nz-form-label nzSpan="7" [nzRequired]="item.required" [nzFor]="item.field"
[nzTooltipTitle]="item.tooltip"
- >{{ item.name }}
- </nz-form-label>
- <nz-form-control [nzSpan]="8">
- <nz-textarea-count [nzMaxCharacterCount]="extra.textarea_limit || 100">
- <textarea
- [(ngModel)]="value"
- (ngModelChange)="onChange($event)"
- rows="3"
- nz-input
- [name]="item.field"
- [id]="item.field"
- [placeholder]="item.placeholder ? item.placeholder : ''"
- ></textarea>
- </nz-textarea-count>
- </nz-form-control>
-</nz-form-item>
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
deleted file mode 100644
index 5559dce1c..000000000
--- a/web-app/src/app/shared/components/form-item/form-item.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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';
-
-@Component({
- selector: 'app-form-item',
- templateUrl: './form-item.component.html',
- styleUrls: ['./form-item.component.less']
-})
-export class FormItemComponent {
- constructor() {}
- @Input() item!: any;
- @Input() value!: any;
- @Input() extra: any = {};
- @Output() readonly valueChange = new EventEmitter<any>();
-
- onChange(value: any) {
- this.valueChange.emit(value);
- }
-}
diff --git a/web-app/src/app/shared/shared.module.ts
b/web-app/src/app/shared/shared.module.ts
index 3188c585b..bea3cd89d 100644
--- a/web-app/src/app/shared/shared.module.ts
+++ b/web-app/src/app/shared/shared.module.ts
@@ -11,7 +11,7 @@ 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 { FormFieldComponent } from
'./components/form-field/form-field.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';
@@ -33,7 +33,7 @@ const COMPONENTS: Array<Type<void>> = [
HelpMessageShowComponent,
MetricsFieldInputComponent,
ToolbarComponent,
- FormItemComponent,
+ FormFieldComponent,
MonitorSelectMenuComponent
];
const DIRECTIVES: Array<Type<void>> = [TimezonePipe, I18nElsePipe,
ElapsedTimePipe];
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
