Restyling of the plugins list on a single table Show installed plugins, upgrades and new plugins in a single table with the rendering of the actions accordingly (up-to-date, install or upgrade) Change-Id: I812c2a436ed67b0d8abd333c4b80c682baace2b0

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index ff0df76..e1d4044 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css

@@ -18,4 +18,17 @@
 
 .main {
   margin-top: 51px;
+}
+
+button.btn-xs {
+  width: 65px;
+}
+
+.label-success {
+  background-color: #888888;
+}
+
+div.top-header {
+  padding-left: 35px;
+  padding-right: 35px;
 }
\ No newline at end of file

diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 3868747..7effbee 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html

@@ -16,7 +16,7 @@
 
 <body role="document">
   <nav class="navbar navbar-inverse navbar-fixed-top">
-    <div class="container">
+    <div class="container top-header">
       <div class="navbar-header">
         <a class="navbar-brand" href="#">Gerrit Plugin Manager</a>
       </div>
@@ -24,13 +24,14 @@
   </nav>
   <div class="container main" role="main"
     ng-controller="LoadInstalledPlugins as plugins">
-    <div class="col-md-6">
-      <h2>Loaded</h2>
+    <div class="col-md-12">
       <table class="table table-striped">
         <thead>
           <tr>
             <th>Plugin Name</th>
             <th>Version</th>
+            <th>Upgrade / New Version Available</th>
+            <th>Latest Commit</th>
             <th>Actions</th>
           </tr>
         </thead>
@@ -38,38 +39,23 @@
           <tr ng-repeat="(key, prop) in plugins.list">
             <td>{{key}}</td>
             <td>{{prop.version}}</td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="col-md-6">
-      <h2>Available</h2>
-      <table class="table table-striped">
-        <thead>
-          <tr>
-            <th>Plugin Name</th>
-            <th>Version</th>
-            <th>SHA1</th>
-            <th>Install</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr id="{{key}}-{{prop.version}}"
-            ng-repeat="(key, prop) in plugins.available">
-            <td>{{key}}</td>
-            <td>{{prop.version}}</td>
+            <td>{{prop.update_version}}</td>
             <td>{{prop.sha1}}</td>
             <td>
               <h5>
                 <span id="installing-{{key}}"
-                  class="label label-default hidden">Installing</span> <span
+                  class="label label-default hidden">Installing</span>
+                <span
                   id="installed-{{key}}"
-                  class="label label-success hidden">Installed</span> <span
+                  class="label label-success {{ (prop.version != '' && prop.update_version == '') ? '':'hidden' }}">Up to date</span>
+                <span
                   id="failed-{{key}}" class="label label-warning hidden">Failed</span>
                 <button id="{{key}}" type="button"
-                  class="btn btn-xs btn-primary"
+                  class="btn btn-xs btn-primary {{ (prop.version == '' && prop.update_version != undefined) ? '':'hidden' }}"
                   ng-click="install(prop.id,prop.url)">Install</button>
+                <button id="{{key}}" type="button"
+                  class="btn btn-xs btn-primary {{ (prop.version != '' && prop.update_version != '') ? '':'hidden' }}"
+                  ng-click="install(prop.id,prop.url)">Upgrade</button>
               </h5>
             </td>
           </tr>

diff --git a/src/main/resources/static/js/plugin-manager.js b/src/main/resources/static/js/plugin-manager.js
index 5b2a695..f721d42 100644
--- a/src/main/resources/static/js/plugin-manager.js
+++ b/src/main/resources/static/js/plugin-manager.js

@@ -24,7 +24,19 @@
       $scope.refreshInstalled = function() {
         $http.get('/plugins/?all', plugins.httpConfig).then(
             function successCallback(response) {
-              plugins.list = response.data;
+
+              angular.forEach(response.data, function(plugin) {
+                plugins.list[plugin.id] = {
+                    id: plugin.id,
+                    index_url: plugin.index_url,
+                    version: plugin.version,
+                    sha1: '',
+                    url: plugin.url,
+                    update_version: ''
+                }
+              });
+
+              $scope.refreshAvailable();
             }, function errorCallback(response) {
             });
       }
@@ -32,6 +44,26 @@
       $scope.refreshAvailable = function() {
         $http.get('/plugins/plugin-manager/available', plugins.httpConfig)
             .then(function successCallback(response) {
+
+              angular.forEach(response.data, function(plugin) {
+                var currPlugin = plugins.list[plugin.id];
+
+                if(currPlugin === undefined) {
+                  currPlugin = {
+                      id: plugin.id,
+                      index_url: '',
+                      version: ''
+                  }
+                }
+
+                if(plugin.version != currPlugin.version) {
+                  currPlugin.update_version = plugin.version;
+                }
+                currPlugin.sha1 = plugin.sha1;
+                currPlugin.url = plugin.url;
+
+                plugins.list[plugin.id] = currPlugin;
+              });
               plugins.available = response.data;
             }, function errorCallback(response) {
             });
@@ -53,7 +85,6 @@
       }
 
       $scope.refreshInstalled();
-      $scope.refreshAvailable();
     });
 
 app.config(function($httpProvider) {