[CDSK-969] Improve Katana-UI for many projects

master/buildbot/VERSION

@@ -1 +1 @@
-1525251296
+1526466750

master/buildbot/status/web/status_json.py

@@ -22,6 +22,7 @@
 import time
 
 import jsonschema
+from operator import attrgetter
 from twisted.python import log
 from twisted.internet import defer
 from twisted.web import html, resource, server
@@ -950,10 +951,27 @@ class ProjectsJsonResource(JsonResource):
 
     def __init__(self, status):
         JsonResource.__init__(self, status)
+        self.putChild('list', ProjectsListJsonResource(status))
         for project_name, project_status in status.getProjects().iteritems():
             self.putChild(project_name, SingleProjectJsonResource(status, project_status))
 
 
+class ProjectsListJsonResource(JsonResource):
+    help = """List the registered projects with sorting by priority and name"""
+    pageTitle = 'Projects'
+
+    def __init__(self, status):
+        JsonResource.__init__(self, status)
+        self.status = status
+
+    def asDict(self, request):
+        projects = sorted(
+            self.status.getProjects().values(),
+            key=attrgetter('priority', 'name'),
+        )
+        return map(lambda project: project.asDict(), projects)
+
+
 class LatestRevisionResource(JsonResource):
 
     def __init__(self, status, project_status):

master/buildbot/test/unit/test_status_web_status_json.py

@@ -1074,3 +1074,85 @@ def test_asDict_for_unknown_user(self, prepare_mybuilds):
         builds = yield self.my_builds_json_resource.asDict(self.request)
 
         self.assertEqual(builds, {'error': 'User "wolf" is unknown'})
+
+
+class TestProjectsListJsonResource(unittest.TestCase):
+    def setUp(self):
+        self.request = mock.Mock()
+
+    def test_project_lists_return_one_project(self):
+        expected_projects = [
+            {'name': 'Katana'},
+        ]
+
+        project = ProjectConfig(name="Katana", codebases=[])
+
+        master = fakemaster.make_master(wantDb=True, testcase=self)
+        master.getProjects = lambda: {'Katana': project}
+        master_status = setUpFakeMasterStatus(master)
+
+        project_list_json_resource = status_json.ProjectsListJsonResource(master_status)
+
+        projects = project_list_json_resource.asDict(self.request)
+
+        self.assertEqual(projects, expected_projects)
+
+    def test_project_lists_return_multiple_project(self):
+        expected_projects = [
+            {'name': 'ProjectA'},
+            {'name': 'ProjectB'},
+            {'name': 'ProjectC'},
+        ]
+
+        project_a = ProjectConfig(name="ProjectA", codebases=[])
+        project_b = ProjectConfig(name="ProjectB", codebases=[])
+        project_c = ProjectConfig(name="ProjectC", codebases=[])
+
+        master = fakemaster.make_master(wantDb=True, testcase=self)
+        master.getProjects = lambda: {
+            'ProjectA': project_a,
+            'ProjectB': project_b,
+            'ProjectC': project_c,
+        }
+        master_status = setUpFakeMasterStatus(master)
+        project_list_json_resource = status_json.ProjectsListJsonResource(master_status)
+
+        projects = project_list_json_resource.asDict(self.request)
+
+        self.assertEqual(projects, expected_projects)
+
+    def test_project_lists_return_multiple_project_with_priority(self):
+        expected_projects = [
+            {'name': 'ProjectB'},
+            {'name': 'ProjectC'},
+            {'name': 'ProjectA'},
+        ]
+
+        project_a = ProjectConfig(name="ProjectA", codebases=[], priority=10)
+        project_b = ProjectConfig(name="ProjectB", codebases=[], priority=1)
+        project_c = ProjectConfig(name="ProjectC", codebases=[], priority=5)
+
+        master = fakemaster.make_master(wantDb=True, testcase=self)
+        master.getProjects = lambda: {
+            'ProjectA': project_a,
+            'ProjectB': project_b,
+            'ProjectC': project_c,
+        }
+        master_status = setUpFakeMasterStatus(master)
+        project_list_json_resource = status_json.ProjectsListJsonResource(master_status)
+
+        projects = project_list_json_resource.asDict(self.request)
+
+        self.assertEqual(projects, expected_projects)
+
+    def test_project_lists_return_empty_list_when_no_project_available(self):
+        expected_projects = []
+
+        master = fakemaster.make_master(wantDb=True, testcase=self)
+        master.getProjects = lambda: {}
+        master_status = setUpFakeMasterStatus(master)
+        project_list_json_resource = status_json.ProjectsListJsonResource(master_status)
+
+        projects = project_list_json_resource.asDict(self.request)
+
+        self.assertEqual(projects, expected_projects)

www/script/project/ui/dropdown.js

@@ -1,7 +1,9 @@
 /*global define, jQuery*/
-define(['jquery', 'screensize'], function ($, screenSize) {
-
+define(function (require) {
     "use strict";
+    var $ = require('jquery'),
+        screenSize = require('screensize'),
+        hb = require('project/handlebars-extend');
 
     // Extend our jquery object with dropdown widget
     (function ($) {
@@ -159,12 +161,15 @@ define(['jquery', 'screensize'], function ($, screenSize) {
 
     return {
         init: function () {
-
-            var mobileHTML,
-                desktopHTML;
+            var allProjects;
+            var visibleProjects;
+            var page = 0;
+            var maxPage = 0;
+            var maxShowedItems = 10;
 
             $("#projectDropdown").dropdown({
-                url: "/projects",
+                url: "/json/projects/list",
+                title: "<h3>Project list</h3>",
                 beforeCreate: function ($elem) {
                     $("#preloader").preloader("showPreloader");
                 },
@@ -175,45 +180,88 @@ define(['jquery', 'screensize'], function ($, screenSize) {
                     });
                 },
                 onResponse: function ($elem, $dropdown, response) {
-                    if (desktopHTML === undefined || mobileHTML === undefined) {
-                        //Cache desktop HTML
-                        desktopHTML = $(response).find('.tablesorter-js');
-
-
-                        var fw = $(response).find('.scLink');
-                        mobileHTML = $('<ul/>').addClass('submenu list-unstyled');
-                        $(fw).each(function () {
-                            var scLink = $(this).attr('data-sc');
-                            $(this).attr('href', scLink);
-                            var $li = $('<li/>').append($(this));
-                            mobileHTML.append($li);
-                        });
-
-                        $(desktopHTML, mobileHTML).find("a").each(function () {
-                            var scLink = $(this).attr('data-sc');
-                            $(this).attr('href', scLink);
-                        });
-                    }
+                    var self = this;
+                    allProjects = response.map(function(item) {
+                        return item.name;
+                    });
+                    maxPage = allProjects.length / maxShowedItems;
+                    var html = hb.projectListDropdown();
+                    var projectList = hb.projectList({projects: allProjects});
+                    $dropdown.append(html);
+                    $dropdown.append(projectList);
 
+                    var $body = $('body');
+                    $body.on('keyup', '#project-list', function() {
+                        page = 0;
+                        self.updateProject($(this).val());
+                    });
+                    $body.on('click', '#prev-projects', function(e) {
+                        e.preventDefault();
+                        page--;
+                        self.updateProject($('#project-list').val());
+                    });
+                    $body.on('click', '#next-projects', function(e) {
+                        e.preventDefault();
+                        page++;
+                        self.updateProject($('#project-list').val());
+                    });
                     return true;
                 },
-                beforeShow: function ($elem, $dropdown) {
-                    if (screenSize.isMediumScreen()) {
-                        $dropdown.append(desktopHTML);
-                    } else {
-                        $elem.append(mobileHTML);
-                    }
-                },
                 onShow: function ($elem, $dropdown) {
                     if (!screenSize.isMediumScreen()) {
                         $dropdown.hide();
                     }
+                    this.updatePagination();
+                },
+                onHide: function($elem, $dropdown) {
+                    $('#project-list').val('');
+                    page = 0;
+                    visibleProjects = allProjects;
                 },
-                onHide: function ($elem, $dropdown) {
-                    $elem.find("ul").remove();
+                beforeShow: function() {
+                    this.updateProject("");
                 },
                 animate: function () {
                     return screenSize.isMediumScreen();
+                },
+                updatePagination: function() {
+                    if (page === 0) {
+                        $('#prev-projects').hide();
+                    } else {
+                        $('#prev-projects').show();
+                    }
+                    if (visibleProjects.length < maxShowedItems) {
+                        $('#next-projects').hide();
+                    } else {
+                        $('#next-projects').show();
+                    }
+                },
+                updateProject: function(text) {
+                    text = text.toLowerCase();
+                    visibleProjects = allProjects
+                        .map(function(project) {return project.toLowerCase();} )
+                        .filter(function(project) { return project.includes(text);} );
+
+                    if (visibleProjects.length > maxShowedItems) {
+                        visibleProjects = visibleProjects.slice(
+                            page * maxShowedItems, (page + 1) * maxShowedItems
+                        )
+
+                    } else {
+                        // there is only one page, no needed pagination
+                        $('#prev-projects').hide();
+                        $('#next-projects').hide();
+                    }
+                    this.updatePagination();
+
+                    $('#dropdown-project-list .item').each(function() {
+                        var name = $(this).data('name').toLowerCase();
+                        if(visibleProjects.includes(name)) {
+                            $(this).show();
+                        } else {
+                            $(this).hide();
+                        }
+                    });
                 }
             });
 

www/script/templates/project-list-dropdown.hbs

@@ -0,0 +1,5 @@
+<div class="dataTables_filter" style="width: 100%; margin-bottom: 30px;">
+    <label for="project-list" style="width: 100%">
+        <input type="text" id="project-list" name="project-list" placeholder="Filter results" />
+    </label>
+</div>

www/script/templates/project-list.hbs

@@ -0,0 +1,26 @@
+<div>
+    <table class="table table-katana table-stripes no-bg dataTable shortcut-js tools-js no-footer" id="dropdown-project-list" role="grid">
+        <thead>
+            <tr role="row">
+                <th class="sorting" tabindex="0" rowspan="1" colspan="1">Name</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{#each projects}}
+                <tr role="row" class="odd item" data-name="{{this}}">
+                    <td>
+                        <a class="scLink" href="/projects/{{this}}" data-sc="/projects/{{this}}/builders?fmod_branch=master">
+                            {{this}}
+                        </a>
+                    </td>
+                </tr>
+            {{/each}}
+        </tbody>
+    </table>
+
+    <div class="dataTables_paginate" style="width: 100%; text-align: center;">
+        <a id="prev-projects" class="paginate_button previous" href="#">Prev</a>
+        <a href="/projects" class="paginiate_button">All projects</a>
+        <a id="next-projects" class="paginate_button next" href="#">Next</a>
+    </div>
+</div>