[#issue-410]Add chaincode management page

src/dashboard/config/router.config.js

@@ -108,6 +108,11 @@ export default [
                 name: 'channel',
                 component: './Operator/Channel/Channel',
               },
+              {
+                path: '/operator/chaincode',
+                name: 'chaincode',
+                component: './Operator/ChainCode/ChainCode',
+              },
               {
                 path: '/operator/userManagement',
                 name: 'userManagement',

src/dashboard/src/locales/en-US.js

@@ -15,6 +15,7 @@ import operatorNode from './en-US/operatorNode';
 import fabricCa from './en-US/fabric/ca';
 import operatorNetwork from './en-US/operatorNetwork';
 import operatorChannel from './en-US/operatorChannel';
+import operatorChainCode from './en-US/operatorChaincode';
 
 export default {
   'navBar.lang': 'Languages',
@@ -38,5 +39,6 @@ export default {
   ...operatorNode,
   ...fabricCa,
   ...operatorNetwork,
-  ...operatorChannel
+  ...operatorChannel,
+  ...operatorChainCode
 };

src/dashboard/src/locales/en-US/menu.js

@@ -18,6 +18,7 @@ export default {
   'menu.operator.network': 'Network',
   'menu.operator.newNetwork': 'New Network',
   'menu.operator.channel': 'Channel',
+  'menu.operator.chaincode': 'Chain code',
   'menu.exception': 'Exception',
   'menu.exception.not-permission': '403',
   'menu.exception.not-find': '404',

src/dashboard/src/locales/en-US/operatorChaincode.js

@@ -0,0 +1,10 @@
+export default {
+  'app.operator.chainCode.title': 'Chain code management',
+  'app.operator.chainCode.table.header.name': 'Name',
+  'app.operator.chainCode.table.header.version': 'Version',
+  'app.operator.chainCode.table.header.language': 'Language',
+  'app.operator.chainCode.table.header.time': 'Time',
+  'app.operator.chainCode.table.header.md5': 'MD5',
+  'app.operator.chainCode.table.operate.install': 'Install',
+  'app.operator.chainCode.table.operate.delete': 'Delete',
+};

src/dashboard/src/locales/zh-CN.js

@@ -15,6 +15,7 @@ import operatorNode from './zh-CN/operatorNode';
 import fabricCa from './zh-CN/fabric/ca';
 import operatorNetwork from './zh-CN/operatorNetwork';
 import operatorChannel from './zh-CN/operatorChannel';
+import operatorChainCode from './zh-CN/operatorChaincode';
 
 export default {
   'navBar.lang': '语言',
@@ -38,5 +39,6 @@ export default {
   ...operatorNode,
   ...fabricCa,
   ...operatorNetwork,
-  ...operatorChannel
+  ...operatorChannel,
+  ...operatorChainCode
 };

src/dashboard/src/locales/zh-CN/menu.js

@@ -18,6 +18,7 @@ export default {
   'menu.operator.network': '网络',
   'menu.operator.newNetwork': '新建网络',
   'menu.operator.channel': '通道',
+  'menu.operator.chaincode': '链码',
   'menu.exception': '异常页',
   'menu.exception.not-permission': '403',
   'menu.exception.not-find': '404',

src/dashboard/src/locales/zh-CN/operatorChaincode.js

@@ -0,0 +1,10 @@
+export default {
+  'app.operator.chainCode.title': '链码管理',
+  'app.operator.chainCode.table.header.name': '名称',
+  'app.operator.chainCode.table.header.version': '版本',
+  'app.operator.chainCode.table.header.language': '语言',
+  'app.operator.chainCode.table.header.time': '时间',
+  'app.operator.chainCode.table.header.md5': 'MD5',
+  'app.operator.chainCode.table.operate.install': '安装',
+  'app.operator.chainCode.table.operate.delete': '删除',
+};

src/dashboard/src/pages/Operator/ChainCode/ChainCode.js

@@ -0,0 +1,165 @@
+/*
+ SPDX-License-Identifier: Apache-2.0
+*/
+import React, { PureComponent, Fragment } from 'react';
+import { connect, injectIntl, history } from 'umi';
+import { Card, Button } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import StandardTable from '@/components/StandardTable';
+import styles from './styles.less';
+import { useIntl } from "umi";
+
+@connect(({ chainCode, loading }) => ({
+  chainCode,
+  loadingChainCodes: loading.effects['chainCode/listChainCode'],
+}))
+class ChainCode extends PureComponent {
+  state = {
+    selectedRows: [],
+    formValues: {},
+    modalVisible: false
+  };
+
+  componentDidMount() {
+    this.fetchChaincodes();
+  }
+
+  componentWillUnmount() {
+    const { dispatch } = this.props;
+
+    dispatch({
+      type: 'chainCode/clear',
+    });
+  }
+
+  fetchChaincodes = () => {
+    const { dispatch } = this.props;
+
+    dispatch({
+      type: 'chainCode/listChainCode',
+    });
+  };
+
+  handleTableChange = pagination => {
+    const { dispatch } = this.props;
+    const { formValues } = this.state;
+    const { current, pageSize } = pagination;
+    const params = {
+      page: current,
+      per_page: pageSize,
+      ...formValues,
+    };
+    dispatch({
+      type: 'chainCode/listChainCode',
+      payload: params,
+    });
+  };
+
+  handleModalVisible = visible => {
+    this.setState({
+      modalVisible: !!visible
+    });
+  };
+
+  onUploadChainCode = () => {
+    this.handleModalVisible(true);
+  };
+
+  render() {
+    const { selectedRows } = this.state;
+    const {
+      chainCode: { chainCodes, pagination },
+      loadingChainCodes,
+      intl,
+    } = this.props;
+
+    const columns = [
+      {
+        title: intl.formatMessage({
+          id: 'app.operator.chainCode.table.header.name',
+          defaultMessage: 'Name',
+        }),
+        dataIndex: 'name',
+      },
+      {
+        title: intl.formatMessage({
+          id: 'app.operator.chainCode.table.header.version',
+          defaultMessage: 'Version',
+        }),
+        dataIndex: 'version',
+      },
+      {
+        title: intl.formatMessage({
+          id: 'app.operator.chainCode.table.header.language',
+          defaultMessage: 'Language',
+        }),
+        dataIndex: 'language',
+      },
+      {
+        title: intl.formatMessage({
+          id: 'app.operator.chainCode.table.header.time',
+          defaultMessage: 'Time',
+        }),
+        dataIndex: 'create_ts',
+      },
+      {
+        title: intl.formatMessage({
+          id: 'app.operator.chainCode.table.header.md5',
+          defaultMessage: 'MD5',
+        }),
+        dataIndex: 'md5',
+      },
+      {
+        title: intl.formatMessage({
+          id: 'form.table.header.operation',
+          defaultMessage: 'Operation',
+        }),
+        render: (text, record) => (
+          <Fragment>
+            <a>
+              {intl.formatMessage({ id: 'app.operator.chainCode.table.operate.install', defaultMessage: 'Install' })}
+            </a>
+            <Divider type="vertical" />
+            <a className={styles.danger}>
+              {intl.formatMessage({ id: 'app.operator.chainCode.table.operate.delete', defaultMessage: 'Delete' })}
+            </a>
+          </Fragment>
+        ),
+      },
+    ];
+    return (
+      <PageHeaderWrapper
+        title={intl.formatMessage({
+          id: 'app.operator.chainCode.title',
+          defaultMessage: 'Chain code management',
+        })}
+      >
+        <Card bordered={false}>
+          <div className={styles.tableList}>
+            <div className={styles.tableListOperator}>
+              <Button type="primary" onClick={this.onUploadChainCode}>
+                <PlusOutlined />
+                {intl.formatMessage({ id: 'form.button.new', defaultMessage: 'New' })}
+              </Button>
+            </div>
+            <StandardTable
+              selectedRows={selectedRows}
+              loading={loadingChainCodes}
+              rowKey="id"
+              data={{
+                list: chainCodes,
+                pagination,
+              }}
+              columns={columns}
+              onSelectRow={this.handleSelectRows}
+              onChange={this.handleTableChange}
+            />
+          </div>
+        </Card>
+      </PageHeaderWrapper>
+    );
+  }
+}
+
+export default injectIntl(ChainCode);

src/dashboard/src/pages/Operator/ChainCode/styles.less

@@ -0,0 +1,109 @@
+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.tableList {
+  .tableListOperator {
+    margin-bottom: 16px;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+.newAgentButton {
+  width: 100%;
+  margin-bottom: 8px;
+  background: fixed;
+  border-color: darkgrey;
+}
+
+.tableListForm {
+  :global {
+    .ant-form-item {
+      display: flex;
+      margin-right: 0;
+      margin-bottom: 24px;
+      > .ant-form-item-label {
+        width: auto;
+        padding-right: 8px;
+        line-height: 32px;
+      }
+      .ant-form-item-control {
+        line-height: 32px;
+      }
+    }
+    .ant-form-item-control-wrapper {
+      flex: 1;
+    }
+  }
+  .submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+}
+
+@media screen and (max-width: @screen-lg) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 24px;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .tableListForm :global(.ant-form-item) {
+    margin-right: 8px;
+  }
+}
+
+.ListContentRow {
+  width: 400px;
+}
+
+.ListItemTitle {
+  color: #1fffff;
+  font-size: 17px;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.danger {
+  color: @error-color;
+}
+
+.disabled {
+  color: @disabled-color-dark;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+}
+
+.optional {
+  color: @text-color-secondary;
+  font-style: normal;
+}
+
+.auto-complete {
+  width: 100%;
+}
+
+
+.dropdownClassName {
+  //background-color: @optionBackgroudColor;
+  :global {
+    .ant-select-dropdown-menu-item {
+      height: 24px;
+      padding: 1px 12px;
+      font-size: 14px;
+      line-height: 24px;
+    }
+    .ant-select-item-option-content{
+      color: #fcfff6 !important;
+    }
+    .ant-select-item-option-selected{
+      background-color: #107c6e !important;
+    }
+  }
+}