Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Connected the install chaincode to the backend #614

Merged
merged 3 commits into from
May 1, 2024
Merged

Connected the install chaincode to the backend #614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a0b64f1
Fixed the install modal
xiaor2 Apr 26, 2024
d313b5c
Connected the install chaincode to the backend
xiaor2 Apr 27, 2024
bac2e02
Reconstructed the chaincode files
xiaor2 Apr 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 56 additions & 150 deletions src/dashboard/src/pages/ChainCode/ChainCode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,162 +2,22 @@
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 (
<Modal
destroyOnClose
title={intl.formatMessage({
id: 'app.chainCode.form.create.header.title',
defaultMessage: 'Upload chaincode',
})}
confirmLoading={uploading}
open={modalVisible}
onOk={onSubmit}
onCancel={() => handleModalVisible(false)}
>
<Form onFinish={onFinish} form={form} preserve={false}>
<FormItem
{...formItemLayout}
label={intl.formatMessage({
id: 'app.chainCode.form.create.file',
defaultMessage: 'Package',
})}
name="file"
getValueFromEvent={normFile}
rules={[
{
required: true,
message: intl.formatMessage({
id: 'app.chainCode.form.create.fileSelect',
defaultMessage: 'Please select the chaincode package',
}),
},
]}
extra="Only tar.gz file is supported"
>
<Upload {...uploadProps}>
<Button disabled={!!newFile}>
<UploadOutlined />
{intl.formatMessage({
id: 'app.chainCode.form.create.fileSelect',
defaultMessage: 'Please select the chaincode package',
})}
</Button>
</Upload>
</FormItem>
<FormItem
{...formItemLayout}
label={intl.formatMessage({
id: 'app.chainCode.form.create.description',
defaultMessage: 'Description',
})}
name="description"
initialValue=""
rules={[
{
required: false,
},
]}
>
<Input
placeholder={intl.formatMessage({
id: 'app.chainCode.form.create.description',
defaultMessage: 'Chaincode Description',
})}
/>
</FormItem>
</Form>
</Modal>
);
};

@connect(({ chainCode, loading }) => ({
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'],
}))
Expand All @@ -167,8 +27,10 @@ class ChainCode extends PureComponent {
formValues: {},
newFile: '',
modalVisible: false,
installModalVisible: false,
approveModalVisible: false,
commitModalVisible: false,
chainCodeName: '',
};

componentDidMount() {
Expand Down Expand Up @@ -220,6 +82,18 @@ class ChainCode extends PureComponent {
});
};

handleInstallModalVisible = (visible, record) => {
if (visible) {
this.fetchNodes();
this.setState({
chainCodeName: record.package_id,
});
}
this.setState({
installModalVisible: !!visible,
});
};

handleApproveModalVisible = visible => {
this.setState({
approveModalVisible: !!visible,
Expand All @@ -232,6 +106,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();
Expand Down Expand Up @@ -262,19 +153,22 @@ 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;

const formProps = {
const uploadFormProps = {
modalVisible,
handleUpload: this.handleUpload,
handleModalVisible: this.handleModalVisible,
Expand All @@ -285,6 +179,17 @@ class ChainCode extends PureComponent {
intl,
};

const installFormProps = {
installModalVisible,
handleInstallModalVisible: this.handleInstallModalVisible,
fetchChainCodes: this.fetchChainCodes,
handleInstall: this.handleInstall,
installing,
chainCodeName,
nodes,
intl,
};

const approveFormProps = {
approveModalVisible,
handleApproveModalVisible: this.handleApproveModalVisible,
Expand Down Expand Up @@ -370,7 +275,7 @@ class ChainCode extends PureComponent {
// eslint-disable-next-line no-unused-vars
render: (text, record) => (
<Fragment>
<a>
<a onClick={() => this.handleInstallModalVisible(true, record)}>
{intl.formatMessage({
id: 'app.chainCode.table.operate.install',
defaultMessage: 'Install',
Expand Down Expand Up @@ -437,7 +342,8 @@ class ChainCode extends PureComponent {
/>
</div>
</Card>
<UploadChainCode {...formProps} />
<UploadForm {...uploadFormProps} />
<InstallForm {...installFormProps} />
<ApproveForm {...approveFormProps} />
<CommitForm {...commitFormProps} />
</PageHeaderWrapper>
Expand Down
23 changes: 22 additions & 1 deletion src/dashboard/src/pages/ChainCode/forms/InstallForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -17,6 +17,7 @@ const InstallForm = props => {
installing,
fetchChainCodes,
handleInstall,
chainCodeName,
} = props;

useEffect(() => {
Expand Down Expand Up @@ -101,6 +102,26 @@ const InstallForm = props => {
onCancel={() => handleInstallModalVisible(false)}
>
<Form onFinish={onFinish} form={form} preserve={false}>
<FormItem
{...formItemLayout}
label={intl.formatMessage({
id: 'app.chainCode.form.install.chainCodeName',
defaultMessage: 'Chaincode name:',
})}
name="id"
initialValue={chainCodeName}
rules={[
{
required: true,
message: intl.formatMessage({
id: 'app.chainCode.form.install.chainCodeName',
defaultMessage: 'Chaincode name:',
}),
},
]}
>
<Input disabled />
</FormItem>
<FormItem
{...formItemLayout}
label={intl.formatMessage({
Expand Down
Loading
Loading