Merge pull request #614 from xiaor2/xiaor2

Connected the install chaincode to the backend

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

@@ -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'],
 }))
@@ -167,8 +27,10 @@ class ChainCode extends PureComponent {
     formValues: {},
     newFile: '',
     modalVisible: false,
+    installModalVisible: false,
     approveModalVisible: false,
     commitModalVisible: false,
+    chainCodeName: '',
   };
 
   componentDidMount() {
@@ -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,
@@ -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();
@@ -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,
@@ -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,
@@ -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',
@@ -437,7 +342,8 @@ class ChainCode extends PureComponent {
             />
           </div>
         </Card>
-        <UploadChainCode {...formProps} />
+        <UploadForm {...uploadFormProps} />
+        <InstallForm {...installFormProps} />
         <ApproveForm {...approveFormProps} />
         <CommitForm {...commitFormProps} />
       </PageHeaderWrapper>

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)}
     >
       <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({