Implements flow tracer in Openstack Networking UI

Change-Id: I6747de157e63b4d6ffa67274b623b29db311d2e3
diff --git a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovOverlay.js b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovOverlay.js
index 39517b6..c9d6262 100644
--- a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovOverlay.js
+++ b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovOverlay.js
@@ -22,10 +22,12 @@
     var $log, tov, sts, flash, ds, wss;
     var traceSrc = null;
     var traceDst = null;
+    var srcDeviceId = null;
+    var dstDeviceId = null;
 
     var traceInfoDialogId = 'traceInfoDialogId',
         traceInfoDialogOpt = {
-            width: 200,
+            width: 300,
             edge: 'left',
             margin: 20,
             hideMargin: -20
@@ -64,11 +66,13 @@
                 cb: function (data) {
 
                     if (traceSrc == null && data.navPath == 'host') {
-                        traceSrc = data.title;
+                        traceSrc = data.propValues.ip;
+                        srcDeviceId = data.propValues.DeviceId
 
                         flash.flash('Src ' + traceSrc + ' selected. Please select the dst');
                     } else if (traceDst == null && data.title != traceSrc && data.navPath == 'host') {
-                        traceDst = data.title;
+                        traceDst = data.propValues.ip;
+                        dstDeviceId = data.propValues.DeviceId;
                         openTraceInfoDialog();
                         flash.flash('Dst ' + traceDst + ' selected. Press Request button');
                     }
@@ -95,6 +99,7 @@
                     if (traceSrc != null && data.title == traceSrc && data.navPath == 'host') {
                         //Set traceSrc to traceDst in case trace to gateway
                         traceDst = traceSrc;
+                        dstDeviceId = 'toGateway';
                         openTraceInfoDialog();
                         flash.flash('Trace to Gateway');
                     }
@@ -107,6 +112,7 @@
                     if (traceSrc != null && data.title == traceSrc && data.navPath == 'host') {
                         //Set traceDst to 8.8.8.8 to check external connection
                         traceDst = '8.8.8.8';
+                        dstDeviceId = 'toExternal';
                         openTraceInfoDialog();
                         flash.flash('Trace to External')
                     }
@@ -184,6 +190,16 @@
             tBodySelection.append('td').text(dst).attr("class", "value");
         }
 
+        texts.select('table').select('tbody').append('tr');
+        tBodySelection = texts.select('table').select('tbody').select('tr:nth-child(3)');
+        tBodySelection.append('td').text('SrcDeviceId').attr("class", "label");
+        tBodySelection.append('td').text(srcDeviceId).attr("class", "value");
+
+        texts.select('table').select('tbody').append('tr');
+        tBodySelection = texts.select('table').select('tbody').select('tr:nth-child(4)');
+        tBodySelection.append('td').text('DstDeviceId').attr("class", "label");
+        tBodySelection.append('td').text(dstDeviceId).attr("class", "value");
+
         texts.append('hr');
 
         return texts;
@@ -191,7 +207,7 @@
     }
 
     function flowTraceResultBtn() {
-        sts.sendFlowTraceRequest(traceSrc, traceDst);
+        sts.sendFlowTraceRequest(traceSrc, traceDst, srcDeviceId, dstDeviceId);
         ds.closeDialog();
         traceSrc = null;
         traceDst = null;
diff --git a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovService.js b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovService.js
index a9bbf69..719703a 100644
--- a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovService.js
+++ b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovService.js
@@ -56,10 +56,12 @@
         wss.sendEvent(displayStop);
     }
 
-    function sendFlowTraceRequest(src, dst) {
+    function sendFlowTraceRequest(src, dst, srcDeviceId, dstDeviceId) {
         wss.sendEvent(flowTraceRequest, {
             srcIp: src,
-            dstIp: dst
+            dstIp: dst,
+            srcDeviceId: srcDeviceId,
+            dstDeviceId: dstDeviceId,
         });
         flash.flash('sendFlowTraceRequest called');
     }
@@ -106,7 +108,7 @@
                 margin: 20,
                 hideMargin: -20
             }
-        var traceSuccess = data.trace_success == true ? "SUCCESS" : "FALSE";
+        var traceSuccess = data.traceSuccess == true ? "SUCCESS" : "FALSE";
         ds.openDialog(flowTraceResultDialogId, flowTraceResultDialogOpt)
                     .setTitle('Flow Trace Result: ' + traceSuccess)
                     .addContent(createTraceResultInfoDiv(data))
@@ -136,15 +138,15 @@
         var tbodySelection = texts.select('.table-body').select('table').select('tbody');
         var rowNum = 1;
 
-        data.trace_result.forEach(function(result) {
-            result.flow_rules.forEach(function(flowRule) {
+        data.traceResult.forEach(function(result) {
+            result.flowRules.forEach(function(flowRule) {
                 tbodySelection.append('tr');
                 var tbodyTrSelection = tbodySelection.select('tr:nth-child(' + rowNum + ')');
-                tbodyTrSelection.append('td').text(result.trace_node_name);
+                tbodyTrSelection.append('td').text(result.traceNodeName);
                 tbodyTrSelection.append('td').text(flowRule.table);
                 tbodyTrSelection.append('td').text(flowRule.priority);
-                tbodyTrSelection.append('td').text(jsonToSring(flowRule.selector));
-                tbodyTrSelection.append('td').text(jsonToSring(flowRule.actions));
+                tbodyTrSelection.append('td').text(flowRule.selector);
+                tbodyTrSelection.append('td').text(flowRule.actions);
                 if (jsonToSring(flowRule.actions).includes("drop")) {
                     tbodyTrSelection.attr("class", "drop");
                 }