From 74acc6ed3f2d409cfb19765086488034c92292b4 Mon Sep 17 00:00:00 2001 From: xichen1 Date: Tue, 17 Oct 2023 04:12:17 -0700 Subject: [PATCH 1/2] Implement Chaincode dashboard Implement chaincode dashboard. Add the required buttons to the page. Use the dummy data for the dev purposes, will delete after all features are finished. Signed-off-by: xichen1 --- .../src/pages/ChainCode/ChainCode.js | 247 ++++++++---------- 1 file changed, 113 insertions(+), 134 deletions(-) diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js index d9c21b44a..d7c7a8777 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.operator.chainCode.table.operate.delete', + defaultMessage: 'Delete', + })} + + + + ); + + const MoreBtn = () => ( + + + {intl.formatMessage({ + id: 'app.operator.node.table.operation.more', + defaultMessage: 'More', + })}{' '} + + + + ); + const columns = [ { title: intl.formatMessage({ - id: 'app.chainCode.table.header.name', - defaultMessage: 'Name', + id: 'app.operator.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', - }), - dataIndex: 'create_ts', - }, - { - title: intl.formatMessage({ - id: 'app.chainCode.table.header.md5', - defaultMessage: 'MD5', + id: 'app.operator.chainCode.table.header.description', + defaultMessage: 'Description', }), - dataIndex: 'md5', + dataIndex: 'description', }, { title: intl.formatMessage({ @@ -379,16 +333,40 @@ class ChainCode extends PureComponent { })} - + + {intl.formatMessage({ + id: 'app.operator.chainCode.table.operate.approve', + defaultMessage: 'Approve', + })} + + + {intl.formatMessage({ - id: 'app.chainCode.table.operate.delete', - defaultMessage: 'Delete', + id: 'app.operator.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} From b2493fdc6617449820f656ec7889edfe1dfbd7eb Mon Sep 17 00:00:00 2001 From: xichen1 Date: Tue, 17 Oct 2023 04:23:54 -0700 Subject: [PATCH 2/2] Update outdated message ids Signed-off-by: xichen1 --- .../src/pages/ChainCode/ChainCode.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js index d7c7a8777..bdf9d9482 100644 --- a/src/dashboard/src/pages/ChainCode/ChainCode.js +++ b/src/dashboard/src/pages/ChainCode/ChainCode.js @@ -100,7 +100,7 @@ const UploadChainCode = props => { { { required: true, message: intl.formatMessage({ - id: 'app.operator.chainCode.form.create.fileSelect', + id: 'app.chainCode.form.create.fileSelect', defaultMessage: 'Please select the chaincode package', }), }, @@ -120,7 +120,7 @@ const UploadChainCode = props => { @@ -129,7 +129,7 @@ const UploadChainCode = props => { { > @@ -268,7 +268,7 @@ class ChainCode extends PureComponent { }} > {intl.formatMessage({ - id: 'app.operator.chainCode.table.operate.delete', + id: 'app.chainCode.table.operate.delete', defaultMessage: 'Delete', })} @@ -280,7 +280,7 @@ class ChainCode extends PureComponent { {intl.formatMessage({ - id: 'app.operator.node.table.operation.more', + id: 'app.node.table.operation.more', defaultMessage: 'More', })}{' '} @@ -291,7 +291,7 @@ class ChainCode extends PureComponent { const columns = [ { title: intl.formatMessage({ - id: 'app.operator.chainCode.table.header.packageID', + id: 'app.chainCode.table.header.packageID', defaultMessage: 'PackageID', }), dataIndex: 'packageID', @@ -313,7 +313,7 @@ class ChainCode extends PureComponent { }, { title: intl.formatMessage({ - id: 'app.operator.chainCode.table.header.description', + id: 'app.chainCode.table.header.description', defaultMessage: 'Description', }), dataIndex: 'description', @@ -335,14 +335,14 @@ class ChainCode extends PureComponent { {intl.formatMessage({ - id: 'app.operator.chainCode.table.operate.approve', + id: 'app.chainCode.table.operate.approve', defaultMessage: 'Approve', })} {intl.formatMessage({ - id: 'app.operator.chainCode.table.operate.commit', + id: 'app.chainCode.table.operate.commit', defaultMessage: 'Commit', })}