feat: implement column visibility management for reports, cache, jobs, and instances tables with localStorage support

src/ui/app/static/js/pages/bans.js

@@ -196,7 +196,7 @@ $(document).ready(function () {
     },
     {
       extend: "colvis",
-      columns: "th:not(:nth-child(-n+3))",
+      columns: "th:not(:nth-child(-n+3)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-md-2"></span><span class="d-none d-md-inline">Columns</span>',
       className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
@@ -491,6 +491,24 @@ $(document).ready(function () {
   $("#bans").removeClass("d-none");
   $("#bans-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    3: true,
+    4: true,
+    5: true,
+    6: true,
+    7: true,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-bans-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      bans_table.column(key).visible(value);
+    });
+  }
+
   bans_table.responsive.recalc();
 
   bans_table.on("mouseenter", "td", function () {
@@ -545,6 +563,21 @@ $(document).ready(function () {
     }
   });
 
+  bans_table.on("column-visibility.dt", function (e, settings, column, state) {
+    if (column < 3 || column === 8) return;
+    columnVisibility[column] = state;
+    // Check if columVisibility is equal to defaultColsVisibility
+    const isDefault =
+      JSON.stringify(columnVisibility) ===
+      JSON.stringify(defaultColsVisibility);
+    // If it is, remove the key from localStorage
+    if (isDefault) {
+      localStorage.removeItem("bw-bans-columns");
+    } else {
+      localStorage.setItem("bw-bans-columns", JSON.stringify(columnVisibility));
+    }
+  });
+
   $(document).on("click", ".unban-ip", function () {
     if (isReadOnly) {
       alert("This action is not allowed in read-only mode.");

src/ui/app/static/js/pages/cache.js

@@ -72,7 +72,7 @@ $(document).ready(function () {
   layout.topStart.buttons = [
     {
       extend: "colvis",
-      columns: "th:not(:nth-child(-n+3))",
+      columns: "th:not(:nth-child(-n+3)):not(:last-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) {
@@ -251,6 +251,23 @@ $(document).ready(function () {
   $("#cache").removeClass("d-none");
   $("#cache-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    3: true,
+    4: true,
+    5: true,
+    6: false,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-cache-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      cache_table.column(key).visible(value);
+    });
+  }
+
   cache_table.responsive.recalc();
 
   cache_table.on("mouseenter", "td", function () {
@@ -277,4 +294,22 @@ $(document).ready(function () {
       .nodes()
       .each((el) => el.classList.remove("highlight"));
   });
+
+  cache_table.on("column-visibility.dt", function (e, settings, column, state) {
+    if (column < 3 || column === 7) return;
+    columnVisibility[column] = state;
+    // Check if columVisibility is equal to defaultColsVisibility
+    const isDefault =
+      JSON.stringify(columnVisibility) ===
+      JSON.stringify(defaultColsVisibility);
+    // If it is, remove the key from localStorage
+    if (isDefault) {
+      localStorage.removeItem("bw-cache-columns");
+    } else {
+      localStorage.setItem(
+        "bw-cache-columns",
+        JSON.stringify(columnVisibility),
+      );
+    }
+  });
 });

src/ui/app/static/js/pages/configs.js

@@ -171,7 +171,7 @@ $(document).ready(function () {
     },
     {
       extend: "colvis",
-      columns: "th:not(:nth-child(-n+3))",
+      columns: "th:not(:nth-child(-n+3)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-md-2"></span><span class="d-none d-md-inline">Columns</span>',
       className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
@@ -483,6 +483,24 @@ $(document).ready(function () {
   $("#configs").removeClass("d-none");
   $("#configs-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    3: true,
+    4: true,
+    5: true,
+    6: true,
+    7: false,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-configs-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      configs_table.column(key).visible(value);
+    });
+  }
+
   configs_table.responsive.recalc();
 
   configs_table.on("mouseenter", "td", function () {
@@ -537,6 +555,27 @@ $(document).ready(function () {
     }
   });
 
+  configs_table.on(
+    "column-visibility.dt",
+    function (e, settings, column, state) {
+      if (column === 0 || column === 1 || column === 8) return;
+      columnVisibility[column] = state;
+      // Check if columVisibility is equal to defaultColsVisibility
+      const isDefault =
+        JSON.stringify(columnVisibility) ===
+        JSON.stringify(defaultColsVisibility);
+      // If it is, remove the key from localStorage
+      if (isDefault) {
+        localStorage.removeItem("bw-configs-columns");
+      } else {
+        localStorage.setItem(
+          "bw-configs-columns",
+          JSON.stringify(columnVisibility),
+        );
+      }
+    },
+  );
+
   $(document).on("click", ".delete-config", function () {
     if (isReadOnly) {
       alert("This action is not allowed in read-only mode.");

src/ui/app/static/js/pages/instances.js

@@ -190,7 +190,7 @@ $(document).ready(function () {
     },
     {
       extend: "colvis",
-      columns: "th:not(:nth-child(-n+3))",
+      columns: "th:not(:nth-child(-n+3)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-md-2"></span><span class="d-none d-md-inline">Columns</span>',
       className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
@@ -600,6 +600,25 @@ $(document).ready(function () {
   $("#instances").removeClass("d-none");
   $("#instances-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    3: false,
+    4: false,
+    5: true,
+    6: true,
+    7: true,
+    8: true,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-instances-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      instances_table.column(key).visible(value);
+    });
+  }
+
   instances_table.responsive.recalc();
 
   instances_table.on("mouseenter", "td", function () {
@@ -654,6 +673,27 @@ $(document).ready(function () {
     }
   });
 
+  instances_table.on(
+    "column-visibility.dt",
+    function (e, settings, column, state) {
+      if (column === 0 || column === 1 || column === 9) return;
+      columnVisibility[column] = state;
+      // Check if columVisibility is equal to defaultColsVisibility
+      const isDefault =
+        JSON.stringify(columnVisibility) ===
+        JSON.stringify(defaultColsVisibility);
+      // If it is, remove the key from localStorage
+      if (isDefault) {
+        localStorage.removeItem("bw-instances-columns");
+      } else {
+        localStorage.setItem(
+          "bw-instances-columns",
+          JSON.stringify(columnVisibility),
+        );
+      }
+    },
+  );
+
   $(document).on("click", ".ping-instance", function () {
     if (actionLock) {
       return;

src/ui/app/static/js/pages/jobs.js

@@ -52,7 +52,7 @@ $(document).ready(function () {
   layout.topStart.buttons = [
     {
       extend: "colvis",
-      columns: "th:not(:nth-child(-n+3))",
+      columns: "th:not(:nth-child(-n+3)):not(:last-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) {
@@ -376,6 +376,24 @@ $(document).ready(function () {
   $("#jobs").removeClass("d-none");
   $("#jobs-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    3: true,
+    4: true,
+    5: true,
+    6: true,
+    7: true,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-jobs-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      jobs_table.column(key).visible(value);
+    });
+  }
+
   jobs_table.responsive.recalc();
 
   jobs_table.on("mouseenter", "td", function () {
@@ -430,6 +448,21 @@ $(document).ready(function () {
     }
   });
 
+  jobs_table.on("column-visibility.dt", function (e, settings, column, state) {
+    if (column < 3 || column === 8) return;
+    columnVisibility[column] = state;
+    // Check if columVisibility is equal to defaultColsVisibility
+    const isDefault =
+      JSON.stringify(columnVisibility) ===
+      JSON.stringify(defaultColsVisibility);
+    // If it is, remove the key from localStorage
+    if (isDefault) {
+      localStorage.removeItem("bw-jobs-columns");
+    } else {
+      localStorage.setItem("bw-jobs-columns", JSON.stringify(columnVisibility));
+    }
+  });
+
   $(document).on("click", ".show-history", function () {
     const historyModal = $("#modal-job-history");
     const job = $(this).data("job");

src/ui/app/static/js/pages/plugins.js

@@ -202,7 +202,7 @@ $(document).ready(function () {
     },
     {
       extend: "colvis",
-      columns: "th:not(:nth-child(-n+3))",
+      columns: "th:not(:nth-child(-n+3)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-md-2"></span><span class="d-none d-md-inline">Columns</span>',
       className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: function (dt, idx, title) {
@@ -475,6 +475,25 @@ $(document).ready(function () {
   $("#plugins").removeClass("d-none");
   $("#plugins-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    2: false,
+    4: false,
+    5: true,
+    6: true,
+    7: true,
+    8: true,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-plugins-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      plugins_table.column(key).visible(value);
+    });
+  }
+
   plugins_table.responsive.recalc();
 
   plugins_table.on("mouseenter", "td", function () {
@@ -529,6 +548,27 @@ $(document).ready(function () {
     }
   });
 
+  plugins_table.on(
+    "column-visibility.dt",
+    function (e, settings, column, state) {
+      if (column === 0 || column === 1 || column === 9) return;
+      columnVisibility[column] = state;
+      // Check if columVisibility is equal to defaultColsVisibility
+      const isDefault =
+        JSON.stringify(columnVisibility) ===
+        JSON.stringify(defaultColsVisibility);
+      // If it is, remove the key from localStorage
+      if (isDefault) {
+        localStorage.removeItem("bw-plugins-columns");
+      } else {
+        localStorage.setItem(
+          "bw-plugins-columns",
+          JSON.stringify(columnVisibility),
+        );
+      }
+    },
+  );
+
   $(document).on("click", ".delete-plugin", function () {
     if (isReadOnly) {
       alert("This action is not allowed in read-only mode.");

src/ui/app/static/js/pages/reports.js

@@ -501,11 +501,54 @@ $(function () {
   $("#reports").removeClass("d-none");
   $("#reports-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    3: true,
+    4: false,
+    5: false,
+    6: false,
+    7: false,
+    8: true,
+    9: true,
+    10: false,
+    11: true,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-reports-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      reports_table.column(key).visible(value);
+    });
+  }
+
   reports_table.responsive.recalc();
 
   // Update tooltips after table draw
   reports_table.on("draw.dt", updateCountryTooltips);
 
+  reports_table.on(
+    "column-visibility.dt",
+    function (e, settings, column, state) {
+      if (column < 3) return;
+      columnVisibility[column] = state;
+      // Check if columVisibility is equal to defaultColsVisibility
+      const isDefault =
+        JSON.stringify(columnVisibility) ===
+        JSON.stringify(defaultColsVisibility);
+      // If it is, remove the key from localStorage
+      if (isDefault) {
+        localStorage.removeItem("bw-reports-columns");
+      } else {
+        localStorage.setItem(
+          "bw-reports-columns",
+          JSON.stringify(columnVisibility),
+        );
+      }
+    },
+  );
+
   const hashValue = location.hash;
   if (hashValue) {
     $("#dt-length-0").val(hashValue.replace("#", ""));

src/ui/app/static/js/pages/services.js

@@ -130,7 +130,7 @@ $(function () {
     },
     {
       extend: "colvis",
-      columns: "th:not(:nth-child(-n+3))",
+      columns: "th:not(:nth-child(-n+3)):not(:last-child)",
       text: '<span class="tf-icons bx bx-columns bx-18px me-md-2"></span><span class="d-none d-md-inline">Columns</span>',
       className: "btn btn-sm btn-outline-primary rounded-start",
       columnText: (dt, idx, title) => `${idx + 1}. ${title}`,
@@ -491,6 +491,23 @@ $(function () {
   $("#services").removeClass("d-none");
   $("#services-waiting").addClass("visually-hidden");
 
+  const defaultColsVisibility = {
+    3: true,
+    4: true,
+    5: true,
+    6: true,
+  };
+
+  var columnVisibility = localStorage.getItem("bw-services-columns");
+  if (columnVisibility === null) {
+    columnVisibility = JSON.parse(JSON.stringify(defaultColsVisibility));
+  } else {
+    columnVisibility = JSON.parse(columnVisibility);
+    Object.entries(columnVisibility).forEach(([key, value]) => {
+      services_table.column(key).visible(value);
+    });
+  }
+
   services_table.responsive.recalc();
 
   services_table.on("mouseenter", "td", function () {
@@ -545,6 +562,27 @@ $(function () {
     }
   });
 
+  services_table.on(
+    "column-visibility.dt",
+    function (e, settings, column, state) {
+      if (column === 0 || column === 1 || column === 7) return;
+      columnVisibility[column] = state;
+      // Check if columVisibility is equal to defaultColsVisibility
+      const isDefault =
+        JSON.stringify(columnVisibility) ===
+        JSON.stringify(defaultColsVisibility);
+      // If it is, remove the key from localStorage
+      if (isDefault) {
+        localStorage.removeItem("bw-services-columns");
+      } else {
+        localStorage.setItem(
+          "bw-services-columns",
+          JSON.stringify(columnVisibility),
+        );
+      }
+    },
+  );
+
   $(document).on("click", ".delete-service", function () {
     if (isReadOnly) {
       alert("This action is not allowed in read-only mode.");