commit 4e86a0d1dc697325ddfe200cbc503617d98d3648 Author: Iain R. Learmonth <irl@fsfe.org> Date: Mon Nov 27 12:16:18 2017 +0000 Adds an initial advanced search form (See: #23782) --- css/atlas.css | 10 ++---- js/router.js | 6 ++++ js/views/search/main.js | 46 ++++++++++++++++++++++-- templates/search/main.html | 88 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 141 insertions(+), 9 deletions(-) diff --git a/css/atlas.css b/css/atlas.css index b027534..ac1c410 100644 --- a/css/atlas.css +++ b/css/atlas.css @@ -52,22 +52,18 @@ span.flags { background: #ff1515; } -#home-search, #home-aggregate-search { +#home-search, #home-aggregate-search, #home-advanced-search { padding: 0; margin: 0 0 10px 0; width: 100%; } -.search-query { - max-width: none; -} - td, th { padding: 2px!important; } -table input { - width: 100%; +.form-control { + max-width: none !important; } .flags-cell { diff --git a/js/router.js b/js/router.js index 8052f82..6b029bd 100644 --- a/js/router.js +++ b/js/router.js @@ -207,6 +207,12 @@ define([ $('#aggregated-search-tab-content').fadeIn(); $('.search-tabs').removeClass('active'); $('#aggregated-search-tab').addClass('active'); + } else if (actions == "advanced") { + $('.search').hide(); + $('#advanced-search-tab-content').fadeIn(); + $('.search-tabs').removeClass('active'); + $('#advanced-search-tab').addClass('active'); + $('.well').hide(); } else { $('.search').hide(); $('#main-search-tab-content').fadeIn(); diff --git a/js/views/search/main.js b/js/views/search/main.js index 6eedbe2..92ae96f 100644 --- a/js/views/search/main.js +++ b/js/views/search/main.js @@ -4,15 +4,16 @@ define([ 'underscore', 'backbone', 'text!templates/search/main.html', + 'helpers', ], function($, _, Backbone, mainSearchTemplate){ var mainSearchView = Backbone.View.extend({ el: "#content", render: function(query){ document.title = "Relay Search"; - var data = {}; + var data = {countries: CountryCodes}; var compiledTemplate = _.template(mainSearchTemplate); - this.$el.html(compiledTemplate, data); + this.$el.html(compiledTemplate(data)); $("#do-top-relays").bind('click', function(){ document.location = "#toprelays"; @@ -43,6 +44,47 @@ define([ document.location = "#aggregate/all/"+encodeURI($('#aggregated-query').val()); return false; }); + + var buildAdvancedQuery = function(){ + var query = ""; + if($('#advanced-search-nickname').val().trim() != "") query += $('#advanced-search-nickname').val().trim() + " "; + if($('#advanced-search-family')[0].checked) { + if($('#advanced-search-fingerprint').val().trim() != "") query += "family:" + $('#advanced-search-fingerprint').val().trim().split(" ")[0] + " "; + } else { + if($('#advanced-search-fingerprint').val().trim() != "") query += "fingerprint:" + $('#advanced-search-fingerprint').val().trim().split(" ")[0] + " "; + } + if($('#advanced-search-flag').val() !== "") query += "flag:" + $('#advanced-search-flag').val() + " "; + if($('#advanced-search-country').val() !== "") query += "country:" + $('#advanced-search-country').val() + " "; + if($('#advanced-search-as').val().trim() !== "") query += "as:" + $('#advanced-search-as').val().trim() + " "; + if($('#advanced-search-contact').val().trim() != "") query += "contact:" + $('#advanced-search-contact').val().trim().split(" ")[0] + " "; + if($('#advanced-search-hostname').val().trim() != "") query += "host_name:" + $('#advanced-search-hostname').val().trim().split(" ")[0] + " "; + if($('#advanced-search-type').val() !== "") query += "type:" + $('#advanced-search-type').val() + " "; + if($('#advanced-search-running').val() !== "") query += "running:" + $('#advanced-search-running').val() + " "; + return query; + } + + $("#do-advanced").bind('click', function(){ + var query = buildAdvancedQuery(); + document.location = "#search/"+encodeURI(query); + }); + + $("#do-advanced-aggregation").bind('click', function(){ + var query = buildAdvancedQuery(); + document.location = "#aggregate/all/"+encodeURI(query); + }); + + $("#do-advanced-aggregation-cc").bind('click', function(){ + var query = buildAdvancedQuery(); + document.location = "#aggregate/cc/"+encodeURI(query); + }); + + $("#do-advanced-aggregation-as").bind('click', function(){ + var query = buildAdvancedQuery(); + document.location = "#aggregate/as/"+encodeURI(query); + }); + + $(".tip").tooltip(); + } }); return new mainSearchView; diff --git a/templates/search/main.html b/templates/search/main.html index 9c62548..6dc522b 100644 --- a/templates/search/main.html +++ b/templates/search/main.html @@ -1,6 +1,7 @@ <ul class="nav nav-tabs"> <li id="main-search-tab" class="search-tabs active"><a href="#simple">Simple Search</a></li> <li id="aggregated-search-tab" class="search-tabs"><a href="#aggregate">Aggregated Search</a></li> + <li id="advanced-search-tab" class="search-tabs"><a href="#advanced">Advanced Search</a></li> </ul> <div class="tab-content" id="search-tab-content"> @@ -33,6 +34,93 @@ do not include bridge data.</p> </div> </div> +<div id="advanced-search-tab-content" class="search tab-pane"> + + <p>The advanced search tool allows you to build advanced queries to search +for data about single relays and bridges in the Tor network or aggregated data about currently running relays. For single relays, it provides useful +information on how relays are configured along with graphs about their +past. Aggregated data provides insight into diversity in the network and the +probabilities of using relays in a particular country or AS as a guard, middle +or exit relay filtered by the search parameters.</p> +<div class="panel panel-default"><div class="panel-body"> + <form id="home-advanced-search"> + <div class="form-group"> + <label for="advanced-search-nickname">Nickname:</label> + <input type="text" class="form-control search-query" autocorrect="off" autocapitalize="off" id="advanced-search-nickname"> + </div> + <div class="form-group"> + <label for="advanced-search-fingerprint">Fingerprint:</label> + <div class="input-group"> + <input type="text" class="form-control" autocorrect="off" autocapitalize="off" id="advanced-search-fingerprint"> + <span class="input-group-addon"><input type="checkbox" id="advanced-search-family"> Include Family</span> + </div> + </div> + <div class="form-group"> + <label for="advanced-search-nickname">Contact:</label> + <input type="text" class="form-control search-query" autocorrect="off" autocapitalize="off" id="advanced-search-contact"> + </div> + <div class="form-group"> + <label for="advanced-search-flag">Flag:</label> + <select class="form-control" id="advanced-search-flag"> + <option value="">Any</option> + <option value="stable">Stable</option> + <option value="running">Running</option> + <option value="fast">Fast</option> + <option value="guard">Guard</option> + <option value="exit">Exit</option> + <option value="authority">Authority</option> + <option value="noedconsensus">NoEdConsensus</option> + </select> + </div> + <div class="form-group"> + <label for="advanced-search-country">Country:</label> + <select class="form-control" id="advanced-search-country"> + <option value="">Any</option> + <% var knownCountries = Object.keys(countries); knownCountries.sort(); %> + <% _.each(knownCountries, function(country){ %> + <option value="<%= country %>"><%= country %> - <%= countries[country] %></option> + <% }); %> + </select> + </div> + <div class="form-group"> + <label for="advanced-search-as">Autonomous System:</label> + <div class="input-group"> + <span class="input-group-addon">AS</span> + <input type="text" id="advanced-search-as" class="search-query form-control"> + </div> + </div> + <div class="form-group"> + <label for="advanced-search-nickname">Hostname:</label> + <input type="text" class="form-control search-query" autocorrect="off" autocapitalize="off" id="advanced-search-hostname"> + </div> + <div class="form-group"> + <label for="advanced-search-flag">Type^†:</label> + <select class="form-control" id="advanced-search-type"> + <option value="">Any</option> + <option value="relay">Only Relays</option> + <option value="bridge">Only Bridges</option> + </select> + </div> + <div class="form-group"> + <label for="advanced-search-flag">Running^†:</label> + <select class="form-control" id="advanced-search-running"> + <option value="">Any</option> + <option value="true">Only Running Relays</option> + <option value="false">Only Offline Relays</option> + </select> + </div> + <p><button id="do-advanced" class="btn btn-primary" type="button">Advanced Search</button></p> + <p> + <button id="do-advanced-aggregation" class="btn btn-primary" type="button">Advanced Aggregation</button> + <button id="do-advanced-aggregation-cc" class="btn btn-secondary tip" type="button" title="Aggregate by Country">by CC</button> + <button id="do-advanced-aggregation-as" class="btn btn-secondary tip" type="button" title="Aggregate by Autonomous System">by AS</button> + </p> + </form> + <p>^† These options are ignored when performing an aggregation as the aggregated searches are restricted to only currently running relays.</p> +</div></div><!-- /panel --> + </div> +</div> + <div class="well"> <p>You can search for Tor relays and bridges by using keywords. In particular, this tool enables you to search for (partial) nicknames (e.g.,