GUI -- Resizing tabular view refactor and minor CSS edits. App View auto-refreshes by default again.

Change-Id: I362733996c340ed9fd5d674534c29181b7015410
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 3e5cb2c..b1fe49d 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -26,24 +26,24 @@
     width: 45px;
 }
 
+.light #ov-flow tr:nth-child(6n + 1),
 .light #ov-flow tr:nth-child(6n + 2),
-.light #ov-flow tr:nth-child(6n + 3),
-.light #ov-flow tr:nth-child(6n + 4) {
+.light #ov-flow tr:nth-child(6n + 3) {
     background-color: #eee;
 }
+.light #ov-flow tr:nth-child(6n + 4),
 .light #ov-flow tr:nth-child(6n + 5),
-.light #ov-flow tr:nth-child(6n + 6),
-.light #ov-flow tr:nth-child(6n + 1) {
+.light #ov-flow tr:nth-child(6n) {
     background-color: #ddd;
 }
+.dark #ov-flow tr:nth-child(6n + 1),
 .dark #ov-flow tr:nth-child(6n + 2),
-.dark #ov-flow tr:nth-child(6n + 3),
-.dark #ov-flow tr:nth-child(6n + 4) {
+.dark #ov-flow tr:nth-child(6n + 3) {
     background-color: #444;
 }
+.dark #ov-flow tr:nth-child(6n + 4),
 .dark #ov-flow tr:nth-child(6n + 5),
-.dark #ov-flow tr:nth-child(6n + 6),
-.dark #ov-flow tr:nth-child(6n + 1) {
+.dark #ov-flow tr:nth-child(6n) {
     background-color: #333;
 }
 
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index a79e925..38059cd 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -12,7 +12,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -36,13 +36,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="10">
                         No Flows found
                     </td>
                 </tr>
 
-                <tr ng-repeat-start="flow in tableData">
+                <tr ng-repeat-start="flow in tableData track by $index">
                     <td>{{flow.id}}</td>
                     <td>{{flow.appId}}</td>
                     <td>{{flow.groupId}}</td>
@@ -54,11 +54,10 @@
                     <td>{{flow.packets}}</td>
                     <td>{{flow.bytes}}</td>
                 </tr>
-                <tr class="ignore-width">
+                <tr>
                     <td class="selector" colspan="10">{{flow.selector}}</td>
                 </tr>
-                <tr class="ignore-width"
-                    ng-repeat-end ng-repeat-done>
+                <tr ng-repeat-end>
                     <td class="treatment" colspan="10">{{flow.treatment}}</td>
                 </tr>
             </table>