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) {
