|
|
@@ -3,7 +3,7 @@ import {Link} from 'react-router-dom';
|
|
|
import {deployAll, graphqlUrl, storeFile, copyCos} from "../../../config";
|
|
|
import {ADD_APIGROUP, ADD_APIGWPATH, ADD_DEPLOY, ADD_PROJECT, SHOW_CLOUD} from "../../../gql";
|
|
|
import {CloudConfig} from "../../../login/CloudConfig";
|
|
|
-import {Layout,Button, message, Modal, Icon, Steps, Row, Col} from 'antd';
|
|
|
+import {Layout, Button, message, Modal, Icon, Steps, Row, Col, Radio, Input} from 'antd';
|
|
|
import {FormattedMessage} from 'react-intl';
|
|
|
import {request} from 'graphql-request'
|
|
|
import {idGen} from "../../../func";
|
|
|
@@ -12,6 +12,7 @@ import './index.css';
|
|
|
|
|
|
const {Content} = Layout;
|
|
|
const Step = Steps.Step;
|
|
|
+const RadioGroup = Radio.Group;
|
|
|
axios.defaults.withCredentials = true;
|
|
|
|
|
|
class UserCustom extends Component {
|
|
|
@@ -20,40 +21,235 @@ class UserCustom extends Component {
|
|
|
this.state = {
|
|
|
userID: props.userID,
|
|
|
bucketName: props.bucketName,
|
|
|
- customName: '',
|
|
|
cloudName: 'tencent',
|
|
|
- dbKind: 'fc-db', // mongodb fc-db
|
|
|
disableDeployButton: false,
|
|
|
- deployFailed: false
|
|
|
- };
|
|
|
-
|
|
|
- this.cloudState = {
|
|
|
+ deployFailed: false,
|
|
|
cloudID: '',
|
|
|
secretID: '',
|
|
|
secretKey: '',
|
|
|
appId: ''
|
|
|
- }
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log(this.state, 'userCustom state')
|
|
|
}
|
|
|
|
|
|
getCloudDetail = (cloudID, secretID, secretKey, appId) => {
|
|
|
- this.cloudState = {
|
|
|
+ this.setState({
|
|
|
cloudID,
|
|
|
secretID,
|
|
|
secretKey,
|
|
|
appId
|
|
|
+ })
|
|
|
+ };
|
|
|
+
|
|
|
+ componentWillMount() {
|
|
|
+ this._isMounted = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount() {
|
|
|
+ this._isMounted = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {disableDeployButton, userID, cloudID, bucketName, deployFailed, appId, secretID, secretKey} = this.state;
|
|
|
+ return (
|
|
|
+ <Content className="content">
|
|
|
+ <div>
|
|
|
+ <div className="column-menu" onClick={() => {
|
|
|
+ this.props.backToMe()
|
|
|
+ }}>
|
|
|
+ <Icon type="left" style={{color: '#3187FA'}}/>
|
|
|
+ <FormattedMessage id="back to case show"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Row>
|
|
|
+ <Col span={9} offset={2}>
|
|
|
+ <div className='step-kind'>
|
|
|
+ 发布体验
|
|
|
+ </div>
|
|
|
+ <Steps direction="vertical" current={2}>
|
|
|
+ <Step title=<Step00/> />
|
|
|
+ <Step title=<Step01/> />
|
|
|
+ </Steps>
|
|
|
+ </Col>
|
|
|
+ <Col span={9} offset={2}>
|
|
|
+ <div className='step-kind'>
|
|
|
+ 发布上线
|
|
|
+ </div>
|
|
|
+ <Steps direction="vertical" current={5}>
|
|
|
+ <Step title=<Step10/> />
|
|
|
+ <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
|
|
|
+ <Step title=<Step12/> />
|
|
|
+ <Step title=<Step13/> />
|
|
|
+ <Step title=
|
|
|
+ <Step14
|
|
|
+ getPrimaryConfigDetail={this.getPrimaryConfigDetail}
|
|
|
+ userID={userID}
|
|
|
+ bucketName={bucketName}
|
|
|
+ secretID={secretID}
|
|
|
+ secretKey={secretKey}
|
|
|
+ appId={appId}
|
|
|
+ cloudID={cloudID}
|
|
|
+ />
|
|
|
+ />
|
|
|
+ </Steps>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </Content>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default UserCustom;
|
|
|
+
|
|
|
+class CloudQueryAndConfig extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ cloudName: props.cloudName,
|
|
|
+ userID: props.userID,
|
|
|
+ cloudID: '',
|
|
|
+ secretID: '',
|
|
|
+ secretKey: '',
|
|
|
+ appId: '',
|
|
|
+ visible: false,
|
|
|
+ confirmLoading: false,
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ searchCloud = () => {
|
|
|
+ this._isMounted = true;
|
|
|
+ let {userID, cloudName} = this.state;
|
|
|
+ // 如果登录，查询该用户是否设置 cloud
|
|
|
+ request(graphqlUrl, SHOW_CLOUD, {user_id: userID}).then(data => {
|
|
|
+ let clouds = data.cloud_by_props.filter(cloud => cloud.cloudName === cloudName);
|
|
|
+ // 如果限制一个云服务商一个 cloud，那么就是clouds[0]
|
|
|
+ if (clouds.length === 1) {
|
|
|
+ let cloud = clouds[0];
|
|
|
+ let {id, secretId, secretKey, appId} = cloud;
|
|
|
+ if (this._isMounted) {
|
|
|
+ this.setState({
|
|
|
+ cloudID: id,
|
|
|
+ secretID: secretId,
|
|
|
+ secretKey,
|
|
|
+ appId,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.props.getCloudDetail(id, secretId, secretKey, appId);
|
|
|
+ } else if (clouds.length > 1) {
|
|
|
+ console.log('数据库有多个同一云服务商的 key');
|
|
|
+ } else {
|
|
|
+ if (this._isMounted) {
|
|
|
+ console.log('数据库没有云服务商的 key');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ };
|
|
|
+
|
|
|
+ showModal = () => {
|
|
|
+ if (this.state.userID) {
|
|
|
+ this.setState({
|
|
|
+ visible: true,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ message.warning('请先登录');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ handleCancel = () => {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ this.props.reCheck();
|
|
|
+ };
|
|
|
+
|
|
|
+ componentWillMount() {
|
|
|
+ this.searchCloud();
|
|
|
+ this._isMounted = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount() {
|
|
|
+ this._isMounted = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillReceiveProps(next) {
|
|
|
+ this.setState({
|
|
|
+ cloudName: next.cloudName,
|
|
|
+ userID: next.userID,
|
|
|
+ }, this.searchCloud);
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {visible, confirmLoading, cloudName} = this.state;
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <Button type='primary' onClick={this.showModal}>填写秘钥</Button>
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ title="云服务商秘钥设置"
|
|
|
+ visible={visible}
|
|
|
+ confirmLoading={confirmLoading}
|
|
|
+ footer={null}
|
|
|
+ onCancel={this.handleCancel}
|
|
|
+ >
|
|
|
+ <CloudConfig cloudName={cloudName}/>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class NameAndDB extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ userID: props.userID,
|
|
|
+ visible: false,
|
|
|
+ confirmLoading: false,
|
|
|
+ customName: props.bucketName + '-' + props.userID,
|
|
|
+ dbKind: 'fc-db',
|
|
|
+ host: '',
|
|
|
+ db: '',
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ admin: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ showModal = () => {
|
|
|
+ if (this.state.userID) {
|
|
|
+ this.setState({
|
|
|
+ visible: true,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ message.warning('请先登录');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- deploy = () => {
|
|
|
+ handleCancel = () => {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ componentWillMount() {
|
|
|
+ this._isMounted = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount() {
|
|
|
+ this._isMounted = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ deploy = (userID, dbKind, bucketName, customName, cloudID) => {
|
|
|
this._isMounted = true;
|
|
|
let _this = this;
|
|
|
- let {userID, dbKind, bucketName, customName} = this.state;
|
|
|
- let {cloudID} = this.cloudState;
|
|
|
|
|
|
if (bucketName === '') {
|
|
|
console.log('state, 没有传值');
|
|
|
} else {
|
|
|
-
|
|
|
console.log('开始调用');
|
|
|
this.setState({
|
|
|
disableDeployButton: true
|
|
|
@@ -208,151 +404,162 @@ class UserCustom extends Component {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- componentWillMount() {
|
|
|
- this._isMounted = true;
|
|
|
- }
|
|
|
-
|
|
|
- componentWillUnmount() {
|
|
|
- this._isMounted = false;
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- let {cloudName, customName, disableDeployButton, userID, check, dbKind, bucketName, deployFailed} = this.state;
|
|
|
- let {appId, secretID, secretKey} = this.cloudState;
|
|
|
- return (
|
|
|
- <Content className="content">
|
|
|
- <div>
|
|
|
- <div className="column-menu" onClick={() => {
|
|
|
- this.props.backToMe()
|
|
|
- }}>
|
|
|
- <Icon type="left" style={{color: '#3187FA'}}/>
|
|
|
- <FormattedMessage id="back to case show"/>
|
|
|
- </div>
|
|
|
-
|
|
|
- <Row>
|
|
|
- <Col span={9} offset={2}>
|
|
|
- <div className='step-kind'>
|
|
|
- 发布体验
|
|
|
- </div>
|
|
|
- <Steps direction="vertical" current={2}>
|
|
|
- <Step title=<Step00/> />
|
|
|
- <Step title=<Step01/> />
|
|
|
- </Steps>
|
|
|
- </Col>
|
|
|
- <Col span={9} offset={2}>
|
|
|
- <div className='step-kind'>
|
|
|
- 发布上线
|
|
|
- </div>
|
|
|
- <Steps direction="vertical" current={5}>
|
|
|
- <Step title=<Step10/> />
|
|
|
- <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
|
|
|
- <Step title=<Step12/> />
|
|
|
- <Step title=<Step13/> />
|
|
|
- <Step title=<Step14/> />
|
|
|
- </Steps>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </div>
|
|
|
- </Content>
|
|
|
-
|
|
|
- )
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-export default UserCustom;
|
|
|
-
|
|
|
-class CloudQueryAndConfig extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props);
|
|
|
- this.state = {
|
|
|
- cloudName: props.cloudName,
|
|
|
- userID: props.userID,
|
|
|
- cloudID: '',
|
|
|
- secretID: '',
|
|
|
- secretKey: '',
|
|
|
- appId: '',
|
|
|
- visible: false,
|
|
|
- confirmLoading: false,
|
|
|
- }
|
|
|
- }
|
|
|
+ storeEdnAndDeploy = (secretID, secretKey, appId, bucketName, dbKind, userID, admin, username, password, db, host, customName, cloudID) => {
|
|
|
+ // store *.edn to cos
|
|
|
+ let deployConf = dbKind === 'mongodb' ?
|
|
|
+ ` {:secretId "${secretID}"\n` +
|
|
|
+ ` :secretKey "${secretKey}"\n` +
|
|
|
+ ` :appId "${appId}"\n` +
|
|
|
+ ' :region "ap-beijing" \n' +
|
|
|
+ ' }\n'
|
|
|
+ :
|
|
|
+ ` {:secretId "${secretID}"\n` +
|
|
|
+ ` :secretKey "${secretKey}"\n` +
|
|
|
+ ` :appId "${appId}"\n` +
|
|
|
+ ' :region "ap-beijing"\n' +
|
|
|
+ ' :bucket "fc-db"\n' +
|
|
|
+ ' :trustStore "/etc/ssl/certs/java/cacerts"\n' +
|
|
|
+ ` :fc-db-store "save/${bucketName}.dat"\n` +
|
|
|
+ ' :fc-db-dir "fc-db"\n' +
|
|
|
+ ' :local-tmp-dir "/tmp"\n' +
|
|
|
+ ' :local-db-file "fcdb.dat"\n' +
|
|
|
+ ' :update-tx? true \n' +
|
|
|
+ ' :force-down? true\n' +
|
|
|
+ ' }';
|
|
|
+
|
|
|
+ let a = axios.post(storeFile, {
|
|
|
+ 'file-name': `${bucketName}/${dbKind}/${userID}/deploy-conf.edn`,
|
|
|
+ bucket: 'case',
|
|
|
+ cont: deployConf
|
|
|
+ });
|
|
|
|
|
|
- searchCloud = () => {
|
|
|
- this._isMounted = true;
|
|
|
- let {userID, cloudName} = this.state;
|
|
|
- // 如果登录，查询该用户是否设置 cloud
|
|
|
- request(graphqlUrl, SHOW_CLOUD, {user_id: userID}).then(data => {
|
|
|
- let clouds = data.cloud_by_props.filter(cloud => cloud.cloudName === cloudName);
|
|
|
- // 如果限制一个云服务商一个 cloud，那么就是clouds[0]
|
|
|
- if (clouds.length === 1) {
|
|
|
- let cloud = clouds[0];
|
|
|
- let {id, secretId, secretKey, appId} = cloud;
|
|
|
- if (this._isMounted) {
|
|
|
- this.setState({
|
|
|
- cloudID: id,
|
|
|
- secretID: secretId,
|
|
|
- secretKey,
|
|
|
- appId,
|
|
|
- });
|
|
|
- }
|
|
|
- this.props.getCloudDetail(id, secretId, secretKey, appId);
|
|
|
- } else if (clouds.length > 1) {
|
|
|
- console.log('数据库有多个同一云服务商的 key');
|
|
|
- } else {
|
|
|
- if (this._isMounted) {
|
|
|
- console.log('数据库没有云服务商的 key');
|
|
|
- }
|
|
|
- }
|
|
|
+ let cont = '{:uri {\n' +
|
|
|
+ `:auth {:admin-db "${admin}"\n` +
|
|
|
+ ` :u "${username}"\n` +
|
|
|
+ ` :p "${password}"\n` +
|
|
|
+ ` :host "${host}"}}\n` +
|
|
|
+ ` :db-name "${db}"}`;
|
|
|
+
|
|
|
+ let b = dbKind === 'mongodb' ?
|
|
|
+ axios.post(storeFile, {
|
|
|
+ 'file-name': `${bucketName}/${dbKind}/${userID}/mongo-config.edn`,
|
|
|
+ bucket: 'case',
|
|
|
+ cont
|
|
|
+ })
|
|
|
+ :
|
|
|
+ Promise.resolve({status: 200});
|
|
|
+
|
|
|
+ Promise.all([a, b]).then(value => {
|
|
|
+ if (value.every(res => res.status === 200)) {
|
|
|
+ console.log('store file success , start deploying');
|
|
|
+ this.deploy(userID, dbKind, bucketName, customName, cloudID);
|
|
|
}
|
|
|
- )
|
|
|
- };
|
|
|
-
|
|
|
- showModal = () => {
|
|
|
- if(this.state.userID) {
|
|
|
- this.setState({
|
|
|
- visible: true,
|
|
|
- });
|
|
|
- } else {
|
|
|
- message.warning('请先登录');
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- handleCancel = () => {
|
|
|
- this.setState({
|
|
|
- visible: false,
|
|
|
});
|
|
|
- this.props.reCheck();
|
|
|
- };
|
|
|
-
|
|
|
- componentWillMount() {
|
|
|
- this.searchCloud();
|
|
|
- this._isMounted = true;
|
|
|
- }
|
|
|
-
|
|
|
- componentWillUnmount() {
|
|
|
- this._isMounted = false;
|
|
|
- }
|
|
|
-
|
|
|
- componentWillReceiveProps(next) {
|
|
|
- this.setState({
|
|
|
- cloudName: next.cloudName,
|
|
|
- userID: next.userID,
|
|
|
- }, this.searchCloud);
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- let {visible, confirmLoading, cloudName} = this.state;
|
|
|
+ let {
|
|
|
+ visible,
|
|
|
+ confirmLoading,
|
|
|
+ userID,
|
|
|
+ dbKind,
|
|
|
+ host,
|
|
|
+ db,
|
|
|
+ username,
|
|
|
+ password,
|
|
|
+ admin,
|
|
|
+ customName
|
|
|
+ } = this.state;
|
|
|
+ let {secretID, secretKey, appId, bucketName, cloudID} = this.props
|
|
|
return (
|
|
|
<div>
|
|
|
- <Button type='primary' onClick={this.showModal}>点击填写</Button>
|
|
|
+ <Button type='primary' onClick={this.showModal}>开始部署</Button>
|
|
|
|
|
|
<Modal
|
|
|
- title="云服务商秘钥设置"
|
|
|
+ title="名称和数据库配置"
|
|
|
visible={visible}
|
|
|
confirmLoading={confirmLoading}
|
|
|
footer={null}
|
|
|
onCancel={this.handleCancel}
|
|
|
>
|
|
|
- <CloudConfig cloudName={cloudName}/>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <div className={'schema-name'}><FormattedMessage id='Name'/></div>
|
|
|
+ <div>
|
|
|
+ <span className='item-title-cloud'><FormattedMessage id='name'/>:</span>
|
|
|
+ <Input style={{width: 250}} value={this.state.customName}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({customName: e.target.value})
|
|
|
+ }}/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style={{marginTop: 20}}>
|
|
|
+ <div className={'schema-name'}><FormattedMessage id='DB Choose'/></div>
|
|
|
+ <RadioGroup onChange={(e) => {
|
|
|
+ this.setState({dbKind: e.target.value})
|
|
|
+ }} value={this.state.dbKind}>
|
|
|
+ <Radio value='fc-db'>fc-db</Radio>
|
|
|
+ <Radio value='mongodb'>mongodb</Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {
|
|
|
+ this.state.dbKind === 'mongodb' ?
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <span>host</span>
|
|
|
+ <Input style={{width: 250}} value={this.state.host}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({host: e.target.value})
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span>db-name</span>
|
|
|
+ <Input style={{width: 250}} value={this.state.db}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({db: e.target.value})
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span>admin-db</span>
|
|
|
+ <Input style={{width: 250}} value={this.state.admin}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({admin: e.target.value})
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span>username</span>
|
|
|
+ <Input style={{width: 250}} value={this.state.username}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({username: e.target.value})
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span>password</span>
|
|
|
+ <Input type='password' style={{width: 250}} value={this.state.password}
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({password: e.target.value})
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ :
|
|
|
+ ''
|
|
|
+ }
|
|
|
+
|
|
|
+ <Button type='primary' onClick={() => {
|
|
|
+ this.storeEdnAndDeploy(secretID, secretKey, appId, bucketName, dbKind, userID, admin, username, password, db, host, customName, cloudID)
|
|
|
+ }}>开始部署</Button>
|
|
|
+ </div>
|
|
|
</Modal>
|
|
|
</div>
|
|
|
)
|
|
|
@@ -423,11 +630,24 @@ const Step13 = (props) => (
|
|
|
<div className='step-block'>
|
|
|
第四步：微信公众号/小程序 后台填写配置
|
|
|
<Button style={{marginLeft: 20}}>使用帮助</Button>
|
|
|
+ <div>
|
|
|
+ <Button type='primary'>填写配置</Button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
);
|
|
|
|
|
|
const Step14 = (props) => (
|
|
|
<div className='step-block'>
|
|
|
开始使用
|
|
|
+ <div>
|
|
|
+ <NameAndDB
|
|
|
+ userID={props.userID}
|
|
|
+ bucketName={props.bucketName}
|
|
|
+ secretID={props.secretID}
|
|
|
+ secretKey={props.secretKey}
|
|
|
+ appId={props.appId}
|
|
|
+ cloudID={props.cloudID}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
);
|
kulley