update source to Ceph Pacific 16.2.2

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / cluster / prometheus / silence-matcher-modal / silence-matcher-modal.component.ts

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts
index 139a3ee23a87dd0648d99423bfe72cf63c240968..bdd616ce9c60f9de1d8ad8e04854a4389dd1ad6c 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.ts
@@ -1,17 +1,20 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 
-import * as _ from 'lodash';
-import { BsModalRef } from 'ngx-bootstrap/modal';
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
+import _ from 'lodash';
+import { merge, Observable, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
 
-import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder';
-import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
+import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
+import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import {
   AlertmanagerSilenceMatcher,
   AlertmanagerSilenceMatcherMatch
-} from '../../../../shared/models/alertmanager-silence';
-import { PrometheusRule } from '../../../../shared/models/prometheus-alerts';
-import { PrometheusSilenceMatcherService } from '../../../../shared/services/prometheus-silence-matcher.service';
+} from '~/app/shared/models/alertmanager-silence';
+import { PrometheusRule } from '~/app/shared/models/prometheus-alerts';
+import { PrometheusSilenceMatcherService } from '~/app/shared/services/prometheus-silence-matcher.service';
 
 @Component({
   selector: 'cd-silence-matcher-modal',
@@ -19,6 +22,8 @@ import { PrometheusSilenceMatcherService } from '../../../../shared/services/pro
   styleUrls: ['./silence-matcher-modal.component.scss']
 })
 export class SilenceMatcherModalComponent {
+  @ViewChild(NgbTypeahead, { static: true })
+  typeahead: NgbTypeahead;
   @Output()
   submitAction = new EventEmitter();
 
@@ -29,10 +34,29 @@ export class SilenceMatcherModalComponent {
   possibleValues: string[] = [];
   matcherMatch: AlertmanagerSilenceMatcherMatch = undefined;
 
+  // For typeahead usage
+  valueClick = new Subject<string>();
+  valueFocus = new Subject<string>();
+  search = (text$: Observable<string>) => {
+    return merge(
+      text$.pipe(debounceTime(200), distinctUntilChanged()),
+      this.valueFocus,
+      this.valueClick.pipe(filter(() => !this.typeahead.isPopupOpen()))
+    ).pipe(
+      map((term) =>
+        (term === ''
+          ? this.possibleValues
+          : this.possibleValues.filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
+        ).slice(0, 10)
+      )
+    );
+  };
+
   constructor(
     private formBuilder: CdFormBuilder,
     private silenceMatcher: PrometheusSilenceMatcherService,
-    public bsModalRef: BsModalRef
+    public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n
   ) {
     this.createForm();
     this.subscribeToChanges();
@@ -41,7 +65,7 @@ export class SilenceMatcherModalComponent {
   private createForm() {
     this.form = this.formBuilder.group({
       name: [null, [Validators.required]],
-      value: [{ value: null, disabled: true }, [Validators.required]],
+      value: [{ value: '', disabled: true }, [Validators.required]],
       isRegex: new FormControl(false)
     });
   }
@@ -68,12 +92,16 @@ export class SilenceMatcherModalComponent {
     );
   }
 
+  getMode() {
+    return this.editMode ? this.actionLabels.EDIT : this.actionLabels.ADD;
+  }
+
   preFillControls(matcher: AlertmanagerSilenceMatcher) {
     this.form.setValue(matcher);
   }
 
   onSubmit() {
     this.submitAction.emit(this.form.value);
-    this.bsModalRef.hide();
+    this.activeModal.close();
   }
 }