recipes.html: Require keyword for recipe search
v2 cover recipes.html: Require keyword for recipe search
For v2, changed the javascript validate() function to jquery.
The following changes since commit 44386eea41a8e1bb8a3ab831613cfc1a19ff6ecd:
querysethelper: fix searching (2017-10-31 09:58:30 +1300)
are available in the git repository at:
git://git.yoctoproject.org/layerindex-web abrindle/recipe_search
http://git.yoctoproject.org/cgit.cgi/layerindex-web/log/?h=abrindle/recipe_search
Amanda Brindle (1):
recipes.html: Require keyword for recipe search
layerindex/views.py | 10 ++++++++-- templates/layerindex/distros.html | 3 ++- templates/layerindex/machines.html | 3 ++- templates/layerindex/recipes.html | 12 +++++++++++- 4 files changed, 23 insertions(+), 5 deletions(-)
Signature · 1 line
2.7.4
PATCH v2 1/1 recipes.html: Require keyword for recipe search
Use JavaScript to check if the search box for recipe search is empty before querying the database. This will prevent the "502 Bad Gateway" error that occurs when the query takes too long due to the large list of recipes.
Add a browse button for the Machines and Distros pages.
Fixes [YOCTO #11930]
--- layerindex/views.py | 10 ++++++++-- templates/layerindex/distros.html | 3 ++- templates/layerindex/machines.html | 3 ++- templates/layerindex/recipes.html | 12 +++++++++++- 4 files changed, 23 insertions(+), 5 deletions(-)
layerindex/views.py +8 -2
@@ -656,7 +656,10 @@ class MachineSearchView(ListView): def get_queryset(self): _check_url_branch(self.kwargs) - query_string = self.request.GET.get('q', '') + if self.request.GET.get('search', ''): + query_string = self.request.GET.get('q', '') + else: + query_string = "" init_qs = Machine.objects.filter(layerbranch__branch__name=self.kwargs['branch']) if query_string.strip(): entry_query = simplesearch.get_query(query_string, ['name', 'description'])
@@ -705,7 +708,10 @@ class DistroSearchView(ListView): def get_queryset(self): _check_url_branch(self.kwargs) - query_string = self.request.GET.get('q', '') + if self.request.GET.get('search', ''): + query_string = self.request.GET.get('q', '') + else: + query_string = "" init_qs = Distro.objects.filter(layerbranch__branch__name=self.kwargs['branch']) if query_string.strip(): entry_query = simplesearch.get_query(query_string, ['name', 'description'])
templates/layerindex/distros.html +2 -1
@@ -34,7 +34,8 @@ <div class="input-append"> <form id="filter-form" action="{% url 'distro_search' url_branch %}" method="get"> <input type="text" class="input-xxlarge" id="appendedInputButtons" placeholder="Search distros" name="q" value="{{ search_keyword }}" /> - <button class="btn" type="submit">search</button> + <button class="btn" type="submit" name="search" value="1">search</button> + <button class="btn" type="submit" name="browse" value="1">browse</button> </form> </div> </div>
templates/layerindex/machines.html +2 -1
@@ -33,7 +33,8 @@ <div class="input-append"> <form id="filter-form" action="{% url 'machine_search' url_branch %}" method="get"> <input type="text" class="input-xxlarge" id="appendedInputButtons" placeholder="Search machines" name="q" value="{{ search_keyword }}" /> - <button class="btn" type="submit">search</button> + <button class="btn" type="submit" name="search" value="1">search</button> + <button class="btn" type="submit" name="browse" value="1">browse</button> </form> </div> </div>
templates/layerindex/recipes.html +11 -1
@@ -32,13 +32,14 @@ <div class="row-fluid"> <div class="input-append"> - <form id="filter-form" action="{% url 'recipe_search' url_branch %}" method="get"> + <form id="filter-form" action="{% url 'recipe_search' url_branch %}" method="get" onsubmit="return validate()"> <input type="text" class="input-xxlarge" id="appendedInputButtons" placeholder="Search recipes" name="q" value="{{ search_keyword }}" /> <button class="btn" type="submit">search</button> </form> </div> </div> + <div id="error"> </div> {% if recipe_list %} <table class="table table-striped table-bordered recipestable"> <thead>
@@ -87,5 +88,14 @@ $('.icon-hdd').tooltip({title:"Inherits image"}); $('.label-inverse').tooltip(); }); + + function validate(){ + if (!$("#appendedInputButtons").val()){ + $("#error").html("<error>Recipe search cannot be blank</error>"); + $("error").addClass("control-group alert alert-error"); + return false; + } + } + </script> {% endblock %}
Signature · 1 line
2.7.4
Hi Amanda,
A few comments below.
Quoted 4 lines · NZDT Amanda Brindle
Use JavaScript to check if the search box for recipe search is empty before querying the database. This will prevent the "502 Bad Gateway" error that occurs when the query takes too long due to the large list of recipes.
We should mention that the main reason we are using this workaround rather than fixing the underlying issue is that since there are so many recipes spread across quite a number of layers in the OE index, there's no point allowing you to search without a keyword in order to browse the list; it simply isn't digestible as a whole.
Quoted 1 line
Add a browse button for the Machines and Distros pages.
Could you also please add one for the new Classes page you added (now merged to master)?
Quoted 89 lines
Fixes [YOCTO #11930]
Signed-off-by Amanda Brindle <[email protected]>--- layerindex/views.py | 10 ++++++++-- templates/layerindex/distros.html | 3 ++- templates/layerindex/machines.html | 3 ++- templates/layerindex/recipes.html | 12 +++++++++++- 4 files changed, 23 insertions(+), 5 deletions(-)layerindex/views.py +8
-2@@ -656,7 +656,10 @@ class MachineSearchView(ListView): def get_queryset(self): _check_url_branch(self.kwargs) - query_string = self.request.GET.get('q', '') + if self.request.GET.get('search', ''): + query_string = self.request.GET.get('q', '') + else: + query_string = "" init_qs = Machine.objects.filter(layerbranch__branch__name=self.kwargs['branch']) if query_string.strip(): entry_query = simplesearch.get_query(query_string, ['name', 'description'])@@ -705,7 +708,10 @@ class DistroSearchView(ListView): def get_queryset(self): _check_url_branch(self.kwargs) - query_string = self.request.GET.get('q', '') + if self.request.GET.get('search', ''): + query_string = self.request.GET.get('q', '') + else: + query_string = "" init_qs = Distro.objects.filter(layerbranch__branch__name=self.kwargs['branch']) if query_string.strip(): entry_query = simplesearch.get_query(query_string, ['name', 'description'])templates/layerindex/distros.html +2
-1@@ -34,7 +34,8 @@ <div class="input-append"> <form id="filter-form" action="{% url 'distro_search' url_branch %}" method="get"> <input type="text" class="input-xxlarge" id="appendedInputButtons" placeholder="Search distros" name="q" value="{{ search_keyword }}" /> - <button class="btn" type="submit">search</button> + <button class="btn" type="submit" name="search" value="1">search</button> + <button class="btn" type="submit" name="browse" value="1">browse</button> </form> </div> </div>templates/layerindex/machines.html +2
-1@@ -33,7 +33,8 @@ <div class="input-append"> <form id="filter-form" action="{% url 'machine_search' url_branch %}" method="get"> <input type="text" class="input-xxlarge" id="appendedInputButtons" placeholder="Search machines" name="q" value="{{ search_keyword }}" /> - <button class="btn" type="submit">search</button> + <button class="btn" type="submit" name="search" value="1">search</button> + <button class="btn" type="submit" name="browse" value="1">browse</button> </form> </div> </div>templates/layerindex/recipes.html +2
-1@@ -32,13 +32,14 @@ <div class="row-fluid"> <div class="input-append"> - <form id="filter-form" action="{% url 'recipe_search' url_branch %}" method="get"> + <form id="filter-form" action="{% url 'recipe_search' url_branch %}" method="get" onsubmit="return validate()"> <input type="text" class="input-xxlarge" id="appendedInputButtons" placeholder="Search recipes" name="q" value="{{ search_keyword }}" /> <button class="btn" type="submit">search</button> </form> </div> </div> + <div id="error"> </div> {% if recipe_list %} <table class="table table-striped table-bordered recipestable"> <thead>@@ -87,5 +88,14 @@ $('.icon-hdd').tooltip({title:"Inherits image"}); $('.label-inverse').tooltip();
templates/layerindex/recipes.html line 99
Quoted 10 lines
templates/layerindex/recipes.html +9
-0}); + + function validate(){ + if (!$("#appendedInputButtons").val()){ + $("#error").html("<error>Recipe search cannot be blank</error>"); + $("error").addClass("control-group alert alert-error"); + return false; + } + } +
I'm not sure <error> is a valid HTML tag. Looking at the bootstrap docs I think we should actually be using its error state and help text functionality (see "Validation states" on http://getbootstrap.com/2.3.2/base-css.html#forms ). I tested it and to fix the layout apparently we need to rearrange the tags so that <form> is immediately under the row-fluid div, i.e. it should be:
<div class="row-fluid">
<form ...>
<div class="control-group">
<div class="controls" id="searchfield">
<div class="input-append">
<input ... />
<button ...>search</button>
</div>
<span class="help-inline" id="errortext"></span>
</div>
</div>
</form>
</div>For maximum effect you also need to actually focus the search box at the same time as setting the error within the javascript.
If you could also change the text to "Please specify search text" at the same time (and surround with <p></p> to get the correct alignment) that would be great.
Thanks,
Paul
Signature · 2 lines
Paul Eggleton Intel Open Source Technology Centre
Quoted 7 lines · NZDT Paul Eggleton
I'm not sure <error> is a valid HTML tag. Looking at the bootstrap docs I think we should actually be using its error state and help text functionality (see "Validation states" on http://getbootstrap.com/2.3.2/
base-css.html#forms ). I tested it and to fix the layout apparently we need to rearrange the tags so that <form> is immediately under the row-fluid div, i.e. it should be:
Quoted 14 lines
<div class="row-fluid">
<form ...>
<div class="control-group">
<div class="controls" id="searchfield">
<div class="input-append">
<input ... />
<button ...>search</button>
</div>
<span class="help-inline" id="errortext">
</span>
</div>
</div>
</form>
</div>Hmm, actually that's wrong, we want the id on the control-group div not the controls one i.e.
<div class="row-fluid">
<form ...>
<div class="control-group" id="searchfield">
<div class="controls">
<div class="input-append">
<input ... />
<button ...>search</button>
</div>
<span class="help-inline" id="errortext"></span>
</div>
</div>
</form>
</div>Cheers,
Paul
Signature · 2 lines
Paul Eggleton Intel Open Source Technology Centre