1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
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 { 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 '~/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',
templateUrl: './silence-matcher-modal.component.html',
styleUrls: ['./silence-matcher-modal.component.scss']
})
export class SilenceMatcherModalComponent {
@ViewChild(NgbTypeahead, { static: true })
typeahead: NgbTypeahead;
@Output()
submitAction = new EventEmitter();
form: CdFormGroup;
editMode = false;
rules: PrometheusRule[];
nameAttributes = ['alertname', 'instance', 'job', 'severity'];
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 activeModal: NgbActiveModal,
public actionLabels: ActionLabelsI18n
) {
this.createForm();
this.subscribeToChanges();
}
private createForm() {
this.form = this.formBuilder.group({
name: [null, [Validators.required]],
value: [{ value: '', disabled: true }, [Validators.required]],
isRegex: new FormControl(false)
});
}
private subscribeToChanges() {
this.form.get('name').valueChanges.subscribe((name) => {
if (name === null) {
this.form.get('value').disable();
return;
}
this.setPossibleValues(name);
this.form.get('value').enable();
});
this.form.get('value').valueChanges.subscribe((value) => {
const values = this.form.value;
values.value = value; // Isn't the current value at this stage
this.matcherMatch = this.silenceMatcher.singleMatch(values, this.rules);
});
}
private setPossibleValues(name: string) {
this.possibleValues = _.sortedUniq(
this.rules.map((r) => _.get(r, this.silenceMatcher.getAttributePath(name))).filter((x) => x)
);
}
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.activeModal.close();
}
}
|
