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 657de4f5b Add an input box component with a removal function. (#2127)
657de4f5b is described below
commit 657de4f5b64baf2fbfdb548e58455ffa7f319375
Author: Kerwin Bryant <[email protected]>
AuthorDate: Mon Jun 24 17:19:26 2024 +0800
Add an input box component with a removal function. (#2127)
---
.../monitor-list/monitor-list.component.html | 24 +++++-----
.../multi-func-input.component.html | 35 +++++++++++++++
.../multi-func-input.component.less | 0
.../multi-func-input.component.spec.ts | 43 ++++++++++++++++++
.../multi-func-input/multi-func-input.component.ts | 51 ++++++++++++++++++++++
web-app/src/app/shared/shared.module.ts | 8 +++-
6 files changed, 146 insertions(+), 15 deletions(-)
diff --git
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
index 10b368c74..847db06d9 100644
--- 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
@@ -89,25 +89,21 @@
<button style="margin-right: 25px; float: right" class="mobile-hide"
nz-button nzType="primary" (click)="onFilterSearchMonitors()">
{{ 'common.search' | i18n }}
</button>
- <input
- style="margin-right: 5px; float: right; width: 180px; border-radius: 9px;
text-align: center"
+ <app-multi-func-input
+ groupStyle="margin-right: 5px; float: right; width: 180px; border-radius:
9px;"
+ inputStyle="text-align: center"
class="mobile-hide"
- nz-input
- type="text"
[placeholder]="'monitors.search.placeholder' | i18n"
- nzSize="default"
- (keyup.enter)="onFilterSearchMonitors()"
- [(ngModel)]="filterContent"
+ [(value)]="filterContent"
+ (valueChange)="onFilterSearchMonitors()"
/>
- <input
- style="margin-right: 5px; float: right; width: 90px; border-radius: 9px;
text-align: center"
+ <app-multi-func-input
+ groupStyle="margin-right: 10px; float: right; width: 90px; border-radius:
9px;"
+ inputStyle="text-align: center"
class="mobile-hide"
- nz-input
- type="text"
[placeholder]="'monitors.search.tag' | i18n"
- nzSize="default"
- (keyup.enter)="onFilterSearchMonitors()"
- [(ngModel)]="tag"
+ [(value)]="tag"
+ (valueChange)="onFilterSearchMonitors()"
/>
<nz-select
style="margin-right: 10px; float: right"
diff --git
a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html
b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html
new file mode 100755
index 000000000..2a955cda0
--- /dev/null
+++
b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html
@@ -0,0 +1,35 @@
+<!--
+ ~ 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-input-group [nzSuffix]="inputClearTpl" [style]="groupStyle">
+ <input
+ nz-input
+ [(ngModel)]="inputValue"
+ [placeholder]="placeholder"
+ [type]="type"
+ [style]="inputStyle"
+ [nzSize]="size"
+ (ngModelChange)="onChange()"
+ />
+</nz-input-group>
+<ng-template #inputClearTpl>
+ @if (allowClear && inputValue) {
+ <span nz-icon class="ant-input-clear-icon" nzTheme="fill"
nzType="close-circle" (click)="inputValue = null; onChange()"></span>
+ }
+</ng-template>
diff --git
a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.less
b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.less
new file mode 100755
index 000000000..e69de29bb
diff --git
a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.spec.ts
b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.spec.ts
new file mode 100755
index 000000000..6720e9917
--- /dev/null
+++
b/web-app/src/app/shared/components/multi-func-input/multi-func-input.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 { MultiFuncInputComponent } from './multi-func-input.component';
+
+describe('MultiFuncInputComponent', () => {
+ let component: MultiFuncInputComponent;
+ let fixture: ComponentFixture<MultiFuncInputComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [MultiFuncInputComponent]
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MultiFuncInputComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git
a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts
b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts
new file mode 100755
index 000000000..eef08a19c
--- /dev/null
+++
b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts
@@ -0,0 +1,51 @@
+/*
+ * 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, OnInit, EventEmitter, Input, Output } from '@angular/core';
+import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
+
+@Component({
+ selector: 'app-multi-func-input',
+ templateUrl: './multi-func-input.component.html',
+ styleUrls: ['./multi-func-input.component.less']
+})
+export class MultiFuncInputComponent implements OnInit {
+ constructor() {}
+
+ @Input() value!: any;
+ @Input() groupStyle!: string;
+ @Input() inputStyle!: string;
+ @Input() placeholder!: string;
+ @Input() allowClear: boolean = true;
+ @Input() type: string = 'text';
+ @Input() size: NzSizeLDSType = 'default';
+ @Output() readonly valueChange = new EventEmitter<string>();
+
+ inputValue: any | undefined;
+
+ ngOnInit(): void {
+ this.inputValue = this.value;
+ }
+
+ onChange() {
+ if (this.inputValue !== this.value) {
+ this.valueChange.emit(this.inputValue);
+ }
+ }
+}
diff --git a/web-app/src/app/shared/shared.module.ts
b/web-app/src/app/shared/shared.module.ts
index 97bf84341..81ed05447 100644
--- a/web-app/src/app/shared/shared.module.ts
+++ b/web-app/src/app/shared/shared.module.ts
@@ -11,6 +11,7 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
import { HelpMassageShowComponent } from
'./components/help-massage-show/help-massage-show.component';
import { KeyValueInputComponent } from
'./components/key-value-input/key-value-input.component';
import { MetricsFieldInputComponent } from
'./components/metrics-field-input/metrics-field-input.component';
+import { MultiFuncInputComponent } from
'./components/multi-func-input/multi-func-input.component';
import { ElapsedTimePipe } from './pipe/elapsed-time.pipe';
import { I18nElsePipe } from './pipe/i18n-else.pipe';
import { TimezonePipe } from './pipe/timezone.pipe';
@@ -18,7 +19,12 @@ import { SHARED_DELON_MODULES } from './shared-delon.module';
import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
const ThirdModules: Array<Type<void>> = [];
-const COMPONENTS: Array<Type<void>> = [KeyValueInputComponent,
HelpMassageShowComponent, MetricsFieldInputComponent];
+const COMPONENTS: Array<Type<void>> = [
+ KeyValueInputComponent,
+ MultiFuncInputComponent,
+ HelpMassageShowComponent,
+ MetricsFieldInputComponent
+];
const DIRECTIVES: Array<Type<void>> = [TimezonePipe, I18nElsePipe,
ElapsedTimePipe];
@NgModule({
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
