forked from community/device-mgt-core
Jayasanka
5 years ago
parent
1ab3cd0c2b
commit
3e3d8fe1ac
@ -1,56 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import LifeCycleGraph from "./LifeCycleGraph";
|
|
||||||
import {connect} from "react-redux";
|
|
||||||
import {getLifecycle, openLifecycleModal} from "../../../js/actions";
|
|
||||||
import {Button} from "antd";
|
|
||||||
import LifecycleModal from "./LifecycleModal";
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
|
||||||
getLifecycle: () => dispatch(getLifecycle()),
|
|
||||||
openLifecycleModal: (nextState) => dispatch(openLifecycleModal(nextState))
|
|
||||||
});
|
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
return {
|
|
||||||
lifecycle: state.lifecycle,
|
|
||||||
currentStatus : state.release.currentStatus.toUpperCase(),
|
|
||||||
uuid : state.release.uuid
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
class ConnectedLifeCycle extends React.Component {
|
|
||||||
|
|
||||||
constructor(props){
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.openModal = this.openModal.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.props.getLifecycle();
|
|
||||||
}
|
|
||||||
|
|
||||||
openModal() {
|
|
||||||
this.props.openLifecycleModal("IN_REVIEW");
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const lifecycle = this.props.lifecycle;
|
|
||||||
if (lifecycle != null) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<LifecycleModal uuid={this.props.uuid} currentStatus={this.props.currentStatus}/>
|
|
||||||
<Button onClick={this.openModal}>aaaa</Button>
|
|
||||||
<LifeCycleGraph openModel={this.openModal} currentStatus={this.props.currentStatus} lifecycle={this.props.lifecycle}/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const LifeCycle = connect(mapStateToProps, mapDispatchToProps)(ConnectedLifeCycle);
|
|
||||||
|
|
||||||
export default LifeCycle;
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
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
|
|
||||||
const myConfig = {
|
|
||||||
nodeHighlightBehavior: true,
|
|
||||||
directed: true,
|
|
||||||
height: 400,
|
|
||||||
d3: {
|
|
||||||
alphaTarget: 0.05,
|
|
||||||
gravity: -200,
|
|
||||||
linkLength: 200,
|
|
||||||
linkStrength: 1
|
|
||||||
},
|
|
||||||
node: {
|
|
||||||
color: "#d3d3d3",
|
|
||||||
fontColor: "black",
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: "normal",
|
|
||||||
highlightFontSize: 12,
|
|
||||||
highlightFontWeight: "bold",
|
|
||||||
highlightStrokeColor: "SAME",
|
|
||||||
highlightStrokeWidth: 1.5,
|
|
||||||
labelProperty: "id",
|
|
||||||
mouseCursor: "pointer",
|
|
||||||
opacity: 1,
|
|
||||||
strokeColor: "none",
|
|
||||||
strokeWidth: 1.5,
|
|
||||||
svg: "",
|
|
||||||
symbolType: "circle",
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
highlightColor: 'lightblue'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
const lifecycle = this.props.lifecycle;
|
|
||||||
const nodes = [];
|
|
||||||
const links = [];
|
|
||||||
this.nextStates = lifecycle[this.props.currentStatus].proceedingStates;
|
|
||||||
|
|
||||||
|
|
||||||
Object.keys(lifecycle).forEach((stateName) => {
|
|
||||||
const state = lifecycle[stateName];
|
|
||||||
let color = "rgb(83, 92, 104)";
|
|
||||||
if (stateName === this.props.currentStatus) {
|
|
||||||
color = "rgb(39, 174, 96)";
|
|
||||||
} else if (this.nextStates.includes(stateName)) {
|
|
||||||
color = "rgb(0,192,255)";
|
|
||||||
}
|
|
||||||
let node = {
|
|
||||||
id: stateName,
|
|
||||||
color: color
|
|
||||||
};
|
|
||||||
nodes.push(node);
|
|
||||||
|
|
||||||
//todo: remove checking property
|
|
||||||
if (state.hasOwnProperty("proceedingStates")) {
|
|
||||||
state.proceedingStates.forEach((proceedingState) => {
|
|
||||||
let link = {
|
|
||||||
source: stateName,
|
|
||||||
target: proceedingState
|
|
||||||
};
|
|
||||||
links.push(link);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = {
|
|
||||||
nodes: nodes,
|
|
||||||
links: links
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Graph
|
|
||||||
id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
|
|
||||||
data={data}
|
|
||||||
config={myConfig}
|
|
||||||
onClickNode={this.onClickNode}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const LifeCycleGraph = connect(null,mapDispatchToProps)(ConnectedLifeCycleGraph);
|
|
||||||
export default LifeCycleGraph;
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {Modal, Typography, Icon, Input, Form, Checkbox, Button} from 'antd';
|
|
||||||
import {connect} from 'react-redux';
|
|
||||||
import {closeLifecycleModal, updateLifecycleState} from "../../../js/actions";
|
|
||||||
|
|
||||||
const { TextArea } = Input;
|
|
||||||
const { Title } = Typography;
|
|
||||||
|
|
||||||
// connecting state.releaseView with the component
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
return {
|
|
||||||
nextState: state.lifecycleModal.nextState,
|
|
||||||
visible: state.lifecycleModal.visible
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
|
||||||
closeLifecycleModal : () => dispatch(closeLifecycleModal()),
|
|
||||||
updateLifecycleState : (uuid, nextState, reason) => dispatch(updateLifecycleState(uuid, nextState, reason))
|
|
||||||
});
|
|
||||||
|
|
||||||
const Text = Typography;
|
|
||||||
|
|
||||||
class ConnectedLifecycleModal extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
loading: false,
|
|
||||||
visible: false
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if (nextProps !== this.props) {
|
|
||||||
this.setState({
|
|
||||||
visible: nextProps.visible,
|
|
||||||
loading: false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
showModal = () => {
|
|
||||||
this.setState({
|
|
||||||
visible: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleOk = (e) => {
|
|
||||||
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();
|
|
||||||
this.props.updateLifecycleState(this.props.uuid, this.props.nextState, this.reason.state.value)
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.props.nextState != null) {
|
|
||||||
const nextState = this.props.nextState;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Modal
|
|
||||||
title="Change State"
|
|
||||||
visible={this.state.visible}
|
|
||||||
onCancel={this.handleCancel}
|
|
||||||
footer={null}
|
|
||||||
>
|
|
||||||
<Title level={4}>{this.props.currentStatus} <Icon type="arrow-right" /> {nextState}</Title>
|
|
||||||
<form onSubmit={this.handleSubmit}>
|
|
||||||
<Form.Item>
|
|
||||||
<label htmlFor="username">Reason</label>
|
|
||||||
|
|
||||||
<Input placeholder="Enter the reason" 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>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const LifecycleModal = connect(mapStateToProps, mapDispatchToProps)(ConnectedLifecycleModal);
|
|
||||||
|
|
||||||
export default LifecycleModal;
|
|
||||||
Loading…
Reference in new issue