Merge pull request #486 from kytos-ng/enhance_ui

Set an order for ajax
kytos-ng · Jul 30, 2024 · 35c7c2a · 35c7c2a
2 parents db415dc + 9ab00de
commit 35c7c2a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 34 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -27,6 +27,7 @@ Fixed
 - Only redeploy when handling ``kytos/topology.link_up`` if a dynamic EVC isn't active
 - Fixed possible EVCs duplication when constant delete requests are sent.
 - Improved log when path was not deployed due to TAG availability. Also, in this case, the log was change to error instead of warning.
+- Fixed ``node_name`` not showing in the EVC list on the web interface.
 
 [2023.2.0] - 2024-02-16
 ***********************

diff --git a/ui/k-info-panel/list_connections.kytos b/ui/k-info-panel/list_connections.kytos
@@ -139,7 +139,6 @@ module.exports = {
       /**
        * Call mef_eline REST endpoint to load EVC list.
        */
-      this.flag_loading = true;
       this.component_key = 0;
       var tableRows = [];
       var _this = this;
@@ -181,50 +180,51 @@ module.exports = {
         });
 
         _this.data_rows = tableRows;
-        _this.forceRerender(); 
-        _this.flag_loading = false;
+        _this.forceRerender();
       });
 
       request.fail(function( jqXHR, textStatus ) {
         alert( "Request failed: " + textStatus );
-        _this.flag_loading = false;
       });
 
       return tableRows;
     },
-    loadDpidNames: function() {
+    loadDpidNames: async function() {
       /**
       * Call REST endpoint with switch and interface attributes and metadata.
       */
-      let _dpid_names = {};
-      let _interface_names = {};
       var _this = this;
-
-      var request = $.ajax({
-        url: this.$kytos_server_api + "kytos/topology/v3/switches",
-        type:"GET",
-        data: JSON.stringify(),
-        dataType: "json",
-        contentType: "application/json; charset=utf-8"
-      });
-      request.done(function(data) {
-        let switches = data.switches;
-        $.each(switches, function(i , sw) {
-          if(sw.metadata.node_name) {
-            _dpid_names[sw.dpid] = sw.metadata.node_name;
-          }
-          if(sw.interfaces) {
-            $.each(sw.interfaces, function(j , interface) {
-              _interface_names[interface.id] = interface.name;
+      return new Promise((resolve, reject) => {
+          $.ajax({
+          url: this.$kytos_server_api + "kytos/topology/v3/switches",
+          type:"GET",
+          data: JSON.stringify(),
+          dataType: "json",
+          contentType: "application/json; charset=utf-8",
+          success: function(data){
+            let _dpid_names = {};
+            let _interface_names = {};
+            let switches = data.switches;
+            $.each(switches, function(i , sw) {
+              if(sw.metadata.node_name) {
+                _dpid_names[sw.dpid] = sw.metadata.node_name;
+              }
+              if(sw.interfaces) {
+                $.each(sw.interfaces, function(j , interface) {
+                  _interface_names[interface.id] = interface.name;
+                });
+              }
             });
+            _this.dpid_names = _dpid_names
+            _this.interface_names = _interface_names;
+            resolve()
+          },
+          error: function(jqXHR, textStatus){
+            alert( "Request failed: " + textStatus );
+            reject()
           }
         });
-        _this.dpid_names = _dpid_names;
-        _this.interface_names = _interface_names;
-      });
-      request.fail(function( jqXHR, textStatus ) {
-        alert( "Request failed: " + textStatus );
-      });
+      })
     },
     getEndpointData: function(endpoint) {
       /**
@@ -241,6 +241,14 @@ module.exports = {
         "port": port,
         "interface_name": interface_name
       };
+    },
+    initialize: async function(){
+      this.flag_loading = true;
+        // Load DPID attributes and metadata
+      await this.loadDpidNames();
+        // Load EVCs
+      this.listEVCs();
+      this.flag_loading = false;
     }
   },
   computed: {
@@ -280,10 +288,7 @@ module.exports = {
     },
   },
   created() {
-      // Load DPID attributes and metadata
-    this.loadDpidNames();
-      // Load EVCs
-    this.listEVCs();
+    this.initialize()
     // Make the panel fill the screen except the left menu width
     $('.k-info-panel:has(.mef_container)').addClass('mef-k-info-panel');