mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
turn create-monitor into a form
This commit is contained in:
parent
0fbe168764
commit
baa00dfc27
@ -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",
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
@ -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);
|
||||
|
@ -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`)
|
||||
};
|
||||
|
@ -9,7 +9,6 @@ const {
|
||||
const {
|
||||
toggleMonitorView,
|
||||
switchMonitorViewPage
|
||||
// createMonitor
|
||||
} = actions;
|
||||
|
||||
module.exports = handleActions({
|
||||
|
@ -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"
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user