[CE-369] Implement invoke/query smart contract

Add running smart contract page for show all running chain code.
Can invoke/query smart contract in running chain code detail page.
Fix chain root path not clean when chain is released.

Change-Id: I1ab6af5bc4023182f28e03651e30f282d5d2502e
Signed-off-by: Haitao Yue <hightall@me.com>

Author: hightall

user-dashboard/src/app/assets/src/common/menu.js

@@ -21,9 +21,19 @@ const menuData = [
     icon: "code-o",
     children: [
       {
-        name: "List",
+        name: "Templates",
         path: "index",
       },
+      {
+        name: "Running",
+        path: "running",
+      },
+      {
+        name: "Invoke/Query",
+        path: "invoke-query/:id",
+        hideInMenu: true,
+        hideInBreadcrumb: false,
+      },
       {
         name: "Info",
         path: "info/:id",

user-dashboard/src/app/assets/src/common/router.js

@@ -130,6 +130,16 @@ export const getRouterData = app => {
         import("../routes/SmartContract/New/code")
       ),
     },
+    "/smart-contract/running": {
+      component: dynamicWrapper(app, ["deploy"], () =>
+        import("../routes/SmartContract/Running")
+      ),
+    },
+    "/smart-contract/invoke-query/:id": {
+      component: dynamicWrapper(app, ["deploy"], () =>
+        import("../routes/SmartContract/InvokeQuery")
+      ),
+    },
   };
   // Get name from ./menu.js or just set it in the router data.
   const menuData = getFlatMenuData(getMenuData());

user-dashboard/src/app/assets/src/models/deploy.js

@@ -0,0 +1,86 @@
+/*
+ SPDX-License-Identifier: Apache-2.0
+*/
+import { queryDeploys, queryDeploy, operateDeploy } from "../services/deploy";
+
+export default {
+  namespace: "deploy",
+
+  state: {
+    deploys: [],
+    currentDeploy: {},
+    total: 0,
+    instantiatedCount: 0,
+    instantiatingCount: 0,
+    errorCount: 0,
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryDeploys, payload);
+      const {
+        data,
+        total,
+        instantiatedCount,
+        instantiatingCount,
+        errorCount,
+      } = response.data;
+      yield put({
+        type: "setDeploys",
+        payload: {
+          deploys: data,
+          total,
+          instantiatingCount,
+          instantiatedCount,
+          errorCount,
+        },
+      });
+    },
+    *queryDeploy({ payload }, { call, put }) {
+      const response = yield call(queryDeploy, payload.id);
+      const { deploy } = response;
+      yield put({
+        type: "setDeploy",
+        payload: {
+          currentDeploy: deploy,
+        },
+      });
+    },
+    *operateDeploy({ payload }, { call }) {
+      const response = yield call(operateDeploy, payload);
+      if (payload.callback) {
+        yield call(payload.callback, {
+          request: payload,
+          response,
+        });
+      }
+    },
+  },
+
+  reducers: {
+    setDeploys(state, action) {
+      const {
+        deploys,
+        total,
+        instantiatedCount,
+        instantiatingCount,
+        errorCount,
+      } = action.payload;
+      return {
+        ...state,
+        deploys,
+        total,
+        instantiatedCount,
+        instantiatingCount,
+        errorCount,
+      };
+    },
+    setDeploy(state, action) {
+      const { currentDeploy } = action.payload;
+      return {
+        ...state,
+        currentDeploy,
+      };
+    },
+  },
+};

user-dashboard/src/app/assets/src/models/smartContract.js

@@ -17,6 +17,7 @@ export default {
     smartContracts: [],
     currentSmartContract: {},
     codes: [],
+    deploys: [],
     newOperations: [],
   },
 
@@ -51,6 +52,7 @@ export default {
           payload: {
             currentSmartContract: response.info,
             codes: response.codes,
+            deploys: response.deploys,
             newOperations: response.newOperations,
           },
         });
@@ -78,11 +80,17 @@ export default {
       };
     },
     setCurrentSmartContract(state, action) {
-      const { currentSmartContract, codes, newOperations } = action.payload;
+      const {
+        currentSmartContract,
+        codes,
+        newOperations,
+        deploys,
+      } = action.payload;
       return {
         ...state,
         currentSmartContract,
         codes,
+        deploys,
         newOperations,
       };
     },

user-dashboard/src/app/assets/src/routes/SmartContract/Info/detail.js

@@ -7,6 +7,7 @@ import {
   Button,
   Table,
   Divider,
+  Badge,
 } from 'antd';
 import moment from 'moment';
 import styles from './index.less';
@@ -15,7 +16,7 @@ import styles from './index.less';
 export default class Detail extends Component {
 
   render() {
-    const { codes, loadingInfo, onAddNewCode, onDeploy } = this.props;
+    const { codes, loadingInfo, onAddNewCode, onDeploy, deploys, onInvokeQuery } = this.props;
     const codeColumns = [
       {
         title: 'Version',
@@ -39,10 +40,76 @@ export default class Detail extends Component {
         ),
       },
     ];
+    const deployColumns = [
+      {
+        title: 'Chain',
+        dataIndex: 'chain',
+        key: 'chain',
+        render: text => text.name,
+      },
+      {
+        title: 'Code Version',
+        dataIndex: 'smartContractCode',
+        key: 'smartContractCode',
+        render: text => text.version,
+      },
+      {
+        title: 'Status',
+        dataIndex: 'status',
+        key: 'status',
+        render: ( text ) => {
+          let status = "default";
+          switch (text) {
+            case 'installed':
+            case 'instantiated':
+              status = "success";
+              break;
+            case 'instantiating':
+              status = "processing";
+              break;
+            case 'error':
+              status = "error";
+              break;
+            default:
+              break;
+          }
+
+          return <Badge status={status} text={<span className={styles["status-text"]}>{text}</span>} />;
+        },
+      },
+      {
+        title: 'Deploy Time',
+        dataIndex: 'deployTime',
+        key: 'deployTime',
+        render: text => moment(text).format("YYYY-MM-DD HH:mm:ss"),
+      },
+      {
+        title: 'Operate',
+        render: ( text, record ) => (
+          <Fragment>
+            <Button onClick={() => onInvokeQuery(record)} type="primary" icon="api" size="small" disabled={record.status !== 'instantiated'}>Invoke/Query</Button>
+          </Fragment>
+        ),
+      },
+    ];
     return (
       <div>
+        <Card
+          title="Deployment List"
+          bordered={false}
+        >
+          <div className={styles.tableList}>
+            <Table
+              pagination={false}
+              loading={loadingInfo}
+              columns={deployColumns}
+              dataSource={deploys}
+            />
+          </div>
+        </Card>
         <Card
           title="Code List"
+          style={{marginTop: 20}}
           bordered={false}
         >
           <div className={styles.tableList}>

user-dashboard/src/app/assets/src/routes/SmartContract/Info/index.js

@@ -126,6 +126,12 @@ export default class AdvancedProfile extends Component {
     this.onOperationTabChange('detail');
   };
 
+  onInvokeQuery = (item) => {
+    this.props.dispatch(routerRedux.push({
+      pathname: `/smart-contract/invoke-query/${item._id}`,
+    }));
+  };
+
   @Bind()
   @Debounce(200)
   setStepDirection() {
@@ -143,16 +149,18 @@ export default class AdvancedProfile extends Component {
   }
   render() {
     const { smartContract, chain: { chains }, loadingInfo } = this.props;
-    const { currentSmartContract, codes, newOperations } = smartContract;
+    const { currentSmartContract, codes, deploys, newOperations } = smartContract;
     const { deployStep, selectedVersion, selectedVersionId } = this.state;
     const versions = codes.map(code => code.version);
     const versionTags = versions.map(version => <Tag>{version}</Tag>);
 
     const detailProps = {
       codes,
+      deploys,
       loadingInfo,
       onAddNewCode: this.onAddNewCode,
       onDeploy: this.onClickDeploy,
+      onInvokeQuery: this.onInvokeQuery,
     };
     const deployProps = {
       version: selectedVersion,

user-dashboard/src/app/assets/src/routes/SmartContract/Info/index.less

@@ -107,3 +107,7 @@
   align-content: center;
   text-align: center;
 }
+
+.status-text {
+  text-transform: capitalize;
+}