online/src/app/common/deploy/tencent/deployCard/DeployCardRender.js

import React, {Component} from 'react';
import {FormattedMessage} from 'react-intl';
import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
import {idGen} from "../../../../../func";
import {graphqlUrl, manageUsers} from "../../../../../config";
import {
    ADD_DEPLOY,
    UPDATE_DEPLOY,
    UPDATE_PROJECT_DEPLOY_AND_CLOUD,
    UPDATE_PROJECT_ONLY_STATUS
} from "../../../../../gql";
import {request} from 'graphql-request'
import {removePrefix, shiftPrefix} from "../../../../../func";

const Panel = Collapse.Panel;

// 如需改变显示，请在此处 value 处更改
// 如需添加中文，请在此处 value 处添加
// eg: 'xxxx': <F..  id='xxx'/>
const valueToKey = {
    'functionName': 'functionName',
    'cosBucketName': 'cosBucketName',
    'cosObjectName': 'cosObjectName',
    'cosBucketRegion': 'cosBucketRegion',
    'serviceName': 'serviceName',
    'subnetId': 'subnetId',
    'vpcId': 'vpcId',
    'region': 'region',
    'description': 'description',
};

const toolTipTitle = {
    'functionName': 'its funcname',
    'cosBucketName': 'its cosBucketName',
    'cosObjectName': 'its cosObjectName',
    'cosBucketRegion': 'its cosBucketRegion',
    'serviceName': 'its serviceName',
    'subnetId': 'its subnetId',
    'vpcId': 'its vpcId',
    'region': 'its region',
    'description': 'its description',
};

const youMustFill = {
    'functionName': true,
    'cosBucketName': true,
    'cosObjectName': true,
    'cosBucketRegion': true,
    'serviceName': true,
    'subnetId': false,
    'vpcId': false,
    'region': true,
    'description': false,
};

class DeployCardRender extends Component {
    constructor(props) {
        super(props);
        if(props.deploy !== '' && props.deploy !== null) {
            let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId, region, description} = props.deploy;
            this.state = {
                configs: ['description', 'vpcId', 'subnetId'],
                description,
                showOK: false,
                functionName,
                region,
                cosBucketName,
                cosObjectName,
                cosBucketRegion,
                serviceName,
                vpcId,
                subnetId
            }
        } else {
            this.state = {
                configs: ['description', 'vpcId', 'subnetId'],
                description: '',
                showOK: false,
                functionName: props.defalutName,
                region: props.region === '' ? 'ap-beijing' : props.region,
                cosBucketName: 'graphqlfc',
                cosObjectName: props.defalutName,
                cosBucketRegion: props.region === '' ? 'ap-beijing' : props.region,
                serviceName: '',
                vpcId: '',
                subnetId: '',
            };
        }
    }

    componentWillReceiveProps(next) {
        if (next.deploy !== '' && next.deploy !== null) {
            let {functionName, cosBucketName, cosObjectName, cosBucketRegion, serviceName, vpcId, subnetId, region, description} = next.deploy;
            this.setState({
                description,
                functionName,
                region: next.region === '' ? region : next.region,
                cosBucketName,
                cosObjectName,
                cosBucketRegion: next.region === '' ? cosBucketRegion : next.region,
                serviceName,
                vpcId,
                subnetId
            })
        } else {
            this.setState({
                functionName: next.defalutName,
                region: next.region === '' ? 'ap-beijing' : next.region,
                cosBucketName: 'graphqlfc',
                cosObjectName: next.defalutName,
                cosBucketRegion: next.region === '' ? 'ap-beijing' : next.region,
                serviceName: '',
                vpcId: '',
                subnetId: ''
            });
        }
    };

    switchConfig = (label) => {
        return (e) => {
            this.setState({
                [label]: e.target.value
            })
        };
    };

    ok = (id, userID, projectID, cloudID, deploy) => {
        let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
        region = shiftPrefix('ap-', region);
        cosBucketRegion = shiftPrefix('ap-', cosBucketRegion);
        let varObj = {
            id,
            cloud_id: cloudID,
            user_id: userID,
            description,
            cosBucketName,
            subnetId,
            cosObjectName,
            region,
            vpcId,
            cosBucketRegion,
            functionName,
            memorySize: 512,
            timeout: 300,
            handler: 'tencent_graphql.Bridge::handler',
            serviceName: "",
            fc_id: '',
            createdAt: new Date().getTime(),
            updatedAt: ''
        };
        if (deploy === '') {
            request(graphqlUrl, ADD_DEPLOY, varObj).then(
                data => {
                    if (data.create_deploy !== null) {
                        this.setState({
                            showOK: true
                        });
                        // 写回 project
                        request(graphqlUrl, UPDATE_PROJECT_DEPLOY_AND_CLOUD, {
                            id: projectID,
                            updatedAt: new Date().getTime(),
                            deploy_id: id,
                            cloud_id: cloudID,
                            projectStatus: 'functioned'
                        }).then(data => {
                            if(data.update_project !== null)
                                this.props.stepByStep(1);
                        })
                    }
                    setTimeout(() => {
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        } else {
            let {description, cosBucketName, subnetId, cosObjectName, region, vpcId, cosBucketRegion, functionName} = this.state;
            region = shiftPrefix('ap-', region);
            cosBucketRegion = shiftPrefix('ap-', cosBucketRegion);
            let varObj = {
                id: deploy.id,
                description,
                subnetId,
                cosBucketName,
                cosObjectName,
                region,
                vpcId,
                cosBucketRegion,
                functionName,
                updatedAt: new Date().getTime()
            };
            request(graphqlUrl, UPDATE_DEPLOY, varObj).then(
                data => {
                    if (data.update_deploy !== null) {
                        this.setState({
                            showOK: true
                        });
                        request(graphqlUrl, UPDATE_PROJECT_ONLY_STATUS, {
                            id: projectID,
                            updatedAt: new Date().getTime(),
                            projectStatus: 'updated'
                        }).then(data => {
                            if(data.update_project !== null)
                                this.props.stepByStep(1);
                        })
                    }
                    setTimeout(() => {
                        this.setState({
                            showOK: false
                        })
                    }, 1500)
                }
            )
        }
    };

    render() {
        const customPanelStyle = {
            background: '#f7f7f7',
            borderRadius: 4,
            marginBottom: 24,
            border: 0,
            overflow: 'hidden',
        };

        const ioobotCloudID = ['tencent_CloudID', 'aliyun_CloudID'];

        const disable = {
            'subnetId': ioobotCloudID.includes(this.props.cloudID) ? true : '',
            'vpcId': ioobotCloudID.includes(this.props.cloudID) ? true : '',
        };

        return (
            <div>
                <div style={{marginBottom: 10}}>
                                    <span className='vice-title'>
                                        {
                                            youMustFill['functionName']?
                                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                                :
                                                ''
                                        }
                                        <FormattedMessage id={valueToKey['functionName']}/>
                                        &nbsp;
                                        <Tooltip placement="top" title={toolTipTitle['functionName']}>
                                            <Icon type="question-circle"/>
                                        </Tooltip>
                                    </span>
                    <Input value={this.state.functionName} style={{width: 400}}
                           onChange={this.switchConfig('functionName')}/>
                </div>
                <div style={{marginBottom: 10}}>
                                    <span className='vice-title'>
                        {
                            youMustFill['region']?
                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                :
                                ''
                        }
                                        <FormattedMessage id={valueToKey['region']}/>
                                        &nbsp;
                                        <Tooltip placement="top" title={toolTipTitle['region']}>
                            <Icon type="question-circle"/>
                        </Tooltip>
                    </span>
                    <Radio.Group onChange={(e) => {
                        this.props.switchRegion(e);
                    }} defaultValue={this.state.region} value={removePrefix('ap-', this.state.region)}
                                 buttonStyle="solid">
                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
                    </Radio.Group>
                </div>
                <div style={{marginBottom: 10}}>
                                    <span className='vice-title'>
                                {
                                    youMustFill['cosBucketRegion']?
                                        <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                        :
                                        ''
                                }
                                        <FormattedMessage id={valueToKey['cosBucketRegion']}/>
                                        &nbsp;
                                        <Tooltip placement="top" title={toolTipTitle['cosBucketRegion']}>
                                    <Icon type="question-circle"/>
                                </Tooltip>
                            </span>
                    <Radio.Group onChange={(e) => {
                        // 如果不想一变所有都变，就将 onchange 改成
                        // onChange={this.switchConfig('cosBucketRegion')}
                        this.props.switchRegion(e);
                    }} defaultValue={this.state.region}
                                 value={removePrefix('ap-', this.state.cosBucketRegion)} buttonStyle="solid">
                        <Radio.Button value="guangzhou"><FormattedMessage id="Guangzhou"/></Radio.Button>
                        <Radio.Button value="shanghai"><FormattedMessage id="Shanghai"/></Radio.Button>
                        <Radio.Button value="beijing"><FormattedMessage id="Beijing"/></Radio.Button>
                        <Radio.Button value="chengdu"><FormattedMessage id="Chengdu"/></Radio.Button>
                    </Radio.Group>
                </div>
                <div key={'cosBucketName'} style={{marginBottom: 10}}>
                                    <span className='vice-title'>
                                        {
                                            youMustFill['cosBucketName']?
                                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                                :
                                                ''
                                        }
                                        <FormattedMessage id={valueToKey['cosBucketName']}/>
                                        &nbsp;
                                        <Tooltip placement="top" title={toolTipTitle['cosBucketName']}>
                                            <Icon type="question-circle"/>
                                        </Tooltip>
                                    </span>
                    <Input value={this.state.cosBucketName} style={{width: 200}}
                           disabled={disable['cosBucketName'] === true}
                           onChange={this.switchConfig('cosBucketName')}/>
                </div>
                <div key={'cosObjectName'} style={{marginBottom: 10}}>
                                    <span className='vice-title'>
                                        {
                                            youMustFill['cosObjectName']?
                                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                                :
                                                ''
                                        }
                                        <FormattedMessage id={valueToKey['cosObjectName']}/>
                                        &nbsp;
                                        <Tooltip placement="top" title={toolTipTitle['cosObjectName']}>
                                            <Icon type="question-circle"/>
                                        </Tooltip>
                                    </span>
                    <Input value={this.state.cosBucketName} style={{width: 200}}
                           disabled={disable['cosObjectName'] === true} addonAfter=".jar"
                           onChange={this.switchConfig('cosObjectName')}/>
                </div>
                <Collapse bordered={false}>
                    <Panel header={<FormattedMessage id="Want more options?"/>} style={customPanelStyle}>

                        {/*腾讯云为空字符串，不显示，这里未作区分*/}
                        {/*<div style={{marginBottom: 10}}>*/}
                        {/*<span className='vice-title'>{valueToKey['serviceName']}*/}
                        {/*<span> </span>*/}
                        {/*<Tooltip placement="top" title={toolTipTitle['serviceName']}>*/}
                        {/*<Icon type="question-circle"/>*/}
                        {/*</Tooltip>*/}
                        {/*</span>*/}
                        {/*<Input value={this.state.serviceName} style={{width: 200}} disabled*/}
                        {/*onChange={this.switchConfig('serviceName')}/>*/}
                        {/*</div>*/}
                        {
                            this.state.configs.map(config => (
                                <div key={config} style={{marginBottom: 10}}>
                                    <span className='vice-title'>
                                        {
                                            youMustFill[config]?
                                                <span style={{color: 'red', display: 'inline', marginRight: 10}}>*</span>
                                                :
                                                ''
                                        }
                                        <FormattedMessage id={valueToKey[config]}/>
                                        &nbsp;
                                        <Tooltip placement="top" title={toolTipTitle[config]}>
                                            <Icon type="question-circle"/>
                                        </Tooltip>
                                    </span>
                                    <Input value={this.state[config]} style={{width: 200}}
                                           disabled={disable[config] === true}
                                           onChange={this.switchConfig(config)}/>
                                </div>
                            ))
                        }
                    </Panel>
                </Collapse>
                <div>
                    {
                        manageUsers.includes(this.props.userID) ?
                            <div>
                                <Button onClick={() => {
                                    const id = idGen('deploy');
                                    this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.deploy);
                                }} type='primary'><FormattedMessage id="save"/></Button>
                                {
                                    this.state.showOK === true ?
                                        <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                        :
                                        ''
                                }
                            </div>
                            :
                            this.props.trialcase ?
                                ''
                                :
                                <div>
                                    <Button onClick={() => {
                                        const id = idGen('deploy');
                                        this.ok(id, this.props.userID, this.props.projectID, this.props.cloudID, this.props.deploy);
                                    }} type='primary'><FormattedMessage id="save"/></Button>
                                    {
                                        this.state.showOK === true ?
                                            <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>
                                            :
                                            ''
                                    }
                                </div>
                    }

                </div>
            </div>
        )
    }
}

export default DeployCardRender;