git.apps.os.sepia.ceph.com Git - ceph-ci.git/blob

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