aboutsummaryrefslogtreecommitdiffstats
path: root/web/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/src')
-rw-r--r--web/src/js/components/flowtable.js89
-rw-r--r--web/src/js/components/mainview.js7
-rw-r--r--web/src/js/ducks/flows.js13
3 files changed, 62 insertions, 47 deletions
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js
index d621387c..642ded17 100644
--- a/web/src/js/components/flowtable.js
+++ b/web/src/js/components/flowtable.js
@@ -46,61 +46,59 @@ const FlowRowContainer = connect(
})
)(FlowRow)
-class FlowTableHead extends React.Component {
+function FlowTableHead({setSort, columns, sort}) {
+
+ //const hasSort = Column.sortKeyFun;
+
+ // let sortDesc = this.props.sort.sortDesc;
+ //
+ // if (Column === this.props.sort.sortColumn) {
+ // sortDesc = !sortDesc;
+ // this.props.setSort(sortColumn, sortDesc);
+ // } else {
+ // this.props.setSort({sortColumn: hasSort && Column, sortDesc: false});
+ // }
+ //
+ // let sortKeyFun = Column.sortKeyFun;
+ // if (sortDesc) {
+ // sortKeyFun = hasSort && function () {
+ // const k = Column.sortKeyFun.apply(this, arguments);
+ // if (_.isString(k)) {
+ // return reverseString("" + k);
+ // }
+ // return -k;
+ // };
+ // }
+ //this.props.setSortKeyFun(sortKeyFun);
+
+ const sortColumn = sort.sortColumn;
+ const sortType = sort.sortDesc ? "sort-desc" : "sort-asc";
- static propTypes = {
- setSortKeyFun: React.PropTypes.func.isRequired,
- columns: React.PropTypes.array.isRequired,
- };
-
- constructor(props, context) {
- super(props, context);
- this.state = {sortColumn: undefined, sortDesc: false};
- }
-
- onClick(Column) {
- const hasSort = Column.sortKeyFun;
-
- let sortDesc = this.state.sortDesc;
-
- if (Column === this.state.sortColumn) {
- sortDesc = !sortDesc;
- this.setState({sortDesc});
- } else {
- this.setState({sortColumn: hasSort && Column, sortDesc: false});
- }
-
- let sortKeyFun = Column.sortKeyFun;
- if (sortDesc) {
- sortKeyFun = hasSort && function () {
- const k = Column.sortKeyFun.apply(this, arguments);
- if (_.isString(k)) {
- return reverseString("" + k);
- }
- return -k;
- };
- }
-
- this.props.setSortKeyFun(sortKeyFun);
- }
-
- render() {
- const sortColumn = this.state.sortColumn;
- const sortType = this.state.sortDesc ? "sort-desc" : "sort-asc";
return (
<tr>
- {this.props.columns.map(Column => (
+ {columns.map(Column => (
<Column.Title
key={Column.name}
- onClick={() => this.onClick(Column)}
- className={sortColumn === Column ? sortType : undefined}
+ onClick={() => setSort({sortColumn: Column.name, sortDesc: Column.name != sort.sortColumn ? false : !sort.sortDesc})}
+ className={sortColumn === Column.name ? sortType : undefined}
/>
))}
</tr>
);
- }
}
+FlowTableHead.propTypes = {
+ setSort: React.PropTypes.func.isRequired,
+ sort: React.PropTypes.object.isRequired,
+ columns: React.PropTypes.array.isRequired
+};
+
+const FlowTableHeadContainer = connect(
+ (state, ownProps) => ({
+ sort: state.flows.sort
+ })
+)(FlowTableHead)
+
class FlowTable extends React.Component {
static propTypes = {
@@ -186,9 +184,10 @@ class FlowTable extends React.Component {
<div className="flow-table" onScroll={this.onViewportUpdate}>
<table>
<thead ref="head" style={{ transform }}>
- <FlowTableHead
+ <FlowTableHeadContainer
columns={flowtable_columns}
setSortKeyFun={this.props.setSortKeyFun}
+ setSort={this.props.setSort}
/>
</thead>
<tbody>
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 22895991..99cdeb3c 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -7,7 +7,7 @@ import {Splitter} from "./common.js"
import FlowTable from "./flowtable.js";
import FlowView from "./flowview/index.js";
import {connect} from 'react-redux'
-import {selectFlow, setFilter, setHighlight} from "../ducks/flows";
+import {selectFlow, setFilter, setHighlight, setSort} from "../ducks/flows";
var MainView = React.createClass({
@@ -161,7 +161,8 @@ var MainView = React.createClass({
<div className="main-view">
<FlowTable ref="flowTable"
selectFlow={this.selectFlow}
- setSortKeyFun={this.setSortKeyFun}
+ setSortKeyFun={(f) => console.log("asdf")}
+ setSort={this.props.setSort}
selected={this.props.selectedFlow} />
{details}
</div>
@@ -173,12 +174,14 @@ const MainViewContainer = connect(
state => ({
flows: state.flows.view,
filter: state.flows.filter,
+ sort: state.flows.sort,
highlight: state.flows.highlight,
selectedFlow: state.flows.all.byId[state.flows.selected[0]]
}),
dispatch => ({
selectFlow: flowId => dispatch(selectFlow(flowId)),
setFilter: filter => dispatch(setFilter(filter)),
+ setSort: (sort) => dispatch(setSort(sort)),
setHighlight: highlight => dispatch(setHighlight(highlight))
}),
undefined,
diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js
index fdbc42ee..bde53179 100644
--- a/web/src/js/ducks/flows.js
+++ b/web/src/js/ducks/flows.js
@@ -5,6 +5,7 @@ import {updateViewFilter, updateViewList} from "./utils/view"
export const UPDATE_FLOWS = "UPDATE_FLOWS"
export const SET_FILTER = "SET_FLOW_FILTER"
export const SET_HIGHLIGHT = "SET_FLOW_HIGHLIGHT"
+export const SET_SORT = "SET_FLOW_SORT"
export const SELECT_FLOW = "SELECT_FLOW"
const {
@@ -20,6 +21,7 @@ const defaultState = {
view: [],
filter: undefined,
highlight: undefined,
+ sort: {sortColumn: undefined, sortDesc: false},
}
function makeFilterFn(filter) {
@@ -46,6 +48,11 @@ export default function reducer(state = defaultState, action) {
...state,
highlight: action.highlight
}
+ case SET_SORT:
+ return {
+ ...state,
+ sort: action.sort
+ }
case SELECT_FLOW:
return {
...state,
@@ -69,6 +76,12 @@ export function setHighlight(highlight) {
highlight
}
}
+export function setSort(sort){
+ return {
+ type: SET_SORT,
+ sort
+ }
+}
export function selectFlow(flowId) {
return {
type: SELECT_FLOW,
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 12:55:16 +0000