홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
ac829e4b 1 parent 9906de21

ONOS-1820 - GUI -- Base port stats view created. Navigate to it using device or topo view. 

Change-Id: I87b1caea74dc4974b0a4fd1fdde7b7bd3269ca86
Inline Side-by-side
Showing 10 changed files with 308 additions and 6 deletions
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +package org.onosproject.ui.impl;
18 +
19 +import com.fasterxml.jackson.databind.node.ObjectNode;
20 +import com.google.common.base.Strings;
21 +import com.google.common.collect.ImmutableSet;
22 +import org.onosproject.net.DeviceId;
23 +import org.onosproject.net.device.DeviceService;
24 +import org.onosproject.net.device.PortStatistics;
25 +import org.onosproject.ui.RequestHandler;
26 +import org.onosproject.ui.UiMessageHandler;
27 +import org.onosproject.ui.table.AbstractTableRow;
28 +import org.onosproject.ui.table.TableRequestHandler;
29 +import org.onosproject.ui.table.TableRow;
30 +
31 +import java.util.ArrayList;
32 +import java.util.Collection;
33 +import java.util.List;
34 +
35 +
36 +/**
37 + * Message handler for port view related messages.
38 + */
39 +public class PortViewMessageHandler extends UiMessageHandler {
40 +
41 + private static final String PORT_DATA_REQ = "portDataRequest";
42 + private static final String PORT_DATA_RESP = "portDataResponse";
43 + private static final String PORTS = "ports";
44 +
45 + private static final String ID = "id";
46 + private static final String PKT_RX = "pkt_rx";
47 + private static final String PKT_TX = "pkt_tx";
48 + private static final String BYTES_RX = "bytes_rx";
49 + private static final String BYTES_TX = "bytes_tx";
50 + private static final String PKT_RX_DRP = "pkt_rx_drp";
51 + private static final String PKT_TX_DRP = "pkt_tx_drp";
52 + private static final String DURATION = "duration";
53 +
54 + @Override
55 + protected Collection<RequestHandler> getHandlers() {
56 + return ImmutableSet.of(new PortDataRequest());
57 + }
58 +
59 + // handler for port table requests
60 + private final class PortDataRequest extends TableRequestHandler {
61 +
62 + private PortDataRequest() {
63 + super(PORT_DATA_REQ, PORT_DATA_RESP, PORTS);
64 + }
65 +
66 + @Override
67 + protected TableRow[] generateTableRows(ObjectNode payload) {
68 + String uri = string(payload, "devId");
69 + if (Strings.isNullOrEmpty(uri)) {
70 + return new TableRow[0];
71 + }
72 + DeviceId deviceId = DeviceId.deviceId(uri);
73 + DeviceService service = get(DeviceService.class);
74 + List<TableRow> list = new ArrayList<>();
75 + for (PortStatistics stat : service.getPortStatistics(deviceId)) {
76 + list.add(new PortTableRow(stat));
77 + }
78 + return list.toArray(new TableRow[list.size()]);
79 + }
80 + }
81 +
82 + /**
83 + * TableRow implementation for
84 + * {@link org.onosproject.net.device.PortStatistics port statistics}.
85 + */
86 + private static class PortTableRow extends AbstractTableRow {
87 +
88 + private static final String[] COL_IDS = {
89 + ID, PKT_RX, PKT_TX, BYTES_RX, BYTES_TX,
90 + PKT_RX_DRP, PKT_TX_DRP, DURATION
91 + };
92 +
93 + public PortTableRow(PortStatistics stat) {
94 + add(ID, Integer.toString(stat.port()));
95 + add(PKT_RX, Long.toString(stat.packetsReceived()));
96 + add(PKT_TX, Long.toString(stat.packetsSent()));
97 + add(BYTES_RX, Long.toString(stat.bytesReceived()));
98 + add(BYTES_TX, Long.toString(stat.bytesSent()));
99 + add(PKT_RX_DRP, Long.toString(stat.packetsRxDropped()));
100 + add(PKT_TX_DRP, Long.toString(stat.packetsTxDropped()));
101 + add(DURATION, Long.toString(stat.durationSec()));
102 + }
103 +
104 + @Override
105 + protected String[] columnIds() {
106 + return COL_IDS;
107 + }
108 + }
109 +
110 +}
...@@ -68,6 +68,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService { ...@@ -68,6 +68,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
68 new UiView(NETWORK, "topo", "Topology", "nav_topo"), 68 new UiView(NETWORK, "topo", "Topology", "nav_topo"),
69 new UiView(NETWORK, "device", "Devices", "nav_devs"), 69 new UiView(NETWORK, "device", "Devices", "nav_devs"),
70 new UiViewHidden("flow"), 70 new UiViewHidden("flow"),
71 + new UiViewHidden("port"),
71 new UiView(NETWORK, "link", "Links", "nav_links"), 72 new UiView(NETWORK, "link", "Links", "nav_links"),
72 new UiView(NETWORK, "host", "Hosts", "nav_hosts"), 73 new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
73 new UiView(NETWORK, "intent", "Intents", "nav_intents") 74 new UiView(NETWORK, "intent", "Intents", "nav_intents")
...@@ -80,6 +81,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService { ...@@ -80,6 +81,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
80 new LinkViewMessageHandler(), 81 new LinkViewMessageHandler(),
81 new HostViewMessageHandler(), 82 new HostViewMessageHandler(),
82 new FlowViewMessageHandler(), 83 new FlowViewMessageHandler(),
84 + new PortViewMessageHandler(),
83 new IntentViewMessageHandler(), 85 new IntentViewMessageHandler(),
84 new ApplicationViewMessageHandler(), 86 new ApplicationViewMessageHandler(),
85 new ClusterViewMessageHandler() 87 new ClusterViewMessageHandler()
......
...@@ -90,8 +90,9 @@ ...@@ -90,8 +90,9 @@
90 } 90 }
91 91
92 #device-details-panel .actionBtns div { 92 #device-details-panel .actionBtns div {
93 - padding: 12px 0; 93 + padding: 12px 6px;
94 } 94 }
95 +
95 #device-details-panel .top hr { 96 #device-details-panel .top hr {
96 width: 95%; 97 width: 95%;
97 margin: 0 auto; 98 margin: 0 auto;
......
...@@ -36,8 +36,10 @@ ...@@ -36,8 +36,10 @@
36 scrollSize = 17, 36 scrollSize = 17,
37 portsTblPdg = 50, 37 portsTblPdg = 50,
38 flowPath = 'flow', 38 flowPath = 'flow',
39 + portPath = 'port',
39 40
40 pName = 'device-details-panel', 41 pName = 'device-details-panel',
42 + bName = 'dev-dets-p',
41 detailsReq = 'deviceDetailsRequest', 43 detailsReq = 'deviceDetailsRequest',
42 detailsResp = 'deviceDetailsResponse', 44 detailsResp = 'deviceDetailsResponse',
43 45
...@@ -116,13 +118,24 @@ ...@@ -116,13 +118,24 @@
116 addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]); 118 addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]);
117 }); 119 });
118 120
119 - bns.button(btnsDiv, 121 + bns.button(
120 - 'dev-dets-p-flows', 122 + btnsDiv,
123 + bName + '-flows',
121 'flowTable', 124 'flowTable',
122 function () { 125 function () {
123 ns.navTo(flowPath, { devId: details.id }); 126 ns.navTo(flowPath, { devId: details.id });
124 }, 127 },
125 - 'Show flows table for this device'); 128 + 'Show flow view for this device'
129 + );
130 + bns.button(
131 + btnsDiv,
132 + bName + '-ports',
133 + 'chain',
134 + function () {
135 + ns.navTo(portPath, { devId: details.id });
136 + },
137 + 'Show port view for this device'
138 + );
126 } 139 }
127 140
128 function addPortRow(tbody, port) { 141 function addPortRow(tbody, port) {
......
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Port View -- CSS file
19 + */
20 +
21 +#ov-port h2 {
22 + display: inline-block;
23 +}
24 +
25 +#ov-port div.ctrl-btns {
26 + width: 45px;
27 +}
28 +
29 +#ov-port tr:not(.no-data) td {
30 + text-align: right;
31 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!--
2 + ~ Copyright 2015 Open Networking Laboratory
3 + ~
4 + ~ Licensed under the Apache License, Version 2.0 (the "License");
5 + ~ you may not use this file except in compliance with the License.
6 + ~ You may obtain a copy of the License at
7 + ~
8 + ~ http://www.apache.org/licenses/LICENSE-2.0
9 + ~
10 + ~ Unless required by applicable law or agreed to in writing, software
11 + ~ distributed under the License is distributed on an "AS IS" BASIS,
12 + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + ~ See the License for the specific language governing permissions and
14 + ~ limitations under the License.
15 + -->
16 +
17 +<!-- Port partial HTML -->
18 +<div id="ov-port">
19 + <div class="tabular-header">
20 + <h2>
21 + Ports for Device {{devId || "(No device selected)"}}
22 + ({{tableData.length}} total)
23 + </h2>
24 + <div class="ctrl-btns">
25 + <div class="refresh active"
26 + icon icon-size="36" icon-id="refresh"
27 + ng-click="refresh()"></div>
28 + </div>
29 + </div>
30 +
31 + <div class="summary-list" onos-fixed-header>
32 +
33 + <div class="table-header"
34 + onos-sortable-header sort-callback="sortCallback(requestParams)">
35 + <table>
36 + <tr>
37 + <td colId="id" col-width="60px" sortable>Port ID </td>
38 + <td colId="pkt_rx" sortable>Pkts Received </td>
39 + <td colId="pkt_tx" sortable>Pkts Sent </td>
40 + <td colId="bytes_rx" sortable>Bytes Received </td>
41 + <td colId="bytes_tx" sortable>Bytes Sent </td>
42 + <td colId="pkt_rx_drp" sortable>Pkts Received Dropped </td>
43 + <td colId="pkt_tx_drp" sortable>Pkts Sent Dropped </td>
44 + <td colId="duration" sortable>Duration (sec) </td>
45 + </tr>
46 + </table>
47 + </div>
48 +
49 + <div class="table-body">
50 + <table>
51 + <tr ng-hide="tableData.length" class="no-data ignore-width">
52 + <td colspan="8">
53 + No Ports found
54 + </td>
55 + </tr>
56 +
57 + <tr ng-repeat="port in tableData"
58 + ng-repeat-done>
59 + <td>{{port.id}}</td>
60 + <td>{{port.pkt_rx}}</td>
61 + <td>{{port.pkt_tx}}</td>
62 + <td>{{port.bytes_rx}}</td>
63 + <td>{{port.bytes_tx}}</td>
64 + <td>{{port.pkt_rx_drp}}</td>
65 + <td>{{port.pkt_tx_drp}}</td>
66 + <td>{{port.duration}}</td>
67 + </tr>
68 + </table>
69 + </div>
70 +
71 + </div>
72 +
73 +</div>
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Port View Module
19 + */
20 +
21 +(function () {
22 + 'use strict';
23 +
24 + // injected references
25 + var $log, $scope, $location, fs, ts, tbs;
26 +
27 + angular.module('ovPort', [])
28 + .controller('OvPortCtrl',
29 + ['$log', '$scope', '$location',
30 + 'FnService', 'TableService', 'TableBuilderService',
31 +
32 + function (_$log_, _$scope_, _$location_, _fs_, _ts_, _tbs_) {
33 + var params;
34 + $log = _$log_;
35 + $scope = _$scope_;
36 + $location = _$location_;
37 + fs = _fs_;
38 + ts = _ts_;
39 + tbs = _tbs_;
40 +
41 + params = $location.search();
42 + if (params.hasOwnProperty('devId')) {
43 + $scope.devId = params['devId'];
44 + }
45 +
46 + tbs.buildTable({
47 + scope: $scope,
48 + tag: 'port',
49 + query: params
50 + });
51 +
52 + $scope.refresh = function () {
53 + $log.debug('Refreshing ports page');
54 + ts.resetSortIcons();
55 + $scope.sortCallback();
56 + };
57 +
58 + $log.log('OvPortCtrl has been created');
59 + }]);
60 +}());
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
41 consumeClick = false; // used to coordinate with SVG click handler 41 consumeClick = false; // used to coordinate with SVG click handler
42 42
43 // constants 43 // constants
44 - var flowPath = 'flow'; 44 + var flowPath = 'flow',
45 + portPath ='port';
45 46
46 // ========================== 47 // ==========================
47 48
...@@ -252,7 +253,15 @@ ...@@ -252,7 +253,15 @@
252 cb: function () { 253 cb: function () {
253 ns.navTo(flowPath, { devId: data.props['URI'] }); 254 ns.navTo(flowPath, { devId: data.props['URI'] });
254 }, 255 },
255 - tt: 'Show flows table for this device' 256 + tt: 'Show flow view for this device'
257 + });
258 + tps.addAction({
259 + id: 'ports-table-btn',
260 + gid: 'chain',
261 + cb: function () {
262 + ns.navTo(portPath, { devId: data.props['URI'] });
263 + },
264 + tt: 'Show port view for this device'
256 }); 265 });
257 } 266 }
258 267
......
...@@ -111,6 +111,7 @@ ...@@ -111,6 +111,7 @@
111 <script src="app/view/topo/topoToolbar.js"></script> 111 <script src="app/view/topo/topoToolbar.js"></script>
112 <script src="app/view/device/device.js"></script> 112 <script src="app/view/device/device.js"></script>
113 <script src="app/view/flow/flow.js"></script> 113 <script src="app/view/flow/flow.js"></script>
114 + <script src="app/view/port/port.js"></script>
114 <script src="app/view/link/link.js"></script> 115 <script src="app/view/link/link.js"></script>
115 <script src="app/view/host/host.js"></script> 116 <script src="app/view/host/host.js"></script>
116 <script src="app/view/intent/intent.js"></script> 117 <script src="app/view/intent/intent.js"></script>
...@@ -125,6 +126,7 @@ ...@@ -125,6 +126,7 @@
125 <link rel="stylesheet" href="app/view/topo/topo.css"> 126 <link rel="stylesheet" href="app/view/topo/topo.css">
126 <link rel="stylesheet" href="app/view/device/device.css"> 127 <link rel="stylesheet" href="app/view/device/device.css">
127 <link rel="stylesheet" href="app/view/flow/flow.css"> 128 <link rel="stylesheet" href="app/view/flow/flow.css">
129 + <link rel="stylesheet" href="app/view/port/port.css">
128 <link rel="stylesheet" href="app/view/link/link.css"> 130 <link rel="stylesheet" href="app/view/link/link.css">
129 <link rel="stylesheet" href="app/view/host/host.css"> 131 <link rel="stylesheet" href="app/view/host/host.css">
130 <link rel="stylesheet" href="app/view/intent/intent.css"> 132 <link rel="stylesheet" href="app/view/intent/intent.css">
......
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
39 'topo', 39 'topo',
40 'device', 40 'device',
41 'flow', 41 'flow',
42 + 'port',
42 'host', 43 'host',
43 'app', 44 'app',
44 'intent', 45 'intent',
......