Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

turn create-monitor into a form

Browse Source
This commit is contained in:
Sérgio Ramos 2017-01-17 11:30:57 +00:00
parent 0fbe168764
commit baa00dfc27
9 changed files with 189 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -45,6 +45,7 @@
"redux": "^3.6.0",
"redux-actions": "^1.2.0",
"redux-batched-actions": "^0.1.5",
"redux-form": "^6.4.3",
"redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.1.0",

157
frontend/src/components/create-monitor/index.js
View File

@ -1,3 +1,4 @@
const ReduxForm = require('redux-form');
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
@ -9,6 +10,10 @@ const fns = require('@ui/shared/functions');
const Row = require('@ui/components/row');
const Select = require('@ui/components/select');
const {
Field
} = ReduxForm;
const {
FormattedMessage
} = ReactIntl;
@ -51,75 +56,85 @@ const PeopleInput = styled(Input)`
margin-bottom: ${remcalc(24)} !important;
`;
module.exports = () => {
return (
<div>
<H4>
<FormattedMessage id='monitors.conditions' />
</H4>
<P>
<FormattedMessage id='monitors.conditions-subtitle' />
</P>
<ConditionsRow around>
<TextColumn md={2} xs={12}>
<RightText>
<FormattedMessage id='monitors.if' />
</RightText>
</TextColumn>
<Column md={2} xs={12}>
<Select>
<option>
<FormattedMessage id='monitors.above' />
</option>
<option>
<FormattedMessage id='monitors.equal' />
</option>
<option>
<FormattedMessage id='monitors.below' />
</option>
</Select>
</Column>
<Column md={2} xs={12}>
<Input placeholder='value' />
</Column>
<Column md={2} xs={12}>
<Select>
<option>
<FormattedMessage id='monitors.average' />
</option>
</Select>
</Column>
<TextColumn md={1}xs={12}>
<Text>
<FormattedMessage id='monitors.during' />
</Text>
</TextColumn>
<Column md={3} xs={12}>
<Select>
<option>
<FormattedMessage id='monitors.last5' />
</option>
</Select>
</Column>
</ConditionsRow>
<H4>
<FormattedMessage id='monitors.notification' />
</H4>
<P>
<FormattedMessage id='monitors.notification-subtitle' />
</P>
<Row>
<Column xs={12}>
<PeopleInput />
</Column>
</Row>
<Row>
<Column xs={12}>
<Button>
<FormattedMessage id='monitors.submit' />
</Button>
</Column>
</Row>
</div>
);
const CreateMonitor = ({
handleSubmit,
pristine,
submitting
}) => (
<form onSubmit={handleSubmit}>
<H4>
<FormattedMessage id='monitors.conditions' />
</H4>
<P>
<FormattedMessage id='monitors.conditions-subtitle' />
</P>
<ConditionsRow around>
<TextColumn md={2} xs={12}>
<RightText>
<FormattedMessage id='monitors.if' />
</RightText>
</TextColumn>
<Column md={2} xs={12}>
<Field component={Select}>
<option>
<FormattedMessage id='monitors.above' />
</option>
<option>
<FormattedMessage id='monitors.equal' />
</option>
<option>
<FormattedMessage id='monitors.below' />
</option>
</Field>
</Column>
<Column md={2} xs={12}>
<Field component={Input} placeholder='value' />
</Column>
<Column md={2} xs={12}>
<Field component={Select}>
<option>
<FormattedMessage id='monitors.average' />
</option>
</Field>
</Column>
<TextColumn md={1}xs={12}>
<Text>
<FormattedMessage id='monitors.during' />
</Text>
</TextColumn>
<Column md={3} xs={12}>
<Field component={Select}>
<option>
<FormattedMessage id='monitors.last5' />
</option>
</Field>
</Column>
</ConditionsRow>
<H4>
<FormattedMessage id='monitors.notification' />
</H4>
<P>
<FormattedMessage id='monitors.notification-subtitle' />
</P>
<Row>
<Column xs={12}>
<Field component={PeopleInput} />
</Column>
</Row>
<Row>
<Column xs={12}>
<Button disabled={pristine || submitting} type='submit'>
<FormattedMessage id='monitors.submit' />
</Button>
</Column>
</Row>
</form>
);
CreateMonitor.propTypes = {
handleSubmit: React.PropTypes.func,
pristine: React.PropTypes.bool,
submitting: React.PropTypes.bool
};
module.exports = CreateMonitor;

15
frontend/src/components/monitors/index.js
View File

@ -4,10 +4,8 @@ const Styled = require('styled-components');
const constants = require('@ui/shared/constants');
const Close = require('@ui/components/close');
const CreateMonitor = require('@components/create-monitor');
const fns = require('@ui/shared/functions');
const Li = require('@ui/components/horizontal-list/li');
const ManageMonitor = require('@components/manage-monitor');
const Modal = require('@ui/components/modal');
const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul');
@ -65,21 +63,13 @@ const View = styled.div`
const Monitors = ({
active = false,
children,
handleDismiss = () => null,
metricType = {},
page = 'create',
submit = () => null,
togglePage = () => null
}) => {
const views = {
create: () => (
<CreateMonitor submit={submit} />
),
manage: () => (
<ManageMonitor />
)
};
const links = ['create', 'manage'].map((name) => {
const id = `monitors.${name}`;
const className = page === name ? 'active' : '';
@ -111,7 +101,7 @@ const Monitors = ({
<Ul>
{links}
</Ul>
{views[page]()}
{children}
</View>
<Close onClick={handleDismiss} />
</StyledModal>
@ -120,6 +110,7 @@ const Monitors = ({
Monitors.propTypes = {
active: React.PropTypes.string,
children: React.PropTypes.node,
handleDismiss: React.PropTypes.func.isRequired,
metricType: PropTypes.metricType,
page: React.PropTypes.string,

46
frontend/src/containers/metrics/monitors.js
View File

@ -1,9 +1,17 @@
const React = require('react');
const ReduxForm = require('redux-form');
const ReactRedux = require('react-redux');
const actions = require('@state/actions');
const CreateMonitor = require('@components/create-monitor');
const ManageMonitor = require('@components/manage-monitor');
const Monitors = require('@components/monitors');
const selectors = require('@state/selectors');
const {
reduxForm
} = ReduxForm;
const {
connect
} = ReactRedux;
@ -14,10 +22,39 @@ const {
const {
toggleMonitorView,
switchMonitorViewPage,
createMonitor
switchMonitorViewPage
} = actions;
const ConnectedCreateMonitor = reduxForm({
form: 'create-monitor'
})(CreateMonitor);
// const ConnectedCreateMonitor = reduxForm()(CreateMonitor);
const MetricMonitors = (props) => {
const {
page
} = props;
const views = {
create: () => (
<ConnectedCreateMonitor />
),
manage: () => (
<ManageMonitor />
)
};
return (
<Monitors {...props}>
{views[page]()}
</Monitors>
);
};
MetricMonitors.propTypes = {
page: React.PropTypes.string
};
const mapStateToProps = (state) => ({
metricType: metricTypeByUuidSelector(state.monitors.ui.active)(state),
active: state.monitors.ui.active,
@ -26,11 +63,10 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = (dispatch) => ({
handleDismiss: () => dispatch(toggleMonitorView()),
togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage)),
submit: (meta) => dispatch(createMonitor(meta))
togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage))
});
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(Monitors);
)(MetricMonitors);

3
frontend/src/state/actions.js
View File

@ -15,6 +15,5 @@ module.exports = {
addMetric: createAction(`${APP}/ADD_METRIC`),
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
createMonitor: createAction(`${APP}/CREATE_MONITOR`)
switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`)
};

1
frontend/src/state/reducers/monitors.js
View File

@ -9,7 +9,6 @@ const {
const {
toggleMonitorView,
switchMonitorViewPage
// createMonitor
} = actions;
module.exports = handleActions({

58
frontend/yarn.lock
View File

@ -200,6 +200,10 @@ array-find-index@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
array-findindex-polyfill@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/array-findindex-polyfill/-/array-findindex-polyfill-0.1.0.tgz#c362665bec7645f22d7a3c3aac9793f71c3622ef"
array-flatten@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@ -2214,7 +2218,7 @@ deep-diff@0.3.4:
version "0.3.4"
resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.4.tgz#aac5c39952236abe5f037a2349060ba01b00ae48"
deep-equal@^1.0.0:
deep-equal@^1.0.0, deep-equal@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@ -2468,6 +2472,10 @@ es5-ext@^0.10.7, es5-ext@^0.10.8, es5-ext@~0.10.11, es5-ext@~0.10.2, es5-ext@~0.
es6-iterator "2"
es6-symbol "~3.1"
es6-error@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.1.tgz#eeb3e280f57e2ec48d72a9fccaf6247d3c1f5719"
es6-iterator@2:
version "2.0.0"
resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
@ -3219,7 +3227,7 @@ hoek@4.x.x:
version "4.1.0"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.1.0.tgz#4a4557460f69842ed463aa00628cc26d2683afa7"
hoist-non-react-statics@^1.0.3:
hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
@ -3408,7 +3416,7 @@ intl-relativeformat@^1.3.0:
dependencies:
intl-messageformat "1.3.0"
invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1:
invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
@ -3933,10 +3941,14 @@ locate-path@^2.0.0:
p-locate "^2.0.0"
path-exists "^3.0.0"
lodash-es@^4.2.0, lodash-es@^4.2.1:
lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
lodash._getnative@^3.0.0:
version "3.9.1"
resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
lodash._reinterpolate@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@ -3989,6 +4001,14 @@ lodash.indexof@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
lodash.isarguments@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
lodash.isarray@^3.0.0:
version "3.0.4"
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
lodash.isempty@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
@ -4009,6 +4029,14 @@ lodash.isundefined@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz#23ef3d9535565203a66cefd5b830f848911afb48"
lodash.keys@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
dependencies:
lodash._getnative "^3.0.0"
lodash.isarguments "^3.0.0"
lodash.isarray "^3.0.0"
lodash.map@^4.4.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
@ -4058,7 +4086,7 @@ lodash@^3.5.0:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
lodash@^4.0.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
lodash@^4.0.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@ -5264,6 +5292,20 @@ redux-batched-actions@^0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/redux-batched-actions/-/redux-batched-actions-0.1.5.tgz#b39b84775f4499a4724f3154b882968073b58bed"
redux-form:
version "6.4.3"
resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.4.3.tgz#bd83a77770d9805f7b595a4ff18f00fe4267d3c8"
dependencies:
array-findindex-polyfill "^0.1.0"
deep-equal "^1.0.1"
es6-error "^4.0.0"
hoist-non-react-statics "^1.2.0"
invariant "^2.2.2"
is-promise "^2.1.0"
lodash "^4.17.3"
lodash-es "^4.17.3"
shallowequal "^0.2.2"
redux-logger@^2.7.4:
version "2.7.4"
resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-2.7.4.tgz#891e5d29e7f111d08b5781a237b9965b5858c7f8"
@ -5544,6 +5586,12 @@ sha.js@^2.3.6:
dependencies:
inherits "^2.0.1"
shallowequal@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e"
dependencies:
lodash.keys "^3.1.2"
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"

3
ui/src/components/input/index.js
View File

@ -1,4 +1,5 @@
const fns = require('../../shared/functions');
const reduxFormProxy = require('../../shared/redux-form-proxy');
const React = require('react');
const Styled = require('styled-components');
@ -77,4 +78,4 @@ Input.propTypes = {
warning: React.PropTypes.string
};
module.exports = Input;
module.exports = reduxFormProxy(Input);

3
ui/src/components/select/index.js
View File

@ -1,4 +1,5 @@
const fns = require('../../shared/functions');
const reduxFormProxy = require('../../shared/redux-form-proxy');
const React = require('react');
const Styled = require('styled-components');
@ -88,4 +89,4 @@ Select.propTypes = {
warning: React.PropTypes.string
};
module.exports = Select;
module.exports = reduxFormProxy(Select);