kallithea Changeset - 6c3bda995a88

Changeset - 6c3bda995a88

Parent rev.

Child rev.

[Not reviewed]

default

0 5 0

domruf - 8 years ago 2017-08-06 12:36:57
dominikruf@gmail.com

js: use ajax requests for select2 autocomplete

When you have a big user base, with thousends of users, always using the whole
dataset makes the UI slow.

This will replace kallithea/model/repo.py get_users_js and get_user_groups_js
which were used to inline the full list of users and groups in the document.
Instead, it will expose a json service for doing the completion.

When using the autocomplete, there might be multiple ajax requests, but tests
with a userbase > 9000 showed no problems.
And keep in mind, that although we now make multiple requests (one for every
character) that
- the autocomplete is not used that often
- the requests are quite cheap
- most importanly, we no longer need to calculate the user list/group list if
the user doesn't use the autocomplete

Users and groups are still passed as parameters to the javascript functions -
they will be removed later.

5 files changed with 150 insertions and 33 deletions:

kallithea/config/routing.py

kallithea/controllers/home.py

kallithea/public/js/base.js

kallithea/templates/base/root.html

kallithea/tests/functional/test_home.py

0 comments (0 inline, 0 general)

kallithea/config/routing.py

➞

Show inline comments

@@ @@ -90,24 +90,26 @@ def make_map(config): @@
     def check_int(environ, match_dict):
         return match_dict.get('id').isdigit()
     #==========================================================================
     # CUSTOM ROUTES HERE
     #==========================================================================
     # MAIN PAGE
     rmap.connect('home', '/', controller='home', action='index')
     rmap.connect('about', '/about', controller='home', action='about')
     rmap.connect('repo_switcher_data', '/_repos', controller='home',
                  action='repo_switcher_data')
     rmap.connect('users_and_groups_data', '/_users_and_groups', controller='home',
                  action='users_and_groups_data')
     rmap.connect('rst_help',
                  "http://docutils.sourceforge.net/docs/user/rst/quickref.html",
                  _static=True)
     rmap.connect('kallithea_project_url', "https://kallithea-scm.org/", _static=True)
     rmap.connect('issues_url', 'https://bitbucket.org/conservancy/kallithea/issues', _static=True)
     # ADMIN REPOSITORY ROUTES
     with rmap.submapper(path_prefix=ADMIN_PREFIX,
                         controller='admin/repos') as m:
         m.connect("repos", "/repos",
                   action="create", conditions=dict(method=["POST"]))

kallithea/controllers/home.py

➞

Show inline comments

@@ @@ -23,31 +23,33 @@ Original author and date, and relevant c @@
 :author: marcink
 :copyright: (c) 2013 RhodeCode GmbH, and others.
 :license: GPLv3, see LICENSE.md for more details.
 """
 import logging
 from tg import tmpl_context as c, request
 from tg.i18n import ugettext as _
 from webob.exc import HTTPBadRequest
 from sqlalchemy.sql.expression import func
 from sqlalchemy import or_, and_
 from kallithea.lib.utils import conditional_cache
 from kallithea.lib.auth import LoginRequired, HasRepoPermissionLevelDecorator
 from kallithea.lib.base import BaseController, render, jsonify
 from kallithea.model.db import Repository, RepoGroup
 from kallithea.lib import helpers as h
 from kallithea.model.db import Repository, RepoGroup, User, UserGroup
 from kallithea.model.repo import RepoModel
+from kallithea.model.scm import UserGroupList
 log = logging.getLogger(__name__)
 class HomeController(BaseController):
     def about(self):
         return render('/about.html')
     @LoginRequired()
     def index(self):
         c.group = None
@@ @@ -133,12 +135,78 @@ class HomeController(BaseController): @@
             })
         _bookmarks = repo.bookmarks.items()
         if _bookmarks:
             res.append({
                 'text': _('Bookmark'),
                 'children': [{'id': rev, 'text': name, 'type': 'book'} for name, rev in _bookmarks]
             })
         data = {
             'more': False,
             'results': res
+        }
         return data
     @LoginRequired()
     @jsonify
     def users_and_groups_data(self):
         """
         Returns 'results' with a list of users and user groups.
         You can either use the 'key' GET parameter to get a user by providing
         the exact user key or you can use the 'query' parameter to
         search for users by user key, first name and last name.
         'types' defaults to just 'users' but can be set to 'users,groups' to
         get both users and groups.
         No more than 500 results (of each kind) will be returned.
         """
         types = request.GET.get('types', 'users').split(',')
         key = request.GET.get('key', '')
         query = request.GET.get('query', '')
         results = []
         if 'users' in types:
             user_list = []
             if key:
                 u = User.get_by_username(key)
                 if u:
                     user_list = [u]
             elif query:
                 user_list = User.query() \
                     .filter(User.is_default_user == False) \
                     .filter(User.active == True) \
                     .filter(or_(
                         User.username.like("%%"+query+"%%"),
                         User.name.like("%%"+query+"%%"),
                         User.lastname.like("%%"+query+"%%"),
                     )) \
                     .order_by(User.username) \
                     .limit(500) \
                     .all()
             for u in user_list:
                 results.append({
                     'type': 'user',
                     'id': u.user_id,
                     'nname': u.username,
                     'fname': u.name,
                     'lname': u.lastname,
                     'gravatar_lnk': h.gravatar_url(u.email, size=28, default='default'),
                     'gravatar_size': 14,
                 })
         if 'groups' in types:
             grp_list = []
             if key:
                 grp = UserGroup.get_by_group_name(key)
                 if grp:
                     grp_list = [grp]
             elif query:
                 grp_list = UserGroup.query() \
                     .filter(UserGroup.users_group_name.like("%%"+query+"%%")) \
                     .filter(UserGroup.users_group_active == True) \
                     .order_by(UserGroup.users_group_name) \
                     .limit(500) \
                     .all()
             for g in UserGroupList(grp_list, perm_level='read'):
                 results.append({
                     'type': 'group',
                     'id': g.users_group_id,
                     'grname': g.users_group_name,
                 })
         return dict(results=results)

kallithea/public/js/base.js

➞

Show inline comments

@@ @@ -1085,95 +1085,110 @@ var autocompleteGravatar = function(res, @@
     return '<div class="ac-container-wrap">{0}{1}</div>'.format(elem, res);
+}
 // Custom formatter to highlight the matching letters
 var autocompleteFormatter = function (oResultData, sQuery, sResultMatch) {
     var query;
     if (sQuery && sQuery.toLowerCase) // YAHOO AutoComplete
         query = sQuery.toLowerCase();
     else if (sResultMatch && sResultMatch.term) // select2 - parameter names doesn't match
         query = sResultMatch.term.toLowerCase();
     // group
-    if (oResultData.grname) {
+    if (oResultData.type == "group") {
         return autocompleteGravatar(
             "{0}: {1}".format(
                 _TM['Group'],
                 autocompleteHighlightMatch(oResultData.grname, query)),
             null, null, true);
+    }
     // users
     if (oResultData.nname) {
         var displayname = autocompleteHighlightMatch(oResultData.nname, query);
         if (oResultData.fname && oResultData.lname) {
             displayname = "{0} {1} ({2})".format(
                 autocompleteHighlightMatch(oResultData.fname, query),
                 autocompleteHighlightMatch(oResultData.lname, query),
                 displayname);
+        }
         return autocompleteGravatar(displayname, oResultData.gravatar_lnk, oResultData.gravatar_size);
+    }
     return '';
 };
 var SimpleUserAutoComplete = function ($inputElement, users_list) {
     $inputElement.select2(
+    {
 var SimpleUserAutoComplete = function ($inputElement) {
     $inputElement.select2({
         formatInputTooShort: $inputElement.attr('placeholder'),
         initSelection : function (element, callback) {
             var val = $inputElement.val();
             $.each(users_list, function(i, user) {
                 if (user.nname == val)
                     callback(user);
             $.ajax({
                 url: pyroutes.url('users_and_groups_data'),
                 dataType: 'json',
                 data: {
                     key: element.val()
                 },
                 success: function(data){
                   callback(data.results[0]);
+                }
             });
         },
         minimumInputLength: 1,
         query: function (query) {
             query.callback({results: autocompleteMatchUsers(query.term, users_list)});
         ajax: {
             url: pyroutes.url('users_and_groups_data'),
             dataType: 'json',
             data: function(term, page){
               return {
                 query: term
               };
             },
             results: function (data, page){
               return data;
             },
             cache: true
         },
         formatSelection: autocompleteFormatter,
         formatResult: autocompleteFormatter,
         escapeMarkup: function(m) { return m; },
         id: function(item) { return item.nname; },
     });
+}
-var MembersAutoComplete = function ($inputElement, $typeElement, users_list, groups_list) {
 var MembersAutoComplete = function ($inputElement, $typeElement) {
     var matchAll = function (sQuery) {
         var u = autocompleteMatchUsers(sQuery, users_list);
         var g = autocompleteMatchGroups(sQuery, groups_list);
         return u.concat(g);
     };
     $inputElement.select2(
+    {
     $inputElement.select2({
         placeholder: $inputElement.attr('placeholder'),
         minimumInputLength: 1,
         query: function (query) {
             query.callback({results: matchAll(query.term)});
         ajax: {
             url: pyroutes.url('users_and_groups_data'),
             dataType: 'json',
             data: function(term, page){
               return {
                 query: term,
                 types: 'users,groups'
               };
             },
             results: function (data, page){
               return data;
             },
             cache: true
         },
         formatSelection: autocompleteFormatter,
         formatResult: autocompleteFormatter,
         escapeMarkup: function(m) { return m; },
         id: function(item) { return item.type == 'user' ? item.nname : item.grname },
     }).on("select2-selecting", function(e) {
         // e.choice.id is automatically used as selection value - just set the type of the selection
         if (e.choice.nname != undefined) {
             $typeElement.val('user');
         } else {
             $typeElement.val('users_group');
+        }
         $typeElement.val(e.choice.type);
     });
+}
 var MentionsAutoComplete = function ($inputElement, users_list) {
     var $container = $('<div/>').insertAfter($inputElement);
     var matchUsers = function (sQuery) {
             // use the search string from $inputElement instead of sQuery
             if(!$container.data('search')){
                 // return empty list so the input list isn't shown
                 return []
+            }
@@ @@ -1283,59 +1298,69 @@ var addReviewMember = function(id,fname, @@
         $('#review_members').append(element);
+    }
+}
 var removeReviewMember = function(reviewer_id, repo_name, pull_request_id){
     var $li = $('#reviewer_{0}'.format(reviewer_id));
     $li.find('div div').css("text-decoration", "line-through");
     $li.find('input').prop('name', 'review_members_removed');
     $li.find('.reviewer_member_remove').replaceWith('&nbsp;(remove not saved)');
+}
 /* activate auto completion of users as PR reviewers */
-var PullRequestAutoComplete = function ($inputElement, users_list) {
 var PullRequestAutoComplete = function ($inputElement) {
     $inputElement.select2(
+    {
         placeholder: $inputElement.attr('placeholder'),
         minimumInputLength: 1,
         query: function (query) {
             query.callback({results: autocompleteMatchUsers(query.term, users_list)});
         ajax: {
             url: pyroutes.url('users_and_groups_data'),
             dataType: 'json',
             data: function(term, page){
               return {
                 query: term
               };
             },
             results: function (data, page){
               return data;
             },
             cache: true
         },
         formatSelection: autocompleteFormatter,
         formatResult: autocompleteFormatter,
         escapeMarkup: function(m) { return m; },
     }).on("select2-selecting", function(e) {
         addReviewMember(e.choice.id, e.choice.fname, e.choice.lname, e.choice.nname,
                         e.choice.gravatar_lnk, e.choice.gravatar_size);
         $inputElement.select2("close");
         e.preventDefault();
     });
+}
-function addPermAction(perm_type, users_list, groups_list) {
 function addPermAction(perm_type) {
     var template =
         '<td><input type="radio" value="{1}.none" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td><input type="radio" value="{1}.read" checked="checked" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td><input type="radio" value="{1}.write" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td><input type="radio" value="{1}.admin" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +
         '<td>' +
                 '<input class="form-control" id="perm_new_member_name_{0}" name="perm_new_member_name_{0}" value="" type="text" placeholder="{2}">' +
                 '<input id="perm_new_member_type_{0}" name="perm_new_member_type_{0}" value="" type="hidden">' +
         '</td>' +
         '<td></td>';
     var $last_node = $('.last_new_member').last(); // empty tr between last and add
     var next_id = $('.new_members').length;
     $last_node.before($('<tr class="new_members">').append(template.format(next_id, perm_type, _TM['Type name of user or member to grant permission'])));
-    MembersAutoComplete($("#perm_new_member_name_"+next_id), $("#perm_new_member_type_"+next_id), users_list, groups_list);
     MembersAutoComplete($("#perm_new_member_name_"+next_id), $("#perm_new_member_type_"+next_id));
+}
 function ajaxActionRevokePermission(url, obj_id, obj_type, field_id, extra_data) {
     var success = function (o) {
             $('#' + field_id).remove();
         };
     var failure = function (o) {
             alert(_TM['Failed to revoke permission'] + ": " + o.status);
         };
     var query_params = {};
     // put extra data into POST
     if (extra_data !== undefined && (typeof extra_data === 'object')){

kallithea/templates/base/root.html

➞

Show inline comments

@@ @@ -97,24 +97,25 @@ @@
               pyroutes.register('summary_home', ${h.js(h.url('summary_home', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('changelog_home', ${h.js(h.url('changelog_home', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('files_home', ${h.js(h.url('files_home', repo_name='%(repo_name)s',revision='%(revision)s',f_path='%(f_path)s'))}, ['repo_name', 'revision', 'f_path']);
               pyroutes.register('edit_repo', ${h.js(h.url('edit_repo', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('edit_repo_perms', ${h.js(h.url('edit_repo_perms', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('pullrequest_home', ${h.js(h.url('pullrequest_home', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('toggle_following', ${h.js(h.url('toggle_following'))});
               pyroutes.register('changeset_info', ${h.js(h.url('changeset_info', repo_name='%(repo_name)s', revision='%(revision)s'))}, ['repo_name', 'revision']);
               pyroutes.register('changeset_home', ${h.js(h.url('changeset_home', repo_name='%(repo_name)s', revision='%(revision)s'))}, ['repo_name', 'revision']);
               pyroutes.register('repo_size', ${h.js(h.url('repo_size', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('repo_refs_data', ${h.js(h.url('repo_refs_data', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('users_and_groups_data', ${h.js(h.url('users_and_groups_data'))}, []);
              });
         </script>
         <%block name="head_extra"/>
     </head>
     <body>
       <nav class="navbar navbar-inverse">
           <div class="navbar-header" id="logo">
             <a class="navbar-brand" href="${h.url('home')}">
                 <img class="pull-left" src="${h.url('/images/kallithea-logo.svg')}" alt="Kallithea"/>
                   %if c.site_name:
                     <span class="branding">${c.site_name}</span>

kallithea/tests/functional/test_home.py

➞

Show inline comments

 # -*- coding: utf-8 -*-
 import json
 from kallithea.tests.base import *
 from kallithea.tests.fixture import Fixture
 from kallithea.model.meta import Session
 from kallithea.model.db import Repository
 from kallithea.model.repo import RepoModel
 from kallithea.model.repo_group import RepoGroupModel
 fixture = Fixture()
 class TestHomeController(TestController):
@@ @@ -52,12 +55,30 @@ class TestHomeController(TestController) @@
     def test_index_page_on_groups(self):
         self.log_user()
         gr = fixture.create_repo_group(u'gr1')
         fixture.create_repo(name=u'gr1/repo_in_group', repo_group=gr)
         response = self.app.get(url('repos_group_home', group_name=u'gr1'))
         try:
             response.mustcontain(u"gr1/repo_in_group")
         finally:
             RepoModel().delete(u'gr1/repo_in_group')
             RepoGroupModel().delete(repo_group=u'gr1', force_delete=True)
             Session().commit()
     def test_users_and_groups_data(self):
         fixture.create_user('evil', firstname=u'D\'o\'ct"o"r', lastname=u'Évíl')
         fixture.create_user_group(u'grrrr', user_group_description=u"Groüp")
         response = self.app.get(url('users_and_groups_data', query=u'evi'))
         result = json.loads(response.body)['results']
         assert result[0].get('fname') == u'D\'o\'ct"o"r'
         assert result[0].get('lname') == u'Évíl'
         response = self.app.get(url('users_and_groups_data', key=u'evil'))
         result = json.loads(response.body)['results']
         assert result[0].get('fname') == u'D\'o\'ct"o"r'
         assert result[0].get('lname') == u'Évíl'
         response = self.app.get(url('users_and_groups_data', query=u'rrrr'))
         result = json.loads(response.body)['results']
         assert not result
         response = self.app.get(url('users_and_groups_data', types='users,groups', query=u'rrrr'))
         result = json.loads(response.body)['results']
         assert result[0].get('grname') == u'grrrr'

0 comments (0 inline, 0 general)