diff --git a/app/assets/jsx/buckets.jsx b/app/assets/jsx/buckets.jsx
index 0e46cf4..987caf7 100644
--- a/app/assets/jsx/buckets.jsx
+++ b/app/assets/jsx/buckets.jsx
@@ -20,17 +20,70 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
}
},
- render: function() {
- var bucketNodes = this.props.dumps.map(function (bucketAndDumps) {
+ filterBucketAndDumps: function(bucketAndDumps) {
+
+ var that = this;
+
+ function matchesFilterTerm(s) {
+ return s.toLowerCase().indexOf(that.props.filterTerm.toLowerCase()) !== -1;
+ }
+
+ function filterTags(tagList) {
+ var grepResult = $.grep(tagList, function(tag) {
+ return matchesFilterTerm(tag.name);
+ });
+ return grepResult.length > 0;
+ }
+
+ function filterBucket(bucket) {
+ return matchesFilterTerm(bucket.name) || filterTags(bucket.tagging.tags);
+ }
+
+ function filterSingleDump(dump) {
+ console.log(JSON.stringify(dump));
+ return matchesFilterTerm(dump.filename) ||
+ filterTags(dump.tagging.tags);
+ }
+
+ function filterDumps(dumps) {
+ return dumps.filter(filterSingleDump);
+ }
+
+ if (!this.props.filterTerm) {
+ return bucketAndDumps;
+ }
+ else {
var bucket = bucketAndDumps[0];
var dumps = bucketAndDumps[1];
- return (
- );
+ var filteredBucketAndDumps = null;
+ if (filterBucket(bucket)) {
+ filteredBucketAndDumps = [bucket, dumps];
+ }
+ else {
+ var filteredDumps = filterDumps(dumps);
+ if (filteredDumps.length > 0) {
+ filteredBucketAndDumps = [bucket, filteredDumps];
+ }
+ }
+ return filteredBucketAndDumps;
+ }
+ },
+
+ render: function() {
+ var that = this;
+ var bucketNodes = this.props.dumps.map(function (bucketAndDumps) {
+ var filteredBucketAndDumps = that.filterBucketAndDumps(bucketAndDumps);
+ if (filteredBucketAndDumps) {
+ var bucket = filteredBucketAndDumps[0];
+ var dumps = filteredBucketAndDumps[1];
+ return (
+ );
+ }
});
return (
@@ -142,12 +195,33 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
}
});
+ var QuickFilterBox = React.createClass({
+ handleInputChange: function(event) {
+ var onChangeHandler = this.props.onChange;
+ if (onChangeHandler) {
+ onChangeHandler(event.target.value);
+ }
+ },
+
+ render: function() {
+ return (
+
+
+
+
+ );
+ }
+ });
+
var Buckets = React.createClass({
getInitialState: function() {
if(bucketsAsJson) {
return {dumps: bucketsAsJson.buckets, analyzingDumps: bucketsAsJson.analyzing};
}
- return {dumps: [], analyzingDumps: []};
+ return {dumps: [], analyzingDumps: [], filterTerm: ''};
},
loadBucketsFromServer: function() {
@@ -167,10 +241,17 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
this.loadBucketsFromServer();
setInterval(this.loadBucketsFromServer, this.props.pollInterval);
},
+
+ filterChanged: function(filterTerm) {
+ this.state.filterTerm = filterTerm;
+ this.setState(this.state);
+ },
+
render: function() {
return (
-
+
+
);
}
diff --git a/app/assets/stylesheets/styles.less b/app/assets/stylesheets/styles.less
index 33ae124..ceb72b8 100644
--- a/app/assets/stylesheets/styles.less
+++ b/app/assets/stylesheets/styles.less
@@ -444,3 +444,14 @@ pre {
font-weight: normal;
text-align: right;
}
+
+.quick-filter-box {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ margin-left: 10px;
+ margin-right: 10px;
+
+ input {
+ padding: 0.2em;
+ }
+}