Network toplogy GUI for VM-to-VM flow statistics configuration.
Change-Id: I86543c7bb30d79ec8b5d57f822756b5e8a8e5e40
diff --git a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopov.css b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopov.css
index 11523e1..83f0ba3 100644
--- a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopov.css
+++ b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopov.css
@@ -18,7 +18,7 @@
#traceInfoDialogId h2 {
text-align: center;
- width: 200px;
+ width: 300px;
margin: 0;
font-weight: lighter;
word-wrap: break-word;
@@ -47,7 +47,7 @@
cursor: pointer;
color: #3c3a3a;
- width: 100px;
+ width: 170px;
}
div.traceInfo td.label {
@@ -123,4 +123,5 @@
div.flowTraceResult .table-body tr.drop {
background-color: #e28d8d;
-}
\ No newline at end of file
+}
+
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 c9d6262..e588cb2 100644
--- a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovOverlay.js
+++ b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovOverlay.js
@@ -24,10 +24,12 @@
var traceDst = null;
var srcDeviceId = null;
var dstDeviceId = null;
+ var flowStatsSrcIp = null;
+ var flowStatsDstIp = null;
var traceInfoDialogId = 'traceInfoDialogId',
traceInfoDialogOpt = {
- width: 300,
+ width: 350,
edge: 'left',
margin: 20,
hideMargin: -20
@@ -117,6 +119,22 @@
flash.flash('Trace to External')
}
}
+ },
+ FlowStats: {
+ gid: 'meterTable',
+ tt: 'Flow Statistics',
+ cb: function (data) {
+ if (flowStatsSrcIp == null && data.navPath == 'host') {
+ flowStatsSrcIp = data.propValues.ip;
+ flash.flash('Source ' + flowStatsSrcIp + ' is selected. Choose a destination IP address');
+ $log.info('Source VM is selected for Flow Statistics: ', data);
+ } else if (flowStatsDstIp == null && data.title != flowStatsSrcIp && data.navPath == 'host') {
+ flowStatsDstIp = data.propValues.ip;
+ flash.flash('Destination ' + flowStatsDstIp + ' is selected. Press [Request] button !');
+ openFlowStatsInfoDialog();
+ $log.info('Destination VM is selected for Flow Statistics: ', data);
+ }
+ }
}
},
@@ -161,6 +179,60 @@
}
};
+ function openFlowStatsInfoDialog() {
+ ds.openDialog(traceInfoDialogId, traceInfoDialogOpt)
+ .setTitle('VM to VM Flow Statistics Rule Configuration')
+ .addContent(createFlowStatsInfoDiv(flowStatsSrcIp, flowStatsDstIp))
+ .addCancel(dStatsBoxClose, 'Close')
+ .addOk(flowStatsRemoveReqBtn, 'Remove Stats Rule')
+ .addOk(flowStatsAddReqBtn, 'Add Stats Rule')
+ .bindKeys();
+ }
+
+ function createFlowStatsInfoDiv(srcIp, dstIp) {
+ var texts = ds.createDiv('FlowStatsInfo');
+ texts.append('hr');
+ texts.append('table').append('tbody').append('tr');
+
+ var tBodySelection = texts.select('table').select('tbody').select('tr');
+
+ tBodySelection.append('td').text('Source IP: ').attr("class", "label");
+ tBodySelection.append('td').text(srcIp).attr("class", "value");
+
+ texts.select('table').select('tbody').append('tr');
+
+ tBodySelection = texts.select('table').select('tbody').select('tr:nth-child(2)');
+
+ tBodySelection.append('td').text('Destination IP: ').attr("class", "label");
+ tBodySelection.append('td').text(dstIp).attr("class", "value");
+
+ texts.append('hr');
+
+ return texts;
+ }
+
+ function dStatsBoxClose() {
+ $log.info('Dialog Close button clicked (or Esc pressed)');
+ flowStatsSrcIp = null;
+ flowStatsDstIp = null;
+ }
+
+ function flowStatsAddReqBtn() {
+ sts.sendFlowStatsAddRequest(flowStatsSrcIp, flowStatsDstIp);
+ ds.closeDialog();
+ flowStatsSrcIp = null;
+ flowStatsDstIp = null;
+ flash.flash('Send Flow Statistics Addition Request');
+ }
+
+ function flowStatsRemoveReqBtn() {
+ sts.sendFlowStatsRemoveRequest(flowStatsSrcIp, flowStatsDstIp);
+ ds.closeDialog();
+ flowStatsSrcIp = null;
+ flowStatsDstIp = null;
+ flash.flash('Send Flow Statistics Removal Request');
+ }
+
function openTraceInfoDialog() {
ds.openDialog(traceInfoDialogId, traceInfoDialogOpt)
.setTitle('Flow Trace Information')
@@ -203,7 +275,6 @@
texts.append('hr');
return texts;
-
}
function flowTraceResultBtn() {
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 719703a..0212ea2 100644
--- a/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovService.js
+++ b/apps/openstacknetworkingui/src/main/resources/app/view/sonaTopov/sonaTopovService.js
@@ -32,6 +32,8 @@
var displayStart = 'openstackNetworkingUiStart',
displayUpdate = 'openstackNetworkingUiUpdate',
displayStop = 'openstackNetworkingUiStop',
+ flowStatsAddRequest = 'flowStatsAddRequest',
+ flowStatsRemoveRequest = 'flowStatsRemoveRequest',
flowTraceRequest = 'flowTraceRequest';
// internal state
@@ -56,6 +58,24 @@
wss.sendEvent(displayStop);
}
+ function sendFlowStatsAddRequest(src, dst) {
+ wss.sendEvent(flowStatsAddRequest, {
+ srcIp: src,
+ dstIp: dst,
+ });
+ $log.info('FlowStatsAdd request message is sent.');
+ flash.flash('sendFlowStatsAddRequest called');
+ }
+
+ function sendFlowStatsRemoveRequest(src, dst) {
+ wss.sendEvent(flowStatsRemoveRequest, {
+ srcIp: src,
+ dstIp: dst,
+ });
+ $log.info('FlowStatsRemove request message is sent.');
+ flash.flash('sendFlowStatsRemoveRequest called');
+ }
+
function sendFlowTraceRequest(src, dst, srcDeviceId, dstDeviceId) {
wss.sendEvent(flowTraceRequest, {
srcIp: src,
@@ -96,10 +116,56 @@
return false;
}
-
function dOk() {
ds.closeDialog();
}
+
+ function openFlowStatsAddResultDialog(data) {
+ $log.info('Addition Result message: ', data);
+ var flowStatsAddResultDialogId = 'flowStatsAddResultDialogId',
+ flowStatsAddResultDialogOpt = {
+ width: 650,
+ edge: 'left',
+ margin: 20,
+ hideMargin: -20
+ }
+ var statsSuccess = data.statsSuccess == true ? "SUCCESS" : "FALSE";
+ ds.openDialog(flowStatsAddResultDialogId, flowStatsAddResultDialogOpt)
+ .setTitle('Flow Stats Addition Result: ' + statsSuccess)
+ .addContent(createStatsAddResultInfoDiv(data))
+ .addOk(dOk, 'Close')
+ .bindKeys();
+ }
+
+ function createStatsAddResultInfoDiv(data) {
+ var texts = ds.createDiv('flowStatsAddResult');
+ texts.append('p').text('Result of addition: ' + data.statsSuccess);
+ return texts;
+ }
+
+ function openFlowStatsRemoveResultDialog(data) {
+ $log.info('Removal Result message: ', data);
+ var flowStatsRemoveResultDialogId = 'flowStatsRemoveResultDialogId',
+ flowStatsRemoveResultDialogOpt = {
+ width: 650,
+ edge: 'left',
+ margin: 20,
+ hideMargin: -20
+ }
+ var statsSuccess = data.statsSuccess == true ? "SUCCESS" : "FALSE";
+ ds.openDialog(flowStatsRemoveResultDialogId, flowStatsRemoveResultDialogOpt)
+ .setTitle('Flow Stats Removal Result: ' + statsSuccess)
+ .addContent(createStatsRemoveResultInfoDiv(data))
+ .addOk(dOk, 'Close')
+ .bindKeys();
+ }
+
+ function createStatsRemoveResultInfoDiv(data) {
+ var texts = ds.createDiv('flowStatsRemoveResult');
+ texts.append('p').text('Result of removal: ' + data.statsSuccess);
+ return texts;
+ }
+
function openFlowTraceResultDialog(data) {
var flowTraceResultDialogId = 'flowTraceResultDialogId',
flowTraceResultDialogOpt = {
@@ -168,6 +234,21 @@
}
+ function flowStatsAddResult(data) {
+ flash.flash('flowStatsAddResult called');
+ $log.debug(data);
+
+ openFlowStatsAddResultDialog(data)
+ }
+
+ function flowStatsRemoveResult(data) {
+ flash.flash('flowStatsRemoveResult called');
+ $log.debug(data);
+
+ openFlowStatsRemoveResultDialog(data)
+ }
+
+
function flowTraceResult(data) {
flash.flash('flowTraceResult called');
$log.debug(data);
@@ -193,6 +274,10 @@
startDisplay: startDisplay,
updateDisplay: updateDisplay,
stopDisplay: stopDisplay,
+ flowStatsAddResult: flowStatsAddResult,
+ flowStatsRemoveResult: flowStatsRemoveResult,
+ sendFlowStatsAddRequest: sendFlowStatsAddRequest,
+ sendFlowStatsRemoveRequest: sendFlowStatsRemoveRequest,
flowTraceResult: flowTraceResult,
sendFlowTraceRequest: sendFlowTraceRequest,
};