Add child row for properties (#539)

* Add child row for properties - move initalisation of datatables to javascript - hide the properties column - show all hidden columns in the child row * Move datatables init back to datatables-api-plugin The datatables-api-plugin handles some local/session storage itself to save the state of the DataTable, which is needed to e.g. remember the search, order of the table... --------- Co-authored-by: Benjamin Meeusen <[email protected]> Co-authored-by: Martin Pokorny <[email protected]>
jenkinsci · Jul 30, 2023 · a6f2fc2 · a6f2fc2
1 parent 57509f7
commit a6f2fc2
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 8 deletions.
diff --git a/.../plugins/lockableresources/actions/LockableResourcesRootAction/tableResources/table.jelly b/.../plugins/lockableresources/actions/LockableResourcesRootAction/tableResources/table.jelly
@@ -30,6 +30,7 @@ THE SOFTWARE.
   xmlns:st="jelly:stapler"
   >
   <st:adjunct includes="io.jenkins.plugins.data-tables"/>
+
   <link rel="stylesheet" href="${resURL}/plugin/lockable-resources/css/style.css"/>
 
   <div class="table-responsive">
@@ -39,7 +40,20 @@ THE SOFTWARE.
       data-remember-search-text="true"
       isLoaded="true"
       data-columns-definition="[null, null, null, null, null, null, null]"
-      data-table-configuration="{}"
+      data-table-configuration='
+      {
+        "responsive": {
+          "details": {
+            "type": "column"
+          }
+        },
+        "columnDefs": [
+            { "targets": "index", "className": "dt-control" },
+            { "targets": "properties", "visible": false }
+        ],
+        "order": [ 0, "asc" ],
+        "stateSave": true
+      }'
     >
       <colgroup>
         <!-- index -->
@@ -58,13 +72,13 @@ THE SOFTWARE.
         <col action="col-width-1 text-end" />
       </colgroup>
       <thead>
-        <th>${%resources.table.column.index}</th>
-        <th>${%resources.table.column.resource}</th>
-        <th>${%resources.table.column.status}</th>
-        <th>${%resources.table.column.timestamp}</th>
-        <th>${%resources.table.column.labels}</th>
-        <th>${%resources.table.column.properties}</th>
-        <th>${%resources.table.column.action}</th>
+        <th data-class-name="index">${%resources.table.column.index}</th>
+        <th data-class-name="resource">${%resources.table.column.resource}</th>
+        <th data-class-name="status">${%resources.table.column.status}</th>
+        <th data-class-name="timestamp">${%resources.table.column.timestamp}</th>
+        <th data-class-name="labels">${%resources.table.column.labels}</th>
+        <th data-class-name="properties">${%resources.table.column.properties}</th>
+        <th data-class-name="action">${%resources.table.column.action}</th>
       </thead>
       <tbody>
         <j:forEach var="resource" items="${it.resources}" varStatus="idx">
@@ -320,4 +334,7 @@ THE SOFTWARE.
     </table>
   </div>
   <script type="text/javascript" src="${resURL}/plugin/lockable-resources/js/lockable-resources.js"/>
+
+
+
 </j:jelly>
diff --git a/src/main/webapp/js/lockable-resources.js b/src/main/webapp/js/lockable-resources.js
@@ -42,3 +42,41 @@ function replaceNote(element, resourceName) {
   });
   return false;
 }
+
+function format(d) {
+  // `d` is the original data object for the row
+  // show all the hidden columns in the child row
+  var hiddenRows = getHiddenColumns();
+  return hiddenRows.map(i => d[i]).join("<br>");
+}
+
+function getHiddenColumns() {
+    // returns the indexes of all hidden rows
+    var indexes = new Array();
+
+    jQuery("#lockable-resources").DataTable().columns().every( function () {
+        if (!this.visible())
+            indexes.push(this.index())
+    });
+
+    return indexes;
+}
+
+jQuery(document).ready(function() {
+  // Add event listener for opening and closing details
+  jQuery('#lockable-resources tbody').on('click', 'td.dt-control', function () {
+      var tr = jQuery(this).closest('tr');
+      var row = jQuery("#lockable-resources").DataTable().row(tr);
+
+      // child row example taken from https://datatables.net/examples/api/row_details.html
+      if (row.child.isShown()) {
+          // This row is already open - close it
+          row.child.hide();
+          tr.removeClass('shown');
+      } else {
+          // Open this row
+          row.child(format(row.data())).show();
+          tr.addClass('shown');
+      }
+  });
+} );