diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js index 0447bd0213..485ff30e29 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js @@ -13,7 +13,8 @@ const mapDispatchToProps = dispatch => ({ const mapStateToProps = state => { return { lifecycle: state.lifecycle, - currentStatus : state.release.currentStatus.toUpperCase() + currentStatus : state.release.currentStatus.toUpperCase(), + uuid : state.release.uuid }; }; @@ -38,9 +39,9 @@ class ConnectedLifeCycle extends React.Component { if (lifecycle != null) { return (
- + - +
); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js index fa7ae3de7e..dd22c00eb4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js @@ -1,6 +1,11 @@ import React from "react"; import {Graph} from 'react-d3-graph'; +import {connect} from "react-redux"; +import {getLifecycle, openLifecycleModal} from "../../../js/actions"; +const mapDispatchToProps = dispatch => ({ + openLifecycleModal: (nextState) => dispatch(openLifecycleModal(nextState)) +}); // the graph configuration, you only need to pass down properties // that you want to override, otherwise default ones will be used @@ -36,11 +41,23 @@ const myConfig = { } }; -const onClickNode = function(nodeId) { - window.alert(`Clicked node ${nodeId}`); -}; -class LifeCycleGraph extends React.Component { + +class ConnectedLifeCycleGraph extends React.Component { + + + constructor(props){ + super(props); + this.nextStates = null; + this.onClickNode = this.onClickNode.bind(this); + } + + onClickNode = function(nodeId) { + const nextStates = this.nextStates; + if(nextStates.includes(nodeId)){ + this.props.openLifecycleModal(nodeId); + } + }; render() { // graph payload (with minimalist structure) @@ -48,7 +65,7 @@ class LifeCycleGraph extends React.Component { const lifecycle = this.props.lifecycle; const nodes = []; const links = []; - const nextStates = lifecycle[this.props.currentStatus].proceedingStates; + this.nextStates = lifecycle[this.props.currentStatus].proceedingStates; Object.keys(lifecycle).forEach((stateName) => { @@ -56,7 +73,7 @@ class LifeCycleGraph extends React.Component { let color = "rgb(83, 92, 104)"; if (stateName === this.props.currentStatus) { color = "rgb(39, 174, 96)"; - } else if (nextStates.includes(stateName)) { + } else if (this.nextStates.includes(stateName)) { color = "rgb(0,192,255)"; } let node = { @@ -67,7 +84,6 @@ class LifeCycleGraph extends React.Component { //todo: remove checking property if (state.hasOwnProperty("proceedingStates")) { - state.proceedingStates.forEach((proceedingState) => { let link = { source: stateName, @@ -90,12 +106,12 @@ class LifeCycleGraph extends React.Component { id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error data={data} config={myConfig} - onClickNode={onClickNode} + onClickNode={this.onClickNode} /> ); } } - +const LifeCycleGraph = connect(null,mapDispatchToProps)(ConnectedLifeCycleGraph); export default LifeCycleGraph; \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js index fa1e719450..e19510bad6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js @@ -1,7 +1,7 @@ import React from "react"; -import {Modal, Typography,Icon,Input} from 'antd'; +import {Modal, Typography, Icon, Input, Form, Checkbox, Button} from 'antd'; import {connect} from 'react-redux'; -import {closeLifecycleModal} from "../../../js/actions"; +import {closeLifecycleModal, updateLifecycleState} from "../../../js/actions"; const { TextArea } = Input; const { Title } = Typography; @@ -15,7 +15,8 @@ const mapStateToProps = state => { }; const mapDispatchToProps = dispatch => ({ - closeLifecycleModal : () => dispatch(closeLifecycleModal()) + closeLifecycleModal : () => dispatch(closeLifecycleModal()), + updateLifecycleState : (uuid, nextState, reason) => dispatch(updateLifecycleState(uuid, nextState, reason)) }); const Text = Typography; @@ -24,6 +25,7 @@ class ConnectedLifecycleModal extends React.Component { constructor(props) { super(props); this.state = { + loading: false, visible: false }; } @@ -46,14 +48,23 @@ class ConnectedLifecycleModal extends React.Component { this.setState({ visible: false, }); + this.props.closeLifecycleModal(); }; handleCancel = (e) => { this.setState({ visible: false, + loading: false }); this.props.closeLifecycleModal(); }; + handleSubmit = event => { + this.setState({ loading: true }); + event.preventDefault(); + console.log(this.reason); + console.log("uuid", this.props.uuid); + this.props.updateLifecycleState(this.props.uuid, this.props.nextState, this.reason.state.value) + }; render() { if (this.props.nextState != null) { @@ -63,12 +74,31 @@ class ConnectedLifecycleModal extends React.Component { {this.props.currentStatus} <Icon type="arrow-right" /> {nextState}

Reason:

-