Refine package curation workflow

vulnerabilities/pipelines/v2_improvers/compute_advisory_todo.py

@@ -848,17 +848,15 @@ def get_disagreement_message(fixed_disagreement, affected_disagreement):
 
     if affected_disagreement:
         affected = ", ".join(affected_disagreement)
-        noun = "version" if len(affected_disagreement) == 1 else "versions"
-        verb = "is" if len(affected_disagreement) == 1 else "are"
-
-        messages.append(f"Advisories do not agree whether {noun} {affected} {verb} affected.")
+        messages.append(
+            f"Advisories disagree on whether the following version(s) are affected: {affected}."
+        )
 
     if fixed_disagreement:
         fixed = ", ".join(fixed_disagreement)
-        noun = "version" if len(fixed_disagreement) == 1 else "versions"
-        verb = "contains" if len(fixed_disagreement) == 1 else "contain"
-
-        messages.append(f"Advisories do not agree whether {noun} {fixed} {verb} the fix.")
+        messages.append(
+            f"Advisories disagree on whether the following version(s) contain the fix: {fixed}."
+        )
 
     return "\n".join(messages)
 

vulnerabilities/templates/package_curation.html

@@ -7,11 +7,11 @@
 {% endblock %}
 
 {% block content %}
-<section class="section">
+<section class="section my-0 pt-3 px-0 mx-0">
     <div class="container is-fluid">
         <div class="columns is-vcentered mb-5">
             <div class="column">
-                <h1 class="title is-3">Advisory Curation</h1>
+                <h1 class="title is-3">Advisory Package Curation</h1>
                 <h2 class="subtitle is-5 has-text-grey">{{ vulnerability_id }}</h2>
             </div>
 
@@ -32,7 +32,7 @@ <h2 class="subtitle is-5 has-text-grey">{{ vulnerability_id }}</h2>
         <div class="columns">
             <div class="column is-3">
                 <h3 class="title is-5">Advisory Summaries</h3>
-                <div id="summaries-container" style="max-height: 800px; overflow-y: auto;">
+                <div id="summaries-container" style="max-height: 950px; overflow-y: auto;">
                     {% for avid, text in advisory_summaries.items %}
                         <div class="notification is-info is-light p-3 mb-3">
                             <p><strong>{{ avid }}</strong></p>
@@ -51,6 +51,7 @@ <h3 class="title is-5">Advisory Summaries</h3>
                     <div class="mb-4">
                         <h4 class="title is-4 mb-1" id="current-purl"></h4>
                         <p class="text is-5" id="conflict-reason"></p>
+                        <a id="toggle-conflict" class="is-link is-5" style="display:none;">Show more</a>
                     </div>
 
                     <div class="table-container" style="max-height: 800px; overflow-y: auto; border: 1px solid #dbdbdb; border-radius: 6px;">
@@ -97,5 +98,5 @@ <h4 class="title is-4 mb-1" id="current-purl"></h4>
     const baseAdvisoryUrl = "{% url 'advisory_details' 0 %}";
     const curationItems = {{ curation_items|safe }};
 </script>
-<script src="{% static 'js/package_curation.min.js' %}"></script>
+<script src="{% static 'js/package_curation.js' %}"></script>
 {% endblock %}

vulnerablecode/static/css/package_curation.css

@@ -8,6 +8,12 @@
         color: #fff !important;
     }
 
+    .state-empty {
+        background-color: #ffdd57 !important;
+        color: #000 !important;
+        box-shadow: inset 0 0 0 1px #dbdbdb;
+    }
+
     .table {
         table-layout: fixed !important;
         width: 100% !important;
@@ -34,21 +40,20 @@
     }
 
     #table-header th:first-child {
-        width: 100px !important;
+        width: 150px !important;
     }
 
     #table-header th:nth-child(2) {
-        width: 100px !important;
+        width: 150px !important;
     }
 
     #table-header th:nth-child(n+3) {
-        width: 100px !important;
+        width: 120px !important;
     }
 
     .curation-cell {
         cursor: pointer;
         text-align: center !important;
-        font-weight: 700;
         user-select: none;
         transition: background-color 0.1s ease;
         border: 1px solid #dbdbdb !important;
@@ -59,9 +64,9 @@
         box-shadow: inset 0 0 0 1px #3273dc;
     }
 
-    .advisory-cell,
-    .advisory-cell * {
+    .advisory-cell {
         cursor: not-allowed;
+        word-break: break-all;
     }
 
     .folded-row-marker,
@@ -130,3 +135,10 @@
     white-space: normal;
     flex-wrap: wrap;
 }
+
+.truncate-conflict-summary {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}

vulnerablecode/static/js/package_curation.js

@@ -23,24 +23,46 @@ const app = {
         document.getElementById('progress').value = progPercentage;
         document.getElementById('progress-text').innerText = `${this.currentIndex + 1} / ${total}`;
         document.getElementById('current-purl').innerText = item.purl;
-        document.getElementById('conflict-reason').innerText = item.conflict_reason;
+
         if (!this.userStates[this.currentIndex]) {
             this.userStates[this.currentIndex] = {};
             versions.forEach(v => {
                 if (item.partial_curation.affected.includes(v)) this.userStates[this.currentIndex][v] = 'affected';
                 else if (item.partial_curation.fixing.includes(v)) this.userStates[this.currentIndex][v] = 'fixed';
-                else this.userStates[this.currentIndex][v] = '?';
+                else this.userStates[this.currentIndex][v] = 'empty';
             });
         }
+        this.renderConflictSummary(item);
         this.renderHeader(item);
         this.renderBody(item, versions);
         this.updateNavButtons();
     },
 
+    renderConflictSummary(item){
+        const el = document.getElementById("conflict-reason");
+        const btn = document.getElementById("toggle-conflict");
+
+        el.innerText = item.conflict_reason;
+        el.classList.add("truncate-conflict-summary");
+        const hasOverflow = el.scrollHeight > el.clientHeight;
+
+        if (hasOverflow) {
+            btn.style.display = "inline";
+
+            btn.onclick = () => {
+                const isTruncated = el.classList.toggle("truncate-conflict-summary");
+                btn.innerText = isTruncated ? "Show more" : "Show less";
+            };
+        } else {
+            btn.style.display = "none";
+            el.classList.remove("truncate-conflict-summary");
+        }
+    },
+
     renderHeader(item) {
         const header = document.getElementById('table-header');
         header.innerHTML = `
-            <th class="has-text-weight-bold pt-4">Version</th>
+            <th class="has-text-weight-bold has-text-centered pt-4 is-size-6">Package Versions</th>
             <th style="width: 140px;" class="has-text-centered">
                 <div>
                     <div>
@@ -101,7 +123,9 @@ const app = {
                     secTh.innerHTML = `
                         <div>
                             <div class="mb-3 advisory-wrapper">
-                                <span class="tag is-light is-size-7 mb-1">Similar</span>
+                                <div>
+                                    <span class="tag is-light is-size-7 mb-1">Similar</span>
+                                </div>
                                 <a href="${secUrl}" target="_blank" rel="noopener noreferrer" class="has-text-grey-dark has-text-weight-bold advisory-link">
                                     <span>${sec.advisory_uid}</span>
                                     <span class="icon is-small" ><i class="fa fa-external-link"></i></span>
@@ -205,7 +229,7 @@ const app = {
             } else if (item.partial_curation.fixing.includes(v)) {
                 this.userStates[this.currentIndex][v] = 'fixed';
             } else {
-                this.userStates[this.currentIndex][v] = '?';
+                this.userStates[this.currentIndex][v] = 'empty';
             }
         });
         this.renderBody(item, versions);
@@ -216,8 +240,8 @@ const app = {
         const state = this.userStates[this.currentIndex][v];
         tr.innerHTML = `<td class="has-text-weight-bold">${v}</td>`;
         const userTd = document.createElement('td');
-        userTd.className = `curation-cell state-${state} `;
-        userTd.innerText = state.toUpperCase();
+        userTd.className = `curation-cell state-${state}`;
+        userTd.innerText = state === "empty"? "Select value": state.toUpperCase();
         userTd.onclick = () => this.cycleState(v);
         tr.appendChild(userTd);
 
@@ -227,7 +251,7 @@ const app = {
 
             const primaryState = advGroup.affected.includes(v) ? 'affected' : (advGroup.fixing.includes(v) ? 'fixed' : 'unaffected');
             const td = document.createElement('td');
-            td.className = `state-${primaryState} has-text-centered`;
+            td.className = `state-${primaryState} has-text-centered advisory-cell`;
             td.innerText = primaryState.toUpperCase();
             tr.appendChild(td);
 
@@ -238,7 +262,7 @@ const app = {
 
                     const secState = secAffected.includes(v) ? 'affected' : (secFixing.includes(v) ? 'fixed' : 'unaffected'); 
                     const secTd = document.createElement('td');
-                    secTd.className = `state-${secState} has-text-centered`;
+                    secTd.className = `state-${secState} has-text-centered advisory-cell`;
                     secTd.style.borderLeft = "1px dashed #dbdbdb";
                     secTd.innerText = secState.toUpperCase();
                     tr.appendChild(secTd);