[CE-367] Add chain apply,list,delete support

Can apply,list,delete chain in user dashboard.
Store network config in mongodb.

Change-Id: I01b6c080aca6b87f6e3a8c7942ac380dff388547
Signed-off-by: Haitao Yue <[email protected]>

docker/user-dashboard/Dockerfile.in

@@ -5,7 +5,8 @@
 FROM node:8.9
 MAINTAINER haitao yue "[email protected]"
 COPY user-dashboard/src/package.json /
-RUN cd / && yarn install -g
+COPY user-dashboard/src/yarn.lock /
+RUN cd / && yarn install -g --verbose
 ENV PATH ${PATH}:/node_modules/.bin
 COPY user-dashboard/src /var/www
 RUN cd /var/www && ln -sf /node_modules . && npm run build

user-dashboard/Makefile

@@ -1,5 +1,4 @@
 build-js:
-	sudo rm -rf ./js/node_modules ./js/login/node_modules ./js/dashboard/node_modules ./js/home/node_modules
 	docker-compose -f docker-compose-files/docker-compose-build-js.yaml up --force-recreate
 
 npm-install:

user-dashboard/docker-compose-files/docker-compose-build-js.yaml

@@ -16,4 +16,6 @@ services:
     image: hyperledger/cello-user-dashboard
     volumes:
       - $ROOT_PATH/user-dashboard/src:/var/www
+    environment:
+      - DEV=True
     command: bash -c "ln -sf /node_modules . && npm run build"

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

@@ -5,9 +5,15 @@ import { isUrl } from '../utils/utils';
 
 const menuData = [
   {
-    name: 'dashboard',
-    icon: 'dashboard',
-    path: 'dashboard',
+    name: 'Chain',
+    icon: 'link',
+    path: 'chain',
+  },
+    {
+    name: 'Apply Chain',
+    path: 'apply-chain',
+    hideInMenu: true,
+    hideInBreadcrumb: false,
   },
 ];
 

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

@@ -75,8 +75,11 @@ export const getRouterData = app => {
     '/': {
       component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
     },
-    '/dashboard': {
-      component: dynamicWrapper(app, [], () => import('../routes/Dashboard')),
+    '/chain': {
+      component: dynamicWrapper(app, ['chain'], () => import('../routes/Chain')),
+    },
+    '/apply-chain': {
+      component: dynamicWrapper(app, ['chain'], () => import('../routes/Chain/Apply')),
     },
     '/exception/403': {
       component: dynamicWrapper(app, [], () => import('../routes/Exception/403')),

user-dashboard/src/app/assets/src/components/Ellipsis/index.js

@@ -0,0 +1,227 @@
+/*
+ SPDX-License-Identifier: Apache-2.0
+*/
+import React, { Component } from 'react';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+/* eslint react/no-did-mount-set-state: 0 */
+/* eslint no-param-reassign: 0 */
+
+const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+const EllipsisText = ({ text, length, tooltip, ...other }) => {
+  if (typeof text !== 'string') {
+    throw new Error('Ellipsis children must be string.');
+  }
+  if (text.length <= length || length < 0) {
+    return <span {...other}>{text}</span>;
+  }
+  const tail = '...';
+  let displayText;
+  if (length - tail.length <= 0) {
+    displayText = '';
+  } else {
+    displayText = text.slice(0, length - tail.length);
+  }
+
+  if (tooltip) {
+    return (
+      <Tooltip overlayStyle={{ wordBreak: 'break-all' }} title={text}>
+        <span>
+          {displayText}
+          {tail}
+        </span>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <span {...other}>
+      {displayText}
+      {tail}
+    </span>
+  );
+};
+
+export default class Ellipsis extends Component {
+  state = {
+    text: '',
+    targetCount: 0,
+  };
+
+  componentDidMount() {
+    if (this.node) {
+      this.computeLine();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.lines !== nextProps.lines) {
+      this.computeLine();
+    }
+  }
+
+  computeLine = () => {
+    const { lines } = this.props;
+    if (lines && !isSupportLineClamp) {
+      const text = this.shadowChildren.innerText;
+      const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
+      const targetHeight = lines * lineHeight;
+      this.content.style.height = `${targetHeight}px`;
+      const totalHeight = this.shadowChildren.offsetHeight;
+      const shadowNode = this.shadow.firstChild;
+
+      if (totalHeight <= targetHeight) {
+        this.setState({
+          text,
+          targetCount: text.length,
+        });
+        return;
+      }
+
+      // bisection
+      const len = text.length;
+      const mid = Math.floor(len / 2);
+
+      const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
+
+      this.setState({
+        text,
+        targetCount: count,
+      });
+    }
+  };
+
+  bisection = (th, m, b, e, text, shadowNode) => {
+    const suffix = '...';
+    let mid = m;
+    let end = e;
+    let begin = b;
+    shadowNode.innerHTML = text.substring(0, mid) + suffix;
+    let sh = shadowNode.offsetHeight;
+
+    if (sh <= th) {
+      shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
+      sh = shadowNode.offsetHeight;
+      if (sh > th) {
+        return mid;
+      } else {
+        begin = mid;
+        mid = Math.floor((end - begin) / 2) + begin;
+        return this.bisection(th, mid, begin, end, text, shadowNode);
+      }
+    } else {
+      if (mid - 1 < 0) {
+        return mid;
+      }
+      shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
+      sh = shadowNode.offsetHeight;
+      if (sh <= th) {
+        return mid - 1;
+      } else {
+        end = mid;
+        mid = Math.floor((end - begin) / 2) + begin;
+        return this.bisection(th, mid, begin, end, text, shadowNode);
+      }
+    }
+  };
+
+  handleRoot = n => {
+    this.root = n;
+  };
+
+  handleContent = n => {
+    this.content = n;
+  };
+
+  handleNode = n => {
+    this.node = n;
+  };
+
+  handleShadow = n => {
+    this.shadow = n;
+  };
+
+  handleShadowChildren = n => {
+    this.shadowChildren = n;
+  };
+
+  render() {
+    const { text, targetCount } = this.state;
+    const { children, lines, length, className, tooltip, ...restProps } = this.props;
+
+    const cls = classNames(styles.ellipsis, className, {
+      [styles.lines]: lines && !isSupportLineClamp,
+      [styles.lineClamp]: lines && isSupportLineClamp,
+    });
+
+    if (!lines && !length) {
+      return (
+        <span className={cls} {...restProps}>
+          {children}
+        </span>
+      );
+    }
+
+    // length
+    if (!lines) {
+      return (
+        <EllipsisText
+          className={cls}
+          length={length}
+          text={children || ''}
+          tooltip={tooltip}
+          {...restProps}
+        />
+      );
+    }
+
+    const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
+
+    // support document.body.style.webkitLineClamp
+    if (isSupportLineClamp) {
+      const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
+      return (
+        <div id={id} className={cls} {...restProps}>
+          <style>{style}</style>
+          {tooltip ? (
+            <Tooltip overlayStyle={{ wordBreak: 'break-all' }} title={children}>
+              {children}
+            </Tooltip>
+          ) : (
+            children
+          )}
+        </div>
+      );
+    }
+
+    const childNode = (
+      <span ref={this.handleNode}>
+        {targetCount > 0 && text.substring(0, targetCount)}
+        {targetCount > 0 && targetCount < text.length && '...'}
+      </span>
+    );
+
+    return (
+      <div {...restProps} ref={this.handleRoot} className={cls}>
+        <div ref={this.handleContent}>
+          {tooltip ? (
+            <Tooltip overlayStyle={{ wordBreak: 'break-all' }} title={text}>
+              {childNode}
+            </Tooltip>
+          ) : (
+            childNode
+          )}
+          <div className={styles.shadow} ref={this.handleShadowChildren}>
+            {children}
+          </div>
+          <div className={styles.shadow} ref={this.handleShadow}>
+            <span>{text}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

user-dashboard/src/app/assets/src/components/Ellipsis/index.less

@@ -0,0 +1,24 @@
+.ellipsis {
+  overflow: hidden;
+  display: inline-block;
+  word-break: break-all;
+  width: 100%;
+}
+
+.lines {
+  position: relative;
+  .shadow {
+    display: block;
+    position: relative;
+    color: transparent;
+    opacity: 0;
+    z-index: -999;
+  }
+}
+
+.lineClamp {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}

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

@@ -0,0 +1,54 @@
+/*
+ SPDX-License-Identifier: Apache-2.0
+*/
+import { routerRedux } from 'dva/router';
+import { message } from 'antd';
+import { queryChains, release, apply } from '../services/chain';
+
+export default {
+  namespace: 'chain',
+
+  state: {
+    chains: [],
+  },
+
+  effects: {
+    *fetch(_, { call, put }) {
+      const response = yield call(queryChains);
+      yield put({
+        type: 'setChains',
+        payload: response.data,
+      })
+    },
+    *release({ payload }, { call, put }) {
+      const response = yield call(release, payload.id);
+      if (JSON.parse(response).success) {
+        message.success('Release Chain successfully');
+        yield put({
+          type: 'fetch',
+        })
+      }
+    },
+    *apply({ payload }, { call, put }) {
+    	const response = yield call(apply, payload);
+    	if (response.success) {
+        message.success('Apply Chain successfully');
+        yield put(
+          routerRedux.push({
+            pathname: '/chain',
+          })
+        );
+      }
+      yield call(payload.callback);
+    },
+  },
+
+  reducers: {
+    setChains(state, action) {
+      return {
+        ...state,
+        chains: action.payload,
+      };
+    },
+  },
+};