Add create cluster support in react theme

Related to #CE-9

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

src/resources/cluster_api.py

@@ -254,22 +254,29 @@ def cluster_delete():
     :return: response obj
     """
     logger.info("/cluster action=" + r.method)
+    request_data = r.get_json(force=True, silent=True)
+    if r.form:
+        cluster_id = r.form["id"]
+        col_name = r.form["col_name"]
+    else:
+        cluster_id = request_data.get("id")
+        col_name = request_data.get("col_name")
     request_debug(r, logger)
-    if not r.form["id"] or not r.form["col_name"]:
+    if not cluster_id or not col_name:
         error_msg = "cluster operation post without enough data"
         logger.warning(error_msg)
         return make_fail_response(error=error_msg, data=r.form)
     else:
         logger.debug("cluster delete with id={0}, col_name={1}".format(
-            r.form["id"], r.form["col_name"]))
-        if r.form["col_name"] == "active":
-            result = cluster_handler.delete(id=r.form["id"])
+            cluster_id, col_name))
+        if col_name == "active":
+            result = cluster_handler.delete(id=cluster_id)
         else:
-            result = cluster_handler.delete_released(id=r.form["id"])
+            result = cluster_handler.delete_released(id=cluster_id)
         if result:
             return make_ok_response()
         else:
-            error_msg = "Failed to delete cluster {}".format(r.form["id"])
+            error_msg = "Failed to delete cluster {}".format(cluster_id)
             logger.warning(error_msg)
             return make_fail_response(error=error_msg)
 

src/themes/react/static/js/models/cluster.js

@@ -0,0 +1,84 @@
+/**
+ * Created by yuehaitao on 2017/4/4.
+ */
+import {message} from 'antd'
+import {list, create, deleteCluster} from '../services/cluster'
+
+export default {
+    namespace: 'cluster',
+    state: {
+        loading: false,
+        activeClusters: [],
+        inuseClusters: [],
+        clusters: [],
+        modalVisible: false
+    },
+    subscriptions: {
+        setup ({ dispatch, history }) {
+            history.listen(location => {
+                if (location.pathname === '/chains/active') {
+                    dispatch({
+                        type: 'list'
+                    })
+                }
+            })
+        },
+    },
+    effects: {
+        *list({payload}, {call, put}) {
+            yield put({type: 'showLoading'})
+            const data = yield call(list, payload)
+            if (data && data.status === "OK") {
+                yield put({
+                    type: 'setClusters',
+                    payload: {
+                        clusters: data.data
+                    }
+                })
+            }
+            yield put({type: 'hideLoading'})
+        },
+        *create({payload}, {call, put}) {
+            const data = yield call(create, payload)
+            if (data && data.status === "OK") {
+                yield put({
+                    type: 'hideModal'
+                })
+                message.success("create chain success")
+                yield put({
+                    type: 'list'
+                })
+            } else {
+                message.error('create chain failed')
+            }
+        },
+        *deleteCluster({payload}, {call, put}) {
+        	const data = yield call(deleteCluster, payload)
+            if (data && data.status === "OK") {
+                message.success("Delete cluster successful")
+                yield put({
+                    type: 'list'
+                })
+            } else {
+                message.error("Delete cluster failed")
+            }
+        },
+    },
+    reducers: {
+        showLoading(state) {
+            return {...state, loading: true}
+        },
+        hideLoading(state) {
+            return {...state, loading: false}
+        },
+        setClusters(state, action) {
+            return {...state, ...action.payload}
+        },
+        showModal(state) {
+            return {...state, modalVisible: true}
+        },
+        hideModal(state) {
+            return {...state, modalVisible: false}
+        }
+    }
+}

src/themes/react/static/js/models/host.js

@@ -16,7 +16,7 @@ export default {
     subscriptions: {
         setup({dispatch, history}) {
             history.listen(location => {
-                if (location.pathname === '/hosts') {
+                if (location.pathname === '/hosts' || location.pathname === '/chains/active') {
                     dispatch({type: 'getHosts'})
                 }
             })

src/themes/react/static/js/router.js

@@ -42,6 +42,17 @@ const Routers = function ({ history, app }) {
                   }, 'hosts')
               }
           },
+          {
+              path: 'chains/active',
+              name: 'chains/active',
+              getComponent (nextState, cb) {
+                  require.ensure([], require => {
+                      registerModel(app, require('./models/cluster'))
+                      registerModel(app, require('./models/host'))
+                      cb(null, require('./routes/cluster/active'))
+                  }, 'chains-active')
+              }
+          },
         {
           path: '*',
           name: 'error',

src/themes/react/static/js/routes/cluster/active/ClusterList.js

@@ -0,0 +1,128 @@
+/**
+ * Created by yuehaitao on 2017/2/7.
+ */
+import React, { PropTypes } from 'react'
+import { Badge, Tag, Button, Modal, Table, Popconfirm, Pagination } from 'antd'
+import styles from './ClusterList.less'
+import { DropOption } from '../../../components'
+
+const confirm = Modal.confirm
+
+function list({loadingList, dataSource, onDelete, onEdit, onOperation}) {
+    const handleMenuClick = (record, e, index) => {
+        if (e.key === 'edit') {
+            onEdit(record)
+        } else if (e.key === 'delete') {
+            confirm({
+                title: 'Confirm to delete?',
+                onOk () {
+                    onDelete(record, index)
+                },
+            })
+        } else {
+            if (e.key === 'reset') {
+                confirm({
+                    title: 'Want to reset?',
+                    content: <div><p>you are about to <span style={{color: 'red'}}>reset</span> the host node1, this procedure is irreversible.</p></div>,
+                    okText: 'Confirm',
+                    cancelText: 'Cancel',
+                    onOk () {
+                        onOperation(record, e.key)
+                    },
+                })
+            } else {
+                onOperation(record, e.key)
+            }
+        }
+    }
+    const loadingText = ["operating"]
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name'
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            key: 'status',
+            render: (text) => {
+                let status = "success"
+                if (loadingText.indexOf(text) >= 0) {
+                    status = "processing"
+                } else if (text !== "running") {
+                    status = "warning"
+                }
+                return (
+                    <span className={styles.title}><Badge status={status} text={text} /></span>
+                )
+            }
+        },
+        {
+            title: 'Type',
+            dataIndex: 'consensus_plugin',
+            key: 'consensus_plugin',
+            render: (text) => (
+                <span className={styles.title}>{text}</span>
+            )
+        },
+        {
+            title: 'Health',
+            dataIndex: 'health',
+            key: 'health'
+        },
+        {
+            title: 'Size',
+            dataIndex: 'size',
+            key: 'size'
+        },
+        {
+            title: 'Host',
+            dataIndex: 'host_id',
+            key: 'host_id'
+        },
+        {
+            title: 'Operation',
+            key: 'operation',
+            width: 100,
+            render: (text, record, index) => {
+                const menuOptions = [
+                    {key: 'edit', name: 'Edit'},
+                    {key: 'delete', name: 'Delete'},
+                    {key: 'fillup', name: 'Fill Up'},
+                    {key: 'clean', name: 'Clean'},
+                    {key: 'reset', name: 'Reset'}
+                ]
+                return <DropOption onMenuClick={e => handleMenuClick(record, e, index)} menuOptions={menuOptions} />
+            }
+        }
+    ]
+
+    return (
+        <div>
+            <Table
+                className={styles.table}
+                columns={columns}
+                dataSource={dataSource}
+                loading={loadingList}
+                locale={{
+                    emptyText: 'No data'
+                }}
+                size="small"
+                rowKey={record => record.id}
+            />
+        </div>
+    )
+}
+
+list.propTypes = {
+    loadingList: PropTypes.any,
+    dataSource: PropTypes.array,
+    pagination: PropTypes.any,
+    onPageChange: PropTypes.func,
+    onDeleteItem: PropTypes.func,
+    onSelectItem: PropTypes.func,
+    onSelectTagItem: PropTypes.func
+}
+
+export default list

src/themes/react/static/js/routes/cluster/active/ClusterList.less

@@ -0,0 +1,97 @@
+.table {
+  td.avatar {
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  :global {
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      height: 62px;
+    }
+  }
+
+  &.motion {
+    :global {
+      .ant-table-tbody > tr > td,
+      .ant-table-thead > tr > th {
+        &:nth-child(1) {
+          width: 6%;
+        }
+
+        &:nth-child(2) {
+          width: 8%;
+        }
+
+        &:nth-child(3) {
+          width: 8%;
+        }
+
+        &:nth-child(4) {
+          width: 6%;
+        }
+
+        &:nth-child(5) {
+          width: 6%;
+        }
+
+        &:nth-child(6) {
+          width: 8%;
+        }
+
+        &:nth-child(7) {
+          width: 16%;
+        }
+
+        &:nth-child(8) {
+          width: 20%;
+        }
+
+        &:nth-child(9) {
+          width: 14%;
+        }
+
+        &:nth-child(10) {
+          width: 8%;
+        }
+      }
+
+      .ant-table-thead {
+        & > tr {
+          transition: none;
+          display: block;
+
+          & > th {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+
+      .ant-table-tbody {
+        & > tr {
+          transition: none;
+          display: block;
+          border-bottom: 1px solid #f5f5f5;
+
+          & > td {
+            border-bottom: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          &.ant-table-expanded-row-level-1 > td {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+.title {
+  text-transform: capitalize;
+}