diff --git a/Makefile b/Makefile
index c4b02483..65d7a393 100644
--- a/Makefile
+++ b/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(.*)$$/ }; \
diff --git a/README.md b/README.md
index 1f090cf6..1c6e61fb 100644
--- a/README.md
+++ b/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
+ {pathSet[item].icon
+ ? {pathSet[item].name}
+
+ )
+ })
+
+ return (
+
+
+ Home
+
+
+ )
+}
+
+Bread.propTypes = {
+ location: PropTypes.object
+}
+
+export default Bread
diff --git a/src/themes/react/static/js/components/layout/common.less b/src/themes/react/static/js/components/layout/common.less
new file mode 100644
index 00000000..8c56a010
--- /dev/null
+++ b/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";
diff --git a/src/themes/react/static/js/components/layout/footer.js b/src/themes/react/static/js/components/layout/footer.js
new file mode 100644
index 00000000..5b7332e3
--- /dev/null
+++ b/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 = () =>
+ {config.footerText}
+
+
+export default Footer
diff --git a/src/themes/react/static/js/components/layout/header.js b/src/themes/react/static/js/components/layout/header.js
new file mode 100644
index 00000000..0c2c38b1
--- /dev/null
+++ b/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 (
+
+ {isNavbar
+ ?
}>
+
+
+
+ :
+
}
+
+
+
+
+
+
{item.icon ?
+ )
+ } else {
+ return (
+
+
+ )
+ }
+ })
+}
+
+function Menus ({ siderFold, darkTheme, location, isNavbar, handleClickNavMenu }) {
+ const menuItems = getMenus(menu, siderFold)
+ return (
+ item.key) : []}
+ defaultSelectedKeys={[location.pathname.split('/')[location.pathname.split('/').length - 1] || 'dashboard']}>
+ {menuItems}
+
+ )
+}
+
+export default Menus
diff --git a/src/themes/react/static/js/components/layout/sider.js b/src/themes/react/static/js/components/layout/sider.js
new file mode 100644
index 00000000..083cc37b
--- /dev/null
+++ b/src/themes/react/static/js/components/layout/sider.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Icon, Switch } from 'antd'
+import styles from './main.less'
+import { config } from '../../utils'
+import Menus from './menu'
+
+function Sider ({ siderFold, darkTheme, location, changeTheme }) {
+ const menusProps = {
+ siderFold,
+ darkTheme,
+ location
+ }
+ return (
+
+
+ {siderFold ? '' : {config.logoText} }
+
+
+ {!siderFold ?
+
: ''}
+
+
+ )
+}
+
+Users.propTypes = {
+ users: PropTypes.object,
+ location: PropTypes.object,
+ dispatch: PropTypes.func
+}
+
+function mapStateToProps ({ users }) {
+ return { users }
+}
+
+export default connect(mapStateToProps)(Users)
diff --git a/src/themes/react/static/js/theme.js b/src/themes/react/static/js/theme.js
new file mode 100644
index 00000000..82ec4559
--- /dev/null
+++ b/src/themes/react/static/js/theme.js
@@ -0,0 +1,13 @@
+module.exports = () => {
+ return {
+ '@border-radius-base': '3px',
+ '@border-radius-sm': '2px',
+ '@shadow-color': 'rgba(0,0,0,0.05)',
+ '@shadow-1-down': '4px 4px 40px @shadow-color',
+ '@border-color-split': '#f4f4f4',
+ '@border-color-base': '#e5e5e5',
+ '@menu-dark-bg': '#3e3e3e',
+ '@text-color': '#666',
+ '@font-family': 'monospace,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif'
+ }
+}
diff --git a/src/themes/react/static/js/utils/config.js b/src/themes/react/static/js/utils/config.js
new file mode 100644
index 00000000..4d33982a
--- /dev/null
+++ b/src/themes/react/static/js/utils/config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ name: 'Cello Dashboard',
+ prefix: 'cello',
+ footerText: 'Cello Dashboard',
+ logoText: 'Cello'
+}
diff --git a/src/themes/react/static/js/utils/index.js b/src/themes/react/static/js/utils/index.js
new file mode 100644
index 00000000..02406440
--- /dev/null
+++ b/src/themes/react/static/js/utils/index.js
@@ -0,0 +1,48 @@
+import config from './config'
+import menu from './menu'
+import request from './request'
+import classnames from 'classnames'
+import {color} from './theme'
+
+// 连字符转驼峰
+String.prototype.hyphenToHump = function () {
+ return this.replace(/-(\w)/g, function () {
+ return arguments[1].toUpperCase()
+ })
+}
+
+// 驼峰转连字符
+String.prototype.humpToHyphen = function () {
+ return this.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
+
+// 日期格式化
+Date.prototype.format = function (format) {
+ var o = {
+ 'M+': this.getMonth() + 1,
+ 'd+': this.getDate(),
+ 'h+': this.getHours(),
+ 'H+': this.getHours(),
+ 'm+': this.getMinutes(),
+ 's+': this.getSeconds(),
+ 'q+': Math.floor((this.getMonth() + 3) / 3),
+ 'S': this.getMilliseconds()
+ }
+ if (/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
+ for (var k in o) {
+ if (new RegExp('(' + k + ')').test(format)) {
+ format = format.replace(RegExp.$1, RegExp.$1.length === 1
+ ? o[k]
+ : ('00' + o[k]).substr(('' + o[k]).length))
+ }
+ }
+ return format
+}
+
+module.exports = {
+ config,
+ menu,
+ request,
+ color,
+ classnames
+}
diff --git a/src/themes/react/static/js/utils/menu.js b/src/themes/react/static/js/utils/menu.js
new file mode 100644
index 00000000..c3a9d371
--- /dev/null
+++ b/src/themes/react/static/js/utils/menu.js
@@ -0,0 +1,38 @@
+module.exports = [
+ {
+ key: 'overview',
+ name: 'Overview',
+ icon: 'laptop'
+ },
+ {
+ key: 'hosts',
+ name: 'Hosts',
+ icon: 'user'
+ },
+ {
+ key: 'chains',
+ name: 'Chains',
+ icon: 'camera-o',
+ clickable: false,
+ child: [
+ {
+ key: 'active',
+ name: 'Active Chains'
+ },
+ {
+ key: 'inused',
+ name: 'Inused Chains'
+ }
+ ]
+ },
+ {
+ key: 'release',
+ name: 'Release History',
+ icon: 'user'
+ },
+ {
+ key: 'about',
+ name: 'About',
+ icon: 'user'
+ }
+]
diff --git a/src/themes/react/static/js/utils/request.js b/src/themes/react/static/js/utils/request.js
new file mode 100644
index 00000000..279b9f75
--- /dev/null
+++ b/src/themes/react/static/js/utils/request.js
@@ -0,0 +1,27 @@
+const Ajax = require('robe-ajax')
+
+/**
+ * Requests a URL, returning a promise.
+ *
+ * @param {string} url The URL we want to request
+ * @param {object} [options] The options we want to pass to "fetch"
+ * @return {object} An object containing either "data" or "err"
+ */
+export default function request (url, options) {
+ if (options.cross) {
+ return Ajax.getJSON('http://query.yahooapis.com/v1/public/yql', {
+ q: "select * from json where url='" + url + '?' + Ajax.param(options.data) + "'",
+ format: 'json'
+ })
+ } else {
+ return Ajax.ajax({
+ url: url,
+ method: options.method || 'get',
+ data: options.data || {},
+ processData: options.method === 'get',
+ dataType: 'JSON'
+ }).done((data) => {
+ return data
+ })
+ }
+}
diff --git a/src/themes/react/static/js/utils/theme.js b/src/themes/react/static/js/utils/theme.js
new file mode 100644
index 00000000..85ed8b4f
--- /dev/null
+++ b/src/themes/react/static/js/utils/theme.js
@@ -0,0 +1,14 @@
+module.exports = {
+ color: {
+ green: '#64ea91',
+ blue: '#8fc9fb',
+ purple: '#d897eb',
+ red: '#f69899',
+ yellow: '#f8c82e',
+ peach: '#f797d6',
+ borderBase: '#e5e5e5',
+ borderSplit: '#f4f4f4',
+ grass: '#d6fbb5',
+ sky: '#c1e0fc'
+ }
+}
diff --git a/src/themes/react/static/package.json b/src/themes/react/static/package.json
new file mode 100644
index 00000000..9f9271a7
--- /dev/null
+++ b/src/themes/react/static/package.json
@@ -0,0 +1,56 @@
+{
+ "private": true,
+ "entry": {
+ "index": "./js/index.js"
+ },
+ "dependencies": {
+ "antd": "^2.6.0",
+ "classnames": "^2.2.5",
+ "dva": "^1.1.0",
+ "dva-loading": "^0.2.0",
+ "js-cookie": "^2.1.3",
+ "qs": "^6.2.0",
+ "react": "^15.4.1",
+ "react-countup": "^1.3.0",
+ "react-dom": "^15.4.1",
+ "recharts": "^0.19.0"
+ },
+ "devDependencies": {
+ "atool-build": "^0.7.6",
+ "babel-eslint": "^6.0.4",
+ "babel-plugin-dev-expression": "^0.2.1",
+ "babel-plugin-dva-hmr": "^0.1.0",
+ "babel-plugin-import": "^1.0.1",
+ "babel-plugin-transform-runtime": "^6.9.0",
+ "babel-runtime": "^6.9.2",
+ "dora": "0.3.x",
+ "dora-plugin-proxy": "^0.7.0",
+ "dora-plugin-webpack": "0.6.x",
+ "dora-plugin-webpack-hmr": "^0.1.0",
+ "eslint": "^2.13.1",
+ "eslint-config-airbnb": "^9.0.1",
+ "eslint-plugin-import": "^1.8.1",
+ "eslint-plugin-jsx-a11y": "^1.4.2",
+ "eslint-plugin-react": "^5.1.1",
+ "glob": "^7.0.5",
+ "mockjs": "^1.0.1-beta3",
+ "redbox-react": "^1.2.10",
+ "robe-ajax": "^1.0.0",
+ "watchjs": "^0.0.0"
+ },
+ "scripts": {
+ "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
+ "dev": "dora --plugins \"webpack,webpack-hmr\"",
+ "lint": "eslint --fix --ext .js,.jsx src/components/layout",
+ "build": "atool-build -o /app/js/dist --publicPath /static/js/dist/",
+ "watch-mode": "atool-build -w --no-compress -o /app/js/dist --publicPath /static/js/dist/"
+ },
+ "theme": "./js/theme.js",
+ "standard": {
+ "parser": "babel-eslint",
+ "globals": [
+ "location",
+ "localStorage"
+ ]
+ }
+}
diff --git a/src/themes/react/static/webpack.config.js b/src/themes/react/static/webpack.config.js
new file mode 100644
index 00000000..5b3521c5
--- /dev/null
+++ b/src/themes/react/static/webpack.config.js
@@ -0,0 +1,49 @@
+const webpack = require('atool-build/lib/webpack')
+
+module.exports = function (webpackConfig, env) {
+ webpackConfig.babel.plugins.push('transform-runtime')
+ webpackConfig.babel.plugins.push(['import', {
+ libraryName: 'antd',
+ style: true
+ }])
+
+ // Support hmr
+ if (env === 'development') {
+ webpackConfig.devtool = '#eval'
+ webpackConfig.babel.plugins.push(['dva-hmr', {
+ entries: [
+ './js/index.js'
+ ]
+ }])
+ } else {
+ webpackConfig.babel.plugins.push('dev-expression')
+ }
+
+ // Don't extract common.js and common.css
+ webpackConfig.plugins = webpackConfig.plugins.filter(function (plugin) {
+ return !(plugin instanceof webpack.optimize.CommonsChunkPlugin)
+ })
+
+ // Support CSS Modules
+ // Parse all less files as css module.
+ webpackConfig.module.loaders.forEach(function (loader, index) {
+ if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.less$') > -1) {
+ loader.include = /node_modules/
+ loader.test = /\.less$/
+ }
+ if (loader.test.toString() === '/\\.module\\.less$/') {
+ loader.exclude = /node_modules/
+ loader.test = /\.less$/
+ }
+ if (typeof loader.test === 'function' && loader.test.toString().indexOf('\\.css$') > -1) {
+ loader.include = /node_modules/
+ loader.test = /\.css$/
+ }
+ if (loader.test.toString() === '/\\.module\\.css$/') {
+ loader.exclude = /node_modules/
+ loader.test = /\.css$/
+ }
+ })
+
+ return webpackConfig
+}
diff --git a/src/themes/react/templates/index.html b/src/themes/react/templates/index.html
new file mode 100644
index 00000000..575af242
--- /dev/null
+++ b/src/themes/react/templates/index.html
@@ -0,0 +1,26 @@
+
+
+
+ Cello Dashboard
+ {% endblock %}
+
+
+
+
+
+
+
+
+
+