git.apps.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 * as _ from 'lodash';
   6 import { merge, Observable, Subject } from 'rxjs';
   7 import { debounceTime, distinctUntilChanged, filter, 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   @ViewChild(NgbTypeahead, { static: true })
  25   typeahead: NgbTypeahead;
  26   @Output()
  27   submitAction = new EventEmitter();
  28
  29   form: CdFormGroup;
  30   editMode = false;
  31   rules: PrometheusRule[];
  32   nameAttributes = ['alertname', 'instance', 'job', 'severity'];
  33   possibleValues: string[] = [];
  34   matcherMatch: AlertmanagerSilenceMatcherMatch = undefined;
  35
  36   // For typeahead usage
  37   valueClick = new Subject<string>();
  38   valueFocus = new Subject<string>();
  39   search = (text$: Observable<string>) => {
  40     return merge(
  41       text$.pipe(debounceTime(200), distinctUntilChanged()),
  42       this.valueFocus,
  43       this.valueClick.pipe(filter(() => !this.typeahead.isPopupOpen()))
  44     ).pipe(
  45       map((term) =>
  46         (term === ''
  47           ? this.possibleValues
  48           : this.possibleValues.filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
  49         ).slice(0, 10)
  50       )
  51     );
  52   };
  53
  54   constructor(
  55     private formBuilder: CdFormBuilder,
  56     private silenceMatcher: PrometheusSilenceMatcherService,
  57     public activeModal: NgbActiveModal
  58   ) {
  59     this.createForm();
  60     this.subscribeToChanges();
  61   }
  62
  63   private createForm() {
  64     this.form = this.formBuilder.group({
  65       name: [null, [Validators.required]],
  66       value: [{ value: '', disabled: true }, [Validators.required]],
  67       isRegex: new FormControl(false)
  68     });
  69   }
  70
  71   private subscribeToChanges() {
  72     this.form.get('name').valueChanges.subscribe((name) => {
  73       if (name === null) {
  74         this.form.get('value').disable();
  75         return;
  76       }
  77       this.setPossibleValues(name);
  78       this.form.get('value').enable();
  79     });
  80     this.form.get('value').valueChanges.subscribe((value) => {
  81       const values = this.form.value;
  82       values.value = value; // Isn't the current value at this stage
  83       this.matcherMatch = this.silenceMatcher.singleMatch(values, this.rules);
  84     });
  85   }
  86
  87   private setPossibleValues(name: string) {
  88     this.possibleValues = _.sortedUniq(
  89       this.rules.map((r) => _.get(r, this.silenceMatcher.getAttributePath(name))).filter((x) => x)
  90     );
  91   }
  92
  93   preFillControls(matcher: AlertmanagerSilenceMatcher) {
  94     this.form.setValue(matcher);
  95   }
  96
  97   onSubmit() {
  98     this.submitAction.emit(this.form.value);
  99     this.activeModal.close();
 100   }
 101 }