first commit

.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

.eslintignore

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

.eslintrc

@@ -0,0 +1,32 @@
+{
+  "extends": "airbnb",
+  "rules": {
+    "semi": [2, "never"],
+    "no-console": 0,
+    "comma-dangle": [2, "always-multiline"],
+    "max-len": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "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,
+    "react/jsx-no-bind": 0,
+    "no-unused-vars": [2, { "ignoreRestSiblings": true }],
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 8,
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+yarn.lock
+npm-debug.log

mock/dashboard.js

@@ -0,0 +1,31 @@
+import { color } from '../src/utils/theme'
+
+module.exports = {
+  'GET /v1/dashboard'(req, res) {
+    res.json({
+      numbers: [
+        {
+          icon: 'laptop',
+          color: color.green,
+          title: 'Hosts',
+          number: 5,
+        }, {
+          icon: 'hdd',
+          color: color.blue,
+          title: 'Disks',
+          number: 25,
+        }, {
+          icon: 'database',
+          color: color.purple,
+          title: 'Volumes',
+          number: 114,
+        }, {
+          icon: 'camera-o',
+          color: color.red,
+          title: 'Snapshots',
+          number: 46,
+        },
+      ],
+    })
+  },
+}

mock/volume.js

@@ -0,0 +1,110 @@
+module.exports = {
+  'GET /v1/volumes'(req, res) {
+    res.json({
+      type: 'collection',
+      resourceType: 'volume',
+      links: {
+        self: '…/v1/volumes',
+      },
+      actions: {},
+      data: [
+        {
+          id: 'vol1',
+          type: 'volume',
+          links: {
+            self: '…/v1/volumes/vol1',
+            backups: '…/v1/volumes/vol1/backups',
+            snapshots: '…/v1/volumes/vol1/snapshots',
+            recurrings: '…/v1/volumes/vol1/recurrings',
+          },
+          actions: {
+            attach: '…/v1/volumes/vol1/?action=attach',
+            detach: '…/v1/volumes/vol1/?action=detach',
+          },
+          controller: {
+            id: '1i69',
+            hostId: '39e1f6b7-8ea7-4987-ba57-13e1fc89c815',
+            address: 'http://controller.volume-vol1.rancher.internal:9501',
+            running: true,
+          },
+          replicas: {
+            '5a0e1172-afb5-47fa': {
+              id: '1i82',
+              hostId: '39e1f6b7-8ea7-4987-ba57-13e1fc89c815',
+              address: 'tcp://replica-5a0e1172-afb5-47fa.rancher.internal:9502',
+              running: true,
+              mode: 'RW',
+              name: 'replica-5a0e1172-afb5-47fa',
+            },
+            '78373bce-8954-49cb': {
+              id: '1i81',
+              hostId: '6fc92a6d-695a-4ffc-b4a1-b07fd1dcfc7c',
+              address: 'tcp://replica-78373bce-8954-49cb.rancher.internal:9502',
+              running: true,
+              mode: 'ERR',
+              badTimestamp: '2017-02-28T02:43:19Z',
+              name: 'replica-78373bce-8954-49cb',
+            },
+          },
+          status: 'attached',
+          created: '2017-03-21T01:13:58Z',
+          hostId: '84e983d2-ee35-4460-81e9-8912728b2c96',
+          externalId: 'container-test',
+          frontEnd: '/dev/longhorn/vol1',
+          size: 429496729600,
+          used: 23580672,
+          numberOfReplicas: 2,
+          staleReplicaTimeout: 24,
+        },
+        {
+          id: 'vol2',
+          type: 'volume',
+          links: {
+            self: '…/v1/volumes/vol1',
+            backups: '…/v1/volumes/vol1/backups',
+            snapshots: '…/v1/volumes/vol1/snapshots',
+            recurrings: '…/v1/volumes/vol1/recurrings',
+          },
+          actions: {
+            attach: '…/v1/volumes/vol1/?action=attach',
+            detach: '…/v1/volumes/vol1/?action=detach',
+          },
+          controller: {
+            id: '1i69',
+            hostId: '39e1f6b7-8ea7-4987-ba57-13e1fc89c815',
+            address: 'http://controller.volume-vol1.rancher.internal:9501',
+            running: true,
+          },
+          replicas: {
+            '5a0e1172-afb5-47fa': {
+              id: '1i82',
+              hostId: '39e1f6b7-8ea7-4987-ba57-13e1fc89c815',
+              address: 'tcp://replica-5a0e1172-afb5-47fa.rancher.internal:9502',
+              running: true,
+              mode: 'RW',
+              name: 'replica-5a0e1172-afb5-47fa',
+            },
+            '78373bce-8954-49cb': {
+              id: '1i81',
+              hostId: '6fc92a6d-695a-4ffc-b4a1-b07fd1dcfc7c',
+              address: 'tcp://replica-78373bce-8954-49cb.rancher.internal:9502',
+              running: true,
+              mode: 'ERR',
+              badTimestamp: '2017-02-28T02:43:19Z',
+              name: 'replica-78373bce-8954-49cb',
+            },
+          },
+          status: 'attached',
+          created: '2017-03-21T01:13:58Z',
+          hostId: '84e983d2-ee35-4460-81e9-8912728b2c96',
+          externalId: 'container-test',
+          frontEnd: '/dev/longhorn/vol1',
+          size: 429496729600,
+          used: 23580672,
+          numberOfReplicas: 2,
+          staleReplicaTimeout: 24,
+        },
+      ],
+    })
+  },
+}

package.json

@@ -0,0 +1,68 @@
+{
+  "private": true,
+  "entry": {
+    "index": "./src/index.js"
+  },
+  "dependencies": {
+    "antd": "^2.7.3",
+    "classnames": "^2.2.5",
+    "d3-shape": "^1.0.6",
+    "draft-js": "^0.10.0",
+    "draftjs-to-markdown": "^0.4.0",
+    "dva": "^1.1.0",
+    "dva-loading": "^0.2.0",
+    "js-cookie": "^2.1.3",
+    "lodash": "^4.17.4",
+    "qs": "^6.2.0",
+    "react": "^15.4.1",
+    "react-countup": "1.3.0",
+    "react-dom": "^15.4.1",
+    "react-draft-wysiwyg": "^1.8.1",
+    "react-helmet": "^5.0.0",
+    "recharts": "^0.19.0"
+  },
+  "devDependencies": {
+    "atool-build": "^0.7.6",
+    "axios": "^0.15.3",
+    "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-polyfill": "^6.23.0",
+    "babel-runtime": "^6.9.2",
+    "dora": "^0.4.3",
+    "dora-plugin-browser-history": "^0.2.0",
+    "dora-plugin-proxy": "^0.8.5",
+    "dora-plugin-webpack": "^0.8.1",
+    "dora-plugin-webpack-hmr": "^0.2.1",
+    "draftjs-to-html": "^0.7.0",
+    "eslint": "^3.17.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.16.0",
+    "eslint-plugin-jsx-a11y": "^1.4.2",
+    "eslint-plugin-react": "^5.1.1",
+    "glob": "^7.0.5",
+    "mockjs": "^1.0.1-beta3",
+    "rc-tween-one": "^1.0.0",
+    "redbox-react": "^1.2.10",
+    "watchjs": "^0.0.0"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "scripts": {
+    "start": "dora --plugins \"proxy,webpack?publicPath=/,webpack-hmr,browser-history?index=/src/index.html\"",
+    "dev": "dora --plugins \"webpack?publicPath=/,webpack-hmr,browser-history?index=/src/index.html\"",
+    "lint": "eslint --fix --ext .js src",
+    "build": "atool-build"
+  },
+  "theme": "./src/theme.js",
+  "standard": {
+    "parser": "babel-eslint",
+    "globals": [
+      "location",
+      "localStorage"
+    ]
+  }
+}

proxy.config.js

@@ -0,0 +1,7 @@
+const mock = {}
+
+require('fs').readdirSync(require('path').join(`${__dirname}/mock`)).forEach((file) => {
+  Object.assign(mock, require(`./mock/${file}`))
+})
+
+module.exports = mock

src/_index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="stylesheet" href="index.css" />
+  <!--[if lte IE 10]>
+      <script
+        src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
+  <![endif]-->
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="index.js"></script>
+</body>
+
+</html>

src/_index.js

@@ -0,0 +1,13 @@
+import './_index.html'
+import 'babel-polyfill'
+import createLoading from 'dva-loading'
+import dva from 'dva'
+
+// 1. Initialize
+const app = dva(createLoading())
+
+// 3. Router
+app.router(require('./router'))
+
+// 4. Start
+app.start('#root')

src/components/Layout/Bread.js

@@ -0,0 +1,59 @@
+import React, { PropTypes } from 'react'
+import { Breadcrumb, Icon } from 'antd'
+import styles from './Bread.less'
+import { menu } from '../../utils'
+
+let pathSet = []
+const getPathSet = function (menuArray, parentPath) {
+  parentPath = parentPath || '/'
+  menuArray.forEach(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('/').forEach((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 = 'Dashboard'
+    }
+    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>
+        {breads}
+      </Breadcrumb>
+    </div>
+  )
+}
+
+Bread.propTypes = {
+  location: PropTypes.object,
+}
+
+export default Bread

src/components/Layout/Bread.less

@@ -0,0 +1,12 @@
+@import "../vars.less";
+
+.bread {
+  height: 64px;
+  line-height: 64px;
+  padding: 0 24px;
+  margin-bottom: -24px;
+
+  :global .ant-breadcrumb {
+    font-size: 20px;
+  }
+}