[CE-207] Add chain view page in user dashboard

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

user-dashboard/Makefile

@@ -1,5 +1,5 @@
 build-js:
-	docker-compose -f docker-compose-files/docker-compose-build-js.yml up
+	docker-compose -f docker-compose-files/docker-compose-build-js.yaml up
 
 npm-install:
-	docker-compose -f docker-compose-files/docker-compose-npm-install.yml up
+	docker-compose -f docker-compose-files/docker-compose-npm-install.yaml up

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

@@ -18,5 +18,7 @@ services:
     volumes:  # This should be removed in product env
       - $ROOT_PATH/user-dashboard/js:/app
       - $ROOT_PATH/user-dashboard:/usr/app/src
-    command: bash -c "cd /app && npm run build && cd /app/home && npm run build &&
+    command: bash -c "cd /app && npm run build &&
+              cd /app/home && npm run build &&
+              cd /app/dashboard && npm run build &&
               cd /usr/app/src && npm run build"

user-dashboard/docker-compose-files/docker-compose-npm-install.yaml

@@ -0,0 +1,17 @@
+version: "2"
+
+# Copyright IBM Corp., All Rights Reserved.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+services:
+  install-npm:
+    image: node
+    volumes:
+      - $ROOT_PATH/user-dashboard/js:/reactjs
+    environment:
+      - NPM_REGISTRY=$NPM_REGISTRY
+    command: bash -c "npm config set registry '$NPM_REGISTRY' &&
+                cd /reactjs && npm install &&
+                cd /reactjs/home && npm install &&
+                cd /reactjs/dashboard && npm install"

user-dashboard/js/dashboard/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

user-dashboard/js/dashboard/.eslintignore

@@ -0,0 +1,2 @@
+src/**/*-test.js
+src/public

user-dashboard/js/dashboard/.eslintrc

@@ -0,0 +1,53 @@
+{
+  "extends": "airbnb",
+  "rules": {
+    "semi": [2, "never"],
+    "no-console": 0,
+    "comma-dangle": [2, "always-multiline"],
+    "max-len": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-filename-extension": 0,
+    "space-before-function-paren": [2, "always"],
+    "no-unused-expressions": [0, {
+      "allowShortCircuit": true,
+      "allowTernary": true
+    }],
+    "arrow-body-style": [0, "never"],
+    "func-names": 0,
+    "prefer-const": 0,
+    "no-extend-native": 0,
+    "no-param-reassign": 0,
+    "no-restricted-syntax": 0,
+    "no-eval": 0,
+    "no-continue": 0,
+    "react/jsx-no-bind": 0,
+    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
+    "no-underscore-dangle": 0,
+    "global-require": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0,
+    "jsx-a11y/href-no-hash": 0,
+    "react/no-array-index-key": 0,
+    "react/require-default-props": 0,
+    "react/forbid-prop-types": 0,
+    "react/no-string-refs": 0,
+    "react/no-find-dom-node": 0,
+    "react/prefer-stateless-function": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 0,
+    "react/no-danger": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 8,
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "settings": {
+    "import/resolver": "node"
+    }
+}

user-dashboard/js/dashboard/.roadhogrc

@@ -0,0 +1,26 @@
+{
+  "entry": ["src/index.js", "src/locales/en-US.js", "src/locales/zh-CN.js"],
+  "publicPath": "/static/js/dist/dashboard/",
+  "outputPath": "/usr/app/src/src/public/js/dist/dashboard",
+  "extraBabelPlugins": [
+    "transform-runtime",
+    "transform-decorators-legacy",
+    "transform-class-properties",
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
+  ],
+  "env": {
+    "development": {
+      "extraBabelPlugins": [
+        "dva-hmr"
+      ]
+    }
+  },
+  "externals": {
+    "react": "React",
+    "g2": "G2",
+    "g-cloud": "Cloud",
+    "g2-plugin-slider": "G2.Plugin.slider"
+  },
+  "ignoreMomentLocale": true,
+  "theme": "./src/theme.js"
+}

user-dashboard/js/dashboard/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "user-dashboard",
+  "version": "1.0.0",
+  "description": "Cello baas user dashboard",
+  "private": true,
+  "scripts": {
+    "precommit": "npm run lint-staged",
+    "start": "roadhog server",
+    "start:no-proxy": "NO_PROXY=true roadhog server",
+    "build": "roadhog build",
+    "site": "roadhog-api-doc static",
+    "analyze": "roadhog build --analyze",
+    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
+    "lint": "eslint --ext .js src mock tests && npm run lint:style",
+    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
+    "lint-staged": "lint-staged",
+    "lint-staged:js": "eslint --ext .js",
+    "test": "jest",
+    "test:all": "node ./tests/run-tests.js"
+  },
+  "dependencies": {
+    "antd": "^3.0.0",
+    "classnames": "^2.2.5",
+    "core-js": "^2.5.1",
+    "dva": "^2.0.3",
+    "g-cloud": "^1.0.2-beta",
+    "g2": "^2.3.13",
+    "g2-plugin-slider": "^1.2.1",
+    "lodash": "^4.17.4",
+    "lodash-decorators": "^4.4.1",
+    "lodash.clonedeep": "^4.5.0",
+    "moment": "^2.19.1",
+    "numeral": "^2.0.6",
+    "prop-types": "^15.5.10",
+    "js-cookie": "^2.1.3",
+    "qs": "^6.5.0",
+    "react": "^16.0.0",
+    "react-document-title": "^2.0.3",
+    "react-intl": "^2.4.0",
+    "string-format": "^0.5.0",
+    "validator": "^9.1.1",
+    "react-dom": "^16.0.0",
+    "socket.io-client": "^2.0.4",
+    "localStorage": "^1.0.3",
+    "react-fittext": "^1.0.0"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.0.1",
+    "babel-jest": "^21.0.0",
+    "babel-plugin-dva-hmr": "^0.3.2",
+    "babel-plugin-import": "^1.2.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-runtime": "^6.9.2",
+    "cross-port-killer": "^1.0.1",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.2",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb": "^16.0.0",
+    "eslint-plugin-babel": "^4.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^6.0.0",
+    "eslint-plugin-markdown": "^1.0.0-beta.6",
+    "eslint-plugin-react": "^7.0.1",
+    "gh-pages": "^1.0.0",
+    "husky": "^0.14.3",
+    "jest": "^21.0.1",
+    "lint-staged": "^4.3.0",
+    "mockjs": "^1.0.1-beta3",
+    "react-container-query": "^0.9.1",
+    "react-test-renderer": "^16.0.0",
+    "redbox-react": "^1.3.2",
+    "roadhog": "^1.3.1",
+    "roadhog-api-doc": "^0.2.0",
+    "stylelint": "^8.1.0",
+    "stylelint-config-standard": "^17.0.0"
+  },
+  "optionalDependencies": {
+    "nightmare": "^2.10.0"
+  },
+  "babel": {
+    "presets": [
+      "env",
+      "react"
+    ],
+    "plugins": [
+      "transform-decorators-legacy",
+      "transform-class-properties"
+    ]
+  },
+  "jest": {
+    "setupFiles": [
+      "<rootDir>/tests/setupTests.js"
+    ],
+    "testMatch": [
+      "**/?(*.)(spec|test|e2e).js?(x)"
+    ],
+    "setupTestFrameworkScriptFile": "<rootDir>/tests/jasmine.js",
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less)$": "<rootDir>/tests/styleMock.js"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx}": "lint-staged:js",
+    "**/*.less": "stylelint --syntax less"
+  }
+}

user-dashboard/js/dashboard/src/common/nav.js

@@ -0,0 +1,33 @@
+import BasicLayout from '../layouts/BasicLayout';
+
+import Chain from '../routes/Chain'
+import NewChain from '../routes/Chain/New'
+
+const data = [
+  {
+    component: BasicLayout,
+    layout: 'BasicLayout',
+    name: 'Home', // for breadcrumb
+    path: '',
+    children: [
+      {
+        name: 'Chain',
+        messageId: "Chain",
+        icon: 'link',
+        path: 'chain',
+        component: Chain,
+      },
+      {
+        messageId: "ChainNew",
+        path: 'chain/new',
+        component: NewChain
+      }
+    ],
+  }
+];
+
+export function getNavData() {
+  return data;
+}
+
+export default data;

user-dashboard/js/dashboard/src/components/Charts/ChartCard/index.js

@@ -0,0 +1,47 @@
+/*
+ SPDX-License-Identifier: Apache-2.0
+*/
+import React from 'react';
+import { Card, Spin } from 'antd';
+
+import styles from './index.less';
+
+const ChartCard = ({
+  loading = false, contentHeight, title, action, total, footer, children, ...rest
+}) => {
+  const content = (
+    <div className={styles.chartCard}>
+      <div className={styles.meta}>
+        <span className={styles.title}>{title}</span>
+        <span className={styles.action}>{action}</span>
+      </div>
+      {
+        // eslint-disable-next-line
+        total && <p className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />
+      }
+      <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
+        <div className={contentHeight && styles.contentFixed}>
+          {children}
+        </div>
+      </div>
+      {
+        footer && (
+          <div className={styles.footer}>
+            {footer}
+          </div>
+        )
+      }
+    </div>
+  );
+
+  return (
+    <Card
+      bodyStyle={{ padding: '20px 24px 8px 24px' }}
+      {...rest}
+    >
+      {<Spin spinning={loading}>{content}</Spin>}
+    </Card>
+  );
+};
+
+export default ChartCard;