<!--
  (C) 2013-22 - ntop.org
-->

<template>
<div class="row">
  <div class="col-md-12 col-lg-12">
    <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>
      <div class="card-body">
        <div class="mb-4">
          <h4>{{ _i18n('if_stats_config.snmp_rules') }}</h4>
        </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>
      </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 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 NtopUtils from "../utilities/ntop-utils";

const props = defineProps({
  page_csrf: String,
  ifid: String,
})

const table_host_rules = ref(null)
const modal_delete_confirm = ref(null)
const modal_add_snmp_device_rule = ref(null)
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 note_list = [
  _i18n('if_stats_config.generic_notes_1'),
  _i18n('if_stats_config.generic_notes_2'),
  _i18n('if_stats_config.generic_notes_3'),
]

const rest_params = {
  ifid: props.ifid,
  csrf: props.page_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')
let snmp_metric_list = []
let snmp_interfaces_list = []
let snmp_devices_list = []
let interface_metric_list = []


const frequency_list = [
  { title: i18n('show_alerts.5_min'), label: i18n('show_alerts.5_min'), id: '5min' },
  { title: i18n('show_alerts.hourly'), label: i18n('show_alerts.hourly'), id: 'hour' },
  { title: i18n('show_alerts.daily'), label: i18n('show_alerts.daily'), id: 'day' }
]

const show_delete_dialog = function(row) {
  row_to_delete.value = row;
  modal_delete_confirm.value.show();
}

const load_selected_field = 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 destroy_table = function() {
  table_host_rules.value.destroy_table();
}

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 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 add_action_column = function (rowData) {
  let delete_handler = {
	  handlerId: "delete_host",	  
	  onClick: () => {
      show_delete_dialog(rowData);
	  },
	};

  let edit_handler = {
    handlerId: "edit_rule",
    onClick: () => {
      load_selected_field(rowData);
    },
  }
  
  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
}

const format_frequency = function(data) {
  let frequency_title = ''
  frequency_list.forEach((frequency) => {
    if(data == frequency.id)
      frequency_title = frequency.title;
  })

  return frequency_title
}

const format_threshold = function(data, rowData) {
  let formatted_data = parseInt(data);
  let threshold_sign = "> ";

  if((rowData.threshold_sign) && (rowData.threshold_sign == '-1'))
    threshold_sign = "< "

  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')){
    if (data < 0) {
      data = data * (-1);
    }
    formatted_data = threshold_sign + NtopUtils.fpercent(data);
  } else {
    formatted_data = threshold_sign + data;
  }

  return formatted_data
}


const format_target = function(data, rowData) {
  return rowData.device_label;
}

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 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.data.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;
}

onBeforeMount(async () => {
  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);
})

onUnmounted(() => {
  destroy_table();
})
</script>






