From 3de89ab16c320350f20c828763b11a47cf2a2807 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Mon, 29 Feb 2016 02:57:35 +0100 Subject: web: use es6 modules --- web/src/js/actions.js | 32 ++++------- web/src/js/components/common.js | 4 +- web/src/js/components/editor.js | 22 ++++---- web/src/js/components/eventlog.js | 4 +- web/src/js/components/flowtable-columns.js | 13 +++-- web/src/js/components/flowtable.js | 18 +++---- web/src/js/components/flowview/contentview.js | 12 ++--- web/src/js/components/flowview/details.js | 12 ++--- web/src/js/components/flowview/index.js | 39 +++++++------- web/src/js/components/flowview/messages.js | 67 +++++++++++------------ web/src/js/components/flowview/nav.js | 16 +++--- web/src/js/components/footer.js | 8 +-- web/src/js/components/header.js | 30 +++++------ web/src/js/components/mainview.js | 78 +++++++++++++-------------- web/src/js/components/prompt.js | 14 ++--- web/src/js/components/proxyapp.js | 29 +++++----- web/src/js/connection.js | 16 +++--- web/src/js/dispatcher.js | 8 +-- web/src/js/flow/utils.js | 25 +++------ web/src/js/store/store.js | 38 ++++++------- web/src/js/store/view.js | 12 ++--- web/src/js/tests/utils.js | 14 ++--- web/src/js/utils.js | 26 ++++----- 23 files changed, 237 insertions(+), 300 deletions(-) (limited to 'web') diff --git a/web/src/js/actions.js b/web/src/js/actions.js index 2455a52e..6ded4c44 100644 --- a/web/src/js/actions.js +++ b/web/src/js/actions.js @@ -1,8 +1,8 @@ -var $ = require("jquery"); -var _ = require("lodash"); -var AppDispatcher = require("./dispatcher.js").AppDispatcher; +import $ from "jquery"; +import _ from "lodash"; +import {AppDispatcher} from "./dispatcher.js"; -var ActionTypes = { +export var ActionTypes = { // Connection CONNECTION_OPEN: "connection_open", CONNECTION_CLOSE: "connection_close", @@ -11,17 +11,17 @@ var ActionTypes = { // Stores SETTINGS_STORE: "settings", EVENT_STORE: "events", - FLOW_STORE: "flows", + FLOW_STORE: "flows" }; -var StoreCmds = { +export var StoreCmds = { ADD: "add", UPDATE: "update", REMOVE: "remove", RESET: "reset" }; -var ConnectionActions = { +export var ConnectionActions = { open: function () { AppDispatcher.dispatchViewAction({ type: ActionTypes.CONNECTION_OPEN @@ -39,7 +39,7 @@ var ConnectionActions = { } }; -var SettingsActions = { +export var SettingsActions = { update: function (settings) { $.ajax({ @@ -61,7 +61,7 @@ var SettingsActions = { }; var EventLogActions_event_id = 0; -var EventLogActions = { +export var EventLogActions = { add_event: function (message) { AppDispatcher.dispatchViewAction({ type: ActionTypes.EVENT_STORE, @@ -75,7 +75,7 @@ var EventLogActions = { } }; -var FlowActions = { +export var FlowActions = { accept: function (flow) { $.post("/flows/" + flow.id + "/accept"); }, @@ -120,18 +120,8 @@ var FlowActions = { } }; -var Query = { +export var Query = { SEARCH: "s", HIGHLIGHT: "h", SHOW_EVENTLOG: "e" -}; - -module.exports = { - ActionTypes: ActionTypes, - ConnectionActions: ConnectionActions, - FlowActions: FlowActions, - StoreCmds: StoreCmds, - SettingsActions: SettingsActions, - EventLogActions: EventLogActions, - Query: Query }; \ No newline at end of file diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index f910b3d8..5fae7415 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -16,7 +16,7 @@ export var AutoScrollMixin = { var node = ReactDOM.findDOMNode(this); node.scrollTop = node.scrollHeight; } - }, + } }; @@ -24,7 +24,7 @@ export var StickyHeadMixin = { adjustHead: function () { // Abusing CSS transforms to set the element // referenced as head into some kind of position:sticky. - var head = this.refs.head; + var head = ReactDOM.findDOMNode(this.refs.head); head.style.transform = "translate(0," + ReactDOM.findDOMNode(this).scrollTop + "px)"; } }; diff --git a/web/src/js/components/editor.js b/web/src/js/components/editor.js index 62c5310c..c929a244 100644 --- a/web/src/js/components/editor.js +++ b/web/src/js/components/editor.js @@ -1,7 +1,7 @@ -var React = require("react"); -var ReactDOM = require('react-dom'); -var common = require("./common.js"); -var utils = require("../utils.js"); +import React from "react"; +import ReactDOM from 'react-dom'; +import {ChildFocus} from "./common.js"; +import {Key} from "../utils.js"; var contentToHtml = function (content) { return _.escape(content); @@ -139,12 +139,12 @@ var EditorBase = React.createClass({ onKeyDown: function (e) { e.stopPropagation(); switch (e.keyCode) { - case utils.Key.ESC: + case Key.ESC: e.preventDefault(); this.reset(); this.stop(); break; - case utils.Key.ENTER: + case Key.ENTER: if (this.props.submitOnEnter && !e.shiftKey) { e.preventDefault(); this.stop(); @@ -213,8 +213,8 @@ var ValidateEditor = React.createClass({ /* Text Editor with mitmweb-specific convenience features */ -var ValueEditor = React.createClass({ - mixins: [common.ChildFocus], +export var ValueEditor = React.createClass({ + mixins: [ChildFocus], propTypes: { content: React.PropTypes.string.isRequired, onDone: React.PropTypes.func.isRequired, @@ -234,8 +234,4 @@ var ValueEditor = React.createClass({ onStop: function () { this.returnFocus(); } -}); - -module.exports = { - ValueEditor: ValueEditor -}; \ No newline at end of file +}); \ No newline at end of file diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index 0f463eb0..650f7cd3 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -2,7 +2,7 @@ import React from "react" import {AutoScrollMixin, Router} from "./common.js" import {Query} from "../actions.js" import { VirtualScrollMixin } from "./virtualscroll.js" -import views from "../store/view.js" +import {StoreView} from "../store/view.js" import _ from "lodash" var LogMessage = React.createClass({ @@ -39,7 +39,7 @@ var EventLogContents = React.createClass({ var filterFn = function (entry) { return this.props.filter[entry.level]; }; - var view = new views.StoreView(this.context.eventStore, filterFn.bind(this)); + var view = new StoreView(this.context.eventStore, filterFn.bind(this)); view.addListener("add", this.onEventLogChange); view.addListener("recalculate", this.onEventLogChange); diff --git a/web/src/js/components/flowtable-columns.js b/web/src/js/components/flowtable-columns.js index 74d96216..dbbe8847 100644 --- a/web/src/js/components/flowtable-columns.js +++ b/web/src/js/components/flowtable-columns.js @@ -1,7 +1,6 @@ -var React = require("react"); -var RequestUtils = require("../flow/utils.js").RequestUtils; -var ResponseUtils = require("../flow/utils.js").ResponseUtils; -var utils = require("../utils.js"); +import React from "react"; +import {RequestUtils, ResponseUtils} from "../flow/utils.js"; +import {formatSize, formatTimeDelta} from "../utils.js"; var TLSColumn = React.createClass({ statics: { @@ -156,7 +155,7 @@ var SizeColumn = React.createClass({ if (flow.response) { total += flow.response.contentLength || 0; } - var size = utils.formatSize(total); + var size = formatSize(total); return {size}; } }); @@ -179,7 +178,7 @@ var TimeColumn = React.createClass({ var flow = this.props.flow; var time; if (flow.response) { - time = utils.formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start)); + time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start)); } else { time = "..."; } @@ -198,4 +197,4 @@ var all_columns = [ TimeColumn ]; -module.exports = all_columns; +export default all_columns; diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index b27ed30d..1d99c318 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -1,11 +1,11 @@ -var React = require("react"); -var ReactDOM = require('react-dom'); -var common = require("./common.js"); -var utils = require("../utils.js"); -var _ = require("lodash"); +import React from "react"; +import ReactDOM from 'react-dom'; +import {StickyHeadMixin, AutoScrollMixin} from "./common.js"; +import {reverseString} from "../utils.js"; +import _ from "lodash"; import { VirtualScrollMixin } from "./virtualscroll.js" -var flowtable_columns = require("./flowtable-columns.js"); +import flowtable_columns from "./flowtable-columns.js"; var FlowRow = React.createClass({ render: function () { @@ -74,7 +74,7 @@ var FlowTableHead = React.createClass({ sortKeyFun = hasSort && function(){ var k = Column.sortKeyFun.apply(this, arguments); if(_.isString(k)){ - return utils.reverseString(""+k); + return reverseString(""+k); } else { return -k; } @@ -108,7 +108,7 @@ var FlowTableHead = React.createClass({ var ROW_HEIGHT = 32; var FlowTable = React.createClass({ - mixins: [common.StickyHeadMixin, common.AutoScrollMixin, VirtualScrollMixin], + mixins: [StickyHeadMixin, AutoScrollMixin, VirtualScrollMixin], contextTypes: { view: React.PropTypes.object.isRequired }, @@ -185,4 +185,4 @@ var FlowTable = React.createClass({ } }); -module.exports = FlowTable; +export default FlowTable; 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
{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 ; } - 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 = {"(" + delta + ")"}; } 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 (
@@ -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
@@ -142,31 +141,31 @@ var RequestLine = React.createClass({ ref="httpVersion" content={httpver} onDone={this.onHttpVersionChange} - isValid={flowutils.isValidHttpVersion} + isValid={isValidHttpVersion} inline/>
}, 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/>  
; @@ -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({
{flow.error.msg}
- { utils.formatTimeStamp(flow.error.timestamp) } + { formatTimeStamp(flow.error.timestamp) }
); } }); - -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 = ; + acceptButton = ; } var revertButton = null; if(flow.modified){ - revertButton = ; + revertButton = ; } return ( @@ -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 diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js index 229d691b..415c2577 100644 --- a/web/src/js/components/footer.js +++ b/web/src/js/components/footer.js @@ -1,8 +1,8 @@ -var React = require("react"); -var common = require("./common.js"); +import React from "react"; +import {SettingsState} from "./common.js"; var Footer = React.createClass({ - mixins: [common.SettingsState], + mixins: [SettingsState], render: function () { var mode = this.state.settings.mode; var intercept = this.state.settings.intercept; @@ -16,4 +16,4 @@ var Footer = React.createClass({ } }); -module.exports = Footer; \ No newline at end of file +export default Footer; \ No newline at end of file diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index d55c6443..3833a6ee 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -1,12 +1,12 @@ -var React = require("react"); -var ReactDOM = require('react-dom'); -var $ = require("jquery"); +import React from "react"; +import ReactDOM from 'react-dom'; +import $ from "jquery"; -var Filt = require("../filt/filt.js"); -var utils = require("../utils.js"); +import Filt from "../filt/filt.js"; +import {Key} from "../utils.js"; import {Router, SettingsState, ChildFocus} from "./common.js"; -var actions = require("../actions.js"); -var Query = require("../actions.js").Query; +import {SettingsActions, FlowActions} from "../actions.js"; +import {Query} from "../actions.js"; var FilterDocs = React.createClass({ statics: { @@ -109,7 +109,7 @@ var FilterInput = React.createClass({ this.setState({mousefocus: false}); }, onKeyDown: function (e) { - if (e.keyCode === utils.Key.ESC || e.keyCode === utils.Key.ENTER) { + if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) { this.blur(); // If closed using ESC/ENTER, hide the tooltip. this.setState({mousefocus: false}); @@ -158,7 +158,7 @@ var FilterInput = React.createClass({ } }); -var MainMenu = React.createClass({ +export var MainMenu = React.createClass({ mixins: [Router, SettingsState], statics: { title: "Start", @@ -175,7 +175,7 @@ var MainMenu = React.createClass({ this.updateLocation(undefined, d); }, onInterceptChange: function (val) { - actions.SettingsActions.update({intercept: val}); + SettingsActions.update({intercept: val}); }, render: function () { var search = this.getQuery()[Query.SEARCH] || ""; @@ -281,7 +281,7 @@ var FileMenu = React.createClass({ handleNewClick: function (e) { e.preventDefault(); if (confirm("Delete all flows?")) { - actions.FlowActions.clear(); + FlowActions.clear(); } }, handleOpenClick: function (e) { @@ -347,7 +347,7 @@ var FileMenu = React.createClass({ var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */]; -var Header = React.createClass({ +export var Header = React.createClass({ mixins: [Router], getInitialState: function () { return { @@ -390,9 +390,3 @@ var Header = React.createClass({ ); } }); - - -module.exports = { - Header: Header, - MainMenu: MainMenu -}; \ No newline at end of file diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 5c9afe0c..cc1f05ae 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -1,13 +1,13 @@ -var React = require("react"); +import React from "react"; -var actions = require("../actions.js"); -var Query = require("../actions.js").Query; -var utils = require("../utils.js"); -var views = require("../store/view.js"); -var Filt = require("../filt/filt.js"); +import {FlowActions} from "../actions.js"; +import {Query} from "../actions.js"; +import {Key} from "../utils.js"; +import {StoreView} from "../store/view.js"; +import Filt from "../filt/filt.js"; import { Router, Splitter} from "./common.js" -var FlowTable = require("./flowtable.js"); -var FlowView = require("./flowview/index.js"); +import FlowTable from "./flowtable.js"; +import FlowView from "./flowview/index.js"; var MainView = React.createClass({ mixins: [Router], @@ -24,7 +24,7 @@ var MainView = React.createClass({ }, getInitialState: function () { var sortKeyFun = false; - var view = new views.StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun); + var view = new StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun); view.addListener("recalculate", this.onRecalculate); view.addListener("add", this.onUpdate); view.addListener("update", this.onUpdate); @@ -130,80 +130,80 @@ var MainView = React.createClass({ return; } switch (e.keyCode) { - case utils.Key.K: - case utils.Key.UP: + case Key.K: + case Key.UP: this.selectFlowRelative(-1); break; - case utils.Key.J: - case utils.Key.DOWN: + case Key.J: + case Key.DOWN: this.selectFlowRelative(+1); break; - case utils.Key.SPACE: - case utils.Key.PAGE_DOWN: + case Key.SPACE: + case Key.PAGE_DOWN: this.selectFlowRelative(+10); break; - case utils.Key.PAGE_UP: + case Key.PAGE_UP: this.selectFlowRelative(-10); break; - case utils.Key.END: + case Key.END: this.selectFlowRelative(+1e10); break; - case utils.Key.HOME: + case Key.HOME: this.selectFlowRelative(-1e10); break; - case utils.Key.ESC: + case Key.ESC: this.selectFlow(null); break; - case utils.Key.H: - case utils.Key.LEFT: + case Key.H: + case Key.LEFT: if (this.refs.flowDetails) { this.refs.flowDetails.nextTab(-1); } break; - case utils.Key.L: - case utils.Key.TAB: - case utils.Key.RIGHT: + case Key.L: + case Key.TAB: + case Key.RIGHT: if (this.refs.flowDetails) { this.refs.flowDetails.nextTab(+1); } break; - case utils.Key.C: + case Key.C: if (e.shiftKey) { - actions.FlowActions.clear(); + FlowActions.clear(); } break; - case utils.Key.D: + case Key.D: if (flow) { if (e.shiftKey) { - actions.FlowActions.duplicate(flow); + FlowActions.duplicate(flow); } else { - actions.FlowActions.delete(flow); + FlowActions.delete(flow); } } break; - case utils.Key.A: + case Key.A: if (e.shiftKey) { - actions.FlowActions.accept_all(); + FlowActions.accept_all(); } else if (flow && flow.intercepted) { - actions.FlowActions.accept(flow); + FlowActions.accept(flow); } break; - case utils.Key.R: + case Key.R: if (!e.shiftKey && flow) { - actions.FlowActions.replay(flow); + FlowActions.replay(flow); } break; - case utils.Key.V: + case Key.V: if (e.shiftKey && flow && flow.modified) { - actions.FlowActions.revert(flow); + FlowActions.revert(flow); } break; - case utils.Key.E: + case Key.E: if (this.refs.flowDetails) { this.refs.flowDetails.promptEdit(); } break; - case utils.Key.SHIFT: + case Key.SHIFT: break; default: console.debug("keydown", e.keyCode); @@ -243,4 +243,4 @@ var MainView = React.createClass({ } }); -module.exports = MainView; +export default MainView; diff --git a/web/src/js/components/prompt.js b/web/src/js/components/prompt.js index b4777934..7b398038 100644 --- a/web/src/js/components/prompt.js +++ b/web/src/js/components/prompt.js @@ -1,8 +1,8 @@ -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 utils = require("../utils.js"); +import {Key} from "../utils.js"; import {ChildFocus} from "./common.js" var Prompt = React.createClass({ @@ -21,12 +21,12 @@ var Prompt = React.createClass({ var opts = this.getOptions(); for (var i = 0; i < opts.length; i++) { var k = opts[i].key; - if (utils.Key[k.toUpperCase()] === e.keyCode) { + if (Key[k.toUpperCase()] === e.keyCode) { this.done(k); return; } } - if (e.keyCode === utils.Key.ESC || e.keyCode === utils.Key.ENTER) { + if (e.keyCode === Key.ESC || e.keyCode === Key.ENTER) { this.done(false); } }, @@ -98,4 +98,4 @@ var Prompt = React.createClass({ } }); -module.exports = Prompt; \ No newline at end of file +export default Prompt; \ No newline at end of file diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index fe3e0008..24f45ff5 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -1,16 +1,15 @@ -var React = require("react"); -var ReactDOM = require("react-dom"); -var _ = require("lodash"); +import React from "react"; +import ReactDOM from "react-dom"; +import _ from "lodash"; import {Router, Splitter} from "./common.js" -var common = require("./common.js"); -var MainView = require("./mainview.js"); -var Footer = require("./footer.js"); -var header = require("./header.js"); +import MainView from "./mainview.js"; +import Footer from "./footer.js"; +import {Header, MainMenu} from "./header.js"; import EventLog from "./eventlog.js" -var store = require("../store/store.js"); -var Query = require("../actions.js").Query; -var Key = require("../utils.js").Key; +import {EventLogStore, FlowStore, SettingsStore} from "../store/store.js"; +import {Query} from "../actions.js"; +import {Key} from "../utils.js"; //TODO: Move out of here, just a stub. @@ -43,9 +42,9 @@ var ProxyAppMain = React.createClass({ }; }, getInitialState: function () { - var eventStore = new store.EventLogStore(); - var flowStore = new store.FlowStore(); - var settingsStore = new store.SettingsStore(); + var eventStore = new EventLogStore(); + var flowStore = new FlowStore(); + var settingsStore = new SettingsStore(); // Default Settings before fetch _.extend(settingsStore.dict, {}); @@ -65,7 +64,7 @@ var ProxyAppMain = React.createClass({ var selectFilterInput = function (name) { var headerComponent = this.refs.header; - headerComponent.setState({active: header.MainMenu}, function () { + headerComponent.setState({active: MainMenu}, function () { headerComponent.refs.active.refs[name].select(); }); }.bind(this); @@ -105,7 +104,7 @@ var ProxyAppMain = React.createClass({ ); return (
- +
{children} {eventlog}