From a0b64f1992a68df9b6fe9f59bf1b72a9a72e0913 Mon Sep 17 00:00:00 2001 From: xiaor2 Date: Fri, 26 Apr 2024 14:10:55 -0500 Subject: [PATCH 1/3] Fixed the install modal Signed-off-by: xiaor2 --- .../src/pages/ChainCode/ChainCode.js | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js index 05ee5c7e0..c06751953 100644 --- a/src/dashboard/src/pages/ChainCode/ChainCode.js +++ b/src/dashboard/src/pages/ChainCode/ChainCode.js @@ -8,6 +8,7 @@ import { PlusOutlined, UploadOutlined, FunctionOutlined, DownOutlined } from '@a import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import StandardTable from '@/components/StandardTable'; import { Form } from 'antd/lib/index'; +import InstallForm from '@/pages/ChainCode/forms/InstallForm'; import ApproveForm from '@/pages/ChainCode/forms/ApproveForm'; import CommitForm from './forms/CommitForm'; import styles from './styles.less'; @@ -158,6 +159,7 @@ const UploadChainCode = props => { chainCode, loadingChainCodes: loading.effects['chainCode/listChainCode'], uploading: loading.effects['chainCode/uploadChainCode'], + installing: loading.effects['chainCode/installChainCode'], approving: loading.effects['chainCode/approveChainCode'], committing: loading.effects['chainCode/commitChainCode'], })) @@ -167,8 +169,10 @@ class ChainCode extends PureComponent { formValues: {}, newFile: '', modalVisible: false, + installModalVisible: false, approveModalVisible: false, commitModalVisible: false, + chainCodeName: '', }; componentDidMount() { @@ -220,6 +224,18 @@ class ChainCode extends PureComponent { }); }; + handleInstallModalVisible = (visible, record) => { + if (visible) { + this.fetchNodes(); + this.setState({ + chainCodeName: record.packageID, + }); + } + this.setState({ + installModalVisible: !!visible, + }); + }; + handleApproveModalVisible = visible => { this.setState({ approveModalVisible: !!visible, @@ -262,14 +278,17 @@ class ChainCode extends PureComponent { selectedRows, modalVisible, newFile, + installModalVisible, approveModalVisible, commitModalVisible, + chainCodeName, } = this.state; const { - chainCode: { chainCodes, paginations }, + chainCode: { chainCodes, paginations, nodes }, loadingChainCodes, intl, uploading, + installing, approving, committing, } = this.props; @@ -285,6 +304,16 @@ class ChainCode extends PureComponent { intl, }; + const installFormProps = { + installModalVisible, + handleInstallModalVisible: this.handleInstallModalVisible, + fetchChainCodes: this.fetchChainCodes, + installing, + chainCodeName, + nodes, + intl, + }; + const approveFormProps = { approveModalVisible, handleApproveModalVisible: this.handleApproveModalVisible, @@ -370,7 +399,7 @@ class ChainCode extends PureComponent { // eslint-disable-next-line no-unused-vars render: (text, record) => ( - + this.handleInstallModalVisible(true, record)}> {intl.formatMessage({ id: 'app.chainCode.table.operate.install', defaultMessage: 'Install', @@ -438,6 +467,7 @@ class ChainCode extends PureComponent { + From d313b5c8fcca9c2f5f04ee7d3dab9f221d4eed03 Mon Sep 17 00:00:00 2001 From: xiaor2 Date: Fri, 26 Apr 2024 20:37:46 -0500 Subject: [PATCH 2/3] Connected the install chaincode to the backend Signed-off-by: xiaor2 --- .../src/pages/ChainCode/ChainCode.js | 20 +++++++++++++++- .../src/pages/ChainCode/forms/InstallForm.js | 23 ++++++++++++++++++- src/dashboard/src/services/chaincode.js | 7 ++++++ 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js index c06751953..f4ce9a17e 100644 --- a/src/dashboard/src/pages/ChainCode/ChainCode.js +++ b/src/dashboard/src/pages/ChainCode/ChainCode.js @@ -228,7 +228,7 @@ class ChainCode extends PureComponent { if (visible) { this.fetchNodes(); this.setState({ - chainCodeName: record.packageID, + chainCodeName: record.package_id, }); } this.setState({ @@ -248,6 +248,23 @@ class ChainCode extends PureComponent { }); }; + handleInstall = (values, callback) => { + const { dispatch } = this.props; + const formData = new FormData(); + + Object.keys(values) + .filter(key => !(key === 'description' && !values[key])) // filter out empty description + .forEach(key => { + formData.append(key, values[key]); + }); + + dispatch({ + type: 'chainCode/installChainCode', + payload: formData, + callback, + }); + }; + handleUpload = (values, callback) => { const { dispatch } = this.props; const formData = new FormData(); @@ -308,6 +325,7 @@ class ChainCode extends PureComponent { installModalVisible, handleInstallModalVisible: this.handleInstallModalVisible, fetchChainCodes: this.fetchChainCodes, + handleInstall: this.handleInstall, installing, chainCodeName, nodes, diff --git a/src/dashboard/src/pages/ChainCode/forms/InstallForm.js b/src/dashboard/src/pages/ChainCode/forms/InstallForm.js index 53674b9fe..abb6e6431 100644 --- a/src/dashboard/src/pages/ChainCode/forms/InstallForm.js +++ b/src/dashboard/src/pages/ChainCode/forms/InstallForm.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { injectIntl, useIntl } from 'umi'; -import { Modal, message, Select, Form, Tag } from 'antd'; +import { Modal, message, Select, Form, Tag, Input } from 'antd'; import { listNode } from '@/services/node'; import styles from '../styles.less'; @@ -17,6 +17,7 @@ const InstallForm = props => { installing, fetchChainCodes, handleInstall, + chainCodeName, } = props; useEffect(() => { @@ -101,6 +102,26 @@ const InstallForm = props => { onCancel={() => handleInstallModalVisible(false)} >
+ + + Date: Fri, 26 Apr 2024 23:55:09 -0500 Subject: [PATCH 3/3] Reconstructed the chaincode files Signed-off-by: xiaor2 --- .../src/pages/ChainCode/ChainCode.js | 154 +----------------- .../src/pages/ChainCode/forms/UploadForm.js | 149 +++++++++++++++++ 2 files changed, 155 insertions(+), 148 deletions(-) create mode 100644 src/dashboard/src/pages/ChainCode/forms/UploadForm.js diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js index f4ce9a17e..d7471016f 100644 --- a/src/dashboard/src/pages/ChainCode/ChainCode.js +++ b/src/dashboard/src/pages/ChainCode/ChainCode.js @@ -2,159 +2,17 @@ SPDX-License-Identifier: Apache-2.0 */ import React, { PureComponent, Fragment } from 'react'; -import { connect, injectIntl, useIntl } from 'umi'; -import { Card, Button, Modal, Input, Upload, Divider, message, Dropdown, Menu } from 'antd'; -import { PlusOutlined, UploadOutlined, FunctionOutlined, DownOutlined } from '@ant-design/icons'; +import { connect, injectIntl } from 'umi'; +import { Card, Button, Divider, Dropdown, Menu } from 'antd'; +import { PlusOutlined, FunctionOutlined, DownOutlined } from '@ant-design/icons'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import StandardTable from '@/components/StandardTable'; -import { Form } from 'antd/lib/index'; +import UploadForm from '@/pages/ChainCode/forms/UploadForm'; import InstallForm from '@/pages/ChainCode/forms/InstallForm'; import ApproveForm from '@/pages/ChainCode/forms/ApproveForm'; import CommitForm from './forms/CommitForm'; import styles from './styles.less'; -const FormItem = Form.Item; - -const UploadChainCode = props => { - const [form] = Form.useForm(); - const intl = useIntl(); - const { - modalVisible, - handleUpload, - handleModalVisible, - uploading, - fetchChainCodes, - newFile, - setFile, - } = props; - - const uploadCallback = response => { - if (response.status !== 'successful') { - message.error( - intl.formatMessage({ - id: 'app.chainCode.form.create.fail', - defaultMessage: 'Upload chaincode failed', - }) - ); - } else { - message.success( - intl.formatMessage({ - id: 'app.chainCode.form.create.success', - defaultMessage: 'Upload chaincode succeed', - }) - ); - form.resetFields(); - handleModalVisible(); - fetchChainCodes(); - setFile(null); - } - }; - - const onSubmit = () => { - form.submit(); - }; - - const onFinish = values => { - handleUpload(values, uploadCallback); - }; - - const formItemLayout = { - labelCol: { - xs: { span: 24 }, - sm: { span: 7 }, - }, - wrapperCol: { - xs: { span: 24 }, - sm: { span: 14 }, - md: { span: 12 }, - }, - }; - - const uploadProps = { - onRemove: () => { - setFile(null); - }, - beforeUpload: file => { - setFile(file); - return false; - }, - }; - - const normFile = e => { - if (Array.isArray(e)) { - return e; - } - return newFile; - }; - - return ( - handleModalVisible(false)} - > - - - - - - - - - - - - ); -}; - @connect(({ chainCode, loading }) => ({ chainCode, loadingChainCodes: loading.effects['chainCode/listChainCode'], @@ -310,7 +168,7 @@ class ChainCode extends PureComponent { committing, } = this.props; - const formProps = { + const uploadFormProps = { modalVisible, handleUpload: this.handleUpload, handleModalVisible: this.handleModalVisible, @@ -484,7 +342,7 @@ class ChainCode extends PureComponent { /> - + diff --git a/src/dashboard/src/pages/ChainCode/forms/UploadForm.js b/src/dashboard/src/pages/ChainCode/forms/UploadForm.js new file mode 100644 index 000000000..ef3abbd8f --- /dev/null +++ b/src/dashboard/src/pages/ChainCode/forms/UploadForm.js @@ -0,0 +1,149 @@ +import React from 'react'; +import { injectIntl, useIntl } from 'umi'; +import { Button, Modal, Input, Upload, message } from 'antd'; +import { UploadOutlined } from '@ant-design/icons'; +import { Form } from 'antd/lib/index'; + +const FormItem = Form.Item; + +const UploadForm = props => { + const [form] = Form.useForm(); + const intl = useIntl(); + const { + modalVisible, + handleUpload, + handleModalVisible, + uploading, + fetchChainCodes, + newFile, + setFile, + } = props; + + const uploadCallback = response => { + if (response.status !== 'successful') { + message.error( + intl.formatMessage({ + id: 'app.chainCode.form.create.fail', + defaultMessage: 'Upload chaincode failed', + }) + ); + } else { + message.success( + intl.formatMessage({ + id: 'app.chainCode.form.create.success', + defaultMessage: 'Upload chaincode succeed', + }) + ); + form.resetFields(); + handleModalVisible(); + fetchChainCodes(); + setFile(null); + } + }; + + const onSubmit = () => { + form.submit(); + }; + + const onFinish = values => { + handleUpload(values, uploadCallback); + }; + + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 7 }, + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 14 }, + md: { span: 12 }, + }, + }; + + const uploadProps = { + onRemove: () => { + setFile(null); + }, + beforeUpload: file => { + setFile(file); + return false; + }, + }; + + const normFile = e => { + if (Array.isArray(e)) { + return e; + } + return newFile; + }; + + return ( + handleModalVisible(false)} + > +
+ + + + + + + + +
+ + ); +}; + +export default injectIntl(UploadForm);