/admin/plugins: Add progress indicators and report errors

4 files changed, 101 insertions, 53 deletions

diff --git a/src/node/hooks/express/adminplugins.js b/src/node/hooks/express/adminplugins.js
index 70ace317..bf796ee7 100644
--- a/src/node/hooks/express/adminplugins.js
+++ b/src/node/hooks/express/adminplugins.js
@@ -81,13 +81,15 @@ exports.socketio = function (hook_name, args, cb) {
 
     socket.on("install", function (plugin_name) {
       installer.install(plugin_name, function (er) {
-        socket.emit("finished:install", {error: er});
+        if(er) console.warn(er)
+        socket.emit("finished:install", {error: er? er.message : null});
       });
     });
 
     socket.on("uninstall", function (plugin_name) {
       installer.uninstall(plugin_name, function (er) {
-        socket.emit("finished:uninstall", {error: er});
+        if(er) console.warn(er)
+        socket.emit("finished:uninstall", {error: er? er.message : null});
       });
     });
   });
diff --git a/src/static/css/admin.css b/src/static/css/admin.css
index 8160ee98..d1c86ac5 100644
--- a/src/static/css/admin.css
+++ b/src/static/css/admin.css
@@ -35,7 +35,8 @@ div.menu li:last-child {
 

 div.innerwrapper {

   padding: 15px;

-  padding-left: 265px;

+  margin-left: 265px;

+  position:relative; /* Allows us to position the loading indicator relative to this div */

 }

 

 #wrapper {

@@ -121,6 +122,7 @@ table {
   border-spacing: 0;

   width: 100%;

   margin: 20px 0;

+  position:relative; /* Allows us to position the loading indicator relative to the table */

 }

 

 table thead tr {

@@ -135,13 +137,23 @@ td, th {
   display: none;

 }

 

-#progress {

+.progress {

   position: absolute;

-  bottom: 50px;

+  top: 0; left: 0; bottom:0; right:0;

+  padding: auto;

+  padding-top: 20%;

+  

+  background: rgba(255,255,255,0.85);

+  display: none;

+  /*border-radius: 7px;

+  border: 1px solid #ddd;*/

 }

 

-#progress img {

-  vertical-align: top;

+.progress * {

+  display: block;

+  margin: 0 auto;

+  text-align: center;

+  color: #999;

 }

 

 .settings {

diff --git a/src/static/js/admin/plugins.js b/src/static/js/admin/plugins.js
index 1c00bbfa..b43f26bb 100644
--- a/src/static/js/admin/plugins.js
+++ b/src/static/js/admin/plugins.js
@@ -22,6 +22,7 @@ $(document).ready(function () {
     search.searchTerm = searchTerm;
     socket.emit("search", {searchTerm: searchTerm, offset:search.offset, limit: limit, sortBy: search.sortBy, sortDir: search.sortDir});
     search.offset += limit;
+    $('#search-progress').show()
   }
   search.offset = 0;
   search.limit = 12;
@@ -59,6 +60,18 @@ $(document).ready(function () {
     })
   }
 
+  var progress = {
+    show: function(msg) {
+      $('#progress').show()
+      $('#progress .message').text(msg)
+      $(window).scrollTop(0)
+    },
+    hide: function() {
+      $('#progress').hide()
+      $('#progress .message').text('')
+    }
+  }
+
   function updateHandlers() {
     // Search
     $("#search-query").unbind('keyup').keyup(function () {
@@ -67,14 +80,18 @@ $(document).ready(function () {
 
     // update & install
     $(".do-install, .do-update").unbind('click').click(function (e) {
-      var row = $(e.target).closest("tr");
-      socket.emit("install", row.find(".name").text());
+      var row = $(e.target).closest("tr")
+        , plugin = row.find(".name").text();
+      socket.emit("install", plugin);
+      progress.show('Installing plugin '+plugin+'...')
     });
 
     // uninstall
     $(".do-uninstall").unbind('click').click(function (e) {
-      var row = $(e.target).closest("tr");
-      socket.emit("uninstall", row.find(".name").text());
+      var row = $(e.target).closest("tr")
+        , plugin = row.find(".name").text();
+      socket.emit("uninstall", plugin);
+      progress.show('Uninstalling plugin '+plugin+'...')
     });
 
     // Infinite scroll
@@ -121,16 +138,18 @@ $(document).ready(function () {
     var searchWidget = $(".search-results");
     searchWidget.find(".results *").remove();
     displayPluginList(search.results, searchWidget.find(".results"), searchWidget.find(".template tr"))
+    $('#search-progress').hide()
   });
 
   socket.on('results:installed', function (data) {
     sortPluginList(data.installed, 'name', /*ASC?*/true);
 
-    $("#installed-plugins *").remove();
     data.installed = data.installed.filter(function(plugin) {
       return plugin.name != 'ep_etherpad-lite'
     })
+    $("#installed-plugins *").remove();
     displayPluginList(data.installed, $("#installed-plugins"), $("#installed-plugin-template"));
+    progress.hide()
 
     setTimeout(function() {
       socket.emit('checkUpdates');
@@ -150,6 +169,16 @@ $(document).ready(function () {
     updateHandlers();
   })
 
+  socket.on('finished:install', function(data) {
+    if(data.error) alert('An error occured while installing the plugin. \n'+data.error)
+    socket.emit("getInstalled");
+  })
+
+  socket.on('finished:uninstall', function(data) {
+    if(data.error) alert('An error occured while uninstalling the plugin. \n'+data.error)
+    socket.emit("getInstalled");
+  })
+
   // init
   updateHandlers();
   socket.emit("getInstalled");
diff --git a/src/templates/admin/plugins.html b/src/templates/admin/plugins.html
index 5b90aeab..1e798432 100644
--- a/src/templates/admin/plugins.html
+++ b/src/templates/admin/plugins.html
@@ -28,65 +28,70 @@
           <li><a href="plugins/info">Troubleshooting information</a> </li>

           <% e.end_block(); %>

         </ul>

-        <div id="progress"><img src="../static/img/loading.gif">&nbsp;&nbsp;<span class="message"></span></div>

       </div>

 

       <div class="innerwrapper">

-      <h2>Installed plugins</h2>

-      <table>

-        <thead>

-          <tr>

-            <th>Name</th>

-            <th>Description</th>

-            <th>Version</th>

-            <td></td>

-          </tr>

-        </thead>

-        <tbody class="template">

-          <tr id="installed-plugin-template">

-            <td class="name" data-label="Name"></td>

-            <td class="description" data-label="Description"></td>

-            <td class="version" data-label="Version"></td>

-            <td class="actions">

-              <input type="button" value="Uninstall" class="do-uninstall">

-            </td>

-          </tr>

-        </tbody>

-        <tbody id="installed-plugins">

-        </tbody>

-      </table>

-

-      <div class="paged listing search-results">

-        <div class="separator"></div>

-        

-        <h2>Available plugins</h2>

-        <form>

-          <input type="text" name="search" placeholder="Search for plugins to install" id="search-query">

-        </form>

-

+        <h2>Installed plugins</h2>

         <table>

           <thead>

             <tr>

-              <th class="sort up"   data-label="name">Name</th>

-              <th class="sort none" data-label="description">Description</th>

-              <th class="sort none" data-label="Version">Version</th>

+              <th>Name</th>

+              <th>Description</th>

+              <th>Version</th>

               <td></td>

             </tr>

           </thead>

           <tbody class="template">

-            <tr>

+            <tr id="installed-plugin-template">

               <td class="name" data-label="Name"></td>

               <td class="description" data-label="Description"></td>

               <td class="version" data-label="Version"></td>

               <td class="actions">

-                <input type="button" value="Install" class="do-install">

-             </td>

+                <input type="button" value="Uninstall" class="do-uninstall">

+              </td>

             </tr>

           </tbody>

-          <tbody class="results">

+          <tbody id="installed-plugins">

           </tbody>

         </table>

-      </div>

+

+        <div class="paged listing search-results">

+          <div class="separator"></div>

+          

+          <h2>Available plugins</h2>

+          <form>

+            <input type="text" name="search" placeholder="Search for plugins to install" id="search-query">

+          </form>

+

+          <table>

+            <thead>

+              <tr>

+                <th class="sort up"   data-label="name">Name</th>

+                <th class="sort none" data-label="description">Description</th>

+                <th class="sort none" data-label="Version">Version</th>

+                <td></td>

+              </tr>

+            </thead>

+            <tbody class="template">

+              <tr>

+                <td class="name" data-label="Name"></td>

+                <td class="description" data-label="Description"></td>

+                <td class="version" data-label="Version"></td>

+                <td class="actions">

+                  <input type="button" value="Install" class="do-install">

+               </td>

+              </tr>

+            </tbody>

+            <tbody class="results">

+            </tbody>

+            <tbody>

+              <tr><td>

+                <div id="search-progress" class="progress"><img src="../static/img/loading.gif"/></div>

+              </td></tr>

+            </tbody>

+          </table>

+        </div>

+        <div id="progress" class="progress"><p><img src="../static/img/loading.gif"/></p><p><span class="message"></span></p></div>

 

       </div>

     </div>