Refactor datatable filtering options in web UI

bunkerity · Oct 7, 2024 · 756af7b · 756af7b
1 parent 98c4aaf
commit 756af7b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 29 deletions.
diff --git a/src/ui/app/static/js/pages/configs.js b/src/ui/app/static/js/pages/configs.js
@@ -307,55 +307,60 @@ $(document).ready(function () {
           show: true,
           options: [
             {
-              label: "HTTP",
+              label: '<i class="bx bx-xs bx-window-alt"></i>&nbsp;HTTP',
               value: function (rowData, rowIdx) {
                 return / HTTP$/.test(rowData[2].trim());
               },
             },
             {
-              label: "SERVER_HTTP",
+              label: '<i class="bx bx-xs bx-window-alt"></i>&nbsp;SERVER_HTTP',
               value: function (rowData, rowIdx) {
                 return / SERVER_HTTP$/.test(rowData[2].trim());
               },
             },
             {
-              label: "DEFAULT_SERVER_HTTP",
+              label:
+                '<i class="bx bx-xs bx-window-alt"></i>&nbsp;DEFAULT_SERVER_HTTP',
               value: function (rowData, rowIdx) {
                 return / DEFAULT_SERVER_HTTP$/.test(rowData[2].trim());
               },
             },
             {
-              label: "MODSEC_CRS",
+              label:
+                '<i class="bx bx-xs bx-shield-quarter"></i>&nbsp;MODSEC_CRS',
               value: function (rowData, rowIdx) {
                 return / MODSEC_CRS$/.test(rowData[2].trim());
               },
             },
             {
-              label: "MODSEC",
+              label: '<i class="bx bx-xs bx-shield-alt-2"></i>&nbsp;MODSEC',
               value: function (rowData, rowIdx) {
                 return / MODSEC$/.test(rowData[2].trim());
               },
             },
             {
-              label: "STREAM",
+              label: '<i class="bx bx-xs bx-network-chart"></i>&nbsp;STREAM',
               value: function (rowData, rowIdx) {
                 return / STREAM$/.test(rowData[2].trim());
               },
             },
             {
-              label: "SERVER_STREAM",
+              label:
+                '<i class="bx bx-xs bx-network-chart"></i>&nbsp;SERVER_STREAM',
               value: function (rowData, rowIdx) {
                 return / SERVER_STREAM$/.test(rowData[2].trim());
               },
             },
             {
-              label: "CRS_PLUGINS_BEFORE",
+              label:
+                '<i class="bx bx-xs bx-shield-alt"></i>&nbsp;CRS_PLUGINS_BEFORE',
               value: function (rowData, rowIdx) {
                 return rowData[2].includes("BEFORE");
               },
             },
             {
-              label: "CRS_PLUGINS_AFTER",
+              label:
+                '<i class="bx bx-xs bx-shield-alt"></i>&nbsp;CRS_PLUGINS_AFTER',
               value: function (rowData, rowIdx) {
                 return rowData[2].includes("AFTER");
               },

diff --git a/src/ui/app/static/js/pages/instances.js b/src/ui/app/static/js/pages/instances.js
@@ -405,19 +405,22 @@ $(document).ready(function () {
           show: true,
           options: [
             {
-              label: "Up",
+              label:
+                '<i class="bx bx-xs bx-up-arrow-alt text-success"></i>&nbsp;Up',
               value: function (rowData, rowIdx) {
                 return rowData[4].includes("Up");
               },
             },
             {
-              label: "Down",
+              label:
+                '<i class="bx bx-xs bx-down-arrow-alt text-danger"></i>&nbsp;Down',
               value: function (rowData, rowIdx) {
                 return rowData[4].includes("Down");
               },
             },
             {
-              label: "Loading",
+              label:
+                '<i class="bx bx-xs bxs-hourglass text-warning"></i>&nbsp;Loading',
               value: function (rowData, rowIdx) {
                 return rowData[4].includes("Loading");
               },
@@ -433,19 +436,19 @@ $(document).ready(function () {
           show: true,
           options: [
             {
-              label: "Static",
+              label: '<i class="bx bx-xs bx-microchip"></i>&nbsp;Static',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("Static");
               },
             },
             {
-              label: "Container",
+              label: '<i class="bx bx-xs bxl-docker"></i>&nbsp;Container',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("Container");
               },
             },
             {
-              label: "Pod",
+              label: '<i class="bx bx-xs bxl-kubernetes"></i>&nbsp;Pod',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("Pod");
               },

diff --git a/src/ui/app/static/js/pages/jobs.js b/src/ui/app/static/js/pages/jobs.js
@@ -239,13 +239,13 @@ $(document).ready(function () {
           header: "Reload",
           options: [
             {
-              label: '<i class="bx bx-sm bx-x text-danger"></i>&nbsp;No',
+              label: '<i class="bx bx-xs bx-x text-danger"></i>&nbsp;No',
               value: function (rowData, rowIdx) {
                 return rowData[4].includes("bx-x");
               },
             },
             {
-              label: '<i class="bx bx-sm bx-check text-success"></i>&nbsp;Yes',
+              label: '<i class="bx bx-xs bx-check text-success"></i>&nbsp;Yes',
               value: function (rowData, rowIdx) {
                 return rowData[4].includes("bx-check");
               },
@@ -262,14 +262,14 @@ $(document).ready(function () {
           header: "Last run state",
           options: [
             {
-              label: '<i class="bx bx-sm bx-x text-danger"></i>&nbsp;Failed',
+              label: '<i class="bx bx-xs bx-x text-danger"></i>&nbsp;Failed',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("bx-x");
               },
             },
             {
               label:
-                '<i class="bx bx-sm bx-check text-success"></i>&nbsp;Success',
+                '<i class="bx bx-xs bx-check text-success"></i>&nbsp;Success',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("bx-check");
               },

diff --git a/src/ui/app/static/js/pages/plugins.js b/src/ui/app/static/js/pages/plugins.js
@@ -337,19 +337,20 @@ $(document).ready(function () {
           header: "Stream Support",
           options: [
             {
-              label: "No",
+              label: '<i class="bx bx-xs bx-x text-danger"></i>&nbsp;No',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("bx-x");
               },
             },
             {
-              label: "Yes",
+              label: '<i class="bx bx-xs bx-check text-success"></i>&nbsp;Yes',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("bx-check");
               },
             },
             {
-              label: "Partial",
+              label:
+                '<i class="bx bx-xs bx-minus text-warning"></i>&nbsp;Partial',
               value: function (rowData, rowIdx) {
                 return rowData[5].includes("bx-minus");
               },
@@ -365,25 +366,26 @@ $(document).ready(function () {
           show: true,
           options: [
             {
-              label: "PRO",
+              label:
+                '<img src="/admin/img/diamond.svg" alt="Pro plugin" width="16px" height="12.9125px" class="mb-1">&nbsp;PRO',
               value: function (rowData, rowIdx) {
                 return rowData[6].includes("PRO");
               },
             },
             {
-              label: "External",
+              label: '<i class="bx bx-plug bx-xs"></i>&nbsp;External',
               value: function (rowData, rowIdx) {
                 return rowData[6].includes("EXTERNAL");
               },
             },
             {
-              label: "UI",
+              label: '<i class="bx bx-cloud-upload bx-xs"></i>&nbsp;UI',
               value: function (rowData, rowIdx) {
                 return rowData[6].includes("UI");
               },
             },
             {
-              label: "Core",
+              label: '<i class="bx bx-shield bx-xs"></i>&nbsp;Core',
               value: function (rowData, rowIdx) {
                 return rowData[6].includes("CORE");
               },

diff --git a/src/ui/app/static/js/pages/services.js b/src/ui/app/static/js/pages/services.js
@@ -298,11 +298,11 @@ $(function () {
           show: true,
           options: [
             {
-              label: "Online",
+              label: '<i class="bx bx-xs bx-globe"></i>&nbsp;Online',
               value: (rowData) => rowData[2].includes("Online"),
             },
             {
-              label: "Draft",
+              label: '<i class="bx bx-xs bx-file-blank"></i>&nbsp;Draft',
               value: (rowData) => rowData[2].includes("Draft"),
             },
           ],

diff --git a/src/ui/app/templates/services.html b/src/ui/app/templates/services.html
@@ -168,7 +168,7 @@ <h5 class="modal-title">Confirm Conversion</h5>
                             <div id="selected-services-convert" class="mb-3"></div>
                         </div>
                         <div class="modal-footer justify-content-center">
-                            <button type="submit" class="btn btn-outline-success me-2">Convert services</button>
+                            <button type="submit" class="btn btn-outline-primary me-2">Convert services</button>
                             <button type="reset"
                                     class="btn btn-outline-secondary"
                                     data-bs-dismiss="modal">Cancel</button>