diff options
Diffstat (limited to 'web/src/js/components/flowview')
| -rw-r--r-- | web/src/js/components/flowview/contentview.js | 12 | ||||
| -rw-r--r-- | web/src/js/components/flowview/details.js | 12 | ||||
| -rw-r--r-- | web/src/js/components/flowview/index.js | 39 | ||||
| -rw-r--r-- | web/src/js/components/flowview/messages.js | 67 | ||||
| -rw-r--r-- | web/src/js/components/flowview/nav.js | 16 |
5 files changed, 69 insertions, 77 deletions
diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js index 63d22c1c..2743eec3 100644 --- a/web/src/js/components/flowview/contentview.js +++ b/web/src/js/components/flowview/contentview.js @@ -1,8 +1,8 @@ -var React = require("react"); -var _ = require("lodash"); +import React from "react"; +import _ from "lodash"; -var MessageUtils = require("../../flow/utils.js").MessageUtils; -var utils = require("../../utils.js"); +import {MessageUtils} from "../../flow/utils.js"; +import {formatSize} from "../../utils.js"; var image_regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i; var ViewImage = React.createClass({ @@ -145,7 +145,7 @@ var TooLarge = React.createClass({ } }, render: function () { - var size = utils.formatSize(this.props.message.contentLength); + var size = formatSize(this.props.message.contentLength); return <div className="alert alert-warning"> <button onClick={this.props.onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button> {size} content size. @@ -234,4 +234,4 @@ var ContentView = React.createClass({ } }); -module.exports = ContentView;
\ No newline at end of file +export default ContentView;
\ No newline at end of file diff --git a/web/src/js/components/flowview/details.js b/web/src/js/components/flowview/details.js index 00e0116c..45fe1292 100644 --- a/web/src/js/components/flowview/details.js +++ b/web/src/js/components/flowview/details.js @@ -1,7 +1,7 @@ -var React = require("react"); -var _ = require("lodash"); +import React from "react"; +import _ from "lodash"; -var utils = require("../../utils.js"); +import {formatTimeStamp, formatTimeDelta} from "../../utils.js"; var TimeStamp = React.createClass({ render: function () { @@ -11,11 +11,11 @@ var TimeStamp = React.createClass({ return <tr></tr>; } - var ts = utils.formatTimeStamp(this.props.t); + var ts = formatTimeStamp(this.props.t); var delta; if (this.props.deltaTo) { - delta = utils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo)); + delta = formatTimeDelta(1000 * (this.props.t - this.props.deltaTo)); delta = <span className="text-muted">{"(" + delta + ")"}</span>; } else { delta = null; @@ -178,4 +178,4 @@ var Details = React.createClass({ } }); -module.exports = Details;
\ No newline at end of file +export default Details;
\ No newline at end of file diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js index bd34fe8d..47531f58 100644 --- a/web/src/js/components/flowview/index.js +++ b/web/src/js/components/flowview/index.js @@ -1,17 +1,16 @@ -var React = require("react"); -var _ = require("lodash"); +import React from "react"; -import { Router, StickyHeadMixin } from "../common.js" -var Nav = require("./nav.js"); -var Messages = require("./messages.js"); -var Details = require("./details.js"); -var Prompt = require("../prompt.js"); +import {Router, StickyHeadMixin} from "../common.js" +import Nav from "./nav.js"; +import {Request, Response, Error} from "./messages.js"; +import Details from "./details.js"; +import Prompt from "../prompt.js"; var allTabs = { - request: Messages.Request, - response: Messages.Response, - error: Messages.Error, + request: Request, + response: Response, + error: Error, details: Details }; @@ -40,22 +39,22 @@ var FlowView = React.createClass({ this.selectTab(tabs[nextIndex]); }, selectTab: function (panel) { - this.updateLocation(`/flows/${this.getParams().flowId}/${panel}`); + this.updateLocation(`/flows/${this.props.flow.id}/${panel}`); }, promptEdit: function () { var options; - switch(this.props.tab){ + switch (this.props.tab) { case "request": options = [ "method", "url", - {text:"http version", key:"v"}, + {text: "http version", key: "v"}, "header" /*, "content"*/]; break; case "response": options = [ - {text:"http version", key:"v"}, + {text: "http version", key: "v"}, "code", "message", "header" @@ -71,7 +70,7 @@ var FlowView = React.createClass({ prompt: { done: function (k) { this.setState({prompt: false}); - if(k){ + if (k) { this.refs.tab.edit(k); } }.bind(this), @@ -104,10 +103,10 @@ var FlowView = React.createClass({ return ( <div className="flow-detail" onScroll={this.adjustHead}> <Nav ref="head" - flow={flow} - tabs={tabs} - active={active} - selectTab={this.selectTab}/> + flow={flow} + tabs={tabs} + active={active} + selectTab={this.selectTab}/> <Tab ref="tab" flow={flow}/> {prompt} </div> @@ -115,4 +114,4 @@ var FlowView = React.createClass({ } }); -module.exports = FlowView;
\ No newline at end of file +export default FlowView;
\ No newline at end of file diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js index c11ee46f..2885b3b1 100644 --- a/web/src/js/components/flowview/messages.js +++ b/web/src/js/components/flowview/messages.js @@ -1,13 +1,12 @@ -var React = require("react"); -var ReactDOM = require('react-dom'); -var _ = require("lodash"); +import React from "react"; +import ReactDOM from 'react-dom'; +import _ from "lodash"; -var common = require("../common.js"); -var actions = require("../../actions.js"); -var flowutils = require("../../flow/utils.js"); -var utils = require("../../utils.js"); -var ContentView = require("./contentview.js"); -var ValueEditor = require("../editor.js").ValueEditor; +import {FlowActions} from "../../actions.js"; +import {RequestUtils, isValidHttpVersion, parseUrl, parseHttpVersion} from "../../flow/utils.js"; +import {Key, formatTimeStamp} from "../../utils.js"; +import ContentView from "./contentview.js"; +import {ValueEditor} from "../editor.js"; var Headers = React.createClass({ propTypes: { @@ -103,13 +102,13 @@ var HeaderEditor = React.createClass({ }, onKeyDown: function (e) { switch (e.keyCode) { - case utils.Key.BACKSPACE: + case Key.BACKSPACE: var s = window.getSelection().getRangeAt(0); if (s.startOffset === 0 && s.endOffset === 0) { this.props.onRemove(e); } break; - case utils.Key.TAB: + case Key.TAB: if (!e.shiftKey) { this.props.onTab(e); } @@ -121,7 +120,7 @@ var HeaderEditor = React.createClass({ var RequestLine = React.createClass({ render: function () { var flow = this.props.flow; - var url = flowutils.RequestUtils.pretty_url(flow.request); + var url = RequestUtils.pretty_url(flow.request); var httpver = flow.request.http_version; return <div className="first-line request-line"> @@ -142,31 +141,31 @@ var RequestLine = React.createClass({ ref="httpVersion" content={httpver} onDone={this.onHttpVersionChange} - isValid={flowutils.isValidHttpVersion} + isValid={isValidHttpVersion} inline/> </div> }, isValidUrl: function (url) { - var u = flowutils.parseUrl(url); + var u = parseUrl(url); return !!u.host; }, onMethodChange: function (nextMethod) { - actions.FlowActions.update( + FlowActions.update( this.props.flow, {request: {method: nextMethod}} ); }, onUrlChange: function (nextUrl) { - var props = flowutils.parseUrl(nextUrl); + var props = parseUrl(nextUrl); props.path = props.path || ""; - actions.FlowActions.update( + FlowActions.update( this.props.flow, {request: props} ); }, onHttpVersionChange: function (nextVer) { - var ver = flowutils.parseHttpVersion(nextVer); - actions.FlowActions.update( + var ver = parseHttpVersion(nextVer); + FlowActions.update( this.props.flow, {request: {http_version: ver}} ); @@ -182,7 +181,7 @@ var ResponseLine = React.createClass({ ref="httpVersion" content={httpver} onDone={this.onHttpVersionChange} - isValid={flowutils.isValidHttpVersion} + isValid={isValidHttpVersion} inline/> <ValueEditor @@ -194,7 +193,7 @@ var ResponseLine = React.createClass({ <ValueEditor ref="msg" - content={flow.response.msg} + content={flow.response.reason} onDone={this.onMsgChange} inline/> </div>; @@ -203,28 +202,28 @@ var ResponseLine = React.createClass({ return /^\d+$/.test(code); }, onHttpVersionChange: function (nextVer) { - var ver = flowutils.parseHttpVersion(nextVer); - actions.FlowActions.update( + var ver = parseHttpVersion(nextVer); + FlowActions.update( this.props.flow, {response: {http_version: ver}} ); }, onMsgChange: function (nextMsg) { - actions.FlowActions.update( + FlowActions.update( this.props.flow, {response: {msg: nextMsg}} ); }, onCodeChange: function (nextCode) { nextCode = parseInt(nextCode); - actions.FlowActions.update( + FlowActions.update( this.props.flow, {response: {code: nextCode}} ); } }); -var Request = React.createClass({ +export var Request = React.createClass({ render: function () { var flow = this.props.flow; return ( @@ -256,7 +255,7 @@ var Request = React.createClass({ } }, onHeaderChange: function (nextHeaders) { - actions.FlowActions.update(this.props.flow, { + FlowActions.update(this.props.flow, { request: { headers: nextHeaders } @@ -264,7 +263,7 @@ var Request = React.createClass({ } }); -var Response = React.createClass({ +export var Response = React.createClass({ render: function () { var flow = this.props.flow; return ( @@ -296,7 +295,7 @@ var Response = React.createClass({ } }, onHeaderChange: function (nextHeaders) { - actions.FlowActions.update(this.props.flow, { + FlowActions.update(this.props.flow, { response: { headers: nextHeaders } @@ -304,7 +303,7 @@ var Response = React.createClass({ } }); -var Error = React.createClass({ +export var Error = React.createClass({ render: function () { var flow = this.props.flow; return ( @@ -312,16 +311,10 @@ var Error = React.createClass({ <div className="alert alert-warning"> {flow.error.msg} <div> - <small>{ utils.formatTimeStamp(flow.error.timestamp) }</small> + <small>{ formatTimeStamp(flow.error.timestamp) }</small> </div> </div> </section> ); } }); - -module.exports = { - Request: Request, - Response: Response, - Error: Error -}; diff --git a/web/src/js/components/flowview/nav.js b/web/src/js/components/flowview/nav.js index 46eda707..a12fd1fd 100644 --- a/web/src/js/components/flowview/nav.js +++ b/web/src/js/components/flowview/nav.js @@ -1,6 +1,6 @@ -var React = require("react"); +import React from "react"; -var actions = require("../../actions.js"); +import {FlowActions} from "../../actions.js"; var NavAction = React.createClass({ onClick: function (e) { @@ -38,19 +38,19 @@ var Nav = React.createClass({ var acceptButton = null; if(flow.intercepted){ - acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />; + acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={FlowActions.accept.bind(null, flow)} />; } var revertButton = null; if(flow.modified){ - revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />; + revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={FlowActions.revert.bind(null, flow)} />; } return ( <nav ref="head" className="nav-tabs nav-tabs-sm"> {tabs} - <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} /> - <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} /> - <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} /> + <NavAction title="[d]elete flow" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)} /> + <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} /> + <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} /> {acceptButton} {revertButton} </nav> @@ -58,4 +58,4 @@ var Nav = React.createClass({ } }); -module.exports = Nav;
\ No newline at end of file +export default Nav;
\ No newline at end of file |