Skip to content

Commit 5471f7c

Browse files
tdrueztdruez
committed
refine UI
Signed-off-by: tdruez <tdruez@aboutcode.org>
1 parent 150218e commit 5471f7c

3 files changed

Lines changed: 64 additions & 53 deletions

File tree

‎dejacode/static/css/dejacode_bootstrap.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,3 +1083,6 @@ select.bootstrap-select-filter {
10831083
--bs-popover-max-width: 420px;
10841084
max-width: 420px;
10851085
}
1086+
.stretch-cell {
1087+
height: 1px;
1088+
}

‎product_portfolio/templates/product_portfolio/tabs/tab_packages_vulnerabilities.html‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -96,49 +96,53 @@
9696
{% endif %}
9797
</td>
9898
{% endif %}
99-
<td>
99+
<td class="stretch-cell">
100100
{% with analysis=vulnerability.vulnerability_analysis %}
101-
{% if analysis %}
102-
<div class="d-flex align-items-center flex-wrap gap-2">
103-
{% if analysis.state %}
104-
<span class="badge {{ analysis.state_badge_class }}">
105-
{{ analysis.get_state_display }}
106-
</span>
107-
{% endif %}
108-
{% if analysis.is_reachable %}
109-
<i class="fa-solid fa-circle-radiation text-danger" data-bs-toggle="tooltip" title="Vulnerability is reachable"></i>
110-
{% elif analysis.is_reachable is False %}
111-
<i class="fa-solid fa-bug-slash text-body-secondary" data-bs-toggle="tooltip" title="Vulnerability is NOT reachable"></i>
112-
{% endif %}
113-
</div>
114-
{% if analysis.justification %}
115-
<div class="small text-body-secondary mt-1">{{ analysis.get_justification_display }}</div>
116-
{% endif %}
117-
{% if analysis.detail %}
118-
<div class="small text-body-secondary mt-1" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover focus" data-bs-html="true" data-bs-content="{{ analysis.detail|linebreaksbr }}">
119-
<i class="fa-solid fa-circle-info text-muted me-1"></i>{{ analysis.detail|truncatechars:70 }}
120-
</div>
121-
{% endif %}
122-
{% if analysis.response_labels %}
123-
<div class="d-flex flex-wrap gap-1 mt-1">
124-
{% for response in analysis.response_labels %}
125-
<span class="badge bg-light text-body-secondary border fw-normal">{{ response }}</span>
126-
{% endfor %}
127-
</div>
128-
{% endif %}
129-
{% if analysis.applied_by_preset %}
130-
<div class="small text-body-tertiary mt-1 pt-1 border-top">
131-
<i class="fas fa-bolt text-warning fa-xs me-1"></i>{% trans "Auto-applied:" %} {{ analysis.applied_by_preset.name }}
132-
</div>
133-
{% elif analysis.last_modified_by or analysis.created_by %}
134-
<div class="small text-body-tertiary mt-1 pt-1 border-top">
135-
<i class="fas fa-user fa-xs me-1"></i>{{ analysis.last_modified_by|default:analysis.created_by }}
136-
&middot; {{ analysis.last_updated|date:"M j, Y" }}
101+
<div class="d-flex flex-column h-100">
102+
{% if analysis %}
103+
<div class="mb-2">
104+
<div class="d-flex align-items-center flex-wrap gap-2">
105+
{% if analysis.state %}
106+
<span class="badge {{ analysis.state_badge_class }}">
107+
{{ analysis.get_state_display }}
108+
</span>
109+
{% endif %}
110+
{% if analysis.is_reachable %}
111+
<i class="fa-solid fa-circle-radiation text-danger" data-bs-toggle="tooltip" title="Vulnerability is reachable"></i>
112+
{% elif analysis.is_reachable is False %}
113+
<i class="fa-solid fa-bug-slash text-body-secondary" data-bs-toggle="tooltip" title="Vulnerability is NOT reachable"></i>
114+
{% endif %}
115+
</div>
116+
{% if analysis.justification %}
117+
<div class="small text-body-secondary mt-1">{{ analysis.get_justification_display }}</div>
118+
{% endif %}
119+
{% if analysis.detail %}
120+
<div class="small text-body-secondary mt-1" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-html="true" data-bs-content="{{ analysis.detail|linebreaksbr }}">
121+
<i class="fa-solid fa-circle-info text-muted me-1"></i>{{ analysis.detail|truncatechars:70 }}
122+
</div>
123+
{% endif %}
124+
{% if analysis.response_labels %}
125+
<div class="d-flex flex-wrap gap-1 mt-1">
126+
{% for response in analysis.response_labels %}
127+
<span class="badge bg-light text-body-secondary border fw-normal">{{ response }}</span>
128+
{% endfor %}
129+
</div>
130+
{% endif %}
137131
</div>
132+
{% if analysis.applied_by_preset %}
133+
<div class="small text-body-tertiary mt-auto pt-1 border-top">
134+
<i class="fas fa-bolt text-warning fa-xs me-1"></i>{% trans "Auto-applied:" %} {{ analysis.applied_by_preset.name }}
135+
</div>
136+
{% elif analysis.last_modified_by or analysis.created_by %}
137+
<div class="small text-body-tertiary mt-auto pt-1 border-top">
138+
<i class="fas fa-user fa-xs me-1"></i>{{ analysis.last_modified_by|default:analysis.created_by }}
139+
&middot; {{ analysis.last_updated|date:"M j, Y" }}
140+
</div>
141+
{% endif %}
142+
{% else %}
143+
<span class="text-body-tertiary small fst-italic">{% trans "Not analyzed" %}</span>
138144
{% endif %}
139-
{% else %}
140-
<span class="text-body-tertiary small fst-italic">{% trans "Not analyzed" %}</span>
141-
{% endif %}
145+
</div>
142146
{% endwith %}
143147
</td>
144148
<td class="p-1 text-nowrap">

‎product_portfolio/tests/test_views.py‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -418,19 +418,23 @@ def test_product_portfolio_tab_vulnerability_view_analysis_rendering(self):
418418
response = self.client.get(url)
419419

420420
expected = """
421-
<td>
422-
<div class="d-flex align-items-center flex-wrap gap-2">
423-
<span class="badge bg-success-subtle text-success-emphasis">Resolved</span>
424-
</div>
425-
<div class="small text-body-secondary mt-1">Code Not Present</div>
426-
<div class="small text-body-secondary mt-1" data-bs-toggle="popover"
427-
data-bs-placement="right" data-bs-trigger="hover focus"
428-
data-bs-html="true" data-bs-content="detail">
429-
<i class="fa-solid fa-circle-info text-muted me-1"></i>detail
430-
</div>
431-
<div class="d-flex flex-wrap gap-1 mt-1">
432-
<span class="badge bg-light text-body-secondary border fw-normal">Can Not Fix</span>
433-
<span class="badge bg-light text-body-secondary border fw-normal">Rollback</span>
421+
<td class="stretch-cell">
422+
<div class="d-flex flex-column h-100">
423+
<div>
424+
<div class="d-flex align-items-center flex-wrap gap-2">
425+
<span class="badge bg-success-subtle text-success-emphasis">Resolved</span>
426+
</div>
427+
<div class="small text-body-secondary mt-1">Code Not Present</div>
428+
<div class="small text-body-secondary mt-1" data-bs-toggle="popover"
429+
data-bs-placement="right" data-bs-trigger="hover focus"
430+
data-bs-html="true" data-bs-content="detail">
431+
<i class="fa-solid fa-circle-info text-muted me-1"></i>detail
432+
</div>
433+
<div class="d-flex flex-wrap gap-1 mt-1">
434+
<span class="badge bg-light text-body-secondary border fw-normal">Can Not Fix</span>
435+
<span class="badge bg-light text-body-secondary border fw-normal">Rollback</span>
436+
</div>
437+
</div>
434438
</div>
435439
</td>
436440
"""

0 commit comments

Comments
 (0)