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.
ansible-community · Nov 21, 2021 · 4a3b703 · 4a3b703
1 parent 0e8aec3
commit 4a3b703
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>