Fixes service map not accessible (#7274)

assets/styles/third-party-styles.scss

@@ -1,8 +1,5 @@
 
-@import 'vendors/fontawesome/scss/fontawesome.scss';
-@import 'vendors/fontawesome/scss/solid.scss';
-@import 'vendors/fontawesome/scss/brands.scss';
-@import 'vendors/fontawesome/scss/regular.scss';
+@import 'vendors/fontawesome/css/all.min.css';
 @import 'vendors/flatpickr/flatpickr.min.css';
 @import 'vendors/d3-sunburst/sequence_sunburst.css';
 @import 'vendors/tagify/tagify.css';

http_src/utilities/map/ntopng_vis_network_utils.js

@@ -51,8 +51,8 @@ const defaultOptions = {
       printer: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf02f",
+          face: 'FontAwesome',
+          code: '\uf02f',
           size: 50,
           weight: 700,
         },
@@ -61,8 +61,8 @@ const defaultOptions = {
       video: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf03d",
+          face: 'FontAwesome',
+          code: '\uf03d',
           size: 50,
           weight: 700,
         },
@@ -71,8 +71,8 @@ const defaultOptions = {
       workstation: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf109",
+          face: 'FontAwesome',
+          code: '\uf109',
           size: 50,
           weight: 700,
         },
@@ -81,8 +81,8 @@ const defaultOptions = {
       laptop: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf109",
+          face: 'FontAwesome',
+          code: '\uf109',
           size: 50,
           weight: 700,
         },
@@ -91,8 +91,8 @@ const defaultOptions = {
       tablet: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf10a",
+          face: 'FontAwesome',
+          code: '\uf10a',
           size: 50,
           weight: 700,
         },
@@ -101,8 +101,8 @@ const defaultOptions = {
       phone: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf10b",
+          face: 'FontAwesome',
+          code: '\uf10b',
           size: 50,
           weight: 700,
         },
@@ -111,8 +111,8 @@ const defaultOptions = {
       tv: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf26c",
+          face: 'FontAwesome',
+          code: '\uf26c',
           size: 50,
           weight: 700,
         },
@@ -121,8 +121,8 @@ const defaultOptions = {
       networking: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf0b2",
+          face: 'FontAwesome',
+          code: '\uf0b2',
           size: 50,
           weight: 700,
         },
@@ -131,8 +131,8 @@ const defaultOptions = {
       wifi: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf1eb",
+          face: 'FontAwesome',
+          code: '\uf1eb',
           size: 50,
           weight: 700,
         },
@@ -141,8 +141,8 @@ const defaultOptions = {
       nas: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf1c0",
+          face: 'FontAwesome',
+          code: '\uf1c0',
           size: 50,
           weight: 700,
         },
@@ -151,8 +151,8 @@ const defaultOptions = {
       multimedia: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\uf001",
+          face: 'FontAwesome',
+          code: '\uf001',
           size: 50,
           weight: 700,
         },
@@ -161,8 +161,8 @@ const defaultOptions = {
       iot: {
         shape: "icon",
         icon: {
-          face: "'FontAwesome'",
-          code: "\ue012",
+          face: 'FontAwesome',
+          code: '\ue012',
           size: 50,
           weight: 700,
         },

http_src/vue/network-map.vue

@@ -52,6 +52,7 @@ onMounted(async () => {
     const datasets = {nodes: nodes_dataset, edges: edges_dataset};
     empty_network(datasets);
     network = new vis.Network(container, datasets, ntopng_map_manager.get_default_options());
+    debugger;
     save_topology_view();
     set_event_listener();
     ntopng_events_manager.emit_custom_event(ntopng_custom_events.VIS_DATA_LOADED);

http_src/vue/page-asset-table.vue

@@ -82,6 +82,11 @@ export default {
    */
   created() {
     ntopng_url_manager.set_key_to_url('asset_family', this.$props.url_params.asset_family);
+    this.asset_table_tab = ntopng_url_manager.get_url_entry('view') || this.$props.view;
+    this.tab_list.forEach((i) => {
+      if(this.asset_table_tab == i.id)
+        i.active = true;
+    });
     start_datatable(this);
   },
   mounted() {

http_src/vue/page-home-map.vue

@@ -201,9 +201,11 @@ import { ntopng_url_manager } from '../services/context/ntopng_globals_services'
       },
       /* Method used to switch active table tab */
       click_item: function(item) {
-        this.navbar_context.items_table.forEach((i) => i.active = false);
-        item.active = true;
-        ntopng_events_manager.emit_custom_event(change_map_event, item);
+        if(item.id != this.active_tab || item.page != this.page) {
+          this.navbar_context.items_table.forEach((i) => i.active = false);
+          item.active = true;
+          ntopng_events_manager.emit_custom_event(change_map_event, item);
+        }
       },
     },
   }  

http_src/vue/page-service-table.vue

@@ -101,14 +101,14 @@ export default {
    * First method called when the component is created.
    */
   created() {
+    this.service_table_tab = ntopng_url_manager.get_url_entry('view') || this.$props.view;
+    this.tab_list.forEach((i) => {
+      if(this.service_table_tab == i.id)
+        i.active = true;
+    });
     start_datatable(this);
   },
   mounted() {
-    this.service_table_tab = this.$props.url_params.view
-    this.tab_list.forEach((i) => {
-      this.service_table_tab == i.id ? i.active = true : i.active = false
-    });
-
     ntopng_events_manager.on_custom_event("page_service_table", ntopng_custom_events.DATATABLE_LOADED, () => {
       if(ntopng_url_manager.get_url_entry('host'))
         this.hide_dropdowns();

http_src/vue/tab-list.vue

@@ -43,24 +43,21 @@ export default defineComponent({
   },
   /** This method is the first method called after html template creation. */
   mounted() {
-    let tmp
-    this.tab_list.forEach(function(tab) {
+    let tmp = null;
+    this.$props.tab_list.forEach(function(tab) {
       if(tab.active) {
         tmp = tab
       }
     })
+    this.old_tab = tmp || this.$props.tab_list[0];
 
-    if(tmp == undefined)
-      tmp = this.tab_list[0]
-
-    this.old_tab = tmp.id || tmp.name
     ntopng_sync.ready(this.$props["id"]);
   },
   methods: {
     change_tab: function(tab) {
-      if((!tab.id || this.old_tab != tab.id) &&
-         (!tab.name || this.old_tab != tab.name)) {
-        this.old_tab = tab.id || tab.name
+      if((tab.id != null && this.old_tab.id != tab.id) ||
+         (tab.name != null && this.old_tab.name != tab.name)) {
+        this.old_tab = tab
         this.$emit('click_item', tab)
       }
     }