ONOS-1783 - GUI -- Refresh buttons for tabular views added. Minor table.js refactor.

Change-Id: Iee6c65fa8477b367e40a556c3c820ca454601a5f
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index a44b219..c2d61cc 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -23,59 +23,11 @@
 }
 
 #ov-app div.ctrl-btns {
-    display:inline-block;
-    float: right;
-    width: 200px;
-    height: 44px;
-    margin-right: 24px;
-    margin-top: 7px;
+    width: 290px;
 }
 
-div.ctrl-btns div {
-    display: inline-block;
-    padding: 4px;
-    cursor: pointer;
+#ov-app div.ctrl-btns div.separator  {
+    cursor: auto;
+    width: 24px;
+    border: none;
 }
-
-
-/* Inactive */
-.light .ctrl-btns div g.icon rect,
-.light .ctrl-btns div:hover g.icon rect {
-    fill: #eee;
-}
-.dark .ctrl-btns div g.icon rect,
-.dark .ctrl-btns div:hover g.icon rect {
-    fill: #222;
-}
-
-.light .ctrl-btns div g.icon use {
-    fill: #ddd;
-}
-.dark .ctrl-btns div g.icon use {
-    fill: #333;
-}
-
-/* Active hover */
-.light .ctrl-btns div.active:hover g.icon rect {
-    fill: #800;
-}
-
-.dark .ctrl-btns div.active:hover g.icon rect {
-    fill: #CE5650;
-}
-
-/* Active */
-.light .ctrl-btns div.active g.icon use {
-    fill: #fff;
-}
-.dark .ctrl-btns div.active g.icon use {
-    fill: #eee;
-}
-
-.light .ctrl-btns div.active g.icon rect {
-    fill: #bbb;
-}
-.dark .ctrl-btns div.active g.icon rect {
-    fill: #444;
-}
-
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index e1e1647..01ab4bc 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -3,6 +3,10 @@
     <div class="tabular-header">
         <h2>Applications ({{ctrl.tableData.length}} total)</h2>
         <div class="ctrl-btns">
+            <div class="refresh active"
+                 icon icon-size="36" icon-id="crown"
+                 ng-click="refresh()"></div>
+            <div class="separator"></div>
             <div id="app-install"    icon icon-size="36" icon-id="plus" class="active"></div>
             <div id="app-activate"   icon icon-size="36" icon-id="play"></div>
             <div id="app-deactivate" icon icon-size="36" icon-id="stop"></div>
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index 236099d..d0b561b 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -25,9 +25,9 @@
 
     angular.module('ovApp', [])
     .controller('OvAppCtrl',
-        ['$log', '$scope', 'TableBuilderService', 'WebSocketService',
+        ['$log', '$scope', 'TableService', 'TableBuilderService', 'WebSocketService',
 
-    function ($log, $scope, tbs, wss) {
+    function ($log, $scope, ts, tbs, wss) {
         function selCb($event, row) {
             selRow = angular.element($event.currentTarget);
             selection = row;
@@ -45,6 +45,12 @@
             document.getElementById('file').dispatchEvent(evt);
         });
 
+        $scope.refresh = function () {
+            $log.debug('Refreshing application page');
+            ts.resetSortIcons();
+            $scope.sortCallback();
+        };
+
         function appAction(action) {
             if (selection) {
                 $log.debug('Initiating uninstall of', selection);