Fix for ONOS-3678

Change-Id: I806f32c13df33f137d199618de0ad495833a5d0e
(cherry picked from commit 14fefb5e)

@@ -13,6 +13,22 @@
 
 
             <div class="separator"></div>
             <div class="separator"></div>
 
 
+            <span ng-if="brief">
+            <div class="active"
+                 icon icon-id="plus" icon-size="42"
+                 tooltip tt-msg="detailTip"
+                 ng-click="briefToggle()"> </div>
+            </span>
+
+            <span ng-if="!brief">
+            <div class="active"
+                 icon icon-id="minus" icon-size="42"
+                 tooltip tt-msg="briefTip"
+                 ng-click="briefToggle()"> </div>
+            </span>
+
+            <div class="separator"></div>
+
             <div class="active"
             <div class="active"
                  icon icon-id="deviceTable" icon-size="42"
                  icon icon-id="deviceTable" icon-size="42"
                  tooltip tt-msg="deviceTip"
                  tooltip tt-msg="deviceTip"
@@ -35,6 +51,7 @@
                  icon icon-id="meterTable" icon-size="42"
                  icon icon-id="meterTable" icon-size="42"
                  tooltip tt-msg="meterTip"
                  tooltip tt-msg="meterTip"
                  ng-click="nav('meter')"></div>
                  ng-click="nav('meter')"></div>
+
         </div>
         </div>
     </div>
     </div>
 
 
@@ -77,10 +94,10 @@
                     <td class="right">{{flow.packets}}</td>
                     <td class="right">{{flow.packets}}</td>
                     <td class="right">{{flow.bytes}}</td>
                     <td class="right">{{flow.bytes}}</td>
                 </tr>
                 </tr>
-                <tr row-id="{{flow.id}}">
-                    <td class="selector" colspan="10">{{flow.selector}}</td>
+                <tr row-id="{{flow.id}}" ng-hide="brief">
+                    <td class="selector" colspan="10" >{{flow.selector}} </td>
                 </tr>
                 </tr>
-                <tr row-id="{{flow.id}}" ng-repeat-end>
+                <tr row-id="{{flow.id}}" ng-repeat-end ng-hide="brief">
                     <td class="treatment" colspan="10">{{flow.treatment}}</td>
                     <td class="treatment" colspan="10">{{flow.treatment}}</td>
                 </tr>
                 </tr>
             </table>
             </table>

@@ -41,7 +41,9 @@
             $scope.portTip = 'Show port view for this device';
             $scope.portTip = 'Show port view for this device';
             $scope.groupTip = 'Show group view for this device';
             $scope.groupTip = 'Show group view for this device';
             $scope.meterTip = 'Show meter view for selected device';
             $scope.meterTip = 'Show meter view for selected device';
-
+            $scope.briefTip = 'Switch to brief view';
+            $scope.detailTip = 'Switch to detailed view';
+            $scope.brief = true;
             params = $location.search();
             params = $location.search();
             if (params.hasOwnProperty('devId')) {
             if (params.hasOwnProperty('devId')) {
                 $scope.devId = params['devId'];
                 $scope.devId = params['devId'];
@@ -59,6 +61,10 @@
                 }
                 }
             };
             };
 
 
+            $scope.briefToggle = function () {
+                $scope.brief = !$scope.brief;
+            };
+
             $log.log('OvFlowCtrl has been created');
             $log.log('OvFlowCtrl has been created');
         }]);
         }]);
 }());
 }());