community
/
device-mgt-core
12
0
Fork 45
Code Issues Pull Requests 24 Packages Projects Releases Wiki Activity

Create action for change lifecycle

Browse Source
merge-requests/91/head
Jayasanka 6 years ago
parent 35a62ae52e
commit b19c79bb44
5 changed files with 93 additions and 24 deletions
Show Stats Download Patch File Download Diff File

7
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycle.js vendored
Unescape View File

@ -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 (
<div>
<LifecycleModal currentStatus={this.props.currentStatus}/>
<LifecycleModal uuid={this.props.uuid} currentStatus={this.props.currentStatus}/>
<Button onClick={this.openModal}>aaaa</Button>
<LifeCycleGraph currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
<LifeCycleGraph openModel={this.openModal} currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
</div>
);

34
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifeCycleGraph.js vendored
Unescape View File

@ -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}
/>
</div>
);
}
}
const LifeCycleGraph = connect(null,mapDispatchToProps)(ConnectedLifeCycleGraph);
export default LifeCycleGraph;

40
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js vendored
Unescape View File

@ -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 {
<Modal
title="Change State"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={null}
>
<Title level={4}>{this.props.currentStatus} <Icon type="arrow-right" /> {nextState}</Title>
<p>Reason:</p>
<TextArea placeholder="Please enter the reason..." autosize />
<form onSubmit={this.handleSubmit}>
<Form.Item>
<label htmlFor="username">username</label>
<Input placeholder="Basic usage" ref={(input) => this.reason = input}/>
</Form.Item>
{/*<Form.Item>*/}
{/*<TextArea*/}
{/*placeholder="Please enter the reason..."*/}
{/*ref={(input) => this.input = input}*/}
{/*autosize*/}
{/*/>*/}
{/*</Form.Item>*/}
<Button key="back" onClick={this.handleCancel}>
Cancel
</Button>,
<Button key="submit" type="primary" htmlType="submit" loading={this.state.loading}>
Submit
</Button>
</form>
</Modal>
</div>
);

19
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/actions/index.js vendored
Unescape View File

@ -88,20 +88,31 @@ export const getLifecycle = ()=> dispatch =>{
};
export const updateLifecycleState = (uuid, nextState) => dispatch => {
export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
const request = "method=get&content-type=application/json&payload={}&api-endpoint=/applications/lifecycle-config/"+uuid+"?action="+nextState;
const payload = {
nextState: nextState,
reason: reason
};
const request = "method=get&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/applications/lifecycle-config/" + uuid;
console.log(request);
return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
).then(res => {
if (res.status === 200) {
let release = res.data.data;
dispatch({type: ActionTypes.GET_RELEASE, payload: release});
dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: {currentStatus: nextState}});
}
}).catch(function (error) {
if (error.response.status === 401) {
window.location.href = 'https://localhost:9443/publisher/login';
} else if (error.response.status === 500) {
dispatch({
type: ActionTypes.CLOSE_LIFECYCLE_MODAL
});
alert("error");
}
});

11
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/js/reducers/index.js vendored
Unescape View File

@ -48,6 +48,17 @@ function rootReducer(state = initialState, action) {
nextState: null
}
});
}else if (action.type === ActionTypes.UPDATE_LIFECYCLE_STATE) {
const release = {};
return Object.assign({}, state, {
lifecycleModal: {
visible: false,
nextState: null,
},
release:{
currentStatus : action.payload.currentStatus
}
});
}
return state;
}

Write Preview
Loading…
Cancel
Save