From 4c89b6144a879da04b87b7937b0f5a76ae6b4e50 Mon Sep 17 00:00:00 2001
From: Matteo Biscosi <biscosi@ntop.org>
Date: Fri, 16 Aug 2024 16:55:42 +0200
Subject: [PATCH] Moved snmp rules page to new table

---
 http_src/vue/modal-add-snmp-device-rules.vue  |  37 +-
 http_src/vue/page-snmp-device-rules.vue       | 411 ++++++++----------
 http_src/vue/page-vulnerability-scan.vue      | 151 ++-----
 httpdocs/dist                                 |   2 +-
 httpdocs/tables_config/snmp_device_rules.json |  85 ++++
 5 files changed, 342 insertions(+), 344 deletions(-)
 create mode 100644 httpdocs/tables_config/snmp_device_rules.json

diff --git a/http_src/vue/modal-add-snmp-device-rules.vue b/http_src/vue/modal-add-snmp-device-rules.vue
index b28a688f793b..98ef352e5c4b 100644
--- a/http_src/vue/modal-add-snmp-device-rules.vue
+++ b/http_src/vue/modal-add-snmp-device-rules.vue
@@ -351,25 +351,25 @@ const set_row_to_edit = (row) => {
     disable_add.value = false;
 
     snmp_devices_list.value.forEach((item) => {
-      if (item.label_to_insert == row.device)
+      if (item.label_to_insert == row.device.id)
         selected_snmp_device.value = item;
     })
 
     // set threshold sign
     sign_threshold_list.value.forEach((t) => {
-      t.active = (t.value == row.threshold_sign)
+      t.active = (t.value == row.threshold.sign)
     })
 
     snmp_metric_list.value.forEach((t) => {
-      if (t.id == row.metric)
+      if (t.id == row.metric.id)
         selected_snmp_device_metric.value = t;
     })
 
     // set threshold
-    if (row.metric_type == 'volume')
+    if (row.metric.type == 'volume')
       volume_threshold_list.value.forEach((t) => {
-        if ((row.threshold % t.value) == 0) {
-          let row_threshold_value = row.threshold / t.value;
+        if ((row.threshold.value % t.value) == 0) {
+          let row_threshold_value = row.threshold.value / t.value;
           if (row_threshold_value < 1024) {
             t.active = true;
             threshold.value.value = row_threshold_value == 0 ? 1 : row_threshold_value;
@@ -380,11 +380,11 @@ const set_row_to_edit = (row) => {
           t.active = false;
         }
       })
-    else if (row.metric_type == 'throughput') {
-      row.threshold = row.threshold * 8;
+    else if (row.metric.type == 'throughput') {
+      row.threshold.value = row.threshold.value * 8;
       throughput_threshold_list.value.forEach((t) => {
         if ((row.threshold % t.value) == 0) {
-          let row_threshold_value = row.threshold / t.value;
+          let row_threshold_value = row.threshold.value / t.value;
           if (row_threshold_value < 1000) {
             t.active = true;
             threshold.value.value = row_threshold_value == 0 ? 1 : row_threshold_value;
@@ -398,22 +398,20 @@ const set_row_to_edit = (row) => {
     } else {
 
       //percentage case
-      threshold.value.value = row.threshold * row.threshold_sign;
+      threshold.value.value = row.threshold.value * row.threshold.sign;
 
     }
     change_active_threshold();
     metric_type_active_list.value.forEach((item) => {
-      if (item.id == row.metric_type) {
+      if (item.id == row.metric.type) {
         metric_type.value = item;
         item.active = true;
       } else
         item.active = false;
     })
 
-    // set rule_type
-    rule_type.value = row.rule_type;
     snmp_devices_list.value.forEach((t) => {
-      if (t.label == row.device)
+      if (t.label == row.device.id)
         selected_snmp_device.value = t;
     })
 
@@ -422,14 +420,14 @@ const set_row_to_edit = (row) => {
         selected_frequency.value = item;
     });
 
-    change_interfaces(row.device_port);
+    change_interfaces(row.interface.id);
 
   }
 }
 
 const show = (row) => {
   if (row != null) {
-    set_row_to_edit(row);
+    set_row_to_edit(row.row);
   } else {
     reset_modal_form();
   }
@@ -555,10 +553,9 @@ const add_ = (is_edit) => {
   const tmp_metric_label = selected_snmp_device_metric.value.label;
   const tmp_device = selected_snmp_device.value.label_to_insert;
   const tmp_device_label = selected_snmp_device.value.label;
-  const tmp_device_ifid = selected_snmp_interface.value == null || Object.entries(selected_snmp_interface.value).length === 0 ? "*" : selected_snmp_interface.value.id;
-  const tmp_device_ifid_label = selected_snmp_interface.value == null || Object.entries(selected_snmp_interface.value).length === 0 ? "*" : selected_snmp_interface.value.label;
-  // debugger;
-  // console.log(threshold)
+  const tmp_device_ifid = selected_snmp_interface.value == null || Object.entries(selected_snmp_interface.value).length === 0 || tmp_device_label === "*" ? "*" : selected_snmp_interface.value.id;
+  const tmp_device_ifid_label = selected_snmp_interface.value == null || Object.entries(selected_snmp_interface.value).length === 0 || tmp_device_label === "*" ? "*" : selected_snmp_interface.value.label;
+
   let tmp_metric_type = metric_type.value.id;
   let basic_value;
   let measure_unit_label;
diff --git a/http_src/vue/page-snmp-device-rules.vue b/http_src/vue/page-snmp-device-rules.vue
index 807dd0195c62..8e5698d15c03 100644
--- a/http_src/vue/page-snmp-device-rules.vue
+++ b/http_src/vue/page-snmp-device-rules.vue
@@ -3,71 +3,60 @@
 -->
 
 <template>
-<div class="row">
-  <div class="col-md-12 col-lg-12">
-    <div v-if="!props.is_check_enabled" class="alert alert-warning alert-dismissable">
-            <span
-              class="text-warning me-1"
-            ></span>
-            <span> {{ active_alert_text }}</span>
-          </div>
-    <div class="card">
-      <div class="overlay justify-content-center align-items-center position-absolute h-100 w-100">
-        <div class="text-center">
-          <div class="spinner-border text-primary mt-5" role="status">
-            <span class="sr-only position-absolute">Loading...</span>
-          </div>
-        </div>
+  <div class="row">
+    <ModalDeleteConfirm ref="modal_delete_confirm" :title="title_delete" :body="body_delete" @delete="delete_row">
+    </ModalDeleteConfirm>
+    <ModalAddSNMPRules ref="modal_add_snmp_device_rule" :frequency_list="frequency_list" :init_func="init_edit"
+      @add="add_host_rule" @edit="edit">
+    </ModalAddSNMPRules>
+    <div class="col-md-12 col-lg-12">
+      <div v-if="!context.is_check_enabled" class="alert alert-warning alert-dismissable">
+        <span class="text-warning me-1"></span>
+        <span> {{ active_alert_text }}</span>
       </div>
-      <div class="card-body">
-        <div class="mb-4">
-          <h4>{{ _i18n('if_stats_config.snmp_rules') }}</h4>
+      <div class="card">
+        <div class="card-body">
+          <div class="m-2 mb-3">
+            <TableWithConfig ref="table_snmp_rules" :table_id="table_id" :csrf="context.csrf"
+              :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
+              :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event">
+              <template v-slot:custom_buttons>
+                <button class="btn btn-link" type="button" ref="add_host" @click="open_add_host_rule_modal">
+                  <i class="fas fa-plus" data-bs-toggle="tooltip" data-bs-placement="top"
+                    :title="_i18n('add_vs_host')"></i>
+                </button>
+              </template>
+            </TableWithConfig>
+          </div>
         </div>
-      	<div id="host_rules">
-          <ModalDeleteConfirm ref="modal_delete_confirm"
-            :title="title_delete"
-            :body="body_delete"
-            @delete="delete_row">
-          </ModalDeleteConfirm>
-          <ModalAddSNMPRules ref="modal_add_snmp_device_rule"
-            :frequency_list="frequency_list"
-            :init_func="init_edit"
-            @add="add_host_rule"
-            @edit="edit">
-          </ModalAddSNMPRules>
-          
-          <Datatable ref="table_host_rules"
-            :table_buttons="host_rules_table_config.table_buttons"
-            :columns_config="host_rules_table_config.columns_config"
-            :data_url="host_rules_table_config.data_url"
-            :enable_search="host_rules_table_config.enable_search"
-            :table_config="host_rules_table_config.table_config">
-          </Datatable>
+        <div class="card-footer">
+          <NoteList :note_list="note_list">
+          </NoteList>
         </div>
       </div>
-      <div class="card-footer">
-        <NoteList
-        :note_list="note_list">
-        </NoteList>
-      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script setup>
 import { ref, onBeforeMount, onUnmounted } from "vue";
-import { default as Datatable } from "./datatable.vue";
+import { default as TableWithConfig } from "./table-with-config.vue";
 import { default as NoteList } from "./note-list.vue";
 import { default as ModalDeleteConfirm } from "./modal-delete-confirm.vue";
 import { default as ModalAddSNMPRules } from "./modal-add-snmp-device-rules.vue";
+import { default as sortingFunctions } from "../utilities/sorting-utils.js";
+import formatterUtils from "../utilities/formatter-utils";
 import NtopUtils from "../utilities/ntop-utils";
 
 const props = defineProps({
-  page_csrf: String,
-  ifid: String,
-  is_check_enabled: Boolean
-})
+  context: Object,
+});
+
+const context = ref({
+  csrf: props.context.csrf,
+  ifid: props.context.ifid,
+  is_check_enabled: props.context.is_check_enabled
+});
 
 const table_host_rules = ref(null)
 const modal_delete_confirm = ref(null)
@@ -76,13 +65,13 @@ const _i18n = (t) => i18n(t);
 const row_to_delete = ref({})
 const row_to_edit = ref({})
 
-
 const snmp_metric_url = `${http_prefix}/lua/pro/rest/v2/get/snmp/metric/rule_metrics.lua`
 const snmp_devices_url = `${http_prefix}/lua/pro/enterprise/get_snmp_devices_list.lua`
 
-const data_url = `${http_prefix}/lua/pro/rest/v2/get/snmp/device/rules.lua`
 const add_rule_url = `${http_prefix}/lua/pro/rest/v2/add/snmp/device/rule.lua`
 const remove_rule_url = `${http_prefix}/lua/pro/rest/v2/delete/snmp/device/rule.lua`
+const table_snmp_rules = ref();
+const table_id = ref("snmp_device_rules");
 
 const note_list = [
   _i18n('if_stats_config.generic_notes_1'),
@@ -91,19 +80,15 @@ const note_list = [
 ]
 
 const rest_params = {
-  ifid: props.ifid,
-  csrf: props.page_csrf,
+  ifid: context.value.ifid,
+  csrf: context.value.csrf,
 }
 
-let host_rules_table_config = {}
 let title_delete = _i18n('if_stats_config.delete_host_rules_title')
-let title_edit = _i18n('if_stats_config.edit_local_network_rules')
 let body_delete = _i18n('if_stats_config.delete_host_rules_description')
 const active_alert_text = _i18n('snmp.snmp_devices_rules_active_alert_warning')
 let snmp_metric_list = []
-let snmp_interfaces_list = []
 let snmp_devices_list = []
-let interface_metric_list = []
 
 
 const frequency_list = [
@@ -112,219 +97,205 @@ const frequency_list = [
   { title: i18n('show_alerts.daily'), label: i18n('show_alerts.daily'), id: 'day' }
 ]
 
-const show_delete_dialog = function(row) {
+/* ******************************************************************** */
+
+const click_button_delete = function (row) {
   row_to_delete.value = row;
   modal_delete_confirm.value.show();
 }
 
-const load_selected_field = function(row) {
+/* ******************************************************************** */
+
+const click_button_edit = function (row) {
   row_to_edit.value = row;
-  
   row_to_delete.value = row;
-
   modal_add_snmp_device_rule.value.show(row);
-
 }
 
-async function edit(params) {
-  await delete_row();
+/* ******************************************************************** */
 
-  await add_host_rule(params);
-}
-
-const init_edit = function() {
-  const row = row_to_edit.value;
-  row_to_edit.value = null;
-  return row;
-}
+const get_snmp_metric_list = async function () {
+  const url = NtopUtils.buildURL(snmp_metric_url, rest_params)
 
-const destroy_table = function() {
-  table_host_rules.value.destroy_table();
+  await $.get(url, function (rsp, status) {
+    snmp_metric_list = rsp.rsp;
+  });
 }
 
-const reload_table = function() {
-  table_host_rules.value.reload();
-}
+/* ******************************************************************** */
 
-const delete_row = async function() {
-  const row = row_to_delete.value;
-  const url = NtopUtils.buildURL(remove_rule_url, {
-    ...rest_params,
-    ...{
-      rule_id: row.id,
-      rule_type: row.rule_type
-    }
-  })
-  
-  await $.post(url, function(rsp, status){
-    reload_table();
+const get_snmp_devices_list = async function () {
+  rest_params.verbose = true
+  const url = NtopUtils.buildURL(snmp_devices_url, rest_params)
+  await $.get(url, function (rsp, status) {
+    snmp_devices_list = rsp.rsp;
   });
+  snmp_devices_list.push({ column_key: "*", column_name: "all" })
 }
 
-const add_host_rule = async function(params) {
-  const url = NtopUtils.buildURL(add_rule_url, {
-    ...rest_params,
-    ...params
-  })
-  
-  await $.post(url, function(rsp, status){
-    reload_table();
-  });
-}
+/* ******************************************************************** */
 
+const format_threshold = function (data, row) {
+  let threshold;
+  let formatted_data;
 
-const add_action_column = function (rowData) {
-  let delete_handler = {
-	  handlerId: "delete_host",	  
-	  onClick: () => {
-      show_delete_dialog(rowData);
-	  },
-	};
+  (data.sign && data.sign == '-1') ?
+    threshold = "<" : threshold = ">"
 
-  let edit_handler = {
-    handlerId: "edit_rule",
-    onClick: () => {
-      load_selected_field(rowData);
-    },
+  if (row.metric.type == 'volume') {
+    formatted_data = formatterUtils.getFormatter("bytes")(data.value);
+  } else if (row.metric.type == 'throughput') {
+    formatted_data = formatterUtils.getFormatter("bps_no_scale")(data.value);
+  } else {
+    formatted_data = formatterUtils.getFormatter("percentage")(data.value);
   }
-  
-  return DataTableUtils.createActionButtons([
-    { class: `pointer`, handler: edit_handler, icon: 'fa-edit', title: i18n('edit') },
-	  { class: `pointer`, handler: delete_handler, icon: 'fa-trash', title: i18n('delete') },
-	]);
-}
 
-const format_metric = function(data, rowData) {
-  let metric_label = data  
-  if (rowData.metric_label && rowData.metric_label != data && rowData.metric_label != "") {
-    metric_label = rowData.metric_label;
-  } 
-  
-  
-  return metric_label
+  return `${threshold} ${formatted_data}`
 }
 
-const format_frequency = function(data) {
-  let frequency_title = ''
-  frequency_list.forEach((frequency) => {
-    if(data == frequency.id)
-      frequency_title = frequency.title;
-  })
+/* ******************************************************************** */
 
-  return frequency_title
-}
+/* Function to map columns data */
+const map_table_def_columns = (columns) => {
+  let map_columns = {
+    "device": (data, row) => {
+      return data.label;
+    },
+    "interface": (data, row) => {
+      return data.label;
+    },
+    "metric": (data, row) => {
+      return data.label;
+    },
+    "frequency": (data, row) => {
+      return frequency_list.find((el) => el.id == data).label;
+    },
+    "threshold": (data, row) => {
+      return format_threshold(data, row);
+    },
+  };
 
-const format_threshold = function(data, rowData) {
-  let formatted_data = parseInt(data);
-  let threshold_sign = "> ";
+  columns.forEach((c) => {
+    c.render_func = map_columns[c.data_field];
+    if (c.id == "actions") {
+      const visible_dict = {
+        edit_rule: true,
+        delete_host: true,
+      };
+      c.button_def_array.forEach((b) => {
+        if (!visible_dict[b.id]) {
+          b.class.push("disabled");
+        }
+      });
+    }
+  });
 
-  if((rowData.threshold_sign) && (rowData.threshold_sign == '-1'))
-    threshold_sign = "< "
+  return columns;
+};
 
-  if((rowData.metric_type) && (rowData.metric_type == 'throughput')) {
-    formatted_data = threshold_sign + NtopUtils.bitsToSize_no_comma(data * 8)
-  } else if((rowData.metric_type) && (rowData.metric_type == 'volume')) {
-    formatted_data = threshold_sign + NtopUtils.bytesToSize(data);
-  } else if((rowData.metric_type) && (rowData.metric_type == 'percentage_change' || rowData.metric_type == 'percentage_absolute' )){
-    if (data < 0) {
-      data = data * (-1);
-    }
-    formatted_data = threshold_sign + NtopUtils.fpercent(data);
-  } else {
-    formatted_data = threshold_sign + data;
+/* ************************************** */
+
+function on_table_custom_event(event) {
+  let events_managed = {
+    "click_button_edit": click_button_edit,
+    "click_button_delete": click_button_delete,
+  };
+  if (events_managed[event.event_id] == null) {
+    return;
   }
+  events_managed[event.event_id](event);
+}
 
-  return formatted_data
+/* ******************************************** */
+
+/* Function used to sort the columns of the table */
+function columns_sorting(col, r0, r1) {
+  if (col != null) {
+    let r0_col = column_data(col, r0);
+    let r1_col = column_data(col, r1);
+
+    if (col.id == "device") {
+      return sortingFunctions.sortByName(r0_col.label, r1_col.label, col.sort);
+    } else if (col.id == "interface") {
+      return sortingFunctions.sortByName(r0_col.label, r1_col.label, col.sort);
+    } else if (col.id == "metric") {
+      return sortingFunctions.sortByName(r0_col.label, r1_col.label, col.sort);
+    } else if (col.id == "frequency") {
+      return sortingFunctions.sortByName(r0_col, r1_col, col.sort);
+    } else if (col.id == "threshold") {
+      return sortingFunctions.sortByNumberWithNormalizationValue(r0_col.value, r1_col.value, col.sort);
+    }
+  }
 }
 
+/* ******************************************************************** */
 
-const format_target = function(data, rowData) {
-  return rowData.device_label;
+const open_add_host_rule_modal = function() {
+  modal_add_snmp_device_rule.value.show();
 }
 
-const format_interface = function(data, rowData) {
-  return rowData.device_port_label;
-}
+/* ******************************************************************** */
 
-const get_snmp_metric_list = async function() {
-  const url = NtopUtils.buildURL(snmp_metric_url, rest_params)
-  
-  await $.get(url, function(rsp, status){
-    snmp_metric_list = rsp.rsp;
-  });
+const reload_table = function () {
+  table_snmp_rules.value.refresh_table();
 }
 
+/* ******************************************************************** */
 
-const get_snmp_devices_list = async function() {
-  rest_params.verbose = true
-  const url = NtopUtils.buildURL(snmp_devices_url, rest_params)
-  await $.get(url, function(rsp, status){
-    snmp_devices_list = rsp.rsp;
+const delete_row = async function () {
+  const row = row_to_delete.value.row;
+  const url = NtopUtils.buildURL(remove_rule_url, {
+    ...rest_params,
+    ...{
+      rule_id: row.id,
+    }
+  })
+
+  await $.post(url, function (rsp, status) {
+    reload_table();
   });
-  snmp_devices_list.push({column_key: "*",column_name: "all" })
 }
 
-const start_datatable = function() {
-  const datatableButton = [];
+/* ******************************************************************** */
 
-  /* Manage the buttons close to the search box */
-  datatableButton.push({
-    text: '<i class="fas fa-sync"></i>',
-    className: 'btn-link',
-    action: function () {
-      reload_table();
-    }
-  }, {
-    text: '<i class="fas fa-plus"></i>',
-    className: 'btn-link',
-    action: function () {
-      modal_add_snmp_device_rule.value.show();
-    }
-  });
-  
-  const columns = [
-    { columnName: _i18n("actions"), targets: 0, width: '5%', name: 'actions', className: 'text-center', orderable: false, responsivePriority: 0, render: function (_, type, rowData) { return add_action_column(rowData) } },
-
-    { columnName: _i18n("id"), visible: false, targets:1, name: 'id', data: 'id', className: 'text-nowrap', responsivePriority: 1 },
-    { columnName: _i18n("if_stats_config.snmp_device"), targets: 2, width: '20', name: 'device', data: 'device', className: 'text-nowrap', responsivePriority: 1, render: function(data, _, rowData) {return format_target(data, rowData) } },
-    { columnName: _i18n("if_stats_config.snmp_interface"), targets: 3, width: '20', name: 'interface', data: 'interface', className: 'text-center', responsivePriority: 1, render: function(data, _, rowData) {return format_interface(data, rowData) } },
-    { columnName: _i18n("if_stats_config.metric"), targets: 4, width: '10', name: 'metric', data: 'metric', className: 'text-center', responsivePriority: 1, render: function(data, _, rowData) { return format_metric(data, rowData) } },
-    { columnName: _i18n("if_stats_config.frequency"), targets: 5, width: '10', name: 'frequency', data: 'frequency', className: 'text-center', responsivePriority: 1, render: function(data) { return format_frequency(data) } },
-    { columnName: _i18n("if_stats_config.threshold"), targets: 6, width: '10', name: 'threshold', data: 'threshold', className: 'text-end', responsivePriority: 1, render: function(data, _, rowData) { return format_threshold(data, rowData) } },
-    { columnName: _i18n("metric_type"), visible: false, targets: 7, name: 'metric_type', data: 'metric_type', className: 'text-nowrap', responsivePriority: 1 },
-  ];
-
-  const hostRulesTableConfig = {
-    table_buttons: datatableButton,
-    data_url: NtopUtils.buildURL(data_url, rest_params),
-    enable_search: true,
-    columns_config: columns,
-    table_config: { 
-      scrollX: false,
-      serverSide: false, 
-      order: [[ 1 /* target */, 'desc' ]],
-      columnDefs: columns
-    }
-  };
-  host_rules_table_config = hostRulesTableConfig;
+async function edit(params) {
+  await delete_row();
+  await add_host_rule(params);
 }
 
-onBeforeMount(async () => {
+/* ******************************************************************** */
 
-  console.log(props.is_check_enabled)
-  start_datatable();
-  await get_snmp_metric_list();
-  await get_snmp_devices_list();
-  modal_add_snmp_device_rule.value.metricsLoaded(snmp_devices_list, snmp_metric_list, props.page_csrf);
-})
+const init_edit = function () {
+  const row = row_to_edit.value;
+  row_to_edit.value = null;
+  return row;
+}
 
-onUnmounted(() => {
-  destroy_table();
-})
-</script>
+/* ******************************************************************** */
 
+const add_host_rule = async function (params) {
+  const url = NtopUtils.buildURL(add_rule_url, {
+    ...rest_params,
+    ...params
+  })
 
+  await $.post(url, function (rsp, status) {
+    reload_table();
+  });
+}
 
+/* ******************************************** */
 
+const get_extra_params_obj = () => {
+  let extra_params = ntopng_url_manager.get_url_object();
+  return extra_params;
+};
 
+/* ******************************************** */
 
+onBeforeMount(async () => {
+  await get_snmp_metric_list();
+  await get_snmp_devices_list();
+  modal_add_snmp_device_rule.value.metricsLoaded(snmp_devices_list, snmp_metric_list, context.csrf);
+})
+</script>
diff --git a/http_src/vue/page-vulnerability-scan.vue b/http_src/vue/page-vulnerability-scan.vue
index 811f9c919701..9876f7fcf135 100644
--- a/http_src/vue/page-vulnerability-scan.vue
+++ b/http_src/vue/page-vulnerability-scan.vue
@@ -6,110 +6,62 @@
   <div class="row">
     <div class="col-md-12 col-lg-12">
       <div v-if="clickhouse_disabled" class="alert alert-info alert-dismissable">
-            
-            <span> {{ enable_clickhouse_text }}</span>
-          </div>
+
+        <span> {{ enable_clickhouse_text }}</span>
+      </div>
       <div class="card card-shadow">
         <div class="card-body">
           <div v-if="autorefresh" class="alert alert-info alert-dismissable">
-            <span
-              class="spinner-border spinner-border-sm text-info me-1"
-            ></span>
+            <span class="spinner-border spinner-border-sm text-info me-1"></span>
             <span> {{ in_progress_scan_text }}</span>
           </div>
-          <div
-            v-if="insert_with_success"
-            class="alert alert-success alert-dismissable"
-          >
+          <div v-if="insert_with_success" class="alert alert-success alert-dismissable">
             <span class="text-success me-1"></span>
             <span> {{ insert_text }}</span>
           </div>
-          <div
-            v-if="already_inserted"
-            class="alert alert-danger alert-dismissable"
-          >
+          <div v-if="already_inserted" class="alert alert-danger alert-dismissable">
             <span class="text-danger me-1"></span>
             <span> {{ already_insert_text }}</span>
           </div>
 
-          <div
-            v-if="not_found_hosts"
-            class="alert alert-warning alert-dismissable"
-          >
+          <div v-if="not_found_hosts" class="alert alert-warning alert-dismissable">
             <span class="text-warning me-1"></span>
             <span> {{ not_found_hosts_text }}</span>
           </div>
 
           <div id="hosts_to_scan">
-            <ModalDeleteScanConfirm
-              ref="modal_delete_confirm"
-              :title="title_delete"
-              :body="body_delete"
-              @delete="delete_row"
-              @delete_all="delete_all_rows"
-              @scan_row="scan_row"
-              @scan_all_rows="scan_all_entries"
-            >
+            <ModalDeleteScanConfirm ref="modal_delete_confirm" :title="title_delete" :body="body_delete"
+              @delete="delete_row" @delete_all="delete_all_rows" @scan_row="scan_row" @scan_all_rows="scan_all_entries">
             </ModalDeleteScanConfirm>
-            <ModalUpdatePeriodicityScan
-              ref="modal_update_perioditicy_scan"
-              :title="title_update_periodicity_scan"
-              @update="update_all_scan_frequencies"
-            >
+            <ModalUpdatePeriodicityScan ref="modal_update_perioditicy_scan" :title="title_update_periodicity_scan"
+              @update="update_all_scan_frequencies">
             </ModalUpdatePeriodicityScan>
-            <TableWithConfig
-              ref="table_hosts_to_scan"
-              :table_id="table_id"
-              :csrf="context.csrf"
-              :f_map_columns="map_table_def_columns"
-              :get_extra_params_obj="get_extra_params_obj"
-              :f_sort_rows="columns_sorting"
-              @custom_event="on_table_custom_event"
-              @rows_loaded="on_table_loaded"
-            >
+            <TableWithConfig ref="table_hosts_to_scan" :table_id="table_id" :csrf="context.csrf"
+              :f_map_columns="map_table_def_columns" :get_extra_params_obj="get_extra_params_obj"
+              :f_sort_rows="columns_sorting" @custom_event="on_table_custom_event" @rows_loaded="on_table_loaded">
               <template v-slot:custom_buttons>
-                <button
-                  class="btn btn-link"
-                  type="button"
-                  ref="add_host"
-                  @click="add_host"
-                >
+                <button class="btn btn-link" type="button" ref="add_host" @click="add_host">
                   <i class="fas fa-plus" data-bs-toggle="tooltip" data-bs-placement="top"
-                  :title="_i18n('add_vs_host')"></i>
+                    :title="_i18n('add_vs_host')"></i>
                 </button>
               </template>
             </TableWithConfig>
           </div>
         </div>
         <div class="card-footer mt-3">
-          <button
-            type="button"
-            ref="delete_all"
-            @click="delete_all_entries"
-            class="btn btn-danger me-1"
-            :class="{ disabled: total_rows == 0 }"
-          >
+          <button type="button" ref="delete_all" @click="delete_all_entries" class="btn btn-danger me-1"
+            :class="{ disabled: total_rows == 0 }">
             <i class="fas fa-trash"></i>
             {{ _i18n("delete_all_entries") }}
           </button>
-          <button
-            type="button"
-            ref="scan_all"
-            @click="confirm_scan_all_entries"
-            class="btn btn-primary me-1"
-            :class="{ disabled: total_rows == 0 }"
-          >
+          <button type="button" ref="scan_all" @click="confirm_scan_all_entries" class="btn btn-primary me-1"
+            :class="{ disabled: total_rows == 0 }">
             <i class="fas fa-clock-rotate-left"></i>
             {{ _i18n("hosts_stats.page_scan_hosts.schedule_all_scan") }}
           </button>
           <template v-if="props.context.is_enterprise_l">
-            <button
-              type="button"
-              ref="update_all"
-              @click="update_all_periodicity"
-              class="btn btn-secondary me-1"
-              :class="{ disabled: total_rows == 0 }"
-            >
+            <button type="button" ref="update_all" @click="update_all_periodicity" class="btn btn-secondary me-1"
+              :class="{ disabled: total_rows == 0 }">
               {{
                 _i18n("hosts_stats.page_scan_hosts.update_periodicity_title")
               }}
@@ -123,18 +75,12 @@
       </div>
     </div>
   </div>
-  <ModalAddHost
-    ref="modal_add"
-    :context="context"
-    @add="add_host_rest"
-    @edit="edit"
-    @closeModal="update_modal_status(false)"
-    @openModal="update_modal_status(true)"
-    @hidden="update_modal_status(false)"
-  >
+  <ModalAddHost ref="modal_add" :context="context" @add="add_host_rest" @edit="edit"
+    @closeModal="update_modal_status(false)" @openModal="update_modal_status(true)"
+    @hidden="update_modal_status(false)">
   </ModalAddHost>
 </template>
-  
+
 <script setup>
 /* Imports */
 import { ref, onBeforeMount, onMounted } from "vue";
@@ -305,7 +251,7 @@ function column_data(col, row) {
         : row["last_scan"]["duration_epoch"];
   } else if (col.id == "last_scan") {
     data =
-      row["last_scan"] === undefined 
+      row["last_scan"] === undefined
         ? 0
         : row["last_scan"]["epoch"];
   } else if (col.id == "is_ok_last_scan") {
@@ -318,7 +264,7 @@ function column_data(col, row) {
     // status must not success and not failed
     if (row["is_ok_last_scan"] != 1 && row["is_ok_last_scan"] != 5) {
       data = 0;
-    } 
+    }
   return data;
 }
 
@@ -502,13 +448,13 @@ const add_host_rest = async function (params) {
   if (result.rsp === 1) {
     params.vs_cidr != null
       ? (insert_text.value = i18n("scan_host_updated").replace(
-          "%{host}",
-          `${params.host}/${params.vs_cidr}`
-        ))
+        "%{host}",
+        `${params.host}/${params.vs_cidr}`
+      ))
       : (insert_text.value = i18n("scan_host_updated").replace(
-          "%{host}",
-          `${params.host}`
-        ));
+        "%{host}",
+        `${params.host}`
+      ));
 
     insert_with_success.value = true;
     already_inserted.value = false;
@@ -518,13 +464,13 @@ const add_host_rest = async function (params) {
   } else if (result.rsp === 2) {
     params.vs_cidr != null
       ? (already_insert_text.value = i18n("scan_host_already_inserted").replace(
-          "%{host}",
-          `${params.host}/${params.vs_cidr}`
-        ))
+        "%{host}",
+        `${params.host}/${params.vs_cidr}`
+      ))
       : (already_insert_text.value = i18n("scan_host_already_inserted").replace(
-          "%{host}",
-          `${params.host}`
-        ));
+        "%{host}",
+        `${params.host}`
+      ));
 
     let scan_type_label = "";
 
@@ -545,14 +491,14 @@ const add_host_rest = async function (params) {
   } else if (result.rsp === 3) {
     params.vs_cidr != null
       ? (not_found_hosts_text.value = i18n("scan_net_not_found_hosts").replace(
-          "%{host}",
-          `${params.host}/${params.vs_cidr}`
-        ))
+        "%{host}",
+        `${params.host}/${params.vs_cidr}`
+      ))
       : (not_found_hosts_text.value = i18n("scan_net_not_found_hosts").replace(
-          "%{host}",
-          `${params.host}`
-        ));
-    
+        "%{host}",
+        `${params.host}`
+      ));
+
     already_inserted.value = false;
     insert_with_success.value = false;
     not_found_hosts.value = true;
@@ -767,5 +713,4 @@ function update_modal_status(value) {
 }
 
 /* ******************************************************************** */
-</script>
-  
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/httpdocs/dist b/httpdocs/dist
index 01734950a592..36b50884eb12 160000
--- a/httpdocs/dist
+++ b/httpdocs/dist
@@ -1 +1 @@
-Subproject commit 01734950a592c10baa8966c2168dbf7cd5de4a08
+Subproject commit 36b50884eb128cabecc273e990eefa5187dced2f
diff --git a/httpdocs/tables_config/snmp_device_rules.json b/httpdocs/tables_config/snmp_device_rules.json
new file mode 100644
index 000000000000..de9e507b0f6c
--- /dev/null
+++ b/httpdocs/tables_config/snmp_device_rules.json
@@ -0,0 +1,85 @@
+{
+	"id": "snmp_device_rules",
+	"data_url": "lua/pro/rest/v2/get/snmp/device/rules.lua",
+	"use_current_page": false,
+	"enable_search": false,
+	"paging": false,
+	"display_empty_rows": true,
+	"default_sort": {
+		"column_id": "id",
+		"sort": 0
+	},
+	"columns": [
+		{
+			"id": "actions",
+			"title_i18n": "actions",
+			"sortable": false,
+			"sticky": true,
+			"class": [
+				"text-nowrap",
+				"text-center"
+			],
+			"render_v_node_type": "button_list",
+			"button_def_array": [
+				{
+					"id": "edit_rule",
+					"icon": "fas fa-edit",
+					"title_i18n": "edit",
+					"class": [
+						"link-button"
+					],
+					"event_id": "click_button_edit"
+				},
+				{
+					"id": "delete_host",
+					"icon": "fas fa-trash",
+					"title_i18n": "delete",
+					"class": [
+						"link-button"
+					],
+					"event_id": "click_button_delete"
+				}
+			]
+		},
+		{
+			"title_i18n": "if_stats_config.snmp_device",
+			"data_field": "device",
+			"sortable": true,
+			"class": [
+				"text-left"
+			]
+		},
+		{
+			"title_i18n": "if_stats_config.snmp_interface",
+			"data_field": "interface",
+			"sortable": true,
+			"class": [
+				"text-center"
+			]
+		},
+		{
+			"title_i18n": "if_stats_config.metric",
+			"data_field": "metric",
+			"sortable": true,
+			"class": [
+				"text-center"
+			]
+		},
+		{
+			"title_i18n": "if_stats_config.frequency",
+			"data_field": "frequency",
+			"sortable": true,
+			"class": [
+				"text-center"
+			]
+		},
+		{
+			"title_i18n": "if_stats_config.threshold",
+			"data_field": "threshold",
+			"sortable": true,
+			"class": [
+				"text-center"
+			]
+		}
+	]
+}
\ No newline at end of file