mgr/dashboard: Simplified silence-form matchers list

This commit removes unmeaning icons on the matchers-list component, and
now only displays the information/content needed when viewing and editing
matchers.

Fixes: https://tracker.ceph.com/issues/42306
Signed-off-by: Bryan Montalvan <bmontalv@redhat.com>
(cherry picked from commit fcb47be5eedb5d7d1dd8504a76124093dbd5b702)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
index 02f04a06a4bcdd9ad8a497000862ad312b7ae9de..0cfbf08235095ee17b15a9e4bc95f52144682270 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.html
@@ -5,8 +5,10 @@
     <ng-container *ngFor="let config of matcherConfig">
       <div class="input-group-prepend">
         <span class="input-group-text"
+              *ngIf="config.attribute === 'isRegex'"
               [ngbTooltip]="config.tooltip">
-          <i [ngClass]="[config.icon]"></i>
+          <i *ngIf="matcher[config.attribute]">~</i>
+          <i *ngIf="!matcher[config.attribute]">=</i>
         </span>
       </div>
 
@@ -18,18 +20,6 @@
                disabled
                readonly>
       </ng-container>
-
-      <ng-container *ngIf="config.attribute === 'isRegex'">
-        <div class="input-group-append">
-          <div class="input-group-text">
-            <input type="checkbox"
-                   id="matcher-{{config.attribute}}-{{index}}"
-                   [checked]="matcher[config.attribute]"
-                   disabled
-                   readonly>
-          </div>
-        </div>
-      </ng-container>
     </ng-container>
 
     <!-- Matcher actions -->

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts
index 481413e4a63ea683b1bd7fa928284794490bca37..b4d8a86526dc59946b81f9f5c15100f1ae9a9d9a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.spec.ts
@@ -402,13 +402,7 @@ describe('SilenceFormComponent', () => {
     it('should show added matcher', () => {
       addMatcher('job', 'someJob', true);
       fixtureH.expectIdElementsVisible(
-        [
-          'matcher-name-0',
-          'matcher-value-0',
-          'matcher-isRegex-0',
-          'matcher-edit-0',
-          'matcher-delete-0'
-        ],
+        ['matcher-name-0', 'matcher-value-0', 'matcher-edit-0', 'matcher-delete-0'],
         true
       );
       expectMatch(null);
@@ -421,12 +415,10 @@ describe('SilenceFormComponent', () => {
         [
           'matcher-name-0',
           'matcher-value-0',
-          'matcher-isRegex-0',
           'matcher-edit-0',
           'matcher-delete-0',
           'matcher-name-1',
           'matcher-value-1',
-          'matcher-isRegex-1',
           'matcher-edit-1',
           'matcher-delete-1'
         ],
@@ -441,8 +433,6 @@ describe('SilenceFormComponent', () => {
       fixture.detectChanges();
       fixtureH.expectFormFieldToBe('#matcher-name-0', 'alertname');
       fixtureH.expectFormFieldToBe('#matcher-value-0', 'alert.*');
-      fixtureH.expectFormFieldToBe('#matcher-isRegex-0', 'true');
-      fixtureH.expectFormFieldToBe('#matcher-isRegex-1', 'false');
       expectMatch(null);
     });
 
@@ -465,7 +455,6 @@ describe('SilenceFormComponent', () => {
 
       fixtureH.expectFormFieldToBe('#matcher-name-0', 'alertname');
       fixtureH.expectFormFieldToBe('#matcher-value-0', 'alert0');
-      fixtureH.expectFormFieldToBe('#matcher-isRegex-0', 'false');
       expectMatch('Matches 1 rule with 1 active alert.');
     });
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.ts
index 027485301e42ed5871836e0e89cd608a7593ad9a..958039a31dc716fd7d48fdbff9100b7becd49fb7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/silence-form/silence-form.component.ts
@@ -52,18 +52,15 @@ export class SilenceFormComponent {
   matcherConfig = [
     {
       tooltip: $localize`Attribute name`,
-      icon: this.icons.paragraph,
       attribute: 'name'
     },
-    {
-      tooltip: $localize`Value`,
-      icon: this.icons.terminal,
-      attribute: 'value'
-    },
     {
       tooltip: $localize`Regular expression`,
-      icon: this.icons.magic,
       attribute: 'isRegex'
+    },
+    {
+      tooltip: $localize`Value`,
+      attribute: 'value'
     }
   ];