aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/js/components/mainview.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/js/components/mainview.js')
-rw-r--r--web/src/js/components/mainview.js128
1 files changed, 65 insertions, 63 deletions
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 9ff51dfa..87c0c4bd 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -1,17 +1,16 @@
-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");
-
-var common = require("./common.js");
-var FlowTable = require("./flowtable.js");
-var FlowView = require("./flowview/index.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"
+import FlowTable from "./flowtable.js";
+import FlowView from "./flowview/index.js";
var MainView = React.createClass({
- mixins: [common.Navigation, common.RouterState],
+ mixins: [Router],
contextTypes: {
flowStore: React.PropTypes.object.isRequired,
},
@@ -25,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);
@@ -42,24 +41,28 @@ var MainView = React.createClass({
},
getViewFilt: function () {
try {
- var filt = Filt.parse(this.getQuery()[Query.SEARCH] || "");
+ var filtStr = this.getQuery()[Query.SEARCH];
+ var filt = filtStr ? Filt.parse(filtStr) : () => true;
var highlightStr = this.getQuery()[Query.HIGHLIGHT];
- var highlight = highlightStr ? Filt.parse(highlightStr) : false;
+ var highlight = highlightStr ? Filt.parse(highlightStr) : () => false;
} catch (e) {
console.error("Error when processing filter: " + e);
}
- return function filter_and_highlight(flow) {
+ var fun = function filter_and_highlight(flow) {
if (!this._highlight) {
this._highlight = {};
}
- this._highlight[flow.id] = highlight && highlight(flow);
+ this._highlight[flow.id] = highlight(flow);
return filt(flow);
};
+ fun.highlightStr = highlightStr;
+ fun.filtStr = filtStr;
+ return fun;
},
componentWillReceiveProps: function (nextProps) {
- var filterChanged = (this.props.query[Query.SEARCH] !== nextProps.query[Query.SEARCH]);
- var highlightChanged = (this.props.query[Query.HIGHLIGHT] !== nextProps.query[Query.HIGHLIGHT]);
+ var filterChanged = this.state.view.filt.filtStr !== nextProps.location.query[Query.SEARCH];
+ var highlightChanged = this.state.view.filt.highlightStr !== nextProps.location.query[Query.HIGHLIGHT];
if (filterChanged || highlightChanged) {
this.state.view.recalculate(this.getViewFilt(), this.state.sortKeyFun);
}
@@ -72,12 +75,12 @@ var MainView = React.createClass({
}
},
onUpdate: function (flow) {
- if (flow.id === this.getParams().flowId) {
+ if (flow.id === this.props.routeParams.flowId) {
this.forceUpdate();
}
},
onRemove: function (flow_id, index) {
- if (flow_id === this.getParams().flowId) {
+ if (flow_id === this.props.routeParams.flowId) {
var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length - 1)];
this.selectFlow(flow_to_select);
}
@@ -90,29 +93,24 @@ var MainView = React.createClass({
},
selectFlow: function (flow) {
if (flow) {
- this.replaceWith(
- "flow",
- {
- flowId: flow.id,
- detailTab: this.getParams().detailTab || "request"
- }
- );
+ var tab = this.props.routeParams.detailTab || "request";
+ this.updateLocation(`/flows/${flow.id}/${tab}`);
this.refs.flowTable.scrollIntoView(flow);
} else {
- this.replaceWith("flows", {});
+ this.updateLocation("/flows");
}
},
selectFlowRelative: function (shift) {
var flows = this.state.view.list;
var index;
- if (!this.getParams().flowId) {
+ if (!this.props.routeParams.flowId) {
if (shift < 0) {
index = flows.length - 1;
} else {
index = 0;
}
} else {
- var currFlowId = this.getParams().flowId;
+ var currFlowId = this.props.routeParams.flowId;
var i = flows.length;
while (i--) {
if (flows[i].id === currFlowId) {
@@ -132,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);
@@ -214,7 +212,7 @@ var MainView = React.createClass({
e.preventDefault();
},
getSelected: function () {
- return this.context.flowStore.get(this.getParams().flowId);
+ return this.context.flowStore.get(this.props.routeParams.flowId);
},
render: function () {
var selected = this.getSelected();
@@ -222,8 +220,12 @@ var MainView = React.createClass({
var details;
if (selected) {
details = [
- <common.Splitter key="splitter"/>,
- <FlowView key="flowDetails" ref="flowDetails" flow={selected}/>
+ <Splitter key="splitter"/>,
+ <FlowView
+ key="flowDetails"
+ ref="flowDetails"
+ tab={this.props.routeParams.detailTab}
+ flow={selected}/>
];
} else {
details = null;
@@ -241,4 +243,4 @@ var MainView = React.createClass({
}
});
-module.exports = MainView;
+export default MainView;
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-18 18:49:45 +0000