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