Skip to content

Commit c7761c4

Browse files
keshav-spacekeshav-space
committed
feat(ui): add severity curation template
Signed-off-by: Keshav Priyadarshi <git@keshav.space>
1 parent 9aab24f commit c7761c4

3 files changed

Lines changed: 649 additions & 0 deletions

File tree

‎vulnerabilities/templates/advisory_todos.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,8 @@ <h1>Advisory To-Dos</h1>
125125
{% with supported_curation="CONFLICTING_FIXED_BY_PACKAGES CONFLICTING_AFFECTED_PACKAGES CONFLICTING_AFFECTED_AND_FIXED_BY_PACKAGES" %}
126126
{% if todo.issue_type in supported_curation.split %}
127127
<a href="{% url 'todo-detail' todo_id=todo.todo_id %}" class="has-text-info">
128+
{% elif todo.issue_type == "CONFLICTING_SEVERITY_SCORES" %}
129+
<a href="{% url 'todo-severity-detail' todo_id=todo.todo_id %}" class="has-text-info">
128130
{% endif %}
129131
<div class="columns px-1 is-vcentered">
130132
<div class="column has-text-left" style="flex: 0 0 20%;">

‎vulnerabilities/templates/severity_curation.html‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
{% extends "base.html" %}
2+
{% load static %}
3+
{% load utils %}
4+
5+
{% block extrahead %}
6+
<style>
7+
.state-undefined {
8+
background-color: #f5f5f5 !important;
9+
color: #7a7a7a !important;
10+
font-style: italic;
11+
}
12+
13+
.table {
14+
table-layout: fixed !important;
15+
width: 100% !important;
16+
}
17+
18+
.table th {
19+
border-width: 0 1px 1px 1px !important;
20+
border-color: #dbdbdb !important;
21+
background-color: #fff !important;
22+
}
23+
24+
#table-header th {
25+
height: 130px;
26+
vertical-align: top !important;
27+
padding: 0.75rem 0.5rem !important;
28+
}
29+
30+
#table-header th>div {
31+
display: inline-flex !important;
32+
flex-direction: column !important;
33+
justify-content: space-between !important;
34+
height: 100% !important;
35+
width: 100%;
36+
}
37+
38+
#table-header th:first-child {
39+
width: 260px !important;
40+
}
41+
#table-header th:nth-child(2) {
42+
width: 240px !important;
43+
}
44+
45+
.metric-category-row {
46+
background-color: #eef6fc !important;
47+
color: #1d72b8;
48+
}
49+
50+
.curation-select-container {
51+
padding: 1px !important;
52+
vertical-align: middle !important;
53+
}
54+
55+
.vector-row-marker {
56+
cursor: pointer;
57+
text-align: center;
58+
color: #4a4a4a;
59+
font-weight: 600;
60+
background-color: #f5f5f5;
61+
transition: background-color 0.2s;
62+
}
63+
.vector-row-marker:hover {
64+
background-color: #e8e8e8;
65+
}
66+
67+
.vector-data-cell {
68+
background-color: #fafafa;
69+
padding: 8px !important;
70+
vertical-align: middle !important;
71+
border: 1px solid #dbdbdb !important;
72+
word-break: break-all !important;
73+
}
74+
75+
.advisory-wrapper {
76+
width: 100%;
77+
word-break: break-all;
78+
}
79+
80+
.immutable-advisory-cell {
81+
vertical-align: middle !important;
82+
background-color: #ffffff;
83+
}
84+
85+
#summaries-container p strong {
86+
display: block;
87+
word-break: break-all;
88+
overflow-wrap: break-word;
89+
margin-bottom: 4px;
90+
}
91+
92+
.summary-text {
93+
line-height: 1.4;
94+
white-space: pre-wrap;
95+
word-break: break-word;
96+
}
97+
98+
div.summary-text a:link,
99+
div.summary-text a {
100+
color: #3273dc !important;
101+
}
102+
103+
div.summary-text a:visited {
104+
color: #8a4de8 !important;
105+
}
106+
107+
div.summary-text a:hover {
108+
color: #0a0a0a !important;
109+
}
110+
111+
.select.highlight-select select {
112+
background-color: transparent;
113+
}
114+
</style>
115+
{% endblock %}
116+
117+
{% block content %}
118+
<section class="section my-0 pt-3 px-0 mx-0">
119+
<div class="container is-fluid">
120+
<div class="columns is-vcentered mb-5">
121+
<div class="column">
122+
<h1 class="title is-3">Advisory Severity Curation</h1>
123+
<h2 class="subtitle is-5 has-text-grey">{{ vulnerability_id }}</h2>
124+
</div>
125+
<div class="column is-narrow">
126+
<div class="box p-4 has-background-white shadow-soft" style="min-width: 260px; border-radius: 5px;">
127+
<div class="is-flex is-justify-content-space-between is-align-items-center mb-2">
128+
<span class="is-size-6 has-text-grey-dark uppercase has-text-weight-bold mr-2">Progress</span>
129+
<span class="tag is-info is-light has-text-weight-bold" id="progress-text">0 / 0</span>
130+
</div>
131+
<progress class="progress is-info is-small mb-0" id="progress" value="0" max="100"></progress>
132+
</div>
133+
</div>
134+
</div>
135+
136+
<div class="columns">
137+
<div class="column is-3">
138+
<h3 class="title is-5">Advisory Summaries</h3>
139+
<div id="summaries-container" style="max-height: 930px; overflow-y: auto;">
140+
{% for avid, text in advisory_summaries.items %}
141+
<div class="notification is-info is-light p-3 mb-3">
142+
<p><strong>{{ avid }}</strong></p>
143+
<div class="text summary-text is-2">{{ text|normalize_links|urlize }}</div>
144+
</div>
145+
{% empty %}
146+
<div class="notification is-light p-3 mb-3 has-text-grey">
147+
No summaries available.
148+
</div>
149+
{% endfor %}
150+
</div>
151+
</div>
152+
153+
<div class="column is-9">
154+
<div class="box">
155+
<div class="mb-4">
156+
<h4 class="title is-4 mb-1" id="current-cvss"></h4>
157+
<p class="text is-5" id="conflict-reason"></p>
158+
</div>
159+
160+
<div class="table-container" style="max-height: 800px; overflow-y: auto; border: 1px solid #dbdbdb; border-radius: 6px;">
161+
<table class="table is-bordered is-narrow is-fullwidth is-hoverable">
162+
<thead style="position: sticky; top: 0; z-index: 10;">
163+
<tr id="table-header">
164+
</tr>
165+
</thead>
166+
<tbody id="curation-body">
167+
</tbody>
168+
</table>
169+
</div>
170+
171+
<div class="level mt-5">
172+
<div class="level-left">
173+
<button class="button is-light" id="prev-btn" onclick="app.navigate(-1)">
174+
<span class="icon"><i class="fa fa-chevron-left"></i></span>
175+
<span>Previous item</span>
176+
</button>
177+
</div>
178+
<div class="level-right">
179+
<button class="button is-info mr-2" id="next-btn" onclick="app.navigate(1)">
180+
<span>Next item</span>
181+
<span class="icon"><i class="fa fa-chevron-right"></i></span>
182+
</button>
183+
<button class="button is-info" id="finish-btn" disabled>
184+
<span class="icon"><i class="fa fa-check"></i></span>
185+
<span>Submit</span>
186+
</button>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
</div>
192+
</div>
193+
</section>
194+
{% endblock %}
195+
196+
{% block scripts %}
197+
<script>
198+
const baseAdvisoryUrl = "{% url 'advisory_details' 0 %}";
199+
const curationItems = {{ curation_items|safe }};
200+
</script>
201+
<script src="{% static 'js/severity_curation.js' %}"></script>
202+
{% endblock %}

0 commit comments

Comments
 (0)