From d26e8b505b5904f83abff2d16ea8da7f132bf2ea Mon Sep 17 00:00:00 2001 From: xichen1 Date: Wed, 13 Dec 2023 23:52:31 -0800 Subject: [PATCH 1/2] Add Install CC UI and API Call Finish the Chaincode installation UI and API call. Signed-off-by: xichen1 --- src/dashboard/src/locales/en-US/Chaincode.js | 4 +- src/dashboard/src/locales/zh-CN/Chaincode.js | 4 +- src/dashboard/src/models/chaincode.js | 8 +- .../src/pages/ChainCode/ChainCode.js | 63 ++++++++- .../src/pages/ChainCode/forms/InstallForm.js | 133 ++++++++++++++++++ src/dashboard/src/services/chaincode.js | 7 + 6 files changed, 212 insertions(+), 7 deletions(-) create mode 100644 src/dashboard/src/pages/ChainCode/forms/InstallForm.js diff --git a/src/dashboard/src/locales/en-US/Chaincode.js b/src/dashboard/src/locales/en-US/Chaincode.js index e4909e891..a08c83b77 100755 --- a/src/dashboard/src/locales/en-US/Chaincode.js +++ b/src/dashboard/src/locales/en-US/Chaincode.js @@ -29,8 +29,8 @@ export default { 'app.chainCode.form.install.fail': 'Install chaincode failed', 'app.chainCode.form.install.success': 'Install chaincode succeed', 'app.chainCode.form.install.header.title': 'Install Chaincode', - 'app.chaincode.form.install.nodes': 'Please select nodes', - 'app.chaincode.form.install.checkNodes': 'Please select nodes', + 'app.chainCode.form.install.nodes': 'Please select nodes', + 'app.chainCode.form.install.checkNodes': 'Please select nodes', 'app.chainCode.form.approve.fail': 'Approve chaincode failed', 'app.chainCode.form.approve.success': 'Approve chaincode succeed', 'app.chainCode.form.approve.header.title': 'Approve Chaincode', diff --git a/src/dashboard/src/locales/zh-CN/Chaincode.js b/src/dashboard/src/locales/zh-CN/Chaincode.js index bdf554e0e..53e5bb905 100755 --- a/src/dashboard/src/locales/zh-CN/Chaincode.js +++ b/src/dashboard/src/locales/zh-CN/Chaincode.js @@ -29,8 +29,8 @@ export default { 'app.chainCode.form.install.fail': '安装链码失败', 'app.chainCode.form.install.success': '安装链码成功', 'app.chainCode.form.install.header.title': '安装链码', - 'app.chaincode.form.install.nodes': '请选择节点', - 'app.chaincode.form.install.checkNodes': '请选择节点', + 'app.chainCode.form.install.nodes': '请选择节点', + 'app.chainCode.form.install.checkNodes': '请选择节点', 'app.chainCode.form.approve.fail': '批准链码失败', 'app.chainCode.form.approve.success': '批准链码成功', 'app.chainCode.form.approve.header.title': '批准链码', diff --git a/src/dashboard/src/models/chaincode.js b/src/dashboard/src/models/chaincode.js index 35b3cef0d..15bb4fc2f 100644 --- a/src/dashboard/src/models/chaincode.js +++ b/src/dashboard/src/models/chaincode.js @@ -1,4 +1,4 @@ -import { listChainCode, uploadChainCode } from '@/services/chaincode'; +import { listChainCode, uploadChainCode, installChainCode } from '@/services/chaincode'; export default { namespace: 'chainCode', @@ -36,6 +36,12 @@ export default { callback(response); } }, + *installChainCode({ payload, callback }, { call }) { + const response = yield call(installChainCode, payload); + if (callback) { + callback(response); + } + }, }, reducers: { save(state, { payload }) { diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js index c03128441..c01bdf48a 100644 --- a/src/dashboard/src/pages/ChainCode/ChainCode.js +++ b/src/dashboard/src/pages/ChainCode/ChainCode.js @@ -10,6 +10,7 @@ import StandardTable from '@/components/StandardTable'; import { Form } from 'antd/lib/index'; import ApproveForm from '@/pages/ChainCode/forms/ApproveForm'; import styles from './styles.less'; +import InstallForm from './forms/InstallForm'; const FormItem = Form.Item; @@ -165,6 +166,7 @@ class ChainCode extends PureComponent { formValues: {}, newFile: '', modalVisible: false, + installModalVisible: false, approveModalVisible: false, }; @@ -217,12 +219,24 @@ class ChainCode extends PureComponent { }); }; + handleInstallModalVisible = visible => { + this.setState({ + installModalVisible: !!visible, + }); + }; + handleApproveModalVisible = visible => { this.setState({ approveModalVisible: !!visible, }); }; + setOperatedRow = row => { + this.setState({ + operatedRow: row, + }); + }; + handleUpload = (values, callback) => { const { dispatch } = this.props; const formData = new FormData(); @@ -240,6 +254,21 @@ class ChainCode extends PureComponent { }); }; + handleInstall = (values, callback) => { + const { dispatch } = this.props; + const { operatedRow } = this.state; + const { node } = values; + const formData = new FormData(); + formData.append('peer_uuid', node); + formData.append('chaincode_package', operatedRow.packageID); + + dispatch({ + type: 'chainCode/installChainCode', + payload: formData, + callback, + }); + }; + onUploadChainCode = () => { this.handleModalVisible(true); }; @@ -249,12 +278,20 @@ class ChainCode extends PureComponent { }; render() { - const { selectedRows, modalVisible, newFile, approveModalVisible } = this.state; + const { + selectedRows, + modalVisible, + newFile, + approveModalVisible, + installModalVisible, + operatedRow, + } = this.state; const { chainCode: { chainCodes, paginations }, loadingChainCodes, intl, uploading, + installing, approving, } = this.props; @@ -269,6 +306,15 @@ class ChainCode extends PureComponent { intl, }; + const installFormProps = { + installModalVisible, + handleInstallModalVisible: this.handleInstallModalVisible, + fetchChainCodes: this.fetchChainCodes, + installing, + operatedRow, + handleInstall: this.handleInstall, + }; + const approveFormProps = { approveModalVisible, handleApproveModalVisible: this.handleApproveModalVisible, @@ -345,7 +391,12 @@ class ChainCode extends PureComponent { // eslint-disable-next-line no-unused-vars render: (text, record) => ( - + { + this.handleInstallModalVisible(true); + this.setOperatedRow(record); + }} + > {intl.formatMessage({ id: 'app.chainCode.table.operate.install', defaultMessage: 'Install', @@ -380,6 +431,13 @@ class ChainCode extends PureComponent { language: 'golang', approve: false, }, + { + packageID: 'cc2v1:cc7bb5f50a53c207f68d37e9423c32f968083282e5ffac00d41ffc5768dc1873', + description: 'chaincode demo', + version: 'v1', + language: 'golang', + approve: false, + }, ]; const dummyPagination = { total: 0, @@ -421,6 +479,7 @@ class ChainCode extends PureComponent { /> + diff --git a/src/dashboard/src/pages/ChainCode/forms/InstallForm.js b/src/dashboard/src/pages/ChainCode/forms/InstallForm.js new file mode 100644 index 000000000..53674b9fe --- /dev/null +++ b/src/dashboard/src/pages/ChainCode/forms/InstallForm.js @@ -0,0 +1,133 @@ +import React, { useState, useEffect } from 'react'; +import { injectIntl, useIntl } from 'umi'; +import { Modal, message, Select, Form, Tag } from 'antd'; +import { listNode } from '@/services/node'; +import styles from '../styles.less'; + +const FormItem = Form.Item; + +const InstallForm = props => { + const [form] = Form.useForm(); + const intl = useIntl(); + const [nodes, setNodes] = useState(); + + const { + installModalVisible, + handleInstallModalVisible, + installing, + fetchChainCodes, + handleInstall, + } = props; + + useEffect(() => { + async function fecthData() { + const response = await listNode(); + setNodes(response.data.data.map(node => ({ label: node.name, value: node.id }))); + } + fecthData(); + }, []); + + const installCallback = response => { + if (response.status !== 'successful') { + message.error( + intl.formatMessage({ + id: 'app.chainCode.form.install.fail', + defaultMessage: 'Install chaincode failed', + }) + ); + } else { + message.success( + intl.formatMessage({ + id: 'app.chainCode.form.install.success', + defaultMessage: 'Install chaincode succeed', + }) + ); + form.resetFields(); + handleInstallModalVisible(false); + fetchChainCodes(); + } + }; + + const onSubmit = () => { + form.submit(); + }; + + const onFinish = values => { + handleInstall(values, installCallback); + }; + + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 11 }, + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 12 }, + md: { span: 10 }, + }, + }; + + // eslint-disable-next-line no-shadow + const tagRender = props => { + const { label, closable, onClose } = props; + const onPreventMouseDown = event => { + event.preventDefault(); + event.stopPropagation(); + }; + return ( + + {label} + + ); + }; + + return ( + handleInstallModalVisible(false)} + > +
+ +