UI changes for flex down Minor changes for the flex down component to support profile flex down.
Project: http://git-wip-us.apache.org/repos/asf/incubator-myriad/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-myriad/commit/e1841949 Tree: http://git-wip-us.apache.org/repos/asf/incubator-myriad/tree/e1841949 Diff: http://git-wip-us.apache.org/repos/asf/incubator-myriad/diff/e1841949 Branch: refs/heads/master Commit: e1841949196f62e861ac0a7e6f39a77d3f55fcdd Parents: 34e3958 Author: Aashreya Ravi Shankar <ashan...@mapr.com> Authored: Wed Oct 14 13:49:38 2015 -0700 Committer: Santosh Marella <mare...@gmail.com> Committed: Thu Oct 15 12:56:47 2015 -0700 ---------------------------------------------------------------------- .../webapp/js/components/FlexDownComponent.js | 42 +- .../webapp/js/components/FlexUpComponent.js | 24 +- .../main/resources/webapp/public/js/myriad.js | 1767 +++++++++++------- 3 files changed, 1100 insertions(+), 733 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-myriad/blob/e1841949/myriad-scheduler/src/main/resources/webapp/js/components/FlexDownComponent.js ---------------------------------------------------------------------- diff --git a/myriad-scheduler/src/main/resources/webapp/js/components/FlexDownComponent.js b/myriad-scheduler/src/main/resources/webapp/js/components/FlexDownComponent.js index bad917c..caf8428 100644 --- a/myriad-scheduler/src/main/resources/webapp/js/components/FlexDownComponent.js +++ b/myriad-scheduler/src/main/resources/webapp/js/components/FlexDownComponent.js @@ -14,12 +14,14 @@ var request = require('superagent'); var FlexDownModal = React.createClass({ render: function() { + return ( <Modal {...this.props} bsStyle="primary" title='Flex Down Confirmation' animation> <Row> <Col mdOffset={3}> <div className="modal-body"> - Flex Down <Badge>{this.props.instances}</Badge> instance(s)? + Flex Down <Badge>{this.props.instances}</Badge> instance(s) + Profile: <Badge>{this.props.profile}</Badge> ? </div> </Col> </Row> @@ -28,7 +30,7 @@ var FlexDownModal = React.createClass({ <Button bsStyle="success" onClick={ function(){ this.props.onRequestHide(); - this.props.onFlexDown(this.props.instances); + this.props.onFlexDown(this.props.instances, this.props.profile); }.bind(this) } >Flex Down</Button> </div> @@ -44,7 +46,8 @@ var FlexDownComponent = React.createClass({ getInitialState: function () { - return( {numInstances:0}); + return( {selectedProfile: null, + numInstances:0}); }, handleInstanceChange: function() { @@ -52,15 +55,21 @@ var FlexDownComponent = React.createClass({ this.setState({numInstances: instances}); }, + handleProfileChange: function() { + var profile = this.refs.profile.getValue(); + this.setState({selectedProfile: profile}); + }, + componentDidMount: function() { + this.handleProfileChange(); this.handleInstanceChange(); }, - onRequestFlexDown: function(instances, size) { - console.log( "flexing down: " + instances); + onRequestFlexDown: function(instances, profile, constraint) { + console.log( "flexing down: " + instances + " profile: " + profile); request.put('/api/cluster/flexdown') .set('Content-Type', 'application/json') - .send({ "instances": instances}) + .send({ "profile": profile, "instances": instances}) .end(function(err, res){ console.log("Result from api/cluster/flexdown"); console.log(res); @@ -77,11 +86,29 @@ var FlexDownComponent = React.createClass({ render: function () { + var options = []; + var keys = []; + for( var key in this.props.profiles ) { + if( this.props.profiles.hasOwnProperty(key) ) { + keys.push(key); + } + } + for( var ii = 0; ii < keys.length; ii++) { + var key = keys[ii]; + var txt = key; + options.push( <option key={key} value={key}>{txt}</option> ); + } + //TODO: get current number of instances available to flex down from the status to set max flex down value return( <div> <Row> - <Col md={4} mdOffset={1} > + <Col md={6}> + <Input type="select" label='Profile' ref="profile" onChange={this.handleProfileChange} > + { options } + </Input> + </Col> + <Col md={4} > <Input label="Instances" help="Enter the number of instances to flex down." wrapperClassName="wrapper"> <input type="number" size="3" defaultValue="1" min="1" max="999" step="1" ref="instances" @@ -92,6 +119,7 @@ var FlexDownComponent = React.createClass({ <Row> <Col md={2} mdOffset={5} > <ModalTrigger modal={<FlexDownModal + profile={this.state.selectedProfile} instances={this.state.numInstances} onFlexDown={this.onRequestFlexDown} />} > <Button bsStyle="primary" bsSize="large">Flex Down</Button> http://git-wip-us.apache.org/repos/asf/incubator-myriad/blob/e1841949/myriad-scheduler/src/main/resources/webapp/js/components/FlexUpComponent.js ---------------------------------------------------------------------- diff --git a/myriad-scheduler/src/main/resources/webapp/js/components/FlexUpComponent.js b/myriad-scheduler/src/main/resources/webapp/js/components/FlexUpComponent.js index f3f09b2..3ced915 100644 --- a/myriad-scheduler/src/main/resources/webapp/js/components/FlexUpComponent.js +++ b/myriad-scheduler/src/main/resources/webapp/js/components/FlexUpComponent.js @@ -21,7 +21,7 @@ var FlexUpModal = React.createClass({ <Col mdOffset={3}> <div className="modal-body"> Flex up <Badge>{this.props.instances}</Badge> instance(s) - size: <Badge>{this.props.size}</Badge> ? + Profile: <Badge>{this.props.profile}</Badge> ? </div> </Col> </Row> @@ -30,7 +30,7 @@ var FlexUpModal = React.createClass({ <Button bsStyle="success" onClick={ function(){ this.props.onRequestHide(); - this.props.onFlexUp(this.props.instances, this.props.size); + this.props.onFlexUp(this.props.instances, this.props.profile); }.bind(this) } >Flex Up</Button> </div> @@ -46,7 +46,7 @@ var FlexUpComponent = React.createClass({ displayName: "FlexUpComponent", getInitialState: function () { - return( {selectedSize: null, + return( {selectedSProfile: null, numInstances:0}); }, @@ -55,21 +55,21 @@ var FlexUpComponent = React.createClass({ this.setState({numInstances: instances}); }, - handleSizeChange: function() { - var size = this.refs.size.getValue(); - this.setState({selectedSize: size}); + handleProfileChange: function() { + var profile = this.refs.profile.getValue(); + this.setState({selectedProfile: profile}); }, componentDidMount: function() { - this.handleSizeChange(); + this.handleProfileChange(); this.handleInstanceChange(); }, - onRequestFlexUp: function(instances, size) { - console.log( "flexing up: " + instances + " size " + size); + onRequestFlexUp: function(instances, profile) { + console.log( "flexing up: " + instances + " Profile " + profile); request.put('/api/cluster/flexup') .set('Content-Type', 'application/json') - .send({ "profile": size, "instances": instances}) + .send({ "profile": profile, "instances": instances}) .end(function(err, res){ if (!err) { console.log("flexup successful!"); @@ -100,7 +100,7 @@ var FlexUpComponent = React.createClass({ <div className="modal-container"> <Row> <Col md={6}> - <Input type="select" label='Profile' ref="size" onChange={this.handleSizeChange} > + <Input type="select" label='Profile' ref="profile" onChange={this.handleProfileChange} > { options } </Input> </Col> @@ -119,7 +119,7 @@ var FlexUpComponent = React.createClass({ <Row> <Col md={2} mdOffset={5} > <ModalTrigger modal={<FlexUpModal - size={this.state.selectedSize} + profile={this.state.selectedProfile} instances={this.state.numInstances} onFlexUp={this.onRequestFlexUp} />} > <Button bsStyle="primary" bsSize="large">Flex Up</Button>
