XiaoMo/anyproxy
1
0
Fork 0
mirror of https://github.com/alibaba/anyproxy.git synced 2025-04-23 20:31:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

optimize web ui

Browse Source
This commit is contained in:
OttoMao 2015-07-08 11:55:13 +08:00
parent d5046188bc
commit f4c96180b5
11 changed files with 105 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "anyproxy", "name": "anyproxy",
"version": "3.7.0Beta1", "version": "3.7.0Beta2",
"description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.", "description": "A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.",
"main": "proxy.js", "main": "proxy.js",
"bin": { "bin": {

13
web/build/filter.js
View File

@ -19,11 +19,20 @@ function init(React){
var self = this; var self = this;
return ( return (
React.createElement("div", {className: "filterSection"}, React.createElement("div", null,
React.createElement("h4", {className: "subTitle"}, "Log Filter"), React.createElement("h4", {className: "subTitle"}, "Log Filter"),
React.createElement("div", {className: "filterSection"},
React.createElement("form", {className: "uk-form"}, React.createElement("form", {className: "uk-form"},
React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "type keywords or /^regExp$/", width: "300"}) React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
)
),
React.createElement("dl", {class: "uk-description-list-horizontal"},
React.createElement("dt", null, "wrap your RegExp between two slashes"),
React.createElement("dd", null,
"e.g. ", React.createElement("br", null),
"type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
)
) )
) )
); );

4
web/build/index.js
View File

@ -186,7 +186,7 @@ var recorder;
pop.setState({ pop.setState({
show : true, show : true,
content : filter, content : filter,
left:"70%" left:"50%"
}); });
} }
@ -202,7 +202,7 @@ var recorder;
pop.setState({ pop.setState({
show : true, show : true,
content : mapPanel, content : mapPanel,
left:"70%" left:"40%"
}) })
} }

23
web/build/mapForm.js
View File

@ -54,29 +54,30 @@ function init(React){
var self = this; var self = this;
return ( return (
React.createElement("div", null, React.createElement("div", null,
React.createElement("form", {className: "uk-form uk-form-stacked"}, React.createElement("form", {className: "uk-form uk-form-stacked mapAddNewForm"},
React.createElement("fieldset", null, React.createElement("fieldset", null,
React.createElement("legend", null, "add rule"),
React.createElement("div", {className: "uk-form-row"}, React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"), React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"),
React.createElement("div", {className: "uk-form-controls"}, React.createElement("div", {className: "uk-form-controls"},
React.createElement("input", {type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"}) React.createElement("input", {className: "mapConfigInputs", type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
) )
), ),
React.createElement("div", {className: "uk-form-row"}, React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"), React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"),
React.createElement("div", {className: "uk-form-controls"}, React.createElement("div", {className: "uk-form-controls"},
React.createElement("input", {type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "keyword"}) React.createElement("input", {className: "mapConfigInputs pathInput", type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "local file path"})
) ),
) React.createElement("div", {ref: "treeWrapper", className: "treeWrapper"})
)
), ),
React.createElement("div", {ref: "treeWrapper"}), React.createElement("div", {className: "uk-form-row"},
React.createElement("button", {className: "uk-button", onClick: self.submitData}, "Add") React.createElement("button", {type: "button", className: "uk-button", onClick: self.submitData}, "Add")
)
)
)
) )
); );
}, },

2
web/build/mapPanel.js
View File

@ -19,7 +19,7 @@ function init(React){
React.createElement("h4", {className: "subTitle"}, "Current Config"), React.createElement("h4", {className: "subTitle"}, "Current Config"),
React.createElement(MapList, {ref: "list"}), React.createElement(MapList, {ref: "list"}),
React.createElement("h4", {className: "subTitle"}, "Map Local"), React.createElement("h4", {className: "subTitle"}, "Add Map Rule"),
React.createElement(MapForm, {onSubmit: self.appendRecord}) React.createElement(MapForm, {onSubmit: self.appendRecord})
) )
); );

33
web/css/page.css
View File

@ -287,21 +287,22 @@ body, html {
z-index:999 z-index:999
} }
/*filter*/
.filterSection{
.filterSection .filterIcon{ margin: 50px auto 0;
font-size: 16px;
} }
.filterSection form{ .filterSection form{
display: inline-block; text-align: center;
margin-right: 5px;
} }
.filterSection input{ .filterSection input{
width: 250px; width: 250px;
} }
/*filter end*/
/*map panel*/ /*map panel*/
@ -328,5 +329,27 @@ body, html {
margin-left: 5px; margin-left: 5px;
} }
.mapWrapper .mapConfigInputs{
width: 400px;
}
.mapWrapper .mapConfigInputs.pathInput{
border-radius: 4px 4px 0 0 ;
}
.mapWrapper .treeWrapper{
width: 398px;
height: 350px;
overflow: scroll;
border: 1px solid #ddd;
border-top: none;
}
.mapWrapper .mapAddNewForm{
margin-left: 10px;
}
/*map panel end*/ /*map panel end*/

42
web/page.js
View File

@ -232,7 +232,7 @@
pop.setState({ pop.setState({
show : true, show : true,
content : filter, content : filter,
left:"70%" left:"50%"
}); });
} }
@ -248,7 +248,7 @@
pop.setState({ pop.setState({
show : true, show : true,
content : mapPanel, content : mapPanel,
left:"70%" left:"40%"
}) })
} }
@ -20182,7 +20182,7 @@
React.createElement("h4", {className: "subTitle"}, "Current Config"), React.createElement("h4", {className: "subTitle"}, "Current Config"),
React.createElement(MapList, {ref: "list"}), React.createElement(MapList, {ref: "list"}),
React.createElement("h4", {className: "subTitle"}, "Map Local"), React.createElement("h4", {className: "subTitle"}, "Add Map Rule"),
React.createElement(MapForm, {onSubmit: self.appendRecord}) React.createElement(MapForm, {onSubmit: self.appendRecord})
) )
); );
@ -20395,11 +20395,20 @@
var self = this; var self = this;
return ( return (
React.createElement("div", {className: "filterSection"}, React.createElement("div", null,
React.createElement("h4", {className: "subTitle"}, "Log Filter"), React.createElement("h4", {className: "subTitle"}, "Log Filter"),
React.createElement("div", {className: "filterSection"},
React.createElement("form", {className: "uk-form"}, React.createElement("form", {className: "uk-form"},
React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "type keywords or /^regExp$/", width: "300"}) React.createElement("input", {className: "uk-form-large", ref: "keywordInput", onChange: self.dealChange, type: "text", placeholder: "keywords or /^regExp$/", width: "300"})
)
),
React.createElement("dl", {class: "uk-description-list-horizontal"},
React.createElement("dt", null, "wrap your RegExp between two slashes"),
React.createElement("dd", null,
"e.g. ", React.createElement("br", null),
"type ", React.createElement("strong", null, "/id=\\d", 3, "/"), " will give you all the logs containing ", React.createElement("strong", null, "id=123")
)
) )
) )
); );
@ -27959,29 +27968,30 @@
var self = this; var self = this;
return ( return (
React.createElement("div", null, React.createElement("div", null,
React.createElement("form", {className: "uk-form uk-form-stacked"}, React.createElement("form", {className: "uk-form uk-form-stacked mapAddNewForm"},
React.createElement("fieldset", null, React.createElement("fieldset", null,
React.createElement("legend", null, "add rule"),
React.createElement("div", {className: "uk-form-row"}, React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"), React.createElement("label", {className: "uk-form-label", htmlFor: "map_keywordInput"}, "keyword"),
React.createElement("div", {className: "uk-form-controls"}, React.createElement("div", {className: "uk-form-controls"},
React.createElement("input", {type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"}) React.createElement("input", {className: "mapConfigInputs", type: "text", id: "map_keywordInput", ref: "keywordInput", placeholder: "keyword"})
) )
), ),
React.createElement("div", {className: "uk-form-row"}, React.createElement("div", {className: "uk-form-row"},
React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"), React.createElement("label", {className: "uk-form-label", htmlFor: "map_localFilePath"}, "local file"),
React.createElement("div", {className: "uk-form-controls"}, React.createElement("div", {className: "uk-form-controls"},
React.createElement("input", {type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "keyword"}) React.createElement("input", {className: "mapConfigInputs pathInput", type: "text", id: "map_localFilePath", ref: "localFilePath", placeholder: "local file path"})
) ),
) React.createElement("div", {ref: "treeWrapper", className: "treeWrapper"})
)
), ),
React.createElement("div", {ref: "treeWrapper"}), React.createElement("div", {className: "uk-form-row"},
React.createElement("button", {className: "uk-button", onClick: self.submitData}, "Add") React.createElement("button", {type: "button", className: "uk-button", onClick: self.submitData}, "Add")
)
)
)
) )
); );
}, },

13
web/src/filter.js
View File

@ -19,13 +19,22 @@ function init(React){
var self = this; var self = this;
return ( return (
<div className="filterSection"> <div>
<h4 className="subTitle">Log Filter</h4> <h4 className="subTitle">Log Filter</h4>
<div className="filterSection">
<form className="uk-form"> <form className="uk-form">
<input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="type keywords or /^regExp$/" width="300"/> <input className="uk-form-large" ref="keywordInput" onChange={self.dealChange} type="text" placeholder="keywords or /^regExp$/" width="300"/>
</form> </form>
</div> </div>
<dl class="uk-description-list-horizontal">
<dt>wrap your RegExp between two slashes</dt>
<dd>
e.g. <br />
type <strong>/id=\d{3}/</strong> will give you all the logs containing <strong>id=123</strong>
</dd>
</dl>
</div>
); );
}, },
componentDidMount:function(){ componentDidMount:function(){

4
web/src/index.js
View File

@ -186,7 +186,7 @@ var recorder;
pop.setState({ pop.setState({
show : true, show : true,
content : filter, content : filter,
left:"70%" left:"50%"
}); });
} }
@ -202,7 +202,7 @@ var recorder;
pop.setState({ pop.setState({
show : true, show : true,
content : mapPanel, content : mapPanel,
left:"70%" left:"40%"
}) })
} }

15
web/src/mapForm.js
View File

@ -54,29 +54,30 @@ function init(React){
var self = this; var self = this;
return ( return (
<div> <div>
<form className="uk-form uk-form-stacked"> <form className="uk-form uk-form-stacked mapAddNewForm">
<fieldset> <fieldset>
<legend>add rule</legend>
<div className="uk-form-row"> <div className="uk-form-row">
<label className="uk-form-label" htmlFor="map_keywordInput">keyword</label> <label className="uk-form-label" htmlFor="map_keywordInput">keyword</label>
<div className="uk-form-controls"> <div className="uk-form-controls">
<input type="text" id="map_keywordInput" ref="keywordInput" placeholder="keyword" /> <input className="mapConfigInputs" type="text" id="map_keywordInput" ref="keywordInput" placeholder="keyword" />
</div> </div>
</div> </div>
<div className="uk-form-row"> <div className="uk-form-row">
<label className="uk-form-label" htmlFor="map_localFilePath">local file</label> <label className="uk-form-label" htmlFor="map_localFilePath">local file</label>
<div className="uk-form-controls"> <div className="uk-form-controls">
<input type="text" id="map_localFilePath" ref="localFilePath" placeholder="keyword" /> <input className="mapConfigInputs pathInput" type="text" id="map_localFilePath" ref="localFilePath" placeholder="local file path" />
</div> </div>
<div ref="treeWrapper" className="treeWrapper"></div>
</div>
<div className="uk-form-row">
<button type="button" className="uk-button" onClick={self.submitData}>Add</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
<div ref="treeWrapper"></div>
<button className="uk-button" onClick={self.submitData}>Add</button>
</div> </div>
); );
}, },

2
web/src/mapPanel.js
View File

@ -19,7 +19,7 @@ function init(React){
<h4 className="subTitle">Current Config</h4> <h4 className="subTitle">Current Config</h4>
<MapList ref="list"/> <MapList ref="list"/>
<h4 className="subTitle">Map Local</h4> <h4 className="subTitle">Add Map Rule</h4>
<MapForm onSubmit={self.appendRecord}/> <MapForm onSubmit={self.appendRecord}/>
</div> </div>
); );