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

Change-Id: I87b1caea74dc4974b0a4fd1fdde7b7bd3269ca86

+/*
+ * 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.ObjectNode;
+import com.google.common.base.Strings;
+import com.google.common.collect.ImmutableSet;
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.device.DeviceService;
+import org.onosproject.net.device.PortStatistics;
+import org.onosproject.ui.RequestHandler;
+import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.table.AbstractTableRow;
+import org.onosproject.ui.table.TableRequestHandler;
+import org.onosproject.ui.table.TableRow;
+
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.List;
+
+
+/**
+ * Message handler for port view related messages.
+ */
+public class PortViewMessageHandler extends UiMessageHandler {
+
+    private static final String PORT_DATA_REQ = "portDataRequest";
+    private static final String PORT_DATA_RESP = "portDataResponse";
+    private static final String PORTS = "ports";
+
+    private static final String ID = "id";
+    private static final String PKT_RX = "pkt_rx";
+    private static final String PKT_TX = "pkt_tx";
+    private static final String BYTES_RX = "bytes_rx";
+    private static final String BYTES_TX = "bytes_tx";
+    private static final String PKT_RX_DRP = "pkt_rx_drp";
+    private static final String PKT_TX_DRP = "pkt_tx_drp";
+    private static final String DURATION = "duration";
+
+    @Override
+    protected Collection<RequestHandler> getHandlers() {
+        return ImmutableSet.of(new PortDataRequest());
+    }
+
+    // handler for port table requests
+    private final class PortDataRequest extends TableRequestHandler {
+
+        private PortDataRequest() {
+            super(PORT_DATA_REQ, PORT_DATA_RESP, PORTS);
+        }
+
+        @Override
+        protected TableRow[] generateTableRows(ObjectNode payload) {
+            String uri = string(payload, "devId");
+            if (Strings.isNullOrEmpty(uri)) {
+                return new TableRow[0];
+            }
+            DeviceId deviceId = DeviceId.deviceId(uri);
+            DeviceService service = get(DeviceService.class);
+            List<TableRow> list = new ArrayList<>();
+            for (PortStatistics stat : service.getPortStatistics(deviceId)) {
+                list.add(new PortTableRow(stat));
+            }
+            return list.toArray(new TableRow[list.size()]);
+        }
+    }
+
+    /**
+     * TableRow implementation for
+     * {@link org.onosproject.net.device.PortStatistics port statistics}.
+     */
+    private static class PortTableRow extends AbstractTableRow {
+
+        private static final String[] COL_IDS = {
+                ID, PKT_RX, PKT_TX, BYTES_RX, BYTES_TX,
+                PKT_RX_DRP, PKT_TX_DRP, DURATION
+        };
+
+        public PortTableRow(PortStatistics stat) {
+            add(ID, Integer.toString(stat.port()));
+            add(PKT_RX, Long.toString(stat.packetsReceived()));
+            add(PKT_TX, Long.toString(stat.packetsSent()));
+            add(BYTES_RX, Long.toString(stat.bytesReceived()));
+            add(BYTES_TX, Long.toString(stat.bytesSent()));
+            add(PKT_RX_DRP, Long.toString(stat.packetsRxDropped()));
+            add(PKT_TX_DRP, Long.toString(stat.packetsTxDropped()));
+            add(DURATION, Long.toString(stat.durationSec()));
+        }
+
+        @Override
+        protected String[] columnIds() {
+            return COL_IDS;
+        }
+    }
+
+}

@@ -68,6 +68,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
                 new UiView(NETWORK, "topo", "Topology", "nav_topo"),
                 new UiView(NETWORK, "device", "Devices", "nav_devs"),
                 new UiViewHidden("flow"),
+                new UiViewHidden("port"),
                 new UiView(NETWORK, "link", "Links", "nav_links"),
                 new UiView(NETWORK, "host", "Hosts", "nav_hosts"),
                 new UiView(NETWORK, "intent", "Intents", "nav_intents")
@@ -80,6 +81,7 @@ public class UiExtensionManager implements UiExtensionService, SpriteService {
                         new LinkViewMessageHandler(),
                         new HostViewMessageHandler(),
                         new FlowViewMessageHandler(),
+                        new PortViewMessageHandler(),
                         new IntentViewMessageHandler(),
                         new ApplicationViewMessageHandler(),
                         new ClusterViewMessageHandler()

@@ -90,8 +90,9 @@
 }
 
 #device-details-panel .actionBtns div {
-    padding: 12px 0;
+    padding: 12px 6px;
 }
+
 #device-details-panel .top hr {
     width: 95%;
     margin: 0 auto;

@@ -36,8 +36,10 @@
         scrollSize = 17,
         portsTblPdg = 50,
         flowPath = 'flow',
+        portPath = 'port',
 
         pName = 'device-details-panel',
+        bName = 'dev-dets-p',
         detailsReq = 'deviceDetailsRequest',
         detailsResp = 'deviceDetailsResponse',
 
@@ -116,13 +118,24 @@
             addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]);
         });
 
-        bns.button(btnsDiv,
-            'dev-dets-p-flows',
+        bns.button(
+            btnsDiv,
+            bName + '-flows',
             'flowTable',
             function () {
                 ns.navTo(flowPath, { devId: details.id });
             },
-            'Show flows table for this device');
+            'Show flow view for this device'
+        );
+        bns.button(
+            btnsDiv,
+            bName + '-ports',
+            'chain',
+            function () {
+                ns.navTo(portPath, { devId: details.id });
+            },
+            'Show port view for this device'
+        );
     }
 
     function addPortRow(tbody, port) {

+/*
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Port View -- CSS file
+ */
+
+#ov-port h2 {
+    display: inline-block;
+}
+
+#ov-port div.ctrl-btns {
+    width: 45px;
+}
+
+#ov-port tr:not(.no-data) td {
+    text-align: right;
+}
\ No newline at end of file

+<!--
+  ~ 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.
+  -->
+
+<!-- Port partial HTML -->
+<div id="ov-port">
+    <div class="tabular-header">
+        <h2>
+            Ports for Device {{devId || "(No device selected)"}}
+            ({{tableData.length}} total)
+        </h2>
+        <div class="ctrl-btns">
+            <div class="refresh active"
+                 icon icon-size="36" icon-id="refresh"
+                 ng-click="refresh()"></div>
+        </div>
+    </div>
+
+    <div class="summary-list" onos-fixed-header>
+
+        <div class="table-header"
+             onos-sortable-header sort-callback="sortCallback(requestParams)">
+            <table>
+                <tr>
+                    <td colId="id" col-width="60px" sortable>Port ID </td>
+                    <td colId="pkt_rx" sortable>Pkts Received </td>
+                    <td colId="pkt_tx" sortable>Pkts Sent </td>
+                    <td colId="bytes_rx" sortable>Bytes Received </td>
+                    <td colId="bytes_tx" sortable>Bytes Sent </td>
+                    <td colId="pkt_rx_drp" sortable>Pkts Received Dropped </td>
+                    <td colId="pkt_tx_drp" sortable>Pkts Sent Dropped </td>
+                    <td colId="duration" sortable>Duration (sec) </td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="table-body">
+            <table>
+                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                    <td colspan="8">
+                        No Ports found
+                    </td>
+                </tr>
+
+                <tr ng-repeat="port in tableData"
+                    ng-repeat-done>
+                    <td>{{port.id}}</td>
+                    <td>{{port.pkt_rx}}</td>
+                    <td>{{port.pkt_tx}}</td>
+                    <td>{{port.bytes_rx}}</td>
+                    <td>{{port.bytes_tx}}</td>
+                    <td>{{port.pkt_rx_drp}}</td>
+                    <td>{{port.pkt_tx_drp}}</td>
+                    <td>{{port.duration}}</td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+
+</div>

+/*
+ * 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.
+ */
+
+/*
+ ONOS GUI -- Port View Module
+ */
+
+(function () {
+    'use strict';
+
+    // injected references
+    var $log, $scope, $location, fs, ts, tbs;
+
+    angular.module('ovPort', [])
+    .controller('OvPortCtrl',
+        ['$log', '$scope', '$location',
+            'FnService', 'TableService', 'TableBuilderService',
+
+        function (_$log_, _$scope_, _$location_, _fs_, _ts_, _tbs_) {
+            var params;
+            $log = _$log_;
+            $scope = _$scope_;
+            $location = _$location_;
+            fs = _fs_;
+            ts = _ts_;
+            tbs = _tbs_;
+
+            params = $location.search();
+            if (params.hasOwnProperty('devId')) {
+                $scope.devId = params['devId'];
+            }
+
+            tbs.buildTable({
+                scope: $scope,
+                tag: 'port',
+                query: params
+            });
+
+            $scope.refresh = function () {
+                $log.debug('Refreshing ports page');
+                ts.resetSortIcons();
+                $scope.sortCallback();
+            };
+            
+            $log.log('OvPortCtrl has been created');
+        }]);
+}());

@@ -41,7 +41,8 @@
         consumeClick = false;   // used to coordinate with SVG click handler
 
     // constants
-    var flowPath = 'flow';
+    var flowPath = 'flow',
+        portPath ='port';
 
     // ==========================
 
@@ -252,7 +253,15 @@
                 cb: function () {
                     ns.navTo(flowPath, { devId: data.props['URI'] });
                 },
-                tt: 'Show flows table for this device'
+                tt: 'Show flow view for this device'
+            });
+            tps.addAction({
+                id: 'ports-table-btn',
+                gid: 'chain',
+                cb: function () {
+                    ns.navTo(portPath, { devId: data.props['URI'] });
+                },
+                tt: 'Show port view for this device'
             });
         }
 

@@ -111,6 +111,7 @@
     <script src="app/view/topo/topoToolbar.js"></script>
     <script src="app/view/device/device.js"></script>
     <script src="app/view/flow/flow.js"></script>
+    <script src="app/view/port/port.js"></script>
     <script src="app/view/link/link.js"></script>
     <script src="app/view/host/host.js"></script>
     <script src="app/view/intent/intent.js"></script>
@@ -125,6 +126,7 @@
     <link rel="stylesheet" href="app/view/topo/topo.css">
     <link rel="stylesheet" href="app/view/device/device.css">
     <link rel="stylesheet" href="app/view/flow/flow.css">
+    <link rel="stylesheet" href="app/view/port/port.css">
     <link rel="stylesheet" href="app/view/link/link.css">
     <link rel="stylesheet" href="app/view/host/host.css">
     <link rel="stylesheet" href="app/view/intent/intent.css">

@@ -39,6 +39,7 @@
         'topo',
         'device',
         'flow',
+        'port',
         'host',
         'app',
         'intent',