From d65b28bd21dfceaef7ecd66ec8f1aee127fc5e25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Diot?= <tdiot@bunkerity.com>
Date: Sun, 1 Sep 2024 15:46:34 +0200
Subject: [PATCH] Tweak instances page in web UI

---
 src/ui/app/static/js/pages/instances.js | 213 ++++++++++++------------
 src/ui/app/templates/instances.html     |  27 ++-
 2 files changed, 129 insertions(+), 111 deletions(-)

diff --git a/src/ui/app/static/js/pages/instances.js b/src/ui/app/static/js/pages/instances.js
index 186bc42bb..801fc3aa1 100644
--- a/src/ui/app/static/js/pages/instances.js
+++ b/src/ui/app/static/js/pages/instances.js
@@ -1,13 +1,116 @@
 $(document).ready(function () {
-  const getSelectedInstances = (action) => {
+  var toastNum = 0;
+  var actionLock = false;
+  const instanceNumber = parseInt($("#instances_number").val());
+
+  const layout = {
+    topStart: {},
+    bottomEnd: {
+      buttons: [
+        {
+          extend: "ping_instances",
+        },
+        {
+          extend: "exec_form",
+          text: '<span class="tf-icons bx bx-refresh bx-18px me-2"></span>Reload',
+          className: "btn btn-sm btn-outline-primary",
+        },
+        {
+          extend: "exec_form",
+          text: '<span class="tf-icons bx bx-stop bx-18px me-2"></span>Stop',
+          className: "btn btn-sm btn-outline-primary",
+        },
+        {
+          extend: "delete_instances",
+        },
+      ],
+    },
+  };
+
+  if (instanceNumber > 10) {
+    layout.topStart.pageLength = {
+      menu: [10, 25, 50, 100, { label: "All", value: -1 }],
+    };
+    layout.bottomEnd.paging = true;
+  }
+
+  layout.topStart.buttons = [
+    {
+      extend: "colvis",
+      columns: "th:not(:first-child)",
+      text: '<span class="tf-icons bx bx-columns bx-18px me-2"></span>Columns',
+      className: "btn btn-sm btn-outline-primary",
+      columnText: function (dt, idx, title) {
+        return idx + 1 + ". " + title;
+      },
+    },
+    {
+      extend: "colvisRestore",
+      text: '<span class="tf-icons bx bx-reset bx-18px me-2"></span>Reset<span class="d-none d-md-inline"> columns</span>',
+      className: "btn btn-sm btn-outline-primary",
+    },
+    {
+      extend: "collection",
+      text: '<span class="tf-icons bx bx-export bx-18px me-2"></span>Export',
+      className: "btn btn-sm btn-outline-primary",
+      buttons: [
+        {
+          extend: "copy",
+          text: '<span class="tf-icons bx bx-copy bx-18px me-2"></span>Copy current page',
+          exportOptions: {
+            modifier: {
+              page: "current",
+            },
+          },
+        },
+        {
+          extend: "csv",
+          text: '<span class="tf-icons bx bx-table bx-18px me-2"></span>CSV',
+          bom: true,
+          filename: "bw_instances",
+          exportOptions: {
+            modifier: {
+              search: "none",
+            },
+          },
+        },
+        {
+          extend: "excel",
+          text: '<span class="tf-icons bx bx-table bx-18px me-2"></span>Excel',
+          filename: "bw_instances",
+          exportOptions: {
+            modifier: {
+              search: "none",
+            },
+          },
+        },
+      ],
+    },
+    {
+      extend: "create_instance",
+    },
+  ];
+
+  $(document).on("hidden.bs.toast", ".toast", function (event) {
+    if (event.target.id.startsWith("feedback-toast")) {
+      setTimeout(() => {
+        $(this).remove();
+      }, 100);
+    }
+  });
+
+  $("#modal-delete-instances").on("hidden.bs.modal", function () {
+    $("#selected-instances").empty();
+    $("#selected-instances-input").val("");
+  });
+
+  const getSelectedInstances = () => {
     const instances = [];
     $("tr.selected").each(function () {
       instances.push($(this).find("td:first").text());
     });
     return instances;
   };
-  var toastNum = 0;
-  var actionLock = false;
 
   $.fn.dataTable.ext.buttons.create_instance = {
     text: '<span class="tf-icons bx bx-plus-circle bx-18px me-2"></span>Create<span class="d-none d-md-inline"> new instance</span>',
@@ -31,7 +134,7 @@ $(document).ready(function () {
       }
       actionLock = true;
 
-      const instances = getSelectedInstances("ping");
+      const instances = getSelectedInstances();
       if (instances.length === 0) {
         actionLock = false;
         return;
@@ -98,7 +201,7 @@ $(document).ready(function () {
       }
       actionLock = true;
 
-      const instances = getSelectedInstances("ping");
+      const instances = getSelectedInstances();
       if (instances.length === 0) {
         actionLock = false;
         return;
@@ -151,7 +254,7 @@ $(document).ready(function () {
       }
       actionLock = true;
 
-      const instances = getSelectedInstances("ping");
+      const instances = getSelectedInstances();
       if (instances.length === 0) {
         actionLock = false;
         return;
@@ -200,90 +303,7 @@ $(document).ready(function () {
     select: {
       style: "multi+shift",
     },
-    layout: {
-      topStart: {
-        pageLength: {
-          menu: [10, 25, 50, 100, { label: "All", value: -1 }],
-        },
-        buttons: [
-          {
-            extend: "colvis",
-            columns: "th:not(:first-child)",
-            text: '<span class="tf-icons bx bx-columns bx-18px me-2"></span>Columns',
-            className: "btn btn-sm btn-outline-primary",
-            columnText: function (dt, idx, title) {
-              return idx + 1 + ". " + title;
-            },
-          },
-          {
-            extend: "colvisRestore",
-            text: '<span class="tf-icons bx bx-reset bx-18px me-2"></span>Reset<span class="d-none d-md-inline"> columns</span>',
-            className: "btn btn-sm btn-outline-primary",
-          },
-          {
-            extend: "collection",
-            text: '<span class="tf-icons bx bx-export bx-18px me-2"></span>Export',
-            className: "btn btn-sm btn-outline-primary",
-            buttons: [
-              {
-                extend: "copy",
-                text: '<span class="tf-icons bx bx-copy bx-18px me-2"></span>Copy current page',
-                exportOptions: {
-                  modifier: {
-                    page: "current",
-                  },
-                },
-              },
-              {
-                extend: "csv",
-                text: '<span class="tf-icons bx bx-table bx-18px me-2"></span>CSV',
-                bom: true,
-                filename: "bw_instances",
-                exportOptions: {
-                  modifier: {
-                    search: "none",
-                  },
-                },
-              },
-              {
-                extend: "excel",
-                text: '<span class="tf-icons bx bx-table bx-18px me-2"></span>Excel',
-                filename: "bw_instances",
-                exportOptions: {
-                  modifier: {
-                    search: "none",
-                  },
-                },
-              },
-            ],
-          },
-          {
-            extend: "create_instance",
-          },
-        ],
-      },
-      bottomEnd: {
-        buttons: [
-          {
-            extend: "ping_instances",
-          },
-          {
-            extend: "exec_form",
-            text: '<span class="tf-icons bx bx-refresh bx-18px me-2"></span>Reload',
-            className: "btn btn-sm btn-outline-primary",
-          },
-          {
-            extend: "exec_form",
-            text: '<span class="tf-icons bx bx-stop bx-18px me-2"></span>Stop',
-            className: "btn btn-sm btn-outline-primary",
-          },
-          {
-            extend: "delete_instances",
-          },
-        ],
-        paging: true,
-      },
-    },
+    layout: layout,
   });
 
   instances_table.on("mouseenter", "td", function () {
@@ -299,17 +319,4 @@ $(document).ready(function () {
       .nodes()
       .each((el) => el.classList.add("highlight"));
   });
-
-  $(document).on("hidden.bs.toast", ".toast", function (event) {
-    if (event.target.id.startsWith("feedback-toast")) {
-      setTimeout(() => {
-        $(this).remove();
-      }, 100);
-    }
-  });
-
-  $("#modal-delete-instances").on("hidden.bs.modal", function () {
-    $("#selected-instances").empty();
-    $("#selected-instances-input").val("");
-  });
 });
diff --git a/src/ui/app/templates/instances.html b/src/ui/app/templates/instances.html
index eb82bb114..eb9d96340 100644
--- a/src/ui/app/templates/instances.html
+++ b/src/ui/app/templates/instances.html
@@ -18,6 +18,9 @@
         </div>
     </div>
     <div class="card table-responsive text-nowrap p-4 min-vh-70">
+        <input type="hidden"
+               id="instances_number"
+               value="{{ instances|length }}" />
         <input type="hidden"
                id="csrf_token"
                name="csrf_token"
@@ -25,13 +28,13 @@
         <table id="instances" class="table w-100">
             <thead>
                 <tr>
-                    <th>Hostname</th>
-                    <th>Name</th>
-                    <th>Method</th>
-                    <th>Health</th>
-                    <th>Type</th>
-                    <th>Creation date</th>
-                    <th>Last seen</th>
+                    <th data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The hostname of the Instance">Hostname</th>
+                    <th data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The user defined or auto-generated Instance's name">Name</th>
+                    <th data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The creation method of the Instance">Method</th>
+                    <th data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The Instance's health status">Health</th>
+                    <th data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The Instance's type">Type</th>
+                    <th data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The date and time when the Instance was created">Created</th>
+                    <th data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="The date and time when the Instance was last seen">Last Seen</th>
                 </tr>
             </thead>
             <tbody>
@@ -52,7 +55,15 @@
                                       class="badge rounded-pill bg-label-warning">Loading</span>
                             {% endif %}
                         </td>
-                        <td>{{ instance.type }}</td>
+                        <td>
+                            {% if instance.type == "container" %}
+                            <i class="bx bx-18px bxl-docker"></i>&nbsp;Container
+                            {% elif instance.type == "pod" %}
+                                <i class="bx bx-18px bxl-kubernetes"></i>&nbsp;Pod
+                            {% else %}
+                            <i class="bx bx-18px bx-microchip"></i>&nbsp;Static
+                            {% endif %}
+                        </td>
                         <td>{{ instance.creation_date.astimezone().strftime("%Y-%m-%d %H:%M:%S %Z") }}</td>
                         <td>{{ instance.last_seen.astimezone().strftime("%Y-%m-%d %H:%M:%S %Z") }}</td>
                     </tr>