Advertisement
Guest User

Untitled

a guest
Sep 28th, 2016
56
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component, PropTypes} from 'react';
  2. import {connect} from 'react-redux';
  3. import {Dialog} from 'components';
  4. import {reduxForm, SubmissionError} from 'redux-form';
  5. import {loadNodes} from 'redux/modules/clusters/clusters';
  6. import * as nodeActions from 'redux/modules/nodes/nodes';
  7. import {Alert, Accordion, Panel} from 'react-bootstrap';
  8. import _ from 'lodash';
  9. import Select from 'react-select';
  10.  
  11. const DIALOG_FIELDS = {
  12.   nodesAvailable: {
  13.     label: 'Nodes Available',
  14.     size: 10,
  15.     description: 'Available nodes what are not in the cluster'
  16.   },
  17.   nodesAdded: {
  18.     label: 'Nodes Added',
  19.     size: 10,
  20.     description: 'Nodes added to the cluster'
  21.   }
  22. };
  23. const DIALOG_FIELDS_KEYS = Object.keys(DIALOG_FIELDS);
  24.  
  25. @connect(state => ({
  26.   clusters: state.clusters,
  27.   nodes: state.nodes
  28. }), {
  29.   loadNodesList: nodeActions.load,
  30.   loadNodes: loadNodes,
  31.   addToCluster: nodeActions.create,
  32.   removeFromCluster: nodeActions.remove
  33. })
  34. @reduxForm({
  35.   form: 'newContainer',
  36.   // fields: ['image', 'tag', 'node', 'registry', 'restart', 'restartRetries'].concat(DIALOG_FIELDS_KEYS)
  37.   fields: DIALOG_FIELDS_KEYS
  38. })
  39.  
  40.  
  41. export default class EditClusterNodes extends Component {
  42.  
  43.   static propTypes = {
  44.     clusters: PropTypes.object.isRequired,
  45.     cluster: PropTypes.object.isRequired,
  46.     loadNodes: PropTypes.func.isRequired,
  47.     loadNodesList: PropTypes.func.isRequired,
  48.     fields: PropTypes.object.isRequired,
  49.     nodes: PropTypes.object.isRequired, // all nodes
  50.     onHide: PropTypes.func.isRequired,
  51.     addToCluster: PropTypes.func.isRequired,
  52.     removeFromCluster: PropTypes.func.isRequired
  53.   };
  54.  
  55.   constructor(...params) {
  56.     super(...params);
  57.     this.state = {
  58.       nodesAvailable: [],
  59.       nodesAssigned: [],
  60.       selectedAvailable: '',
  61.       selectedAssigned: ''
  62.     };
  63.   }
  64.  
  65.   addNode() {
  66.     let node = this.state.selectedAvailable;
  67.     const {cluster} = this.props;
  68.     if (!node || (this.state.nodesAssigned && this.state.nodesAssigned[node])) {
  69.       return;
  70.     }
  71.  
  72.     this.props.addToCluster({name: node, cluster: cluster.name});
  73.     this.setState({
  74.       nodesAvailable: this.state.nodesAvailable.filter(item => (item !== node)),
  75.       nodesAssigned: this.state.nodesAssigned.concat(node)
  76.     });
  77.   }
  78.  
  79.   removeNode() {
  80.     let node = this.state.selectedAssigned;
  81.     const {cluster} = this.props;
  82.     if (!node || (this.state.nodesAvailable && this.state.nodesAvailable[node])) {
  83.       return;
  84.     }
  85.  
  86.     this.props.removeFromCluster(node, cluster.name);
  87.     this.setState({
  88.       nodesAvailable: this.state.nodesAvailable.concat(node),
  89.       nodesAssigned: this.state.nodesAssigned.filter(item => (item !== node))
  90.     });
  91.   }
  92.  
  93.   availableSelectChanged(option) {
  94.     this.setState({
  95.       selectedAvailable: option.target.value
  96.     });
  97.   }
  98.  
  99.   addedSelectChanged(option) {
  100.     this.setState({
  101.       selectedAssigned: option.target.value
  102.     });
  103.   }
  104.  
  105.   componentWillMount() {
  106.     const {loadNodes, cluster, clusters, loadNodesList} = this.props;
  107.     loadNodes(cluster.name);
  108.     loadNodesList();
  109.  
  110.     let currentNodesList = clusters[cluster.name].nodesList;
  111.     this.setState({
  112.       nodesAvailable: this.getNodesList(),
  113.       nodesAssigned: currentNodesList
  114.     });
  115.   }
  116.  
  117.   /**
  118.    * Get list of available nodes
  119.    * @returns {Array}
  120.    */
  121.   getNodesList() {
  122.     let nodesList = [];
  123.     const {nodes, cluster} = this.props;
  124.     Object.keys(nodes).filter((node) => (nodes[node].cluster !== cluster.name)).forEach(node => { // lol
  125.       nodesList.push(node);
  126.     });
  127.     return nodesList;
  128.   }
  129.  
  130.   render() {
  131.     const s = require('./EditClusterNodes.scss');
  132.     require('react-select/dist/react-select.css');
  133.     const {nodes, cluster} = this.props;
  134.     return (
  135.       <Dialog show
  136.               size="large"
  137.               title="Edit Cluster Nodes"
  138.               onHide={this.props.onHide}
  139.               cancelTitle={'Close'}
  140.               hideOk
  141.       >
  142.         <form className={s.editClusterNodes}>
  143.           <div className="form-group" required>
  144.             <div className="select-group">
  145.               <label>Available nodes</label><br/>
  146.               <select className="form-control" size="10"
  147.                       value={this.state.selectedAvailable}
  148.                       onChange={this.availableSelectChanged.bind(this)}
  149.                       onClick={this.availableSelectChanged.bind(this)}
  150.               >
  151.                 {this.state.nodesAvailable && this.state.nodesAvailable.map(node =>
  152.                   <option key={node} value={node}>{node} ({nodes[node].cluster || '[not in cluster]'})</option>
  153.                 )}
  154.               </select>
  155.             </div>
  156.             <div className="buttons-wrapper">
  157.               <button className="btn btn-default btn-sm react-select-button"
  158.                       type="button"
  159.                       onClick={this.addNode.bind(this)}
  160.               >
  161.                 &gt;&gt;
  162.               </button><br/>
  163.               <button className="btn btn-default btn-sm react-select-button"
  164.                       type="button"
  165.                       onClick={this.removeNode.bind(this)}
  166.               >
  167.                 &lt;&lt;
  168.               </button>
  169.             </div>
  170.             <div className="select-group">
  171.               <label>Added nodes</label><br/>
  172.               <select className="form-control" size="10"
  173.                       value={this.state.selectedAssigned}
  174.                       onChange={this.addedSelectChanged.bind(this)}
  175.                       onClick={this.addedSelectChanged.bind(this)}
  176.               >
  177.                 {this.state.nodesAssigned && this.state.nodesAssigned.map(node =>
  178.                   <option key={node} value={node}>{node} ({cluster.name})</option>
  179.                 )}
  180.               </select>
  181.             </div>
  182.           </div>
  183.         </form>
  184.       </Dialog>
  185.     );
  186.   }
  187. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement