From 2d8a9e8a6f7e2e32888c8a0bc731ffba5dbaf9af Mon Sep 17 00:00:00 2001
From: Matteo Biscosi <biscosi@ntop.org>
Date: Wed, 16 Apr 2025 18:47:52 +0200
Subject: [PATCH] Added sticky action column (#7518)

---
 .../views/private/clients/white-mode.scss     | 61 ++++++++-----
 http_src/vue/table.vue                        | 89 ++++++++++++-------
 2 files changed, 97 insertions(+), 53 deletions(-)

diff --git a/http_src/views/private/clients/white-mode.scss b/http_src/views/private/clients/white-mode.scss
index 2c747914f5..d9a63af0a9 100644
--- a/http_src/views/private/clients/white-mode.scss
+++ b/http_src/views/private/clients/white-mode.scss
@@ -16,7 +16,7 @@ a,
   text-decoration: none;
 }
 
-summary> span {
+summary>span {
   border-bottom: 1px dotted #808080;
   color: initial;
 }
@@ -25,7 +25,7 @@ code {
   color: #393D44;
 }
 
-.masthead> .nav> .nav-item {
+.masthead>.nav>.nav-item {
   margin-left: 3px;
   margin-right: 3px;
 }
@@ -145,11 +145,11 @@ path.link {
   margin-top: 4px;
 }
 
-.ntop-progress-stacked-legend> span> span:last-child {
+.ntop-progress-stacked-legend>span>span:last-child {
   margin-left: 3px;
 }
 
-.ntop-progress-stacked-legend> span:not(:first-child) {
+.ntop-progress-stacked-legend>span:not(:first-child) {
   margin-left: 20px;
 }
 
@@ -345,7 +345,7 @@ main#n-container {
   border-radius: 0.25rem;
 }
 
-.chips-container> input[type= 'text'] {
+.chips-container>input[type='text'] {
   border: none;
   outline: none;
   display: inline-block;
@@ -353,7 +353,7 @@ main#n-container {
   min-width: 100%;
 }
 
-.chips-container> input[type= 'text']:focus {
+.chips-container>input[type='text']:focus {
   border: none !important;
   outline: none !important;
 }
@@ -448,7 +448,7 @@ details ul li i.dot {
   border-radius: 50%;
 }
 
-details ul li> span {
+details ul li>span {
   color: #8E8E8E;
 }
 
@@ -462,7 +462,7 @@ details ul li> span {
   background-color: #FBFBFB;
 }
 
-.switches-list-container> ul {
+.switches-list-container>ul {
   list-style-type: none;
   padding-left: 0;
 }
@@ -500,7 +500,7 @@ td.dt-body-right {
   overflow-y: scroll;
 }
 
-.scrollable-log> code {
+.scrollable-log>code {
   word-break: break-all;
 }
 
@@ -583,7 +583,7 @@ footer {
   top: calc(50% - 0.5rem);
 }
 
-.btn[role= 'combobox'] {
+.btn[role='combobox'] {
   border-color: #CED4D9;
   background-color: #FFFFFF;
 }
@@ -613,7 +613,7 @@ footer {
   width: 100%;
 }
 
-.ntop-widget-container> .error-box {
+.ntop-widget-container>.error-box {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -754,7 +754,7 @@ td.dashboard-counter {
   border-color: #F7E694;
 }
 
-li> a> .fa-external-link-alt {
+li>a>.fa-external-link-alt {
   color: #0091EA;
 }
 
@@ -824,12 +824,12 @@ li> a> .fa-external-link-alt {
   padding: 0.05em 0.2em;
 }
 
-.tagify__tag> div {
+.tagify__tag>div {
   display: flex;
   align-items: center;
 }
 
-.bootstrap-select:not([class *= 'col-']):not([class *= 'form-control']):not(.input-group-btn) {
+.bootstrap-select:not([class *='col-']):not([class *='form-control']):not(.input-group-btn) {
   min-width: 10rem !important;
 }
 
@@ -1096,6 +1096,7 @@ li.select2-selection__choice {
 .ntopng-table tbody tr:nth-of-type(odd) {
   background-color: rgba(0, 0, 0, 0.05) !important;
 }
+
 .table-striped tbody tr:nth-of-type(odd),
 .table-striped tbody tr:nth-of-type(even) {
   background-color: transparent !important;
@@ -1116,7 +1117,9 @@ li.select2-selection__choice {
   z-index: 1 !important;
 }
 
-.fa-sort, .fa-sort-up, .fa-sort-down {
+.fa-sort,
+.fa-sort-up,
+.fa-sort-down {
   margin-left: 0.5rem !important;
   opacity: 0.6 !important;
 }
@@ -1159,11 +1162,11 @@ li.select2-selection__choice {
     display: block !important;
     overflow-x: auto !important;
   }
-  
+
   input[type="search"] {
     width: 150px !important;
   }
-  
+
   input[type="search"]:focus {
     width: 170px !important;
   }
@@ -1198,11 +1201,27 @@ li.select2-selection__choice {
 }
 
 .detail-value {
-    color: #212529;
-    font-weight: normal;
+  color: #212529;
+  font-weight: normal;
 }
 
 .link-button {
-    cursor: pointer;
-    color: var(--bs-dropdown-link-color) !important;
+  cursor: pointer;
+  color: var(--bs-dropdown-link-color) !important;
+}
+
+table th.sticky-column-th {
+  position: sticky !important;
+  left: 0 !important;
+  z-index: 2 !important;
+  /* Aggiungi un'ombra sottile per evidenziare il bordo */
+  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2) !important;
+}
+
+.ntopng-table tbody tr td.sticky-column-td {
+  position: sticky !important;
+  left: 0 !important;
+  z-index: 2 !important;
+  /* Aggiungi un'ombra sottile per evidenziare il bordo */
+  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2) !important;
 }
\ No newline at end of file
diff --git a/http_src/vue/table.vue b/http_src/vue/table.vue
index bc38ed52f6..295a24fc1a 100644
--- a/http_src/vue/table.vue
+++ b/http_src/vue/table.vue
@@ -6,7 +6,7 @@
         <Loading v-if="isLoading"></Loading>
         <div class="button-group mb-2 d-flex align-items-center"> <!-- TableHeader -->
             <div class="form-group d-flex align-items-end" style="flex-wrap: wrap;">
-                <!-- Slot for custom header--> 
+                <!-- Slot for custom header-->
                 <slot name="custom_header"></slot>
             </div>
 
@@ -16,30 +16,31 @@
                     <div class="me-2">
                         <label>
                             <select v-model="rowsPerPage" @change="change_per_page">
-                                <option v-for="rowsPerPage in rowsPerPageOptions" :value="rowsPerPage">{{ rowsPerPage }}</option>
+                                <option v-for="rowsPerPage in rowsPerPageOptions" :value="rowsPerPage">{{ rowsPerPage }}
+                                </option>
                             </select>
                         </label>
                     </div>
 
                     <!-- Custom buttons slot -->
                     <slot name="custom_buttons"></slot>
-                    
+
                     <!-- Reset columns size-->
                     <button class="btn btn-link" type="button" @click="reset_column_size">
                         <i class="fas fa-columns" data-bs-toggle="tooltip" data-bs-placement="top"
                             :title="_i18n('reset_column')"></i>
                     </button>
-                    
+
                     <!-- Refresh table -->
                     <button class="btn btn-link" type="button" @click="refresh_table()">
                         <i class="fas fa-refresh" data-bs-toggle="tooltip" data-bs-placement="top"
                             :title="_i18n('refresh')"></i>
                     </button>
-                    
+
                     <!-- Autorefresh toggle -->
                     <div v-if="show_autorefresh > 0" class="d-inline-block">
-                        <Switch v-model:value="isAutoRefreshEnabled" class="me-2 mt-1" :title="autorefresh_title" style=""
-                            @change_value="update_autorefresh">
+                        <Switch v-model:value="isAutoRefreshEnabled" class="me-2 mt-1" :title="autorefresh_title"
+                            style="" @change_value="update_autorefresh">
                         </Switch>
                     </div>
 
@@ -83,11 +84,12 @@
                     <tr>
                         <!-- Column Headers -->
                         <template v-for="(col, col_index) in processedColumns">
-                            <th v-if="col.visible" scope="col"
-                                :class="{ 'pointer': col.sortable, 'unset': !col.sortable, }"
-                                style="white-space: nowrap;"
-                                :style="[(col.min_width ? 'min-width: ' + col.min_width + ';' : '')]"
-                                @click="change_column_sort(col, col_index)"
+                            <th v-if="col.visible" scope="col" :class="[
+                                { 'pointer': col.sortable, 'unset': !col.sortable, },
+                                { 'sticky-column-th': col.sticky }
+                            ]" style="white-space: nowrap;" :style="[
+                                (col.min_width ? 'min-width: ' + col.min_width + ';' : ''),
+                            ]" @click="change_column_sort(col, col_index)"
                                 :data-resizable-column-id="get_column_id(col.data)">
                                 <div style="display:flex;">
                                     <!-- Print column name -->
@@ -106,13 +108,15 @@
                     <!-- Data rows -->
                     <tr v-if="!isChangingColumnVisibility && !isChangingRows" v-for="row in displayedRows">
                         <template v-for="(col, col_index) in processedColumns">
-                            <td v-if="col.visible" scope="col" class="">
+                            <td v-if="col.visible" scope="col" :class="[
+                                { 'sticky-column-td': col.sticky }
+                            ]">
                                 <!-- HTML content if provided -->
                                 <div v-if="print_html_row != null && print_html_row(col.data, row, true) != null"
-                                :class="col.classes" class="wrap-column" :style="col.style"
-                                v-html="print_html_row(col.data, row)">
-                            </div>
-                            <div :style="col.style" style="" class="wrap-column margin-sm" :class="col.classes">
+                                    :class="col.classes" class="wrap-column" :style="col.style"
+                                    v-html="print_html_row(col.data, row)">
+                                </div>
+                                <div :style="col.style" style="" class="wrap-column margin-sm" :class="col.classes">
                                     <!-- Vue node if provided -->
                                     <VueNode :key="row"
                                         v-if="print_vue_node_row != null && print_vue_node_row(col.data, row, vue_obj, true) != null"
@@ -136,8 +140,8 @@
 
         <div>
             <!-- Pagination component, bottom right -->
-            <SelectTablePage ref="paginationRef" :key="searchDelay" :total_rows="totalRowCount"
-                :per_page="rowsPerPage" @change_active_page="change_active_page">
+            <SelectTablePage ref="paginationRef" :key="searchDelay" :total_rows="totalRowCount" :per_page="rowsPerPage"
+                @change_active_page="change_active_page">
             </SelectTablePage>
         </div>
 
@@ -150,10 +154,9 @@
             <div class="text-start">
                 <small id="historical_flows_table-query-time" style="" class="query">Query performed in <span
                         class="seconds">{{
-        (query_info.query_duration_msec / 1000).toFixed(3) }}</span> seconds. <span
+                            (query_info.query_duration_msec / 1000).toFixed(3) }}</span> seconds. <span
                         id="historical_flows_table-query" style="cursor: pointer;" class="badge bg-secondary"
-                        :title=query_info.query @click="copy_query_into_clipboard"
-                        ref="sqlButtonRef">SQL</span></small>
+                        :title=query_info.query @click="copy_query_into_clipboard" ref="sqlButtonRef">SQL</span></small>
             </div>
         </div>
     </div>
@@ -223,7 +226,7 @@ const rowsPerPageOptions = [10, 20, 40, 50, 80, 100];  // Available rows per pag
 const rowsPerPage = ref(get_num_pages());               // Current rows per page setting
 const columnWidthStore = window.store;                          // Store for column width persistence
 const searchString = ref("");                          // Search term
-             
+
 const paginationRef = ref(null);                 // Reference to pagination component
 const isLoading = ref(false);                          // Loading state flag
 const query_info = ref(null);                        // Query execution info (time, records, SQL)
@@ -265,12 +268,25 @@ function get_col_id(col) {
     }
 }
 
+function set_dropdown_listener() {
+    document.querySelectorAll('.dropdown').forEach(dropdown => {
+        dropdown.addEventListener('show.bs.dropdown', function () {
+            this.closest('td').classList.add('dropdown-active');
+        });
+
+        dropdown.addEventListener('hide.bs.dropdown', function () {
+            this.closest('td').classList.remove('dropdown-active');
+        });
+    });
+}
+
 // init table with columns and rows
 async function load_table() {
     await set_columns_wrap();       // Prepare column definitions
     await set_rows();               // Fetch initial rows
     set_columns_resizable();        // Initialize resizable columns
     dropdownRef.value.load_menu();     // Initialize dropdown menu
+    set_dropdown_listener();
     emit("loaded");                 // Emit loaded event
 }
 
@@ -409,6 +425,7 @@ async function set_columns_wrap() {
             sortable: is_column_sortable(c),
             min_width: column_min_width(c),
             order: col_opt?.order || i,
+            sticky: c?.sticky,
             classes,
             style,
             data: c,
@@ -594,16 +611,16 @@ function filterRows(rows, searchTerm) {
     if (!searchTerm || searchTerm.trim() === '') {
         return rows;
     }
-    
+
     searchTerm = searchTerm.toLowerCase();
-    
+
     return rows.filter(row => {
         // Check each visible column for the search term
         return processedColumns.value.some(col => {
             if (!col.visible) return false;
-            
+
             let cellContent = '';
-            
+
             // Get cell content based on how it's rendered
             if (props.print_html_row && props.print_html_row(col.data, row, true) != null) {
                 // For HTML content, get the rendered text and strip HTML tags
@@ -619,7 +636,7 @@ function filterRows(rows, searchTerm) {
                 const rawValue = row[col.data];
                 cellContent = rawValue ? String(rawValue).toLowerCase() : '';
             }
-            
+
             return cellContent.includes(searchTerm);
         });
     });
@@ -695,14 +712,14 @@ async function on_change_map_search() {
             currentPage = 0;
             paginationRef.value.change_active_page(0, 0);
         }
-        
+
         await set_rows(); // get filtered rows
-        
+
         // Update pagination after search
         if (!props.paging) {
             redraw_select_pages();
         }
-        
+
         map_search_change_timeout = null;
     }, timeout);
 }
@@ -733,4 +750,12 @@ defineExpose({ load_table, refresh_table, get_columns_defs, get_rows_num, search
 
 </script>
 
-<style scoped></style>
+<style scoped>
+/* Used just for the action column in case of dropdowns, otherwise the
+ * visualization stack is incorrect, need to increment the z-index of the
+ * selected td
+ */
+td.sticky-column-td.dropdown-active {
+    z-index: 3 !important;
+}
+</style>