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',
         play: 'play',
         stop: 'stop',
         stop: 'stop',
 
 
+        topo: 'topo',
+
         refresh: 'refresh',
         refresh: 'refresh',
         garbage: 'garbage',
         garbage: 'garbage',
 
 

@@ -81,7 +81,7 @@ div.summary-list tr.no-data td {
 }
 }
 
 
 .light div.summary-list tr.selected {
 .light div.summary-list tr.selected {
-    background-color: deepskyblue;
+    background-color: deepskyblue !important;
 }
 }
 
 
 .dark div.summary-list tr.selected {
 .dark div.summary-list tr.selected {

@@ -47,6 +47,7 @@
             resp = o.tag + 'DataResponse',
             resp = o.tag + 'DataResponse',
             onSel = fs.isF(o.selCb),
             onSel = fs.isF(o.selCb),
             onResp = fs.isF(o.respCb),
             onResp = fs.isF(o.respCb),
+            idKey = o.idKey || 'id',
             oldTableData = [],
             oldTableData = [],
             loaded = false,
             loaded = false,
             refreshPromise, loadingPromise;
             refreshPromise, loadingPromise;
@@ -104,7 +105,8 @@
 
 
         // === selecting a row functions ----------------
         // === selecting a row functions ----------------
         function selCb($event, selRow) {
         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);
             onSel && onSel($event, selRow);
         }
         }
         o.scope.selectCallback = selCb;
         o.scope.selectCallback = selCb;

@@ -23,7 +23,6 @@
 }
 }
 
 
 #ov-intent div.ctrl-btns {
 #ov-intent div.ctrl-btns {
-    width: 45px;
 }
 }
 
 
 .light #ov-intent tr:nth-child(6n + 1),
 .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 -->
 <!-- Intent partial HTML -->
 <div id="ov-intent">
 <div id="ov-intent">
     <div class="tabular-header">
     <div class="tabular-header">
         <h2>Intents ({{tableData.length}} total)</h2>
         <h2>Intents ({{tableData.length}} total)</h2>
         <div class="ctrl-btns">
         <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}"
             <div class="refresh" ng-class="{active: autoRefresh}"
                  icon icon-size="36" icon-id="refresh"
                  icon icon-size="36" icon-id="refresh"
                  tooltip tt-msg="autoRefreshTip"
                  tooltip tt-msg="autoRefreshTip"
@@ -51,6 +40,8 @@
                 </tr>
                 </tr>
 
 
                 <tr ng-repeat-start="intent in tableData track by $index"
                 <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}}">
                     ng-repeat-complete row-id="{{intent.key}}">
                     <td>{{intent.appId}}</td>
                     <td>{{intent.appId}}</td>
                     <td>{{intent.key}}</td>
                     <td>{{intent.key}}</td>
@@ -58,10 +49,14 @@
                     <td>{{intent.priority}}</td>
                     <td>{{intent.priority}}</td>
                     <td>{{intent.state}}</td>
                     <td>{{intent.state}}</td>
                 </tr>
                 </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>
                     <td class="resources" colspan="5">{{intent.resources}}</td>
                 </tr>
                 </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>
                     <td class="details" colspan="5">{{intent.details}}</td>
                 </tr>
                 </tr>
             </table>
             </table>

@@ -26,11 +26,25 @@
         ['$log', '$scope', 'TableBuilderService',
         ['$log', '$scope', 'TableBuilderService',
 
 
         function ($log, $scope, tbs) {
         function ($log, $scope, tbs) {
+
+            function selCb($event, row) {
+                $log.debug('Got a click on:', row);
+            }
+
             tbs.buildTable({
             tbs.buildTable({
                 scope: $scope,
                 scope: $scope,
-                    tag: 'intent'
+                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');
             $log.log('OvIntentCtrl has been created');
         }]);
         }]);
 }());
 }());