git-server-git.apps.pok.os.sepia.ceph.com Git - ceph.git/blob

   1 import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
   2 import { FormControl, Validators } from '@angular/forms';
   3
   4 import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
   5 import _ from 'lodash';
   6 import { merge, Observable, Subject } from 'rxjs';
   7 import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators';
   8
   9 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
  10 import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
  11 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
  12 import {
  13   AlertmanagerSilenceMatcher,
  14   AlertmanagerSilenceMatcherMatch
  15 } from '~/app/shared/models/alertmanager-silence';
  16 import { PrometheusRule } from '~/app/shared/models/prometheus-alerts';
  17 import { PrometheusSilenceMatcherService } from '~/app/shared/services/prometheus-silence-matcher.service';
  18
  19 @Component({
  20   selector: 'cd-silence-matcher-modal',
  21   templateUrl: './silence-matcher-modal.component.html',
  22   styleUrls: ['./silence-matcher-modal.component.scss']
  23 })
  24 export class SilenceMatcherModalComponent {
  25   @ViewChild(NgbTypeahead, { static: true })
  26   typeahead: NgbTypeahead;
  27   @Output()
  28   submitAction = new EventEmitter();
  29
  30   form: CdFormGroup;
  31   editMode = false;
  32   rules: PrometheusRule[];
  33   nameAttributes = ['alertname', 'instance', 'job', 'severity'];
  34   possibleValues: string[] = [];
  35   matcherMatch: AlertmanagerSilenceMatcherMatch = undefined;
  36
  37   // For typeahead usage
  38   valueClick = new Subject<string>();
  39   valueFocus = new Subject<string>();
  40   search = (text$: Observable<string>) => {
  41     return merge(
  42       text$.pipe(debounceTime(200), distinctUntilChanged()),
  43       this.valueFocus,
  44       this.valueClick.pipe(filter(() => !this.typeahead.isPopupOpen()))
  45     ).pipe(
  46       map((term) =>
  47         (term === ''
  48           ? this.possibleValues
  49           : this.possibleValues.filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
  50         ).slice(0, 10)
  51       )
  52     );
  53   };
  54
  55   constructor(
  56     private formBuilder: CdFormBuilder,
  57     private silenceMatcher: PrometheusSilenceMatcherService,
  58     public activeModal: NgbActiveModal,
  59     public actionLabels: ActionLabelsI18n
  60   ) {
  61     this.createForm();
  62     this.subscribeToChanges();
  63   }
  64
  65   private createForm() {
  66     this.form = this.formBuilder.group({
  67       name: [null, [Validators.required]],
  68       value: [{ value: '', disabled: true }, [Validators.required]],
  69       isRegex: new FormControl(false)
  70     });
  71   }
  72
  73   private subscribeToChanges() {
  74     this.form.get('name').valueChanges.subscribe((name) => {
  75       if (name === null) {
  76         this.form.get('value').disable();
  77         return;
  78       }
  79       this.setPossibleValues(name);
  80       this.form.get('value').enable();
  81     });
  82     this.form.get('value').valueChanges.subscribe((value) => {
  83       const values = this.form.value;
  84       values.value = value; // Isn't the current value at this stage
  85       this.matcherMatch = this.silenceMatcher.singleMatch(values, this.rules);
  86     });
  87   }
  88
  89   private setPossibleValues(name: string) {
  90     this.possibleValues = _.sortedUniq(
  91       this.rules.map((r) => _.get(r, this.silenceMatcher.getAttributePath(name))).filter((x) => x)
  92     );
  93   }
  94
  95   getMode() {
  96     return this.editMode ? this.actionLabels.EDIT : this.actionLabels.ADD;
  97   }
  98
  99   preFillControls(matcher: AlertmanagerSilenceMatcher) {
 100     this.form.setValue(matcher);
 101   }
 102
 103   onSubmit() {
 104     this.submitAction.emit(this.form.value);
 105     this.activeModal.close();
 106   }
 107 }