ONOS-3129 : GUI Intents to Topo :: part 1 - making intent table rows selectable; adding topo button.
Change-Id: Iac53411c2a5af9f093d822d49a76b3cd5117fbf1
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 15b44bc..1253636 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -37,6 +37,8 @@
play: 'play',
stop: 'stop',
+ topo: 'topo',
+
refresh: 'refresh',
garbage: 'garbage',
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
index 18b81ba..356ac0f 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -81,7 +81,7 @@
}
.light div.summary-list tr.selected {
- background-color: deepskyblue;
+ background-color: deepskyblue !important;
}
.dark div.summary-list tr.selected {
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 24161bb..6a5ffb1 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
@@ -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;
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.css b/web/gui/src/main/webapp/app/view/intent/intent.css
index ed9cd48..dfa50c3 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent.css
@@ -23,7 +23,6 @@
}
#ov-intent div.ctrl-btns {
- width: 45px;
}
.light #ov-intent tr:nth-child(6n + 1),
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.html b/web/gui/src/main/webapp/app/view/intent/intent.html
index 4883bee..98aa565 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -1,24 +1,13 @@
-<!--
- ~ 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>
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.js b/web/gui/src/main/webapp/app/view/intent/intent.js
index 5810f34..cec9062 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.js
+++ b/web/gui/src/main/webapp/app/view/intent/intent.js
@@ -25,12 +25,26 @@
.controller('OvIntentCtrl',
['$log', '$scope', 'TableBuilderService',
- function ($log, $scope, tbs) {
- tbs.buildTable({
- scope: $scope,
- tag: 'intent'
- });
+ function ($log, $scope, tbs) {
- $log.log('OvIntentCtrl has been created');
- }]);
+ 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');
+ }]);
}());