group by multiple fields

Before we could only group by a single field. But it is acutally
very useful to group by multiple fields. For example to see the
graph for a small set of methods grouped by host and project.

pdb-ui/src/main/java/org/lucares/pdbui/domain/PlotRequest.java

@@ -1,5 +1,7 @@
 package org.lucares.pdbui.domain;
 
+import java.util.List;
+
 public class PlotRequest {
 	private String query;
 
@@ -7,7 +9,7 @@ public class PlotRequest {
 
 	private int width = 1000;
 
-	private String groupBy;
+	private List<String> groupBy;
 
 	private LimitBy limitBy = LimitBy.NO_LIMIT;
 
@@ -46,11 +48,11 @@ public class PlotRequest {
 		return query + ":" + height + "x" + width;
 	}
 
-	public String getGroupBy() {
+	public List<String> getGroupBy() {
 		return groupBy;
 	}
 
-	public void setGroupBy(final String groupBy) {
+	public void setGroupBy(final List<String> groupBy) {
 		this.groupBy = groupBy;
 	}
 

pdb-ui/src/main/resources/resources/js/search.js

@@ -52,18 +52,9 @@ function renderGroupBy()
 	
 	var success = function(response){
 		
-		$('#search-group-by').empty();
-		
-		var option = new Option("", "");
-		$('#search-group-by').append($(option));
-		
-		response.forEach(
-			(item, index) => {
-				var option = new Option(item, item);
-				$('#search-group-by').append($(option));
-			}
-		);
-		
+		initSearchGroupBy('#search-group-by-1', response);
+		initSearchGroupBy('#search-group-by-2', response);
+		initSearchGroupBy('#search-group-by-3', response);
 	};
 	var error = function(e) {
 		$('#result-view').text("FAILED: " + JSON.parse(e.responseText).message);
@@ -73,6 +64,20 @@ function renderGroupBy()
 	getJson("fields", request, success, error);
 }
 
+function initSearchGroupBy(selector, response)
+{
+	$(selector).empty();
+	var option = new Option("", "");
+	$(selector).append($(option));
+	
+	response.forEach(
+		(item, index) => {
+			var option = new Option(item, item);
+			$(selector).append($(option));
+		}
+	);
+}
+
 function showLoadingIcon()
 {
 	$('#result-view').html("<div class='center'><div class='uil-cube-css' style='-webkit-transform:scale(0.41)'><div /><div></div><div></div><div></div></div></div>");
@@ -86,7 +91,7 @@ function plot(event){
 	request['query'] = $('#search-input').val();
 	request['height'] = $('#result-view').height()-15;
 	request['width'] = $('#result-view').width()-15;
-	request['groupBy'] = $('#search-group-by').val();
+	request['groupBy'] = groupBy();
 	request['limitBy'] = $('#search-limit-by').val();
 	request['limit'] = parseInt($('#search-limit-value').val());
 	request['dateFrom'] = $('#search-date-from').val();
@@ -111,6 +116,20 @@ function plot(event){
 	
 }
 
+function groupBy()
+{
+	var result = [];
+	
+	for (var i = 1; i <= 3; i++)
+	{		
+		if ($('#search-group-by-'+i).val() != "")
+		{
+			result.push($('#search-group-by-'+i).val());
+		}
+	}
+	return result;
+}
+
 function postJson(url, requestData, successCallback, errorCallback) {
 
 	$.ajax({
@@ -135,3 +154,4 @@ function getJson(url, requestData, successCallback, errorCallback) {
 		.fail(errorCallback);
 }
 
+

pdb-ui/src/main/resources/templates/main.html

@@ -19,7 +19,10 @@
 			<input id="search-input" data-autocomplete="autocomplete"
 				data-autocomplete-empty-message="nothing found" />
 		</div>
-		<label for="search-group-by">Group By:</label> <select id="search-group-by"></select>
+		<label for="search-group-by-1">Group By:</label> 
+		<select id="search-group-by-1"></select>
+		<select id="search-group-by-2"></select>
+		<select id="search-group-by-3"></select>
 		
 		<label for="search-limit-by">Limit By:</label>
 		<select id="search-limit-by">