Fix the resultsdb frontend search
ClosedPublic
Actions

Authored by jskladan on Oct 14 2016, 11:59 AM.

Details

Reviewers

kparal
garretraziel
tflink
mkrizek

Commits

rRSFE22f0558d8992: Fix the resultsdb frontend search

Summary

Added suggestions for the testcase field using Twitter typeahead library.
There are also some other changes in the javascript, to make the search
work in a better way.

Test Plan

Tested manually

Diff Detail

Repository

rRSFE resultsdb_frontend

Lint

Automatic diff as part of commit; lint not applicable.

Unit

Automatic diff as part of commit; unit tests not applicable.

jskladan retitled this revision from to Fix the resultsdb frontend search.Oct 14 2016, 11:59 AM

jskladan updated this object.

jskladan edited the test plan for this revision. (Show Details)

jskladan added reviewers: tflink, mkrizek, kparal, garretraziel.

I haven't tested it, but code looks OK and we've tested on @jskladan's computer that it works and behaves allright.

This revision is now accepted and ready to land.Oct 14 2016, 12:19 PM

Not a huge fan of the GLOBAL stuff. Is there any other sane way to get the same thing done?

In D1027#19323, @tflink wrote:

Not a huge fan of the GLOBAL stuff. Is there any other sane way to get the same thing done?

Not that I know of. We could use flask-cache extension instead, but it just does the same thing, only in a way that you don't see, or we could set-up a memcached service, but that hardly seems like it's worth the trouble.

I don't see anything else that concerns me. I'd like to do the frontend in a different way someday but that day is not today and there are bigger fish to fry :)

Closed by commit rRSFE22f0558d8992: Fix the resultsdb frontend search (authored by Josef Skladanka <jskladan@redhat.com>). · Explain WhyOct 18 2016, 8:25 AM

This revision was automatically updated to reflect the committed changes.

Revision Contents

			Path	Packages
M			resultsdb_frontend/controllers/main.py (44 lines)
M			resultsdb_frontend/static/css/style.css (99 lines)
M			resultsdb_frontend/static/js/search.js (157 lines)
M			resultsdb_frontend/templates/index.html (8 lines)
M			resultsdb_frontend/templates/layout.html (76 lines)

Diff	ID	Base	Description	Created	Lint	Unit
Base			Base
Diff 1	2625	f14db40		Oct 14 2016, 11:59 AM	★	★
Diff 2	2634	f14db40	rRSFE22f0558d8992b8bab82611963cdf5b34f58d6a42	Oct 18 2016, 8:24 AM	★	★

Commit	Tree	Parents	Author	Summary	Date
95103f19d960	8fd19a00ab51	f14db400fd6d	Josef Skladanka	Fix the resultsdb frontend search (Show More…)	Oct 13 2016, 5:14 PM

Diff 2634

View Options

resultsdb_frontend/controllers/main.py

Show All 11 Lines
12	#	12	#
13	# You should have received a copy of the GNU General Public License along	13	# You should have received a copy of the GNU General Public License along
14	# with this program; if not, write to the Free Software Foundation, Inc.,	14	# with this program; if not, write to the Free Software Foundation, Inc.,
15	# 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.	15	# 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
16	#	16	#
17	# Authors:	17	# Authors:
18	# Josef Skladanka <jskladan@redhat.com>	18	# Josef Skladanka <jskladan@redhat.com>
19		19
20	from flask import Blueprint, render_template, redirect, url_for, request	20	import json
		21	from flask import Blueprint, render_template, redirect, url_for, request, Response
21	from resultsdb_frontend import app	22	from resultsdb_frontend import app
22		23
23	from resultsdb_api import ResultsDBapi, ResultsDBapiException	24	from werkzeug.contrib.cache import SimpleCache
24		25	CACHE = SimpleCache()
25	rdb_api = None	26	CACHE_TIMEOUT = 60
26		27
		28	from resultsdb_api import ResultsDBapi, ResultsDBapiException
		29	RDB_API = None
27		30
28	main = Blueprint('main', __name__)	31	main = Blueprint('main', __name__)
29		32
30	@app.before_first_request	33	@app.before_first_request
31	def before_first_request():	34	def before_first_request():
32	global rdb_api	35	global RDB_API
33	rdb_api = ResultsDBapi(app.config['RDB_URL'])	36	RDB_API = ResultsDBapi(app.config['RDB_URL'])
34		37
35	@main.route('/')	38	@main.route('/')
36	@main.route('/index')	39	@main.route('/index')
37	def index():	40	def index():
38	return redirect(url_for('main.results'))	41	return redirect(url_for('main.results'))
		42
		43	@main.route('/testcase_tokenizer')
		44	def testcase_tokenizer():
		45	global CACHE
		46
		47	cached = CACHE.get("tokenized_testcases")
		48	if cached is not None:
		49	return cached
		50
		51	tc_names = [tc['name'] for tc in RDB_API.get_testcases()['data']]
		52	data = sorted(tc_names, key=lambda x: (x.count('.'), x))
		53
		54	response = Response(response=json.dumps(data), status=200, mimetype="application/json")
		55	CACHE.set("tokenized_testcases", response, CACHE_TIMEOUT)
		56	return response
39		57
40	@main.route('/groups')	58	@main.route('/groups')
41	def groups():	59	def groups():
42	groups = rdb_api.get_groups(**dict(request.args))	60	groups = RDB_API.get_groups(**dict(request.args))
43	return render_template('groups.html', groups = groups)	61	return render_template('groups.html', groups = groups)
44		62
45	@main.route('/groups/<group_id>')	63	@main.route('/groups/<group_id>')
46	def group(group_id):	64	def group(group_id):
47	try:	65	try:
48	group = rdb_api.get_group(group_id)	66	group = RDB_API.get_group(group_id)
49	except ResultsDBapiException as e:	67	except ResultsDBapiException as e:
50	return str(e)	68	return str(e)
51	groups = dict(prev = None, next = None, data = [group])	69	groups = dict(prev = None, next = None, data = [group])
52	return render_template('groups.html', groups = groups)	70	return render_template('groups.html', groups = groups)
53		71
54	@main.route('/results')	72	@main.route('/results')
55	def results():	73	def results():
56	args = dict(request.args)	74	args = dict(request.args)
57	results = rdb_api.get_results(**args)	75	results = RDB_API.get_results(**args)
58	for result in results['data']:	76	for result in results['data']:
59	result['groups'] = (len(result['groups']), ','.join(result['groups']))	77	result['groups'] = (len(result['groups']), ','.join(result['groups']))
60	return render_template('results.html', results = results)	78	return render_template('results.html', results = results)
61		79
62	@main.route('/results/<result_id>')	80	@main.route('/results/<result_id>')
63	def result(result_id):	81	def result(result_id):
64	try:	82	try:
65	result = rdb_api.get_result(id = result_id)	83	result = RDB_API.get_result(id = result_id)
66	except ResultsDBapiException as e:	84	except ResultsDBapiException as e:
67	return str(e)	85	return str(e)
68	result['groups'] = (len(result['groups']), ','.join(result['groups']))	86	result['groups'] = (len(result['groups']), ','.join(result['groups']))
69	return render_template('result_detail.html', result = result)	87	return render_template('result_detail.html', result = result)
70		88
71	@main.route('/testcases')	89	@main.route('/testcases')
72	def testcases():	90	def testcases():
73	args = dict(request.args)	91	args = dict(request.args)
74	tcs = rdb_api.get_testcases(**args)	92	tcs = RDB_API.get_testcases(**args)
75	return render_template('testcases.html', testcases = tcs)	93	return render_template('testcases.html', testcases = tcs)
76		94
77	@main.route('/testcases/<testcase_name>')	95	@main.route('/testcases/<testcase_name>')
78	def testcase(testcase_name):	96	def testcase(testcase_name):
79	try:	97	try:
80	tc = rdb_api.get_testcase(name = testcase_name)	98	tc = RDB_API.get_testcase(name = testcase_name)
81	except ResultsDBapiException as e:	99	except ResultsDBapiException as e:
82	return str(e)	100	return str(e)
83	tcs = dict(prev = None, next = None, data = [tc])	101	tcs = dict(prev = None, next = None, data = [tc])
84	return render_template('testcases.html', testcases = tcs)	102	return render_template('testcases.html', testcases = tcs)
85		103

View Options

resultsdb_frontend/static/css/style.css

Show All 14 Lines		13	.footer {
15	width: 100%;	15		width: 100%;
16	height: 30px;	16		height: 30px;
17	background-color: #f5f5f5;	17		background-color: #f5f5f5;
18	}	18		}
19		19
20	.popover {	20		.popover {
21	z-index: 9000;	21		z-index: 9000;
22	}	22		}
		23
		24		span.twitter-typeahead .tt-menu,
		25		span.twitter-typeahead .tt-dropdown-menu {
		26		position: absolute;
		27		top: 100%;
		28		left: 0;
		29		z-index: 1000;
		30		display: none;
		31		float: left;
		32		min-width: 160px;
		33		padding: 5px 0;
		34		margin: 2px 0 0;
		35		list-style: none;
		36		font-size: 14px;
		37		text-align: left;
		38		background-color: #ffffff;
		39		border: 1px solid #cccccc;
		40		border: 1px solid rgba(0, 0, 0, 0.15);
		41		border-radius: 4px;
		42		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		43		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		44		background-clip: padding-box;
		45		}
		46		span.twitter-typeahead .tt-suggestion {
		47		display: block;
		48		padding: 3px 20px;
		49		clear: both;
		50		font-weight: normal;
		51		line-height: 1.42857143;
		52		color: #333333;
		53		white-space: nowrap;
		54		}
		55		span.twitter-typeahead .tt-suggestion.tt-cursor,
		56		span.twitter-typeahead .tt-suggestion:hover,
		57		span.twitter-typeahead .tt-suggestion:focus {
		58		color: #ffffff;
		59		text-decoration: none;
		60		outline: 0;
		61		background-color: #337ab7;
		62		}
		63		.input-group.input-group-lg span.twitter-typeahead .form-control {
		64		height: 46px;
		65		padding: 10px 16px;
		66		font-size: 18px;
		67		line-height: 1.3333333;
		68		border-radius: 6px;
		69		}
		70		.input-group.input-group-sm span.twitter-typeahead .form-control {
		71		height: 30px;
		72		padding: 5px 10px;
		73		font-size: 12px;
		74		line-height: 1.5;
		75		border-radius: 3px;
		76		}
		77		span.twitter-typeahead {
		78		width: 100%;
		79		}
		80		.input-group span.twitter-typeahead {
		81		display: block !important;
		82		height: 34px;
		83		}
		84		.input-group span.twitter-typeahead .tt-menu,
		85		.input-group span.twitter-typeahead .tt-dropdown-menu {
		86		top: 32px !important;
		87		}
		88		.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
		89		border-radius: 0;
		90		}
		91		.input-group span.twitter-typeahead:first-child .form-control {
		92		border-top-left-radius: 4px;
		93		border-bottom-left-radius: 4px;
		94		border-top-right-radius: 0;
		95		border-bottom-right-radius: 0;
		96		}
		97		.input-group span.twitter-typeahead:last-child .form-control {
		98		border-top-left-radius: 0;
		99		border-bottom-left-radius: 0;
		100		border-top-right-radius: 4px;
		101		border-bottom-right-radius: 4px;
		102		}
		103		.input-group.input-group-sm span.twitter-typeahead {
		104		height: 30px;
		105		}
		106		.input-group.input-group-sm span.twitter-typeahead .tt-menu,
		107		.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
		108		top: 30px !important;
		109		}
		110		.input-group.input-group-lg span.twitter-typeahead {
		111		height: 46px;
		112		}
		113		.input-group.input-group-lg span.twitter-typeahead .tt-menu,
		114		.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
		115		top: 46px !important;
		116		}
		117
		118		#scrollable-dropdown-menu .tt-menu {
		119		max-height: 150px;
		120		overflow-y: auto;
		121		}

View Options

resultsdb_frontend/static/js/search.js

1	/* waiting for reliable CND or own hosting of progressbar.js	1	$('document').ready(function() {
2	https://github.com/kimmobrunfeldt/progressbar.js	2	// set up the typeahead
3		3	var testcases = new Bloodhound({
4		4	datumTokenizer: Bloodhound.tokenizers.nonword,
5	function progressbar(){	5	queryTokenizer: Bloodhound.tokenizers.nonword,
6	$(".popover #progressbar-animation").removeClass("hide");	6	prefetch: {
7	var element = $(".popover #progressbar-animation")[0];	7	url: '/testcase_tokenizer',
8	var circle = new ProgressBar.Circle(element, {	8	cache: false,
9	color: "#428BCA",
10	strokeWidth: 0.75,
11	fill: "#fff",
12	easing: "easeInOut",
13	duration: 1200
14	});
15
16	function doit(){
17	circle.animate(1, function() {
18	setTimeout(function(){
19	circle.set(0);
20	doit();
21	}, 150);
22	});
23	}	9	}
		10	});
24		11
25	doit();	12	$('#testcase').typeahead({
		13	hint: true,
		14	highlight: true,
		15	minLength: 0
		16	},
		17	{
		18	name: 'testcases',
		19	limit: Infinity,
		20	source: testcases
26	}	21	}
27	*/	22	);
28		23
29	$(function() {	24	// Map the / key to switching the search field
30	$("#popover").popover(	25	$(document).bind('keypress', function(e) {
		26	if(e.keyCode == 47 && !$(":focus").is("input")) //slash key
31	{	27	{
32	container: 'body',	28	e.preventDefault();
33	html : true,	29	$("#searchButton").click();
34	title: function() {
35	return $("#popover-head").html();
36	},
37	content: function() {
38	return $("#popover-content").html();
39	}
40	}	30	}
41	).on('click', function(){	31	});
42	$(".popover #query").focus();
43	$(".popover #searchform").submit(function(e){
44		32
45	var query = $(".popover #query").val();	33	// Focus the item field when search is shown
46	var testcase = $(".popover #testcase").val();	34	$('#collapseSearch').on('shown.bs.collapse', function () {
47	var type = $(".popover #type").val();	35	$("#item").focus();
48	var url = $(".popover #url").val() + "?";	36	})
49	var outcome = $(".popover #outcome").val();
50		37
51	query = query.replace(/\*/g,"%");	38	// Replace the submit button behaviour
		39	$("#searchform").submit(function(e){
		40	e.preventDefault();
52		41
53	if(query){	42	var url = $("#url").val() + "?";
54	if(query.indexOf("%") != -1){	43	var item = $.trim($("#item").val());
		44	var testcase = $.trim($("#testcase").val());
		45	var outcome = $("#outcome").val();
		46
		47	// split the string by whitespace or comma
		48	items = item.split(/[\s,]+/);
		49	var item_query = "";
		50	// for each part add it to the query-string buffer
		51	items.forEach(function(item){
		52	item = $.trim(item);
		53	if(item){
		54	if(item.indexOf("*") != -1){
55	//wildcard match	55	//wildcard match
56	url += "item:like=" + query;	56	item_query += item + ",";
57	} else {	57	} else {
58	//substring match	58	//substring match
59	url += "item:like=%" + query + "%";	59	item_query += "" + item + ",";
60	}	60	}
61	}	61	}
		62	});
		63	// if the search contained any item value, add it to overall query url
		64	if(item_query){
		65	url+='item:like='+item_query.slice(0, -1);
		66	}
62		67
63	if(testcase != 0)	68	if(testcase != 0){
64	url += "&testcase_name="+testcase;	69	// split by whitespace or comma
65	if(type != 0)	70	testcases = testcase.split(/[\s,]+/);
66	url += "&type="+type;
67	if(outcome)
68	url += "&outcome="+outcome;
69
70	e.preventDefault();
71
72	//progressbar();
73	//$(".popover #searchform").hide();
74		71
75	window.location.href = encodeURI(url);	72	// check whethe like-search is necessary
76	});	73	var is_like=false;
		74	testcases.forEach(function(testcase){
		75	if(testcase.indexOf("*") != -1){
		76	is_like=true;
		77	}
		78	return $.trim(testcase);
77	});	79	});
		80	testcase = testcases.join(',');
78		81
79	$(document).bind('keypress', function(e) {	82	// construct the url
80	if(e.keyCode == 47 && !$(":focus").is("input")) //slash key	83	url += "&testcases";
81	{	84	if(is_like){
82	e.preventDefault();	85	url += ":like";
83	$("#popover").click();	86	}
		87	url += "="+testcase;
84	}	88	}
		89	if(outcome)
		90	url += "&outcome="+outcome;
		91
		92	console.log(url);
		93	window.location.href = encodeURI(url);
85	});	94	});
86	});	95	});

View Options

resultsdb_frontend/templates/index.html

1	{% extends "layout.html" %}	1	{% extends "layout.html" %}
2		2
3	{% block body %}	3	{% block body %}
4		4
5	<h1>Welcome to resultsdb_frontend!</h1>	5	Nothing to see here, folks.
6
7	<p>
8	This is super-awesome page for the Flask Project. You can try logging in (admin/admin), or accessing the <a href="{{ url_for('admin.admin_index') }}">Admin interface</a>.
9	</p>
10		6
11	{% endblock %}	7	{% endblock %}

View Options

resultsdb_frontend/templates/layout.html

Show All 23 Lines		23	<div class="navbar-collapse collapse">
24		24
25	<ul class="nav navbar-nav">	25		<ul class="nav navbar-nav">
26	<li><a href="{{ url_for('main.results') }}">Results</a></li>	26		<li><a href="{{ url_for('main.results') }}">Results</a></li>
27	<li><a href="{{ url_for('main.testcases') }}">Testcases</a></li>	27		<li><a href="{{ url_for('main.testcases') }}">Testcases</a></li>
28	<li><a href="{{ url_for('main.groups') }}">Groups</a></li>	28		<li><a href="{{ url_for('main.groups') }}">Groups</a></li>
29	</ul>	29		</ul>
30		30
31	<form class="navbar-form navbar-right" role="search">	31		<form class="navbar-form navbar-right" role="search">
32	<button type="button" class="btn btn-default" id="popover" data-placement="bottom">	32		<button type="button" class="btn btn-default" id="searchButton" data-toggle="collapse" data-target="#collapseSearch">
33	<span class="glyphicon glyphicon-search"></span>	33		<span class="glyphicon glyphicon-search"></span>
34	</button>	34		</button>
35	</form>	35		</form>
36		36
37	</div><!--/.nav-collapse -->	37		</div><!--/.nav-collapse -->
38	</div><!--/.container -->	38		</div><!--/.container -->
39	</div><!--/.navbar -->	39		</div><!--/.navbar -->
40		40
41		41
42	<div class="container">	42		<div class="container">
		43		<!-- Search html -->
		44		<div class="collapse panel panel-default" id="collapseSearch">
		45		<div class="panel-heading">Search</div>
		46		<div class="panel-body">
		47		<form id="searchform" role="form" name="searchform" action="">
		48		<input id="url" type="hidden" value="{{ url_for('main.results') }}">
		49		<div class="form-group">
		50		<input class="form-control" id="item" placeholder="Item" value="">
		51		</div>
		52
		53		<div class="form-group" id="scrollable-dropdown-menu">
		54		<input class="form-control" id="testcase" placeholder="Testcase" value="">
		55		</div>
		56
		57		<div class="form-group">
		58		<select multiple class="form-control" id="outcome" size=4>
		59		<option>PASSED</option>
		60		<option>FAILED</option>
		61		<option>INFO</option>
		62		<option>NEEDS_INSPECTION</option>
		63		</select>
		64		</div>
		65
		66		<button type="submit" class="btn btn-default" id="go">Go!</button>
		67		</form>
		68		</div>
		69		</div>
		70
43	{% for message in get_flashed_messages() %}	71		{% for message in get_flashed_messages() %}
44	<div class="alert alert-info">	72		<div class="alert alert-info">
45	<button type="button" class="close" data-dismiss="alert">×</button>	73		<button type="button" class="close" data-dismiss="alert">×</button>
46	{{ message }}	74		{{ message }}
47	</div>	75		</div>
48	{% endfor %}	76		{% endfor %}
49		77
50	{% block body %}	78		{% block body %}
51	<h1> My First Flask Application! </h1>	79		<h1> My First Flask Application! </h1>
52	{% endblock %}	80		{% endblock %}
53	</div>	81		</div>
54		82
55	{% block footer %}	83		{% block footer %}
56	<footer class="footer">	84		<footer class="footer">
57	<div class="container text-right">	85		<div class="container text-right">
58	<p class="text-muted">Version: {{app_version}}</p>	86		<p class="text-muted">Version: {{app_version}}</p>
59	</div>	87		</div>
60	</footer>	88		</footer>
61	{% endblock %}	89		{% endblock %}
62		90
63	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->	91		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
64	<script src="//code.jquery.com/jquery.js"></script>	92		<script src="//code.jquery.com/jquery.js"></script>
65	<!-- Include all compiled plugins -->	93		<!-- Include all compiled plugins -->
66	<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>	94		<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
67	<!-- Progressbar eyecandy (https://github.com/kimmobrunfeldt/progressbar.js)
68	<script src="waiting for reliable CND or own hosting"></script>
69	-->
70	<!-- Search logic -->	95		<!-- Search logic -->
		96		<script src="http://twitter.github.com/typeahead.js/releases/0.11.1/typeahead.bundle.js"></script>
71	<script src="{{ url_for('static', filename='js/search.js') }}"></script>	97		<script src="{{ url_for('static', filename='js/search.js') }}"></script>
72		98
73	<!-- Search html -->
74	<div id="popover-head" class="hide">Search</div>
75	<div id="popover-content" class="hide">
76
77	<form id="searchform" role="form" name="searchform" action="">
78	<input id="url" type="hidden" value="{{ url_for('main.results') }}">
79	<div class="form-group">
80	<input class="form-control" id="query" placeholder="Item" value="">
81	</div>
82
83	<div class="form-group">
84	<select class="form-control" id="testcase">
85	<option value="0">Any testcase</option>
86	<option value="rpmlint">Rpmlint</option>
87	<option value="depcheck">Depcheck</option>
88	<option value="upgradepath">Upgradepath</option>
89	</select>
90	</div>
91
92	<div class="form-group">
93	<select class="form-control" id="type">
94	<option value="0">Any type</option>
95	<option value="koji_build">Koji build</option>
96	<option value="bodhi_update">Bodhi update</option>
97	<option value="koji_tag">Koji tag</option></select>
98	</div>
99
100	<div class="form-group">
101	<select multiple class="form-control" id="outcome" size=5>
102	<option>PASSED</option>
103	<option>FAILED</option>
104	<option>INFO</option>
105	<option>ABORTED</option>
106	<option>NEEDS_INSPECTION</option>
107	</select>
108	</div>
109
110	<button type="submit" class="btn btn-default" id="go">Go!</button>
111	</form>
112	<div id="progressbar-animation" class="hide" style="width:200px;"></div>
113	</div>
114	</div>
115		99
116	{% if config['FEDMENU_URL'] is defined %}	100		{% if config['FEDMENU_URL'] is defined %}
117	<script src="{{ config['FEDMENU_URL'] }}/js/fedmenu.js"></script>	101		<script src="{{ config['FEDMENU_URL'] }}/js/fedmenu.js"></script>
118	<script>	102		<script>
119	fedmenu({	103		fedmenu({
120	'url': '{{ config["FEDMENU_DATA_URL"] }}',	104		'url': '{{ config["FEDMENU_DATA_URL"] }}',
121	'mimeType': 'application/javascript',	105		'mimeType': 'application/javascript',
122	'position': 'bottom-right',	106		'position': 'bottom-right',
Show All 9 Lines

Fix the resultsdb frontend searchClosedPublicActions

Details

Diff Detail

Revision Contents

Diff 2634

resultsdb_frontend/controllers/main.py

resultsdb_frontend/static/css/style.css

resultsdb_frontend/static/js/search.js

resultsdb_frontend/templates/index.html

resultsdb_frontend/templates/layout.html

Fix the resultsdb frontend search
ClosedPublic
Actions