From ee5091f3de6796ae9fd5d529fea58736aadfe5cb Mon Sep 17 00:00:00 2001
From: codingphil <philip.lonsing@gmx.at>
Date: Tue, 14 Apr 2015 00:40:08 +0200
Subject: [PATCH 1/2] Implemented QuickFilterBox element. No actual filtering
 yet.

---
 app/assets/jsx/buckets.jsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app/assets/jsx/buckets.jsx b/app/assets/jsx/buckets.jsx
index 0e46cf4..77a8e03 100644
--- a/app/assets/jsx/buckets.jsx
+++ b/app/assets/jsx/buckets.jsx
@@ -142,6 +142,31 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
           }
         });
 
+        var QuickFilterBox = React.createClass({
+          getInitialState: function() {
+            return { searchTerm: "", onChange: undefined }
+          },
+
+          handleInputChange: function(event) {
+            var onChangeHandler = this.props.onChange;
+            if (onChangeHandler) {
+              onChangeHandler(event.target.value);
+            }
+          },
+
+          render: function() {
+            return (
+              <div>
+                <input
+                  type="text"
+                  placeholder="filter dumps"
+                  onChange={this.handleInputChange}>
+                </input>
+              </div>
+            );
+          }
+        });
+
         var Buckets = React.createClass({
           getInitialState: function() {
             if(bucketsAsJson) {
@@ -167,9 +192,15 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
             this.loadBucketsFromServer();
             setInterval(this.loadBucketsFromServer, this.props.pollInterval);
           },
+
+          filterChanged: function(filterTerm) {
+            console.log("FILTER: " + filterTerm);
+          },
+
           render: function() {
             return (
               <div className="buckets">
+              <QuickFilterBox onChange={this.filterChanged}/>
               <BucketList dumps={this.state.dumps} analyzingDumps={this.state.analyzingDumps} />
               </div>
             );

From 6001fbebd535389a38fad66951836b0f40ec4bbf Mon Sep 17 00:00:00 2001
From: codingphil <philip.lonsing@gmx.at>
Date: Tue, 14 Apr 2015 14:10:55 +0200
Subject: [PATCH 2/2] Hooked up the filter box and implemented filtering

---
 app/assets/jsx/buckets.jsx         | 84 ++++++++++++++++++++++++------
 app/assets/stylesheets/styles.less | 11 ++++
 2 files changed, 78 insertions(+), 17 deletions(-)

diff --git a/app/assets/jsx/buckets.jsx b/app/assets/jsx/buckets.jsx
index 77a8e03..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 (<Bucket
-          key={bucket.id}
-          name={bucket.name}
-          url={bucket.url}
-          tagging={bucket.tagging}
-          dumps={dumps}>
-          </Bucket>);
+        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 (<Bucket
+              key={bucket.id}
+              name={bucket.name}
+              url={bucket.url}
+              tagging={bucket.tagging}
+              dumps={dumps}>
+              </Bucket>);
+          }
         });
         return (
           <div className="bucketList">
@@ -143,10 +196,6 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
         });
 
         var QuickFilterBox = React.createClass({
-          getInitialState: function() {
-            return { searchTerm: "", onChange: undefined }
-          },
-
           handleInputChange: function(event) {
             var onChangeHandler = this.props.onChange;
             if (onChangeHandler) {
@@ -156,7 +205,7 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
 
           render: function() {
             return (
-              <div>
+              <div className="quick-filter-box">
                 <input
                   type="text"
                   placeholder="filter dumps"
@@ -172,7 +221,7 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
             if(bucketsAsJson) {
               return {dumps: bucketsAsJson.buckets, analyzingDumps: bucketsAsJson.analyzing};
             }
-            return {dumps: [], analyzingDumps: []};
+            return {dumps: [], analyzingDumps: [], filterTerm: ''};
           },
 
           loadBucketsFromServer: function() {
@@ -194,14 +243,15 @@ define(['react', 'jquery', 'Bucket'], function(React, $, Bucket) {
           },
 
           filterChanged: function(filterTerm) {
-            console.log("FILTER: " + filterTerm);
+            this.state.filterTerm = filterTerm;
+            this.setState(this.state);
           },
 
           render: function() {
             return (
               <div className="buckets">
               <QuickFilterBox onChange={this.filterChanged}/>
-              <BucketList dumps={this.state.dumps} analyzingDumps={this.state.analyzingDumps} />
+              <BucketList dumps={this.state.dumps} filterTerm={this.state.filterTerm} analyzingDumps={this.state.analyzingDumps} />
               </div>
             );
           }
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;
+  }
+}