Related to #CE-9

Add react theme for Front-end implementation;
Add new makefile command for react theme;
Add document for react theme;

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

Makefile

@@ -3,8 +3,9 @@ WHITE  := $(shell tput -Txterm setaf 7)
 YELLOW := $(shell tput -Txterm setaf 3)
 RESET  := $(shell tput -Txterm sgr0)
 
-STATIC_FOLDER?=themes\/react\/static
-TEMPLATE_FOLDER?=themes\/react\/templates
+THEME?=basic
+STATIC_FOLDER?=themes\/${THEME}\/static
+TEMPLATE_FOLDER?=themes\/${THEME}\/templates
 
 .PHONY: \
 	all \
@@ -52,6 +53,15 @@ restart: ##@Service Restart service
 setup: ##@Environment Setup dependency for service environment
 	bash scripts/setup.sh
 
+build-js: ##@Nodejs Build js files for react
+	bash scripts/build_reactjs.sh
+
+watch-mode: ##@Nodejs Run watch mode with js files for react
+	bash scripts/watch_mode.sh
+
+npm-install: ##@Nodejs Install modules with npm package management
+	bash scripts/npm_install.sh
+
 HELP_FUN = \
 	%help; \
 	while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-]+)\s*:.*\#\#(?:@([a-zA-Z\-]+))?\s(.*)$$/ }; \

README.md

@@ -44,9 +44,10 @@ You can also find more [scenarios](docs/scenario.md).
 * [Architecture Design](docs/arch.md)
 * [Database Model](docs/db.md)
 * [API](api/restserver_v2.md)
+* [Develop react js](docs/reactjs.md)
 
 ## Why named Cello?
 Can u find anyone better at playing chains? :)
 
 ## License <a name="license"></a>
-The Hyperledger Project uses the [Apache License Version 2.0](LICENSE) software license.
+The Hyperledger Project uses the [Apache License Version 2.0](LICENSE) software license.

docker-compose-build-js.yml

@@ -0,0 +1,16 @@
+# This compose file will deploy the services, and bootup a mongo server.
+# Local `/opt/cello/mongo` will be used for the db storage.
+#  dashbard: dashbard service of cello, listen on 8080
+#  app: app service of cello, listen on 80
+#  nginx: front end
+#  mongo: mongo db
+
+version: '2'
+services:
+  # cello dashbard service
+  build-js:
+    image: node
+    container_name: build-js
+    volumes:  # This should be removed in product env
+      - ./src/themes/react/static:/app
+    command: bash -c "cd /app && npm run build"

docker-compose-npm-install.yml

@@ -0,0 +1,16 @@
+# This compose file will deploy the services, and bootup a mongo server.
+# Local `/opt/cello/mongo` will be used for the db storage.
+#  dashbard: dashbard service of cello, listen on 8080
+#  app: app service of cello, listen on 80
+#  nginx: front end
+#  mongo: mongo db
+
+version: '2'
+services:
+  # cello dashbard service
+  npm-install:
+    image: node
+    container_name: npm-install
+    volumes:  # This should be removed in product env
+      - ./src/themes/react/static:/app
+    command: bash -c "cd /app && npm install --loglevel http"

docker-compose-watch-mode.yml

@@ -0,0 +1,16 @@
+# This compose file will deploy the services, and bootup a mongo server.
+# Local `/opt/cello/mongo` will be used for the db storage.
+#  dashbard: dashbard service of cello, listen on 8080
+#  app: app service of cello, listen on 80
+#  nginx: front end
+#  mongo: mongo db
+
+version: '2'
+services:
+  # cello dashbard service
+  watch-mode:
+    image: node
+    container_name: watch-mode
+    volumes:  # This should be removed in product env
+      - ./src/themes/react/static:/app
+    command: bash -c "cd /app && npm run watch-mode"

docs/reactjs.md

@@ -0,0 +1,33 @@
+** **This is another Front-end implementation for cello dashboard, if you want to use this version, must change the theme into reactjs. 
+
+How to start service with react theme?
+--------------------------------------
+
+```sh
+$ THEME=react make start
+```
+
+If you want to develop original js code for react, you must install node modules, and rebuild js after you change the js code.
+
+In the initialized state, must install node modules, the command is
+
+```sh
+$ make npm-install
+```
+
+If you want to add extra node modules, you need change the package.json file in src/themes/react/static directory, then rerun the command “make npm-install”.
+
+How to build react js?
+----------------------
+
+In the development phase
+
+```sh
+$ make watch-mode
+```
+
+In the production environment
+
+```sh
+$ make build-js
+```

scripts/build_reactjs.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# This script will (re)start all services.
+# It should be triggered at the upper directory, and safe to repeat.
+
+source scripts/header.sh
+
+echo_b "Start build react js files..."
+docker-compose -f docker-compose-build-js.yml up --no-recreate
+
+#echo "Restarting mongo_express"
+#[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express

scripts/npm_install.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# This script will (re)start all services.
+# It should be triggered at the upper directory, and safe to repeat.
+
+source scripts/header.sh
+
+echo_b "Start install npm packages..."
+docker-compose -f docker-compose-npm-install.yml up --no-recreate
+
+#echo "Restarting mongo_express"
+#[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express

scripts/watch_mode.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+# This script will (re)start all services.
+# It should be triggered at the upper directory, and safe to repeat.
+
+source scripts/header.sh
+
+echo_b "Run watch mode for react js files..."
+docker-compose -f docker-compose-watch-mode.yml up --no-recreate
+
+#echo "Restarting mongo_express"
+#[[ "$(docker ps -q --filter='name=mongo_express')" != "" ]] && docker restart mongo_express

src/themes/react/static/js/components/layout/bread.js

@@ -0,0 +1,62 @@
+import React, { PropTypes } from 'react'
+import { Breadcrumb, Icon } from 'antd'
+import styles from './main.less'
+import { menu } from '../../utils'
+
+let pathSet = []
+const getPathSet = function (menuArray, parentPath) {
+  parentPath = parentPath || '/'
+  menuArray.map(item => {
+    pathSet[(parentPath + item.key).replace(/\//g, '-').hyphenToHump()] = {
+      path: parentPath + item.key,
+      name: item.name,
+      icon: item.icon || '',
+      clickable: item.clickable === undefined
+    }
+    if (item.child) {
+      getPathSet(item.child, parentPath + item.key + '/')
+    }
+  })
+}
+getPathSet(menu)
+
+function Bread ({ location }) {
+  let pathNames = []
+  location.pathname.substr(1).split('/').map((item, key) => {
+    if (key > 0) {
+      pathNames.push((pathNames[key - 1] + '-' + item).hyphenToHump())
+    } else {
+      pathNames.push(('-' + item).hyphenToHump())
+    }
+  })
+  const breads = pathNames.map((item, key) => {
+    if (!(item in pathSet)) {
+      item = 'Overview'
+    }
+    return (
+      <Breadcrumb.Item key={key} {...((pathNames.length - 1 === key) || !pathSet[item].clickable) ? '' : { href: '#' + pathSet[item].path }}>
+        {pathSet[item].icon
+          ? <Icon type={pathSet[item].icon} />
+          : ''}
+        <span>{pathSet[item].name}</span>
+      </Breadcrumb.Item>
+    )
+  })
+
+  return (
+    <div className={styles.bread}>
+      <Breadcrumb>
+        <Breadcrumb.Item href='#/'><Icon type='home' />
+          <span>Home</span>
+        </Breadcrumb.Item>
+        {breads}
+      </Breadcrumb>
+    </div>
+  )
+}
+
+Bread.propTypes = {
+  location: PropTypes.object
+}
+
+export default Bread

src/themes/react/static/js/components/layout/common.less

@@ -0,0 +1,102 @@
+body {
+  height: 100%;
+  overflow-y: hidden;
+  background-color: #f8f8f8;
+}
+// scrollbar
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 2px;
+  background-color: rgba(0,0,0,.2);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+}
+
+::-webkit-scrollbar-track {
+  width: 5px;
+}
+
+::-webkit-scrollbar:hover {
+  background-color: transparent;
+}
+
+:global .ant-breadcrumb {
+  & > span {
+    &:last-child {
+      color: #999;
+      font-weight: normal;
+    }
+  }
+}
+
+:global .ant-breadcrumb-link {
+  .anticon + span {
+    margin-left: 4px;
+  }
+}
+
+:global .ant-table {
+  .ant-table-thead > tr > th {
+    text-align: center;
+  }
+
+  .ant-table-tbody > tr > td {
+    text-align: center;
+  }
+
+  &.ant-table-small {
+    .ant-table-thead > tr > th {
+      background: #f7f7f7;
+    }
+
+    .ant-table-body > table {
+      padding: 0;
+    }
+  }
+}
+
+:global .ant-table-pagination {
+  float: none!important;
+  display: table;
+  margin: 16px auto !important;
+}
+
+:global .ant-popover-inner {
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
+}
+
+:global .vertical-center-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .ant-modal {
+    top: 0;
+
+    .ant-modal-body {
+      max-height: 500px;
+      overflow-y: auto;
+    }
+  }
+}
+
+:global .ant-form-item-control {
+  vertical-align: middle;
+}
+@import "../skin.less";

src/themes/react/static/js/components/layout/footer.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import styles from './main.less'
+import { config } from '../../utils'
+
+const Footer = () => <div className={styles.footer}>
+  {config.footerText}
+</div>
+
+export default Footer

src/themes/react/static/js/components/layout/header.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Menu, Icon, Popover } from 'antd'
+import styles from './main.less'
+import Menus from './menu'
+
+const SubMenu = Menu.SubMenu
+
+function Header ({user, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover}) {
+  const menusProps = {
+    siderFold: false,
+    darkTheme: false,
+    isNavbar,
+    handleClickNavMenu: switchMenuPopover,
+    location
+  }
+  return (
+    <div className={styles.header}>
+      {isNavbar
+        ? <Popover placement='bottomLeft' onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger='click' content={<Menus {...menusProps} />}>
+          <div className={styles.siderbutton}>
+            <Icon type='bars' />
+          </div>
+        </Popover>
+        : <div className={styles.siderbutton} onClick={switchSider}>
+          <Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} />
+        </div>}
+
+      <Menu className='header-menu' mode='horizontal'>
+        <SubMenu style={{
+          float: 'right'
+        }} title={user.name}>
+        </SubMenu>
+      </Menu>
+    </div>
+  )
+}
+
+export default Header