From 4a3b7038d8dce34e4474397abc8fc536eb4a1837 Mon Sep 17 00:00:00 2001
From: David Moreau Simard <moi@dmsimard.com>
Date: Sat, 20 Nov 2021 20:36:50 -0500
Subject: [PATCH] Fix badge pills for task result colors

This brings them back almost to the same behavior as before although the
text changes color on mouse over instead of changing the color of the
badge.
---
 ara/ui/static/css/ara.css                         |  1 +
 ara/ui/templates/partials/host_index_row.html     | 10 +++++-----
 ara/ui/templates/partials/host_results.html       | 12 ++++++------
 ara/ui/templates/partials/playbook_hosts.html     | 10 +++++-----
 ara/ui/templates/partials/playbook_results.html   |  2 +-
 ara/ui/templates/partials/result_status_icon.html | 12 ++++++------
 6 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/ara/ui/static/css/ara.css b/ara/ui/static/css/ara.css
index a73b27f7..2825e600 100644
--- a/ara/ui/static/css/ara.css
+++ b/ara/ui/static/css/ara.css
@@ -26,6 +26,7 @@
 
 .ara-result-status-badge {
     font-size: 90% !important;
+    text-decoration: none;
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
diff --git a/ara/ui/templates/partials/host_index_row.html b/ara/ui/templates/partials/host_index_row.html
index dc955720..7de4978e 100644
--- a/ara/ui/templates/partials/host_index_row.html
+++ b/ara/ui/templates/partials/host_index_row.html
@@ -22,27 +22,27 @@
   </td>
   <td>
     {% if host.ok %}
-    <a class="badge badge-pill badge-success ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=ok#results" title="Search ok results for {{ host.name }}"{% endif %}>
+    <a class="badge rounded-pill bg-success ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=ok#results" title="Search ok results for {{ host.name }}"{% endif %}>
       {{ host.ok }} OK
     </a>
     {% endif %}
     {% if host.changed %}
-    <a class="badge badge-pill badge-warning ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?changed=True#results" title="Search changed results for {{ host.name }}"{% endif %}>
+    <a class="badge rounded-pill bg-warning ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?changed=True#results" title="Search changed results for {{ host.name }}"{% endif %}>
       {{ host.changed }} CHANGED
     </a>
     {% endif %}
     {% if host.failed %}
-    <a class="badge badge-pill badge-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=failed#results" title="Search failed results for {{ host.name }}"{% endif %}>
+    <a class="badge rounded-pill bg-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=failed#results" title="Search failed results for {{ host.name }}"{% endif %}>
       {{ host.failed }} FAILED
     </a>
     {% endif %}
     {% if host.unreachable %}
-    <a class="badge badge-pill badge-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=unreachable#results" title="Search unreachable results for {{ host.name }}"{% endif %}>
+    <a class="badge rounded-pill bg-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=unreachable#results" title="Search unreachable results for {{ host.name }}"{% endif %}>
       {{ host.unreachable }} UNREACHABLE
     </a>
     {% endif %}
     {% if host.skipped %}
-    <a class="badge badge-pill badge-info ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=skipped#results" title="Search skipped results for {{ host.name }}"{% endif %}>
+    <a class="badge rounded-pill bg-info ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=skipped#results" title="Search skipped results for {{ host.name }}"{% endif %}>
       {{ host.skipped }} SKIPPED
     </a>
     {% endif %}
diff --git a/ara/ui/templates/partials/host_results.html b/ara/ui/templates/partials/host_results.html
index d053a821..585c38ea 100644
--- a/ara/ui/templates/partials/host_results.html
+++ b/ara/ui/templates/partials/host_results.html
@@ -10,27 +10,27 @@
         Task results: {{ host.name }}
       </button>
         {% if host.ok %}
-        <a class="badge badge-pill badge-success ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=ok#results" title="Search ok results for {{ host.name }}"{% endif %}>
+        <a class="badge rounded-pill bg-success ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=ok#results" title="Search ok results for {{ host.name }}"{% endif %}>
             {{ host.ok }} OK
         </a>
         {% endif %}
         {% if host.changed %}
-        <a class="badge badge-pill badge-warning ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?changed=True#results" title="Search changed results for {{ host.name }}"{% endif %}>
+        <a class="badge rounded-pill bg-warning ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?changed=True#results" title="Search changed results for {{ host.name }}"{% endif %}>
             {{ host.changed }} CHANGED
         </a>
         {% endif %}
         {% if host.failed %}
-        <a class="badge badge-pill badge-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=failed#results" title="Search failed results for {{ host.name }}"{% endif %}>
+        <a class="badge rounded-pill bg-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=failed#results" title="Search failed results for {{ host.name }}"{% endif %}>
             {{ host.failed }} FAILED
         </a>
         {% endif %}
         {% if host.unreachable %}
-        <a class="badge badge-pill badge-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=unreachable#results" title="Search unreachable results for {{ host.name }}"{% endif %}>
+        <a class="badge rounded-pill bg-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=unreachable#results" title="Search unreachable results for {{ host.name }}"{% endif %}>
             {{ host.unreachable }} UNREACHABLE
         </a>
         {% endif %}
         {% if host.skipped %}
-        <a class="badge badge-pill badge-info ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=skipped#results" title="Search skipped results for {{ host.name }}"{% endif %}>
+        <a class="badge rounded-pill bg-info ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:host' host.id %}?status=skipped#results" title="Search skipped results for {{ host.name }}"{% endif %}>
             {{ host.skipped }} SKIPPED
         </a>
         {% endif %}
@@ -81,7 +81,7 @@
                         <div class="form-check form-check-inline">
                           <input class="form-check-input" type="checkbox" id="changed" value="true" name="changed" {% if search_form.changed.value %}checked{% endif %}/>
                           <label class="form-check-label" for="changed">
-                            <span class="badge badge-pill badge-warning" style="font-size:0.9em;" title="Search changed results">
+                            <span class="badge rounded-pill bg-warning" style="font-size:0.9em;" title="Search changed results">
                               CHANGED
                             </span>
                           </label>
diff --git a/ara/ui/templates/partials/playbook_hosts.html b/ara/ui/templates/partials/playbook_hosts.html
index ec72a9b9..8570bb69 100644
--- a/ara/ui/templates/partials/playbook_hosts.html
+++ b/ara/ui/templates/partials/playbook_hosts.html
@@ -42,27 +42,27 @@ <h4>
                 </td>
                 <td>
                   {% if host.ok %}
-                    <a class="badge badge-pill badge-success ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=ok#results" title="Search ok results for {{ host.name }}"{% endif %}>
+                    <a class="badge rounded-pill bg-success ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=ok#results" title="Search ok results for {{ host.name }}"{% endif %}>
                       {{ host.ok }} OK
                     </a>
                   {% endif %}
                   {% if host.changed %}
-                    <a class="badge badge-pill badge-warning ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&changed=True#results" title="Search changed results for {{ host.name }}"{% endif %}>
+                    <a class="badge rounded-pill bg-warning ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&changed=True#results" title="Search changed results for {{ host.name }}"{% endif %}>
                       {{ host.changed }} CHANGED
                     </a>
                   {% endif %}
                   {% if host.failed %}
-                    <a class="badge badge-pill badge-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=failed#results" title="Search failed results for {{ host.name }}"{% endif %}>
+                    <a class="badge rounded-pill bg-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=failed#results" title="Search failed results for {{ host.name }}"{% endif %}>
                       {{ host.failed }} FAILED
                     </a>
                   {% endif %}
                   {% if host.unreachable %}
-                    <a class="badge badge-pill badge-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=unreachable#results" title="Search unreachable results for {{ host.name }}"{% endif %}>
+                    <a class="badge rounded-pill bg-danger ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=unreachable#results" title="Search unreachable results for {{ host.name }}"{% endif %}>
                       {{ host.unreachable }} UNREACHABLE
                     </a>
                   {% endif %}
                   {% if host.skipped %}
-                    <a class="badge badge-pill badge-info ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=skipped#results" title="Search skipped results for {{ host.name }}"{% endif %}>
+                    <a class="badge rounded-pill bg-info ara-result-status-badge" {% if not static_generation %}href="{% url 'ui:playbook' playbook.id %}?host={{ host.id }}&status=skipped#results" title="Search skipped results for {{ host.name }}"{% endif %}>
                       {{ host.skipped }} SKIPPED
                     </a>
                   {% endif %}
diff --git a/ara/ui/templates/partials/playbook_results.html b/ara/ui/templates/partials/playbook_results.html
index 56808261..717f30c1 100644
--- a/ara/ui/templates/partials/playbook_results.html
+++ b/ara/ui/templates/partials/playbook_results.html
@@ -62,7 +62,7 @@ <h4>
                         <div class="form-check form-check-inline">
                           <input class="form-check-input" type="checkbox" id="changed" value="true" name="changed" {% if search_form.changed.value %}checked{% endif %}/>
                           <label class="form-check-label" for="changed">
-                            <span class="badge badge-pill badge-warning ara-result-status-badge" title="Search changed results">
+                            <span class="badge rounded-pill bg-warning ara-result-status-badge" title="Search changed results">
                               CHANGED
                             </span>
                           </label>
diff --git a/ara/ui/templates/partials/result_status_icon.html b/ara/ui/templates/partials/result_status_icon.html
index 662375d9..fe6b813b 100644
--- a/ara/ui/templates/partials/result_status_icon.html
+++ b/ara/ui/templates/partials/result_status_icon.html
@@ -1,15 +1,15 @@
 {% if status == "ok" %}
-  <a class="badge badge-pill badge-success ara-result-status-badge" title="Task completed successfully" {% if search_url %}href="{{ search_url | add:'?status=ok#results' }}"{% endif %}>
+  <a class="badge rounded-pill bg-success ara-result-status-badge" title="Task completed successfully" {% if search_url %}href="{{ search_url | add:'?status=ok#results' }}"{% endif %}>
 {% elif status == "failed" or status == "unreachable" %}
-  <a class="badge badge-pill badge-danger ara-result-status-badge" title="Task failed" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>
+  <a class="badge rounded-pill bg-danger ara-result-status-badge" title="Task failed" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>
 {% elif status == "ignored" %}
-  <a class="badge badge-pill badge-info ara-result-status-badge" title="Task failed but was ignored" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>
+  <a class="badge rounded-pill bg-info ara-result-status-badge" title="Task failed but was ignored" {% if search_url %}href="{{ search_url | add:'?status=failed#results' }}"{% endif %}>
 {% elif status == "skipped" %}
-  <a class="badge badge-pill badge-info ara-result-status-badge" title="Task was skipped" {% if search_url %}href="{{ search_url | add:'?status=skipped#results' }}"{% endif %}>
+  <a class="badge rounded-pill bg-info ara-result-status-badge" title="Task was skipped" {% if search_url %}href="{{ search_url | add:'?status=skipped#results' }}"{% endif %}>
 {% elif status == "changed" %}
-  <a class="badge badge-pill badge-warning ara-result-status-badge" title="Task resulted in a change" {% if search_url %}href="{{ search_url | add:'?changed=true#results' }}"{% endif %}>
+  <a class="badge rounded-pill bg-warning ara-result-status-badge" title="Task resulted in a change" {% if search_url %}href="{{ search_url | add:'?changed=true#results' }}"{% endif %}>
 {% else %}
-  <a class="badge badge-pill badge-warning ara-result-status-badge" title="Task result is unknown" {% if search_url %}href="{{ search_url | add:'?status=unknown#results' }}"{% endif %}>
+  <a class="badge rounded-pill bg-warning ara-result-status-badge" title="Task result is unknown" {% if search_url %}href="{{ search_url | add:'?status=unknown#results' }}"{% endif %}>
 {% endif %}
 {{ status | upper }}
 </a>