From fcb47be5eedb5d7d1dd8504a76124093dbd5b702 Mon Sep 17 00:00:00 2001
From: bryanmontalvan <68972382+bryanmontalvan@users.noreply.github.com>
Date: Mon, 27 Jun 2022 15:43:58 -0400
Subject: [PATCH] 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>
---
 .../silence-form/silence-form.component.html     | 16 +++-------------
 .../silence-form/silence-form.component.spec.ts  | 13 +------------
 .../silence-form/silence-form.component.ts       | 11 ++++-------
 3 files changed, 8 insertions(+), 32 deletions(-)

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 02f04a06a4b..0cfbf082350 100644
--- 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 41898315019..e82bd2d274a 100644
--- 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
@@ -404,13 +404,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);
@@ -423,12 +417,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'
         ],
@@ -443,8 +435,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);
     });
 
@@ -467,7 +457,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 b698e4958ed..d573a68e148 100644
--- 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
@@ -50,18 +50,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'
     }
   ];
 
-- 
2.47.3