Skip to content

Commit

Permalink
OHFJIRA-51 added nodes management
Browse files Browse the repository at this point in the history
  • Loading branch information
bionaut committed May 14, 2017
1 parent 41e89e2 commit 9cb6ce6
Show file tree
Hide file tree
Showing 24 changed files with 539 additions and 22 deletions.
3 changes: 2 additions & 1 deletion admin-console/mock-server/index.js
Expand Up @@ -13,7 +13,8 @@ const sources = [
require('./config/logging.mock'),
require('./changes/changes.mock'),
require('./config/environment.mock'),
require('./errors/errorsOverview.mock')
require('./errors/errorsOverview.mock'),
require('./nodes/nodes.mock')
]

runServer(sources, opt_serverConfig)
56 changes: 56 additions & 0 deletions admin-console/mock-server/nodes/nodes.mock.js
@@ -0,0 +1,56 @@
module.exports = [
{
request: {
method: 'GET',
path: '/api/cluster/nodes'
},
response: {
statusCode: 200,
body: JSON.stringify(
{
'data': [
{
'code': 'primary',
'name': 'Prague',
'description': 'Detail of node',
'state': 'RUN',
'id': 12
},
{
'code': 'secondary',
'name': 'London',
'description': 'Lorem ipsum',
'state': 'STOPPED',
'id': 121
},
{
'code': 'backup',
'name': 'Frankfurt',
'description': 'Lorem ipsum',
'state': 'HANDLES_EXISTING_MESSAGES',
'id': 111
}
]
}
)
}
},
{
request: {
method: 'PUT',
path : '/api/cluster/nodes/:id'
},
response: {
statusCode: 200
}
},
{
request: {
method: 'DELETE',
path : '/api/cluster/nodes/:id'
},
response: {
statusCode: 200
}
}
]
3 changes: 2 additions & 1 deletion admin-console/package.json
Expand Up @@ -118,10 +118,11 @@
"react-animations": "^0.1.0",
"react-dom": "^15.0.0",
"react-icons": "^2.2.1",
"react-json-view": "^1.6.0",
"react-json-view": "^1.7.4",
"react-markdown": "^2.5.0",
"react-modal": "^1.6.5",
"react-redux": "^4.4.5",
"react-redux-toastr": "^6.2.6",
"react-router": "^3.0.0",
"recharts": "^0.20.8",
"redux": "^3.6.0",
Expand Down
6 changes: 4 additions & 2 deletions admin-console/src/common/components/Button/Button.js
Expand Up @@ -6,10 +6,11 @@ import styles from './button.styles'
class Button extends Component {

render () {
const { style, children, ...other } = this.props
const { style, fullWidth, children, ...other } = this.props
const computedStyles = [
styles,
style
style,
fullWidth && { width: '100%' }
]

return (
Expand All @@ -23,6 +24,7 @@ class Button extends Component {

Button.propTypes = {
children: PropTypes.node,
fullWidth: PropTypes.bool,
style: PropTypes.object
}

Expand Down
5 changes: 5 additions & 0 deletions admin-console/src/common/components/Sidebar/Sidebar.js
Expand Up @@ -7,6 +7,7 @@ import MdVertDots from 'react-icons/lib/md/more-vert'
import MdMergeType from 'react-icons/lib/md/merge-type'
import MdAnnouncement from 'react-icons/lib/md/announcement'
import MdInsertInvitation from 'react-icons/lib/md/insert-invitation'
import MdDeviceHub from 'react-icons/lib/md/device-hub'

@Radium
class Sidebar extends Component {
Expand Down Expand Up @@ -49,6 +50,10 @@ class Sidebar extends Component {
icon={<MdAnnouncement />}
style={styles.item}
label='Errors Overview' />
<Item link={'/nodes'}
icon={<MdDeviceHub />}
style={styles.item}
label='Nodes' />
</div>
)
}
Expand Down
10 changes: 10 additions & 0 deletions admin-console/src/common/containers/app.container.js
@@ -1,5 +1,6 @@
import React, { Component, PropTypes } from 'react'
import { Router, hashHistory } from 'react-router'
import ReduxToastr from 'react-redux-toastr'
import { Provider } from 'react-redux'

class AppContainer extends Component {
Expand All @@ -18,6 +19,15 @@ class AppContainer extends Component {
return (
<Provider store={store}>
<div style={{ height: '100%' }}>
<ReduxToastr
timeOut={4000}
newestOnTop={false}
preventDuplicates
position='top-right'
transitionIn='fadeIn'
transitionOut='fadeOut'
progressBar
/>
<Router history={hashHistory} children={routes} />
</div>
</Provider>
Expand Down
1 change: 1 addition & 0 deletions admin-console/src/index.html
Expand Up @@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
<link href="http://diegoddox.github.io/react-redux-toastr/5.0/react-redux-toastr.min.css" rel="stylesheet" type="text/css">

</head>
<body style="font-family: 'Roboto', sans-serif; position: absolute; margin: 0; padding: 0; height: 100%; width: 100%">
Expand Down
2 changes: 1 addition & 1 deletion admin-console/src/routes/Changes/modules/changes.module.js
Expand Up @@ -4,7 +4,7 @@ import axios from 'axios'
// Constants
// ------------------------------------
const GET_CHANGES_SUCCESS = 'GET_CHANGES_SUCCESS'
const GET_CHANGES_ERROR = 'GET_CHANGES_SUCCESS'
const GET_CHANGES_ERROR = 'GET_CHANGES_ERROR'

// ------------------------------------
// Actions
Expand Down
Expand Up @@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react'
import Radium from 'radium'
import { pipe, omit, values, map, append, addIndex, toString } from 'ramda'
import styles from './paramRow.styles.js'
import Button from '../../../../common/components/Button/Button'

@Radium
class ParamRow extends Component {
Expand All @@ -18,7 +19,10 @@ class ParamRow extends Component {
values,
map((value) => typeof value !== 'string' ? toString(value) : value),
addIndex(map)((cell, index) => <td style={styles.cell} key={index}>{cell}</td>),
append(<td style={styles.button} key={id} onClick={() => openParam(id)}>edit</td>)
append(
<td key={id}>
<Button style={styles.button} fullWidth onClick={() => openParam(id)} >Edit</Button>
</td>)
)(data)

return (
Expand All @@ -30,9 +34,9 @@ class ParamRow extends Component {
}

ParamRow.propTypes = {
data: PropTypes.object,
data : PropTypes.object,
openParam: PropTypes.func,
count: PropTypes.number
count : PropTypes.number
}

export default ParamRow
@@ -1,5 +1,4 @@
import tc from 'tinycolor2'
import { primaryColor, lightColor, positiveColor } from '../../../../styles/colors'
import { primaryColor, lightColor } from '../../../../styles/colors'

export default {
even: {
Expand All @@ -16,14 +15,7 @@ export default {
paddingRight: 10
},
button: {
backgroundColor: positiveColor,
fontSize: '0.7em',
paddingLeft: 10,
paddingRight: 10,
textAlign: 'center',
cursor: 'pointer',
':hover': {
backgroundColor: tc(positiveColor).lighten(10)
}
backgroundColor: 'transparent'
}
}
Expand Up @@ -40,6 +40,7 @@ export const updateParam = (code, payload) => {
dispatch({ type: UPDATE_PARAM_INIT })
axios.put(`/web/admin/config-params/${code}`, payload)
.then(() => {
dispatch(getConfigParams())
dispatch({ type: UPDATE_PARAM_SUCCESS })
})
.catch(() => {
Expand Down
@@ -1,7 +1,7 @@
import React, { PropTypes, Component } from 'react'
import Radium from 'radium'
import styles from './environmentProperties.styles.js'
import ReactJson from 'react-json-view'
import styles from './environmentProperties.styles.js'
import Panel from '../../../common/components/Panel/Panel'

@Radium
Expand Down
Expand Up @@ -12,6 +12,9 @@ class ErrorsOverview extends Component {

render () {
const { errorsData } = this.props

if (!errorsData) return <div>Loading...</div>

return (
<div style={styles.main}>
{ errorsData && errorsData.map(({ name, codes }) =>
Expand All @@ -24,7 +27,7 @@ class ErrorsOverview extends Component {
<th style={styles.header}>Recommended action</th>
</tr>
{ codes.map(({ code, desc, action }, index) => (
<tr style={index % 2 === 0 ? styles.even : styles.odd}>
<tr key={code} style={index % 2 === 0 ? styles.even : styles.odd}>
<td style={styles.cell}>{code}</td>
<td style={styles.cell}>{desc}</td>
<td style={styles.cell}>{action}</td>
Expand Down
91 changes: 91 additions & 0 deletions admin-console/src/routes/Nodes/components/NodeModal/NodeModal.js
@@ -0,0 +1,91 @@
import React, { Component, PropTypes } from 'react'
import Radium from 'radium'
import Modal from 'react-modal'
import { ValidForm, Field, ValidStyles } from 'valid-react-form'
import ModalHeader from '../../../../common/components/ModalHeader/ModalHeader'
import styles from './nodeModal.styles'
import Button from '../../../../common/components/Button/Button'
import Anchor from '../../../../common/components/Anchor/Anchor'

@Radium
class NodeModal extends Component {
constructor (props) {
super(props)
this.state = {
state: this.props.data.state
}
}

changeState (state) {
this.setState(() => ({
state
}))
}

render () {
const { isOpen, updateNode, close, data } = this.props
const { state } = this.state
return (
<Modal contentLabel='params' style={styles.main} isOpen={isOpen}>
<ModalHeader onClose={close} title={'Cluster Node Update'} />
{isOpen && data &&
<div style={styles.content}>
<ValidStyles>
<ValidForm extended={this.state} autoComplete='off' onSubmit={(payload) => updateNode(data.id, payload)}>
<div style={styles.row}>
<div style={styles.label}>Name</div>
<Field required name='name' value={data.name} />
</div>
<div style={styles.row}>
<div style={styles.label}>Description</div>
<Field name='description' value={data.description} />
</div>
<div style={styles.row}>
<div style={styles.label}>State</div>
<div style={styles.state} onChange={(event) => this.changeState(event.target.value)}>
Run
<input
defaultChecked={state === 'RUN'}
style={styles.radio}
value='RUN'
type='radio'
name='state'
/> <br />
Handle existing messages
<input
defaultChecked={state === 'HANDLES_EXISTING_MESSAGES'}
style={styles.radio}
type='radio'
value='HANDLES_EXISTING_MESSAGES'
name='state'
/><br />
Stopped
<input
defaultChecked={state === 'STOPPED'}
style={styles.radio}
value='STOPPED'
type='radio'
name='state'
/>
</div>
</div>
<div style={[styles.row, styles.controls]}>
<Anchor style={styles.controls.cancel} onClick={close}>Cancel</Anchor>
<Button style={styles.controls.submit}>{'Update'}</Button>
</div>
</ValidForm>
</ValidStyles>
</div>}
</Modal>
)
}
}

NodeModal.propTypes = {
isOpen : PropTypes.bool,
data : PropTypes.object,
close : PropTypes.func,
updateNode: PropTypes.func
}

export default NodeModal

0 comments on commit 9cb6ce6

Please sign in to comment.