[CE-396] Add chain info page

Support query chain block height, blocks, transactions. Can query all operations for a chain. Change-Id: Ie3fa84e4402a1d6dcbbf3f3878e40c6fcf212dc1 Signed-off-by: Haitao Yue <hightall@me.com>
hyperledger · Jun 26, 2018 · f152bb8 · f152bb8
1 parent fb14496
commit f152bb8
Show file tree

Hide file tree

Showing 20 changed files with 1,151 additions and 31 deletions.
diff --git a/user-dashboard/src/app/assets/src/common/menu.js b/user-dashboard/src/app/assets/src/common/menu.js
@@ -8,6 +8,18 @@ const menuData = [
     name: "Chain",
     icon: "link",
     path: "chain",
+    children: [
+      {
+        name: "List",
+        path: "index",
+      },
+      {
+        name: "Info",
+        path: "info/:id",
+        hideInMenu: true,
+        hideInBreadcrumb: false,
+      },
+    ],
   },
   {
     name: "Apply Chain",

diff --git a/user-dashboard/src/app/assets/src/common/router.js b/user-dashboard/src/app/assets/src/common/router.js
@@ -79,9 +79,14 @@ export const getRouterData = app => {
         import("../layouts/BasicLayout")
       ),
     },
-    "/chain": {
+    "/chain/index": {
       component: dynamicWrapper(app, ["chain"], () => import("../routes/Chain")),
     },
+    "/chain/info/:id": {
+      component: dynamicWrapper(app, ["chain"], () =>
+        import("../routes/Chain/Info")
+      ),
+    },
     "/apply-chain": {
       component: dynamicWrapper(app, ["chain"], () =>
         import("../routes/Chain/Apply")

diff --git a/user-dashboard/src/app/assets/src/components/EditableLinkGroup/index.js b/user-dashboard/src/app/assets/src/components/EditableLinkGroup/index.js
@@ -0,0 +1,45 @@
+import React, { PureComponent, createElement } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'antd';
+import styles from './index.less';
+
+// TODO: 添加逻辑
+
+class EditableLinkGroup extends PureComponent {
+  static propTypes = {
+    links: PropTypes.array,
+    onAdd: PropTypes.func,
+    linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  };
+
+  static defaultProps = {
+    links: [],
+    onAdd: () => {},
+    linkElement: 'a',
+  };
+  render() {
+    const { links, linkElement, onAdd } = this.props;
+    return (
+      <div className={styles.linkGroup}>
+        {links.map(link =>
+          createElement(
+            linkElement,
+            {
+              key: `linkGroup-item-${link.id || link.title}`,
+              to: link.href,
+              href: link.href,
+            },
+            link.title
+          )
+        )}
+        {
+          <Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
+            添加
+          </Button>
+        }
+      </div>
+    );
+  }
+}
+
+export default EditableLinkGroup;
diff --git a/user-dashboard/src/app/assets/src/components/EditableLinkGroup/index.less b/user-dashboard/src/app/assets/src/components/EditableLinkGroup/index.less
@@ -0,0 +1,16 @@
+@import '~antd/lib/style/themes/default.less';
+
+.linkGroup {
+  padding: 20px 0 8px 24px;
+  font-size: 0;
+  & > a {
+    color: @text-color;
+    display: inline-block;
+    font-size: @font-size-base;
+    margin-bottom: 13px;
+    width: 25%;
+    &:hover {
+      color: @primary-color;
+    }
+  }
+}
diff --git a/user-dashboard/src/app/assets/src/components/SiderMenu/SiderMenu.js b/user-dashboard/src/app/assets/src/components/SiderMenu/SiderMenu.js
@@ -115,7 +115,11 @@ export default class SiderMenu extends PureComponent {
    * get SubMenu or Item
    */
   getSubMenuOrItem = item => {
-    if (item.children && item.children.some(child => child.name)) {
+    let shownChildrenLen = 1;
+    if (item.children) {
+      shownChildrenLen = item.children.filter(subItem => typeof subItem.hideInMenu === 'undefined').length;
+    }
+    if (item.children && item.children.some(child => child.name) && shownChildrenLen > 1) {
       const childrenItems = this.getNavMenuItems(item.children);
       // 当无子菜单时就不展示菜单
       if (childrenItems && childrenItems.length > 0) {

diff --git a/user-dashboard/src/app/assets/src/models/chain.js b/user-dashboard/src/app/assets/src/models/chain.js
@@ -3,13 +3,22 @@
 */
 import { routerRedux } from "dva/router";
 import { message } from "antd";
-import { queryChains, release, apply } from "../services/chain";
+import { queryChains, release, apply, queryChain } from "../services/chain";
 
 export default {
   namespace: "chain",
 
   state: {
     chains: [],
+    currentChain: {},
+    deploys: [],
+    height: 0,
+    recentBlock: [],
+    recentTransaction: [],
+    channels: [],
+    installedChainCodes: [],
+    instantiatedChainCodes: [],
+    operations: [],
   },
 
   effects: {
@@ -41,6 +50,23 @@ export default {
       }
       yield call(payload.callback);
     },
+    *queryChain({ payload }, { call, put }) {
+      const response = yield call(queryChain, payload);
+      yield put({
+        type: "setCurrentChain",
+        payload: {
+          currentChain: response.chain,
+          height: response.height,
+          recentBlock: response.recentBlock,
+          recentTransaction: response.recentTransaction,
+          deploys: response.deploys,
+          channels: response.channels,
+          installedChainCodes: response.installedChainCodes,
+          instantiatedChainCodes: response.instantiatedChainCodes,
+          operations: response.operations,
+        },
+      });
+    },
   },
 
   reducers: {
@@ -50,5 +76,44 @@ export default {
         chains: action.payload,
       };
     },
+    setCurrentChain(state, action) {
+      const {
+        currentChain,
+        height,
+        recentBlock,
+        recentTransaction,
+        deploys,
+        channels,
+        installedChainCodes,
+        instantiatedChainCodes,
+        operations,
+      } = action.payload;
+      return {
+        ...state,
+        currentChain,
+        height,
+        recentTransaction,
+        recentBlock,
+        deploys,
+        channels,
+        instantiatedChainCodes,
+        installedChainCodes,
+        operations,
+      };
+    },
+    clearCurrentChain(state) {
+      return {
+        ...state,
+        currentChain: {},
+        height: 0,
+        recentTransaction: [],
+        recentBlock: [],
+        deploys: [],
+        channels: [],
+        instantiatedChainCodes: [],
+        installedChainCodes: [],
+        operations: [],
+      };
+    },
   },
 };