From e9ffe0e27bcbdb1ca0ca0323d9d063af2a2be200 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Fri, 7 Apr 2017 17:25:44 -0400 Subject: [PATCH] Implement new search UI We now have both autocomplete-based searching for quick results, as well as a full search page for a full listing of results --- data/model/_basequery.py | 9 +- data/model/repository.py | 29 +++- endpoints/api/search.py | 93 ++++++++-- endpoints/api/test/test_search.py | 12 ++ endpoints/api/test/test_security.py | 11 +- endpoints/web.py | 7 + external_libraries.py | 1 + static/css/directives/ui/header-bar.css | 163 ++---------------- static/css/directives/ui/search-box.css | 78 +++++++++ static/css/directives/ui/typeahead.css | 15 ++ static/css/pages/search.css | 84 +++++++++ static/directives/header-bar.html | 76 +------- static/js/directives/ui/entity-search.js | 6 +- static/js/directives/ui/header-bar.js | 147 ---------------- .../ui/search-box/search-box.component.html | 54 ++++++ .../ui/search-box/search-box.component.ts | 56 ++++++ .../ui/typeahead/typeahead.directive.ts | 90 ++++++++++ static/js/pages/search.js | 49 ++++++ static/js/quay-routes.module.ts | 3 + static/js/quay.module.ts | 4 + static/lib/typeahead.bundle.min.js | 7 - static/partials/search.html | 47 +++++ webpack.config.js | 1 + 23 files changed, 649 insertions(+), 393 deletions(-) create mode 100644 endpoints/api/test/test_search.py create mode 100644 static/css/directives/ui/search-box.css create mode 100644 static/css/directives/ui/typeahead.css create mode 100644 static/css/pages/search.css create mode 100644 static/js/directives/ui/search-box/search-box.component.html create mode 100644 static/js/directives/ui/search-box/search-box.component.ts create mode 100644 static/js/directives/ui/typeahead/typeahead.directive.ts create mode 100644 static/js/pages/search.js delete mode 100644 static/lib/typeahead.bundle.min.js create mode 100644 static/partials/search.html diff --git a/data/model/_basequery.py b/data/model/_basequery.py index f37a843ea..524a91415 100644 --- a/data/model/_basequery.py +++ b/data/model/_basequery.py @@ -42,10 +42,11 @@ def filter_to_repos_for_user(query, username=None, namespace=None, repo_kind='im return Repository.select().where(Repository.id == '-1') # Filter on the type of repository. - try: - query = query.where(Repository.kind == Repository.kind.get_id(repo_kind)) - except RepositoryKind.DoesNotExist: - raise DataModelException('Unknown repository kind') + if repo_kind is not None: + try: + query = query.where(Repository.kind == Repository.kind.get_id(repo_kind)) + except RepositoryKind.DoesNotExist: + raise DataModelException('Unknown repository kind') # Add the start ID if necessary. if start_id is not None: diff --git a/data/model/repository.py b/data/model/repository.py index dcd624a3d..c2f65bdfe 100644 --- a/data/model/repository.py +++ b/data/model/repository.py @@ -318,6 +318,9 @@ def repository_is_starred(user, repository): def get_when_last_modified(repository_ids): + """ Returns a map from repository ID to the last modified time (in s) for each repository in the + given repository IDs list. + """ if not repository_ids: return {} @@ -334,6 +337,26 @@ def get_when_last_modified(repository_ids): return last_modified_map +def get_stars(repository_ids): + """ Returns a map from repository ID to the number of stars for each repository in the + given repository IDs list. + """ + if not repository_ids: + return {} + + tuples = (Star + .select(Star.repository, fn.Count(Star.id)) + .where(Star.repository << repository_ids) + .group_by(Star.repository) + .tuples()) + + star_map = {} + for record in tuples: + star_map[record[0]] = record[1] + + return star_map + + def get_visible_repositories(username, namespace=None, kind_filter='image', include_public=False, start_id=None, limit=None): """ Returns the repositories visible to the given user (if any). @@ -471,10 +494,12 @@ def _get_sorted_matching_repositories(lookup_value, repo_kind='image', include_p query = (Repository .select(Repository, Namespace) .join(Namespace, on=(Namespace.id == Repository.namespace_user)) - .where(clause, - Repository.kind == Repository.kind.get_id(repo_kind)) + .where(clause) .group_by(Repository.id, Namespace.id)) + if repo_kind is not None: + query = query.where(Repository.kind == Repository.kind.get_id(repo_kind)) + if not include_private: query = query.where(Repository.visibility == _basequery.get_public_repo_visibility()) diff --git a/endpoints/api/search.py b/endpoints/api/search.py index 582d25f50..68d927d85 100644 --- a/endpoints/api/search.py +++ b/endpoints/api/search.py @@ -164,11 +164,13 @@ class EntitySearch(ApiResource): def search_entity_view(username, entity, get_short_name=None): kind = 'user' + title = 'user' avatar_data = avatar.get_data_for_user(entity) href = '/user/' + entity.username if entity.organization: kind = 'organization' + title = 'org' avatar_data = avatar.get_data_for_org(entity) href = '/organization/' + entity.username elif entity.robot: @@ -179,9 +181,11 @@ def search_entity_view(username, entity, get_short_name=None): href = '/organization/' + parts[0] + '?tab=robots&showRobot=' + entity.username kind = 'robot' + title = 'robot' avatar_data = None data = { + 'title': title, 'kind': kind, 'avatar': avatar_data, 'name': entity.username, @@ -233,20 +237,15 @@ def conduct_admined_team_search(username, query, encountered_teams, results): }) -def conduct_repo_search(username, query, results): +def conduct_repo_search(username, query, results, offset=0, limit=5): """ Finds matching repositories. """ - matching_repos = model.repository.get_filtered_matching_repositories(query, username, limit=5) + matching_repos = model.repository.get_filtered_matching_repositories(query, username, limit=limit, + repo_kind=None, + offset=offset) for repo in matching_repos: - results.append({ - 'kind': 'repository', - 'namespace': search_entity_view(username, repo.namespace_user), - 'name': repo.name, - 'description': repo.description, - 'is_public': model.repository.is_repository_public(repo), - 'score': REPOSITORY_SEARCH_SCORE, - 'href': '/repository/' + repo.namespace_user.username + '/' + repo.name - }) + # TODO: make sure the repo.kind.name doesn't cause extra queries + results.append(repo_result_view(repo, username)) def conduct_namespace_search(username, query, results): @@ -266,6 +265,30 @@ def conduct_robot_search(username, query, results): results.append(search_entity_view(username, robot, get_short_name)) +def repo_result_view(repo, username, last_modified=None, stars=None, popularity=None): + kind = 'application' if repo.kind.name == 'application' else 'repository' + view = { + 'kind': kind, + 'title': 'app' if kind == 'application' else 'repo', + 'namespace': search_entity_view(username, repo.namespace_user), + 'name': repo.name, + 'description': repo.description, + 'is_public': model.repository.is_repository_public(repo), + 'score': REPOSITORY_SEARCH_SCORE, + 'href': '/' + kind + '/' + repo.namespace_user.username + '/' + repo.name + } + + if last_modified is not None: + view['last_modified'] = last_modified + + if stars is not None: + view['stars'] = stars + + if popularity is not None: + view['popularity'] = popularity + + return view + @resource('/v1/find/all') class ConductSearch(ApiResource): """ Resource for finding users, repositories, teams, etc. """ @@ -306,3 +329,51 @@ class ConductSearch(ApiResource): result['score'] = result['score'] * lm_score return {'results': sorted(results, key=itemgetter('score'), reverse=True)} + + +MAX_PER_PAGE = 10 + +@resource('/v1/find/repositories') +class ConductRepositorySearch(ApiResource): + """ Resource for finding repositories. """ + @parse_args() + @query_param('query', 'The search query.', type=str, default='') + @query_param('page', 'The page.', type=int, default=1) + @nickname('conductRepoSearch') + def get(self, parsed_args): + """ Get a list of apps and repositories that match the specified query. """ + query = parsed_args['query'] + if not query: + return {'results': []} + + page = min(max(1, parsed_args['page']), 10) + offset = (page - 1) * MAX_PER_PAGE + limit = offset + MAX_PER_PAGE + 1 + + username = get_authenticated_user().username if get_authenticated_user() else None + + # Lookup matching repositories. + matching_repos = list(model.repository.get_filtered_matching_repositories(query, username, + repo_kind=None, + limit=limit, + offset=offset)) + + # Load secondary information such as last modified time, star count and action count. + repository_ids = [repo.id for repo in matching_repos] + last_modified_map = model.repository.get_when_last_modified(repository_ids) + star_map = model.repository.get_stars(repository_ids) + action_sum_map = model.log.get_repositories_action_sums(repository_ids) + + # Build the results list. + results = [repo_result_view(repo, username, last_modified_map.get(repo.id), + star_map.get(repo.id, 0), + float(action_sum_map.get(repo.id, 0))) + for repo in matching_repos] + + return { + 'results': results[0:MAX_PER_PAGE], + 'has_additional': len(results) > MAX_PER_PAGE, + 'page': page, + 'page_size': MAX_PER_PAGE, + 'start_index': offset, + } diff --git a/endpoints/api/test/test_search.py b/endpoints/api/test/test_search.py new file mode 100644 index 000000000..212377352 --- /dev/null +++ b/endpoints/api/test/test_search.py @@ -0,0 +1,12 @@ +from endpoints.api.search import ConductRepositorySearch +from endpoints.api.test.shared import client_with_identity, conduct_api_call +from test.fixtures import * + +def test_repository_search(client): + with client_with_identity('devtable', client) as cl: + params = {'query': 'simple'} + result = conduct_api_call(cl, ConductRepositorySearch, 'GET', params, None, 200).json + assert not result['has_additional'] + assert result['start_index'] == 0 + assert result['page'] == 1 + assert result['results'][0]['name'] == 'simple' diff --git a/endpoints/api/test/test_security.py b/endpoints/api/test/test_security.py index 2ea155367..9f1da90cc 100644 --- a/endpoints/api/test/test_security.py +++ b/endpoints/api/test/test_security.py @@ -4,16 +4,18 @@ from flask_principal import AnonymousIdentity from endpoints.api import api from endpoints.api.team import OrganizationTeamSyncing from endpoints.api.test.shared import client_with_identity, conduct_api_call +from endpoints.api.repository import RepositoryTrust +from endpoints.api.signing import RepositorySignatures +from endpoints.api.search import ConductRepositorySearch from endpoints.api.superuser import SuperUserRepositoryBuildLogs, SuperUserRepositoryBuildResource from endpoints.api.superuser import SuperUserRepositoryBuildStatus -from endpoints.api.signing import RepositorySignatures -from endpoints.api.repository import RepositoryTrust from test.fixtures import * TEAM_PARAMS = {'orgname': 'buynlarge', 'teamname': 'owners'} BUILD_PARAMS = {'build_uuid': 'test-1234'} REPO_PARAMS = {'repository': 'devtable/someapp'} +SEARCH_PARAMS = {'query': ''} @pytest.mark.parametrize('resource,method,params,body,identity,expected', [ (OrganizationTeamSyncing, 'POST', TEAM_PARAMS, {}, None, 403), @@ -26,6 +28,11 @@ REPO_PARAMS = {'repository': 'devtable/someapp'} (OrganizationTeamSyncing, 'DELETE', TEAM_PARAMS, {}, 'reader', 403), (OrganizationTeamSyncing, 'DELETE', TEAM_PARAMS, {}, 'devtable', 200), + (ConductRepositorySearch, 'GET', SEARCH_PARAMS, None, None, 200), + (ConductRepositorySearch, 'GET', SEARCH_PARAMS, None, 'freshuser', 200), + (ConductRepositorySearch, 'GET', SEARCH_PARAMS, None, 'reader', 200), + (ConductRepositorySearch, 'GET', SEARCH_PARAMS, None, 'devtable', 200), + (SuperUserRepositoryBuildLogs, 'GET', BUILD_PARAMS, None, None, 401), (SuperUserRepositoryBuildLogs, 'GET', BUILD_PARAMS, None, 'freshuser', 403), (SuperUserRepositoryBuildLogs, 'GET', BUILD_PARAMS, None, 'reader', 403), diff --git a/endpoints/web.py b/endpoints/web.py index c73e5dad9..cd158bbc6 100644 --- a/endpoints/web.py +++ b/endpoints/web.py @@ -98,6 +98,7 @@ def aci_signing_key(): return send_file(signer.open_public_key_file(), mimetype=PGP_KEY_MIMETYPE) + @web.route('/plans/') @no_cache @route_show_if(features.BILLING) @@ -105,6 +106,12 @@ def plans(): return index('') +@web.route('/search') +@no_cache +def search(): + return index('') + + @web.route('/guide/') @no_cache def guide(): diff --git a/external_libraries.py b/external_libraries.py index edefae890..a5809f377 100644 --- a/external_libraries.py +++ b/external_libraries.py @@ -20,6 +20,7 @@ EXTERNAL_JS = [ 'cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js', 'cdnjs.cloudflare.com/ajax/libs/angular-recaptcha/3.2.1/angular-recaptcha.min.js', 'cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js', + 'cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js', ] EXTERNAL_CSS = [ diff --git a/static/css/directives/ui/header-bar.css b/static/css/directives/ui/header-bar.css index b1d4ca49c..19b5ed04f 100644 --- a/static/css/directives/ui/header-bar.css +++ b/static/css/directives/ui/header-bar.css @@ -44,8 +44,9 @@ nav.navbar-default .navbar-nav>li>a.active { width: 150px; } -.header-bar-element .header-bar-content.search-visible { - box-shadow: 0px 1px 4px #ccc; +.header-bar-element .search-box-element { + margin-top: 10px; + margin-right: 16px; } .header-bar-element .header-bar-content { @@ -57,151 +58,6 @@ nav.navbar-default .navbar-nav>li>a.active { background: white; } -.header-bar-element .search-box { - position: absolute; - left: 0px; - right: 0px; - top: -60px; - z-index: 4; - height: 56px; - transition: top 0.3s cubic-bezier(.23,.88,.72,.98); - background: white; - box-shadow: 0px 1px 16px #444; - padding: 10px; -} - -.header-bar-element .search-box.search-visible { - top: 50px; -} - -.header-bar-element .search-box.results-visible { - box-shadow: 0px 1px 4px #ccc; -} - -.header-bar-element .search-box .search-label { - display: inline-block; - text-transform: uppercase; - font-size: 12px; - font-weight: bold; - color: #ccc; - margin-right: 10px; - position: absolute; - top: 20px; - left: 14px; -} - -.header-bar-element .search-box .search-box-wrapper { - position: absolute; - top: 0px; - left: 100px; - right: 10px; - padding: 10px; -} - -.header-bar-element .search-box .search-box-wrapper input { - font-size: 18px; - width: 100%; - padding: 6px; - border: 0px; -} - -.header-bar-element .search-results { - position: absolute; - left: 0px; - right: 0px; - top: -106px; - z-index: 3; - transition: top 0.4s cubic-bezier(.23,.88,.72,.98), height 0.25s ease-in-out; - - background: white; - box-shadow: 0px 1px 16px #444; - padding-top: 20px; -} - -.header-bar-element .search-results.loading, .header-bar-element .search-results.results { - top: 106px; -} - -.header-bar-element .search-results.loading { - height: 50px; -} - -.header-bar-element .search-results.no-results { - height: 150px; -} - -.header-bar-element .search-results ul { - padding: 0px; - margin: 0px; -} - -.header-bar-element .search-results li { - list-style: none; - padding: 6px; - margin-bottom: 4px; - padding-left: 20px; - position: relative; -} - -.header-bar-element .search-results li .kind { - text-transform: uppercase; - font-size: 12px; - display: inline-block; - margin-right: 10px; - color: #aaa; - width: 80px; - text-align: right; -} - -.header-bar-element .search-results .avatar { - margin-left: 6px; - margin-right: 2px; -} - -.header-bar-element .search-results li.current { - background: rgb(223, 242, 255); - cursor: pointer; -} - -.header-bar-element .search-results li i.fa { - margin-left: 6px; - margin-right: 4px; -} - -.header-bar-element .search-results li .result-description { - overflow: hidden; - text-overflow: ellipsis; - max-height: 24px; - padding-left: 10px; - display: inline-block; - color: #aaa; - vertical-align: middle; - margin-top: 2px; -} - -.header-bar-element .search-results li .description img { - display: none; -} - -.header-bar-element .search-results li .score:before { - content: "Score: "; -} - -.header-bar-element .search-results li .score { - float: right; - color: #ccc; -} - -.header-bar-element .search-results li .result-name { - vertical-align: middle; -} - -.header-bar-element .search-results li .clarification { - font-size: 12px; - margin-left: 6px; - display: inline-block; -} - .header-bar-element .avatar { margin-right: 6px; } @@ -248,3 +104,16 @@ nav.navbar-default .navbar-nav>li>a.active { text-align: center; display: inline-block; } + +.header-bar-element .block-search { + padding: 6px; + padding-top: 0px; + margin-top: 0px; + text-align: right +} + +.header-bar-element .block-search search-box { + margin-top: -6px; + display: inline-block; + margin-bottom: 6px; +} \ No newline at end of file diff --git a/static/css/directives/ui/search-box.css b/static/css/directives/ui/search-box.css new file mode 100644 index 000000000..16bd41efa --- /dev/null +++ b/static/css/directives/ui/search-box.css @@ -0,0 +1,78 @@ +.search-box-element { + display: inline-block; + position: relative; +} + +.search-box-element input { + width: 300px; + display: inline-block; + border-radius: 0px; + height: 30px; + font-style: italic; +} + +.search-box-element .search-icon { + position: absolute; + font-size: 18px; + color: #ccc; + top: 2px; + right: 6px; +} + +.search-box-element .search-icon .cor-loader-inline { + top: -2px; + right: 2px; + position: absolute; +} + +.search-box-element .search-icon .cor-loader-inline .co-m-loader-dot__one, +.search-box-element .search-icon .cor-loader-inline .co-m-loader-dot__two, +.search-box-element .search-icon .cor-loader-inline .co-m-loader-dot__three { + background: #ccc; +} + +.search-box-result .kind { + text-transform: uppercase; + font-size: 12px; + display: inline-block; + margin-right: 10px; + color: #aaa; + width: 40px; + text-align: right; +} + +.search-box-result .avatar { + margin-left: 6px; + margin-right: 2px; +} + +.search-box-result i.fa { + margin-left: 6px; + margin-right: 4px; +} + +.search-box-result .result-description { + overflow: hidden; + text-overflow: ellipsis; + max-height: 24px; + padding-left: 10px; + display: inline-block; + color: #aaa; + vertical-align: middle; + margin-top: 2px; +} + +.search-box-result .description img { + display: none; +} + +.search-box-result .result-name { + vertical-align: middle; +} + +.search-box-result .clarification { + font-size: 12px; + margin-left: 6px; + display: inline-block; + vertical-align: middle; +} diff --git a/static/css/directives/ui/typeahead.css b/static/css/directives/ui/typeahead.css new file mode 100644 index 000000000..a4ac56eb8 --- /dev/null +++ b/static/css/directives/ui/typeahead.css @@ -0,0 +1,15 @@ +.tt-menu { + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + right: 0px; +} + +.tt-suggestion.tt-is-under-cursor { + color: #fff; + background-color: #428bca; +} + +.tt-hint { + display: none; +} \ No newline at end of file diff --git a/static/css/pages/search.css b/static/css/pages/search.css new file mode 100644 index 000000000..b2a7d1dc1 --- /dev/null +++ b/static/css/pages/search.css @@ -0,0 +1,84 @@ +.search { + padding: 40px; +} + +.search .empty { + margin-top: 40px; +} + +.search .search-top-bar { + text-align: center; + padding: 10px; +} + +.search .search-results-section { + border-top: 1px solid #ccc; + padding-top: 16px; + margin-top: 30px; +} + +.search .search-results-section h5 { + display: block; + text-align: center; + color: #aaa; + text-transform: uppercase; +} + +.search .search-results li { + padding-bottom: 10px; + margin-bottom: 24px; + border-bottom: 1px solid #eee; +} + +.search .search-results li .result-info-bar { + color: #888; +} + +.search .search-results li .result-info-bar .activity { + float: right; +} + +.search .search-results li .result-info-bar .activity .strength-indicator { + display: inline-block; + margin-left: 10px; +} + +.search .search-results li .description .markdown-view-content p { + display: none; +} + +.search .search-results li .description .markdown-view-content p:first-child { + display: block; + overflow: hidden; + max-height: 4em; +} + +.search .search-results li h4 { + vertical-align: middle; +} + +.search .search-results li h4 .fa { + margin-right: 6px; + display: inline-block; +} + +.search .search-results li .star-count { + float: right; + color: #888; + line-height: 26px; +} + +.search .search-results li .star-count .star-count-number { + display: inline-block; +} + +.search .search-results li .star-icon { + color: #ffba6d; + font-size: 26px; + margin-left: 10px; + vertical-align: middle; +} + +.search .search-results li .search-result-box { + padding: 6px; +} diff --git a/static/directives/header-bar.html b/static/directives/header-bar.html index 81d77923c..bf6ede974 100644 --- a/static/directives/header-bar.html +++ b/static/directives/header-bar.html @@ -1,6 +1,6 @@
-
+
@@ -55,10 +50,8 @@
-
- -
-
Search For
-
- +
+
-
-
-
No matching results found
-
    -
  • - {{ result.kind }} - - - - - - - {{ result.name }} - - - under organization - - {{ result.organization.name }} - - - - - {{ result.name }} - - - - {{ result.name }} - - - - {{ result.name }} - - - - {{ result.name }} - - - - {{ result.namespace.name }}/{{ result.name }} -
    -
    -
    -     -     -
    • -
-
-
diff --git a/static/js/directives/ui/entity-search.js b/static/js/directives/ui/entity-search.js index 336a9a7dc..c3824c5da 100644 --- a/static/js/directives/ui/entity-search.js +++ b/static/js/directives/ui/entity-search.js @@ -235,11 +235,13 @@ angular.module('quay').directive('entitySearch', function () { // Setup the typeahead. $(input).typeahead({ - 'highlight': true + 'highlight': true, + 'hint': false, }, { + display: 'value', source: entitySearchB.ttAdapter(), templates: { - 'empty': function(info) { + 'notFound': function(info) { // Only display the empty dialog if the server load has finished. if (info.resultKind == 'remote') { var val = $(input).val(); diff --git a/static/js/directives/ui/header-bar.js b/static/js/directives/ui/header-bar.js index 8342df346..e58827cfc 100644 --- a/static/js/directives/ui/header-bar.js +++ b/static/js/directives/ui/header-bar.js @@ -28,18 +28,6 @@ angular.module('quay').directive('headerBar', function () { hotkeysAdded = true; // Register hotkeys. - if ($scope.searchingAllowed) { - hotkeys.add({ - combo: '/', - description: 'Show search', - callback: function(e) { - e.preventDefault(); - e.stopPropagation(); - $scope.toggleSearch(); - } - }); - } - if (!cUser.anonymous) { hotkeys.add({ combo: 'alt+c', @@ -57,9 +45,6 @@ angular.module('quay').directive('headerBar', function () { $scope.Features = Features; $scope.notificationService = NotificationService; $scope.searchingAllowed = false; - $scope.searchVisible = false; - $scope.currentSearchQuery = null; - $scope.searchResultState = null; $scope.showBuildDialogCounter = 0; // Monitor any user changes and place the current user into the scope. @@ -79,69 +64,6 @@ angular.module('quay').directive('headerBar', function () { $scope.currentPageContext['repository'] = r; }); - var documentSearchMaxResults = 10; - var documentSearchScoreThreshold = 0.9; - - var conductDocumentationSearch = function(query) { - if (!query) { return; } - - var mapper = function(result, score) { - return { - 'kind': 'doc', - 'name': result.title.replace(/'\;/g, "'"), - 'score': score, - 'href': Config.DOCUMENTATION_LOCATION + result.url - } - }; - - DocumentationService.findDocumentation($scope, query.split(' '), function(results) { - if (!$scope.searchVisible) { return; } - - var currentResults = $scope.searchResultState['results'] || []; - results.forEach(function(result) { - if (currentResults.length < documentSearchMaxResults) { - currentResults.push(result); - } - }); - - $scope.searchResultState = { - 'state': currentResults.length ? 'results' : 'no-results', - 'results': currentResults, - 'current': currentResults.length ? 0 : -1 - }; - }, mapper, documentSearchScoreThreshold); - } - - var conductSearch = function(query) { - if (!query) { $scope.searchResultState = null; return; } - - $scope.searchResultState = { - 'state': 'loading' - }; - - var params = { - 'query': query - }; - - ApiService.conductSearch(null, params).then(function(resp) { - if (!$scope.searchVisible || query != $scope.currentSearchQuery) { return; } - - $scope.searchResultState = { - 'state': resp.results.length ? 'results' : 'no-results', - 'results': resp.results, - 'current': resp.results.length ? 0 : -1 - }; - - if (resp.results.length < documentSearchMaxResults) { - conductDocumentationSearch(query); - } - }, function(resp) { - $scope.searchResultState = null; - }, /* background */ true); - }; - - $scope.$watch('currentSearchQuery', conductSearch); - $scope.signout = function() { ApiService.logout().then(function() { UserService.load(); @@ -153,75 +75,6 @@ angular.module('quay').directive('headerBar', function () { return Config.getEnterpriseLogo(); }; - $scope.toggleSearch = function() { - $scope.searchVisible = !$scope.searchVisible; - if ($scope.searchVisible) { - $('#search-box-input').focus(); - if ($scope.currentSearchQuery) { - conductSearch($scope.currentSearchQuery); - } - } else { - $('#search-box-input').blur() - $scope.searchResultState = null; - } - }; - - $scope.getSearchBoxClasses = function(searchVisible, searchResultState) { - var classes = searchVisible ? 'search-visible ' : ''; - if (searchResultState) { - classes += 'results-visible'; - } - return classes; - }; - - $scope.handleSearchKeyDown = function(e) { - if (e.keyCode == 27) { - $scope.toggleSearch(); - return; - } - - var state = $scope.searchResultState; - if (!state || !state['results']) { return; } - - if (e.keyCode == 40) { - state['current']++; - e.preventDefault(); - } else if (e.keyCode == 38) { - state['current']--; - e.preventDefault(); - } else if (e.keyCode == 13) { - var current = state['current']; - if (current >= 0 && current < state['results'].length) { - $scope.showResult(state['results'][current]); - } - e.preventDefault(); - } - - if (state['current'] < -1) { - state['current'] = state['results'].length - 1; - } else if (state['current'] >= state['results'].length) { - state['current'] = 0; - } - }; - - $scope.showResult = function(result) { - $scope.toggleSearch(); - $timeout(function() { - if (result['kind'] == 'doc') { - window.location = result['href']; - return; - } - - $scope.currentSearchQuery = ''; - $location.url(result['href']) - }, 500); - }; - - $scope.setCurrentResult = function(result) { - if (!$scope.searchResultState) { return; } - $scope.searchResultState['current'] = result; - }; - $scope.getNamespace = function(context) { if (!context) { return null; } diff --git a/static/js/directives/ui/search-box/search-box.component.html b/static/js/directives/ui/search-box/search-box.component.html new file mode 100644 index 000000000..d62b9c2f5 --- /dev/null +++ b/static/js/directives/ui/search-box/search-box.component.html @@ -0,0 +1,54 @@ + + + + + + + + + \ No newline at end of file diff --git a/static/js/directives/ui/search-box/search-box.component.ts b/static/js/directives/ui/search-box/search-box.component.ts new file mode 100644 index 000000000..cdb30ffff --- /dev/null +++ b/static/js/directives/ui/search-box/search-box.component.ts @@ -0,0 +1,56 @@ +import { Input, Component, Inject } from 'ng-metadata/core'; + + +/** + * A component that displays a search box with autocomplete. + */ +@Component({ + selector: 'search-box', + templateUrl: '/static/js/directives/ui/search-box/search-box.component.html', +}) +export class SearchBoxComponent { + @Input(' { + if (this.currentQuery == $event['query']) { + $event['callback'](resp.results); + this.autocompleteSelected = false; + } + }); + } + + private onSelected($event): void { + this.autocompleteSelected = true; + this.$timeout(() => { + this.$location.url($event['result']['href']) + }, 100); + } + + private onEntered($event): void { + this.$timeout(() => { + $event['callback'](true); // Clear the value. + this.$location.url('/search'); + this.$location.search('q', $event['value']); + }, 10); + } +} \ No newline at end of file diff --git a/static/js/directives/ui/typeahead/typeahead.directive.ts b/static/js/directives/ui/typeahead/typeahead.directive.ts new file mode 100644 index 000000000..d733d88b2 --- /dev/null +++ b/static/js/directives/ui/typeahead/typeahead.directive.ts @@ -0,0 +1,90 @@ +import { Input, Output, Directive, Inject, AfterContentInit, EventEmitter, HostListener } from 'ng-metadata/core'; +import * as $ from 'jquery'; + +/** + * Directive which decorates an with a typeahead autocomplete. + */ +@Directive({ + selector: '[typeahead]', +}) +export class TypeaheadDirective implements AfterContentInit { + @Output('typeahead') typeahead = new EventEmitter(); + + @Input('taDisplayKey') displayKey: string = ''; + @Input('taSuggestionTmpl') suggestionTemplate: string = ''; + @Input('taClearOnSelect') clearOnSelect: boolean = false; + + @Output('taSelected') selected = new EventEmitter(); + @Output('taEntered') entered = new EventEmitter(); + + private itemSelected: boolean = false; + + constructor(@Inject('$element') private $element: ng.IAugmentedJQuery, + @Inject('$compile') private $compile: ng.ICompileService, + @Inject('$scope') private $scope: ng.IScope, + @Inject('$templateRequest') private $templateRequest: ng.ITemplateRequestService) { + } + + public ngAfterContentInit(): void { + var templates = null; + if (this.suggestionTemplate) { + templates = {} + + if (this.suggestionTemplate) { + templates['suggestion'] = this.buildTemplateHandler(this.suggestionTemplate); + } + } + + $(this.$element).on('typeahead:select', (ev, suggestion) => { + if (this.clearOnSelect) { + $(this.$element).typeahead('val', ''); + } + this.selected.emit({'result': suggestion}) + this.itemSelected = true; + }); + + $(this.$element).typeahead( + { + highlight: false, + hint: false, + }, + { + templates: templates, + display: this.displayKey, + source: (query, results, asyncResults) => { + this.typeahead.emit({'query': query, 'callback': asyncResults}); + this.itemSelected = false; + }, + }); + } + + @HostListener('keyup', ['$event']) + public onKeyup(event: JQueryKeyEventObject): void { + if (!this.itemSelected && event.keyCode == 13) { + this.entered.emit({ + 'value': $(this.$element).typeahead('val'), + 'callback': (reset: boolean) => { + if (reset) { + this.itemSelected = false; + $(this.$element).typeahead('val', ''); + } + } + }); + } + } + + private buildTemplateHandler(templateUrl: string): Function { + return (value) => { + var resultDiv = document.createElement('div'); + this.$templateRequest(templateUrl).then((tplContent) => { + var tplEl = document.createElement('span'); + tplEl.innerHTML = tplContent.trim(); + var scope = this.$scope.$new(true); + scope['result'] = value; + this.$compile(tplEl)(scope); + resultDiv.appendChild(tplEl); + }); + return resultDiv; + }; + } +} \ No newline at end of file diff --git a/static/js/pages/search.js b/static/js/pages/search.js new file mode 100644 index 000000000..0a01b7d5c --- /dev/null +++ b/static/js/pages/search.js @@ -0,0 +1,49 @@ +(function() { + /** + * Search page. + */ + angular.module('quayPages').config(['pages', function(pages) { + pages.create('search', 'search.html', SearchCtrl, { + 'title': 'Search' + }); + }]); + + function SearchCtrl($scope, ApiService, $routeParams, $location) { + var refreshResults = function() { + $scope.currentPage = ($routeParams['page'] || '1') * 1; + + var params = { + 'query': $routeParams['q'], + 'page': $scope.currentPage + }; + + $scope.maxPopularity = 0; + $scope.resultsResource = ApiService.conductRepoSearchAsResource(params).get(function(resp) { + $scope.results = resp['results']; + $scope.hasAdditional = resp['has_additional']; + $scope.startIndex = resp['start_index']; + resp['results'].forEach(function(result) { + $scope.maxPopularity = Math.max($scope.maxPopularity, result['popularity']); + }); + }); + }; + + $scope.previousPage = function() { + $location.search('page', (($routeParams['page'] || 1) * 1) - 1); + }; + + $scope.nextPage = function() { + $location.search('page', (($routeParams['page'] || 1) * 1) + 1); + }; + + $scope.currentQuery = $routeParams['q']; + refreshResults(); + + $scope.$on('$routeUpdate', function(){ + $scope.currentQuery = $routeParams['q']; + refreshResults(); + }); + } + + SearchCtrl.$inject = ['$scope', 'ApiService', '$routeParams', '$location']; +})(); \ No newline at end of file diff --git a/static/js/quay-routes.module.ts b/static/js/quay-routes.module.ts index d36b6b1bf..4c0d81766 100644 --- a/static/js/quay-routes.module.ts +++ b/static/js/quay-routes.module.ts @@ -54,6 +54,9 @@ function provideRoutes($routeProvider: ng.route.IRouteProvider, } routeBuilder + // Search + .route('/search', 'search') + // Application View .route('/application/:namespace/:name', 'app-view') diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts index 2d6b2a0a7..ecbf57eeb 100644 --- a/static/js/quay.module.ts +++ b/static/js/quay.module.ts @@ -18,6 +18,8 @@ import { TagSigningDisplayComponent } from './directives/ui/tag-signing-display/ import { RepositorySigningConfigComponent } from './directives/ui/repository-signing-config/repository-signing-config.component'; import { TimeMachineSettingsComponent } from './directives/ui/time-machine-settings/time-machine-settings.component'; import { DurationInputComponent } from './directives/ui/duration-input/duration-input.component'; +import { SearchBoxComponent } from './directives/ui/search-box/search-box.component'; +import { TypeaheadDirective } from './directives/ui/typeahead/typeahead.directive'; import { BuildServiceImpl } from './services/build/build.service.impl'; import { AvatarServiceImpl } from './services/avatar/avatar.service.impl'; import { DockerfileServiceImpl } from './services/dockerfile/dockerfile.service.impl'; @@ -52,6 +54,8 @@ import { QuayRequireDirective } from './directives/structural/quay-require/quay- RepositorySigningConfigComponent, TimeMachineSettingsComponent, DurationInputComponent, + SearchBoxComponent, + TypeaheadDirective, ], providers: [ ViewArrayImpl, diff --git a/static/lib/typeahead.bundle.min.js b/static/lib/typeahead.bundle.min.js deleted file mode 100644 index 4640c40a5..000000000 --- a/static/lib/typeahead.bundle.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/*! - * typeahead.js 0.10.1 - * https://github.com/twitter/typeahead.js - * Copyright 2013 Twitter, Inc. and other contributors; Licensed MIT - */ - -!function(a){var b={isMsie:function(){return/(msie|trident)/i.test(navigator.userAgent)?navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2]:!1},isBlankString:function(a){return!a||/^\s*$/.test(a)},escapeRegExChars:function(a){return a.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},isString:function(a){return"string"==typeof a},isNumber:function(a){return"number"==typeof a},isArray:a.isArray,isFunction:a.isFunction,isObject:a.isPlainObject,isUndefined:function(a){return"undefined"==typeof a},bind:a.proxy,each:function(b,c){function d(a,b){return c(b,a)}a.each(b,d)},map:a.map,filter:a.grep,every:function(b,c){var d=!0;return b?(a.each(b,function(a,e){return(d=c.call(null,e,a,b))?void 0:!1}),!!d):d},some:function(b,c){var d=!1;return b?(a.each(b,function(a,e){return(d=c.call(null,e,a,b))?!1:void 0}),!!d):d},mixin:a.extend,getUniqueId:function(){var a=0;return function(){return a++}}(),templatify:function(b){function c(){return String(b)}return a.isFunction(b)?b:c},defer:function(a){setTimeout(a,0)},debounce:function(a,b,c){var d,e;return function(){var f,g,h=this,i=arguments;return f=function(){d=null,c||(e=a.apply(h,i))},g=c&&!d,clearTimeout(d),d=setTimeout(f,b),g&&(e=a.apply(h,i)),e}},throttle:function(a,b){var c,d,e,f,g,h;return g=0,h=function(){g=new Date,e=null,f=a.apply(c,d)},function(){var i=new Date,j=b-(i-g);return c=this,d=arguments,0>=j?(clearTimeout(e),e=null,g=i,f=a.apply(c,d)):e||(e=setTimeout(h,j)),f}},noop:function(){}},c="0.10.1",d=function(){function a(a){this.maxSize=a||100,this.size=0,this.hash={},this.list=new c}function c(){this.head=this.tail=null}function d(a,b){this.key=a,this.val=b,this.prev=this.next=null}return b.mixin(a.prototype,{set:function(a,b){var c,e=this.list.tail;this.size>=this.maxSize&&(this.list.remove(e),delete this.hash[e.key]),(c=this.hash[a])?(c.val=b,this.list.moveToFront(c)):(c=new d(a,b),this.list.add(c),this.hash[a]=c,this.size++)},get:function(a){var b=this.hash[a];return b?(this.list.moveToFront(b),b.val):void 0}}),b.mixin(c.prototype,{add:function(a){this.head&&(a.next=this.head,this.head.prev=a),this.head=a,this.tail=this.tail||a},remove:function(a){a.prev?a.prev.next=a.next:this.head=a.next,a.next?a.next.prev=a.prev:this.tail=a.prev},moveToFront:function(a){this.remove(a),this.add(a)}}),a}(this),e=function(){function a(a){this.prefix=["__",a,"__"].join(""),this.ttlKey="__ttl__",this.keyMatcher=new RegExp("^"+this.prefix)}function c(){return(new Date).getTime()}function d(a){return JSON.stringify(b.isUndefined(a)?null:a)}function e(a){return JSON.parse(a)}var f,g;try{f=window.localStorage,f.setItem("~~~","!"),f.removeItem("~~~")}catch(h){f=null}return g=f&&window.JSON?{_prefix:function(a){return this.prefix+a},_ttlKey:function(a){return this._prefix(a)+this.ttlKey},get:function(a){return this.isExpired(a)&&this.remove(a),e(f.getItem(this._prefix(a)))},set:function(a,e,g){return b.isNumber(g)?f.setItem(this._ttlKey(a),d(c()+g)):f.removeItem(this._ttlKey(a)),f.setItem(this._prefix(a),d(e))},remove:function(a){return f.removeItem(this._ttlKey(a)),f.removeItem(this._prefix(a)),this},clear:function(){var a,b,c=[],d=f.length;for(a=0;d>a;a++)(b=f.key(a)).match(this.keyMatcher)&&c.push(b.replace(this.keyMatcher,""));for(a=c.length;a--;)this.remove(c[a]);return this},isExpired:function(a){var d=e(f.getItem(this._ttlKey(a)));return b.isNumber(d)&&c()>d?!0:!1}}:{get:b.noop,set:b.noop,remove:b.noop,clear:b.noop,isExpired:b.noop},b.mixin(a.prototype,g),a}(),f=function(){function c(b){b=b||{},this._send=b.transport?e(b.transport):a.ajax,this._get=b.rateLimiter?b.rateLimiter(this._get):this._get}function e(c){return function(d,e){function f(a){b.defer(function(){h.resolve(a)})}function g(a){b.defer(function(){h.reject(a)})}var h=a.Deferred();return c(d,e,f,g),h}}var f=0,g={},h=6,i=new d(10);return c.setMaxPendingRequests=function(a){h=a},c.resetCache=function(){i=new d(10)},b.mixin(c.prototype,{_get:function(a,b,c){function d(b){c&&c(b),i.set(a,b)}function e(){f--,delete g[a],k.onDeckRequestArgs&&(k._get.apply(k,k.onDeckRequestArgs),k.onDeckRequestArgs=null)}var j,k=this;(j=g[a])?j.done(d):h>f?(f++,g[a]=this._send(a,b).done(d).always(e)):this.onDeckRequestArgs=[].slice.call(arguments,0)},get:function(a,c,d){var e;return b.isFunction(c)&&(d=c,c={}),(e=i.get(a))?b.defer(function(){d&&d(e)}):this._get(a,c,d),!!e}}),c}(),g=function(){function c(b){b=b||{},b.datumTokenizer&&b.queryTokenizer||a.error("datumTokenizer and queryTokenizer are both required"),this.datumTokenizer=b.datumTokenizer,this.queryTokenizer=b.queryTokenizer,this.datums=[],this.trie=e()}function d(a){return a=b.filter(a,function(a){return!!a}),a=b.map(a,function(a){return a.toLowerCase()})}function e(){return{ids:[],children:{}}}function f(a){for(var b={},c=[],d=0;db[e]?e++:(f.push(a[d]),d++,e++);return f}return b.mixin(c.prototype,{bootstrap:function(a){this.datums=a.datums,this.trie=a.trie},add:function(a){var c=this;a=b.isArray(a)?a:[a],b.each(a,function(a){var f,g;f=c.datums.push(a)-1,g=d(c.datumTokenizer(a)),b.each(g,function(a){var b,d,g;for(b=c.trie,d=a.split("");g=d.shift();)b=b.children[g]||(b.children[g]=e()),b.ids.push(f)})})},get:function(a){var c,e,h=this;return c=d(this.queryTokenizer(a)),b.each(c,function(a){var b,c,d,f;if(e&&0===e.length)return!1;for(b=h.trie,c=a.split("");b&&(d=c.shift());)b=b.children[d];return b&&0===c.length?(f=b.ids.slice(0),void(e=e?g(e,f):f)):(e=[],!1)}),e?b.map(f(e),function(a){return h.datums[a]}):[]},serialize:function(){return{datums:this.datums,trie:this.trie}}}),c}(),h=function(){function d(a){var c=a.local||null;return b.isFunction(c)&&(c=c.call(null)),c}function e(d){var e,f;return f={url:null,thumbprint:"",ttl:864e5,filter:null,ajax:{}},(e=d.prefetch||null)&&(e=b.isString(e)?{url:e}:e,e=b.mixin(f,e),e.thumbprint=c+e.thumbprint,e.ajax.type=e.ajax.type||"GET",e.ajax.dataType=e.ajax.dataType||"json",!e.url&&a.error("prefetch requires url to be set")),e}function f(c){function d(a){return function(c){return b.debounce(c,a)}}function e(a){return function(c){return b.throttle(c,a)}}var f,g;return g={url:null,wildcard:"%QUERY",replace:null,rateLimitBy:"debounce",rateLimitWait:300,send:null,filter:null,ajax:{}},(f=c.remote||null)&&(f=b.isString(f)?{url:f}:f,f=b.mixin(g,f),f.rateLimiter=/^throttle$/i.test(f.rateLimitBy)?e(f.rateLimitWait):d(f.rateLimitWait),f.ajax.type=f.ajax.type||"GET",f.ajax.dataType=f.ajax.dataType||"json",delete f.rateLimitBy,delete f.rateLimitWait,!f.url&&a.error("remote requires url to be set")),f}return{local:d,prefetch:e,remote:f}}(),i=(window.Bloodhound=function(){function c(b){b&&(b.local||b.prefetch||b.remote)||a.error("one of local, prefetch, or remote is required"),this.limit=b.limit||5,this.sorter=d(b.sorter),this.dupDetector=b.dupDetector||i,this.local=h.local(b),this.prefetch=h.prefetch(b),this.remote=h.remote(b),this.cacheKey=this.prefetch?this.prefetch.cacheKey||this.prefetch.url:null,this.index=new g({datumTokenizer:b.datumTokenizer,queryTokenizer:b.queryTokenizer}),this.storage=this.cacheKey?new e(this.cacheKey):null}function d(a){function c(b){return b.sort(a)}function d(a){return a}return b.isFunction(a)?c:d}function i(){return!1}var j;return j={data:"data",protocol:"protocol",thumbprint:"thumbprint"},c.tokenizers={whitespace:function(a){return a.split(/\s+/)},nonword:function(a){return a.split(/\W+/)}},b.mixin(c.prototype,{_loadPrefetch:function(b){function c(a){var c;c=b.filter?b.filter(a):a,f.add(c),f._saveToStorage(f.index.serialize(),b.thumbprint,b.ttl)}var d,e,f=this;return(d=this._readFromStorage(b.thumbprint))?(this.index.bootstrap(d),e=a.Deferred().resolve()):e=a.ajax(b.url,b.ajax).done(c),e},_getFromRemote:function(a,b){function c(a){var c=f.remote.filter?f.remote.filter(a):a;b(c)}var d,e,f=this;return a=a||"",e=encodeURIComponent(a),d=this.remote.replace?this.remote.replace(this.remote.url,a):this.remote.url.replace(this.remote.wildcard,e),this.transport.get(d,this.remote.ajax,c)},_saveToStorage:function(a,b,c){this.storage&&(this.storage.set(j.data,a,c),this.storage.set(j.protocol,location.protocol,c),this.storage.set(j.thumbprint,b,c))},_readFromStorage:function(a){var b,c={};return this.storage&&(c.data=this.storage.get(j.data),c.protocol=this.storage.get(j.protocol),c.thumbprint=this.storage.get(j.thumbprint)),b=c.thumbprint!==a||c.protocol!==location.protocol,c.data&&!b?c.data:null},initialize:function(){function b(){d.add(d.local)}var c,d=this;return c=this.prefetch?this._loadPrefetch(this.prefetch):a.Deferred().resolve(),this.local&&c.done(b),this.transport=this.remote?new f(this.remote):null,this.initialize=function(){return c.promise()},c.promise()},add:function(a){this.index.add(a)},get:function(a,c){function d(a){var d=e.slice(0);b.each(a,function(a){var c;return c=b.some(d,function(b){return f.dupDetector(a,b)}),!c&&d.push(a),d.length