chg: [website] Improved list of sightings for a vuln and fixed a smal…

…l issue in the API.

website/web/api/v1/sighting.py

@@ -22,7 +22,7 @@
 from website.validators import validate_json
 from website.web.api.v1.common import auth_func
 from website.web.api.v1.common import metada_params_model
-from website.web.api.v1.common import user_light_params_model
+from website.web.api.v1.common import user_params_model
 from website.web.api.v1.common import uuid_type
 from website.web.api.v1.types import ResultType
 from website.models import Sighting
@@ -102,6 +102,10 @@
 sighting = sighting_ns.model("Sighting", sighting_params_model)
 metadata = sighting_ns.model("metadata", metada_params_model)
 
+sighting["author"] = fields.Nested(
+    sighting_ns.model("User", user_params_model), readonly=True
+)
+
 sighting_list_fields = sighting_ns.model(
     "SightingsList",
     {
@@ -226,7 +230,8 @@ def post(self) -> Tuple[ResultType, int]:
             )
 
         if (
-            Sighting.query.filter(
+            sighting.get("source", False)
+            and Sighting.query.filter(
                 Sighting.vulnerability.ilike(sighting["vulnerability"]),
                 Sighting.source == sighting["source"],
                 # func.date(Sighting.creation_timestamp) == func.date(current_time),

website/web/templates/vuln.html

@@ -10,6 +10,7 @@
 <script src="{{ url_for('static', filename='js/jsoneditor.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/pretty-print-json.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/easymde.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/luxon.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/chart.js') }}"></script>
 <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
 <script src="{{ url_for('static', filename='js/plots.js') }}"></script>
@@ -261,7 +262,24 @@ <h5>Tags</h5>
     <div id="sightingsChartContainer" class="chart-container pt-3">
       <canvas id="sightingsChart" height="400"></canvas>
     </div>
+    <div class="row">
+      <h3>Sightings</h3>
+      <div class="table-responsive">
+        <table class="table">
+          <thead>
+            <tr>
+              <th scope="col">Author</th>
+              <th scope="col">Source</th>
+              <th scope="col">Type</th>
+              <th scope="col">Date</th>
+            </tr>
+          </thead>
+          <tbody id="sighting-table-body"></tbody>
+        </table>
+      </div>
+    </div>
     <div id="chart-detailed-legend" class="row">
+      <h3>Nomenclature</h3>
       <div class="col-md-8">
         <ul class="list-group list-group-flush">
           <li class="list-group-item"><b>Seen</b>: The vulnerability was mentioned, discussed, or seen somewhere by the user.</li>
@@ -733,7 +751,7 @@ <h5>Tags</h5>
 
 
   function loadSightings() {
-    fetch("{{ url_for('apiv1.sighting_sightings_list', vuln_id=vulnerability_id) }}")
+    fetch("{{ url_for('apiv1.sighting_sightings_list', vuln_id=vulnerability_id) }}&date_from=1970-01-01")
     .then(response => response.json())
     .then(result => {
       document.getElementById("nb-sightings").innerText = result.metadata.count;
@@ -745,16 +763,64 @@ <h5>Tags</h5>
       } else{
         drawBarChart(result.data);
         document.getElementById("sightings-pane-top").style.display = 'block';
-        document.getElementById("chart-sightings").innerHTML = "<h3>Evolution of sightings over time.</h3>";
+        document.getElementById("chart-sightings").innerHTML = "<h3>Evolution of sightings over time</h3>";
         document.getElementById("sightingsChartContainer").style.display = 'block';
         document.getElementById("chart-detailed-legend").style.display = 'block';
+
+        // clear the table
+        const tableBody = document.getElementById("sighting-table-body");
+        while (tableBody.firstChild) {
+          tableBody.removeChild(tableBody.firstChild);
+        }
+
+        result.data
+        .sort(function (a, b) {
+            return new Date(b.creation_timestamp) - new Date(a.creation_timestamp);
+        })
+        .map(function (sighting) {
+          const row = document.createElement('tr'); // Create a table row
+
+          // Create and append the Author cell
+          const authorCell = document.createElement('td');
+          // authorCell.textContent = sighting.author.login;
+          authorCell.innerHTML = '<a href="/user/'+sighting.author.login+'">'+sighting.author.login+'</a>';
+          row.appendChild(authorCell);
+
+          // Create and append the Source cell
+          const sourceCell = document.createElement('td');
+          // sourceCell.textContent = sighting.source;
+          sourceCell.innerHTML = '<a href="'+sighting.source+'" rel="noreferrer" target="_blank">'+sighting.source+'</a>';
+          row.appendChild(sourceCell);
+
+          // Create and append the Type cell
+          const typeCell = document.createElement('td');
+          typeCell.textContent = sighting.type;
+          row.appendChild(typeCell);
+
+          // Create and append the Date cell
+          const dateCell = document.createElement('td');
+          dateCell.classList.add('datetime');
+          dateCell.textContent = sighting.creation_timestamp;
+          dateCell.title = sighting.creation_timestamp;
+          row.appendChild(dateCell);
+
+          document.getElementById("sighting-table-body").appendChild(row);
+        })
+
+        var DateTime = luxon.DateTime;
+        elements = document.getElementsByClassName("datetime");
+        Array.prototype.forEach.call(elements, function(element) {
+          element.textContent = DateTime.fromISO(element.textContent).toRelative()
+        });
+
       }
     })
     .catch((error) => {
       console.error('Error:', error);
     });
   };
 
+
 document.getElementById("btnThemeSwitch").addEventListener("click",()=>{
     if (document.documentElement.getAttribute("data-bs-theme") == "dark") {
       Array.from(document.getElementsByClassName("card")).forEach(container => {