Simon Hunt

ONOS-3129 : GUI Intents to Topo :: part 1 - making intent table rows selectable; adding topo button.

Change-Id: Iac53411c2a5af9f093d822d49a76b3cd5117fbf1
......@@ -37,6 +37,8 @@
play: 'play',
stop: 'stop',
topo: 'topo',
refresh: 'refresh',
garbage: 'garbage',
......
......@@ -81,7 +81,7 @@ div.summary-list tr.no-data td {
}
.light div.summary-list tr.selected {
background-color: deepskyblue;
background-color: deepskyblue !important;
}
.dark div.summary-list tr.selected {
......
......@@ -47,6 +47,7 @@
resp = o.tag + 'DataResponse',
onSel = fs.isF(o.selCb),
onResp = fs.isF(o.respCb),
idKey = o.idKey || 'id',
oldTableData = [],
loaded = false,
refreshPromise, loadingPromise;
......@@ -104,7 +105,8 @@
// === selecting a row functions ----------------
function selCb($event, selRow) {
o.scope.selId = (o.scope.selId === selRow.id) ? null : selRow.id;
var selId = selRow[idKey];
o.scope.selId = (o.scope.selId === selId) ? null : selId;
onSel && onSel($event, selRow);
}
o.scope.selectCallback = selCb;
......
......@@ -23,7 +23,6 @@
}
#ov-intent div.ctrl-btns {
width: 45px;
}
.light #ov-intent tr:nth-child(6n + 1),
......
<!--
~ 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.
-->
<!-- Intent partial HTML -->
<div id="ov-intent">
<div class="tabular-header">
<h2>Intents ({{tableData.length}} total)</h2>
<div class="ctrl-btns">
<div ng-class="{active: !!selId}"
icon icon-id="topo" icon-size="36"
tooltip tt-msg="topoTip"
ng-click="showIntent()"></div>
<div class="separator"></div>
<div class="refresh" ng-class="{active: autoRefresh}"
icon icon-size="36" icon-id="refresh"
tooltip tt-msg="autoRefreshTip"
......@@ -51,6 +40,8 @@
</tr>
<tr ng-repeat-start="intent in tableData track by $index"
ng-click="selectCallback($event, intent)"
ng-class="{selected: intent.key === selId}"
ng-repeat-complete row-id="{{intent.key}}">
<td>{{intent.appId}}</td>
<td>{{intent.key}}</td>
......@@ -58,10 +49,14 @@
<td>{{intent.priority}}</td>
<td>{{intent.state}}</td>
</tr>
<tr row-id="{{intent.key}}">
<tr ng-click="selectCallback($event, intent)"
ng-class="{selected: intent.key === selId}"
row-id="{{intent.key}}">
<td class="resources" colspan="5">{{intent.resources}}</td>
</tr>
<tr row-id="{{intent.key}}" ng-repeat-end>
<tr ng-click="selectCallback($event, intent)"
ng-class="{selected: intent.key === selId}"
row-id="{{intent.key}}" ng-repeat-end>
<td class="details" colspan="5">{{intent.details}}</td>
</tr>
</table>
......
......@@ -25,12 +25,26 @@
.controller('OvIntentCtrl',
['$log', '$scope', 'TableBuilderService',
function ($log, $scope, tbs) {
tbs.buildTable({
scope: $scope,
tag: 'intent'
});
$log.log('OvIntentCtrl has been created');
}]);
function ($log, $scope, tbs) {
function selCb($event, row) {
$log.debug('Got a click on:', row);
}
tbs.buildTable({
scope: $scope,
tag: 'intent',
selCb: selCb,
idKey: 'key'
});
$scope.topoTip = 'Show selected intent on topology view';
$scope.showIntent = function () {
// TODO: navigate to topology view with selected intent context
$log.debug("+++ showIntent +++", $scope.selId);
};
$log.log('OvIntentCtrl has been created');
}]);
}());
......