From 1aa40c0c7cd6e1df27df3c882dad600e75e25060 Mon Sep 17 00:00:00 2001
From: Steven Powell <spowellgrr@gmail.com>
Date: Wed, 28 Aug 2024 11:58:13 -0700
Subject: [PATCH] Sort chart list by ID

---
 pkg/handler/flake_chart.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/pkg/handler/flake_chart.html b/pkg/handler/flake_chart.html
index 1647794..5e6784c 100644
--- a/pkg/handler/flake_chart.html
+++ b/pkg/handler/flake_chart.html
@@ -28,6 +28,10 @@
   return `https://storage.googleapis.com/minikube-builds/logs/master/${jobId}/${environment}.html${testName ? `#${status}_${testName}` : ``}`;
 }
 
+function sortByID(a, b) {
+  return a.id - b.id;
+}
+
 // Parse URL search `query` into [{key, value}].
 function parseUrlQuery(query) {
   if (query[0] === '?') {
@@ -188,14 +192,14 @@
           <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Flake Percentage:</b> ${groupData.flakePercentage.toFixed(2)}%<br>
           <b>Jobs:</b><br>
-          ${resultArr.map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${status})`).join("<br>")}
+          ${resultArr.sort(sortByID).map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${status})`).join("<br>")}
           </div>`,
               groupData.avgDuration,
               `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
           <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Average Duration:</b> ${groupData.avgDuration.toFixed(2)}s<br>
           <b>Jobs:</b><br>
-          ${durationArr.map(({ id, duration, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${duration}s)`).join("<br>")}
+          ${durationArr.sort(sortByID).map(({ id, duration, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${duration}s)`).join("<br>")}
           </div>`,
           ]
       })
@@ -280,14 +284,14 @@
           <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Flake Percentage:</b> ${groupData.flakePercentage.toFixed(2)}%<br>
           <b>Jobs:</b><br>
-          ${resultArr.map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${status})`).join("<br>")}
+          ${resultArr.sort(sortByID).map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${status})`).join("<br>")}
           </div>`,
               groupData.avgDuration,
               `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
           <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Average Duration:</b> ${groupData.avgDuration.toFixed(2)}s<br>
           <b>Jobs:</b><br>
-          ${durationArr.map(({ id, duration, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${duration}s)`).join("<br>")}
+          ${durationArr.sort(sortByID).map(({ id, duration, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${duration}s)`).join("<br>")}
           </div>`,
           ]
       })
@@ -372,14 +376,14 @@
           <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Flake Percentage:</b> ${groupData.flakePercentage.toFixed(2)}%<br>
           <b>Jobs:</b><br>
-          ${resultArr.map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${status})`).join("<br>")}
+          ${resultArr.sort(sortByID).map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${status})`).join("<br>")}
           </div>`,
               groupData.avgDuration,
               `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
           <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Average Duration:</b> ${groupData.avgDuration.toFixed(2)}s<br>
           <b>Jobs:</b><br>
-          ${durationArr.map(({ id, duration, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${duration}s)`).join("<br>")}
+          ${durationArr.sort(sortByID).map(({ id, duration, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${duration}s)`).join("<br>")}
           </div>`,
           ]
       })
@@ -629,7 +633,7 @@
           <b>Date:</b> ${dateTime.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Flake Percentage:</b> ${+fp.toFixed(2)}%<br>
           <b>Jobs:</b><br>
-          ${commitArr.map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, name, status)}">${id}</a> (${status})`).join("<br>")}
+          ${commitArr.sort(sortByID).map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, name, status)}">${id}</a> (${status})`).join("<br>")}
           </div>`
           ]
       }
@@ -726,7 +730,7 @@
           <b>Date:</b> ${dateTime.toLocaleString([], {dateStyle: 'medium'})}<br>
           <b>Flake Percentage:</b> ${+fp.toFixed(2)}%<br>
           <b>Jobs:</b><br>
-          ${commitArr.map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, name, status)}">${id}</a> (${status})`).join("<br>")}
+          ${commitArr.sort(sortByID).map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, name, status)}">${id}</a> (${status})`).join("<br>")}
           </div>`
               ];
           }
@@ -975,4 +979,4 @@
     <div id="chart_div"></div>
     <div id="version_div"></div>
   </body>
-</html>
\ No newline at end of file
+</html>