ONOS-1281, ONOS-1747 - GUI -- Flows table created; version updated.
Change-Id: I06477793d6a1943ed90825f5103c8f6f4e962b70
diff --git a/web/gui/pom.xml b/web/gui/pom.xml
index 426faba..9747b3e 100644
--- a/web/gui/pom.xml
+++ b/web/gui/pom.xml
@@ -92,7 +92,8 @@
org.onlab.packet.*,
org.onlab.rest.*,
org.onosproject.*,
- org.joda.time.*
+ org.joda.time.*,
+ org.apache.commons.*
</Import-Package>
<Web-ContextPath>${web.context}</Web-ContextPath>
</instructions>
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java b/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
new file mode 100644
index 0000000..b14ba98
--- /dev/null
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/FlowViewMessageHandler.java
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.onosproject.ui.impl;
+
+import com.fasterxml.jackson.databind.node.ArrayNode;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.collect.ImmutableSet;
+import org.apache.commons.lang.WordUtils;
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.flow.FlowEntry;
+import org.onosproject.net.flow.FlowRuleService;
+import org.onosproject.net.flow.TrafficSelector;
+import org.onosproject.net.flow.TrafficTreatment;
+import org.onosproject.net.flow.criteria.Criterion;
+import org.onosproject.net.flow.instructions.Instruction;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+import java.util.Set;
+
+
+/**
+ * Message handler for flow view related messages.
+ */
+public class FlowViewMessageHandler extends AbstractTabularViewMessageHandler {
+
+ private static final String NO_DEV = "none";
+
+ /**
+ * Creates a new message handler for the flow messages.
+ */
+ protected FlowViewMessageHandler() {
+ super(ImmutableSet.of("flowDataRequest"));
+ }
+
+ @Override
+ public void process(ObjectNode message) {
+ ObjectNode payload = payload(message);
+ String uri = string(payload, "devId", NO_DEV);
+ String sortCol = string(payload, "sortCol", "id");
+ String sortDir = string(payload, "sortDir", "asc");
+
+ ObjectNode rootNode;
+ if (uri.equals(NO_DEV)) {
+ rootNode = mapper.createObjectNode();
+ rootNode.set("flows", mapper.createArrayNode());
+ } else {
+ DeviceId deviceId = DeviceId.deviceId(uri);
+
+ FlowRuleService service = get(FlowRuleService.class);
+ TableRow[] rows = generateTableRows(service, deviceId);
+ RowComparator rc =
+ new RowComparator(sortCol, RowComparator.direction(sortDir));
+ Arrays.sort(rows, rc);
+ ArrayNode flows = generateArrayNode(rows);
+
+ rootNode = mapper.createObjectNode();
+ rootNode.set("flows", flows);
+ }
+
+ connection().sendMessage("flowDataResponse", 0, rootNode);
+ }
+
+ private TableRow[] generateTableRows(FlowRuleService service,
+ DeviceId deviceId) {
+ List<TableRow> list = new ArrayList<>();
+ for (FlowEntry flow : service.getFlowEntries(deviceId)) {
+ list.add(new FlowTableRow(flow));
+ }
+ return list.toArray(new TableRow[list.size()]);
+ }
+
+ /**
+ * TableRow implementation for {@link org.onosproject.net.flow.FlowRule flows}.
+ */
+ private static class FlowTableRow extends AbstractTableRow {
+
+ private static final String ID = "id";
+ private static final String APP_ID = "appId";
+ private static final String GROUP_ID = "groupId";
+ private static final String TABLE_ID = "tableId";
+ private static final String PRIORITY = "priority";
+ private static final String SELECTOR = "selector";
+ private static final String TREATMENT = "treatment";
+ private static final String TIMEOUT = "timeout";
+ private static final String PERMANENT = "permanent";
+ private static final String STATE = "state";
+
+ private static final String COMMA = ", ";
+
+ private static final String[] COL_IDS = {
+ ID, APP_ID, GROUP_ID, TABLE_ID, PRIORITY, SELECTOR,
+ TREATMENT, TIMEOUT, PERMANENT, STATE
+ };
+
+ public FlowTableRow(FlowEntry f) {
+ add(ID, Long.toString(f.id().value()));
+ add(APP_ID, Short.toString(f.appId()));
+ add(GROUP_ID, Integer.toString(f.groupId().id()));
+ add(TABLE_ID, Integer.toString(f.tableId()));
+ add(PRIORITY, Integer.toString(f.priority()));
+ add(SELECTOR, getSelectorString(f));
+ add(TREATMENT, getTreatmentString(f));
+ add(TIMEOUT, Integer.toString(f.timeout()));
+ add(PERMANENT, Boolean.toString(f.isPermanent()));
+ add(STATE, WordUtils.capitalizeFully(f.state().toString()));
+ }
+
+ private String getSelectorString(FlowEntry f) {
+ String result;
+ TrafficSelector selector = f.selector();
+ Set<Criterion> criteria = selector.criteria();
+
+ if (criteria.isEmpty()) {
+ result = "(No traffic selectors for this flow)";
+ } else {
+ StringBuilder sb = new StringBuilder("Criteria = ");
+ for (Criterion c : criteria) {
+ sb.append(WordUtils.capitalizeFully(c.type().toString()))
+ .append(COMMA);
+ }
+ result = removeTrailingComma(sb).toString();
+ }
+ return result;
+ }
+
+ private String getTreatmentString(FlowEntry f) {
+ TrafficTreatment treatment = f.treatment();
+ List<Instruction> deferred = treatment.deferred();
+ List<Instruction> immediate = treatment.immediate();
+ boolean haveDef = !deferred.isEmpty();
+ boolean haveImm = !immediate.isEmpty();
+ boolean both = haveDef && haveImm;
+ boolean neither = !haveDef && !haveImm;
+ String result;
+
+ if (neither) {
+ result = "(No traffic treatment instructions for this flow)";
+ } else {
+ StringBuilder sb = new StringBuilder();
+ addDeferred(sb, deferred);
+ if (both) {
+ sb.append(COMMA);
+ }
+ addImmediate(sb, immediate);
+ result = sb.toString();
+ }
+ return result;
+ }
+
+ private void addDeferred(StringBuilder sb, List<Instruction> deferred) {
+ if (!deferred.isEmpty()) {
+ sb.append("Deferred instructions = ");
+ for (Instruction i : deferred) {
+ sb.append(WordUtils.capitalizeFully(i.type().toString()))
+ .append(COMMA);
+ }
+ removeTrailingComma(sb);
+ }
+ }
+
+ private void addImmediate(StringBuilder sb, List<Instruction> immediate) {
+ if (!immediate.isEmpty()) {
+ sb.append("Immediate instructions = ");
+ for (Instruction i : immediate) {
+ sb.append(WordUtils.capitalizeFully(i.type().toString()))
+ .append(COMMA);
+ }
+ removeTrailingComma(sb);
+ }
+ }
+
+ private StringBuilder removeTrailingComma(StringBuilder sb) {
+ int pos = sb.lastIndexOf(COMMA);
+ sb.delete(pos, sb.length());
+ return sb;
+ }
+
+
+ @Override
+ protected String[] columnIds() {
+ return COL_IDS;
+ }
+ }
+
+}
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java b/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java
index bd17c9f..0ac5a8b 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/UiExtensionManager.java
@@ -79,6 +79,7 @@
new DeviceViewMessageHandler(),
new LinkViewMessageHandler(),
new HostViewMessageHandler(),
+ new FlowViewMessageHandler(),
new IntentViewMessageHandler(),
new ApplicationViewMessageHandler(),
new ClusterViewMessageHandler()
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.js b/web/gui/src/main/webapp/app/fw/svg/glyph.js
index 0612427..3cbef4b 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyph.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyph.js
@@ -114,6 +114,24 @@
"-2,4.1-2.9,7-2.9c2.9,0,5.1,0.9,6.9,2.9c5,5.4,5.6,17.1,5.4,22.6" +
"h-25C42.3,43.1,43.1,31.5,48.1,26.1z",
+ flowTable: 'M15.9,19.1h-8v-13h8V19.1z M90.5,6.1H75.6v13h14.9V6.1z' +
+ ' M71.9,6.1H56.9v13h14.9V6.1z M53.2,6.1H38.3v13h14.9V6.1z M34.5,' +
+ '6.1H19.6v13h14.9V6.1z M102.2,6.1h-8v13h8V6.1z M102.2,23.6H7.9v' +
+ '78.5h94.4V23.6z M86,63.2c0,3.3-2.7,6-6,6c-2.8,0-5.1-1.9-5.8-' +
+ '4.5H63.3v5.1c0,0.9-0.7,1.5-1.5,1.5h-5.2v10.6c2.6,0.7,4.5,3,4.5,' +
+ '5.8c0,3.3-2.7,6-6,6c-3.3,0-6-2.7-6-6c0-2.8,1.9-5.1,4.4-5.8V71.3' +
+ 'H48c-0.9,0-1.5-0.7-1.5-1.5v-5.1H36c-0.7,2.6-3,4.4-5.8,4.4c-3.3,' +
+ '0-6-2.7-6-6s2.7-6,6-6c2.8,0,5.2,1.9,5.8,4.5h10.5V56c0-0.9,0.7-' +
+ '1.5,1.5-1.5h5.5V43.8c-2.6-0.7-4.5-3-4.5-5.8c0-3.3,2.7-6,6-6s6,' +
+ '2.7,6,6c0,2.8-1.9,5.1-4.5,5.8v10.6h5.2c0.9,0,1.5,0.7,1.5,1.5v' +
+ '5.6h10.8c0.7-2.6,3-4.5,5.8-4.5C83.3,57.1,86,59.8,86,63.2z M55.1,' +
+ '42.3c2.3,0,4.3-1.9,4.3-4.3c0-2.3-1.9-4.3-4.3-4.3s-4.3,1.9-4.3,' +
+ '4.3C50.8,40.4,52.7,42.3,55.1,42.3z M34.4,63.1c0-2.3-1.9-4.3-4.3' +
+ '-4.3s-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3S34.4,65.5,34.4,63.1z ' +
+ 'M55.1,83.5c-2.3,0-4.3,1.9-4.3,4.3s1.9,4.3,4.3,4.3s4.3-1.9,4.3-' +
+ '4.3S57.5,83.5,55.1,83.5zM84.2,63.2c0-2.3-1.9-4.3-4.3-4.3s-4.3,' +
+ '1.9-4.3,4.3s1.9,4.3,4.3,4.3S84.2,65.5,84.2,63.2z',
+
// --- Topology toolbar specific glyphs ----------------------
summary: "M95.8,9.2H14.2c-2.8,0-5,2.2-5,5v81.5c0,2.8,2.2,5,5," +
diff --git a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
index 93249ed..1343b8f 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
@@ -25,13 +25,16 @@
// example params to buildTable:
// {
- // self: this, <- controller object
- // scope: $scope, <- controller scope
- // tag: 'device', <- table identifier
- // selCb: selCb <- row selection callback (optional)
+ // self: this, <- controller object
+ // scope: $scope, <- controller scope
+ // tag: 'device', <- table identifier
+ // selCb: selCb <- row selection callback (optional)
+ // query: params <- query parameters in URL (optional)
// }
// Note: selCb() is passed the row data model of the selected row,
// or null when no row is selected.
+ // Note: query is always an object (empty or containing properties)
+ // it comes from $location.search()
function buildTable(o) {
var handlers = {},
@@ -48,7 +51,8 @@
}
function sortCb(params) {
- wss.sendEvent(req, params);
+ var p = angular.extend({}, params, o.query);
+ wss.sendEvent(req, p);
}
o.scope.sortCallback = sortCb;
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 236f374..c600e89 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -119,11 +119,11 @@
bns.button(btnsDiv,
'dev-dets-p-flows',
- 'flowsTable',
+ 'flowTable',
function () {
ns.navTo(flowPath, { devId: details.id });
},
- 'Show flows for this device');
+ 'Show flows table for this device');
}
function addPortRow(tbody, port) {
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 7166e57..7a91837 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -18,5 +18,28 @@
ONOS GUI -- Flow View -- CSS file
*/
-#ov-flow td {
+.light #ov-flow tr:nth-child(6n + 2),
+.light #ov-flow tr:nth-child(6n + 3),
+.light #ov-flow tr:nth-child(6n + 4) {
+ background-color: #eee;
+}
+.light #ov-flow tr:nth-child(6n + 5),
+.light #ov-flow tr:nth-child(6n + 6),
+.light #ov-flow tr:nth-child(6n + 1) {
+ background-color: #ddd;
+}
+.dark #ov-flow tr:nth-child(6n + 2),
+.dark #ov-flow tr:nth-child(6n + 3),
+.dark #ov-flow tr:nth-child(6n + 4) {
+ background-color: #444;
+}
+.dark #ov-flow tr:nth-child(6n + 5),
+.dark #ov-flow tr:nth-child(6n + 6),
+.dark #ov-flow tr:nth-child(6n + 1) {
+ background-color: #333;
+}
+
+#ov-flow td.selector,
+#ov-flow td.treatment {
+ padding-left: 36px;
}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index 9c1de12..40b6946 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -1,4 +1,52 @@
-<!-- Host partial HTML -->
+<!-- Flow partial HTML -->
<div id="ov-flow">
- <h1> Flows are here </h1>
+ <div class="tabular-header">
+ <h2>
+ Flows for Device {{ctrl.devId || "none"}}
+ ({{ctrl.tableData.length}} total)
+ </h2>
+ </div>
+
+ <table class="summary-list"
+ onos-fixed-header
+ onos-sortable-header
+ sort-callback="sortCallback(requestParams)">
+ <thead>
+ <tr>
+ <th colId="id" sortable>Flow ID </th>
+ <th colId="appId" sortable>App ID </th>
+ <th colId="groupId" sortable>Group ID </th>
+ <th colId="tableId" sortable>Table ID </th>
+ <th colId="priority" sortable>Priority </th>
+ <th colId="timeout" sortable>Timeout </th>
+ <th colId="permanent" sortable>Permanent </th>
+ <th colId="state" sortable>State </th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr ng-hide="ctrl.tableData.length">
+ <td class="nodata" colspan="8">
+ No Flows found
+ </td>
+ </tr>
+
+ <tr ng-repeat-start="flow in ctrl.tableData">
+ <td>{{flow.id}}</td>
+ <td>{{flow.appId}}</td>
+ <td>{{flow.groupId}}</td>
+ <td>{{flow.tableId}}</td>
+ <td>{{flow.priority}}</td>
+ <td>{{flow.timeout}}</td>
+ <td>{{flow.permanent}}</td>
+ <td>{{flow.state}}</td>
+ </tr>
+ <tr>
+ <td class="selector" colspan="8">{{flow.selector}}</td>
+ </tr>
+ <tr ng-repeat-end ng-repeat-done>
+ <td class="treatment" colspan="8">{{flow.treatment}}</td>
+ </tr>
+ </tbody>
+ </table>
</div>
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.js b/web/gui/src/main/webapp/app/view/flow/flow.js
index 0436a3e..239ebda 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.js
+++ b/web/gui/src/main/webapp/app/view/flow/flow.js
@@ -21,16 +21,33 @@
(function () {
'use strict';
+ // injected references
+ var $log, $scope, $location, fs, tbs;
+
angular.module('ovFlow', [])
.controller('OvFlowCtrl',
- ['$log', '$scope', 'TableBuilderService',
+ ['$log', '$scope', '$location', 'FnService', 'TableBuilderService',
- function ($log, $scope, tbs) {
- //tbs.buildTable({
- // self: this,
- // scope: $scope,
- // tag: 'flow'
- //});
+ function (_$log_, _$scope_, _$location_, _fs_, _tbs_) {
+ var self = this,
+ params;
+ $log = _$log_;
+ $scope = _$scope_;
+ $location = _$location_;
+ fs = _fs_;
+ tbs = _tbs_;
+
+ params = $location.search();
+ if (params.hasOwnProperty('devId')) {
+ self.devId = params['devId'];
+ }
+
+ tbs.buildTable({
+ self: self,
+ scope: $scope,
+ tag: 'flow',
+ query: params
+ });
$log.log('OvFlowCtrl has been created');
}]);
diff --git a/web/gui/src/main/webapp/app/view/topo/topoSelect.js b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
index cf08d2f..521c917 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoSelect.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoSelect.js
@@ -248,9 +248,9 @@
if ((data.props).hasOwnProperty('URI')) {
tps.addAction({
id: 'flows-table-btn',
- gid: 'flowsTable',
+ gid: 'flowTable',
cb: function () {
- ns.navTo(flowPath, { devId: data.id });
+ ns.navTo(flowPath, { devId: data.props['URI'] });
},
tt: 'Show flows for this device'
});
diff --git a/web/gui/src/main/webapp/onos.js b/web/gui/src/main/webapp/onos.js
index 5d534e3..0844adb 100644
--- a/web/gui/src/main/webapp/onos.js
+++ b/web/gui/src/main/webapp/onos.js
@@ -78,7 +78,7 @@
self.$route = $route;
self.$routeParams = $routeParams;
self.$location = $location;
- self.version = '1.1.0';
+ self.version = '1.3.0';
// initialize services...
ts.init();
diff --git a/web/gui/src/main/webapp/tests/app/onos-spec.js b/web/gui/src/main/webapp/tests/app/onos-spec.js
index 4fd43ff..fedd839 100644
--- a/web/gui/src/main/webapp/tests/app/onos-spec.js
+++ b/web/gui/src/main/webapp/tests/app/onos-spec.js
@@ -29,7 +29,7 @@
ctrl = $controller('OnosCtrl');
}));
- it('should report version 1.1.0', function () {
- expect(ctrl.version).toEqual('1.1.0');
+ it('should report version 1.3.0', function () {
+ expect(ctrl.version).toEqual('1.3.0');
});
});
\ No newline at end of file