diff options
Diffstat (limited to 'framework/src/onos/web/gui/src/main/webapp/app/view')
8 files changed, 287 insertions, 19 deletions
diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css index fc08f68b..e0e9cf57 100644 --- a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.css @@ -75,6 +75,15 @@ margin: 8px 0; } +#device-details-panel .editable { + cursor: pointer; + border-bottom: 1px dashed darkgreen; +} + +#device-details-panel h2 input { + font-size: 1.0em; +} + #device-details-panel .top div.left { float: left; padding: 0 18px 0 0; diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html index 5d51d1d4..63a04db8 100644 --- a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.html @@ -35,13 +35,14 @@ <tr> <td colId="available" class="table-icon" sortable></td> <td colId="type" class="table-icon" sortable></td> + <td colId="name" sortable>Friendly Name </td> <td colId="id" sortable>Device ID </td> <td colId="masterid" sortable>Master Instance </td> - <td colId="num_ports" sortable>Ports </td> + <td colId="num_ports" col-width="60px" sortable>Ports </td> <td colId="mfr" sortable>Vendor </td> <td colId="hw" sortable>H/W Version </td> <td colId="sw" sortable>S/W Version </td> - <td colId="protocol" sortable>Protocol </td> + <td colId="protocol" col-width="80px" sortable>Protocol </td> </tr> </table> </div> @@ -64,6 +65,7 @@ <td class="table-icon"> <div icon icon-id="{{dev._iconid_type}}"></div> </td> + <td>{{dev.name}}</td> <td>{{dev.id}}</td> <td>{{dev.masterid}}</td> <td>{{dev.num_ports}}</td> diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js index 7a2dc4f9..5b7120fd 100644 --- a/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/device/device.js @@ -22,13 +22,17 @@ 'use strict'; // injected refs - var $log, $scope, $location, fs, mast, ps, wss, is, ns; + var $log, $scope, $loc, fs, mast, ps, wss, is, ns, ks; // internal state var detailsPanel, - pStartY, pHeight, - top, bottom, iconDiv, - wSize; + pStartY, + pHeight, + top, + bottom, + iconDiv, + wSize, + editingName = false; // constants var topPdg = 13, @@ -39,13 +43,15 @@ pName = 'device-details-panel', detailsReq = 'deviceDetailsRequest', detailsResp = 'deviceDetailsResponse', + nameChangeReq = 'deviceNameChangeRequest', + nameChangeResp = 'deviceNameChangeResponse', propOrder = [ - 'type', 'masterid', 'chassisid', + 'id', 'type', 'masterid', 'chassisid', 'mfr', 'hw', 'sw', 'protocol', 'serial' ], friendlyProps = [ - 'Type', 'Master ID', 'Chassis ID', + 'URI', 'Type', 'Master ID', 'Chassis ID', 'Vendor', 'H/W Version', 'S/W Version', 'Protocol', 'Serial #' ], portCols = [ @@ -59,7 +65,9 @@ if (detailsPanel.isVisible()) { $scope.selId = null; detailsPanel.hide(); + return true; } + return false; } function addCloseBtn(div) { @@ -68,6 +76,59 @@ div.on('click', closePanel); } + function exitEditMode(nameH2, name) { + nameH2.html(name); + nameH2.classed('editable', true); + editingName = false; + ks.enableGlobalKeys(true); + } + + function editNameSave() { + var nameH2 = top.select('h2'), + id = $scope.panelData.id, + val, + newVal; + + if (editingName) { + val = nameH2.select('input').property('value').trim(); + newVal = val || id; + + exitEditMode(nameH2, newVal); + $scope.panelData.name = newVal; + wss.sendEvent(nameChangeReq, { id: id, name: val }); + } + } + + function editNameCancel() { + if (editingName) { + exitEditMode(top.select('h2'), $scope.panelData.name); + return true; + } + return false; + } + + function editName() { + var nameH2 = top.select('h2'), + tf, el; + + if (!editingName) { + nameH2.classed('editable', false); + nameH2.html(''); + tf = nameH2.append('input').classed('name-input', true) + .attr('type', 'text') + .attr('value', $scope.panelData.name); + el = tf[0][0]; + el.focus(); + el.select(); + editingName = true; + ks.enableGlobalKeys(false); + } + } + + function handleEscape() { + return editNameCancel() || closePanel(); + } + function setUpPanel() { var container, closeBtn, tblDiv; detailsPanel.empty(); @@ -78,7 +139,7 @@ closeBtn = top.append('div').classed('close-btn', true); addCloseBtn(closeBtn); iconDiv = top.append('div').classed('dev-icon', true); - top.append('h2'); + top.append('h2').classed('editable', true).on('click', editName); tblDiv = top.append('div').classed('top-tables', true); tblDiv.append('div').classed('left', true).append('table'); @@ -110,11 +171,11 @@ .append('tbody'); is.loadEmbeddedIcon(iconDiv, details._iconid_type, 40); - top.select('h2').html(details.id); + top.select('h2').html(details.name); propOrder.forEach(function (prop, i) { // properties are split into two tables - addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]); + addProp(i < 4 ? leftTbl : rightTbl, i, details[prop]); }); } @@ -156,14 +217,23 @@ detailsPanel.width(tbWidth + ctnrPdg); } + function populateName(div, name) { + var lab = div.select('.label'), + val = div.select('.value'); + lab.html('Friendly Name:'); + val.html(name); + } + function populateDetails(details) { - var topTbs, btmTbl, ports; + var nameDiv, topTbs, btmTbl, ports; setUpPanel(); + nameDiv = top.select('.name-div'); topTbs = top.select('.top-tables'); btmTbl = bottom.select('table'); ports = details.ports; + populateName(nameDiv, details.name); populateTop(topTbs, details); populateBottom(btmTbl, ports); @@ -175,6 +245,13 @@ $scope.$apply(); } + function respNameCb(data) { + if (data.warn) { + $log.warn(data.warn, data.id); + top.select('h2').html(data.id); + } + } + function createDetailsPane() { detailsPanel = ps.createPanel(pName, { width: wSize.width, @@ -193,21 +270,26 @@ .controller('OvDeviceCtrl', ['$log', '$scope', '$location', 'TableBuilderService', 'FnService', 'MastService', 'PanelService', 'WebSocketService', 'IconService', - 'NavService', + 'NavService', 'KeyService', function (_$log_, _$scope_, _$location_, - tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_) { + tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_, _ks_) { + var params, + handlers = {}; + $log = _$log_; $scope = _$scope_; - $location = _$location_; + $loc = _$location_; fs = _fs_; mast = _mast_; ps = _ps_; wss = _wss_; is = _is_; ns = _ns_; - var params = $location.search(), - handlers = {}; + ks = _ks_; + + params = $loc.search(); + $scope.panelData = {}; $scope.flowTip = 'Show flow view for selected device'; $scope.portTip = 'Show port view for selected device'; @@ -215,6 +297,7 @@ // details panel handlers handlers[detailsResp] = respDetailsCb; + handlers[nameChangeResp] = respNameCb; wss.bindHandlers(handlers); // query for if a certain device needs to be highlighted @@ -278,7 +361,8 @@ } // create key bindings to handle panel ks.keyBindings({ - esc: [closePanel, 'Close the details panel'], + enter: editNameSave, + esc: [handleEscape, 'Close the details panel'], _helpFormat: ['esc'] }); ks.gestureNotes([ diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.css b/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.css new file mode 100644 index 00000000..12cf6377 --- /dev/null +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.css @@ -0,0 +1,49 @@ +/* + * 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 -- Processor View -- CSS file + */ + +#ov-processor h2 { + display: inline-block; +} + +#ov-processor div.ctrl-btns { + width: 40px; +} + +.light #ov-processor .current-view use { + fill: white; +} +.dark #ov-processor .current-view use { + fill: #304860; +} + +.light #ov-processor .current-view rect { + fill: deepskyblue; +} +.dark #ov-processor .current-view rect { + fill: #eee; +} + +#ov-processor td.number { + text-align: right; +} + +#ov-processor tr.no-data td { + text-align: center; +} diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.html b/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.html new file mode 100644 index 00000000..1c615041 --- /dev/null +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.html @@ -0,0 +1,63 @@ +<!-- processor partial HTML --> +<div id="ov-processor"> + <div class="tabular-header"> + <h2> + Packet Processors ({{tableData.length}} Processors total) + </h2> + <div class="ctrl-btns"> + <div class="refresh" ng-class="{active: autoRefresh}" + icon icon-size="36" icon-id="refresh" + tooltip tt-msg="autoRefreshTip" + ng-click="toggleRefresh()"></div> + <!-- + <div class="separator"></div> + + <div class="current-view" + icon icon-id="processorTable" icon-size="36"></div> + + <div class="active" + icon icon-id="requestTable" icon-size="36"git sta + tooltip tt-msg="requestTip" + ng-click="nav('request')"></div> + --> + </div> + </div> + + <div class="summary-list" onos-table-resize> + <div ng-show="loading" class="loading-wheel" + icon icon-id="loading" icon-size="75"></div> + + <div class="table-header" onos-sortable-header> + <table> + <tr> + <td class="number" colId="priority" sortable col-width="80px">Priority </td> + <td colId="type" sortable col-width="80px">Type </td> + <td colId="processor" sortable col-width="500px">Class </td> + <td class="number" colId="packets" sortable col-width="100px">Packets </td> + <td class="number" colId="avgMillis" sortable col-width="100px">Average (ms) </td> + </tr> + </table> + </div> + + <div class="table-body"> + <table onos-flash-changes id-prop="id"> + <tr ng-if="!tableData.length" class="no-data"> + <td colspan="5"> + No Processors found + </td> + </tr> + + <tr ng-repeat="processor in tableData track by $index" + ng-repeat-complete row-id="{{processor.id}}"> + <td class="number">{{processor.priority}}</td> + <td>{{processor.type}}</td> + <td>{{processor.processor}}</td> + <td class="number">{{processor.packets}}</td> + <td class="number">{{processor.avgMillis}}</td> + </tr> + </table> + </div> + + </div> + +</div> diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.js b/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.js new file mode 100644 index 00000000..89d717b6 --- /dev/null +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/processor/processor.js @@ -0,0 +1,58 @@ +/* + * 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 -- Packet Processor View Module + */ + +(function () { + 'use strict'; + + // injected references + var $log, $scope, $location, fs, tbs, ns; + + angular.module('ovProcessor', []) + .controller('OvProcessorCtrl', + ['$log', '$scope', '$location', + 'FnService', 'TableBuilderService', 'NavService', + + function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_) { + var params; + $log = _$log_; + $scope = _$scope_; + $location = _$location_; + fs = _fs_; + tbs = _tbs_; + ns = _ns_; + $scope.requestTip = 'Show packet requests'; + + params = $location.search(); + + tbs.buildTable({ + scope: $scope, + tag: 'processor', + query: params + }); + + $scope.nav = function (path) { + if ($scope.devId) { + ns.navTo(path); + } + }; + + $log.log('OvProcessorCtrl has been created'); + }]); +}()); diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/settings/settings.html b/framework/src/onos/web/gui/src/main/webapp/app/view/settings/settings.html index ee069d37..61081017 100644 --- a/framework/src/onos/web/gui/src/main/webapp/app/view/settings/settings.html +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/settings/settings.html @@ -17,7 +17,7 @@ <div class="table-header" onos-sortable-header> <table> <tr> - <td colId="component" sortable col-width="200px">Component </td> + <td colId="component" sortable col-width="300px">Component </td> <td colId="id" sortable>Property </td> <td colId="type" sortable col-width="70px">Type </td> <td colId="value" sortable>Value </td> diff --git a/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.js b/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.js index 21894100..42b6f4bd 100644 --- a/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.js +++ b/framework/src/onos/web/gui/src/main/webapp/app/view/topo/topo.js @@ -95,6 +95,9 @@ // and include them in the quick-help panel function mergeKeys(extra) { var _hf = actionMap._helpFormat[2]; + + ks.checkNotGlobal(extra); + extra._keyOrder.forEach(function (k) { var d = extra[k], cb = d && d.cb, |