kylefang/mitmproxy
1
0
Fork 0
mirror of https://github.com/zhigang1992/mitmproxy.git synced 2026-04-24 04:14:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

web: simpler filter ui

Browse Source
This commit is contained in:
Maximilian Hils
2014-12-23 01:13:34 +01:00
parent d5e16d7cf1
commit b55d584309
7 changed files with 88 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
libmproxy/web/static/css/app.css
View File

@@ -157,18 +157,24 @@ header .menu {
.flow-table tr {
cursor: pointer;
}
.flow-table tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05);
}
.flow-table tr.selected {
background-color: rgba(193, 215, 235, 0.5) !important;
}
.flow-table tr.highlighted {
background-color: rgba(255, 204, 0, 0.4) !important;
}
.flow-table tr.highlighted:nth-child(even) {
background-color: rgba(255, 204, 0, 0.5) !important;
}
.flow-table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.flow-table tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05);
}
.flow-table .col-tls {
.flow-table tr .col-tls {
width: 10px;
}
.flow-table .col-tls-https {

116
libmproxy/web/static/js/app.js
View File

@@ -2092,17 +2092,6 @@ 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)";
});
function ListStore() {
EventEmitter.call(this);
this.reset();
@@ -2668,7 +2657,7 @@ var FilterInput = React.createClass({displayName: 'FilterInput',
}
},
remove: function () {
if(this.props.onRemove) {
if (this.props.onRemove) {
this.props.onRemove();
}
},
@@ -2715,7 +2704,7 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
getInitialState: function () {
return {
filter: this.getQuery()[Query.FILTER] || "",
highlight: (this.getQuery()[Query.HIGHLIGHT] || "").split("&").map(decodeURIComponent)
highlight: this.getQuery()[Query.HIGHLIGHT] || ""
};
},
statics: {
@@ -2733,55 +2722,18 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
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(React.createElement("span", {key: "placeholder-" + i}, " "));
highlightFilterInputs.push(
React.createElement(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 (
React.createElement("div", null,
React.createElement("button", {className: "btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.toggleEventLog},
@@ -2794,11 +2746,11 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
" Clear Flows"
),
" ",
React.createElement("form", {className: "form-inline", style: {display:"inline"}},
React.createElement("form", {className: "form-inline", style: {display: "inline"}},
React.createElement(FilterInput, {type: "filter", color: "black", value: this.state.filter, onChange: this.onFilterChange}),
highlightFilterInputs
" ",
React.createElement(FilterInput, {type: "tag", color: "hsl(48, 100%, 50%)", value: this.state.highlight, onChange: this.onHighlightChange})
)
)
);
}
@@ -3110,27 +3062,14 @@ var FlowRow = React.createClass({displayName: 'FlowRow',
}.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 (
React.createElement("tr", {className: className, onClick: this.props.selectFlow.bind(null, flow), style: style},
React.createElement("tr", {className: className, onClick: this.props.selectFlow.bind(null, flow)},
columns
));
},
@@ -3199,11 +3138,13 @@ var FlowTable = React.createClass({displayName: 'FlowTable',
},
renderRow: function (flow) {
var selected = (flow === this.props.selected);
var highlighted = (this.props.view._highlight && this.props.view._highlight[flow.id].length > 0);
return React.createElement(FlowRow, {key: flow.id,
ref: flow.id,
flow: flow,
columns: this.state.columns,
selected: selected,
highlighted: highlighted,
selectFlow: this.props.selectFlow}
);
},
@@ -3594,21 +3535,30 @@ var MainView = React.createClass({displayName: 'MainView',
};
},
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 () {
},

12
web/src/css/flowtable.less
View File

@@ -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;

23
web/src/js/components/flowtable.jsx.js
View File

@@ -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}
/>;
},

55
web/src/js/components/header.jsx.js
View File

@@ -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>
);
}

27
web/src/js/components/mainview.jsx.js
View File

@@ -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 () {
},

13
web/src/js/flow/utils.js
View File

@@ -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)";
});
var ResponseUtils = _.extend(_MessageUtils, {});