mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-12-29 05:10:05 +02:00
Code Issues Releases Wiki Activity

convert commonjs to es2015 modules (fixes #234)

Browse Source
This commit is contained in:
Sérgio Ramos 2017-02-20 16:15:36 +00:00 committed by Judit Greskovits
parent d8b485e0de
commit 520b685e28
284 changed files with 3818 additions and 6788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.babelrc
View File

@ -3,6 +3,7 @@
"presets": [
"react",
["env", {
"modules": false,
"targets": {
"browsers": [
"last 2 versions"
@ -18,7 +19,6 @@
["transform-react-jsx", {
"useBuiltIns": true
}],
"transform-es2015-modules-commonjs",
"transform-exponentiation-operator"
],
"env": {

6
frontend/.eslintrc
View File

@ -22,6 +22,9 @@
"es6": true
},
"rules": {
"jsx-quotes": [2, "prefer-single"],
"comma-dangle": [2, "never"],
"eol-last": [2, "always"],
"react/jsx-no-undef": 2,
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
@ -118,7 +121,6 @@
"max-len": [2, 80],
"no-eq-null": 2,
"block-scoped-var": 2,
"no-console": 0,
"comma-dangle": ["error", "never"]
"no-console": 0
}
}

8
frontend/package.json
View File

@ -12,6 +12,7 @@
"start": "webpack-dev-server --define process.env.BASELINE_GRID=false --open --config webpack/index.js ",
"production": "node server",
"lint": "make lint",
"lint-fix": "make lint-fix",
"test": "make test",
"open": "nyc report --reporter=html & open coverage/index.html",
"coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
@ -64,6 +65,7 @@
"babel-core": "^6.23.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.3.2",
"babel-plugin-inline-react-svg": "^0.2.0",
"babel-plugin-styled-components": "^1.0.0",
"babel-plugin-transform-class-properties": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.23.0",
@ -81,12 +83,14 @@
"babel-register": "^6.23.0",
"case-sensitive-paths-webpack-plugin": "^1.1.4",
"enzyme": "^2.7.1",
"eslint": "^3.16.0",
"eslint": "^3.16.1",
"eslint-config-react-app": "^0.5.1",
"eslint-config-semistandard": "^7.0.0",
"eslint-config-standard": "^6.2.1",
"eslint-loader": "^1.6.1",
"eslint-loader": "^1.6.3",
"eslint-plugin-babel": "^4.0.1",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-promise": "^3.4.2",
"eslint-plugin-react": "^6.10.0",

16
frontend/src/components/article/index.js
View File

@ -1,17 +1,9 @@
const Styled = require('styled-components');
const constants = require('@ui/shared/constants');
const {
// colors,
breakpoints
} = constants;
const {
default: styled
} = Styled;
import styled from 'styled-components';
import { colors, breakpoints } from '@ui/shared/constants';
// Main Contonent Wrapper Styles
module.exports = styled.article`
export default styled.article`
background-color: ${colors.base.grey};
padding: 2rem;
${breakpoints.large`

69
frontend/src/components/breadcrumb/index.js
View File

@ -1,32 +1,15 @@
const React = require('react');
const Styled = require('styled-components');
const flatten = require('lodash.flatten');
import React from 'react';
import styled from 'styled-components';
import flatten from 'lodash.flatten';
const Container = require('@ui/components/container');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const BaseElements = require('@ui/components/base-elements');
const NavLink = require('@ui/components/nav-link');
const PropTypes = require('@root/prop-types');
const fns = require('@ui/shared/functions');
const constants = require('@ui/shared/constants');
const {
remcalc,
unitcalc
} = fns;
const {
colors
} = constants;
const {
H2
} = BaseElements;
const {
default: styled
} = Styled;
import Container from '@ui/components/container';
import Row from '@ui/components/row';
import Column from '@ui/components/column';
import { H2 } from '@ui/components/base-elements';
import NavLink from '@ui/components/nav-link';
import PropTypes from '@root/prop-types';
import { remcalc, unitcalc } from '@ui/shared/functions';
import { colors } from '@ui/shared/constants';
// Main Contonent Wrapper Styles
const StyledDiv = styled.div`
@ -75,21 +58,19 @@ const Breadcrumb = ({
children,
links = [],
name = []
}) => {
return (
<Container>
<Row>
<Column xs={12}>
<StyledDiv>
<StyledH2>
{getNameLink(name)}
</StyledH2>
</StyledDiv>
</Column>
</Row>
</Container>
);
};
}) => (
<Container>
<Row>
<Column xs={12}>
<StyledDiv>
<StyledH2>
{getNameLink(name)}
</StyledH2>
</StyledDiv>
</Column>
</Row>
</Container>
);
Breadcrumb.propTypes = {
children: React.PropTypes.node,
@ -97,4 +78,4 @@ Breadcrumb.propTypes = {
name: React.PropTypes.arrayOf(PropTypes.link)
};
module.exports = Breadcrumb;
export default Breadcrumb;

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

@ -1,31 +1,12 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
const Form = require('@ui/components/form');
const Button = require('@ui/components/button');
const Column = require('@ui/components/column');
const fns = require('@ui/shared/functions');
const Row = require('@ui/components/row');
const {
FormGroup,
Select,
Input
} = Form;
const {
FormattedMessage
} = ReactIntl;
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
import { FormGroup, Select, Input } from '@ui/components/form';
import Button from '@ui/components/button';
import Column from '@ui/components/column';
import { remcalc } from '@ui/shared/functions';
import Row from '@ui/components/row';
const H4 = styled.h4`
margin-bottom: ${remcalc(5)} !important;
@ -148,4 +129,4 @@ CreateMonitor.propTypes = {
submitting: React.PropTypes.bool
};
module.exports = CreateMonitor;
export default CreateMonitor;

20
frontend/src/components/empty/instances.js
View File

@ -1,19 +1,11 @@
const React = require('react');
const ReactIntl = require('react-intl');
import React from 'react';
import { FormattedMessage } from 'react-intl';
const Column = require('@ui/components/column');
const Row = require('@ui/components/row');
const BaseElements = require('@ui/components/base-elements');
import Column from '@ui/components/column';
import Row from '@ui/components/row';
import { P } from '@ui/components/base-elements';
const {
P
} = BaseElements;
const {
FormattedMessage
} = ReactIntl;
module.exports = () => (
export default () => (
<Row>
<Column xs={12}>
<P name='empty'>

15
frontend/src/components/empty/people.js
View File

@ -1,14 +1,10 @@
const React = require('react');
const ReactIntl = require('react-intl');
import React from 'react';
import { FormattedMessage } from 'react-intl';
const Column = require('@ui/components/column');
const Row = require('@ui/components/row');
import Column from '@ui/components/column';
import Row from '@ui/components/row';
const {
FormattedMessage
} = ReactIntl;
module.exports = () => (
export default () => (
<Row>
<Column xs={12}>
<p name='empty'>
@ -17,4 +13,3 @@ module.exports = () => (
</Column>
</Row>
);

15
frontend/src/components/empty/projects.js
View File

@ -1,14 +1,10 @@
const React = require('react');
const ReactIntl = require('react-intl');
import React from 'react';
import { FormattedMessage } from 'react-intl';
const Column = require('@ui/components/column');
const Row = require('@ui/components/row');
import Column from '@ui/components/column';
import Row from '@ui/components/row';
const {
FormattedMessage
} = ReactIntl;
module.exports = () => (
export default () => (
<Row>
<Column xs={12}>
<p name='empty'>
@ -17,4 +13,3 @@ module.exports = () => (
</Column>
</Row>
);

40
frontend/src/components/empty/services.js
View File

@ -1,43 +1,23 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
const Button = require('@ui/components/button');
const Column = require('@ui/components/column');
const Row = require('@ui/components/row');
const BaseElements = require('@ui/components/base-elements');
const fns = require('@ui/shared/functions');
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const {
P,
H2,
H3
} = BaseElements;
const {
FormattedMessage
} = ReactIntl;
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import Button from '@ui/components/button';
import Column from '@ui/components/column';
import Row from '@ui/components/row';
import { P, H2, H3 } from '@ui/components/base-elements';
import { remcalc } from '@ui/shared/functions';
const StyledBox = styled.div`
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
border: solid 1px #d8d8d8;
padding: ${remcalc('6 18 24')};
& + & {
margin-top: ${remcalc(24)};
}
`;
module.exports = () => (
export default () => (
<div>
<Row name='empty-services'>
<Column>

8
frontend/src/components/footer/index.js
View File

@ -1,7 +1,3 @@
const Styled = require('styled-components');
import styled from 'styled-components';
const {
default: styled
} = Styled;
module.exports = styled.footer``;
export default styled.footer``;

50
frontend/src/components/header/index.js
View File

@ -1,36 +1,16 @@
const React = require('react');
const ReactRouter = require('react-router-dom');
const Styled = require('styled-components');
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
const Column = require('@ui/components/column');
const Avatar = require('@ui/components/avatar');
const fns = require('@ui/shared/functions');
const logo = require('@resources/logo.svg');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const Tooltip = require('@ui/components/tooltip');
const composers = require('@ui/shared/composers');
const constants = require('@ui/shared/constants');
const {
Link
} = ReactRouter;
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const {
pseudoEl
} = composers;
const {
colors
} = constants;
import Column from '@ui/components/column';
import Avatar from '@ui/components/avatar';
import { remcalc } from '@ui/shared/functions';
import logo from '@resources/logo.svg';
import PropTypes from '@root/prop-types';
import Row from '@ui/components/row';
import Tooltip from '@ui/components/tooltip';
import { pseudoEl } from '@ui/shared/composers';
import { colors } from '@ui/shared/constants';
const borderSide = props => props.toggled
? 'bottom'
@ -53,7 +33,7 @@ const StyledProfileWrapper = styled.div`
const StyledAvatarWrapper = styled.div`
display: inline-block;
&:after {
border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent;
@ -122,7 +102,7 @@ const Header = ({
);
return (
<StyledHeader name="application-header">
<StyledHeader name='application-header'>
<Row>
<Column lg={10} xs={8}>
<Link to='/'>
@ -157,4 +137,4 @@ Header.propTypes = {
tooltip: React.PropTypes.bool
};
module.exports = Header;
export default Header;

13
frontend/src/components/instance-item/index.js
View File

@ -1,16 +1,15 @@
const React = require('react');
import React from 'react';
const MetricsOutlet = require('@components/metrics-outlet');
const PropTypes = require('@root/prop-types');
const List = require('@ui/components/list');
import MetricsOutlet from '@components/metrics-outlet';
import PropTypes from '@root/prop-types';
const {
import {
ListItem,
ListItemView,
ListItemMeta,
ListItemTitle,
ListItemOptions
} = List;
} from '@ui/components/list';
const InstanceItem = ({
instance = {},
@ -34,4 +33,4 @@ InstanceItem.propTypes = {
toggleCollapsed: React.PropTypes.func
};
module.exports = InstanceItem;
export default InstanceItem;

12
frontend/src/components/instance-list/index.js
View File

@ -1,13 +1,13 @@
const React = require('react');
const InstanceItem = require('@components/instance-item');
const PropTypes = require('@root/prop-types');
import React from 'react';
import InstanceItem from '@components/instance-item';
import PropTypes from '@root/prop-types';
const InstanceList = ({
instances = [],
toggleCollapsed = () => null
}) => {
const onClick = (uuid) => () => toggleCollapsed(uuid);
const onClick = (uuid) => () =>
toggleCollapsed(uuid);
const instanceList = instances.map((instance) => (
<InstanceItem
@ -29,4 +29,4 @@ InstanceList.propTypes = {
toggleCollapsed: React.PropTypes.func
};
module.exports = InstanceList;
export default InstanceList;

6
frontend/src/components/manage-monitor/index.js
View File

@ -1,5 +1,5 @@
const React = require('react');
import React from 'react';
module.exports = () => (
export default () => (
<p>manage monitor</p>
);
);

23
frontend/src/components/metric-charts/add-metrics.js
View File

@ -1,33 +1,30 @@
const React = require('react');
const PropTypes = require('@root/prop-types');
const AddMetric = require('@ui/components/add-metric');
const ReactIntl = require('react-intl');
import React from 'react';
import PropTypes from '@root/prop-types';
import { FormattedMessage } from 'react-intl';
const {
FormattedMessage
} = ReactIntl;
const {
import {
AddMetricButton,
AddMetricDescription,
AddMetricLink,
AddMetricTile,
AddMetricTitle
} = AddMetric;
} from '@ui/components/add-metric';
const AddMetrics = ({
datasets,
metricTypes,
onAddMetric
}) => {
const added = (metric) => Boolean(datasets.filter((dataset) =>
dataset.type.uuid === metric
).length);
const added = (metric) =>
Boolean(datasets.filter((dataset) => dataset.type.uuid === metric).length);
const addButton = (metric) => (
<AddMetricButton metric={metric} onClick={onAddMetric}>
<FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
</AddMetricButton>
);
const addedButton = (
<AddMetricButton disabled>
<FormattedMessage id={'metrics.add.added-label'} />
@ -62,4 +59,4 @@ AddMetrics.propTypes = {
onAddMetric: React.PropTypes.func.isRequired
};
module.exports = AddMetrics;
export default AddMetrics;

38
frontend/src/components/metric-charts/index.js
View File

@ -1,14 +1,9 @@
const React = require('react');
const moment = require('moment');
const PropTypes = require('@root/prop-types');
const Metric = require('@ui/components/metric');
const ReactIntl = require('react-intl');
import React from 'react';
import moment from 'moment';
import { FormattedMessage } from 'react-intl';
import PropTypes from '@root/prop-types';
const {
FormattedMessage
} = ReactIntl;
const {
import {
MetricGraph,
MetricCloseButton,
MetricHeader,
@ -16,7 +11,7 @@ const {
MetricSettingsButton,
MetricTitle,
MetricView
} = Metric;
} from '@ui/components/metric';
const MetricCharts = ({
datasets,
@ -30,23 +25,20 @@ const MetricCharts = ({
onSettingsClick,
onRemoveMetric = () => {}
}) => {
const optionList = durations.map(duration => (
const optionList = durations.map((duration) => (
<option key={String(duration)} value={duration}>
{moment.duration(duration, 'minutes').humanize()}
</option>
));
const metricList = datasets.map((dataset, index) => {
const {
data,
duration=durations[0],
type
} = dataset;
const metricList = datasets.map(({
data,
duration = durations[0],
type,
uuid
}, index) => {
const onSelectChange = (evt) =>
onDurationChange(Number(evt.target.value), dataset.uuid);
onDurationChange(Number(evt.target.value), uuid);
return (
<MetricView key={type.id}>
@ -88,4 +80,4 @@ MetricCharts.propTypes = {
onSettingsClick: React.PropTypes.func.isRequired
};
module.exports = MetricCharts;
export default MetricCharts;

36
frontend/src/components/metrics-outlet/index.js
View File

@ -1,27 +1,18 @@
const React = require('react');
const Styled = require('styled-components');
import React from 'react';
import styled from 'styled-components';
const Column = require('@ui/components/column');
const List = require('@ui/components/list');
const MiniMetric = require('@ui/components/mini-metric');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
import Column from '@ui/components/column';
import { ListItemOutlet } from '@ui/components/list';
import PropTypes from '@root/prop-types';
import Row from '@ui/components/row';
const {
default: styled
} = Styled;
const {
import {
MiniMetricGraph,
MiniMetricMeta,
MiniMetricTitle,
MiniMetricSubtitle,
MiniMetricView
} = MiniMetric;
const {
ListItemOutlet
} = List;
} from '@ui/components/mini-metric';
const StyledOutlet = styled(ListItemOutlet)`
padding-left: 0;
@ -37,11 +28,10 @@ const StyledRow = styled(Row)`
}
`;
const MetricsOutlet = (props) => {
const {
datasets = []
} = props;
const MetricsOutlet = ({
datasets = [],
...props
}) => {
const _datasets = datasets.map((metric, i) => (
<Column key={i} xs={4}>
<MiniMetricView borderless>
@ -67,4 +57,4 @@ MetricsOutlet.propTypes = {
datasets: React.PropTypes.arrayOf(PropTypes.dataset)
};
module.exports = MetricsOutlet;
export default MetricsOutlet;

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

@ -1,30 +1,14 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
const constants = require('@ui/shared/constants');
const Close = require('@ui/components/close');
const fns = require('@ui/shared/functions');
const Li = require('@ui/components/horizontal-list/li');
const Modal = require('@ui/components/modal');
const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul');
const {
FormattedMessage
} = ReactIntl;
const {
default: styled
} = Styled;
const {
colors
} = constants;
const {
remcalc
} = fns;
import { colors } from '@ui/shared/constants';
import Close from '@ui/components/close';
import { remcalc } from '@ui/shared/functions';
import Li from '@ui/components/horizontal-list/li';
import Modal from '@ui/components/modal';
import PropTypes from '@root/prop-types';
import Ul from '@ui/components/horizontal-list/ul';
const H1 = styled.h1`
font-size: ${remcalc(26)} !important;
@ -41,7 +25,7 @@ const H3 = styled.h3`
font-style: normal;
font-stretch: normal;
color: ${colors.brandSecondaryColor};
margin: ${remcalc(0)} auto ${remcalc(26)} ${remcalc(24)} !important;
margin: 0 auto ${remcalc(26)} ${remcalc(24)} !important;
`;
const Header = styled.header`
@ -118,4 +102,4 @@ Monitors.propTypes = {
togglePage: React.PropTypes.func.isRequired
};
module.exports = Monitors;
export default Monitors;

8
frontend/src/components/navigation/index.js
View File

@ -1,8 +1,4 @@
const Styled = require('styled-components');
import styled from 'styled-components';
const {
default: styled
} = Styled;
module.exports = styled.nav`
export default styled.nav`
`;

44
frontend/src/components/navigation/org.js
View File

@ -1,35 +1,15 @@
const React = require('react');
const ReactRedux = require('react-redux');
const Styled = require('styled-components');
import React from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';
const Avatar = require('@ui/components/avatar');
const Container = require('@ui/components/container');
const NavLink = require('@ui/components/nav-link');
const constants = require('@ui/shared/constants');
const PropTypes = require('@root/prop-types');
const selectors = require('@state/selectors');
const Ul = require('@ui/components/horizontal-list/ul');
const fns = require('@ui/shared/functions');
const {
connect
} = ReactRedux;
const {
default: styled
} = Styled;
const {
colors
} = constants;
const {
orgsSelector
} = selectors;
const {
remcalc
} = fns;
import Avatar from '@ui/components/avatar';
import Container from '@ui/components/container';
import NavLink from '@ui/components/nav-link';
import { colors } from '@ui/shared/constants';
import PropTypes from '@root/prop-types';
import { orgsSelector } from '@state/selectors';
import Ul from '@ui/components/horizontal-list/ul';
import { remcalc } from '@ui/shared/functions';
const StyledNav = styled.div`
background-color: #f2f2f2;
@ -147,6 +127,6 @@ const mapStateToProps = (state) => ({
orgs: orgsSelector(state)
});
module.exports = connect(
export default connect(
mapStateToProps
)(OrgNavigation);

62
frontend/src/components/new-project/billing.js
View File

@ -1,40 +1,18 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
const constants = require('@ui/shared/constants');
const fns = require('@ui/shared/functions');
import { colors } from '@ui/shared/constants';
import { remcalc } from '@ui/shared/functions';
import { H2 } from '@ui/components/base-elements';
import Button from '@ui/components/button';
const Button = require('@ui/components/button');
const BaseElements = require('@ui/components/base-elements');
const Card = require('@ui/components/payment-card');
const {
FormattedMessage
} = ReactIntl;
const {
H2
} = BaseElements;
const {
default: styled
} = Styled;
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
import {
PaymentCard,
PaymentCardDetail,
PaymentCardDetails,
PaymentCardView
} = Card;
} from '@ui/components/payment-card';
const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)};
@ -62,17 +40,15 @@ const LeftButton = styled(Button)`
margin-right: ${remcalc(6)};
`;
const NewProjectBilling = (props) => {
const {
cards = [{
type: 'mastercard',
number: 'xxxx-xxxx-xxxx-4901'
}],
handleSubmit,
onSubmit,
onNewBilling
} = props;
const NewProjectBilling = ({
cards = [{
type: 'mastercard',
number: 'xxxx-xxxx-xxxx-4901'
}],
handleSubmit,
onSubmit,
onNewBilling
}) => {
const _onNewBilling = (evt) => {
evt.preventDefault();
onNewBilling();
@ -120,4 +96,4 @@ NewProjectBilling.propTypes = {
onSubmit: React.PropTypes.func.isRequired
};
module.exports = NewProjectBilling;
export default NewProjectBilling;

58
frontend/src/components/new-project/index.js
View File

@ -1,39 +1,17 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import { colors } from '@ui/shared/constants';
import { remcalc } from '@ui/shared/functions';
import { H2 } from '@ui/components/base-elements';
import Button from '@ui/components/button';
const constants = require('@ui/shared/constants');
const fns = require('@ui/shared/functions');
const Button = require('@ui/components/button');
const BaseElements = require('@ui/components/base-elements');
const Form = require('@ui/components/form');
const {
H2
} = BaseElements;
const {
import {
FormGroup,
FormLabel,
FormMeta,
Input
} = Form;
const {
FormattedMessage
} = ReactIntl;
const {
default: styled
} = Styled;
const {
colors
} = constants;
const {
remcalc
} = fns;
} from '@ui/components/form';
const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)};
@ -66,15 +44,13 @@ const LeftButton = styled(Button)`
margin-right: ${remcalc(6)};
`;
const CreateProject = (props) => {
const {
handleSubmit,
onCancel,
onSubmit,
pristine,
submitting
} = props;
const CreateProject = ({
handleSubmit,
onCancel,
onSubmit,
pristine,
submitting
}) => {
const _onCancel = (evt) => {
evt.preventDefault();
onCancel();
@ -119,4 +95,4 @@ CreateProject.propTypes = {
submitting: React.PropTypes.bool.isRequired
};
module.exports = CreateProject;
export default CreateProject;

62
frontend/src/components/new-project/new-billing.js
View File

@ -1,46 +1,24 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
const constants = require('@ui/shared/constants');
const fns = require('@ui/shared/functions');
const BaseElements = require('@ui/components/base-elements');
const normalize = require('@root/utils/form/normalize');
const Form = require('@ui/components/form');
const Button = require('@ui/components/button');
import { colors } from '@ui/shared/constants';
import { remcalc } from '@ui/shared/functions';
import Button from '@ui/components/button';
import { H2 } from '@ui/components/base-elements';
const {
H2
} = BaseElements;
const {
import {
FormGroup,
FormLabel,
FormMeta,
Input
} = Form;
} from '@ui/components/form';
const {
FormattedMessage
} = ReactIntl;
const {
default: styled
} = Styled;
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
import {
normalizeCardNumber,
normalizeCardCVV,
normalizeCardExpiry
} = normalize;
} from '@root/utils/form/normalize';
const Container = styled.div`
padding: ${remcalc(96)} ${remcalc(40)};
@ -84,15 +62,13 @@ const ProjectNameButtons = styled(Button)`
margin-right: ${remcalc(6)};
`;
const CreateBilling = (props) => {
const {
handleSubmit,
onBack,
onSubmit,
pristine,
submitting
} = props;
const CreateBilling = ({
handleSubmit,
onBack,
onSubmit,
pristine,
submitting
}) => {
const _onBack = (evt) => {
evt.preventDefault();
onBack(evt);
@ -166,4 +142,4 @@ CreateBilling.propTypes = {
submitting: React.PropTypes.bool.isRequired
};
module.exports = CreateBilling;
export default CreateBilling;

43
frontend/src/components/people-list/index.js
View File

@ -1,18 +1,11 @@
const React = require('react');
const Styled = require('styled-components');
const Empty = require('@components/empty/people');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const Button = require('@ui/components/button');
const PeopleTable = require('./table');
const Invite = require('./invite');
const {
default: styled
} = Styled;
import React from 'react';
import styled from 'styled-components';
import Empty from '@components/empty/people';
import Row from '@ui/components/row';
import Column from '@ui/components/column';
import Button from '@ui/components/button';
import PeopleTable from './table';
import Invite from './invite';
const StyledButton = styled(Button)`
float: right;
@ -25,6 +18,16 @@ const People = (props) => {
people
} = props;
const invite = !UI.invite_toggled ? null : (
<Invite {...props} />
);
const peopleTable = people.length > 0 ? (
<PeopleTable {...props} />
) : (
<Empty />
);
return (
<div>
<Row>
@ -37,14 +40,10 @@ const People = (props) => {
</StyledButton>
</Column>
</Row>
{UI.invite_toggled ? <Invite {...props} /> : null}
{invite}
<Row>
<Column xs={12}>
{ people.length > 0
? <PeopleTable {...props} />
: <Empty /> }
{peopleTable}
</Column>
</Row>
</div>
@ -57,4 +56,4 @@ People.propTypes = {
people: React.PropTypes.array
};
module.exports = People;
export default People;

71
frontend/src/components/people-list/invite.js
View File

@ -1,20 +1,16 @@
const React = require('react');
const Styled = require('styled-components');
// eslint-disable-next-line no-unused-vars
import _ from 'react-select/dist/react-select.css';
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const Button = require('@ui/components/button');
import React from 'react';
import styled from 'styled-components';
const {
default: styled
} = Styled;
// TOOD: Require from UI Components - causes issue ATM.
const Select = require('react-select');
require('react-select/dist/react-select.css');
import Row from '@ui/components/row';
import Column from '@ui/components/column';
import Button from '@ui/components/button';
// TODO: Require from UI Components - causes issue ATM.
import Select from 'react-select';
const SelectWrapper = styled.div`
.Select-menu-outer {
margin-top: 48px;
}
@ -24,14 +20,13 @@ const SelectWrapper = styled.div`
top: -4px;
}
`;
const StyledSubmitButton = styled(Button)`
float: right;
width: 20%;
const InlineButton = styled(Button)`
display: inline-block;
`;
const StyledInlineButton = styled(Button)`
display: inline-block;
const ButtonAdd = styled(Button)`
float: right;
width: 20%;
`;
// TODO: When removing react-select css
@ -44,41 +39,36 @@ const InputStyle = {
paddingTop: '10px'
};
const Invite = React.createClass({
propTypes: {
addMemember: React.PropTypes.func,
handleToggle: React.PropTypes.func,
parentIndex: React.PropTypes.number,
platformMembers: React.PropTypes.array
},
getInitialState() {
return {
selectValue: '',
members: []
};
},
getFormattedPlatformMembers() {
return this.props.platformMembers.map((m) => ({
value: m.email,
label: m.name
}));
},
handleSubmit(e) {
e.preventDefault();
const data = {
parentIndex: this.props.parentIndex,
member: {
name: this.state.selectValue.label,
email: this.state.selectValue.value,
role: 'Unassigned',
status: 'Sent invitation'
},
parentIndex: this.props.parentIndex
}
};
this.props.addMemember(data, () => {
@ -87,9 +77,7 @@ const Invite = React.createClass({
});
});
},
render() {
const {
handleToggle
} = this.props;
@ -107,45 +95,36 @@ const Invite = React.createClass({
<Column md={6}>
<p>Search for a person by name or email or enter an email address
to invite someone new.</p>
<Row>
<Column xs={12}>
<form onSubmit={this.handleSubmit}>
<SelectWrapper>
<Select.Creatable
aria-label="member select"
aria-label='member select'
onChange={handleSelectChange}
onNewOptionClick={handleSelectChange}
options={selectData}
placeholder="Enter an email address or password"
placeholder='Enter an email address or password'
style={InputStyle}
value={this.state.selectValue}
/>
</SelectWrapper>
<StyledSubmitButton
secondary
type="submit"
>
<ButtonAdd type='submit' secondary>
Add
</StyledSubmitButton>
</ButtonAdd>
</form>
</Column>
</Row>
<StyledInlineButton
onClick={handleToggle}
secondary
>
<InlineButton onClick={handleToggle} secondary >
Cancel
</StyledInlineButton>
<StyledInlineButton>
</InlineButton>
<InlineButton>
Send Invitation(s)
</StyledInlineButton>
</InlineButton>
</Column>
</Row>
);
}
});
module.exports = Invite;
export default Invite;

56
frontend/src/components/people-list/table/index.js
View File

@ -1,39 +1,31 @@
const React = require('react');
const Styled = require('styled-components');
import React from 'react';
import styled from 'styled-components';
const Table = require('@ui/components/table-data-table');
const Form = require('@ui/components/form');
import Table from '@ui/components/table-data-table';
import { remcalc } from '@ui/shared/functions';
const fns = require('@ui/shared/functions');
import PersonStatus from './person-status';
import PersonRole from './person-role';
import PersonDelete from './person-delete';
const PersonStatus = require('./person-status');
const PersonRole = require('./person-role');
const PersonDelete = require('./person-delete');
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
const {
import {
Checkbox,
FormGroup
} = Form;
} from '@ui/components/form';
const PeopleTable = (props) => {
const {
handleRoleTooltip,
handleStatusTooltip,
handleMemberUpdate,
people = [],
parentIndex,
removeMember,
UI = {}
} = props;
const StyledWrapper = styled.div`
margin-top: ${remcalc(40)};
`;
const PeopleTable = ({
handleRoleTooltip,
handleStatusTooltip,
handleMemberUpdate,
people = [],
parentIndex,
removeMember,
UI = {}
}) => {
const columns = [{
title: (
<FormGroup>
@ -101,10 +93,6 @@ const PeopleTable = (props) => {
};
});
const StyledWrapper = styled.div`
margin-top: ${remcalc(40)};
`;
return (
<StyledWrapper>
<Table
@ -125,4 +113,4 @@ PeopleTable.propTypes = {
removeMember: React.PropTypes.func
};
module.exports = PeopleTable;
export default PeopleTable;

23
frontend/src/components/people-list/table/person-delete.js
View File

@ -1,9 +1,5 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
import React from 'react';
import styled from 'styled-components';
const PlainButton = styled.button`
background: transparent;
@ -14,14 +10,11 @@ const PlainButton = styled.button`
color: inherit;
`;
const PersonDelete = (props) => {
const {
personIndex,
parentIndex,
removeMember
} = props;
const PersonDelete = ({
personIndex,
parentIndex,
removeMember
}) => {
const _onClick = () => removeMember({
personIndex,
parentIndex
@ -40,4 +33,4 @@ PersonDelete.propTypes = {
removeMember: React.PropTypes.func
};
module.exports = PersonDelete;
export default PersonDelete;

73
frontend/src/components/people-list/table/person-role.js
View File

@ -1,22 +1,9 @@
const React = require('react');
const Styled = require('styled-components');
import React from 'react';
import styled from 'styled-components';
const fns = require('@ui/shared/functions');
const composers = require('@ui/shared/composers');
const Tooltip = require('./tooltip');
const {
pseudoEl
} = composers;
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
import { remcalc } from '@ui/shared/functions';
import { pseudoEl } from '@ui/shared/composers';
import Tooltip from './tooltip';
const borderSide = props => props.toggled
? 'bottom'
@ -26,12 +13,12 @@ const StyledWrapper = styled.div`
position: relative;
display: inline-block;
min-width: ${remcalc(130)};
&:after {
border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent;
border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({
top: '40%',
right: remcalc(-10)
@ -48,18 +35,15 @@ const PlainButton = styled.button`
color: inherit;
`;
const PersonRole = (props) => {
const {
toggledID,
membersRolesOptions,
person,
personIndex,
handleRoleTooltip,
handleMemberUpdate,
parentIndex
} = props;
const PersonRole = ({
toggledID,
membersRolesOptions,
person,
personIndex,
handleRoleTooltip,
handleMemberUpdate,
parentIndex
}) => {
const toggled = toggledID === person.uuid;
const handleClick = () => handleRoleTooltip(person.uuid);
const handleOptionSelect = (updatedMember) =>
@ -72,22 +56,23 @@ const PersonRole = (props) => {
role: person.role
};
const tooltip = !toggled ? null : (
<Tooltip
handleSelect={handleOptionSelect}
options={membersRolesOptions}
parentIndex={parentIndex}
person={_person}
personAttr='role'
personIndex={personIndex}
/>
);
return (
<StyledWrapper toggled={toggled}>
<PlainButton onClick={handleClick} >
{person.role}
</PlainButton>
{ toggledID === person.uuid
? <Tooltip
handleSelect={handleOptionSelect}
options={membersRolesOptions}
parentIndex={parentIndex}
person={_person}
personAttr="role"
personIndex={personIndex}
/>
: null }
{tooltip}
</StyledWrapper>
);
};
@ -105,4 +90,4 @@ PersonRole.propTypes = {
])
};
module.exports = PersonRole;
export default PersonRole;

79
frontend/src/components/people-list/table/person-status.js
View File

@ -1,22 +1,8 @@
const React = require('react');
const Styled = require('styled-components');
const fns = require('@ui/shared/functions');
const composers = require('@ui/shared/composers');
const Tooltip = require('./tooltip');
const {
pseudoEl
} = composers;
const {
default: styled
} = Styled;
const {
remcalc
} = fns;
import React from 'react';
import styled from 'styled-components';
import { remcalc } from '@ui/shared/functions';
import { pseudoEl } from '@ui/shared/composers';
import Tooltip from './tooltip';
const borderSide = props => props.toggled
? 'bottom'
@ -26,12 +12,12 @@ const StyledWrapper = styled.div`
position: relative;
display: inline-block;
min-width: ${remcalc(130)};
&:after {
border-left: ${remcalc(5)} solid transparent;
border-right: ${remcalc(5)} solid transparent;
border-${borderSide}: ${remcalc(5)} solid black;
${pseudoEl({
top: '40%',
right: remcalc(-10)
@ -48,20 +34,20 @@ const PlainButton = styled.button`
color: inherit;
`;
const PersonStatus = (props) => {
const {
toggledID,
membersStatusOptions,
person,
personIndex,
handleStatusTooltip,
handleMemberUpdate,
parentIndex
} = props;
const PersonStatus = ({
toggledID,
membersStatusOptions,
person,
personIndex,
handleStatusTooltip,
handleMemberUpdate,
parentIndex
}) => {
const toggled = toggledID === person.uuid;
const handleClick = () => handleStatusTooltip(person.uuid);
const handleClick = () =>
handleStatusTooltip(person.uuid);
const handleOptionSelect = (updatedMember) =>
handleMemberUpdate(updatedMember);
@ -72,22 +58,23 @@ const PersonStatus = (props) => {
role: person.role
};
const tooltip = !toggled ? null : (
<Tooltip
handleSelect={handleOptionSelect}
options={membersStatusOptions}
parentIndex={parentIndex}
person={_person}
personAttr='status'
personIndex={personIndex}
/>
);
return (
<StyledWrapper toggled={toggled}>
<PlainButton onClick={handleClick} >
{person.status}
</PlainButton>
{ toggledID === person.uuid
? <Tooltip
handleSelect={handleOptionSelect}
options={membersStatusOptions}
parentIndex={parentIndex}
person={_person}
personAttr="status"
personIndex={personIndex}
/>
: null }
{tooltip}
</StyledWrapper>
);
};
@ -105,4 +92,4 @@ PersonStatus.propTypes = {
])
};
module.exports = PersonStatus;
export default PersonStatus;

28
frontend/src/components/people-list/table/tooltip.js
View File

@ -1,11 +1,6 @@
const React = require('react');
const Styled = require('styled-components');
const Tooltip = require('@ui/components/tooltip');
const {
default: styled
} = Styled;
import React from 'react';
import Tooltip from '@ui/components/tooltip';
import styled from 'styled-components';
const StyledTooltip = styled(Tooltip)`
position: absolute;
@ -19,7 +14,7 @@ const arrowPosition = {
right: '10%'
};
module.exports = ({
const ExtendedTooltip = ({
handleSelect,
person = {},
personAttr,
@ -27,9 +22,7 @@ module.exports = ({
options = [],
parentIndex
}) => {
const _options = options.map( (option, i) => {
const payload = {
person: {
uuid: person.uuid,
@ -41,14 +34,15 @@ module.exports = ({
parentIndex
};
const _onClick = () => handleSelect(payload);
const _onClick = () =>
handleSelect(payload);
return (
<li
key={i}
onClick={_onClick}
role="listbox"
tabIndex="0"
role='listbox'
tabIndex='0'
>
{option}
</li>
@ -65,11 +59,13 @@ module.exports = ({
);
};
module.exports.propTypes = {
ExtendedTooltip.propTypes = {
handleSelect: React.PropTypes.func,
options: React.PropTypes.array,
parentIndex: React.PropTypes.number,
person: React.PropTypes.object,
personAttr: React.PropTypes.string,
personIndex: React.PropTypes.number
};
};
export default ExtendedTooltip;

10
frontend/src/components/redirect/index.js
View File

@ -1,10 +1,6 @@
const React = require('react');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { Redirect } from 'react-router-dom';
const {
Redirect
} = ReactRouter;
module.exports = (to) => () => (
export default (to) => () => (
<Redirect to={to} />
);

40
frontend/src/components/section/index.js
View File

@ -1,30 +1,14 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Styled = require('styled-components');
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
const Li = require('@ui/components/horizontal-list/li');
const NavLink = require('@ui/components/nav-link');
const constants = require('@ui/shared/constants');
const fns = require('@ui/shared/functions');
const PropTypes = require('@root/prop-types');
const Ul = require('@ui/components/horizontal-list/ul');
const Breadcrumb = require('@components/breadcrumb');
const {
default: styled
} = Styled;
const {
FormattedMessage
} = ReactIntl;
const {
breakpoints
} = constants;
const {
remcalc
} = fns;
import Li from '@ui/components/horizontal-list/li';
import NavLink from '@ui/components/nav-link';
import { breakpoints } from '@ui/shared/constants';
import { remcalc } from '@ui/shared/functions';
import PropTypes from '@root/prop-types';
import Ul from '@ui/components/horizontal-list/ul';
import Breadcrumb from '@components/breadcrumb';
const StyledHorizontalList = styled(Ul)`
padding: 0;
@ -57,7 +41,7 @@ const Section = (props) => {
return (
<div>
<Breadcrumb {...props} />
<StyledHorizontalList name="project-nav">
<StyledHorizontalList name='project-nav'>
{navLinks}
</StyledHorizontalList>
{children}
@ -70,4 +54,4 @@ Section.propTypes = {
links: React.PropTypes.arrayOf(PropTypes.link)
};
module.exports = Section;
export default Section;

23
frontend/src/components/service/item.js
View File

@ -1,17 +1,12 @@
const forceArray = require('force-array');
const React = require('react');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { Link } from 'react-router-dom';
import forceArray from 'force-array';
const Anchor = require('@ui/components/anchor');
const List = require('@ui/components/list');
const MetricsOutlet = require('@components/metrics-outlet');
const PropTypes = require('@root/prop-types');
import Anchor from '@ui/components/anchor';
import MetricsOutlet from '@components/metrics-outlet';
import PropTypes from '@root/prop-types';
const {
Link
} = ReactRouter;
const {
import {
ListItem,
ListItemView,
ListItemMeta,
@ -21,7 +16,7 @@ const {
ListItemGroupView,
ListItemOptions,
ListItemHeader
} = List;
} from '@ui/components/list';
const ServiceItem = ({
org = '',
@ -109,4 +104,4 @@ ServiceItem.propTypes = {
service: PropTypes.service
};
module.exports = ServiceItem;
export default ServiceItem;

34
frontend/src/components/service/view-toggle.js
View File

@ -1,17 +1,8 @@
const React = require('react');
const Toggle = require('@ui/components/toggle');
import React from 'react';
import styled from 'styled-components';
const fns = require('@ui/shared/functions');
const Styled = require('styled-components');
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
import Toggle from '@ui/components/toggle';
import { remcalc } from '@ui/shared/functions';
const StyledWrapper = styled.div`
margin-top: ${remcalc(9)};
@ -22,14 +13,11 @@ const StyledSpan = styled.span`
margin-right: ${remcalc(6)};
`;
const ServiceToggle = () => {
const ServiceToggle = () => (
<StyledWrapper>
<StyledSpan>View</StyledSpan>
<Toggle />
</StyledWrapper>
);
return (
<StyledWrapper>
<StyledSpan>View</StyledSpan>
<Toggle />
</StyledWrapper>
);
};
module.exports = ServiceToggle;
export default ServiceToggle;

54
frontend/src/containers/app.js
View File

@ -1,35 +1,17 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router-dom');
const Styled = require('styled-components');
const actions = require('@state/actions');
const Article = require('@components/article');
const Base = require('@ui/components/base');
const BaselineGrid = require('@ui/components/baseline-grid');
const Footer = require('@components/footer');
const Header = require('@containers/header');
const Home = require('@containers/home');
const NotFound = require('@containers/not-found');
const Nav = require('@components/navigation');
const OrgNavigation = require('@components/navigation/org');
const {
updateRouter
} = actions;
const {
connect
} = ReactRedux;
const {
Switch,
Route
} = ReactRouter;
const {
injectGlobal
} = Styled;
import React from 'react';
import { connect } from 'react-redux';
import { Switch, Route } from 'react-router-dom';
import { injectGlobal } from 'styled-components';
import { updateRouter } from '@state/actions';
import Article from '@components/article';
import Base from '@ui/components/base';
import BaselineGrid from '@ui/components/baseline-grid';
import Footer from '@components/footer';
import Header from '@containers/header';
import Home from '@containers/home';
import NotFound from '@containers/not-found';
import Nav from '@components/navigation';
import OrgNavigation from '@components/navigation/org';
const App = connect()(React.createClass({
displayName: 'App',
@ -80,18 +62,18 @@ const App = connect()(React.createClass({
}
}));
module.exports = (props) => (
export default (props) => (
<App {...props}>
<Header />
<Nav name="application-org-navigation">
<Nav name='application-org-navigation'>
<OrgNavigation />
</Nav>
<Article name="application-content">
<Article name='application-content'>
<Switch>
<Route component={Home} path='/:org?/:section?' />
<Route component={NotFound} />
</Switch>
</Article>
<Footer name="application-footer" />
<Footer name='application-footer' />
</App>
);

23
frontend/src/containers/header/index.js
View File

@ -1,21 +1,8 @@
const ReactRedux = require('react-redux');
import { connect } from 'react-redux';
const selectors = require('@state/selectors');
const actions = require('@state/actions');
const Header = require('@components/header');
const {
connect
} = ReactRedux;
const {
accountSelector,
accountUISelector
} = selectors;
const {
toggleHeaderTooltip
} = actions;
import { accountSelector, accountUISelector } from '@state/selectors';
import { toggleHeaderTooltip } from '@state/actions';
import Header from '@components/header';
const mapStateToProps = (state, ownProps) => ({
account: accountSelector(state),
@ -26,7 +13,7 @@ const mapDispatchToProps = (dispatch) => ({
handleToggle: () => dispatch(toggleHeaderTooltip())
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(Header);

43
frontend/src/containers/home/index.js
View File

@ -1,34 +1,20 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
const Container = require('@ui/components/container');
const Org = require('@containers/org');
const PropTypes = require('@root/prop-types');
const Redirect = require('@components/redirect');
const selectors = require('@state/selectors');
const NotFound = require('@containers/not-found');
const {
connect
} = ReactRedux;
const {
Route,
Switch
} = ReactRouter;
const {
orgsSelector
} = selectors;
import Container from '@ui/components/container';
import Org from '@containers/org';
import PropTypes from '@root/prop-types';
import Redirect from '@components/redirect';
import { orgsSelector } from '@state/selectors';
import NotFound from '@containers/not-found';
const Home = ({
orgs = []
}) => {
const notFound = !orgs.length
? <NotFound />
: Redirect(`/${orgs[0].id}`);
const notFound = orgs.length ? Redirect(`/${orgs[0].id}`) : (
<NotFound />
);
return (
<div>
@ -42,7 +28,6 @@ const Home = ({
);
};
Home.propTypes = {
orgs: React.PropTypes.arrayOf(PropTypes.org)
};
@ -51,4 +36,6 @@ const mapStateToProps = (state) => ({
orgs: orgsSelector(state)
});
module.exports = connect(mapStateToProps)(Home);
export default connect(
mapStateToProps
)(Home);

32
frontend/src/containers/metrics/index.js
View File

@ -1,22 +1,14 @@
const React = require('react');
const ReactRedux = require('react-redux');
import React from 'react';
import { connect } from 'react-redux';
const actions = require('@state/actions');
const AddMetrics = require('@root/components/metric-charts/add-metrics');
const Button = require('@ui/components/button');
const Column = require('@ui/components/column');
const MetricCharts = require('@root/components/metric-charts');
const Monitors = require('./monitors');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const {
connect
} = ReactRedux;
const {
toggleMonitorView
} = actions;
import { toggleMonitorView } from '@state/actions';
import AddMetrics from '@root/components/metric-charts/add-metrics';
import Button from '@ui/components/button';
import Column from '@ui/components/column';
import MetricCharts from '@root/components/metric-charts';
import Monitors from './monitors';
import PropTypes from '@root/prop-types';
import Row from '@ui/components/row';
const Metrics = ({
addMetric,
@ -29,7 +21,7 @@ const Metrics = ({
}) => {
const onMonitorsClick = (ev) => toggleMonitorView(metricTypeUuid);
const onRemoveMetric = (ev) => {};
const onRemoveMetric = (ev) => null;
return (
<div>
@ -75,7 +67,7 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(toggleMonitorView(metricTypeUuid))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(Metrics);

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

@ -1,34 +1,16 @@
const React = require('react');
// const ReduxForm = require('redux-form');
const ReactRedux = require('react-redux');
import React from 'react';
import { reduxForm } from 'redux-form';
import { connect } from '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');
import { toggleMonitorView, switchMonitorViewPage } from '@state/actions';
import CreateMonitor from '@components/create-monitor';
import ManageMonitor from '@components/manage-monitor';
import Monitors from '@components/monitors';
import { metricTypeByUuidSelector } from '@state/selectors';
/*const {
reduxForm
} = ReduxForm;*/
const {
connect
} = ReactRedux;
const {
metricTypeByUuidSelector
} = selectors;
const {
toggleMonitorView,
switchMonitorViewPage
} = actions;
const ConnectedCreateMonitor = CreateMonitor; /*reduxForm({
const CreateMonitorForm = reduxForm({
form: 'create-monitor'
})(CreateMonitor);*/
// const ConnectedCreateMonitor = reduxForm()(CreateMonitor);
})(CreateMonitor);
const MetricMonitors = (props) => {
const {
@ -37,14 +19,14 @@ const MetricMonitors = (props) => {
const views = {
create: () => (
<ConnectedCreateMonitor />
<CreateMonitorForm />
),
manage: () => (
<ManageMonitor />
)
};
const onSubmit = () => {};
const onSubmit = () => null;
return (
<Monitors submit={onSubmit} {...props}>
@ -68,7 +50,7 @@ const mapDispatchToProps = (dispatch) => ({
togglePage: (newPage) => dispatch(switchMonitorViewPage(newPage))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(MetricMonitors);

61
frontend/src/containers/new-project/billing.js
View File

@ -1,27 +1,11 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReduxForm = require('redux-form');
const selectors = require('@state/selectors');
const actions = require('@state/actions');
import React from 'react';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { orgByIdSelector } from '@state/selectors';
import { handleNewProject } from '@state/actions';
const PropTypes = require('@root/prop-types');
const NewProjectBilling = require('@components/new-project/billing');
const {
connect
} = ReactRedux;
const {
reduxForm
} = ReduxForm;
const {
orgByIdSelector
} = selectors;
const {
handleNewProject
} = actions;
import PropTypes from '@root/prop-types';
import NewProjectBilling from '@components/new-project/billing';
const NewProjectBillingForm = reduxForm({
form: 'create-project',
@ -29,27 +13,24 @@ const NewProjectBillingForm = reduxForm({
forceUnregisterOnUnmount: true
})(NewProjectBilling);
const Billing = (props) => {
const {
cards,
handleNewProject,
pushRoute,
org
} = props;
const Billing = ({
cards,
handleNewProject,
router,
org
}) => {
const onSubmit = (values) => {
// TODO will need to save exisiting card to project
console.log('NewBilling values = ', values);
handleNewProject({
values,
org
});
pushRoute(`/${org.id}/projects`);
router.push(`/${org.id}/projects`);
};
const onNewBilling = (evt) =>
pushRoute(`/${org.id}/new-project/new-billing`);
router.push(`/${org.id}/new-project/new-billing`);
return (
<NewProjectBillingForm
@ -65,25 +46,23 @@ Billing.propTypes = {
cards: React.PropTypes.array, // TODO set up example card in thingie data
handleNewProject: React.PropTypes.func.isRequired,
org: PropTypes.org.isRequired,
pushRoute: React.PropTypes.func
router: React.PropTypes.object
};
const mapStateToProps = (state, {
match = {
params: {}
},
push
}
}) => ({
// TODO add cards - as above
org: orgByIdSelector(match.params.org)(state),
pushRoute: push
org: orgByIdSelector(match.params.org)(state)
});
const mapDispatchToProps = (dispatch) => ({
handleNewProject: (values) => dispatch(handleNewProject(values))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(Billing);

17
frontend/src/containers/new-project/index.js
View File

@ -1,16 +1,11 @@
const React = require('react');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { Switch, Route } from 'react-router-dom';
const NewProject = require('@containers/new-project/new-project');
const Billing = require('@containers/new-project/billing');
const NewBilling = require('@containers/new-project/new-billing');
import NewProject from '@containers/new-project/new-project';
import Billing from '@containers/new-project/billing';
import NewBilling from '@containers/new-project/new-billing';
const {
Switch,
Route
} = ReactRouter;
module.exports = () => (
export default () => (
<Switch>
<Route
component={NewProject}

58
frontend/src/containers/new-project/new-billing.js
View File

@ -1,49 +1,31 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReduxForm = require('redux-form');
const selectors = require('@state/selectors');
const actions = require('@state/actions');
import React from 'react';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { orgByIdSelector } from '@state/selectors';
import { handleNewProject } from '@state/actions';
const PropTypes = require('@root/prop-types');
const CreateBilling = require('@components/new-project/new-billing');
const {
connect
} = ReactRedux;
const {
reduxForm
} = ReduxForm;
const {
orgByIdSelector
} = selectors;
const {
handleNewProject
} = actions;
import PropTypes from '@root/prop-types';
import CreateBilling from '@components/new-project/new-billing';
const NewBillingForm = reduxForm({
form: 'create-project'
})(CreateBilling);
const NewBilling = (props) => {
const {
handleNewProject,
pushRoute,
org
} = props;
const NewBilling = ({
handleNewProject,
router,
org
}) => {
const onBack = (evt) =>
pushRoute(`/${org.id}/new-project/billing`);
router.push(`/${org.id}/new-project/billing`);
const onSubmit = (values) => {
handleNewProject({
values,
org
});
pushRoute(`/${org.id}/projects`);
router.push(`/${org.id}/projects`);
};
return (
@ -57,25 +39,23 @@ const NewBilling = (props) => {
NewBilling.propTypes = {
handleNewProject: React.PropTypes.func.isRequired,
org: PropTypes.org.isRequired,
pushRoute: React.PropTypes.func
router: React.PropTypes.object
};
const mapStateToProps = (state, {
match = {
params: {}
},
push
}
}) => ({
// TODO add cards - as above
org: orgByIdSelector(match.params.org)(state),
pushRoute: push
org: orgByIdSelector(match.params.org)(state)
});
const mapDispatchToProps = (dispatch) => ({
handleNewProject: (values) => dispatch(handleNewProject(values))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(NewBilling);

49
frontend/src/containers/new-project/new-project.js
View File

@ -1,21 +1,9 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReduxForm = require('redux-form');
const selectors = require('@state/selectors');
const PropTypes = require('@root/prop-types');
const CreateProject = require('@components/new-project');
const {
connect
} = ReactRedux;
const {
reduxForm
} = ReduxForm;
const {
orgByIdSelector
} = selectors;
import React from 'react';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { orgByIdSelector } from '@state/selectors';
import PropTypes from '@root/prop-types';
import CreateProject from '@components/new-project';
const NewProjectForm = reduxForm({
form: 'create-project',
@ -23,18 +11,15 @@ const NewProjectForm = reduxForm({
forceUnregisterOnUnmount: true
})(CreateProject);
const NewProject = (props) => {
const {
org,
pushRoute
} = props;
const NewProject = ({
org,
router
}) => {
const onCancel = (values) =>
pushRoute(`/${org.id}/projects`);
router.push(`/${org.id}/projects`);
const onSubmit = (values) =>
pushRoute(`/${org.id}/new-project/billing`);
router.push(`/${org.id}/new-project/billing`);
return (
<NewProjectForm
@ -47,23 +32,21 @@ const NewProject = (props) => {
NewProject.propTypes = {
org: PropTypes.org.isRequired,
pushRoute: React.PropTypes.func
router: React.PropTypes.object
};
// TODO we'll need to know whether there any cards
// otherwise go to new billing straight away
const mapStateToProps = (state, {
match = {
params: {}
},
push
}
}) => ({
org: orgByIdSelector(match.params.org)(state),
pushRoute: push
org: orgByIdSelector(match.params.org)(state)
});
const mapDispatchToProps = (dispatch) => ({});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(NewProject);

18
frontend/src/containers/not-found/index.js
View File

@ -1,12 +1,8 @@
const React = require('react');
import React from 'react';
const NotFound = () => {
return (
<div>
<h1>404</h1>
<h4>Not Found</h4>
</div>
);
};
module.exports = NotFound;
export default () => (
<div>
<h1>404</h1>
<h4>Not Found</h4>
</div>
);

46
frontend/src/containers/org/index.js
View File

@ -1,35 +1,23 @@
const isEmpty = require('lodash.isempty');
const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router-dom');
import isEmpty from 'lodash.isempty';
import { connect } from 'react-redux';
import { Switch, Route } from 'react-router-dom';
import React from 'react';
const NotFound = require('@containers/not-found');
const PropTypes = require('@root/prop-types');
const Redirect = require('@components/redirect');
const selectors = require('@state/selectors');
const NewProject = require('@containers/new-project');
import NotFound from '@containers/not-found';
import PropTypes from '@root/prop-types';
import Redirect from '@components/redirect';
import { orgByIdSelector, orgSectionsSelector } from '@state/selectors';
import NewProject from '@containers/new-project';
import PeopleSection from './people';
import SettingsSection from './settings';
import ProjectSection from './projects';
const SectionComponents = {
people: require('./people'),
projects: require('./projects'),
settings: require('./settings')
people: PeopleSection,
settings: SettingsSection,
projects: ProjectSection
};
const {
connect
} = ReactRedux;
const {
Switch,
Route
} = ReactRouter;
const {
orgByIdSelector,
orgSectionsSelector
} = selectors;
const Org = ({
org = {},
sections = []
@ -82,4 +70,6 @@ const mapStateToProps = (state, ownProps) => ({
sections: orgSectionsSelector(ownProps.match.params.org)(state)
});
module.exports = connect(mapStateToProps)(Org);
export default connect(
mapStateToProps
)(Org);

38
frontend/src/containers/org/people.js
View File

@ -1,38 +1,29 @@
const React = require('react');
const ReactRedux = require('react-redux');
const PeopleSection = require('@components/people-list');
const selectors = require('@state/selectors');
const Section = require('./section');
const actions = require('@state/actions');
import React from 'react';
import { connect } from 'react-redux';
import PeopleSection from '@components/people-list';
import Section from './section';
const {
connect
} = ReactRedux;
const {
import {
peopleByOrgIdSelector,
orgUISelector,
orgIndexSelector,
membersSelector
} = selectors;
} from '@state/selectors';
const {
import {
addMemberToOrg,
orgHandleInviteToggle,
orgHandlePeopleRoleTooltip,
orgHandlePeopleStatusTooltip,
orgHandleMemberUpdate,
orgRemoveMember
} = actions;
} from '@state/actions';
const People = (props) => {
return (
<Section {...props}>
<PeopleSection {...props} />
</Section>
);
};
const People = (props) => (
<Section {...props}>
<PeopleSection {...props} />
</Section>
);
const mapStateToProps = (state, {
match = {
@ -58,10 +49,9 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(orgHandleMemberUpdate(updatedMember)),
removeMember: (removeData) =>
dispatch(orgRemoveMember(removeData))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(People);

18
frontend/src/containers/org/projects.js
View File

@ -1,16 +1,10 @@
const React = require('react');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Section from './section';
import Projects from '@containers/projects';
import Project from '@containers/project';
const Section = require('./section');
const Projects = require('@containers/projects');
const Project = require('@containers/project');
const {
Switch,
Route
} = ReactRouter;
module.exports = () => {
export default () => {
const list = (props) => (
<Section {...props}>
<Projects {...props} />

21
frontend/src/containers/org/section.js
View File

@ -1,18 +1,9 @@
const React = require('react');
const ReactRedux = require('react-redux');
import React from 'react';
import { connect } from 'react-redux';
const PropTypes = require('@root/prop-types');
const selectors = require('@state/selectors');
const Section = require('@components/section');
const {
connect
} = ReactRedux;
const {
orgByIdSelector,
orgSectionsSelector
} = selectors;
import PropTypes from '@root/prop-types';
import { orgByIdSelector, orgSectionsSelector } from '@state/selectors';
import Section from '@components/section';
const OrgSection = ({
children,
@ -47,6 +38,6 @@ const mapStateToProps = (state, ownProps) => ({
sections: orgSectionsSelector(ownProps.match.params.org)(state)
});
module.exports = connect(
export default connect(
mapStateToProps
)(OrgSection);

40
frontend/src/containers/org/settings.js
View File

@ -1,35 +1,17 @@
const React = require('react');
// const ReactIntl = require('react-intl');
const ReactRedux = require('react-redux');
// const ReactRouter = require('react-router-dom');
import React from 'react';
import { connect } from 'react-redux';
import Section from './section';
const Section = require('./section');
// const {
// FormattedMessage
// } = ReactIntl;
const {
connect
} = ReactRedux;
// const {
// Link,
// Match,
// Miss,
// Redirect
// } = ReactRouter;
const Settings = (props) => {
return (
<Section {...props}>
<p>settings</p>
</Section>
);
};
const Settings = (props) => (
<Section {...props}>
<p>settings</p>
</Section>
);
Settings.propTypes = {};
const mapStateToProps = (state) => ({});
module.exports = connect(mapStateToProps)(Settings);
export default connect(
mapStateToProps
)(Settings);

48
frontend/src/containers/project/index.js
View File

@ -1,33 +1,27 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { connect } from 'react-redux';
import { Switch, Route } from 'react-router-dom';
import PropTypes from '@root/prop-types';
import Redirect from '@components/redirect';
import ServicesSection from './services';
import InstancesSection from './instances';
import PeopleSection from './people';
import SettingsSection from './settings';
import ManifestSection from './manifest';
const PropTypes = require('@root/prop-types');
const Redirect = require('@components/redirect');
const selectors = require('@state/selectors');
const SectionComponents = {
services: require('./services'),
instances: require('./instances'),
people: require('./people'),
settings: require('./settings'),
manifest: require('./manifest')
};
const {
connect
} = ReactRedux;
const {
Switch,
Route
} = ReactRouter;
const {
import {
orgByIdSelector,
projectSectionsSelector,
projectByIdSelector
} = selectors;
} from '@state/selectors';
const SectionComponents = {
services: ServicesSection,
instances: InstancesSection,
people: PeopleSection,
settings: SettingsSection,
manifest: ManifestSection
};
const Project = ({
org = {},
@ -70,6 +64,6 @@ const mapStateToProps = (state, {
sections: projectSectionsSelector(state)
});
module.exports = connect(
export default connect(
mapStateToProps
)(Project);

31
frontend/src/containers/project/instances.js
View File

@ -1,24 +1,11 @@
const React = require('react');
const ReactRedux = require('react-redux');
const actions = require('@state/actions');
const EmptyInstances = require('@components/empty/instances');
const PropTypes = require('@root/prop-types');
const Section = require('./section');
const InstanceList = require('@components/instance-list');
const selectors = require('@state/selectors');
const {
toggleInstanceCollapsed
} = actions;
const {
connect
} = ReactRedux;
const {
instancesByProjectIdSelector
} = selectors;
import React from 'react';
import { connect } from 'react-redux';
import { toggleInstanceCollapsed } from '@state/actions';
import EmptyInstances from '@components/empty/instances';
import PropTypes from '@root/prop-types';
import Section from './section';
import InstanceList from '@components/instance-list';
import { instancesByProjectIdSelector } from '@state/selectors';
const Instances = (props) => {
const {
@ -58,7 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(Instances);

7
frontend/src/containers/project/manifest.js
View File

@ -1,8 +1,7 @@
const React = require('react');
import React from 'react';
import Section from './section';
const Section = require('./section');
module.exports = (props) => (
export default (props) => (
<Section {...props}>
<p>manifest</p>
</Section>

25
frontend/src/containers/project/people.js
View File

@ -1,29 +1,23 @@
const React = require('react');
const ReactRedux = require('react-redux');
const PeopleSection = require('@components/people-list');
const selectors = require('@state/selectors');
const Section = require('./section');
const actions = require('@state/actions');
import React from 'react';
import { connect } from 'react-redux';
import PeopleSection from '@components/people-list';
import Section from './section';
const {
connect
} = ReactRedux;
const {
import {
peopleByProjectIdSelector,
projectUISelector,
projectIndexByIdSelect,
membersSelector
} = selectors;
} from '@state/selectors';
const {
import {
addMemberToProject,
projectHandleInviteToggle,
projectHandlePeopleRoleTooltip,
projectHandlePeopleStatusTooltip,
projectHandleMemberUpdate,
projectRemoveMember
} = actions;
} from '@state/actions';
const People = (props) => (
<Section {...props}>
@ -53,10 +47,9 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(projectHandleMemberUpdate(updatedMember)),
removeMember: (removeData) =>
dispatch(projectRemoveMember(removeData))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(People);

20
frontend/src/containers/project/section.js
View File

@ -1,19 +1,13 @@
const React = require('react');
const ReactRedux = require('react-redux');
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from '@root/prop-types';
import Section from '@components/section';
const PropTypes = require('@root/prop-types');
const selectors = require('@state/selectors');
const Section = require('@components/section');
const {
connect
} = ReactRedux;
const {
import {
orgByIdSelector,
projectByIdSelector,
projectSectionsSelector
} = selectors;
} from '@state/selectors';
const ProjectSection = ({
children,
@ -66,6 +60,6 @@ const mapStateToProps = (state, {
sections: projectSectionsSelector(state)
});
module.exports = connect(
export default connect(
mapStateToProps
)(ProjectSection);

18
frontend/src/containers/project/services.js
View File

@ -1,16 +1,10 @@
const React = require('react');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Section from './section';
import Services from '@containers/services';
import Service from '@containers/service';
const Section = require('./section');
const Services = require('@containers/services');
const Service = require('@containers/service');
const {
Switch,
Route
} = ReactRouter;
module.exports = () => {
export default () => {
const list = (props) => (
<Section {...props}>
<Services {...props} />

7
frontend/src/containers/project/settings.js
View File

@ -1,8 +1,7 @@
const React = require('react');
import React from 'react';
import Section from './section';
const Section = require('./section');
module.exports = (props) => (
export default (props) => (
<Section {...props}>
<p>settings</p>
</Section>

46
frontend/src/containers/projects/index.js
View File

@ -1,34 +1,18 @@
const React = require('react');
const ReactIntl = require('react-intl');
const ReactRedux = require('react-redux');
const Button = require('@ui/components/button');
const Column = require('@ui/components/column');
const NavLink = require('@ui/components/nav-link');
const EmptyProjects = require('@components/empty/projects');
const PropTypes = require('@root/prop-types');
const Row = require('@ui/components/row');
const selectors = require('@state/selectors');
const {
connect
} = ReactRedux;
const {
FormattedMessage
} = ReactIntl;
const {
orgByIdSelector,
projectsByOrgIdSelector
} = selectors;
const Projects = (props) => {
const {
org = {},
projects = []
} = props;
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import Button from '@ui/components/button';
import Column from '@ui/components/column';
import NavLink from '@ui/components/nav-link';
import { orgByIdSelector, projectsByOrgIdSelector } from '@state/selectors';
import EmptyProjects from '@components/empty/projects';
import PropTypes from '@root/prop-types';
import Row from '@ui/components/row';
const Projects = ({
org = {},
projects = []
}) => {
const empty = projects.length ? null : (
<EmptyProjects />
);
@ -77,6 +61,6 @@ const mapStateToProps = (state, {
projects: projectsByOrgIdSelector(match.params.org)(state)
});
module.exports = connect(
export default connect(
mapStateToProps
)(Projects);

4
frontend/src/containers/service/activity-feed.js
View File

@ -1,5 +1,5 @@
const React = require('react');
import React from 'react';
module.exports = () => (
export default () => (
<p>activity-feed</p>
);

4
frontend/src/containers/service/firewall.js
View File

@ -1,5 +1,5 @@
const React = require('react');
import React from 'react';
module.exports = () => (
export default () => (
<p>firewall</p>
);

53
frontend/src/containers/service/index.js
View File

@ -1,38 +1,35 @@
const React = require('react');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router-dom');
const PropTypes = require('@root/prop-types');
const Redirect = require('@components/redirect');
const Section = require('@components/section');
const selectors = require('@state/selectors');
import React from 'react';
import { connect } from 'react-redux';
import { Switch, Route } from 'react-router-dom';
import PropTypes from '@root/prop-types';
import Redirect from '@components/redirect';
import Section from '@components/section';
import SummarySection from './summary';
import InstancesSection from './instances';
import MetricsSection from './metrics';
import NetworksSection from './networks';
import TagsMetadataSection from './tags-metadata';
import ActivityFeedSection from './activity-feed';
import ServiceManifestSection from './service-manifest';
import FirewallSection from './firewall';
const SectionComponents = {
summary: require('./summary'),
instances: require('./instances'),
metrics: require('./metrics'),
networks: require('./networks'),
'tags-metadata': require('./tags-metadata'),
'activity-feed': require('./activity-feed'),
'service-manifest': require('./service-manifest'),
firewall: require('./firewall')
summary: SummarySection,
instances: InstancesSection,
metrics: MetricsSection,
networks: NetworksSection,
'tags-metadata': TagsMetadataSection,
'activity-feed': ActivityFeedSection,
'service-manifest': ServiceManifestSection,
firewall: FirewallSection
};
const {
connect
} = ReactRedux;
const {
Switch,
Route
} = ReactRouter;
const {
import {
orgByIdSelector,
serviceSectionsSelector,
projectByIdSelector,
serviceByIdSelector
} = selectors;
} from '@state/selectors';
const Service = ({
org = {},
@ -118,6 +115,6 @@ const mapStateToProps = (state, {
service: serviceByIdSelector(match.params.serviceId)(state)
});
module.exports = connect(
export default connect(
mapStateToProps
)(Service);

39
frontend/src/containers/service/instances.js
View File

@ -1,30 +1,15 @@
const React = require('react');
const ReactRedux = require('react-redux');
const actions = require('@state/actions');
const EmptyInstances = require('@components/empty/instances');
const PropTypes = require('@root/prop-types');
const InstanceList = require('@components/instance-list');
const selectors = require('@state/selectors');
const {
toggleInstanceCollapsed
} = actions;
const {
connect
} = ReactRedux;
const {
instancesByServiceIdSelector
} = selectors;
const Instances = (props) => {
const {
instances = [],
toggleCollapsed = () => null
} = props;
import React from 'react';
import { connect } from 'react-redux';
import { toggleInstanceCollapsed } from '@state/actions';
import EmptyInstances from '@components/empty/instances';
import PropTypes from '@root/prop-types';
import InstanceList from '@components/instance-list';
import { instancesByServiceIdSelector } from '@state/selectors';
const Instances = ({
instances = [],
toggleCollapsed = () => null
}) => {
const empty = instances.length ? null : (
<EmptyInstances />
);
@ -57,7 +42,7 @@ const mapDispatchToProps = (dispatch) => ({
toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps
)(Instances);

36
frontend/src/containers/service/metrics.js
View File

@ -1,23 +1,12 @@
const ReactRedux = require('react-redux');
import { connect } from 'react-redux';
import { addMetric, metricDurationChange } from '@state/actions';
import Metrics from '@containers/metrics';
const actions = require('@state/actions');
const Metrics = require('@containers/metrics');
const selectors = require('@state/selectors');
const {
connect
} = ReactRedux;
const {
import {
metricsByServiceIdSelector,
metricTypesSelector,
serviceByIdSelector
} = selectors;
const {
addMetric,
metricDurationChange
} = actions;
} from '@state/selectors';
const mapStateToProps = (state, {
match = {
@ -30,12 +19,13 @@ const mapStateToProps = (state, {
});
const mapDispatchToProps = (dispatch) => ({
addMetric: (service) => (metric) => dispatch(addMetric({
metric: metric,
service: service.uuid
})),
metricDurationChange: (service) =>
(duration, dataset) => dispatch(metricDurationChange({
addMetric: (service) => (metric) =>
dispatch(addMetric({
metric: metric,
service: service.uuid
})),
metricDurationChange: (service) => (duration, dataset) =>
dispatch(metricDurationChange({
duration,
dataset
}))
@ -49,7 +39,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
metricDurationChange: dispatchProps.metricDurationChange(stateProps.service)
});
module.exports = connect(
export default connect(
mapStateToProps,
mapDispatchToProps,
mergeProps

4
frontend/src/containers/service/networks.js
View File

@ -1,5 +1,5 @@
const React = require('react');
import React from 'react';
module.exports = () => (
export default () => (
<p>networks</p>
);

4
frontend/src/containers/service/service-manifest.js
View File

@ -1,5 +1,5 @@
const React = require('react');
import React from 'react';
module.exports = () => (
export default () => (
<p>service-manifest</p>
);

4
frontend/src/containers/service/summary.js
View File

@ -1,5 +1,5 @@
const React = require('react');
import React from 'react';
module.exports = () => (
export default () => (
<p>summary</p>
);

4
frontend/src/containers/service/tags-metadata.js
View File

@ -1,5 +1,5 @@
const React = require('react');
import React from 'react';
module.exports = () => (
export default () => (
<p>tags-metadata</p>
);

37
frontend/src/containers/services/index.js
View File

@ -1,30 +1,19 @@
const React = require('react');
const ReactRedux = require('react-redux');
import React from 'react';
import { connect } from 'react-redux';
import EmptyServices from '@components/empty/services';
import PropTypes from '@root/prop-types';
import ServiceItem from '@components/service/item';
import ServiceViewToggle from '@components/service/view-toggle';
import Row from '@ui/components/row';
import Column from '@ui/components/column';
import { H2 } from '@ui/components/base-elements';
const EmptyServices = require('@components/empty/services');
const PropTypes = require('@root/prop-types');
const ServiceItem = require('@components/service/item');
const ServiceViewToggle = require('@components/service/view-toggle');
const selectors = require('@state/selectors');
const Row = require('@ui/components/row');
const Column = require('@ui/components/column');
const BaseELements = require('@ui/components/base-elements');
const {
connect
} = ReactRedux;
const {
import {
orgByIdSelector,
projectByIdSelector,
servicesByProjectIdSelector,
servicesForTopologySelector
} = selectors;
const {
H2
} = BaseELements;
} from '@state/selectors';
const Services = ({
org = {},
@ -49,9 +38,7 @@ const Services = ({
<Row>
<Column xs={12}>
<H2>Services</H2>
<ServiceViewToggle />
{empty}
{serviceList}
</Column>
@ -78,6 +65,6 @@ const mapStateToProps = (state, {
servicesForTopologySelector(match.params.projectId)(state)
});
module.exports = connect(
export default connect(
mapStateToProps
)(Services);

20
frontend/src/index.js
View File

@ -1,6 +1,7 @@
const a11y = require('react-a11y');
const ReactDOM = require('react-dom');
const React = require('react');
import a11y from 'react-a11y';
import ReactDOM from 'react-dom';
import React from 'react';
import Root from './root';
if (process.env.NODE_ENV !== 'production') {
a11y(React, {
@ -8,12 +9,7 @@ if (process.env.NODE_ENV !== 'production') {
});
}
const render = () => {
const Root = require('./root');
ReactDOM.render(
<Root />,
document.getElementById('root')
);
};
render();
ReactDOM.render(
<Root />,
document.getElementById('root')
);

14
frontend/src/intl.js
View File

@ -1,11 +1,7 @@
const qs = require('querystring');
const ReactIntl = require('react-intl');
import qs from 'querystring';
import { addLocaleData } from 'react-intl';
const {
addLocaleData
} = ReactIntl;
module.exports = (({
export default (({
Locales = {},
ReactIntlLocaleData = {}
}) => {
@ -18,13 +14,13 @@ module.exports = (({
// http://stackoverflow.com/a/38150585
const detectedLocale = (
qs.parse((document.location.search || '').replace(/^\?/, '')).locale ||
navigator.languages && navigator.languages[0] || // Chrome / Firefox
(navigator.languages && navigator.languages[0]) || // Chrome / Firefox
navigator.language || // All browsers
navigator.userLanguage || // IE <= 10
'en-US'
).toLowerCase();
const lang = detectedLocale.split(/\-/)[0];
const lang = detectedLocale.split(/-/)[0];
const locale = ReactIntlLocaleData[lang]
? (Locales[detectedLocale] ? detectedLocale : 'en-us')
: 'en-us';

4
frontend/src/prop-types.js
View File

@ -1,4 +1,4 @@
const React = require('react');
import React from 'react';
const BaseObject = {
uuid: React.PropTypes.string,
@ -64,7 +64,7 @@ const Sections = React.PropTypes.arrayOf(
React.PropTypes.string
);
module.exports = {
export default {
account: Account,
link: Link,
org: Org,

47
frontend/src/root.js
View File

@ -1,33 +1,18 @@
const React = require('react');
const ReactIntlRedux = require('react-intl-redux');
const ReactRedux = require('react-redux');
const ReactRouter = require('react-router-dom');
import React from 'react';
import { IntlProvider } from 'react-intl-redux';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
const App = require('@containers/app');
const Store = require('@state/store');
import App from '@containers/app';
import Store from '@state/store';
import MockState from './mock-state.json';
const {
IntlProvider
} = ReactIntlRedux;
const {
Provider
} = ReactRedux;
const {
BrowserRouter
} = ReactRouter;
const store = Store(require('./mock-state.json'));
module.exports = () => {
return (
<Provider store={store}>
<IntlProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</IntlProvider>
</Provider>
);
};
export default () => (
<Provider store={Store(MockState)}>
<IntlProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</IntlProvider>
</Provider>
);

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

@ -1,62 +1,56 @@
const constantCase = require('constant-case');
const ReduxActions = require('redux-actions');
const {
createAction
} = ReduxActions;
import constantCase from 'constant-case';
import { createAction } from 'redux-actions';
// import thunks from '@state/thunks';
const APP = constantCase(process.env['APP_NAME']);
const projectMemberActions = {
addMemberToProject:
createAction(`${APP}/PROJECT_ADD_MEMBER`),
projectHandleInviteToggle:
createAction(`${APP}/PROJECT_HANDLE_INVITE_MEMBER_TOGGLE`),
projectHandlePeopleStatusTooltip:
createAction(`${APP}/PROJECT_HANDLE_PERSON_STATUS_TOOLTIP`),
projectHandlePeopleRoleTooltip:
createAction(`${APP}/PROJECT_HANDLE_PERSON_ROLE_TOOLTIP`),
projectHandleMemberUpdate:
createAction(`${APP}/PROJECT_HANDLE_MEMBER_UPDATE`),
projectRemoveMember:
createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`)
};
/******************************* PROJECT MEMBER *******************************/
const orgMemberActions = {
addMemberToOrg:
createAction(`${APP}/ORG_ADD_MEMBER`),
orgHandleInviteToggle:
createAction(`${APP}/ORG_HANDLE_INVITE_MEMBER_TOGGLE`),
orgHandlePeopleStatusTooltip:
createAction(`${APP}/ORG_HANDLE_PERSON_STATUS_TOOLTIP`),
orgHandlePeopleRoleTooltip:
createAction(`${APP}/ORG_HANDLE_PERSON_ROLE_TOOLTIP`),
orgHandleMemberUpdate:
createAction(`${APP}/ORG_HANDLE_MEMBER_UPDATE`),
orgRemoveMember:
createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`)
};
export const addMemberToProject =
createAction(`${APP}/PROJECT_ADD_MEMBER`);
export const projectHandleInviteToggle =
createAction(`${APP}/PROJECT_HANDLE_INVITE_MEMBER_TOGGLE`);
export const projectHandlePeopleStatusTooltip =
createAction(`${APP}/PROJECT_HANDLE_PERSON_STATUS_TOOLTIP`);
export const projectHandlePeopleRoleTooltip =
createAction(`${APP}/PROJECT_HANDLE_PERSON_ROLE_TOOLTIP`);
export const projectHandleMemberUpdate =
createAction(`${APP}/PROJECT_HANDLE_MEMBER_UPDATE`);
export const projectRemoveMember =
createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`);
module.exports = {
...require('@state/thunks'),
updateRouter:
createAction(`${APP}/UPDATE_ROUTER`),
toggleHeaderTooltip:
createAction(`${APP}/TOGGLE_HEADER_TOOLTIP`),
toggleServiceCollapsed:
createAction(`${APP}/TOGGLE_SERVICE_COLLAPSED`),
addMetric:
createAction(`${APP}/ADD_METRIC`),
metricDurationChange:
createAction(`${APP}/METRIC_DURATION_CHANGE`),
toggleInstanceCollapsed:
createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView:
createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
switchMonitorViewPage:
createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
handleNewProject:
createAction(`${APP}/CREATE_NEW_PROJECT`),
...orgMemberActions,
...projectMemberActions
};
/********************************* ORG MEMBER *********************************/
export const addMemberToOrg =
createAction(`${APP}/ORG_ADD_MEMBER`);
export const orgHandleInviteToggle =
createAction(`${APP}/ORG_HANDLE_INVITE_MEMBER_TOGGLE`);
export const orgHandlePeopleStatusTooltip =
createAction(`${APP}/ORG_HANDLE_PERSON_STATUS_TOOLTIP`);
export const orgHandlePeopleRoleTooltip =
createAction(`${APP}/ORG_HANDLE_PERSON_ROLE_TOOLTIP`);
export const orgHandleMemberUpdate =
createAction(`${APP}/ORG_HANDLE_MEMBER_UPDATE`);
export const orgRemoveMember =
createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`);
/*********************************** OTHER ***********************************/
export const updateRouter =
createAction(`${APP}/UPDATE_ROUTER`);
export const toggleHeaderTooltip =
createAction(`${APP}/TOGGLE_HEADER_TOOLTIP`);
export const toggleServiceCollapsed =
createAction(`${APP}/TOGGLE_SERVICE_COLLAPSED`);
export const addMetric =
createAction(`${APP}/ADD_METRIC`);
export const metricDurationChange =
createAction(`${APP}/METRIC_DURATION_CHANGE`);
export const toggleInstanceCollapsed =
createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`);
export const toggleMonitorView =
createAction(`${APP}/TOGGLE_MONITOR_VIEW`);
export const switchMonitorViewPage =
createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`);
export const handleNewProject =
createAction(`${APP}/CREATE_NEW_PROJECT`);

15
frontend/src/state/reducers/account.js
View File

@ -1,16 +1,7 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
import { toggleHeaderTooltip } from '@state/actions';
const actions = require('@state/actions');
const {
handleActions
} = ReduxActions;
const {
toggleHeaderTooltip
} = actions;
module.exports = handleActions({
export default handleActions({
[toggleHeaderTooltip.toString()]: (state, action) => {
return {
...state,

15
frontend/src/state/reducers/app.js
View File

@ -1,16 +1,7 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
import { updateRouter } from '@state/actions';
const actions = require('@state/actions');
const {
handleActions
} = ReduxActions;
const {
updateRouter
} = actions;
module.exports = handleActions({
export default handleActions({
[updateRouter.toString()]: (state, action) => {
return {
...state,

2
frontend/src/state/reducers/common.js
View File

@ -20,6 +20,6 @@ const toggleCollapsed = (state, action) => {
};
};
module.exports = {
export {
toggleCollapsed
};

40
frontend/src/state/reducers/index.js
View File

@ -1,22 +1,30 @@
const Redux = require('redux');
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
const {
combineReducers
} = Redux;
import account from '@state/reducers/account';
import app from '@state/reducers/app';
import instances from '@state/reducers/instances';
import intl from '@state/reducers/intl';
import metrics from '@state/reducers/metrics';
import monitors from '@state/reducers/monitors';
import orgs from '@state/reducers/orgs';
import projects from '@state/reducers/projects';
import services from '@state/reducers/services';
import members from '@state/reducers/members';
module.exports = () => {
export default () => {
return combineReducers({
account: require('@state/reducers/account'),
app: require('@state/reducers/app'),
account,
app,
datacenters: (state = {}) => state,
form: require('redux-form').reducer,
instances: require('@state/reducers/instances'),
intl: require('@state/reducers/intl'),
metrics: require('@state/reducers/metrics'),
monitors: require('@state/reducers/monitors'),
orgs: require('@state/reducers/orgs'),
projects: require('@state/reducers/projects'),
services: require('@state/reducers/services'),
members: require('@state/reducers/members')
form,
instances,
intl,
metrics,
monitors,
orgs,
projects,
services,
members
});
};

21
frontend/src/state/reducers/instances.js
View File

@ -1,20 +1,7 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
import { toggleInstanceCollapsed } from '@state/actions';
import { toggleCollapsed } from '@state/reducers/common';
const actions = require('@state/actions');
const common = require('@state/reducers/common');
const {
handleActions
} = ReduxActions;
const {
toggleInstanceCollapsed
} = actions;
const {
toggleCollapsed
} = common;
module.exports = handleActions({
export default handleActions({
[toggleInstanceCollapsed.toString()]: toggleCollapsed
}, {});

11
frontend/src/state/reducers/intl.js
View File

@ -1,9 +1,6 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
import initialState from '@root/intl';
const {
handleActions
} = ReduxActions;
module.exports = handleActions({
export default handleActions({
'x': (state) => state // somehow handleActions needs at least one reducer
}, require('@root/intl'));
}, initialState);

8
frontend/src/state/reducers/members.js
View File

@ -1,9 +1,5 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
const {
handleActions
} = ReduxActions;
module.exports = handleActions({
export default handleActions({
'x': (state) => state // somehow handleActions needs at least one reducer
}, {});

15
frontend/src/state/reducers/metrics.js
View File

@ -1,16 +1,7 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
import { metricDurationChange } from '@state/actions';
const actions = require('@state/actions');
const {
handleActions
} = ReduxActions;
const {
metricDurationChange
} = actions;
module.exports = handleActions({
export default handleActions({
[metricDurationChange.toString()]: (state, action) => {
return ({
...state,

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

@ -1,17 +1,7 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
import { toggleMonitorView, switchMonitorViewPage } from '@state/actions';
const actions = require('@state/actions');
const {
handleActions
} = ReduxActions;
const {
toggleMonitorView,
switchMonitorViewPage
} = actions;
module.exports = handleActions({
export default handleActions({
[toggleMonitorView.toString()]: (state, action) => ({
...state,
ui: {

15
frontend/src/state/reducers/orgs.js
View File

@ -1,23 +1,16 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
const actions = require('@state/actions');
const {
handleActions
} = ReduxActions;
const {
import {
addMemberToOrg,
orgHandleInviteToggle,
orgHandlePeopleRoleTooltip,
orgHandlePeopleStatusTooltip,
orgHandleMemberUpdate,
orgRemoveMember
} = actions;
} from '@state/actions';
module.exports = handleActions({
export default handleActions({
[addMemberToOrg.toString()]: (state, action) => {
const {
parentIndex,
member

83
frontend/src/state/reducers/projects.js
View File

@ -1,13 +1,7 @@
const ReduxActions = require('redux-actions');
import { handleActions } from 'redux-actions';
import { rndId } from '@ui/shared/functions';
const actions = require('@state/actions');
const fns = require('@ui/shared/functions');
const {
handleActions
} = ReduxActions;
const {
import {
addMemberToProject,
projectHandleInviteToggle,
projectHandlePeopleRoleTooltip,
@ -15,15 +9,10 @@ const {
projectHandleMemberUpdate,
projectRemoveMember,
handleNewProject
} = actions;
} from '@state/actions';
const {
rndId
} = fns;
module.exports = handleActions({
export default handleActions({
[addMemberToProject.toString()]: (state, action) => {
const {
parentIndex,
member
@ -44,45 +33,40 @@ module.exports = handleActions({
]
};
},
[projectHandleInviteToggle.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
invite_toggled: !state.ui.invite_toggled
}
};
},
[projectHandlePeopleStatusTooltip.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
member_status_tooltip:
action.payload === state.ui.member_status_tooltip
? ''
: action.payload
}
};
},
[projectHandlePeopleRoleTooltip.toString()]: (state, action) => {
return {
...state,
ui: {
...state.ui,
member_role_tooltip:
action.payload === state.ui.member_role_tooltip
? ''
: action.payload
}
};
},
[projectHandleInviteToggle.toString()]: (state, action) => ({
...state,
ui: {
...state.ui,
invite_toggled: !state.ui.invite_toggled
}
}),
[projectHandlePeopleStatusTooltip.toString()]: (state, action) => ({
...state,
ui: {
...state.ui,
member_status_tooltip:
action.payload === state.ui.member_status_tooltip
? ''
: action.payload
}
}),
[projectHandlePeopleRoleTooltip.toString()]: (state, action) => ({
...state,
ui: {
...state.ui,
member_role_tooltip:
action.payload === state.ui.member_role_tooltip
? ''
: action.payload
}
}),
[projectHandleMemberUpdate.toString()]: (state, action) => {
const {
parentIndex,
person,
personIndex
} = action.payload;
return {
...state,
ui: {
@ -132,6 +116,7 @@ module.exports = handleActions({
org,
values
} = action.payload;
return {
...state,
data: [

42
frontend/src/state/reducers/services.js
View File

@ -1,20 +1,6 @@
const ReduxActions = require('redux-actions');
const actions = require('@state/actions');
const common = require('@state/reducers/common');
const {
handleActions
} = ReduxActions;
const {
addMetric,
toggleServiceCollapsed
} = actions;
const {
toggleCollapsed
} = common;
import { handleActions } from 'redux-actions';
import { addMetric, toggleServiceCollapsed } from '@state/actions';
import { toggleCollapsed } from '@state/reducers/common';
const getMetrics = (stateMetrics, addMetric, metric) => {
const metrics = stateMetrics.map((m) => {
@ -22,11 +8,13 @@ const getMetrics = (stateMetrics, addMetric, metric) => {
...m
});
});
if(addMetric) {
metrics.push({
type: metric
});
}
return metrics;
};
@ -43,18 +31,16 @@ const getServices = (stateServices, service, metric) => {
});
};
module.exports = handleActions({
export default handleActions({
[toggleServiceCollapsed.toString()]: toggleCollapsed,
// This will need to be handled by an async action
// to update on the server too
[addMetric.toString()]: (state, action) => {
return ({
...state,
data: getServices(
state.data,
action.payload.service,
action.payload.metric
)
});
}
[addMetric.toString()]: (state, action) => ({
...state,
data: getServices(
state.data,
action.payload.service,
action.payload.metric
)
})
}, {});

64
frontend/src/state/selectors.js
View File

@ -1,11 +1,7 @@
const find = require('lodash.find');
const forceArray = require('force-array');
const get = require('lodash.get');
const reselect = require('reselect');
const {
createSelector
} = reselect;
import find from 'lodash.find';
import forceArray from 'force-array';
import get from 'lodash.get';
import { createSelector } from 'reselect';
const account = (state) => get(state, 'account.data', {});
const accountUi = (state) => get(state, 'account.ui', {});
@ -201,30 +197,30 @@ const peopleByProjectId = (projectId) => createSelector(
}
);
module.exports = {
accountSelector: account,
accountUISelector: accountUi,
orgByIdSelector: orgById,
orgsSelector: orgs,
orgUISelector: orgUI,
orgIndexSelector: orgIndexById,
servicesSelector: services,
serviceByIdSelector: serviceById,
orgSectionsSelector: orgSections,
projectSectionsSelector: projectUiSections,
serviceSectionsSelector: serviceUiSections,
projectsByOrgIdSelector: projectsByOrgId,
projectByIdSelector: projectById,
servicesByProjectIdSelector: servicesByProjectId,
servicesForTopologySelector: servicesForTopology,
instancesByServiceIdSelector: instancesByServiceId,
metricsByServiceIdSelector: metricsByServiceId,
metricTypesSelector: metricTypes,
instancesByProjectIdSelector: instancesByProjectId,
metricTypeByUuidSelector: metricTypeByUuid,
peopleByOrgIdSelector: peopleByOrgId,
membersSelector: members,
peopleByProjectIdSelector: peopleByProjectId,
projectUISelector: projectsUI,
projectIndexByIdSelect: projectIndexById
export {
account as accountSelector,
accountUi as accountUISelector,
orgById as orgByIdSelector,
orgs as orgsSelector,
orgUI as orgUISelector,
orgIndexById as orgIndexSelector,
services as servicesSelector,
serviceById as serviceByIdSelector,
orgSections as orgSectionsSelector,
projectUiSections as projectSectionsSelector,
serviceUiSections as serviceSectionsSelector,
projectsByOrgId as projectsByOrgIdSelector,
projectById as projectByIdSelector,
servicesByProjectId as servicesByProjectIdSelector,
servicesForTopology as servicesForTopologySelector,
instancesByServiceId as instancesByServiceIdSelector,
metricsByServiceId as metricsByServiceIdSelector,
metricTypes as metricTypesSelector,
instancesByProjectId as instancesByProjectIdSelector,
metricTypeByUuid as metricTypeByUuidSelector,
peopleByOrgId as peopleByOrgIdSelector,
members as membersSelector,
peopleByProjectId as peopleByProjectIdSelector,
projectsUI as projectUISelector,
projectIndexById as projectIndexByIdSelect
};

20
frontend/src/state/store.js
View File

@ -1,20 +1,14 @@
const createLogger = require('redux-logger');
const enableBatching = require('redux-batched-actions').enableBatching;
const promiseMiddleware = require('redux-promise-middleware').default;
const redux = require('redux');
const thunk = require('redux-thunk').default;
import createLogger from 'redux-logger';
import { enableBatching } from 'redux-batched-actions';
import promiseMiddleware from 'redux-promise-middleware';
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const createReducer = require('@state/reducers');
const {
createStore,
compose,
applyMiddleware
} = redux;
import createReducer from '@state/reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
module.exports = (state = Object.freeze({})) => {
export default (state = Object.freeze({})) => {
return createStore(
enableBatching(createReducer()),
state,

2
frontend/src/state/thunks/app.js
View File

@ -1 +1 @@
module.exports = {};
export {};

6
frontend/src/state/thunks/index.js
View File

@ -1,3 +1,3 @@
module.exports = {
...require('@state/thunks/app')
};
// import app from '@state/thunks/app';
export {};

2
frontend/src/utils/form/normalize.js
View File

@ -65,7 +65,7 @@ const normalizeCardExpiry = (value, previousValue) => {
return n.slice(0, 2) + '/' + n.slice(2, 4);
};
module.exports = {
export {
normalizeCardNumber,
normalizeCardCVV,
normalizeCardExpiry

2
frontend/test/_hook.js
View File

@ -36,4 +36,4 @@ requireHacker.global_hook('inline-svgs', (path) => {
if(path.match(/!babel-loader!svg-react-loader/)) {
return `module.exports = ${fakeComponentString}`;
}
});
});

6
frontend/test/components/index.js
View File

@ -7,19 +7,19 @@ const {
} = enzyme;
test('renders <App> without exploding', (t) => {
const App = require('@containers/app');
const App = require('@containers/app').default;
const wrapper = shallow(<App />);
t.deepEqual(wrapper.length, 1);
});
test('renders <Home> without exploding', (t) => {
const Home = require('@containers/home').WrappedComponent;
const Home = require('@containers/home').default.WrappedComponent;
const wrapper = shallow(<Home />);
t.deepEqual(wrapper.length, 1);
});
test('renders <NotFound> without exploding', (t) => {
const NotFound = require('@containers/not-found');
const NotFound = require('@containers/not-found').default;
const wrapper = shallow(<NotFound />);
t.deepEqual(wrapper.length, 1);
});

3
frontend/test/components/project-section.js
View File

@ -13,7 +13,8 @@ const {
} = create;
test('renders <ProjectSection> without exploding', (t) => {
const Section = require('@containers/project/section').WrappedComponent;
// eslint-disable-next-line max-len
const Section = require('@containers/project/section').default.WrappedComponent;
const wrapper = render(withIntl(<Section />));
t.deepEqual(wrapper.length, 1);
});

8
frontend/test/components/projects.js
View File

@ -14,13 +14,13 @@ const {
} = create;
test('renders <Projects> without exploding', (t) => {
const Projects = require('@containers/projects').WrappedComponent;
const Projects = require('@containers/projects').default.WrappedComponent;
const wrapper = render(withIntl(<Projects />));
t.deepEqual(wrapper.length, 1);
});
test('renders connected <Projects> without exploding', (t) => {
const Projects = require('@containers/projects');
const Projects = require('@containers/projects').default;
const wrapper = render(create(<Projects />));
t.deepEqual(wrapper.length, 1);
});
@ -40,7 +40,7 @@ test('renders <Projects>\'s list of projects ', (t) => {
plan: '100.17$ per day'
}];
const Projects = require('@containers/projects').WrappedComponent;
const Projects = require('@containers/projects').default.WrappedComponent;
const wrapper = render(withRouter(withIntl(
<Projects projects={projects} />
)));
@ -55,7 +55,7 @@ test('renders <Projects>\'s list of projects ', (t) => {
});
test('renders <Projects>\'s empty <p> when no projects ', (t) => {
const Projects = require('@containers/projects').WrappedComponent;
const Projects = require('@containers/projects').default.WrappedComponent;
const wrapper = render(withIntl(<Projects />));
const empty = wrapper.find('p[name=empty]');

4
frontend/test/components/service.js
View File

@ -14,13 +14,13 @@ const {
} = create;
test('renders <Service> without exploding', (t) => {
const Service = require('@containers/service').WrappedComponent;
const Service = require('@containers/service').default.WrappedComponent;
const wrapper = render(withRouter(withIntl(<Service />)));
t.deepEqual(wrapper.length, 1);
});
test('renders connected <Service> without exploding', (t) => {
const Service = require('@containers/service');
const Service = require('@containers/service').default;
const wrapper = render(create(<Service />));
t.deepEqual(wrapper.length, 1);
});

4
frontend/test/components/services.js
View File

@ -13,13 +13,13 @@ const {
} = create;
test('renders <Services> without exploding', (t) => {
const Services = require('@containers/services').WrappedComponent;
const Services = require('@containers/services').default.WrappedComponent;
const wrapper = render(withIntl(<Services />));
t.deepEqual(wrapper.length, 1);
});
test('renders connected <Services> without exploding', (t) => {
const Services = require('@containers/services');
const Services = require('@containers/services').default;
const wrapper = render(create(<Services />));
t.deepEqual(wrapper.length, 1);
});

2
frontend/test/helpers/create.js
View File

@ -2,7 +2,7 @@ const React = require('react');
const ReactRedux = require('react-redux');
const ReactIntl = require('react-intl');
const ReactRouter = require('react-router-dom');
const createStore = require('@state/store');
const createStore = require('@state/store').default;
const {
addLocaleData,

38
frontend/test/reducers/app.js
View File

@ -1,21 +1,23 @@
const ReduxAva = require('redux-ava');
// const ReduxAva = require('redux-ava');
const test = require('ava');
//
// const reducer = require('@state/reducers/app');
// const actions = require('@state/actions');
//
// const {
// reducerTest
// } = ReduxAva;
//
// const {
// updateRouter
// } = actions;
const reducer = require('@state/reducers/app');
const actions = require('@state/actions');
// test('updateReducer', reducerTest(reducer, {}, updateRouter({
// transitionTo: '[Function]'
// }), {
// router: {
// transitionTo: '[Function]'
// }
// }));
const {
reducerTest
} = ReduxAva;
const {
updateRouter
} = actions;
test('updateReducer', reducerTest(reducer, {}, updateRouter({
transitionTo: '[Function]'
}), {
router: {
transitionTo: '[Function]'
}
}));
test('updateReducer', (t) => t.deepEqual(1, 1));

8
frontend/webpack/.eslintrc Normal file
View File

@ -0,0 +1,8 @@
{
"extends": [
"react-app"
],
"rules": {
"import/no-webpack-loader-syntax": 1
}
}

11
frontend/webpack/base.js
View File

@ -9,7 +9,8 @@ const {
MODULES,
FRONTEND,
UI,
STATIC
STATIC,
ESLINT
} = paths;
module.exports = {
@ -37,7 +38,6 @@ module.exports = {
filename: '[name].js'
},
plugins: [
plugins['no-errors'](),
plugins['define'](),
plugins['shell']()
],
@ -48,12 +48,7 @@ module.exports = {
use: [{
loader: 'eslint-loader',
options: {
presets: [
'react-app'
],
rules: {
'no-debugger': 1
}
configFile: ESLINT
}
}],
include: [

Some files were not shown because too many files have changed in this diff Show More