diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js index d9c21b44a..bdf9d9482 100644 --- a/src/dashboard/src/pages/ChainCode/ChainCode.js +++ b/src/dashboard/src/pages/ChainCode/ChainCode.js @@ -3,15 +3,14 @@ */ import React, { PureComponent, Fragment } from 'react'; import { connect, injectIntl, useIntl } from 'umi'; -import { Card, Button, Modal, Input, Upload, Divider, message } from 'antd'; -import { PlusOutlined, UploadOutlined, FunctionOutlined } from '@ant-design/icons'; +import { Card, Button, Modal, Input, Upload, Divider, message, Dropdown, Menu } from 'antd'; +import { PlusOutlined, UploadOutlined, FunctionOutlined, DownOutlined } from '@ant-design/icons'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import StandardTable from '@/components/StandardTable'; -import { Form, Select } from 'antd/lib/index'; +import { Form } from 'antd/lib/index'; import styles from './styles.less'; const FormItem = Form.Item; -const { Option } = Select; const UploadChainCode = props => { const [form] = Form.useForm(); @@ -31,14 +30,14 @@ const UploadChainCode = props => { message.error( intl.formatMessage({ id: 'app.chainCode.form.create.fail', - defaultMessage: 'Upload chain code failed', + defaultMessage: 'Upload chaincode failed', }) ); } else { message.success( intl.formatMessage({ id: 'app.chainCode.form.create.success', - defaultMessage: 'Upload chain code succeed', + defaultMessage: 'Upload chaincode succeed', }) ); form.resetFields(); @@ -63,17 +62,11 @@ const UploadChainCode = props => { }, wrapperCol: { xs: { span: 24 }, - sm: { span: 12 }, - md: { span: 10 }, + sm: { span: 14 }, + md: { span: 12 }, }, }; - const languageOptions = ['golang', 'java', 'nodejs'].map(item => ( - - )); - const uploadProps = { onRemove: () => { setFile(null); @@ -96,10 +89,10 @@ const UploadChainCode = props => { destroyOnClose title={intl.formatMessage({ id: 'app.chainCode.form.create.header.title', - defaultMessage: 'Upload Chain code', + defaultMessage: 'Upload chaincode', })} confirmLoading={uploading} - visible={modalVisible} + open={modalVisible} onOk={onSubmit} onCancel={() => handleModalVisible(false)} > @@ -107,125 +100,53 @@ const UploadChainCode = props => { - - - - - - - + + + - - - - - ); @@ -264,6 +185,14 @@ class ChainCode extends PureComponent { }); }; + fetchNodes = () => { + const { dispatch } = this.props; + + dispatch({ + type: 'chainCode/listNode', + }); + }; + handleTableChange = pagination => { const { dispatch } = this.props; const { formValues } = this.state; @@ -289,9 +218,11 @@ class ChainCode extends PureComponent { const { dispatch } = this.props; const formData = new FormData(); - Object.keys(values).forEach(key => { - formData.append(key, values[key]); - }); + Object.keys(values) + .filter(key => !(key === 'description' && !values[key])) // filter out empty description + .forEach(key => { + formData.append(key, values[key]); + }); dispatch({ type: 'chainCode/uploadChainCode', @@ -311,7 +242,7 @@ class ChainCode extends PureComponent { render() { const { selectedRows, modalVisible, newFile } = this.state; const { - chainCode: { chainCodes, pagination }, + chainCode: { chainCodes, paginations }, loadingChainCodes, intl, uploading, @@ -328,13 +259,43 @@ class ChainCode extends PureComponent { intl, }; + const menu = record => ( + + + { + this.handleDeleteChaincode(record); + }} + > + {intl.formatMessage({ + id: 'app.chainCode.table.operate.delete', + defaultMessage: 'Delete', + })} + + + + ); + + const MoreBtn = () => ( + + + {intl.formatMessage({ + id: 'app.node.table.operation.more', + defaultMessage: 'More', + })}{' '} + + + + ); + const columns = [ { title: intl.formatMessage({ - id: 'app.chainCode.table.header.name', - defaultMessage: 'Name', + id: 'app.chainCode.table.header.packageID', + defaultMessage: 'PackageID', }), - dataIndex: 'name', + dataIndex: 'packageID', + ellipsis: true, }, { title: intl.formatMessage({ @@ -346,23 +307,16 @@ class ChainCode extends PureComponent { { title: intl.formatMessage({ id: 'app.chainCode.table.header.language', - defaultMessage: 'Language', + defaultMessage: 'Chaincode Language', }), dataIndex: 'language', }, { title: intl.formatMessage({ - id: 'app.chainCode.table.header.time', - defaultMessage: 'Time', + id: 'app.chainCode.table.header.description', + defaultMessage: 'Description', }), - dataIndex: 'create_ts', - }, - { - title: intl.formatMessage({ - id: 'app.chainCode.table.header.md5', - defaultMessage: 'MD5', - }), - dataIndex: 'md5', + dataIndex: 'description', }, { title: intl.formatMessage({ @@ -379,16 +333,40 @@ class ChainCode extends PureComponent { })} - + + {intl.formatMessage({ + id: 'app.chainCode.table.operate.approve', + defaultMessage: 'Approve', + })} + + + {intl.formatMessage({ - id: 'app.chainCode.table.operate.delete', - defaultMessage: 'Delete', + id: 'app.chainCode.table.operate.commit', + defaultMessage: 'Commit', })} + + ), }, ]; + // TODO: remove dummy data after API is connected + const dummyList = [ + { + packageID: 'cc1v1:cc7bb5f50a53c207f68d37e9423c32f968083282e5ffac00d41ffc5768dc1873', + description: 'chaincode demo', + version: 'v1', + language: 'golang', + approve: false, + }, + ]; + const dummyPagination = { + total: 0, + current: 1, + pageSize: 10, + }; return ( } {intl.formatMessage({ id: 'app.chainCode.title', - defaultMessage: 'Chain code Management', + defaultMessage: 'Chaincode Management', })} } @@ -413,9 +391,10 @@ class ChainCode extends PureComponent { selectedRows={selectedRows} loading={loadingChainCodes} rowKey="id" + // TODO: remove length check after API is connected data={{ - list: chainCodes, - pagination, + list: chainCodes.length !== 0 ? chainCodes : dummyList, + pagination: chainCodes.length !== 0 ? paginations : dummyPagination, }} columns={columns} onSelectRow={this.handleSelectRows}