Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
258 lines (222 sloc) 6.4 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Faceted Bugzilla</title>
<script type='text/javascript' src='jquery-1.8.2.min.js'></script>
<script type='text/javascript' src='jquery.isotope.min.js'></script>
<script type="text/javascript" src="bugzilla.js"></script>
<script type="text/javascript" src="github.js"></script>
<script type="text/javascript" src="mustache.js" ></script>
<script type="text/javascript" src="asyncStorage.js" ></script>
<script type="text/javascript" src="eventEmitter.js" ></script>
<!-- test data
<script type="text/javascript" src="bugzillaData.js" ></script>
<script type="text/javascript" src="githubData.js" ></script>
-->
<style>
body{
margin: 0;
padding: 0
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 9pt;
background-image: -moz-radial-gradient(center 45deg, circle closest-side, #fff 0%, yellow 500%);
background-attachment: fixed;
text-align: left;
}
#filters {
float: left;
max-width: 20em;
border: 1px solid black;
}
#content {
border: 1px solid red;
min-width: 80em;
float: left;
}
.item {
text-align: center;
width: 15em;
margin: 10px;
border-radius: 0.5em;
background: rgba(0, 0, 0, 0.1);
text-align: center;
min-width: 10em;
min-height: 5em;
margin: 2em;
}
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden, .isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
</style>
</head>
<body>
<input type="text" id="input" value='sw:ffos_perf'></input>
<br clear=all>
<div id='filters'>
</div>
<div id="content" class="span10">
<br clear="all">
<div id='feedback' style='text-align: center;'></div>
<br clear="all">
<div id='summary' style='text-align: center;'></div>
<br clear="all">
<div id="container"></div>
</div>
<script>
// events setup
var self = this
EventEmitter(self)
function bs(options, callback) {
Bugzilla.ajax({
url: '/bug',
data: options,
success: function(data) {
var result = data.bugs || data.data
callback(result)
},
error: function(err) {
console.log('err', err)
}
})
}
// isotope filters
function onFilterClick(el) {
var selector = $(el).attr('data-filter')
$('#container').isotope({ filter: selector })
return false
}
$("#input").keyup(function(event){
if (event.keyCode == 13) {
var search = this.value
doSearch(search)
}
})
function doSearch(str) {
bs({
quicksearch: str
}, function(results) {
var container = document.querySelector('#container')
var searchClasses = {}
classes.forEach(function(c) {
searchClasses[c] = []
})
container.innerHTML = ''
// helper - only add value to an array if not already there
function pushIfNew(arr, val) {
if (arr.indexOf(val) == -1)
arr.push(val)
}
// process bugs
results.forEach(function(bug) {
// array of css classes
// 'item' for isotope, should be a const
var bugClasses = ['item']
// iterate over bug properties
for (var k in bug) {
// handle name fields
if (k == 'assigned_to' || k == 'creator') {
pushIfNew(searchClasses[k], bug[k].name)
bugClasses.push(bug[k].name)
}
// keyword is array, handle special
else if (k == 'keywords') {
bug[k].forEach(function(v) {
pushIfNew(searchClasses[k], v)
})
bugClasses.push(bug[k])
}
// TODO: handle whiteboard flags
// all other supported fields (defined in classes array)
else if (classes.indexOf(k) != -1) {
pushIfNew(searchClasses[k], bug[k])
bugClasses.push(bug[k])
}
}
container.innerHTML += '<div class="' + bugClasses.join(' ') + '">' + bug.summary + '</div>'
})
// set up filters UI based on bug query results
var filters = document.querySelector('#filters')
// reset existing
filters.innerHTML = ''
for (var cl in searchClasses) {
// filter title
filters.innerHTML += '<h3>' + cl + '</h3>'
// list of filter values
var ul = document.createElement('ul')
filters.appendChild(ul)
// starting with "show all"
ul.innerHTML += '<li><a href="#" data-filter="*">show all</a></li>'
// followed by all the values
searchClasses[cl].forEach(function(val) {
ul.innerHTML += '<li><a href="#" data-filter=".' + val +'">' + val + '</a></li>'
})
}
$('#container').isotope({
itemSelector : '.item'
})
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
console.log(selector)
$('#container').isotope({ filter: selector });
return false;
});
})
}
$(document).ready(function() {
if (document.location.search)
doSearch(document.location.search.substr(1))
document.querySelector('#input').focus()
})
var classes = [
//'customfields', // collect the values
'keywords', // aggregate the array
//'qa_contact' // .real_name
//'platform', // don't need
//'version',
'creator', // .real_name
//'last_change_time', // not a filter, is a sort
'assigned_to', // .real_name
'whiteboard',
//'creation_time',
'status',
'severity',
'component',
'product',
'priority',
'resolution',
//'target_milestone',
//'op_sys',
]
</script>
</body>
</html>