Add EPSS insights(trend line and history table)

Signed-off-by: Sampurna Pyne <sampurnapyne1710@gmail.com>

Author: Samk1710

.gitignore

@@ -93,6 +93,7 @@ Pipfile
 
 # editors
 .vscode
+*.code-workspace
 # PyCharm
 .idea/
 

vulnerabilities/templates/advisory_detail.html

@@ -518,6 +518,61 @@
                             {% endif %}
                         </tbody>
                     </table>
+
+                    {% if epss_history_data|length > 1 %}
+                    <div class="has-text-weight-bold tab-nested-div ml-1 mb-3 mt-5">
+                        EPSS Score History
+                    </div>
+
+                    <div class="mb-4 ml-1">
+                        <button id="btn-load-epss-chart" class="button is-small is-info is-outlined mr-2">
+                            See Trend
+                        </button>
+                        <button id="btn-load-epss-table" class="button is-small is-info is-outlined">
+                            See Table
+                        </button>
+                    </div>
+
+                    <style>
+                    .bb-tooltip-container {
+                        min-width: 220px !important;
+                    }
+                    .bb-tooltip th, .bb-tooltip td {
+                        white-space: nowrap !important;
+                    }
+                    </style>
+
+                    <div id="epss-chart-wrap" style="display:none;">
+                        <div class="has-text-weight-bold tab-nested-div ml-1 mb-3">
+                            30-Day Trend
+                        </div>
+                        <div id="epss-chart" style="width:100%; height:260px;"></div>
+                    </div>
+
+                    <div id="epss-history-table-wrap" style="display:none; margin-top:2rem;">
+                        <div class="has-text-weight-bold tab-nested-div ml-1 mb-3">
+                            EPSS History Table
+                        </div>
+                        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border" id="epss-history-table">
+                            <thead>
+                                <tr>
+                                    <th>Published At</th>
+                                    <th>EPSS Score</th>
+                                    <th>Percentile</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for row in epss_history_data reversed %}
+                                <tr>
+                                    <td>{{ row.published_at|date:"M d, Y" }}</td>
+                                    <td>{{ row.score|default_if_none:"—" }}</td>
+                                    <td>{{ row.percentile|default_if_none:"—" }}</td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    {% endif %}
                 {% else %}
                     <p>No EPSS data available for this advisory.</p>
                 {% endif %}
@@ -736,6 +791,11 @@
 
 <script src="{% static 'js/main.js' %}" crossorigin="anonymous"></script>
 
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js@3/dist/billboard.min.css">
+<script src="https://cdn.jsdelivr.net/npm/billboard.js@3/dist/billboard.pkgd.min.js"></script>
+
+{{ epss_history_data|json_script:"epss-history-data" }}
+
 <script>
     function goToTab(tabName) {
         const activeLink = document.querySelector('div.tabs.is-boxed li.is-active');
@@ -752,4 +812,6 @@
     }
 </script>
 
+<script src="{% static 'js/advisory_detail.js' %}"></script>
+
 {% endblock %}

vulnerabilities/views.py

@@ -22,16 +22,23 @@
 from django.core.exceptions import ValidationError
 from django.core.mail import send_mail
 from django.db.models import Exists
+from django.db.models import FloatField
+from django.db.models import Max
 from django.db.models import OuterRef
 from django.db.models import Prefetch
 from django.db.models import Q
+from django.db.models.functions import Cast
+from django.db.models.functions import TruncDate
+from django.http import HttpRequest
 from django.http import HttpResponse
+from django.http import JsonResponse
 from django.http.response import Http404
 from django.shortcuts import get_object_or_404
 from django.shortcuts import render
 from django.urls import reverse_lazy
 from django.views import View
 from django.views import generic
+from django.views.decorators.http import require_safe
 from django.views.generic.detail import DetailView
 from django.views.generic.edit import FormMixin
 from django.views.generic.edit import FormView
@@ -739,6 +746,44 @@ def add_ssvc(ssvc):
             add_ssvc(ssvc)
 
         context["ssvcs"] = ssvc_entries
+
+        # EPSS history
+        cves = {
+            alias_obj.alias
+            for alias_obj in advisory.aliases.all()
+            if alias_obj.alias.startswith("CVE-")
+        }
+        if advisory.advisory_id and advisory.advisory_id.startswith("CVE-"):
+            cves.add(advisory.advisory_id)
+
+        if cves:
+            epss_scores_queryset = (
+                models.AdvisorySeverity.objects.filter(
+                    advisories__advisory_id__in=cves,
+                    scoring_system=EPSS.identifier,
+                    published_at__isnull=False,
+                )
+                .annotate(pub_date=TruncDate("published_at"))
+                .values("pub_date")
+                .annotate(
+                    max_score=Max(Cast("value", FloatField())),
+                    max_percentile=Max(Cast("scoring_elements", FloatField())),
+                )
+                .order_by("-pub_date")[:30]
+            )
+
+            epss_history_data = [
+                {
+                    "score": record["max_score"],
+                    "percentile": record["max_percentile"],
+                    "published_at": record["pub_date"],
+                }
+                for record in epss_scores_queryset
+            ]
+            epss_history_data.reverse()
+        else:
+            epss_history_data = []
+
         context.update(
             {
                 "advisory": advisory,
@@ -750,6 +795,7 @@ def add_ssvc(ssvc):
                 "weaknesses": weaknesses_present_in_db,
                 "status": advisory.get_status_label,
                 "epss_data": epss_data,
+                "epss_history_data": epss_history_data,
             }
         )
         return context

vulnerablecode/static/js/advisory_detail.js

@@ -0,0 +1,66 @@
+(function () {
+    let epssChartInstance = null;
+    
+    const [btnChart, btnTable, chartWrap, tableWrap] = 
+        ["btn-load-epss-chart", "btn-load-epss-table", "epss-chart-wrap", "epss-history-table-wrap"]
+        .map(id => document.getElementById(id));
+
+    const getHistoryData = () => JSON.parse(document.getElementById('epss-history-data')?.textContent || "[]");
+    const toggleDisplay = (el) => el.style.display = el.style.display === "none" ? "block" : "none";
+
+    function renderChart() {
+        const data = getHistoryData();
+        if (!data.length) return;
+
+        toggleDisplay(chartWrap);
+        if (chartWrap.style.display === "none" || epssChartInstance) return;
+
+        const history = [];
+        const map = new Map(data.map(h => [new Date(h.published_at + "T00:00:00").setHours(0,0,0,0), h]));
+        
+        const end = new Date(data[data.length - 1].published_at + "T00:00:00").setHours(0,0,0,0);
+        let start = new Date(end);
+        start.setDate(start.getDate() - 30);
+        
+        const actualStart = new Date(data[0].published_at + "T00:00:00").setHours(0,0,0,0);
+        start = new Date(Math.max(start.getTime(), actualStart));
+
+        for (let d = start; d.getTime() <= end; d.setDate(d.getDate() + 1)) {
+            history.push(map.get(d.getTime()) || {
+                published_at: `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`,
+                score: null, percentile: null
+            });
+        }
+        try {
+            epssChartInstance = bb.generate({
+                bindto: "#epss-chart",
+                size: { height: 260 }, padding: { right: 25 },
+                data: {
+                    x: "Date", xFormat: "%Y-%m-%d",
+                    columns: [
+                        ["Date", ...history.map(h => h.published_at || "")],
+                        ["Score", ...history.map(h => h.score === null ? null : parseFloat(h.score))],
+                        ["Percentile", ...history.map(h => h.percentile === null ? null : parseFloat(h.percentile))],
+                    ],
+                    type: "line", colors: { Score: "#df25e6ff", Percentile: "#00d1b2" },
+                },
+                //Handles missing dates
+                line: { connectNull: false },
+                axis: {
+                    x: { type: "timeseries", tick: { format: "%b %d", count: Math.min(history.length, 6), fit: true } },
+                    y: { min: 0, max: 1, padding: { top: 10, bottom: 0 }, tick: { format: v => v.toFixed(4) } },
+                },
+                point: { r: 3 }, legend: { show: true },
+                tooltip: {
+                    format: {
+                        title: d => d instanceof Date ? `${d.toLocaleString('en-us', {month: 'short'})} ${String(d.getDate()).padStart(2, '0')}, ${d.getFullYear()}` : String(d),
+                        value: v => v.toFixed(5),
+                    },
+                },
+            });
+        } catch (e) { console.error("[epss-chart]", e); }
+    }
+
+    btnChart?.addEventListener("click", renderChart);
+    btnTable?.addEventListener("click", () => toggleDisplay(tableWrap));
+})();