Tweaks to rendering

Author: jfrux

app/components/EonDetail/StateList/StateListToolbar.js

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as UiActions from '../../../../actions/ui_actions';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Dropdown, DropdownItem, DropdownToggle, DropdownMenu } from 'reactstrap';
+import { getDepthState } from '../../../../selectors/selectors';
+
+const propTypes = {
+  paused: PropTypes.bool,
+  depth: PropTypes.number,
+  messageCount: PropTypes.number
+};
+
+class StateTypeDropdown extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      servicelistOpen: false,
+      dropdownOpen: false
+    };
+  }
+  toggleServiceList = () => {
+    this.setState({
+      servicelistOpen: !this.state.servicelistOpen
+    });
+  }
+  toggle = () => {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+  setService = (serviceKey) => {
+    this.props.DISCONNECT(this.props.type);
+    this.props.CHANGE_TAB(serviceKey);
+    this.props.CONNECT(serviceKey);
+  }
+  setDepth = (depth) => {
+    this.props.SET_STATE_LIST_DEPTH(depth);
+  }
+  togglePause = () => {
+    this.props.TOGGLE_PAUSE();
+  }
+
+  render() {
+    const { depth } = this.props;
+    return (
+      <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+      <DropdownToggle nav caret>
+        Depth: {depth + ""}
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem onClick={() => { this.setDepth(0); }}>0</DropdownItem>
+        <DropdownItem onClick={() => { this.setDepth(1); }}>1</DropdownItem>
+        <DropdownItem onClick={() => { this.setDepth(2); }}>2</DropdownItem>
+        <DropdownItem onClick={() => { this.setDepth(3); }}>3</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+    );
+  }
+}
+
+StateDepthDropdown.propTypes = propTypes;
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(...UiActions, dispatch);
+}
+
+const mapStateToProps = (state, props) => {
+  return {
+    depth: getDepthState(state)
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(StateDepthDropdown);

app/components/EonDetail/StateList/StateListToolbar/StateDepthDropdown.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { NavItem, NavLink } from 'reactstrap';
+import { getMessageCountState } from '../../../../selectors/selectors';
+const propTypes = {
+  messageCount: PropTypes.number
+};
+
+class StateMessages extends Component {
+  render() {
+    const { messageCount } = this.props;
+    return (
+    <NavItem>
+      <NavLink disabled href="#">Messages: {messageCount}</NavLink>
+    </NavItem>
+    )
+  }
+}
+
+StateMessages.propTypes = propTypes;
+
+
+const mapStateToProps = (state) => {
+  return {
+    messageCount: getMessageCountState(state)
+  };
+};
+
+export default connect(
+  mapStateToProps
+)(StateMessages);

app/components/EonDetail/StateList/StateListToolbar/StateMessages.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as ZmqActions from '../../../../actions/zmq_actions';
+import * as UiActions from '../../../../actions/ui_actions';
+import * as EonActions from '../../../../actions/eon_detail_actions';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { getZmqServicesState, getZmqServicesIdsSortedState,  getActiveTabState} from '../../../../selectors/selectors';
+const propTypes = {
+  services: PropTypes.object,
+  activeTab: PropTypes.object,
+  serviceIds: PropTypes.array
+};
+
+class StateTypeDropdown extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      servicelistOpen: false,
+      dropdownOpen: false
+    };
+  }
+  toggleServiceList = () => {
+    this.setState({
+      servicelistOpen: !this.state.servicelistOpen
+    });
+  }
+  toggle = () => {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+  setService = (serviceKey) => {
+    this.props.DISCONNECT(this.props.type);
+    this.props.CHANGE_TAB(serviceKey);
+    this.props.CONNECT(serviceKey);
+  }
+  setDepth = (depth) => {
+    this.props.SET_STATE_LIST_DEPTH(depth);
+  }
+  togglePause = () => {
+    this.props.TOGGLE_PAUSE();
+  }
+
+  render() {
+    const { serviceIds, services, activeService } = this.props;
+    const stateTabs = serviceIds.map((key) => {
+      const service = services[key];
+      return (
+        <DropdownItem onClick={() => { this.setService(key); }} id={key + "-tab-link"} key={key + "-tab-link"}>{service.label}</DropdownItem>
+      );
+    });
+    return (<Dropdown nav isOpen={this.state.servicelistOpen} toggle={this.toggleServiceList}>
+      <DropdownToggle nav caret>
+        {activeService.label}
+        {!activeService.id && "Inactive"}
+      </DropdownToggle>
+      <DropdownMenu className="service-list-dropdown">
+        {stateTabs}
+      </DropdownMenu>
+    </Dropdown>
+    );
+  }
+}
+
+StateTypeDropdown.propTypes = propTypes;
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({...ZmqActions,...EonActions,...UiActions}, dispatch);
+}
+
+const mapStateToProps = (state) => {
+  return {
+    serviceIds: getZmqServicesIdsSortedState(state),
+    services: getZmqServicesState(state),
+    activeService: getActiveTabState(state)
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(StateTypeDropdown);

app/components/EonDetail/StateList/StateListToolbar/StateTypeDropdown.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { Nav } from 'reactstrap';
+import StateMessages from './StateMessages';
+import StateTypeDropdown from './StateTypeDropdown';
+const propTypes = {};
+
+class StateListToolbar extends Component {
+  render() {
+    return (
+      <Nav className="events-toolbar">
+        <StateTypeDropdown />
+        <StateMessages />
+      </Nav>
+    )
+  }
+}
+// <NavItem>
+//   <NavLink href="#" onClick={this.togglePause}>
+//     {paused && <FontAwesomeIcon icon={"play"} />}
+//     {!paused && <FontAwesomeIcon icon={"pause"} />}
+//   </NavLink>
+// </NavItem>
+StateListToolbar.propTypes = propTypes;
+
+// function mapDispatchToProps(dispatch) {
+//   return bindActionCreators({}, dispatch);
+// }
+
+const mapStateToProps = (state, props) => {
+  return {};
+};
+
+export default StateListToolbar;