Add search, sort and pagination feature to probes table (#464)

Co-authored-by: Adrien Lecharpentier <alecharpentier@cloudbees.com>
jenkins-infra · Apr 30, 2024 · 321406d · 321406d
1 parent 01fc806
commit 321406d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"