Revamp /admin/plugins

- dry up the client-side code
- use the new saner API of pluginfw/installer.js on the server
- Improve UX: allow user to infinitely scroll to display their results

src/node/hooks/express/adminplugins.js

@@ -27,48 +27,66 @@ exports.socketio = function (hook_name, args, cb) {
   io.on('connection', function (socket) {
     if (!socket.handshake.session.user || !socket.handshake.session.user.is_admin) return;
 
-    socket.on("load", function (query) {
+    socket.on("getInstalled", function (query) {
       // send currently installed plugins
-      socket.emit("installed-results", {results: plugins.plugins});
+      var installed = Object.keys(plugins.plugins).map(function(plugin) {
-      socket.emit("progress", {progress:1});
+        return plugins.plugins[plugin].package
+      })
+      socket.emit("results:installed", {installed: installed});
     });
     
-    socket.on("checkUpdates", function() {
+    socket.on("getUpdatable", function() {
-      socket.emit("progress", {progress:0, message:'Checking for plugin updates...'});
       // Check plugins for updates
-      installer.search({offset: 0, pattern: '', limit: 500}, /*maxCacheAge:*/60*10, function(data) { // hacky
+      installer.getAvailable(/*maxCacheAge:*/60*10, function(er, results) {
-        if (!data.results) return;
+        if(er) {
+          console.warn(er);
+          socket.emit("results:updatable", {updatable: {}});
+          return;
+        }
         var updatable = _(plugins.plugins).keys().filter(function(plugin) {
-          if(!data.results[plugin]) return false;
+          if(!results[plugin]) return false;
-          var latestVersion = data.results[plugin]['dist-tags'].latest
+          var latestVersion = results[plugin].version
           var currentVersion = plugins.plugins[plugin].package.version
           return semver.gt(latestVersion, currentVersion)
         });
-        socket.emit("updatable", {updatable: updatable});
+        socket.emit("results:updatable", {updatable: updatable});
-        socket.emit("progress", {progress:1});
       });
     })
+    
+    socket.on("getAvailable", function (query) {
+        installer.getAvailablePlugins(/*maxCacheAge:*/false, function (er, results) {
+          if(er) {
+            console.error(er)
+            results = {}
+          }
+          socket.emit("results:available", results);
+      });
+    });
 
     socket.on("search", function (query) {
-      socket.emit("progress", {progress:0, message:'Fetching results...'});
+      installer.search(query.searchTerm, /*maxCacheAge:*/60*10, function (er, results) {
-        installer.search(query, /*maxCacheAge:*/60*10, function (progress) {
+        if(er) {
-        if (progress.results)
+          console.error(er)
-          socket.emit("search-result", progress);
+          results = {}
-        socket.emit("progress", progress);
+        }
+        var res = Object.keys(results)
+          .slice(query.offset, query.offset+query.length)
+          .map(function(pluginName) {
+            return results[pluginName]
+          });
+        socket.emit("results:search", {results: res, query: query});
       });
     });
 
     socket.on("install", function (plugin_name) {
-      socket.emit("progress", {progress:0, message:'Downloading and installing ' + plugin_name + "..."});
+      installer.install(plugin_name, function (er) {
-      installer.install(plugin_name, function (progress) {
+        socket.emit("finished:install", {error: er});
-        socket.emit("progress", progress);
       });
     });
 
     socket.on("uninstall", function (plugin_name) {
-      socket.emit("progress", {progress:0, message:'Uninstalling ' + plugin_name + "..."});
+      installer.uninstall(plugin_name, function (er) {
-      installer.uninstall(plugin_name, function (progress) {
+        socket.emit("finished:uninstall", {error: er});
-        socket.emit("progress", progress);
       });
     });
   });

src/static/js/admin/plugins.js

@@ -12,165 +12,86 @@ $(document).ready(function () {
   //connect
   socket = io.connect(url, {resource : resource}).of("/pluginfw/installer");
 
-  $('.search-results').data('query', {
+  function search(searchTerm) {
-    pattern: '',
+    if(search.searchTerm != searchTerm) {
-    offset: 0,
+      search.offset = 0
-    limit: 12,
+      search.results = []
-  });
+      search.end = false
-
+    }
-  var doUpdate = false;
+    search.searchTerm = searchTerm;
-
+    socket.emit("search", {searchTerm: searchTerm, offset:search.offset, length: search.limit});
-  var search = function () {
+    search.offset += search.limit;
-    socket.emit("search", $('.search-results').data('query'));
-    tasks++;
   }
+  search.offset = 0
+  search.limit = 12
+  search.results = []
+  search.end = true// have we received all results already?
 
-  function updateHandlers() {
+  function displayPluginList(plugins, container, template) {
-    $("form").submit(function(){
+    plugins.forEach(function(plugin) {
-      var query = $('.search-results').data('query');
+      var row = template.clone();
-      query.pattern = $("#search-query").val();
-      query.offset = 0;
-      search();
-      return false;
-    });
-    
-    $("#search-query").unbind('keyup').keyup(function () {
-      var query = $('.search-results').data('query');
-      query.pattern = $("#search-query").val();
-      query.offset = 0;
-      search();
-    });
-
-    $(".do-install, .do-update").unbind('click').click(function (e) {
-      var row = $(e.target).closest("tr");
-      doUpdate = true;
-      socket.emit("install", row.find(".name").text());
-      tasks++;
-    });
-
-    $(".do-uninstall").unbind('click').click(function (e) {
-      var row = $(e.target).closest("tr");
-      doUpdate = true;
-      socket.emit("uninstall", row.find(".name").text());
-      tasks++;
-    });
-
-    $(".do-prev-page").unbind('click').click(function (e) {
-      var query = $('.search-results').data('query');
-      query.offset -= query.limit;
-      if (query.offset < 0) {
-        query.offset = 0;
-      }
-      search();
-    });
-    $(".do-next-page").unbind('click').click(function (e) {
-      var query = $('.search-results').data('query');
-      var total = $('.search-results').data('total');
-      if (query.offset + query.limit < total) {
-        query.offset += query.limit;
-      }
-      search();
-    });
-  }
-
-  updateHandlers();
-
-  var tasks = 0;
-  socket.on('progress', function (data) {
-    $("#progress").show();
-    $('#progress').data('progress', data.progress);
-
-    var message = "Unknown status";
-    if (data.message) {
-      message = data.message.toString();
-    }
-    if (data.error) {
-      data.progress = 1;
-    }
-    
-    $("#progress .message").html(message);
-
-    if (data.progress >= 1) {
-      tasks--;
-      if (tasks <= 0) {
-        // Hide the activity indicator once all tasks are done
-        $("#progress").hide();
-        tasks = 0;
-      }
-      
-      if (data.error) {
-        alert('An error occurred: '+data.error+' -- the server log might know more...');
-      }else {
-        if (doUpdate) {
-          doUpdate = false;
-          socket.emit("load");
-          tasks++;
-        }
-      }
-    }
-  });
-
-  socket.on('search-result', function (data) {
-    var widget=$(".search-results");
-
-    widget.data('query', data.query);
-    widget.data('total', data.total);
-
-    widget.find('.offset').html(data.query.offset);
-    if (data.query.offset + data.query.limit > data.total){
-      widget.find('.limit').html(data.total);
-    }else{
-      widget.find('.limit').html(data.query.offset + data.query.limit);
-    }
-    widget.find('.total').html(data.total);
-
-    widget.find(".results *").remove();
-    for (plugin_name in data.results) {
-      var plugin = data.results[plugin_name];
-      var row = widget.find(".template tr").clone();
       
       for (attr in plugin) {
         if(attr == "name"){ // Hack to rewrite URLS into name
-          row.find(".name").html("<a target='_blank' href='https://npmjs.org/package/"+plugin['name']+"'>"+plugin[attr]+"</a>");
+          row.find(".name").html("<a target='_blank' href='https://npmjs.org/package/"+plugin['name']+"'>"+plugin['name']+"</a>");
         }else{
           row.find("." + attr).html(plugin[attr]);
         }
       }
-      row.find(".version").html( data.results[plugin_name]['dist-tags'].latest );
+      row.find(".version").html( plugin.version );
       
-      widget.find(".results").append(row);
+      container.append(row);
-    }
+    })
-
     updateHandlers();
+  }
+
+  function updateHandlers() {
+    // Search
+    $("#search-query").unbind('keyup').keyup(function () {
+      search($("#search-query").val());
+    });
+
+    // update & install
+    $(".do-install, .do-update").unbind('click').click(function (e) {
+      var row = $(e.target).closest("tr");
+      socket.emit("install", row.find(".name").text());
+    });
+
+    // uninstall
+    $(".do-uninstall").unbind('click').click(function (e) {
+      var row = $(e.target).closest("tr");
+      socket.emit("uninstall", row.find(".name").text());
+    });
+
+    // Infinite scroll
+    $(window).unbind('scroll').scroll(function() {
+      if(search.end) return;// don't keep requesting if there are no more results
+      var top = $('.search-results .results > tr').last().offset().top
+      if($(window).scrollTop()+$(window).height() > top) search(search.searchTerm)
+    })
+  }
+
+  socket.on('results:search', function (data) {
+    console.log('got search results', data)
+    search.results = search.results.concat(data.results);
+    if(!data.results.length) search.end = true;
+    
+    var searchWidget = $(".search-results");
+    searchWidget.find(".results *").remove();
+    displayPluginList(search.results, searchWidget.find(".results"), searchWidget.find(".template tr"))
   });
 
-  socket.on('installed-results', function (data) {
+  socket.on('results:installed', function (data) {
     $("#installed-plugins *").remove();
-
+    displayPluginList(data.installed, $("#installed-plugins"), $("#installed-plugin-template"))
-    for (plugin_name in data.results) {
-      if (plugin_name == "ep_etherpad-lite") continue; // Hack...
-      var plugin = data.results[plugin_name];
-      var row = $("#installed-plugin-template").clone();
-
-      for (attr in plugin.package) {
-        if(attr == "name"){ // Hack to rewrite URLS into name
-          row.find(".name").html("<a target='_blank' href='https://npmjs.org/package/"+plugin.package['name']+"'>"+plugin.package[attr]+"</a>");
-        }else{
-          row.find("." + attr).html(plugin.package[attr]);
-        }
-      }
-      $("#installed-plugins").append(row);
-    }
-    updateHandlers();
 
     setTimeout(function() {
       socket.emit('checkUpdates');
-      tasks++;
     }, 5000)
   });
   
-  socket.on('updatable', function(data) {
+  socket.on('results:updatable', function(data) {
-    $('#installed-plugins>tr').each(function(i,tr) {
+    $('#installed-plugins > tr').each(function(i, tr) {
       var pluginName = $(tr).find('.name').text()
       
       if (data.updatable.indexOf(pluginName) >= 0) {
@@ -182,8 +103,8 @@ $(document).ready(function () {
     updateHandlers();
   })
 
-  socket.emit("load");
+  // init
-  tasks++;
+  updateHandlers();
-  
+  socket.emit("getInstalled");
-  search();
+  search('');
 });

src/templates/admin/plugins.html

@@ -86,11 +86,8 @@
           <tbody class="results">
           </tbody>
         </table>
-        <input type="button" value="<<" class="do-prev-page">
-        <span class="offset"></span>..<span class="limit"></span> of <span class="total"></span>.
-        <input type="button" value=">>" class="do-next-page">
       </div>
-      
+
       </div>
     </div>
   </body>