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; + } +}