Merge pull request #144 from msecret/428-add_service_instance

428 add service instance

static_src/actions/service_actions.js

@@ -45,6 +45,37 @@ export default {
     });
   },
 
+  createInstanceForm(serviceGuid, planGuid) {
+    AppDispatcher.handleViewAction({
+      type: serviceActionTypes.SERVICE_INSTANCE_CREATE_FORM,
+      serviceGuid: serviceGuid,
+      servicePlanGuid: planGuid
+    });
+  },
+
+  createInstance(name, spaceGuid, servicePlanGuid) {
+    AppDispatcher.handleViewAction({
+      type: serviceActionTypes.SERVICE_INSTANCE_CREATE,
+      name: name,
+      spaceGuid: spaceGuid,
+      servicePlanGuid: servicePlanGuid
+    });
+  },
+
+  createdInstance(serviceInstance) {
+    AppDispatcher.handleServerAction({
+      type: serviceActionTypes.SERVICE_INSTANCE_CREATED,
+      serviceInstance: serviceInstance
+    });
+  },
+
+  errorCreateInstance(err) {
+    AppDispatcher.handleServerAction({
+      type: serviceActionTypes.SERVICE_INSTANCE_ERROR,
+      error: err
+    });
+  },
+
   receivedInstances(serviceInstances) {
     AppDispatcher.handleServerAction({
       type: serviceActionTypes.SERVICE_INSTANCES_RECEIVED,

static_src/components/box.jsx

@@ -0,0 +1,23 @@
+
+/**
+ * A component that renders a box with a different style and background
+ */
+
+import React from 'react';
+
+export default class Box extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div className="well">
+        { this.props.children }
+      </div>
+    );
+  }
+}
+

static_src/components/create_service_instance.jsx

@@ -0,0 +1,107 @@
+/**
+ * Renders the form to create a service instance
+ */
+
+import React from 'react';
+
+import Box from './box.jsx';
+import Button from './button.jsx';
+import { Form, FormText, FormSelect, FormElement, FormError } from './form.jsx';
+import SpaceStore from '../stores/space_store.js';
+import ServiceInstanceStore  from '../stores/service_instance_store.js';
+import serviceActions from '../actions/service_actions.js';
+import serviceInstanceStore from '../stores/service_instance_store.js';
+
+function stateSetter() {
+  var spaces = SpaceStore.getAll(),
+      createError = ServiceInstanceStore.createError;
+
+  return {
+    createError: createError,
+    spaces: spaces
+  }
+}
+
+export default class CreateServiceInstance extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      errs: [],
+      spaces: []
+    };
+  }
+
+  componentDidMount() {
+    SpaceStore.addChangeListener(this._onChange);
+    serviceInstanceStore.addChangeListener(this._onChange);
+    this.setState(stateSetter());
+  }
+
+  _onChange = () => {
+    this.setState(stateSetter());
+  }
+
+  _onValidateForm = (errs) => {
+    this.setState({errs: errs});
+  }
+
+  _onValidForm = (values) => {
+    serviceActions.createInstance(
+      values.name,
+      values.space,
+      this.props.servicePlan.guid
+    ); 
+  }
+
+  get serviceName() {
+    return this.props.service.label || 'Unknown Service Name';
+  }
+
+  get servicePlanName() {
+    return this.props.servicePlan.name || 'Unknown Service Plan Name';
+  }
+
+  render() {
+    var createError;
+
+    if (this.state.createError) {
+      createError = <FormError message={ this.state.createError.description } />
+    }
+
+    return (
+      <Box>
+        <h4>Create service instance for { this.serviceName } using { 
+          this.servicePlanName } plan.
+        </h4>
+        { createError }
+        <Form action="/service_instances" method="post" ref="form"
+            onValidate={ this._onValidateForm } onValid={ this._onValidForm }>
+          <FormText 
+            label="Choose a name for the service" 
+            name="name"
+            validator={ FormElement.validatorString }
+          />
+          <FormSelect 
+            label="Select the space for the service instance"
+            name="space"
+            options={ this.state.spaces.map((space) => {
+              return { value: space.guid, label: space.name };
+            })}
+            validator={ FormElement.validatorString }
+          />
+          <Button name="submit">Create service instance</Button>
+        </Form>
+      </Box>
+    );
+  }
+};
+
+CreateServiceInstance.propTypes = {
+  service: React.PropTypes.object,
+  servicePlan: React.PropTypes.object.isRequired
+};
+
+CreateServiceInstance.defaultProps = {
+  service: {}
+}