web: simpler filter ui

5 files changed, 45 insertions, 85 deletions

diff --git a/web/src/css/flowtable.less b/web/src/css/flowtable.less
index 64fd86b9..2b0e8df3 100644
--- a/web/src/css/flowtable.less
+++ b/web/src/css/flowtable.less
@@ -19,9 +19,19 @@
 
 	tr {
 		cursor: pointer;
+
+		&:nth-child(even) {
+			background-color : rgba(0,0,0,0.05);
+		}
 		&.selected {
 			background-color: hsla(209, 52%, 84%, 0.5) !important;
 		}
+		&.highlighted {
+			background-color: hsla(48, 100%, 50%, 0.4) !important;
+		}
+		&.highlighted:nth-child(even) {
+			background-color: hsla(48, 100%, 50%, 0.5) !important;
+		}
 	}
 
 	td {
@@ -30,7 +40,7 @@
 		text-overflow: ellipsis;
 	}
 
-	tr:nth-child(even) { background-color : rgba(0,0,0,0.05); }
+	tr
 
 	.col-tls {
 		width: 10px;
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 00c2d4c1..50caaab3 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -6,27 +6,14 @@ var FlowRow = React.createClass({
         }.bind(this));
         var className = "";
         if (this.props.selected) {
-            className += "selected";
+            className += " selected";
         }
-
-        var highlight_count = flow._highlight.length;
-        if (highlight_count > 0) {
-            var background = "linear-gradient(90deg";
-            for(var i =0; i < highlight_count; i++){
-                var tag = flow._highlight[i];
-                var ps = (100 * i / highlight_count) + "%";
-                var pe = (100 * (i + 1) / highlight_count) + "%";
-                background += ("," + tag + " " + ps + "," + tag + " " + pe);
-            }
-            background += ")";
+        if (this.props.highlighted) {
+            className += " highlighted";
         }
 
-        style = {
-            background: background
-        };
-
         return (
-            <tr className={className} onClick={this.props.selectFlow.bind(null, flow)} style={style}>
+            <tr className={className} onClick={this.props.selectFlow.bind(null, flow)}>
                 {columns}
             </tr>);
     },
@@ -95,11 +82,13 @@ var FlowTable = React.createClass({
     },
     renderRow: function (flow) {
         var selected = (flow === this.props.selected);
+        var highlighted = (this.props.view._highlight && this.props.view._highlight[flow.id].length > 0);
         return <FlowRow key={flow.id}
             ref={flow.id}
             flow={flow}
             columns={this.state.columns}
             selected={selected}
+            highlighted={highlighted}
             selectFlow={this.props.selectFlow}
         />;
     },
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index a975f57b..9e090770 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -71,7 +71,7 @@ var FilterInput = React.createClass({
         }
     },
     remove: function () {
-        if(this.props.onRemove) {
+        if (this.props.onRemove) {
             this.props.onRemove();
         }
     },
@@ -118,7 +118,7 @@ var MainMenu = React.createClass({
     getInitialState: function () {
         return {
             filter: this.getQuery()[Query.FILTER] || "",
-            highlight: (this.getQuery()[Query.HIGHLIGHT] || "").split("&").map(decodeURIComponent)
+            highlight: this.getQuery()[Query.HIGHLIGHT] || ""
         };
     },
     statics: {
@@ -136,55 +136,18 @@ var MainMenu = React.createClass({
     applyFilter: function (filter, highlight) {
         var d = {};
         d[Query.FILTER] = filter;
-        d[Query.HIGHLIGHT] = highlight.map(encodeURIComponent).join("&");
+        d[Query.HIGHLIGHT] = highlight;
         this.setQuery(d);
     },
     onFilterChange: function (val) {
         this.setState({filter: val});
         this.applyFilter(val, this.state.highlight);
     },
-    onHighlightChange: function (index, val) {
-        var highlight = this.state.highlight.slice();
-        highlight[index] = val;
-        if (highlight[highlight.length - 1] !== "" && highlight.length < 14) {
-            highlight.push("");
-        }
-        this.setState({
-            highlight: highlight
-        });
-        this.applyFilter(this.state.filter, highlight);
-    },
-    onHighlightRemove: function (index) {
-        if (this.state.highlight.length > 1 && index < this.state.highlight.length - 1) {
-            var highlight = this.state.highlight.slice();
-            highlight.splice(index, 1);
-            this.setState({
-                highlight: highlight
-            });
-        }
-        this.refs["highlight-" + Math.max(0, index - 1)].focus();
-    },
-    getColor: function (index) {
-        return HighlightColors[index];
+    onHighlightChange: function (val) {
+        this.setState({highlight: val});
+        this.applyFilter(this.state.filter, val);
     },
     render: function () {
-        var highlightFilterInputs = [];
-        for (var i = 0; i < this.state.highlight.length; i++) {
-            highlightFilterInputs.push(<span key={"placeholder-" + i}> </span>);
-            highlightFilterInputs.push(
-                <FilterInput
-                    key={"highlight-" + i}
-                    ref={"highlight-" + i}
-                    type="tag"
-                    color={this.getColor(i)}
-                    value={this.state.highlight[i]}
-                    onChange={this.onHighlightChange.bind(this, i)}
-                    onRemove={this.onHighlightRemove.bind(this, i)}
-                />
-            );
-
-        }
-
         return (
             <div>
                 <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
@@ -197,11 +160,11 @@ var MainMenu = React.createClass({
                 &nbsp;Clear Flows
                 </button>
             &nbsp;
-                <form className="form-inline" style={{display:"inline"}}>
+                <form className="form-inline" style={{display: "inline"}}>
                     <FilterInput type="filter" color="black" value={this.state.filter} onChange={this.onFilterChange} />
-                    { highlightFilterInputs }
+                    &nbsp;
+                    <FilterInput type="tag" color="hsl(48, 100%, 50%)" value={this.state.highlight} onChange={this.onHighlightChange}/>
                 </form>
-
             </div>
         );
     }
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index e6718413..be20a357 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -12,21 +12,30 @@ var MainView = React.createClass({
         };
     },
     getViewFilt: function () {
-        var filt = Filt.parse(this.getQuery()[Query.FILTER] || "");
-        var highlight = (this.getQuery()[Query.HIGHLIGHT] || "").split("&")
-            .map(decodeURIComponent)
-            .map(function (filtstr) {
-                return filtstr.trim() !== "" ? Filt.parse(filtstr) : false;
-            });
+        try {
+            var filt = Filt.parse(this.getQuery()[Query.FILTER] || "");
+            var highlightStr = this.getQuery()[Query.HIGHLIGHT];
+            var highlight = highlightStr ? [Filt.parse(highlightStr)] : [];
+        } catch(e){
+            console.error("Error when processing filter: " + e);
+        }
+
+        var FadedHighlightColors = ["hsla(57, 100%, 50%, 0.33)"];
+
         return function filter_and_highlight(flow) {
-            flow._highlight = [];
+            var view = this.state.view;
+            if(!view._highlight){
+                view._highlight = {};
+            }
+            view._highlight[flow.id] = [];
+
             for (var i = 0; i < highlight.length; i++) {
                 if (highlight[i] && highlight[i](flow)) {
-                    flow._highlight.push(FadedHighlightColors[i]);
+                    view._highlight[flow.id].push(FadedHighlightColors[i]);
                 }
             }
             return filt(flow);
-        };
+        }.bind(this);
     },
     getViewSort: function () {
     },
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index 31780651..113f0b1a 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -54,15 +54,4 @@ var RequestUtils = _.extend(_MessageUtils, {
     }
 });
 
-var ResponseUtils = _.extend(_MessageUtils, {});
-
-HighlightColors = [
-    "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#1f77b4", "#bcbd22", "#17becf",
-    "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#aec7e8", "#dbdb8d", "#9edae5"
-];
-FadedHighlightColors = HighlightColors.map(function (color) {
-    return "rgba(" +
-        parseInt(color.substr(1, 2), 16) + "," +
-        parseInt(color.substr(3, 2), 16) + "," +
-        parseInt(color.substr(5, 2), 16) + ",0.3)";
-});
\ No newline at end of file
+var ResponseUtils = _.extend(_MessageUtils, {});
\ No newline at end of file