Add an input box component with a removal function. (#2127)

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"

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>

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();
+  });
+});

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);
+    }
+  }
+}

web-app/src/app/shared/shared.module.ts

@@ -11,14 +11,20 @@ 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';
 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({