added chaincode id validation

monitoring_ui/README.md

@@ -68,7 +68,7 @@ The arguments form is generated when the user selects a particular function from
 
 If all values are valid and submit is clicked, then the UI will create a valid OBC REST payload with the user input as the arguments and send it along with a request to the configured OBC peer. It then waits for a response from the peer. The response will be output to the section in the second column, which is the Request Payload section.
 
-#### Request Payload
+#### Response Payload
 This section of the UI is responsible for displaying the response from the OBC peer. It does so by recursively traversing the payload and outputting the response to the card. Note that it is possible to submit multiple requests from any combination of tabs; the UI will just generate additional cards to display the payload. If a REST request is made with the exact same function and arguments, it will not be shown as an additional card, because it is a duplicate.
 
 When a request payload card initially appears, it will be in the collapsed state. Click the expand button on the right side of the payload's card header to view the contents of the card. You'll see a `Poll for changes` toggle along with a basic formatted string representation of the response payload. When the toggle is on, the UI will actively check for changes to a particular query every time the blockchain height changes. In the case of the simple contract, it is useful for monitoring a particular asset for changes. This toggle is set to off by default.

monitoring_ui/src/containers/ConfigurationDialog.jsx

@@ -29,8 +29,11 @@ import {setConfigDialogDisplay} from '../actions/ConfigurationActions'
 
 import * as strings from '../resources/strings'
 
+import { actions, getField } from 'react-redux-form';
+
 class ConfigurationDialog extends React.Component {
   render() {
+    console.log(this.props);
     return (
       <div>
         <FlatButton label={strings.OBC_CONFIG_DIALOG_TITLE} onTouchTap={this.props.openDialog} style={{color:"#ffffff", marginTop: 8}}/>
@@ -53,19 +56,32 @@ class ConfigurationDialog extends React.Component {
 
 const mapStateToProps = (state) => {
   return{
-    showDialog: state.configuration.showDialog
+    showDialog: state.configuration.showDialog,
+    validChaincodeID: state.configuration.chaincodeId,
+    obcConfigurationForm: state.obcConfigurationForm
   }
 }
 
-const mapDispatchToProps = (dispatch) => {
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const {showDialog, validChaincodeID, obcConfigurationForm} = stateProps;
+  const {dispatch} = dispatchProps;
+
+  console.log(stateProps)
+
   return{
+    ...stateProps,
     closeDialog: () => {
+      if(getField(obcConfigurationForm, 'chaincodeId').errors){
+        dispatch(actions.change('obcConfiguration.chaincodeId',validChaincodeID));
+        dispatch(actions.setValidity('obcConfiguration.chaincodeId',true));
+      }
+
       dispatch(setConfigDialogDisplay(false))
-    },
+    },
     openDialog: () => {
       dispatch(setConfigDialogDisplay(true))
     }
-  }
+  };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConfigurationDialog)
+export default connect(mapStateToProps, null, mergeProps)(ConfigurationDialog)

monitoring_ui/src/containers/forms/ObcConfigurationForm.jsx

@@ -18,7 +18,7 @@ Alex Nguyen - Initial Contribution
 *****************************************************************************/
 import React from 'react';
 import { connect } from 'react-redux';
-import { Field, Form, actions } from 'react-redux-form';
+import { Field, Form, actions, getField } from 'react-redux-form';
 import TextField from 'material-ui/lib/text-field';
 import FlatButton from 'material-ui/lib/flat-button';
 
@@ -38,15 +38,37 @@ class ObcConfigurationForm extends React.Component {
     let { dispatch } = this.props;
 
     console.log(obcConfiguration);
+    let idWithoutSpaces = obcConfiguration.chaincodeId.replace(/ /g,'');
+
+    console.log(idWithoutSpaces);
+    console.log(idWithoutSpaces.length)
+
+    //submit if the length is correct
+    if(idWithoutSpaces.length === 128){
+      this.props.dispatch(actions.change('obcConfiguration.chaincodeId',obcConfiguration.chaincodeId.replace(/ /g,'')));
+
+      let config = Object.assign({}, obcConfiguration, {
+        chaincodeId: idWithoutSpaces
+      })
+
+      //set the properties specific to obc in our configuration store
+      dispatch(setConfiguration(config))
+
+      //close the dialog
+      dispatch(setConfigDialogDisplay(false))
+      this.props.dispatch(actions.setValidity('obcConfiguration.chaincodeId', true));
+    }else{
+      //set an error message if the length is incorrect
+      //this.props.dispatch(actions.change('obcConfiguration.errors.chaincodeId',strings.CHAINCODE_LENGTH_ERROR(idWithoutSpaces.length)));
+      this.props.dispatch(actions.setValidity('obcConfiguration.chaincodeId', false));
+      //console.log(getField(obcConfiguration, 'chaincodeId').valid)
+      //this.props.dispatch(actions.validate('obcConfiguration.chaincodeId', false))
+    }
 
-    //set the properties specific to obc in our configuration store
-    dispatch(setConfiguration(obcConfiguration))
 
-    //close the dialog
-    dispatch(setConfigDialogDisplay(false))
   }
   render() {
-    let { obcConfiguration } = this.props;
+    let { obcConfiguration, obcConfigurationForm } = this.props;
 
     return (
       <Form model="obcConfiguration" noValidate
@@ -64,6 +86,7 @@ class ObcConfigurationForm extends React.Component {
             hintText={strings.OBC_CONFIG_CHAINCODE_ID_HT}
             floatingLabelText = {strings.OBC_CONFIG_CHAINCODE_ID_FL}
             fullWidth={true}
+            errorText={getField(obcConfigurationForm, 'chaincodeId').errors ? strings.CHAINCODE_LENGTH_ERROR : ""}
             />
         </MaterialField>
         <br/>
@@ -92,7 +115,7 @@ class ObcConfigurationForm extends React.Component {
 }
 
 function mapStateToProps(state) {
-  return { obcConfiguration: state.obcConfiguration };
+  return { obcConfiguration: state.obcConfiguration, obcConfigurationForm: state.obcConfigurationForm };
 }
 
 export default connect(mapStateToProps)(ObcConfigurationForm);

monitoring_ui/src/reducers/RootReducer.js

@@ -23,7 +23,7 @@ import {chaincode} from './ChaincodeReducer.js'
 
 import {
   modelReducer,
-  createFormReducer
+  formReducer
 } from 'react-redux-form';
 
 const initialConfigurationState = {
@@ -50,6 +50,7 @@ const rootReducer = combineReducers({
   //obcConfiguration is the model that deals with any configuration related to obc
   obcConfiguration: modelReducer('obcConfiguration', initialConfigurationState),
   chaincodeOpsForm: modelReducer('chaincodeOpsForm', initialChaincodeOpsFormState),
+  obcConfigurationForm: formReducer('obcConfiguration'),
   //
   chaincode
 

monitoring_ui/src/resources/strings.js

@@ -28,3 +28,5 @@ export const APP_BAR_MAIN_TITLE_TEXT = "IoT Blockchain Monitor"
 //text for the word "Block"
 export const BLOCK_CARD_HEADER_TEXT = "Block"
 export const BLOCK_CARD_CONTENTS_TRANSACTION_TEXT = "Transactions"
+
+export const CHAINCODE_LENGTH_ERROR = "This Chaincode ID is invalid. It should be 128 characters long."