1 files changed, 85 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
new file mode 100644
index 000000000..db89adc53
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-matcher-modal/silence-matcher-modal.component.html
@@ -0,0 +1,85 @@
+<cd-modal [modalRef]="activeModal">
+  <span class="modal-title"
+        i18n>{editMode, select, true {Edit} other {Add}} Matcher</span>
+
+  <ng-container class="modal-content">
+    <form class="form"
+          #formDir="ngForm"
+          [formGroup]="form"
+          novalidate>
+      <div class="modal-body">
+        <!-- Name -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="name"
+                 i18n>Name</label>
+          <div class="cd-col-form-input">
+            <select class="form-control"
+                    id="name"
+                    formControlName="name"
+                    name="name">
+              <option [ngValue]="null"
+                      i18n>-- Select an attribute to match against --</option>
+              <option *ngFor="let attribute of nameAttributes"
+                      [value]="attribute">
+                {{ attribute }}
+              </option>
+            </select>
+            <span class="help-block"
+                  *ngIf="form.showError('name', formDir, 'required')"
+                  i18n>This field is required!</span>
+          </div>
+        </div>
+
+        <!-- Value -->
+        <div class="form-group row">
+          <label class="cd-col-form-label required"
+                 for="value"
+                 i18n>Value</label>
+          <div class="cd-col-form-input">
+            <input id="value"
+                   (focus)="valueFocus.next($any($event).target.value)"
+                   (click)="valueClick.next($any($event).target.value)"
+                   container="body"
+                   class="form-control"
+                   type="text"
+                   [ngbTypeahead]="search"
+                   formControlName="value">
+            <span *ngIf="form.showError('value', formDir, 'required')"
+                  class="help-block"
+                  i18n>This field is required!</span>
+          </div>
+          <div *ngIf="form.getValue('value') && !form.getValue('isRegex') && matcherMatch"
+               class="cd-col-form-offset {{matcherMatch.cssClass}}"
+               id="match-state">
+            <span class="text-muted {{matcherMatch.cssClass}}">
+              {{matcherMatch.status}}
+            </span>
+          </div>
+        </div>
+
+        <!-- isRegex -->
+        <div class="form-group row">
+          <div class="cd-col-form-offset">
+            <div class="custom-control custom-checkbox">
+              <input type="checkbox"
+                     class="custom-control-input"
+                     formControlName="isRegex"
+                     name="is-regex"
+                     id="is-regex">
+              <label for="is-regex"
+                     class="custom-control-label"
+                     i18n>Use regular expression</label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                              [form]="form"
+                              [submitText]="getMode()"></cd-form-button-panel>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>