From 321406d066229212ac8342891806a9fd11feff59 Mon Sep 17 00:00:00 2001
From: Sridhar Sivakumar <srid01234567@gmail.com>
Date: Tue, 30 Apr 2024 14:53:37 +0530
Subject: [PATCH] Add search, sort and pagination feature to probes table
 (#464)

Co-authored-by: Adrien Lecharpentier <alecharpentier@cloudbees.com>
---
 war/package.json                              |  3 ++-
 war/src/main/js/index.js                      | 10 ++++++++
 war/src/main/less/index.less                  |  1 +
 .../resources/templates/probes/listing.html   |  2 +-
 war/yarn.lock                                 | 25 +++++++++++++++++++
 5 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/war/package.json b/war/package.json
index 6ff773d74..e32492c1a 100644
--- a/war/package.json
+++ b/war/package.json
@@ -24,7 +24,8 @@
     "webpack-remove-empty-scripts": "1.0.4"
   },
   "dependencies": {
-    "ionicons": "7.3.1"
+    "ionicons": "7.3.1",
+    "simple-datatables": "9.0.3"
   },
   "browserslist": [
     "defaults",
diff --git a/war/src/main/js/index.js b/war/src/main/js/index.js
index 3f34bda50..ba762a0c6 100644
--- a/war/src/main/js/index.js
+++ b/war/src/main/js/index.js
@@ -1,9 +1,19 @@
 import {defineCustomElements} from "ionicons/dist/loader";
+import { DataTable } from "simple-datatables";
 
 defineCustomElements(window, {
   resourcesUrl: '/',
 });
 
+const probesTable = document.getElementById('probes-table');
+if (probesTable !== null) {
+    new DataTable("#probes-table", {
+      perPageSelect: [10, 25, 50],
+      columns: [
+        { select: 1, sortable: false },
+      ]
+    });
+}
 
 const updateCollapseIcon = (container, target) => {
   if (target.classList.contains('show')) {
diff --git a/war/src/main/less/index.less b/war/src/main/less/index.less
index fb655ad0a..5ce13fe5e 100644
--- a/war/src/main/less/index.less
+++ b/war/src/main/less/index.less
@@ -7,6 +7,7 @@
 @import './modules/page-footer';
 @import './modules/score';
 @import './modules/table';
+@import '~simple-datatables/src/css/style.css';
 
 html {
   font-size: 16px !important;
diff --git a/war/src/main/resources/templates/probes/listing.html b/war/src/main/resources/templates/probes/listing.html
index e08250f9d..b10161834 100644
--- a/war/src/main/resources/templates/probes/listing.html
+++ b/war/src/main/resources/templates/probes/listing.html
@@ -12,7 +12,7 @@ <h1>Probes</h1>
         Raw results of the probes execution can be found on the
         <a href="" data-th-href="@{/probes/results}">results page</a>.
     </p>
-    <table class="table">
+    <table class="table" id="probes-table">
         <thead>
         <tr>
             <th>ID</th>
diff --git a/war/yarn.lock b/war/yarn.lock
index aff52e5ee..e39c73c50 100644
--- a/war/yarn.lock
+++ b/war/yarn.lock
@@ -1071,6 +1071,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.10":
+  version: 1.11.10
+  resolution: "dayjs@npm:1.11.10"
+  checksum: 27e8f5bc01c0a76f36c656e62ab7f08c2e7b040b09e613cd4844abf03fb258e0350f0a83b02c887b84d771c1f11e092deda0beef8c6df2a1afbc3f6c1fade279
+  languageName: node
+  linkType: hard
+
 "del@npm:^4.1.1":
   version: 4.1.1
   resolution: "del@npm:4.1.1"
@@ -1086,6 +1093,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff-dom@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "diff-dom@npm:5.1.3"
+  checksum: c3eecb6a0487e49b8429474994d9236959805666699e9074cf9c9a7e39f6a11818a9b80a2c4af58ec74496c08bbae7eb53b64184817e79699fba1f8f21a2ffe5
+  languageName: node
+  linkType: hard
+
 "dom-serializer@npm:^2.0.0":
   version: 2.0.0
   resolution: "dom-serializer@npm:2.0.0"
@@ -2160,6 +2174,7 @@ __metadata:
     path: "npm:0.12.7"
     postcss: "npm:8.4.38"
     postcss-loader: "npm:8.1.1"
+    simple-datatables: "npm:9.0.3"
     style-loader: "npm:3.3.4"
     webpack: "npm:5.91.0"
     webpack-cli: "npm:5.1.4"
@@ -2809,6 +2824,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-datatables@npm:9.0.3":
+  version: 9.0.3
+  resolution: "simple-datatables@npm:9.0.3"
+  dependencies:
+    dayjs: "npm:^1.11.10"
+    diff-dom: "npm:^5.1.3"
+  checksum: 0a68e2b124b5c9d8f582b697a8584cca13137834768fd713d8fd07542112389264cbafe9acc23ef486ec65fff0798a77bc8750bfc600aa4253681895dcef4fa0
+  languageName: node
+  linkType: hard
+
 "slash@npm:^5.1.0":
   version: 5.1.0
   resolution: "slash@npm:5.1.0"