Added new table to host countries page (#8473)

* Fixes parsing error while pasing XML strings with comments

* Ported host countries table to new vue table

* Added country filter when redirected to hosts list page

* Ported network discovery table to TableWithConfig vue component

* FIxed indentation

* Added documentation for VueJS, Lua and cpp used in ntopng

* Fixed error

* Added Netbox pref entry for default site, customizable input box size. To implement cpp side for netbox default site

* Removed tprint

---------

Co-authored-by: DGabri <gabriele.deri@gmail.com>

doc/developers/README.GUI.quickstart.md

@@ -60,11 +60,63 @@ The structure of `page_utils.menu_sections` follows a key-value pair format, whe
 - `tag_utils.lua`  contains a list of available filters that can be used in frontend
 - `flow_alert_store:_get_additional_available_filters()` contains available filters to filter columns inside a table. Entry name is used inside the JSON to configure the desired table in the key `data_field`. 
 - `self:add_filter_condition_list('srv_ip', srv_ip)` -> is used to add a filter on a specific field, so that this filter is available to use frontend and backend side
+- `scripts/lua/modules/http_lint.lua` is used to verify http requests parameters. When a parameter is passed, check that it is linted in this file. To add a new parameter to the checks, add an entry in the lua table as in the following example: `known_parameters` = { ["newParameterName"] = validationFunction }. Choose an appropriate validation function from the ones present in `http_lint.lua`
+- To pass data to a vue page from lua rendering refer to this example:
+  ```javascript
+    local context = {
+      ifid = interface.getId()
+    }
+
+    local json_context = json.encode(context)
+
+    template_utils.render("pages/vue_page.template", {
+      vue_page_name = "VUE-PAGE-MAPPING-INSIDE-ntopng_vue.js",
+      page_context = json_context
+    })
+  ```
+  context is the object that will be passed to the vuejs page when the render function is called. In this example the interface id is passed (ifid = interface.getId()) to access the value of context from a vue component refer to [Vue](#Vue) `context` entry in the paragraph below.
+- The Preference page is made in lua, connected to the lua backend and saves settings in a redis cache that is accessed via the C++ ntopng engine. `scripts/lua/admin/prefs.lua` contains the preference page of ntopng `http://NTOPNG-INSTANCE-IP:PORT/lua/admin/prefs.lua`. To get and set preferencese a getter and setter are defined in lua, these getters and setters communicate with the C++ backend.
+  ```javascript
+  require "prefs_utils"
+  ntop.getPref("ntopng.prefs.PREF-VALUE")
+  ```
+  
+  `PREF-VALUE` can be found or added inside: `ntopng/include/ntop_defines.h`
+
+  ```cpp
+  #define PREF-VALUE 512 // int value
+  #define CONST_DEFAULT_PREF-VALUE 0 // default value for this pref
+  ```
+
+  Inside `ntopng/include/Prefs.h` insert pref values and their relative getters and setters.
+- `Lua <-> C++ connection` inside the files `LuaEngineCONNECTOR.cpp` is the mapping from lua to C++. For example `LuaEngineInterface.cpp` contains all the utility functions relative to the interface of the host running ntopng. Available functions for the interface in lua can be found in this file. To see available functions, refer to the variable present at the end of the file.
+In the example below is exported the function `getId()` which is mapped to the C++ function `ntop_get_interface_id`:
+  
+  ```cpp
+  {"getId", ntop_get_interface_id}
+  ```
+
+  can be accessed from lua with: 
+  ```javascript
+  local ifid = interface.getId()
+  ```
 
 ## Vue 
 
 - `map_table_def_columns = async (columns)` is a function used to manipulate table columns and apply some kind of filters. For example filterize can be applied
 - `filterize` function adds filtering function to table columns if a value is clicked. Double check in front end and back end is executed to check if selected filter is available. 
 - `formatterUtils.getFormatter(DATA-TYPE)(VALUE)` is a utility function that formats values to a specific unit of measure. Formatter utils can be found in `utilities/formatter-utils.js`. To format a value chose DATA-TYPE:String (possible values can be found inside types variable inside formatter utils) and pass a VALUE to format
+- `ntop_utils.http_request(URL)` is used to make authenticated requests to the backend. Request parameters must be validated in the file `scripts/lua/modules/http_lint.lua`, se the Lua paragraph above for more details
+- To utilize the function i18n in vue, initialize it like this inside the `<script setup> section of vue`: `const _i18n = (t) => i18n(t);`. 
+  - _i18n(args) must be used inside the `<template>` section of a vue component or page. This is because i18n() cannot be used in the template as it is not defined for this usage
+  - i18n(args) can be used inside the `<script setup>` section of a vue component or page as it is defined globally
+- `context` to access the values passed as context from the lua rendering page, use this: 
+  ```javascript
+  const props = defineProps({
+    context: Object,
+  });
 
-
+  const ifid = props.context.ifid;
+  ```
+  in this way from vue it is possible to access the ifid passed. To access other parameters do `const newParameter = props.context.newParameter`
+- `ntopng_utility` is a class used please refer to the specific documentation file for the usage of this class: [Read more details](README.GUI.ntopng_utility_js.md)