-
Notifications
You must be signed in to change notification settings - Fork 445
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add create cluster support in react theme
Related to #CE-9 Change-Id: I8e068bda9902629b93d38d557f23277b6ae8e661 Signed-off-by: Haitao Yue <hightall@me.com>
- Loading branch information
Showing
10 changed files
with
592 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
128 changes: 128 additions & 0 deletions
128
src/themes/react/static/js/routes/cluster/active/ClusterList.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
97 changes: 97 additions & 0 deletions
97
src/themes/react/static/js/routes/cluster/active/ClusterList.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Oops, something went wrong.