adding in eslint for trailing commas

frontend/.eslintrc

@@ -118,6 +118,7 @@
     "max-len": [2, 80],
     "no-eq-null": 2,
     "block-scoped-var": 2,
-    "no-console": 0
+    "no-console": 0,
+    "comma-dangle": ["error", "never"]
   }
 }

frontend/src/components/breadcrumb/index.js

@@ -16,11 +16,11 @@ const {
 } = fns;
 
 const {
-  colors,
+  colors
 } = constants;
 
 const {
-  H2,
+  H2
 } = BaseElements;
 
 const {

frontend/src/components/empty/services.js

@@ -14,13 +14,13 @@ const {
 } = Styled;
 
 const {
-  remcalc,
+  remcalc
 } = fns;
 
 const {
   P,
   H2,
-  H3,
+  H3
 } = BaseElements;
 
 const {

frontend/src/components/header/index.js

@@ -29,7 +29,7 @@ const {
 } = composers;
 
 const {
-  colors,
+  colors
 } = constants;
 
 const borderSide = props => props.toggled
@@ -61,7 +61,7 @@ const StyledAvatarWrapper = styled.div`
 
     ${pseudoEl({
       top: '50%',
-      right: remcalc(-10),
+      right: remcalc(-10)
     })}
   }
 `;

frontend/src/components/metric-charts/add-metrics.js

@@ -59,7 +59,7 @@ const AddMetrics = ({
 AddMetrics.propTypes = {
   datasets: React.PropTypes.arrayOf(PropTypes.dataset),
   metricTypes: React.PropTypes.arrayOf(PropTypes.metric),
-  onAddMetric: React.PropTypes.func.isRequired,
+  onAddMetric: React.PropTypes.func.isRequired
 };
 
 module.exports = AddMetrics;

frontend/src/components/navigation/org.js

@@ -100,7 +100,7 @@ const OrgNavigation = ({
   const navLinks = orgs.map(({
     id,
     name,
-    image,
+    image
   }) => {
     const to = `/${id}`;
 

frontend/src/components/new-project/billing.js

@@ -14,7 +14,7 @@ const {
 } = ReactIntl;
 
 const {
-  H2,
+  H2
 } = BaseElements;
 
 const {
@@ -70,7 +70,7 @@ const NewProjectBilling = (props) => {
     }],
     handleSubmit,
     onSubmit,
-    onNewBilling,
+    onNewBilling
   } = props;
 
   const _onNewBilling = (evt) => {

frontend/src/components/people-list/index.js

@@ -54,7 +54,7 @@ const People = (props) => {
 People.propTypes = {
   UI: React.PropTypes.object,
   handleToggle: React.PropTypes.func,
-  people: React.PropTypes.array,
+  people: React.PropTypes.array
 };
 
 module.exports = People;

frontend/src/components/people-list/invite.js

@@ -76,9 +76,9 @@ const Invite = React.createClass({
         name: this.state.selectValue.label,
         email: this.state.selectValue.value,
         role: 'Unassigned',
-        status: 'Sent invitation',
+        status: 'Sent invitation'
       },
-      parentIndex: this.props.parentIndex,
+      parentIndex: this.props.parentIndex
     };
 
     this.props.addMemember(data, () => {
@@ -91,7 +91,7 @@ const Invite = React.createClass({
   render() {
 
     const {
-      handleToggle,
+      handleToggle
     } = this.props;
 
     const selectData = this.getFormattedPlatformMembers();
@@ -145,7 +145,7 @@ const Invite = React.createClass({
         </Column>
       </Row>
     );
-  },
+  }
 });
 
 module.exports = Invite;

frontend/src/components/people-list/table/index.js

@@ -31,7 +31,7 @@ const PeopleTable = (props) => {
     people = [],
     parentIndex,
     removeMember,
-    UI = {},
+    UI = {}
   } = props;
 
   const columns = [{
@@ -122,7 +122,7 @@ PeopleTable.propTypes = {
   handleStatusTooltip: React.PropTypes.func,
   parentIndex: React.PropTypes.number,
   people: React.PropTypes.array,
-  removeMember: React.PropTypes.func,
+  removeMember: React.PropTypes.func
 };
 
 module.exports = PeopleTable;

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

@@ -37,7 +37,7 @@ const PersonDelete = (props) => {
 PersonDelete.propTypes = {
   parentIndex: React.PropTypes.number,
   personIndex: React.PropTypes.number,
-  removeMember: React.PropTypes.func,
+  removeMember: React.PropTypes.func
 };
 
 module.exports = PersonDelete;

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

@@ -101,7 +101,7 @@ PersonRole.propTypes = {
   personIndex: React.PropTypes.number,
   toggledID: React.PropTypes.oneOfType([
     React.PropTypes.string,
-    React.PropTypes.bool,
+    React.PropTypes.bool
   ])
 };
 

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

@@ -101,7 +101,7 @@ PersonStatus.propTypes = {
   personIndex: React.PropTypes.number,
   toggledID: React.PropTypes.oneOfType([
     React.PropTypes.string,
-    React.PropTypes.bool,
+    React.PropTypes.bool
   ])
 };
 

frontend/src/components/people-list/table/tooltip.js

@@ -25,7 +25,7 @@ module.exports = ({
   personAttr,
   personIndex,
   options = [],
-  parentIndex,
+  parentIndex
 }) => {
 
   const _options = options.map( (option, i) => {
@@ -38,7 +38,7 @@ module.exports = ({
         [`${personAttr}`]: option
       },
       personIndex,
-      parentIndex,
+      parentIndex
     };
 
     const _onClick = () => handleSelect(payload);
@@ -71,5 +71,5 @@ module.exports.propTypes = {
   parentIndex: React.PropTypes.number,
   person: React.PropTypes.object,
   personAttr: React.PropTypes.string,
-  personIndex: React.PropTypes.number,
+  personIndex: React.PropTypes.number
 };

frontend/src/components/section/index.js

@@ -19,11 +19,11 @@ const {
 } = ReactIntl;
 
 const {
-  breakpoints,
+  breakpoints
 } = constants;
 
 const {
-  remcalc,
+  remcalc
 } = fns;
 
 const StyledHorizontalList = styled(Ul)`
@@ -43,7 +43,7 @@ const StyledHorizontalListItem = styled(Li)`
 const Section = (props) => {
   const {
     children,
-    links = [],
+    links = []
   } = props;
 
   const navLinks = links.map((link) => (

frontend/src/components/service/view-toggle.js

@@ -6,11 +6,11 @@ const fns = require('@ui/shared/functions');
 const Styled = require('styled-components');
 
 const {
-  remcalc,
+  remcalc
 } = fns;
 
 const {
-  default: styled,
+  default: styled
 } = Styled;
 
 const StyledWrapper = styled.div`

frontend/src/containers/metrics/index.js

@@ -67,7 +67,7 @@ Metrics.propTypes = {
 const mapStateToProps = (state) => ({
   // hardcoded now, but should be dynamic
   // actually, the use for this prop is going to disapear
-  metricTypeUuid: 'dca08514-72e5-46ce-ad91-e68b3b0914d4',
+  metricTypeUuid: 'dca08514-72e5-46ce-ad91-e68b3b0914d4'
 });
 
 const mapDispatchToProps = (dispatch) => ({

frontend/src/containers/org/index.js

@@ -13,7 +13,7 @@ const NewProject = require('@containers/new-project');
 const SectionComponents = {
   people: require('./people'),
   projects: require('./projects'),
-  settings: require('./settings'),
+  settings: require('./settings')
 };
 
 const {

frontend/src/containers/org/people.js

@@ -13,7 +13,7 @@ const {
   peopleByOrgIdSelector,
   orgUISelector,
   orgIndexSelector,
-  membersSelector,
+  membersSelector
 } = selectors;
 
 const {
@@ -22,7 +22,7 @@ const {
   orgHandlePeopleRoleTooltip,
   orgHandlePeopleStatusTooltip,
   orgHandleMemberUpdate,
-  orgRemoveMember,
+  orgRemoveMember
 } = actions;
 
 const People = (props) => {
@@ -58,6 +58,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(orgHandleMemberUpdate(updatedMember)),
   removeMember: (removeData) =>
     dispatch(orgRemoveMember(removeData))
+
 });
 
 module.exports = connect(

frontend/src/containers/project/people.js

@@ -13,7 +13,7 @@ const {
   peopleByProjectIdSelector,
   projectUISelector,
   projectIndexByIdSelect,
-  membersSelector,
+  membersSelector
 } = selectors;
 
 const {
@@ -22,7 +22,7 @@ const {
   projectHandlePeopleRoleTooltip,
   projectHandlePeopleStatusTooltip,
   projectHandleMemberUpdate,
-  projectRemoveMember,
+  projectRemoveMember
 } = actions;
 
 const People = (props) => (
@@ -53,6 +53,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(projectHandleMemberUpdate(updatedMember)),
   removeMember: (removeData) =>
     dispatch(projectRemoveMember(removeData))
+
 });
 
 module.exports = connect(

frontend/src/containers/services/index.js

@@ -22,7 +22,7 @@ const {
 } = selectors;
 
 const {
-  H2,
+  H2
 } = BaseELements;
 
 const Services = ({

frontend/src/state/actions.js

@@ -19,7 +19,7 @@ const projectMemberActions = {
   projectHandleMemberUpdate:
     createAction(`${APP}/PROJECT_HANDLE_MEMBER_UPDATE`),
   projectRemoveMember:
-    createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`),
+    createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`)
 };
 
 const orgMemberActions = {
@@ -34,7 +34,7 @@ const orgMemberActions = {
   orgHandleMemberUpdate:
     createAction(`${APP}/ORG_HANDLE_MEMBER_UPDATE`),
   orgRemoveMember:
-    createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`),
+    createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`)
 };
 
 module.exports = {
@@ -58,5 +58,5 @@ module.exports = {
   handleNewProject:
     createAction(`${APP}/CREATE_NEW_PROJECT`),
   ...orgMemberActions,
-  ...projectMemberActions,
+  ...projectMemberActions
 };

frontend/src/state/reducers/index.js

@@ -17,6 +17,6 @@ module.exports = () => {
     orgs: require('@state/reducers/orgs'),
     projects: require('@state/reducers/projects'),
     services: require('@state/reducers/services'),
-    members: require('@state/reducers/members'),
+    members: require('@state/reducers/members')
   });
 };

frontend/src/state/reducers/orgs.js

@@ -12,7 +12,7 @@ const {
   orgHandlePeopleRoleTooltip,
   orgHandlePeopleStatusTooltip,
   orgHandleMemberUpdate,
-  orgRemoveMember,
+  orgRemoveMember
 } = actions;
 
 module.exports = handleActions({
@@ -20,7 +20,7 @@ module.exports = handleActions({
 
     const {
       parentIndex,
-      member,
+      member
     } = action.payload;
 
     return {
@@ -34,7 +34,7 @@ module.exports = handleActions({
             member
           ]
         },
-        ...state.data.slice(parentIndex + 1),
+        ...state.data.slice(parentIndex + 1)
       ]
     };
   },
@@ -75,7 +75,7 @@ module.exports = handleActions({
     const {
       parentIndex,
       person,
-      personIndex,
+      personIndex
     } = action.payload;
     return {
       ...state,
@@ -91,19 +91,19 @@ module.exports = handleActions({
           members: [
             ...state.data[parentIndex].members.slice(0, personIndex),
             {
-              ...person,
+              ...person
             },
             ...state.data[parentIndex].members.slice(personIndex + 1)
           ]
         },
-        ...state.data.slice(parentIndex + 1),
+        ...state.data.slice(parentIndex + 1)
       ]
     };
   },
   [orgRemoveMember.toString()]: (state, action) => {
     const {
       parentIndex,
-      personIndex,
+      personIndex
     } = action.payload;
 
     return {
@@ -117,8 +117,8 @@ module.exports = handleActions({
             ...state.data[parentIndex].members.slice(personIndex + 1)
           ]
         },
-        ...state.data.slice(parentIndex + 1),
+        ...state.data.slice(parentIndex + 1)
       ]
     };
-  },
+  }
 }, {});

frontend/src/state/reducers/projects.js

@@ -26,7 +26,7 @@ module.exports = handleActions({
 
     const {
       parentIndex,
-      member,
+      member
     } = action.payload;
 
     return {
@@ -40,7 +40,7 @@ module.exports = handleActions({
             member
           ]
         },
-        ...state.data.slice(parentIndex + 1),
+        ...state.data.slice(parentIndex + 1)
       ]
     };
   },
@@ -81,7 +81,7 @@ module.exports = handleActions({
     const {
       parentIndex,
       person,
-      personIndex,
+      personIndex
     } = action.payload;
     return {
       ...state,
@@ -97,19 +97,19 @@ module.exports = handleActions({
           members: [
             ...state.data[parentIndex].members.slice(0, personIndex),
             {
-              ...person,
+              ...person
             },
             ...state.data[parentIndex].members.slice(personIndex + 1)
           ]
         },
-        ...state.data.slice(parentIndex + 1),
+        ...state.data.slice(parentIndex + 1)
       ]
     };
   },
   [projectRemoveMember.toString()]: (state, action) => {
     const {
       parentIndex,
-      personIndex,
+      personIndex
     } = action.payload;
 
     return {
@@ -123,7 +123,7 @@ module.exports = handleActions({
             ...state.data[parentIndex].members.slice(personIndex + 1)
           ]
         },
-        ...state.data.slice(parentIndex + 1),
+        ...state.data.slice(parentIndex + 1)
       ]
     };
   },

frontend/src/state/selectors.js

@@ -188,5 +188,5 @@ module.exports = {
   membersSelector: members,
   peopleByProjectIdSelector: peopleByProjectId,
   projectUISelector: projectsUI,
-  projectIndexByIdSelect: projectIndexById,
+  projectIndexByIdSelect: projectIndexById
 };

frontend/webpack/base.js

@@ -91,7 +91,7 @@ module.exports = {
       test: /\.svg/,
       exclude: [
         /node_modules/,
-        path.join(UI, 'shared', 'fonts'),
+        path.join(UI, 'shared', 'fonts')
       ],
       include: [
         FRONTEND,
@@ -109,7 +109,7 @@ module.exports = {
       // exclude: /node_modules/,
       include: [
         path.join(UI, 'shared', 'fonts')
-      ],
+      ]
     }, {
       test: /\.css$/,
       loader: 'style-loader!css-loader'

frontend/webpack/test.js

@@ -6,7 +6,7 @@ module.exports = {
   resolve: base.resolve,
   resolveLoader: base.resolveLoader,
   output: Object.assign(base.output, {
-    libraryTarget: 'commonjs2',
+    libraryTarget: 'commonjs2'
   }),
   plugins: [
     plugins['named-modules'](),

ui/.eslintrc

@@ -121,6 +121,7 @@
       "tabWidth": 2
     }],
     "no-eq-null": 2,
-    "block-scoped-var": 2
+    "block-scoped-var": 2,
+    "comma-dangle": ["error", "never"]
   }
 }

ui/docs/src/containers/app/index.js

@@ -4,7 +4,7 @@
 const React = require('react');
 
 const {
-  Base,
+  Base
 } = require('@ui');
 
 module.exports = () => {

ui/src/components/add-metric/button.js

@@ -58,7 +58,7 @@ AddMetricButton.propTypes = {
   children: React.PropTypes.node,
   disabled: React.PropTypes.bool,
   metric: React.PropTypes.string,
-  onClick: React.PropTypes.func,
+  onClick: React.PropTypes.func
 };
 
 module.exports = Baseline(

ui/src/components/add-metric/index.js

@@ -3,5 +3,5 @@ module.exports = {
   AddMetricDescription: require('./description'),
   AddMetricLink: require('./link'),
   AddMetricTile: require('./tile'),
-  AddMetricTitle: require('./title'),
+  AddMetricTitle: require('./title')
 };

ui/src/components/avatar/index.js

@@ -55,13 +55,13 @@ const Avatar = ({
   src,
   srcset,
   style,
-  width = remcalc(42),
+  width = remcalc(42)
 }) => {
   const _style = {
     ...style,
     background: color,
     width,
-    height,
+    height
   };
 
   const letter = name[0];
@@ -99,7 +99,7 @@ Avatar.propTypes = {
   src: React.PropTypes.string,
   srcset: React.PropTypes.string,
   style: React.PropTypes.object,
-  width: React.PropTypes.string,
+  width: React.PropTypes.string
 };
 
 module.exports = Baseline(

ui/src/components/base-elements/index.js

@@ -89,7 +89,7 @@ const BaseElements = elements.reduce((acc, {
   // TODO: Fix proptype validation and remove eslint ignore line 1
   Component.propTypes = {
     children: React.PropTypes.node,
-    style: React.PropTypes.object,
+    style: React.PropTypes.object
   };
 
   return {

ui/src/components/base-elements/story.js

@@ -20,7 +20,7 @@ const {
   H2,
   H3,
   P,
-  Small,
+  Small
 } = BaseElements;
 
 storiesOf('Base Elements', module)

ui/src/components/base/global.js

@@ -27,7 +27,7 @@ const fonts = [
     filename: 'librefranklin-bold-webfont',
     weight: '700',
     style: 'normal'
-  },
+  }
 ];
 
 module.exports = css`

ui/src/components/base/index.js

@@ -8,7 +8,7 @@ const {
 } = constants;
 
 const {
-  default: styled,
+  default: styled
 } = Styled;
 
 module.exports = styled.div`

ui/src/components/button/index.js

@@ -9,7 +9,7 @@ const ReactRouter = require('react-router-dom');
 
 const {
   base,
-  inactive,
+  inactive
 } = constants.colors;
 
 const {

ui/src/components/checkbox/index.js

@@ -0,0 +1,127 @@
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  boxes
+} = constants;
+
+const {
+  Baseline
+} = composers;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledInput = styled.input`
+  visibility: hidden;
+  &:checked + label::after {
+    opacity: 1;
+  }
+  &:disabled + label {
+    background-color: rgb(249, 249, 249);
+  }
+  &:disabled + label::after {
+    opacity: 0.3;
+  }
+`;
+
+const StyledLabel = styled.label`
+  color: rgb(100, 100, 100);
+  position: absolute;
+  width: ${remcalc(24)};
+  height: ${remcalc(24)};
+  top: 0;
+  border-radius: ${boxes.borderRadius};
+  background-color: rgb(255, 255, 255);
+  box-shadow: ${boxes.insetShaddow};
+  border: ${boxes.border.unchecked};
+
+  &::after {
+    opacity: 0;
+    content: '';
+    position: absolute;
+    width: ${remcalc(9)};
+    height: ${remcalc(4)};
+    background: transparent;
+    top: ${remcalc(7)};
+    left: ${remcalc(7)};
+    border: ${remcalc(3)} solid #333;
+    border-top: none;
+    border-right: none;
+    transform: rotate(-45deg);
+  }
+
+  &:hover {
+    &::after {
+      opacity: 0.3;
+    }
+  }
+`;
+
+const StyledDiv = styled.div`
+  width: ${remcalc(24)};
+  height: ${remcalc(24)};
+  position: relative;
+`;
+
+const Checkbox = ({
+  checked = false,
+  children,
+  className,
+  disabled = false,
+  form,
+  id,
+  name,
+  onChange,
+  readOnly,
+  required,
+  selectionDirection,
+  style,
+  tabIndex
+}) => (
+  <StyledDiv>
+    <StyledInput
+      checked={checked}
+      disabled={disabled}
+      form={form}
+      name={name}
+      onChange={onChange}
+      readOnly={readOnly}
+      required={required}
+      style={style}
+      tabIndex={tabIndex}
+      type='checkbox'
+    />
+    <StyledLabel>
+      <span>{children}</span>
+    </StyledLabel>
+  </StyledDiv>
+);
+
+Checkbox.propTypes = {
+  checked: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
+  id: React.PropTypes.string,
+  name: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string
+};
+
+module.exports = Baseline(
+  Checkbox
+);

ui/src/components/form/msg.js

@@ -0,0 +1,38 @@
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const Label = require('./label');
+const match = require('../../shared/match');
+const Styled = require('styled-components');
+
+const {
+  breakpoints,
+  colors
+} = constants;
+
+const {
+  Baseline
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const color = match.prop({
+  warning: colors.inputWarning,
+  error: colors.inputError
+  //disabled: colors.brandInactiveColor
+})('type');
+
+
+const Msg = styled(Label)`
+  color: ${color};
+
+  ${breakpoints.medium`
+    float: right;
+    text-align: right;
+  `}
+`;
+
+module.exports = Baseline(
+  Msg
+);

ui/src/components/form/toggle.js

@@ -21,7 +21,7 @@ const {
 } = fns;
 
 const {
-  default: styled,
+  default: styled
 } = Styled;
 
 const Input = styled.input`

ui/src/components/list/mini-metric-data.js

@@ -1,3 +1,5 @@
+/*eslint-disable */
+
 module.exports = [{
   firstQuartile: 15,
   thirdQuartile: 15,

ui/src/components/metric/close-button.js

@@ -57,7 +57,7 @@ const AddMetricButton = ({
 };
 
 AddMetricButton.propTypes = {
-  onClick: React.PropTypes.func,
+  onClick: React.PropTypes.func
 };
 
 module.exports = Baseline(

ui/src/components/metric/graph.js

@@ -70,7 +70,7 @@ class Graph extends React.Component {
               displayFormats: {
                 hour: 'MMM D, hA'
               }
-            },
+            }
           }],
           yAxes: [{
             display: true,
@@ -88,7 +88,7 @@ class Graph extends React.Component {
         legend: {
           display: false
         }
-      },
+      }
     });
   }
 

ui/src/components/metric/metric-data.js

@@ -1,3 +1,5 @@
+/*eslint-disable */
+
 module.exports = [{
   firstQuartile: 15,
   thirdQuartile: 15,

ui/src/components/metric/settings-button.js

@@ -74,7 +74,7 @@ const AddMetricButton = ({
 AddMetricButton.propTypes = {
   children: React.PropTypes.node,
   metric: React.PropTypes.string,
-  onClick: React.PropTypes.func,
+  onClick: React.PropTypes.func
 };
 
 module.exports = Baseline(

ui/src/components/metric/story.js

@@ -48,7 +48,7 @@ const kbMetricData = MetricData.map(m => {
     thirdQuartile: withinRange(m.thirdQuartile, 1.55, 2.0),
     median: withinRange(m.median, 1.55, 2.0),
     max: withinRange(m.max, 1.55, 2.0),
-    min: withinRange(m.min, 1.55, 2.0),
+    min: withinRange(m.min, 1.55, 2.0)
   };
 });
 

ui/src/components/mini-metric/story.js

@@ -4,9 +4,7 @@ const Row = require('../row');
 const Column = require('../column');
 
 const {
-  storiesOf,
+  storiesOf
-  // action,
-  // linkTo
 } = require('@kadira/storybook');
 
 const {

ui/src/components/select-custom/index.js

@@ -9,7 +9,7 @@ const Select = require('react-select');
 require('react-select/dist/react-select.css');
 
 const {
-  rndId,
+  rndId
 } = fns;
 
 const {

ui/src/components/table-data-table/index.js

@@ -44,7 +44,7 @@ Table.propTypes = {
   columns: React.PropTypes.array,
   data: React.PropTypes.array,
   style: React.PropTypes.object,
-  title: React.PropTypes.string,
+  title: React.PropTypes.string
 };
 
 module.exports = Baseline(

ui/src/components/table-data-table/table-content.js

@@ -35,7 +35,7 @@ TableContent.propTypes = {
   data: React.PropTypes.array,
   hasBody: React.PropTypes.bool,
   hasHeader: React.PropTypes.bool,
-  width: React.PropTypes.string,
+  width: React.PropTypes.string
 };
 
 module.exports = Baseline(

ui/src/components/table-simple-table/index.js

@@ -3,5 +3,5 @@ module.exports = {
   TableHead: require('./table-head'),
   TableBody: require('./table-body'),
   TableRow: require('./table-row'),
-  TableItem: require('./table-item'),
+  TableItem: require('./table-item')
 };

ui/src/components/table-simple-table/table-body.js

@@ -4,7 +4,7 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const {
-  default: styled,
+  default: styled
 } = Styled;
 
 const {

ui/src/components/topology-old/index.js

@@ -149,7 +149,7 @@ class TopologyGraph extends React.Component {
 
     const {
       width,
-      height,
+      height
     } = props;
 
     this.simulation = d3.forceSimulation()
@@ -168,7 +168,7 @@ class TopologyGraph extends React.Component {
     const component = this;
 
     const {
-      simulation,
+      simulation
     } = this;
 
     const svg = d3.select(this._refs.svg);
@@ -178,7 +178,7 @@ class TopologyGraph extends React.Component {
       graph = {
         nodes: [],
         links: []
-      },
+      }
     } = this.props;
 
     // Drawing the links between nodes
@@ -337,7 +337,7 @@ class TopologyGraph extends React.Component {
     const {
       dragged,
       dragstarted,
-      dragended,
+      dragended
     } = this;
 
     const width = 170;
@@ -423,7 +423,7 @@ class TopologyGraph extends React.Component {
 TopologyGraph.propTypes = {
   graph: React.PropTypes.object,
   height: React.PropTypes.number,
-  width: React.PropTypes.number,
+  width: React.PropTypes.number
 };
 
 module.exports = Baseline(

ui/src/components/topology-old/story.js

@@ -14,21 +14,21 @@ const services = {
       attrs: {
         dcs: 1,
         instances: 2,
-        healthy: true,
+        healthy: true
       },
       metrics: [
         {
           name: 'CPU',
-          stat: '50%',
+          stat: '50%'
         },
         {
           name: 'Memory',
-          stat: '20%',
+          stat: '20%'
         },
         {
           name: 'Network',
-          stat: '5.9KB/sec',
+          stat: '5.9KB/sec'
-        },
+        }
       ]
     },
     {
@@ -36,21 +36,21 @@ const services = {
       attrs: {
         dcs: 1,
         instances: 2,
-        healthy: true,
+        healthy: true
       },
       metrics: [
         {
           name: 'CPU',
-          stat: '50%',
+          stat: '50%'
         },
         {
           name: 'Memory',
-          stat: '20%',
+          stat: '20%'
         },
         {
           name: 'Network',
-          stat: '5.9KB/sec',
+          stat: '5.9KB/sec'
-        },
+        }
       ]
     },
     {
@@ -58,21 +58,21 @@ const services = {
       attrs: {
         dcs: 1,
         instances: 2,
-        healthy: true,
+        healthy: true
       },
       metrics: [
         {
           name: 'CPU',
-          stat: '50%',
+          stat: '50%'
         },
         {
           name: 'Memory',
-          stat: '20%',
+          stat: '20%'
         },
         {
           name: 'Network',
-          stat: '5.9KB/sec',
+          stat: '5.9KB/sec'
-        },
+        }
       ]
     },
     {
@@ -80,21 +80,21 @@ const services = {
       attrs: {
         dcs: 1,
         instances: 2,
-        healthy: true,
+        healthy: true
       },
       metrics: [
         {
           name: 'CPU',
-          stat: '50%',
+          stat: '50%'
         },
         {
           name: 'Memory',
-          stat: '20%',
+          stat: '20%'
         },
         {
           name: 'Network',
-          stat: '5.9KB/sec',
+          stat: '5.9KB/sec'
-        },
+        }
       ]
     },
     {
@@ -102,40 +102,40 @@ const services = {
       attrs: {
         dcs: 1,
         instances: 2,
-        healthy: true,
+        healthy: true
       },
       metrics: [
         {
           name: 'CPU',
-          stat: '50%',
+          stat: '50%'
         },
         {
           name: 'Memory',
-          stat: '20%',
+          stat: '20%'
         },
         {
           name: 'Network',
-          stat: '5.9KB/sec',
+          stat: '5.9KB/sec'
-        },
+        }
       ]
     }
   ],
   links: [
     {
       source: 'Nginx',
-      target: 'WordPress',
+      target: 'WordPress'
     },
     {
       source: 'WordPress',
-      target: 'Memcached',
+      target: 'Memcached'
     },
     {
       source: 'WordPress',
-      target: 'NFS',
+      target: 'NFS'
     },
     {
       source: 'WordPress',
-      target: 'Percona',
+      target: 'Percona'
     }
   ]
 };

ui/src/components/topology-old/view.js

@@ -32,7 +32,7 @@ const Topology = (props) => (
 );
 
 Topology.propTypes = {
-  children: React.PropTypes.node,
+  children: React.PropTypes.node
 };
 
 module.exports = Baseline(

ui/src/components/topology/data.js

@@ -1,3 +1,5 @@
+/*eslint-disable */
+
 module.exports = {
   nodes: [
     {

ui/src/components/topology/graph-node.js

@@ -77,7 +77,7 @@ const GraphNode = ({
   const paddingLeft = 18-halfWidth;
   const infoPosition = {
     x: paddingLeft,
-    y: 59 - halfHeight,
+    y: 59 - halfHeight
   };
   const metricsPosition = {
     x: paddingLeft,

ui/src/components/topology/index.js

@@ -3,5 +3,5 @@ module.exports = {
   TopologyGraphNode: require('./graph-node'),
   TopologyGraphLink: require('./graph-link'),
   TopologyGraphNodeButton: require('./graph-node-button'),
-  TopologyGraphNodeMetrics: require('./graph-node-metrics'),
+  TopologyGraphNodeMetrics: require('./graph-node-metrics')
 };

ui/src/components/topology/topology-graph.js

@@ -188,7 +188,7 @@ class TopologyGraph extends React.Component {
             return ({
               ...simNode,
               x: simNode.x + offset.x,
-              y: simNode.y + offset.y,
+              y: simNode.y + offset.y
             });
           }
           return ({

ui/src/components/widget/index.js

@@ -18,7 +18,7 @@ const {
 } = fns;
 
 const {
-  default: styled,
+  default: styled
 } = Styled;
 
 const classNames = {

ui/src/shared/constants/boxes.js

@@ -18,6 +18,6 @@ module.exports = {
     checked: `${remcalc(1)} solid ${base.primary}`,
     unchecked: `${remcalc(1)} solid ${base.grey}`,
     confirmed: `${remcalc(1)} solid ${base.grey}`,
-    error: `${remcalc(1)} solid ${base.red}`,
+    error: `${remcalc(1)} solid ${base.red}`
   }
 };

ui/src/shared/constants/breakpoints.js

@@ -11,16 +11,16 @@ const small = {
 
 const medium = {
   upper: '64rem',
-  lower: '48.1rem',
+  lower: '48.1rem'
 };
 
 const large = {
   upper: '75rem',
-  lower: '64.1rem',
+  lower: '64.1rem'
 };
 
 const xlarge = {
-  lower: '75.1rem',
+  lower: '75.1rem'
 };
 
 const screen = 'only screen';
@@ -42,7 +42,7 @@ const screens = {
 
   'xlarge': `${screen} and (min-width: ${xlarge.lower})
              and (max-width: ${xlarge.upper})`,
-  'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`,
+  'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`
 };
 
 const breakpoints = Object.keys(screens).reduce((acc, label) => {

ui/stories/index.js

@@ -1,8 +1,6 @@
 const React = require('react');
 const {
-  storiesOf,
+  storiesOf
-  // action,
-  // linkTo
 } = require('@kadira/storybook');
 
 const {
@@ -16,7 +14,7 @@ const {
     MiniMetricSubtitle,
     MiniMetricView
   },
-  Row,
+  Row
 } = require('../src/');
 
 const MiniMetricData = require('../src/components/list/mini-metric-data');