Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component, PropTypes} from 'react';
- import {connect} from 'react-redux';
- import {Dialog} from 'components';
- import {reduxForm, SubmissionError} from 'redux-form';
- import {loadNodes} from 'redux/modules/clusters/clusters';
- import * as nodeActions from 'redux/modules/nodes/nodes';
- import {Alert, Accordion, Panel} from 'react-bootstrap';
- import _ from 'lodash';
- import Select from 'react-select';
- const DIALOG_FIELDS = {
- nodesAvailable: {
- label: 'Nodes Available',
- size: 10,
- description: 'Available nodes what are not in the cluster'
- },
- nodesAdded: {
- label: 'Nodes Added',
- size: 10,
- description: 'Nodes added to the cluster'
- }
- };
- const DIALOG_FIELDS_KEYS = Object.keys(DIALOG_FIELDS);
- @connect(state => ({
- clusters: state.clusters,
- nodes: state.nodes
- }), {
- loadNodesList: nodeActions.load,
- loadNodes: loadNodes,
- addToCluster: nodeActions.create,
- removeFromCluster: nodeActions.remove
- })
- @reduxForm({
- form: 'newContainer',
- // fields: ['image', 'tag', 'node', 'registry', 'restart', 'restartRetries'].concat(DIALOG_FIELDS_KEYS)
- fields: DIALOG_FIELDS_KEYS
- })
- export default class EditClusterNodes extends Component {
- static propTypes = {
- clusters: PropTypes.object.isRequired,
- cluster: PropTypes.object.isRequired,
- loadNodes: PropTypes.func.isRequired,
- loadNodesList: PropTypes.func.isRequired,
- fields: PropTypes.object.isRequired,
- nodes: PropTypes.object.isRequired, // all nodes
- onHide: PropTypes.func.isRequired,
- addToCluster: PropTypes.func.isRequired,
- removeFromCluster: PropTypes.func.isRequired
- };
- constructor(...params) {
- super(...params);
- this.state = {
- nodesAvailable: [],
- nodesAssigned: [],
- selectedAvailable: '',
- selectedAssigned: ''
- };
- }
- addNode() {
- let node = this.state.selectedAvailable;
- const {cluster} = this.props;
- if (!node || (this.state.nodesAssigned && this.state.nodesAssigned[node])) {
- return;
- }
- this.props.addToCluster({name: node, cluster: cluster.name});
- this.setState({
- nodesAvailable: this.state.nodesAvailable.filter(item => (item !== node)),
- nodesAssigned: this.state.nodesAssigned.concat(node)
- });
- }
- removeNode() {
- let node = this.state.selectedAssigned;
- const {cluster} = this.props;
- if (!node || (this.state.nodesAvailable && this.state.nodesAvailable[node])) {
- return;
- }
- this.props.removeFromCluster(node, cluster.name);
- this.setState({
- nodesAvailable: this.state.nodesAvailable.concat(node),
- nodesAssigned: this.state.nodesAssigned.filter(item => (item !== node))
- });
- }
- availableSelectChanged(option) {
- this.setState({
- selectedAvailable: option.target.value
- });
- }
- addedSelectChanged(option) {
- this.setState({
- selectedAssigned: option.target.value
- });
- }
- componentWillMount() {
- const {loadNodes, cluster, clusters, loadNodesList} = this.props;
- loadNodes(cluster.name);
- loadNodesList();
- let currentNodesList = clusters[cluster.name].nodesList;
- this.setState({
- nodesAvailable: this.getNodesList(),
- nodesAssigned: currentNodesList
- });
- }
- /**
- * Get list of available nodes
- * @returns {Array}
- */
- getNodesList() {
- let nodesList = [];
- const {nodes, cluster} = this.props;
- Object.keys(nodes).filter((node) => (nodes[node].cluster !== cluster.name)).forEach(node => { // lol
- nodesList.push(node);
- });
- return nodesList;
- }
- render() {
- const s = require('./EditClusterNodes.scss');
- require('react-select/dist/react-select.css');
- const {nodes, cluster} = this.props;
- return (
- <Dialog show
- size="large"
- title="Edit Cluster Nodes"
- onHide={this.props.onHide}
- cancelTitle={'Close'}
- hideOk
- >
- <form className={s.editClusterNodes}>
- <div className="form-group" required>
- <div className="select-group">
- <label>Available nodes</label><br/>
- <select className="form-control" size="10"
- value={this.state.selectedAvailable}
- onChange={this.availableSelectChanged.bind(this)}
- onClick={this.availableSelectChanged.bind(this)}
- >
- {this.state.nodesAvailable && this.state.nodesAvailable.map(node =>
- <option key={node} value={node}>{node} ({nodes[node].cluster || '[not in cluster]'})</option>
- )}
- </select>
- </div>
- <div className="buttons-wrapper">
- <button className="btn btn-default btn-sm react-select-button"
- type="button"
- onClick={this.addNode.bind(this)}
- >
- >>
- </button><br/>
- <button className="btn btn-default btn-sm react-select-button"
- type="button"
- onClick={this.removeNode.bind(this)}
- >
- <<
- </button>
- </div>
- <div className="select-group">
- <label>Added nodes</label><br/>
- <select className="form-control" size="10"
- value={this.state.selectedAssigned}
- onChange={this.addedSelectChanged.bind(this)}
- onClick={this.addedSelectChanged.bind(this)}
- >
- {this.state.nodesAssigned && this.state.nodesAssigned.map(node =>
- <option key={node} value={node}>{node} ({cluster.name})</option>
- )}
- </select>
- </div>
- </div>
- </form>
- </Dialog>
- );
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement