myriad-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From smare...@apache.org
Subject [10/10] incubator-myriad git commit: UI changes for flex down
Date Thu, 15 Oct 2015 21:00:22 GMT
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 <ashankar@mapr.com>
Authored: Wed Oct 14 13:49:38 2015 -0700
Committer: Santosh Marella <marella@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>


Mime
View raw message