|
6 | 6 | <div class="col-12"> |
7 | 7 | <div class="border rounded-3 p-3"> |
8 | 8 | <div class="d-flex justify-content-between align-items-center mb-3"> |
9 | | - <h3 class="fs-6 fw-medium mb-0">{% trans "Policy violations" %}</h3> |
| 9 | + <div class="d-flex align-items-center gap-2"> |
| 10 | + <h3 class="fs-6 fw-medium mb-0">{% trans "Policy violations" %}</h3> |
| 11 | + <button type="button" |
| 12 | + id="rules-overview-btn" |
| 13 | + class="btn btn-link p-0 text-body-tertiary lh-1" |
| 14 | + aria-label="{% trans 'View active rules' %}"> |
| 15 | + <i class="fas fa-circle-info small"></i> |
| 16 | + </button> |
| 17 | + </div> |
10 | 18 | <span class="badge bg-danger-subtle text-danger-emphasis"> |
11 | 19 | {{ policy_violation_count }} {% trans "active" %} |
12 | 20 | </span> |
13 | 21 | </div> |
14 | | - <table class="table table-sm mb-0"> |
| 22 | + <table class="table table-sm align-middle mb-0"> |
15 | 23 | <thead> |
16 | 24 | <tr> |
17 | 25 | <th class="fw-medium">{% trans "Rule" %}</th> |
18 | 26 | <th class="fw-medium">{% trans "Description" %}</th> |
19 | | - <th class="fw-medium">{% trans "Objects in violation" %}</th> |
20 | | - <th class="fw-medium">{% trans "Detected" %}</th> |
| 27 | + <th class="fw-medium text-end">{% trans "In violation" %}</th> |
| 28 | + <th class="fw-medium text-end">{% trans "Detected" %}</th> |
21 | 29 | </tr> |
22 | 30 | </thead> |
23 | 31 | <tbody> |
24 | 32 | {% for violation in policy_violations %} |
25 | 33 | <tr> |
26 | | - <td>{{ violation.rule_label }}</td> |
| 34 | + <td class="text-nowrap"> |
| 35 | + {% if violation.rule_severity == "error" %} |
| 36 | + <span class="badge bg-danger-subtle text-danger-emphasis">{{ violation.rule_label }}</span> |
| 37 | + {% else %} |
| 38 | + <span class="badge bg-warning-subtle text-warning-emphasis">{{ violation.rule_label }}</span> |
| 39 | + {% endif %} |
| 40 | + </td> |
27 | 41 | <td class="text-body-secondary small">{{ violation.rule_description }}</td> |
28 | | - <td> |
| 42 | + <td class="text-end"> |
29 | 43 | <a href="{{ product_url }}?inventory-policy_rule={{ violation.rule_type }}#inventory" |
30 | 44 | class="text-decoration-none"> |
31 | 45 | {{ violation.violation_count }} |
32 | 46 | </a> |
33 | 47 | </td> |
34 | | - <td class="text-body-tertiary small">{{ violation.detected_date|date:"N j, Y" }}</td> |
| 48 | + <td class="text-end text-body-tertiary small text-nowrap">{{ violation.detected_date|date:"N j, Y" }}</td> |
35 | 49 | </tr> |
36 | 50 | {% endfor %} |
37 | 51 | </tbody> |
38 | 52 | </table> |
39 | 53 | </div> |
40 | 54 | </div> |
41 | 55 | </div> |
| 56 | + |
| 57 | + {# Hidden popover content -- not data-bs-toggle so the global init doesn't conflict #} |
| 58 | + <div id="rules-overview-content" class="d-none"> |
| 59 | + {% for rule in all_rules %} |
| 60 | + <div class="d-flex align-items-center justify-content-between {% if not forloop.last %}mb-2{% endif %}"> |
| 61 | + <span class="small me-3">{{ rule.label }}</span> |
| 62 | + {% if not rule.is_active %} |
| 63 | + <span class="badge text-bg-secondary">{% trans "Disabled" %}</span> |
| 64 | + {% elif rule.is_violated %} |
| 65 | + {% if rule.severity == "error" %} |
| 66 | + <span class="badge bg-danger-subtle text-danger-emphasis">{% trans "Triggered" %}</span> |
| 67 | + {% else %} |
| 68 | + <span class="badge bg-warning-subtle text-warning-emphasis">{% trans "Triggered" %}</span> |
| 69 | + {% endif %} |
| 70 | + {% else %} |
| 71 | + <span class="badge bg-success-subtle text-success-emphasis">{% trans "OK" %}</span> |
| 72 | + {% endif %} |
| 73 | + </div> |
| 74 | + {% endfor %} |
| 75 | + </div> |
| 76 | + <script> |
| 77 | + (function () { |
| 78 | + const btn = document.getElementById("rules-overview-btn"); |
| 79 | + const content = document.getElementById("rules-overview-content"); |
| 80 | + const popover = new bootstrap.Popover(btn, { |
| 81 | + html: true, |
| 82 | + container: "body", |
| 83 | + placement: "right", |
| 84 | + trigger: "click", |
| 85 | + title: "{% trans 'Active rules' %}", |
| 86 | + content: content.innerHTML, |
| 87 | + }); |
| 88 | + document.addEventListener("click", function (event) { |
| 89 | + if (!btn.contains(event.target)) popover.hide(); |
| 90 | + }); |
| 91 | + })(); |
| 92 | + </script> |
42 | 93 | {% endif %} |
43 | 94 |
|
44 | 95 | <div class="row g-4 mb-4"> |
|
0 commit comments