From cac9453154fd8065f6af5ca5b6cf32e0485946ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 28 Aug 2017 20:21:08 +0100 Subject: [PATCH] style: format --- .../cloudapi-gql/src/schema/queries/users.js | 12 +- packages/cp-frontend/src/app.js | 4 +- .../src/components/deployment-group/delete.js | 5 +- .../src/components/instances/empty.js | 5 +- .../src/components/instances/list-item.js | 44 ++--- .../src/components/manifest/edit-or-create.js | 166 +++++++++--------- .../src/components/messaging/error.js | 5 +- .../src/components/messaging/loader.js | 9 +- .../src/components/messaging/modal-error.js | 12 +- .../src/components/messaging/warning.js | 5 +- .../src/components/navigation/breadcrumb.js | 25 ++- .../src/components/navigation/header.js | 13 +- .../src/components/navigation/menu.js | 13 +- .../src/components/navigation/not-found.js | 2 +- .../src/components/service/delete.js | 5 +- .../src/components/service/index.js | 2 +- .../src/components/service/metrics.js | 20 +-- .../src/components/service/scale.js | 5 +- .../src/components/services/empty.js | 5 +- .../src/components/services/list-item.js | 107 ++++++----- .../src/components/services/quick-actions.js | 37 ++-- .../src/components/services/status.js | 22 +-- .../src/containers/deployment-group/delete.js | 20 +-- .../containers/deployment-groups/create.js | 5 +- .../src/containers/deployment-groups/list.js | 18 +- .../src/containers/instances/list.js | 25 +-- .../src/containers/instances/tooltip.js | 39 ++-- .../src/containers/manifest/edit-or-create.js | 4 +- .../src/containers/manifest/index.js | 12 +- .../containers/metrics/metrics-data-hoc.js | 85 ++++----- .../src/containers/navigation/breadcrumb.js | 14 +- .../src/containers/navigation/header.js | 5 +- .../src/containers/navigation/menu.js | 6 +- .../containers/navigation/not-found-hoc.js | 60 +++---- .../src/containers/service/delete.js | 21 ++- .../src/containers/service/metrics.js | 20 +-- .../src/containers/service/scale.js | 21 ++- .../src/containers/services/list.js | 17 +- .../src/containers/services/menu.js | 5 +- .../src/containers/services/quick-actions.js | 23 ++- .../src/containers/services/topology.js | 23 ++- .../src/graphql/ServiceMetrics.gql | 8 +- packages/cp-frontend/src/router.js | 28 +-- packages/cp-frontend/src/state/reducers/ui.js | 5 +- packages/cp-frontend/src/state/selectors.js | 11 +- packages/cp-frontend/src/state/store.js | 7 +- .../components/deployment-group/delete.js | 5 +- .../test/unit/components/instances/empty.js | 7 +- .../unit/components/instances/list-item.js | 7 +- .../test/unit/components/layout/container.js | 6 +- .../components/manifest/edit-or-create.js | 1 - .../test/unit/components/messaging/error.js | 6 +- .../test/unit/components/messaging/loader.js | 6 +- .../unit/components/messaging/modal-error.js | 2 +- .../test/unit/components/messaging/warning.js | 6 +- .../test/unit/components/navigation/title.js | 6 +- .../test/unit/components/service/delete.js | 6 +- .../test/unit/components/services/empty.js | 1 - .../unit/components/services/list-item.js | 5 +- .../unit/components/services/quick-actions.js | 1 - .../test/unit/components/services/status.js | 5 +- .../containers/deployment-group/delete.js | 1 - .../containers/deployment-groups/create.js | 5 +- .../containers/deployment-groups/import.js | 1 - .../unit/containers/deployment-groups/list.js | 1 - .../test/unit/containers/instances/list.js | 1 - .../test/unit/containers/instances/tooltip.js | 1 - .../containers/manifest/edit-or-create.js | 1 - .../unit/containers/navigation/breadcrumb.js | 5 +- .../test/unit/containers/navigation/header.js | 1 - .../test/unit/containers/navigation/menu.js | 1 - .../containers/navigation/not-found-hoc.js | 1 - .../test/unit/containers/service/delete.js | 1 - .../test/unit/containers/service/scale.js | 1 - .../test/unit/containers/services/list.js | 6 +- .../test/unit/containers/services/menu.js | 5 +- .../unit/containers/services/quick-actions.js | 1 - .../test/unit/containers/services/topology.js | 5 +- packages/cp-frontend/test/unit/mocks/data.js | 46 +++-- .../cp-frontend/test/unit/mocks/router.js | 5 +- packages/cp-frontend/test/unit/mocks/store.js | 5 +- packages/cp-frontend/test/unit/mocks/theme.js | 7 +- .../test/unit/state/reducers/ui.js | 59 ++++--- .../cp-frontend/test/unit/state/selectors.js | 109 +++++------- packages/cp-gql-mock-server/package.json | 8 +- .../cp-gql-mock-server/src/complex-data.json | 33 ++-- .../cp-gql-mock-server/src/metric-data.json | 2 +- .../src/metric-datasets-0.json | 2 +- .../src/metric-datasets-1.json | 2 +- .../src/metric-datasets-2.json | 2 +- packages/cp-gql-mock-server/src/resolvers.js | 73 ++++---- packages/cp-gql-schema/schema.gql | 9 +- .../normalized-styled-components/src/index.js | 26 +-- packages/ui-toolkit/src/anchor/index.js | 6 +- packages/ui-toolkit/src/base/global.js | 2 +- packages/ui-toolkit/src/basealign/index.js | 4 +- packages/ui-toolkit/src/baseline/index.js | 4 +- packages/ui-toolkit/src/boxes/index.js | 10 +- packages/ui-toolkit/src/breadcrumb/index.js | 5 +- packages/ui-toolkit/src/breadcrumb/item.js | 5 +- packages/ui-toolkit/src/breakpoints/index.js | 2 +- packages/ui-toolkit/src/button/index.js | 14 +- packages/ui-toolkit/src/card/card.js | 6 +- packages/ui-toolkit/src/card/description.js | 15 +- packages/ui-toolkit/src/card/group-view.js | 7 +- packages/ui-toolkit/src/card/header.js | 6 +- packages/ui-toolkit/src/card/meta.js | 22 +-- packages/ui-toolkit/src/card/options.js | 17 +- packages/ui-toolkit/src/card/outlet.js | 11 +- packages/ui-toolkit/src/card/subtitle.js | 15 +- packages/ui-toolkit/src/card/title.js | 23 +-- packages/ui-toolkit/src/card/view.js | 16 +- packages/ui-toolkit/src/chevron/index.js | 3 +- packages/ui-toolkit/src/close-button/index.js | 5 +- packages/ui-toolkit/src/dropdown/index.js | 18 +- packages/ui-toolkit/src/form/base/input.js | 6 +- packages/ui-toolkit/src/form/base/toggle.js | 20 +-- packages/ui-toolkit/src/form/checkbox.js | 7 +- packages/ui-toolkit/src/form/group.js | 4 +- packages/ui-toolkit/src/form/input.js | 5 +- packages/ui-toolkit/src/form/meta.js | 6 +- packages/ui-toolkit/src/form/number-input.js | 6 +- packages/ui-toolkit/src/form/radio.js | 13 +- packages/ui-toolkit/src/form/select.js | 5 +- packages/ui-toolkit/src/form/toggle.js | 13 +- packages/ui-toolkit/src/header/brand.js | 9 +- packages/ui-toolkit/src/header/index.js | 5 +- packages/ui-toolkit/src/header/item.js | 9 +- packages/ui-toolkit/src/icon-button/index.js | 8 +- packages/ui-toolkit/src/icons/healthy.js | 6 +- packages/ui-toolkit/src/index.js | 12 +- packages/ui-toolkit/src/message/index.js | 16 +- packages/ui-toolkit/src/metrics/graph.js | 117 ++++++------ packages/ui-toolkit/src/metrics/index.js | 2 +- packages/ui-toolkit/src/modal/index.js | 2 +- packages/ui-toolkit/src/paper-effect/index.js | 4 +- .../ui-toolkit/src/progress-bar/button.js | 4 +- packages/ui-toolkit/src/progress-bar/index.js | 7 +- packages/ui-toolkit/src/progress-bar/item.js | 7 +- packages/ui-toolkit/src/section-list/index.js | 7 +- packages/ui-toolkit/src/section-list/item.js | 5 +- .../ui-toolkit/src/status-loader/index.js | 5 +- packages/ui-toolkit/src/styleguide/wrapper.js | 4 +- packages/ui-toolkit/src/theme/colors.js | 15 +- packages/ui-toolkit/src/tooltip/button.js | 5 +- packages/ui-toolkit/src/tooltip/tooltip.js | 23 +-- packages/ui-toolkit/src/topology/index.js | 35 ++-- .../ui-toolkit/src/topology/node/button.js | 4 +- .../ui-toolkit/src/topology/node/content.js | 18 +- .../ui-toolkit/src/topology/node/index.js | 46 ++--- packages/ui-toolkit/src/topology/node/info.js | 28 ++- .../ui-toolkit/src/topology/node/metrics.js | 10 +- .../ui-toolkit/src/topology/node/title.js | 5 +- 153 files changed, 995 insertions(+), 1225 deletions(-) diff --git a/packages/cloudapi-gql/src/schema/queries/users.js b/packages/cloudapi-gql/src/schema/queries/users.js index 2d2b9878..14b48ff5 100644 --- a/packages/cloudapi-gql/src/schema/queries/users.js +++ b/packages/cloudapi-gql/src/schema/queries/users.js @@ -16,11 +16,13 @@ module.exports = { const { list, get } = api.users; return args.id - ? get(args).then(user => [user]).then(user => - Object.assign(user, { - isUser: true - }) - ) + ? get(args) + .then(user => [user]) + .then(user => + Object.assign(user, { + isUser: true + }) + ) : list(); } }; diff --git a/packages/cp-frontend/src/app.js b/packages/cp-frontend/src/app.js index 1fcf0086..d309ccdf 100644 --- a/packages/cp-frontend/src/app.js +++ b/packages/cp-frontend/src/app.js @@ -17,9 +17,7 @@ class App extends Component { render() { return ( - - {Router} - + {Router} ); } diff --git a/packages/cp-frontend/src/components/deployment-group/delete.js b/packages/cp-frontend/src/components/deployment-group/delete.js index 6afa4dc2..286f9e47 100644 --- a/packages/cp-frontend/src/components/deployment-group/delete.js +++ b/packages/cp-frontend/src/components/deployment-group/delete.js @@ -6,7 +6,7 @@ const DeploymentGroupDelete = ({ deploymentGroup, onCancelClick = () => {}, onConfirmClick = () => {} -}) => +}) => (
Deleting a deployment group:
{deploymentGroup.name} @@ -20,7 +20,8 @@ const DeploymentGroupDelete = ({ Cancel -
; + +); DeploymentGroupDelete.propTypes = { deploymentGroup: PropTypes.object.isRequired, diff --git a/packages/cp-frontend/src/components/instances/empty.js b/packages/cp-frontend/src/components/instances/empty.js index 580ce9e7..f1ea081a 100644 --- a/packages/cp-frontend/src/components/instances/empty.js +++ b/packages/cp-frontend/src/components/instances/empty.js @@ -3,9 +3,10 @@ import React from 'react'; import { Col, Row } from 'react-styled-flexboxgrid'; import { P } from 'joyent-ui-toolkit'; -export default () => +export default () => (

You don't have any instances

- ; + +); diff --git a/packages/cp-frontend/src/components/instances/list-item.js b/packages/cp-frontend/src/components/instances/list-item.js index eb40a1ad..4e9cc92c 100644 --- a/packages/cp-frontend/src/components/instances/list-item.js +++ b/packages/cp-frontend/src/components/instances/list-item.js @@ -65,7 +65,16 @@ const StyledCard = Card.extend` background-color: ${props => props.theme.white}; - ${isOr('stopping', 'stopped', 'offline', 'destroyed', 'failed', 'deleted', 'incomplete', 'unknown')` + ${isOr( + 'stopping', + 'stopped', + 'offline', + 'destroyed', + 'failed', + 'deleted', + 'incomplete', + 'unknown' + )` background-color: ${props => props.theme.background}; & [name="card-options"] > button { @@ -80,7 +89,6 @@ const InstanceCard = ({ onStatusMouseOver = () => {}, onMouseOut = () => {} }) => { - const statusProps = STATUSES.reduce( (acc, name) => Object.assign(acc, { @@ -92,42 +100,34 @@ const InstanceCard = ({ const label = (instance.healthy || 'UNKNOWN').toLowerCase(); const icon = ; - const handleHealthMouseOver = (evt) => { + const handleHealthMouseOver = evt => { onHealthMouseOver(evt, instance); - } + }; - const handleStatusMouseOver = (evt) => { + const handleStatusMouseOver = evt => { onStatusMouseOver(evt, instance); - } + }; - const handleMouseOut = (evt) => { + const handleMouseOut = evt => { onMouseOut(evt); - } + }; return ( - - {instance.name} - + {instance.name} -
+
-
+
+); ModalErrorMessage.propTypes = { title: PropTypes.string, diff --git a/packages/cp-frontend/src/components/messaging/warning.js b/packages/cp-frontend/src/components/messaging/warning.js index b332ac50..44134de0 100644 --- a/packages/cp-frontend/src/components/messaging/warning.js +++ b/packages/cp-frontend/src/components/messaging/warning.js @@ -2,8 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Message } from 'joyent-ui-toolkit'; -const WarningMessage = ({ title, message }) => - ; +const WarningMessage = ({ title, message }) => ( + +); WarningMessage.propTypes = { title: PropTypes.string, diff --git a/packages/cp-frontend/src/components/navigation/breadcrumb.js b/packages/cp-frontend/src/components/navigation/breadcrumb.js index e5f2807f..4781fcab 100644 --- a/packages/cp-frontend/src/components/navigation/breadcrumb.js +++ b/packages/cp-frontend/src/components/navigation/breadcrumb.js @@ -24,27 +24,22 @@ const BreadcrumbContainer = styled.div` const getBreadcrumbItems = (...links) => forceArray(links).map(({ pathname, name }, i) => { const item = - i + 1 >= links.length - ? name - : - {name} - ; + i + 1 >= links.length ? ( + name + ) : ( + {name} + ); - return ( - - {item} - - ); + return {item}; }); -const NavBreadcrumb = ({ links = [] }) => +const NavBreadcrumb = ({ links = [] }) => ( - - {getBreadcrumbItems(...links)} - + {getBreadcrumbItems(...links)} - ; + +); NavBreadcrumb.propTypes = { links: PropTypes.arrayOf( diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js index fdf81a7e..ef46d6d4 100644 --- a/packages/cp-frontend/src/components/navigation/header.js +++ b/packages/cp-frontend/src/components/navigation/header.js @@ -12,20 +12,17 @@ const StyledLogo = Img.extend` height: ${remcalc(25)}; `; -const NavHeader = ({ datacenter, username }) => +const NavHeader = ({ datacenter, username }) => (
- - {datacenter} - - - {username} - -
; + {datacenter} + {username} + +); NavHeader.propTypes = { datacenter: PropTypes.string, diff --git a/packages/cp-frontend/src/components/navigation/menu.js b/packages/cp-frontend/src/components/navigation/menu.js index f4e8e540..27bed5b0 100644 --- a/packages/cp-frontend/src/components/navigation/menu.js +++ b/packages/cp-frontend/src/components/navigation/menu.js @@ -11,20 +11,19 @@ import { } from 'joyent-ui-toolkit'; const getMenuItems = (...links) => - forceArray(links).map(({ pathname, name }) => + forceArray(links).map(({ pathname, name }) => ( {name} - ); + )); -const Menu = ({ links = [] }) => +const Menu = ({ links = [] }) => ( - - {getMenuItems(...links)} - - ; + {getMenuItems(...links)} + +); Menu.propTypes = { links: PropTypes.arrayOf( diff --git a/packages/cp-frontend/src/components/navigation/not-found.js b/packages/cp-frontend/src/components/navigation/not-found.js index 261e6a3c..ecb81d3a 100644 --- a/packages/cp-frontend/src/components/navigation/not-found.js +++ b/packages/cp-frontend/src/components/navigation/not-found.js @@ -39,6 +39,6 @@ NotFound.propTypes = { message: PropTypes.string, link: PropTypes.string, to: PropTypes.string -} +}; export default NotFound; diff --git a/packages/cp-frontend/src/components/service/delete.js b/packages/cp-frontend/src/components/service/delete.js index ed54829a..1fc75858 100644 --- a/packages/cp-frontend/src/components/service/delete.js +++ b/packages/cp-frontend/src/components/service/delete.js @@ -6,7 +6,7 @@ const ServiceDelete = ({ service, onCancelClick = () => {}, onConfirmClick = () => {} -}) => +}) => (
Deleting a service:
{service.name} @@ -19,7 +19,8 @@ const ServiceDelete = ({ Cancel -
; +
+); ServiceDelete.propTypes = { service: PropTypes.object.isRequired, diff --git a/packages/cp-frontend/src/components/service/index.js b/packages/cp-frontend/src/components/service/index.js index c0aed185..030c1f8f 100644 --- a/packages/cp-frontend/src/components/service/index.js +++ b/packages/cp-frontend/src/components/service/index.js @@ -1,3 +1,3 @@ export { default as ServiceScale } from './scale'; export { default as ServiceDelete } from './delete'; -export { default as ServiceMetrics} from './metrics'; +export { default as ServiceMetrics } from './metrics'; diff --git a/packages/cp-frontend/src/components/service/metrics.js b/packages/cp-frontend/src/components/service/metrics.js index e9ee275f..3b3e2a6d 100644 --- a/packages/cp-frontend/src/components/service/metrics.js +++ b/packages/cp-frontend/src/components/service/metrics.js @@ -2,13 +2,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { MetricGraph } from 'joyent-ui-toolkit'; -const ServiceMetrics = ({ - metricsData, - graphDurationSeconds -}) => { - +const ServiceMetrics = ({ metricsData, graphDurationSeconds }) => { // metricsData should prob be an array rather than an object - const metricGraphs = Object.keys(metricsData).map((key) => ( + const metricGraphs = Object.keys(metricsData).map(key => ( // should also have a header, w metric name and number of instances (omit everything else from design for copilot) - )) + )); // This needs layout!!! - return ( -
- {metricGraphs} -
- ) -} + return
{metricGraphs}
; +}; ServiceMetrics.propTypes = { // metricsData should prob be an array rather than an object metricsData: PropTypes.object.isRequired, graphDurationSeconds: PropTypes.number.isRequired -} +}; export default ServiceMetrics; diff --git a/packages/cp-frontend/src/components/service/scale.js b/packages/cp-frontend/src/components/service/scale.js index ce64ddfe..6abb8826 100644 --- a/packages/cp-frontend/src/components/service/scale.js +++ b/packages/cp-frontend/src/components/service/scale.js @@ -15,7 +15,7 @@ const ServiceScale = ({ onCancelClick = () => {}, invalid, pristine -}) => +}) => ( Scaling a service:
@@ -38,7 +38,8 @@ const ServiceScale = ({ - ; + +); ServiceScale.propTypes = { service: PropTypes.object.isRequired, diff --git a/packages/cp-frontend/src/components/services/empty.js b/packages/cp-frontend/src/components/services/empty.js index 30d31ef0..00efc555 100644 --- a/packages/cp-frontend/src/components/services/empty.js +++ b/packages/cp-frontend/src/components/services/empty.js @@ -16,7 +16,7 @@ const StyledBox = styled.div` } `; -export default () => +export default () => ( @@ -56,4 +56,5 @@ export default () => - ; + +); diff --git a/packages/cp-frontend/src/components/services/list-item.js b/packages/cp-frontend/src/components/services/list-item.js index dc3a0244..67bbe9d2 100644 --- a/packages/cp-frontend/src/components/services/list-item.js +++ b/packages/cp-frontend/src/components/services/list-item.js @@ -57,27 +57,27 @@ const ServiceListItem = ({ : service.instances.length; const childrenItems = children.length - ? children.map(service => - - ) : null; + ? children.map(service => ( + + )) + : null; - - const title = isChild - ? - {service.name} - - : - - - {service.name} - - - ; + const title = isChild ? ( + {service.name} + ) : ( + + + + {service.name} + + + + ); const subtitle = ( @@ -86,52 +86,47 @@ const ServiceListItem = ({ ); - const header = !isChild - ? - {title} - - } - iconPosition="left" - label={`${instancesCount} ${instancesCount > 1 - ? 'instances' - : 'instance'}`} - color={!service.instancesActive ? 'disabled' : 'light'} - /> - - - - : null; + const header = !isChild ? ( + + {title} + + } + iconPosition="left" + label={`${instancesCount} ${instancesCount > 1 + ? 'instances' + : 'instance'}`} + color={!service.instancesActive ? 'disabled' : 'light'} + /> + + + + ) : null; let healthyInfo = null; - if(service.instancesActive) { + if (service.instancesActive) { const { total, healthy } = service.instancesHealthy; const iconHealthy = total === healthy ? 'HEALTHY' : 'NOT HEALTHY'; const icon = ; const label = `${healthy} of ${total} healthy`; healthyInfo = ( - - ) + + ); } - const view = children.length - ? - {childrenItems} - - : - {isChild && title} - {isChild && subtitle} - - - {healthyInfo} - - ; + const view = children.length ? ( + {childrenItems} + ) : ( + + {isChild && title} + {isChild && subtitle} + + + {healthyInfo} + + + ); return ( {}, onStartClick = () => {}, onScaleClick = () => {}, - onDeleteClick = () => {}, + onDeleteClick = () => {} }) => { if (!show) { return null; @@ -46,22 +51,22 @@ const ServicesQuickActions = ({ }, null); const startService = - status === 'RUNNING' - ? null - :
  • - - Start - -
    • ; + status === 'RUNNING' ? null : ( +
  • + + Start + +
    • + ); const stopService = - status === 'STOPPED' - ? null - :
  • - - Stop - -
    • ; + status === 'STOPPED' ? null : ( +
  • + + Stop + +
    • + ); return ( diff --git a/packages/cp-frontend/src/components/services/status.js b/packages/cp-frontend/src/components/services/status.js index 7cff2c9c..8de95345 100644 --- a/packages/cp-frontend/src/components/services/status.js +++ b/packages/cp-frontend/src/components/services/status.js @@ -37,16 +37,18 @@ const ServiceStatus = ({ service }) => { ); }); - return service.transitionalStatus - ? - - - {service.status ? service.status.toLowerCase() : ''} - - - : - {getInstanceStatuses(service.instanceStatuses)} - ; + return service.transitionalStatus ? ( + + + + {service.status ? service.status.toLowerCase() : ''} + + + ) : ( + + {getInstanceStatuses(service.instanceStatuses)} + + ); }; ServiceStatus.propTypes = { diff --git a/packages/cp-frontend/src/containers/deployment-group/delete.js b/packages/cp-frontend/src/containers/deployment-group/delete.js index 0d1a1b2b..0251e533 100644 --- a/packages/cp-frontend/src/containers/deployment-group/delete.js +++ b/packages/cp-frontend/src/containers/deployment-group/delete.js @@ -5,7 +5,7 @@ import DeploymentGroupDeleteMutation from '@graphql/DeploymentGroupDeleteMutatio import DeploymentGroupQuery from '@graphql/DeploymentGroup.gql'; import { Loader, ModalErrorMessage } from '@components/messaging'; import { DeploymentGroupDelete as DeploymentGroupDeleteComponent } from '@components/deployment-group'; -import { Modal } from 'joyent-ui-toolkit' +import { Modal } from 'joyent-ui-toolkit'; import { withNotFound, GqlPaths } from '@containers/navigation'; export class DeploymentGroupDelete extends Component { @@ -21,7 +21,10 @@ export class DeploymentGroupDelete extends Component { const { history, match, loading, error } = this.props; const handleCloseClick = evt => { - const closeUrl = match.url.split('/').slice(0, -2).join('/'); + const closeUrl = match.url + .split('/') + .slice(0, -2) + .join('/'); history.replace(closeUrl); }; @@ -37,24 +40,21 @@ export class DeploymentGroupDelete extends Component { return ( ); } - const { - deploymentGroup, - deleteDeploymentGroup - } = this.props; + const { deploymentGroup, deleteDeploymentGroup } = this.props; if (this.state.error) { return ( @@ -117,7 +117,7 @@ const DeploymentGroupGql = graphql(DeploymentGroupQuery, { const DeploymentGroupDeleteWithData = compose( DeleteDeploymentGroupGql, DeploymentGroupGql, - withNotFound([ GqlPaths.DEPLOYMENT_GROUP ]) + withNotFound([GqlPaths.DEPLOYMENT_GROUP]) )(DeploymentGroupDelete); export default DeploymentGroupDeleteWithData; diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js index 894f8985..2c316d9b 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/create.js +++ b/packages/cp-frontend/src/containers/deployment-groups/create.js @@ -5,9 +5,10 @@ import { Progress } from '@components/manifest/edit-or-create'; import { LayoutContainer } from '@components/layout'; import { Title } from '@components/navigation'; -export default ({ match }) => +export default ({ match }) => ( Creating deployment group - ; + +); diff --git a/packages/cp-frontend/src/containers/deployment-groups/list.js b/packages/cp-frontend/src/containers/deployment-groups/list.js index 140e8a7c..09f53134 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/list.js +++ b/packages/cp-frontend/src/containers/deployment-groups/list.js @@ -140,20 +140,18 @@ export const DeploymentGroupList = ({ ); } - const groups = forceArray(deploymentGroups).map(({ slug, name }) => + const groups = forceArray(deploymentGroups).map(({ slug, name }) => ( - - {name} - + {name} - ); + )); const create = [ @@ -165,18 +163,16 @@ export const DeploymentGroupList = ({ ].concat( - forceArray(importable).map(({ slug, name }) => + forceArray(importable).map(({ slug, name }) => ( ⤵ - - {name} - + {name} - ) + )) ); return ( @@ -218,5 +214,5 @@ export default compose( importable: importableDeploymentGroups }) }), - withNotFound([ GqlPaths.DEPLOYMENT_GROUP ]) + withNotFound([GqlPaths.DEPLOYMENT_GROUP]) )(DeploymentGroupList); diff --git a/packages/cp-frontend/src/containers/instances/list.js b/packages/cp-frontend/src/containers/instances/list.js index a3054995..3d42c637 100644 --- a/packages/cp-frontend/src/containers/instances/list.js +++ b/packages/cp-frontend/src/containers/instances/list.js @@ -20,7 +20,6 @@ export const InstanceList = ({ instancesTooltip, toggleInstancesTooltip }) => { - const _title = Instances; if (loading && !forceArray(instances).length) { @@ -62,15 +61,12 @@ export const InstanceList = ({ }; const handleMouseOver = (evt, instance, type) => { - const label = evt.currentTarget; const labelRect = label.getBoundingClientRect(); - const offset = type === 'healthy' - ? 48 : type === 'status' ? 36 : 0; + const offset = type === 'healthy' ? 48 : type === 'status' ? 36 : 0; const position = { - left: - `${window.scrollX + labelRect.left + offset}px`, + left: `${window.scrollX + labelRect.left + offset}px`, top: `${window.scrollY + labelRect.bottom}px` }; @@ -78,16 +74,16 @@ export const InstanceList = ({ instance, position, type - } + }; toggleInstancesTooltip(tooltipData); }; - const handleMouseOut = (evt) => { + const handleMouseOut = evt => { toggleInstancesTooltip({ show: false }); }; - const instanceList = instances.map((instance, index) => + const instanceList = instances.map((instance, index) => ( - ); + )); const _instances = !instanceList.length ? : instanceList; @@ -105,7 +101,7 @@ export const InstanceList = ({ {_instances} ); -} +}; const mapStateToProps = (state, ownProps) => ({ instancesTooltip: state.ui.instances.tooltip @@ -131,7 +127,7 @@ const InstanceListGql = graphql(InstancesQuery, { } }; }, - props: ({ data: { deploymentGroup, loading, error }}) => ({ + props: ({ data: { deploymentGroup, loading, error } }) => ({ deploymentGroup, instances: sortBy( forceArray( @@ -151,8 +147,5 @@ const InstanceListGql = graphql(InstancesQuery, { export default compose( UiConnect, InstanceListGql, - withNotFound([ - GqlPaths.DEPLOYMENT_GROUP, - GqlPaths.SERVICES - ]) + withNotFound([GqlPaths.DEPLOYMENT_GROUP, GqlPaths.SERVICES]) )(InstanceList); diff --git a/packages/cp-frontend/src/containers/instances/tooltip.js b/packages/cp-frontend/src/containers/instances/tooltip.js index 9d9cca24..728a2597 100644 --- a/packages/cp-frontend/src/containers/instances/tooltip.js +++ b/packages/cp-frontend/src/containers/instances/tooltip.js @@ -12,37 +12,34 @@ const StyledContainer = styled.div` const healthMessages = { healthy: 'Your instance is operating as expected', unhealthy: 'Your instance is not operating as expected', - maintenance: 'You\'ve set your instance to this manually, use the Container Pilot CLI to change', - unknown: 'We\'ve connected to your instance but we have no health information', - unavailable: 'We cannot connect to your instance', + maintenance: + "You've set your instance to this manually, use the Container Pilot CLI to change", + unknown: "We've connected to your instance but we have no health information", + unavailable: 'We cannot connect to your instance' }; const statusMessages = { running: 'Your instance is operating', provisioning: 'Your instance is downloading dependencies and compiling', - ready: 'Your instance finished provisioning and is ready to be run, it\'ll be running soon', + ready: + "Your instance finished provisioning and is ready to be run, it'll be running soon", stopping: 'Your instance is going to be stopped soon', - stopped: 'Your instance isn\'t doing anything, you can start it', + stopped: "Your instance isn't doing anything, you can start it", offline: 'We have no idea what this means, do you??????', failed: 'Your instance has crashed', - unknown: 'We cannot work out what status your instance is in', + unknown: 'We cannot work out what status your instance is in' }; -export const InstancesTooltip = ({ - instancesTooltip -}) => { +export const InstancesTooltip = ({ instancesTooltip }) => { + if (instancesTooltip.show) { + const { type, instance } = instancesTooltip; - if(instancesTooltip.show) { - const { - type, - instance - } = instancesTooltip; - - const message = type === 'healthy' - ? healthMessages[instance.healthy.toLowerCase()] - : type === 'status' - ? statusMessages[instance.status.toLowerCase()] - : ''; + const message = + type === 'healthy' + ? healthMessages[instance.healthy.toLowerCase()] + : type === 'status' + ? statusMessages[instance.status.toLowerCase()] + : ''; return ( @@ -50,7 +47,7 @@ export const InstancesTooltip = ({ {message} - ) + ); } return null; diff --git a/packages/cp-frontend/src/containers/manifest/edit-or-create.js b/packages/cp-frontend/src/containers/manifest/edit-or-create.js index 4b05ee7d..ac0d6c31 100644 --- a/packages/cp-frontend/src/containers/manifest/edit-or-create.js +++ b/packages/cp-frontend/src/containers/manifest/edit-or-create.js @@ -175,7 +175,9 @@ class DeploymentGroupEditOrCreate extends Component { name.replace(/^\$/, '') ); - const vars = uniq(names).map(name => `\n${name}=`).join(''); + const vars = uniq(names) + .map(name => `\n${name}=`) + .join(''); return `# define your interpolatable variables here\n${vars}`; } diff --git a/packages/cp-frontend/src/containers/manifest/index.js b/packages/cp-frontend/src/containers/manifest/index.js index 8fefcb27..d34a8051 100644 --- a/packages/cp-frontend/src/containers/manifest/index.js +++ b/packages/cp-frontend/src/containers/manifest/index.js @@ -47,12 +47,12 @@ const Manifest = ({ } const _notice = - deploymentGroup && deploymentGroup.imported && !manifest - ? - : null; + deploymentGroup && deploymentGroup.imported && !manifest ? ( + + ) : null; return ( diff --git a/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js b/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js index 89a0f77b..73ae5e2b 100644 --- a/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js +++ b/packages/cp-frontend/src/containers/metrics/metrics-data-hoc.js @@ -11,25 +11,16 @@ export const MetricNames = [ export const withServiceMetricsPolling = ({ pollingInterval = 1000 // in milliseconds }) => { - return (WrappedComponent) => { - + return WrappedComponent => { return class extends Component { - componentDidMount() { - this._poll = setInterval(() => { - const { - loading, - error, - service, - fetchMoreMetrics - } = this.props; + const { loading, error, service, fetchMoreMetrics } = this.props; - if(!loading && !error && service) { + if (!loading && !error && service) { const previousEnd = service.instances[0].metrics[0].end; fetchMoreMetrics(previousEnd); } - }, pollingInterval); // TODO this is the polling interval - think about amount is the todo I guess... } @@ -38,24 +29,28 @@ export const withServiceMetricsPolling = ({ } render() { - return + return ; } - } - } -} + }; + }; +}; export const withServiceMetricsGql = ({ gqlQuery, graphDurationSeconds, updateIntervalSeconds }) => { - - const getPreviousMetrics = (previousResult, serviceId, instanceId, metricName) => { + const getPreviousMetrics = ( + previousResult, + serviceId, + instanceId, + metricName + ) => { return previousResult.deploymentGroup.services - .find(s => s.id === serviceId).instances - .find(i => i.id === instanceId).metrics - .find(m => m.name === metricName).metrics; - } + .find(s => s.id === serviceId) + .instances.find(i => i.id === instanceId) + .metrics.find(m => m.name === metricName).metrics; + }; const getNextResult = (previousResult, fetchNextResult) => { const deploymentGroup = fetchNextResult.deploymentGroup; @@ -69,18 +64,18 @@ export const withServiceMetricsGql = ({ metrics: instance.metrics.map(metric => ({ ...metric, metrics: getPreviousMetrics( - previousResult, - service.id, - instance.id, - metric.name - ).concat(metric.metrics) + previousResult, + service.id, + instance.id, + metric.name + ).concat(metric.metrics) })) })) })) } - } + }; return nextResult; - } + }; return graphql(gqlQuery, { options(props) { @@ -90,7 +85,10 @@ export const withServiceMetricsGql = ({ // this is potentially prone to overfetching if we already have data within timeframe and we leave the page then come back to it const end = moment(); - const start = moment(end).subtract(graphDurationSeconds + updateIntervalSeconds, 'seconds'); // TODO initial amount of data we wanna get - should be the same as what we display + 15 secs + const start = moment(end).subtract( + graphDurationSeconds + updateIntervalSeconds, + 'seconds' + ); // TODO initial amount of data we wanna get - should be the same as what we display + 15 secs return { variables: { @@ -102,27 +100,34 @@ export const withServiceMetricsGql = ({ } }; }, - props: ({ data: { deploymentGroup, loading, error, variables, fetchMore }}) => { - - const fetchMoreMetrics = (previousEnd) => { + props: ({ + data: { deploymentGroup, loading, error, variables, fetchMore } + }) => { + const fetchMoreMetrics = previousEnd => { fetchMore({ variables: { ...variables, start: previousEnd, - end: moment().utc().format() + end: moment() + .utc() + .format() }, - updateQuery: (previousResult, { fetchMoreResult, queryVariables }) => { + updateQuery: ( + previousResult, + { fetchMoreResult, queryVariables } + ) => { return getNextResult(previousResult, fetchMoreResult); } }); - } - return ({ + }; + return { deploymentGroup, - service: !loading && deploymentGroup ? deploymentGroup.services[0] : null, + service: + !loading && deploymentGroup ? deploymentGroup.services[0] : null, loading, error, fetchMoreMetrics - }) + }; } }); -} +}; diff --git a/packages/cp-frontend/src/containers/navigation/breadcrumb.js b/packages/cp-frontend/src/containers/navigation/breadcrumb.js index c5e32330..4f67b719 100644 --- a/packages/cp-frontend/src/containers/navigation/breadcrumb.js +++ b/packages/cp-frontend/src/containers/navigation/breadcrumb.js @@ -9,8 +9,11 @@ import { serviceBySlugSelector } from '@root/state/selectors'; -export const Breadcrumb = ({ deploymentGroup, service, location: { pathname }}) => { - +export const Breadcrumb = ({ + deploymentGroup, + service, + location: { pathname } +}) => { const path = pathname.split('/'); const links = [ @@ -41,7 +44,7 @@ Breadcrumb.propTypes = { deploymentGroup: PropTypes.object, service: PropTypes.object, location: PropTypes.object -} +}; const connectBreadcrumb = connect( (state, ownProps) => { @@ -59,7 +62,4 @@ const connectBreadcrumb = connect( dispatch => ({}) ); -export default compose( - connectBreadcrumb, - withNotFound() -)(Breadcrumb); +export default compose(connectBreadcrumb, withNotFound())(Breadcrumb); diff --git a/packages/cp-frontend/src/containers/navigation/header.js b/packages/cp-frontend/src/containers/navigation/header.js index 34a7a8c6..dcc66e02 100644 --- a/packages/cp-frontend/src/containers/navigation/header.js +++ b/packages/cp-frontend/src/containers/navigation/header.js @@ -5,8 +5,9 @@ import get from 'lodash.get'; import PortalQuery from '@graphql/Portal.gql'; import { Header as HeaderComponent } from '@components/navigation'; -export const Header = ({ datacenter, username }) => - ; +export const Header = ({ datacenter, username }) => ( + +); const HeaderWithData = graphql(PortalQuery, { props: ({ data: { portal = {} } }) => ({ diff --git a/packages/cp-frontend/src/containers/navigation/menu.js b/packages/cp-frontend/src/containers/navigation/menu.js index 6e2a8f91..c816ca58 100644 --- a/packages/cp-frontend/src/containers/navigation/menu.js +++ b/packages/cp-frontend/src/containers/navigation/menu.js @@ -5,7 +5,6 @@ import withNotFound from './not-found-hoc'; import { Menu as MenuComponent } from '@components/navigation'; export const Menu = ({ location, match, sections }) => { - if (!sections || !sections.length) { return null; } @@ -40,7 +39,4 @@ const connectMenu = connect( dispatch => ({}) ); -export default compose( - connectMenu, - withNotFound() -)(Menu); +export default compose(connectMenu, withNotFound())(Menu); diff --git a/packages/cp-frontend/src/containers/navigation/not-found-hoc.js b/packages/cp-frontend/src/containers/navigation/not-found-hoc.js index 7a9eea6a..0c12f945 100644 --- a/packages/cp-frontend/src/containers/navigation/not-found-hoc.js +++ b/packages/cp-frontend/src/containers/navigation/not-found-hoc.js @@ -4,31 +4,24 @@ import { NotFound } from '@components/navigation'; export const GqlPaths = { DEPLOYMENT_GROUP: 'deploymentGroup', SERVICES: 'services' -} - -export default (paths) => { - return (WrappedComponent) => { +}; +export default paths => { + return WrappedComponent => { return class extends Component { - componentWillReceiveProps(nextProps) { - - if(paths) { - const { - error, - location, - history - } = nextProps; + if (paths) { + const { error, location, history } = nextProps; if ( - error - && (!location.state || !location.state.notFound) - && (error.graphQLErrors && error.graphQLErrors.length) + error && + (!location.state || !location.state.notFound) && + (error.graphQLErrors && error.graphQLErrors.length) ) { const graphQLError = error.graphQLErrors[0]; - if(graphQLError.message === 'Not Found') { + if (graphQLError.message === 'Not Found') { const notFound = graphQLError.path.pop(); - if(paths.indexOf(notFound) > -1) { + if (paths.indexOf(notFound) > -1) { history.replace(location.pathname, { notFound }); } } @@ -37,25 +30,22 @@ export default (paths) => { } render() { + const { error, location, match } = this.props; - const { - error, - location, - match - } = this.props; - - if(location.state && location.state.notFound) { + if (location.state && location.state.notFound) { const notFound = location.state.notFound; - if(paths && paths.indexOf(notFound) > -1) { + if (paths && paths.indexOf(notFound) > -1) { let title; let to; let link; - if(notFound === 'services' || notFound === 'service') { + if (notFound === 'services' || notFound === 'service') { title = 'This service doesn’t exist'; - to = match.url.split('/').slice(0, 3).join('/'); + to = match.url + .split('/') + .slice(0, 3) + .join('/'); link = 'Back to services'; - } - else if(notFound === 'deploymentGroup') { + } else if (notFound === 'deploymentGroup') { title = 'This deployment group doesn’t exist'; to = '/deployment-group'; link = 'Back to dashboard'; @@ -63,17 +53,17 @@ export default (paths) => { return ( - ) + ); } return null; } - return + return ; } - } - } -} + }; + }; +}; diff --git a/packages/cp-frontend/src/containers/service/delete.js b/packages/cp-frontend/src/containers/service/delete.js index ed048426..3fc932df 100644 --- a/packages/cp-frontend/src/containers/service/delete.js +++ b/packages/cp-frontend/src/containers/service/delete.js @@ -21,7 +21,10 @@ export class ServiceDelete extends Component { const { loading, error, match, history } = this.props; const handleCloseClick = evt => { - const closeUrl = match.url.split('/').slice(0, -2).join('/'); + const closeUrl = match.url + .split('/') + .slice(0, -2) + .join('/'); history.replace(closeUrl); }; @@ -37,8 +40,8 @@ export class ServiceDelete extends Component { return ( @@ -51,7 +54,7 @@ export class ServiceDelete extends Component { return ( @@ -60,9 +63,11 @@ export class ServiceDelete extends Component { } const handleConfirmClick = evt => { - deleteServices(service.id).then(() => handleCloseClick()).catch(err => { - this.setState({ error: err }); - }); + deleteServices(service.id) + .then(() => handleCloseClick()) + .catch(err => { + this.setState({ error: err }); + }); }; return ( @@ -98,5 +103,5 @@ const DeleteServicesGql = graphql(ServicesDeleteMutation, { export default compose( DeleteServicesGql, ServiceGql, - withNotFound([ GqlPaths.SERVICES ]) + withNotFound([GqlPaths.SERVICES]) )(ServiceDelete); diff --git a/packages/cp-frontend/src/containers/service/metrics.js b/packages/cp-frontend/src/containers/service/metrics.js index 1dc6ef72..47662938 100644 --- a/packages/cp-frontend/src/containers/service/metrics.js +++ b/packages/cp-frontend/src/containers/service/metrics.js @@ -10,17 +10,16 @@ import { ServiceMetrics as ServiceMetricsComponent } from '@components/service'; import { Button } from 'joyent-ui-toolkit'; import { Loader, ErrorMessage } from '@components/messaging'; -import { withServiceMetricsPolling, withServiceMetricsGql } from '@containers/metrics'; +import { + withServiceMetricsPolling, + withServiceMetricsGql +} from '@containers/metrics'; // 'width' of graph, i.e. total duration of time it'll display and truncate data to // amount of data we'll need to initially fetch const GraphDurationSeconds = 90; -const ServiceMetrics = ({ - service, - loading, - error -}) => { +const ServiceMetrics = ({ service, loading, error }) => { if (loading || !service) { return ( @@ -43,8 +42,8 @@ const ServiceMetrics = ({ // metricsData should prob be an array rather than an object const metricsData = service.instances.reduce((metrics, instance) => { // gather metrics of instances according to type - instance.metrics.forEach((instanceMetrics) => { - if(!metrics[instanceMetrics.name]) { + instance.metrics.forEach(instanceMetrics => { + if (!metrics[instanceMetrics.name]) { metrics[instanceMetrics.name] = []; } metrics[instanceMetrics.name].push(instanceMetrics); @@ -69,10 +68,7 @@ export default compose( updateIntervalSeconds: 15 }), withServiceMetricsPolling({ pollingInterval: 1000 }), - withNotFound([ - GqlPaths.DEPLOYMENT_GROUP, - GqlPaths.SERVICES - ]) + withNotFound([GqlPaths.DEPLOYMENT_GROUP, GqlPaths.SERVICES]) )(ServiceMetrics); /* diff --git a/packages/cp-frontend/src/containers/service/scale.js b/packages/cp-frontend/src/containers/service/scale.js index 26a77226..08ce9312 100644 --- a/packages/cp-frontend/src/containers/service/scale.js +++ b/packages/cp-frontend/src/containers/service/scale.js @@ -22,7 +22,10 @@ export class ServiceScale extends Component { const { loading, error, match, history } = this.props; const handleCloseClick = evt => { - const closeUrl = match.url.split('/').slice(0, -2).join('/'); + const closeUrl = match.url + .split('/') + .slice(0, -2) + .join('/'); history.replace(closeUrl); }; @@ -38,8 +41,8 @@ export class ServiceScale extends Component { return ( @@ -52,7 +55,7 @@ export class ServiceScale extends Component { return ( @@ -70,9 +73,11 @@ export class ServiceScale extends Component { }; const handleSubmitClick = values => { - scale(service.id, values.replicas).then(handleCloseClick).catch(err => { - this.setState({ error: err }); - }); + scale(service.id, values.replicas) + .then(handleCloseClick) + .catch(err => { + this.setState({ error: err }); + }); }; if (!service) { @@ -126,5 +131,5 @@ const ServiceScaleGql = graphql(ServiceScaleMutation, { export default compose( ServiceScaleGql, ServiceGql, - withNotFound([ GqlPaths.SERVICES ]) + withNotFound([GqlPaths.SERVICES]) )(ServiceScale); diff --git a/packages/cp-frontend/src/containers/services/list.js b/packages/cp-frontend/src/containers/services/list.js index c135bd26..0c20b339 100644 --- a/packages/cp-frontend/src/containers/services/list.js +++ b/packages/cp-frontend/src/containers/services/list.js @@ -34,7 +34,7 @@ export class ServiceList extends Component { services, loading, error, - toggleServicesQuickActions, + toggleServicesQuickActions } = this.props; if (loading && !forceArray(services).length) { @@ -73,8 +73,9 @@ export class ServiceList extends Component { const buttonRect = button.getBoundingClientRect(); const position = { - left: - `${buttonRect.left + window.scrollX + (buttonRect.right - buttonRect.left) / 2}px`, + left: `${buttonRect.left + + window.scrollX + + (buttonRect.right - buttonRect.left) / 2}px`, top: `${buttonRect.bottom + window.scrollY}px` }; @@ -120,9 +121,7 @@ export class ServiceList extends Component { return ( {renderedError} - - {serviceList} - + {serviceList} ); } @@ -134,7 +133,7 @@ ServiceList.propTypes = { loading: PropTypes.bool, error: PropTypes.bool, toggleServicesQuickActions: PropTypes.func -} +}; const mapStateToProps = (state, ownProps) => ({}); @@ -153,7 +152,7 @@ const ServicesGql = graphql(ServicesQuery, { } }; }, - props: ({ data: { deploymentGroup, loading, error }}) => ({ + props: ({ data: { deploymentGroup, loading, error } }) => ({ deploymentGroup, services: deploymentGroup ? processServices(deploymentGroup.services, null) @@ -166,7 +165,7 @@ const ServicesGql = graphql(ServicesQuery, { const ServiceListWithData = compose( ServicesGql, UiConnect, - withNotFound([ GqlPaths.DEPLOYMENT_GROUP ]) + withNotFound([GqlPaths.DEPLOYMENT_GROUP]) )(ServiceList); export default ServiceListWithData; diff --git a/packages/cp-frontend/src/containers/services/menu.js b/packages/cp-frontend/src/containers/services/menu.js index aa7de230..3c4bc255 100644 --- a/packages/cp-frontend/src/containers/services/menu.js +++ b/packages/cp-frontend/src/containers/services/menu.js @@ -20,11 +20,8 @@ const PaddedRow = Row.extend` margin-bottom: ${remcalc(18)} `; -export const ServicesMenu = ({ - location: { pathname }, - history: { push } -}) => { +export const ServicesMenu = ({ location: { pathname }, history: { push } }) => { const toggleValue = pathname.split('-').pop(); const handleToggle = evt => { diff --git a/packages/cp-frontend/src/containers/services/quick-actions.js b/packages/cp-frontend/src/containers/services/quick-actions.js index dfbc34c8..02b88f67 100644 --- a/packages/cp-frontend/src/containers/services/quick-actions.js +++ b/packages/cp-frontend/src/containers/services/quick-actions.js @@ -17,13 +17,12 @@ const StyledContainer = styled.div` `; export class ServicesQuickActions extends Component { - constructor(props) { super(props); this.state = { errors: {} - } + }; } render() { @@ -53,20 +52,20 @@ export class ServicesQuickActions extends Component { ? 'An error occurred while attempting to restart your service.' : ''; - errorMessage = ( + errorMessage = ( ); } - if(servicesQuickActions.show) { + if (servicesQuickActions.show) { const handleTooltipBlur = evt => { toggleServicesQuickActions({ show: false }); }; const handleRestartClick = (evt, service) => { - this.setState({errors: {}}); + this.setState({ errors: {} }); toggleServicesQuickActions({ show: false }); restartServices(service.id).catch(err => { this.setState({ errors: { restart: err } }); @@ -74,7 +73,7 @@ export class ServicesQuickActions extends Component { }; const handleStopClick = (evt, service) => { - this.setState({errors: {}}); + this.setState({ errors: {} }); toggleServicesQuickActions({ show: false }); stopServices(service.id).catch(err => { this.setState({ errors: { stop: err } }); @@ -82,7 +81,7 @@ export class ServicesQuickActions extends Component { }; const handleStartClick = (evt, service) => { - this.setState({errors: {}}); + this.setState({ errors: {} }); toggleServicesQuickActions({ show: false }); startServices(service.id).catch(err => { this.setState({ errors: { start: err } }); @@ -90,13 +89,13 @@ export class ServicesQuickActions extends Component { }; const handleScaleClick = (evt, service) => { - this.setState({errors: {}}); + this.setState({ errors: {} }); toggleServicesQuickActions({ show: false }); push(`${url}/${service.slug}/scale`); }; const handleDeleteClick = (evt, service) => { - this.setState({errors: {}}); + this.setState({ errors: {} }); toggleServicesQuickActions({ show: false }); push(`${url}/${service.slug}/delete`); }; @@ -115,16 +114,16 @@ export class ServicesQuickActions extends Component { onDeleteClick={handleDeleteClick} /> - ) + ); } - if(quickActions || errorMessage) { + if (quickActions || errorMessage) { return (
    {errorMessage} {quickActions}
    - ) + ); } return null; diff --git a/packages/cp-frontend/src/containers/services/topology.js b/packages/cp-frontend/src/containers/services/topology.js index f40d6951..abc3b87e 100644 --- a/packages/cp-frontend/src/containers/services/topology.js +++ b/packages/cp-frontend/src/containers/services/topology.js @@ -47,7 +47,7 @@ export class ServicesTopology extends Component { services, loading, error, - toggleServicesQuickActions, + toggleServicesQuickActions } = this.props; if (loading && !forceArray(services).length) { @@ -85,18 +85,27 @@ export class ServicesTopology extends Component { const container = this._refs.container; const containerRect = container.getBoundingClientRect(); const position = { - top: `${containerRect.top + window.scrollY + tooltipData.position.top}px`, - left: `${containerRect.left + window.scrollX + tooltipData.position.left}px` - } + top: `${containerRect.top + + window.scrollY + + tooltipData.position.top}px`, + left: `${containerRect.left + + window.scrollX + + tooltipData.position.left}px` + }; const data = { ...tooltipData, position - } + }; toggleServicesQuickActions(data); }; const handleNodeTitleClick = (evt, { service }) => { - push(`${url.split('/').slice(0, 3).join('/')}/services/${service.slug}`); + push( + `${url + .split('/') + .slice(0, 3) + .join('/')}/services/${service.slug}` + ); }; let renderedError = null; @@ -173,7 +182,7 @@ const ServicesGql = graphql(ServicesQuery, { const ServicesTopologyWithData = compose( ServicesGql, UiConnect, - withNotFound([ GqlPaths.DEPLOYMENT_GROUP ]) + withNotFound([GqlPaths.DEPLOYMENT_GROUP]) )(ServicesTopology); export default ServicesTopologyWithData; diff --git a/packages/cp-frontend/src/graphql/ServiceMetrics.gql b/packages/cp-frontend/src/graphql/ServiceMetrics.gql index 6c6cb232..c54f47e0 100644 --- a/packages/cp-frontend/src/graphql/ServiceMetrics.gql +++ b/packages/cp-frontend/src/graphql/ServiceMetrics.gql @@ -1,8 +1,8 @@ query Instances( - $deploymentGroupSlug: String!, - $serviceSlug: String!, - $metricNames: [MetricName]!, - $start: String!, + $deploymentGroupSlug: String! + $serviceSlug: String! + $metricNames: [MetricName]! + $start: String! $end: String! ) { deploymentGroup(slug: $deploymentGroupSlug) { diff --git a/packages/cp-frontend/src/router.js b/packages/cp-frontend/src/router.js index 7e781717..a523a413 100644 --- a/packages/cp-frontend/src/router.js +++ b/packages/cp-frontend/src/router.js @@ -25,10 +25,7 @@ import { ServiceMetrics } from '@containers/service'; -import { - InstanceList, - InstancesTooltip -} from '@containers/instances'; +import { InstanceList, InstancesTooltip } from '@containers/instances'; import { DeploymentGroupDelete } from '@containers/deployment-group'; @@ -43,23 +40,27 @@ const Container = styled.div` const rootRedirect = p => ; -const servicesListRedirect = p => +const servicesListRedirect = p => ( ; + /> +); -const servicesTopologyRedirect = p => +const servicesTopologyRedirect = p => ( ; + to={`/deployment-groups/${p.match.params + .deploymentGroup}/services-topology`} + /> +); -const serviceRedirect = p => +const serviceRedirect = p => ( ; + /> +); -const App = p => +const App = p => (
    component={servicesTopologyRedirect} /> -
    ; +
    +); const Router = ( diff --git a/packages/cp-frontend/src/state/reducers/ui.js b/packages/cp-frontend/src/state/reducers/ui.js index 06ac7d46..632944dc 100644 --- a/packages/cp-frontend/src/state/reducers/ui.js +++ b/packages/cp-frontend/src/state/reducers/ui.js @@ -1,5 +1,8 @@ import { handleActions } from 'redux-actions'; -import { toggleServicesQuickActions, toggleInstancesTooltip } from '@state/actions'; +import { + toggleServicesQuickActions, + toggleInstancesTooltip +} from '@state/actions'; export const _toggleServicesQuickActions = (state, action) => { const { position, service, show } = action.payload; diff --git a/packages/cp-frontend/src/state/selectors.js b/packages/cp-frontend/src/state/selectors.js index 23a2d3de..c57d7974 100644 --- a/packages/cp-frontend/src/state/selectors.js +++ b/packages/cp-frontend/src/state/selectors.js @@ -104,10 +104,10 @@ const getInstancesHealthy = instances => { return instances.reduce( (healthy, instance) => ({ total: healthy.total + 1, - healthy: instance.healthy === 'HEALTHY' ? - healthy.healthy + 1 : healthy.healthy + healthy: + instance.healthy === 'HEALTHY' ? healthy.healthy + 1 : healthy.healthy }), - {total: 0, healthy: 0} + { total: 0, healthy: 0 } ); }; @@ -174,6 +174,8 @@ const processServicesForTopology = services => { })); }; +/* , + instancesByServiceId */ export { deploymentGroupBySlug as deploymentGroupBySlugSelector, serviceBySlug as serviceBySlugSelector, @@ -182,6 +184,5 @@ export { getInstancesHealthy, getService, processServices, - processServicesForTopology /* , - instancesByServiceId */ + processServicesForTopology }; diff --git a/packages/cp-frontend/src/state/store.js b/packages/cp-frontend/src/state/store.js index 6e7b9b35..817c1663 100644 --- a/packages/cp-frontend/src/state/store.js +++ b/packages/cp-frontend/src/state/store.js @@ -30,8 +30,11 @@ export const client = new ApolloClient({ ? o.timestamp : o.name && o.instance ? `${o.name}-${o.instance}` - : o.name ? o.name : o.time && o.value - ? `${o.time}-${o.value}` : 'apollo-cache-key-not-defined'; + : o.name + ? o.name + : o.time && o.value + ? `${o.time}-${o.value}` + : 'apollo-cache-key-not-defined'; return `${o.__typename}:${id}`; }, networkInterface: createNetworkInterface({ diff --git a/packages/cp-frontend/test/unit/components/deployment-group/delete.js b/packages/cp-frontend/test/unit/components/deployment-group/delete.js index 9be55462..f6376d51 100644 --- a/packages/cp-frontend/test/unit/components/deployment-group/delete.js +++ b/packages/cp-frontend/test/unit/components/deployment-group/delete.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -12,9 +11,7 @@ import { deploymentGroup } from '../../mocks'; it('renders without throwing', () => { const tree = renderer - .create( - - ) + .create() .toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/instances/empty.js b/packages/cp-frontend/test/unit/components/instances/empty.js index abc79ae8..f3a9f023 100644 --- a/packages/cp-frontend/test/unit/components/instances/empty.js +++ b/packages/cp-frontend/test/unit/components/instances/empty.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -10,10 +9,6 @@ import 'jest-styled-components'; import EmtpyInstances from '@components/instances/empty.js'; it('renders without throwing', () => { - const tree = renderer - .create( - - ) - .toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/instances/list-item.js b/packages/cp-frontend/test/unit/components/instances/list-item.js index 70faf1e1..14929098 100644 --- a/packages/cp-frontend/test/unit/components/instances/list-item.js +++ b/packages/cp-frontend/test/unit/components/instances/list-item.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -11,10 +10,6 @@ import InstanceCard from '@components/instances/list-item.js'; import { instance } from '../../mocks'; it('renders without throwing', () => { - const tree = renderer - .create( - - ) - .toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/layout/container.js b/packages/cp-frontend/test/unit/components/layout/container.js index 1af1a623..2883f3ee 100644 --- a/packages/cp-frontend/test/unit/components/layout/container.js +++ b/packages/cp-frontend/test/unit/components/layout/container.js @@ -9,10 +9,6 @@ import 'jest-styled-components'; import Container from '@components/layout/container'; it('renders without throwing', () => { - const tree = renderer - .create( - - ) - .toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js b/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js index 4cfa6fc8..5f4392b7 100644 --- a/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js +++ b/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/components/messaging/error.js b/packages/cp-frontend/test/unit/components/messaging/error.js index fd33db9b..fbc498a5 100644 --- a/packages/cp-frontend/test/unit/components/messaging/error.js +++ b/packages/cp-frontend/test/unit/components/messaging/error.js @@ -9,10 +9,6 @@ import 'jest-styled-components'; import Error from '@components/messaging/error'; it('renders without throwing', () => { - const tree = renderer - .create( - - ) - .toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/messaging/loader.js b/packages/cp-frontend/test/unit/components/messaging/loader.js index beb6fae7..e32492d5 100644 --- a/packages/cp-frontend/test/unit/components/messaging/loader.js +++ b/packages/cp-frontend/test/unit/components/messaging/loader.js @@ -9,10 +9,6 @@ import 'jest-styled-components'; import Loader from '@components/messaging/loader'; it('renders without throwing', () => { - const tree = renderer - .create( - - ) - .toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/messaging/modal-error.js b/packages/cp-frontend/test/unit/components/messaging/modal-error.js index 87662409..4d6d2388 100644 --- a/packages/cp-frontend/test/unit/components/messaging/modal-error.js +++ b/packages/cp-frontend/test/unit/components/messaging/modal-error.js @@ -11,7 +11,7 @@ import ModalError from '@components/messaging/modal-error'; it('renders without throwing', () => { const tree = renderer .create( - {}}/> + {}} /> ) .toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/cp-frontend/test/unit/components/messaging/warning.js b/packages/cp-frontend/test/unit/components/messaging/warning.js index 83c46ac0..eb7e7728 100644 --- a/packages/cp-frontend/test/unit/components/messaging/warning.js +++ b/packages/cp-frontend/test/unit/components/messaging/warning.js @@ -9,10 +9,6 @@ import 'jest-styled-components'; import Warning from '@components/messaging/warning'; it('renders without throwing', () => { - const tree = renderer - .create( - - ) - .toJSON(); + const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/navigation/title.js b/packages/cp-frontend/test/unit/components/navigation/title.js index 43a0d58e..a4256733 100644 --- a/packages/cp-frontend/test/unit/components/navigation/title.js +++ b/packages/cp-frontend/test/unit/components/navigation/title.js @@ -9,10 +9,6 @@ import 'jest-styled-components'; import Title from '@components/navigation/title'; it('renders without throwing', () => { - const tree = renderer - .create( - <Title /> - ) - .toJSON(); + const tree = renderer.create(<Title />).toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/service/delete.js b/packages/cp-frontend/test/unit/components/service/delete.js index fa91e810..e0d2fb81 100644 --- a/packages/cp-frontend/test/unit/components/service/delete.js +++ b/packages/cp-frontend/test/unit/components/service/delete.js @@ -10,10 +10,6 @@ import { service } from '../../mocks'; import Delete from '@components/service/delete'; it('renders <Delete /> without throwing', () => { - const tree = renderer - .create( - <Delete service={service} /> - ) - .toJSON(); + const tree = renderer.create(<Delete service={service} />).toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/services/empty.js b/packages/cp-frontend/test/unit/components/services/empty.js index 1d0e072f..b949a4c7 100644 --- a/packages/cp-frontend/test/unit/components/services/empty.js +++ b/packages/cp-frontend/test/unit/components/services/empty.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/components/services/list-item.js b/packages/cp-frontend/test/unit/components/services/list-item.js index 41a9861d..e5f84ddf 100644 --- a/packages/cp-frontend/test/unit/components/services/list-item.js +++ b/packages/cp-frontend/test/unit/components/services/list-item.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -23,9 +22,7 @@ it('renders <ServiceListItem /> without throwing', () => { it('renders child <ServiceListItem /> without throwing', () => { const tree = renderer - .create( - <ServiceListItem service={service} isChild /> - ) + .create(<ServiceListItem service={service} isChild />) .toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/components/services/quick-actions.js b/packages/cp-frontend/test/unit/components/services/quick-actions.js index 416794bd..b80acd89 100644 --- a/packages/cp-frontend/test/unit/components/services/quick-actions.js +++ b/packages/cp-frontend/test/unit/components/services/quick-actions.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/components/services/status.js b/packages/cp-frontend/test/unit/components/services/status.js index 8850cae2..d880033c 100644 --- a/packages/cp-frontend/test/unit/components/services/status.js +++ b/packages/cp-frontend/test/unit/components/services/status.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -12,9 +11,7 @@ import { service } from '../../mocks'; xit('renders <ServiceStatus /> without throwing', () => { const tree = renderer - .create( - <ServiceStatus instanceStatuses={service.instanceStatuses} /> - ) + .create(<ServiceStatus instanceStatuses={service.instanceStatuses} />) .toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/cp-frontend/test/unit/containers/deployment-group/delete.js b/packages/cp-frontend/test/unit/containers/deployment-group/delete.js index 8801bed0..ad30db92 100644 --- a/packages/cp-frontend/test/unit/containers/deployment-group/delete.js +++ b/packages/cp-frontend/test/unit/containers/deployment-group/delete.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/create.js b/packages/cp-frontend/test/unit/containers/deployment-groups/create.js index 322f37e4..ccae0499 100644 --- a/packages/cp-frontend/test/unit/containers/deployment-groups/create.js +++ b/packages/cp-frontend/test/unit/containers/deployment-groups/create.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -17,12 +16,12 @@ it('renders <DeploymentGroupCreate /> without throwing', () => { stage: '' } } - } + }; const tree = renderer .create( <Store> <Router> - <DeploymentGroupCreate { ...props } /> + <DeploymentGroupCreate {...props} /> </Router> </Store> ) diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/import.js b/packages/cp-frontend/test/unit/containers/deployment-groups/import.js index d1515a53..30409fa2 100644 --- a/packages/cp-frontend/test/unit/containers/deployment-groups/import.js +++ b/packages/cp-frontend/test/unit/containers/deployment-groups/import.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/list.js b/packages/cp-frontend/test/unit/containers/deployment-groups/list.js index df3869d8..39247bc2 100644 --- a/packages/cp-frontend/test/unit/containers/deployment-groups/list.js +++ b/packages/cp-frontend/test/unit/containers/deployment-groups/list.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/instances/list.js b/packages/cp-frontend/test/unit/containers/instances/list.js index efc1ccce..2c5feb9c 100644 --- a/packages/cp-frontend/test/unit/containers/instances/list.js +++ b/packages/cp-frontend/test/unit/containers/instances/list.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/instances/tooltip.js b/packages/cp-frontend/test/unit/containers/instances/tooltip.js index 7a597a9b..323d7475 100644 --- a/packages/cp-frontend/test/unit/containers/instances/tooltip.js +++ b/packages/cp-frontend/test/unit/containers/instances/tooltip.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js b/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js index 927cab0d..967b0d00 100644 --- a/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js +++ b/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js b/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js index c76c1a52..b822b640 100644 --- a/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js +++ b/packages/cp-frontend/test/unit/containers/navigation/breadcrumb.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -15,12 +14,12 @@ it('renders <Breadcrumb /> without throwing', () => { location: { pathname: '' } - } + }; const tree = renderer .create( <Store> <Router> - <Breadcrumb { ...props } /> + <Breadcrumb {...props} /> </Router> </Store> ) diff --git a/packages/cp-frontend/test/unit/containers/navigation/header.js b/packages/cp-frontend/test/unit/containers/navigation/header.js index 8426c0d4..14be8717 100644 --- a/packages/cp-frontend/test/unit/containers/navigation/header.js +++ b/packages/cp-frontend/test/unit/containers/navigation/header.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/navigation/menu.js b/packages/cp-frontend/test/unit/containers/navigation/menu.js index 381499e9..0fa74e85 100644 --- a/packages/cp-frontend/test/unit/containers/navigation/menu.js +++ b/packages/cp-frontend/test/unit/containers/navigation/menu.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js b/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js index 5a51aa5d..b9db719c 100644 --- a/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js +++ b/packages/cp-frontend/test/unit/containers/navigation/not-found-hoc.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/service/delete.js b/packages/cp-frontend/test/unit/containers/service/delete.js index 73b01fe9..ca2b48c4 100644 --- a/packages/cp-frontend/test/unit/containers/service/delete.js +++ b/packages/cp-frontend/test/unit/containers/service/delete.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/service/scale.js b/packages/cp-frontend/test/unit/containers/service/scale.js index 069f60ff..3a29ff2e 100644 --- a/packages/cp-frontend/test/unit/containers/service/scale.js +++ b/packages/cp-frontend/test/unit/containers/service/scale.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/services/list.js b/packages/cp-frontend/test/unit/containers/services/list.js index d51a26c6..22175c88 100644 --- a/packages/cp-frontend/test/unit/containers/services/list.js +++ b/packages/cp-frontend/test/unit/containers/services/list.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -15,10 +14,7 @@ it('renders <ServiceList /> without throwing', () => { .create( <Store> <Router> - <ServiceList - deploymentGroup={deploymentGroup} - services={services} - /> + <ServiceList deploymentGroup={deploymentGroup} services={services} /> </Router> </Store> ) diff --git a/packages/cp-frontend/test/unit/containers/services/menu.js b/packages/cp-frontend/test/unit/containers/services/menu.js index 5fcca50d..8fc1bec9 100644 --- a/packages/cp-frontend/test/unit/containers/services/menu.js +++ b/packages/cp-frontend/test/unit/containers/services/menu.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -18,12 +17,12 @@ it('renders <ServicesMenu /> without throwing', () => { history: { push: () => {} } - } + }; const tree = renderer .create( <Store> <Router> - <ServicesMenu { ...props } /> + <ServicesMenu {...props} /> </Router> </Store> ) diff --git a/packages/cp-frontend/test/unit/containers/services/quick-actions.js b/packages/cp-frontend/test/unit/containers/services/quick-actions.js index 08968d9c..592e19af 100644 --- a/packages/cp-frontend/test/unit/containers/services/quick-actions.js +++ b/packages/cp-frontend/test/unit/containers/services/quick-actions.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ diff --git a/packages/cp-frontend/test/unit/containers/services/topology.js b/packages/cp-frontend/test/unit/containers/services/topology.js index fbad64ea..573fa304 100644 --- a/packages/cp-frontend/test/unit/containers/services/topology.js +++ b/packages/cp-frontend/test/unit/containers/services/topology.js @@ -1,4 +1,3 @@ - /** * @jest-environment jsdom */ @@ -15,9 +14,7 @@ it('renders <ServicesTopology /> without throwing', () => { .create( <Store> <Router> - <ServicesTopology - services={services} - /> + <ServicesTopology services={services} /> </Router> </Store> ) diff --git a/packages/cp-frontend/test/unit/mocks/data.js b/packages/cp-frontend/test/unit/mocks/data.js index 918ae1c1..9949ebdc 100644 --- a/packages/cp-frontend/test/unit/mocks/data.js +++ b/packages/cp-frontend/test/unit/mocks/data.js @@ -1,37 +1,31 @@ export const instance = { - "id": "309ecd9f-ac03-474b-aff7-4bd2e743296c", - "name": "wordpress_01", - "serviceId": "be227788-74f1-4e5b-a85f-b5c71cbae8d8", - "deploymentGroupId": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "machineId": "011f7479-2d45-442d-99bf-7f6216954cc8", - "status": "RUNNING", - "healthy": "HEALTHY" + id: '309ecd9f-ac03-474b-aff7-4bd2e743296c', + name: 'wordpress_01', + serviceId: 'be227788-74f1-4e5b-a85f-b5c71cbae8d8', + deploymentGroupId: 'e0ea0c02-55cc-45fe-8064-3e5176a59401', + machineId: '011f7479-2d45-442d-99bf-7f6216954cc8', + status: 'RUNNING', + healthy: 'HEALTHY' }; export const service = { - "id": "081a792c-47e0-4439-924b-2efa9788ae9e", - "slug": "nginx", - "name": "Nginx", - "deploymentGroupId": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "connections": ["be227788-74f1-4e5b-a85f-b5c71cbae8d8"], - "instances": [instance], - "instanceStatuses": [{ status: "RUNNING", count: 1 }] + id: '081a792c-47e0-4439-924b-2efa9788ae9e', + slug: 'nginx', + name: 'Nginx', + deploymentGroupId: 'e0ea0c02-55cc-45fe-8064-3e5176a59401', + connections: ['be227788-74f1-4e5b-a85f-b5c71cbae8d8'], + instances: [instance], + instanceStatuses: [{ status: 'RUNNING', count: 1 }] }; export const deploymentGroup = { - "id": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "slug": "wordpress-blog-example", - "name": "Wordpress Blog Example" + id: 'e0ea0c02-55cc-45fe-8064-3e5176a59401', + slug: 'wordpress-blog-example', + name: 'Wordpress Blog Example' }; -export const services = [ - service -]; +export const services = [service]; -export const instances = [ - instance -]; +export const instances = [instance]; -export const deploymentGroups = [ - deploymentGroup -] +export const deploymentGroups = [deploymentGroup]; diff --git a/packages/cp-frontend/test/unit/mocks/router.js b/packages/cp-frontend/test/unit/mocks/router.js index 2b0013ab..47dbba36 100644 --- a/packages/cp-frontend/test/unit/mocks/router.js +++ b/packages/cp-frontend/test/unit/mocks/router.js @@ -1,7 +1,4 @@ import React from 'react'; import { MemoryRouter } from 'react-router-dom'; -export default ({ children }) => - <MemoryRouter> - {children} - </MemoryRouter>; +export default ({ children }) => <MemoryRouter>{children}</MemoryRouter>; diff --git a/packages/cp-frontend/test/unit/mocks/store.js b/packages/cp-frontend/test/unit/mocks/store.js index 181065b6..6026ecbc 100644 --- a/packages/cp-frontend/test/unit/mocks/store.js +++ b/packages/cp-frontend/test/unit/mocks/store.js @@ -2,7 +2,8 @@ import React from 'react'; import { client, store } from '@state/store'; import { ApolloProvider } from 'react-apollo'; -export default ({ children }) => +export default ({ children }) => ( <ApolloProvider client={client} store={store}> {children} - </ApolloProvider>; + </ApolloProvider> +); diff --git a/packages/cp-frontend/test/unit/mocks/theme.js b/packages/cp-frontend/test/unit/mocks/theme.js index 7cad5ab3..5b1a2a45 100644 --- a/packages/cp-frontend/test/unit/mocks/theme.js +++ b/packages/cp-frontend/test/unit/mocks/theme.js @@ -2,7 +2,6 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { theme } from 'joyent-ui-toolkit'; -export default ({ children }) => - <ThemeProvider theme={theme}> - {children} - </ThemeProvider>; +export default ({ children }) => ( + <ThemeProvider theme={theme}>{children}</ThemeProvider> +); diff --git a/packages/cp-frontend/test/unit/state/reducers/ui.js b/packages/cp-frontend/test/unit/state/reducers/ui.js index 36b9726a..0a06001a 100644 --- a/packages/cp-frontend/test/unit/state/reducers/ui.js +++ b/packages/cp-frontend/test/unit/state/reducers/ui.js @@ -5,7 +5,6 @@ import { import state from '@state/state'; describe('ui reducer', () => { - it('toggleServicesQuickActions shows correctly', () => { const uiState = state.ui; const expectedUiState = { @@ -23,17 +22,19 @@ describe('ui reducer', () => { } } } - } - const action = { payload: { - show: true, - position: { - top: 10, - left: 10 - }, - service: { - id: 'service-id' + }; + const action = { + payload: { + show: true, + position: { + top: 10, + left: 10 + }, + service: { + id: 'service-id' + } } - }}; + }; const result = _toggleServicesQuickActions(uiState, action); expect(result).toEqual(expectedUiState); }); @@ -48,8 +49,8 @@ describe('ui reducer', () => { show: false } } - } - const action = { payload: { show: false }}; + }; + const action = { payload: { show: false } }; const result = _toggleServicesQuickActions(uiState, action); expect(result).toEqual(expectedUiState); }); @@ -72,18 +73,20 @@ describe('ui reducer', () => { type: 'healthy' } } - } - const action = { payload: { - show: true, - position: { - top: 10, - left: 10 - }, - instance: { - id: 'instance-id' - }, - type: 'healthy' - }}; + }; + const action = { + payload: { + show: true, + position: { + top: 10, + left: 10 + }, + instance: { + id: 'instance-id' + }, + type: 'healthy' + } + }; const result = _toggleInstancesTooltip(uiState, action); expect(result).toEqual(expectedUiState); }); @@ -98,9 +101,9 @@ describe('ui reducer', () => { show: false } } - } - const action = { payload: { show: false }}; + }; + const action = { payload: { show: false } }; const result = _toggleInstancesTooltip(uiState, action); expect(result).toEqual(expectedUiState); }); -}) +}); diff --git a/packages/cp-frontend/test/unit/state/selectors.js b/packages/cp-frontend/test/unit/state/selectors.js index 31f9c2a2..4ad03098 100644 --- a/packages/cp-frontend/test/unit/state/selectors.js +++ b/packages/cp-frontend/test/unit/state/selectors.js @@ -10,48 +10,45 @@ import { } from '@state/selectors'; describe('Redux selectors and Apollo helpers', () => { - describe('getInstanceStatuses', () => { - it('gathers instance statuses correctly', () => { - const service = { - instances: [ - { status: 'RUNNING' }, - { status: 'RUNNING' }, - { status: 'READY' }, - { status: 'RUNNING' }, - { status: 'INCOMPLETE' }, - { status: 'READY' }, - { status: 'OFFLINE' }, - { status: 'STOPPED' }, - { status: 'STOPPED' }, - { status: 'RUNNING' } - ] - }; - const expectedResult = [ - { status: 'RUNNING', count: 4 }, - { status: 'READY', count: 2 }, - { status: 'INCOMPLETE', count: 1 }, - { status: 'OFFLINE', count: 1 }, - { status: 'STOPPED', count: 2 } - ]; - const result = getInstanceStatuses(service); - expect(result).toEqual(expectedResult); + const service = { + instances: [ + { status: 'RUNNING' }, + { status: 'RUNNING' }, + { status: 'READY' }, + { status: 'RUNNING' }, + { status: 'INCOMPLETE' }, + { status: 'READY' }, + { status: 'OFFLINE' }, + { status: 'STOPPED' }, + { status: 'STOPPED' }, + { status: 'RUNNING' } + ] + }; + const expectedResult = [ + { status: 'RUNNING', count: 4 }, + { status: 'READY', count: 2 }, + { status: 'INCOMPLETE', count: 1 }, + { status: 'OFFLINE', count: 1 }, + { status: 'STOPPED', count: 2 } + ]; + const result = getInstanceStatuses(service); + expect(result).toEqual(expectedResult); }); it('does not throw a hissy fit if there are no instances', () => { - const service = { - instances: [] - }; - const expectedResult = []; - const result = getInstanceStatuses(service); - expect(result).toEqual(expectedResult); + const service = { + instances: [] + }; + const expectedResult = []; + const result = getInstanceStatuses(service); + expect(result).toEqual(expectedResult); }); }); describe('getInstancesActive', () => { - - it('returns true if all instances\' status is active', () => { + it("returns true if all instances' status is active", () => { const statuses = [ { status: 'RUNNING' }, { status: 'READY' }, @@ -63,7 +60,7 @@ describe('Redux selectors and Apollo helpers', () => { expect(result).toEqual(expectedResult); }); - it('returns false if no instances\' status is active', () => { + it("returns false if no instances' status is active", () => { const statuses = [ { status: 'STOPPING' }, { status: 'FAILED' }, @@ -75,7 +72,7 @@ describe('Redux selectors and Apollo helpers', () => { expect(result).toEqual(expectedResult); }); - it('returns true if some instances\' status is active', () => { + it("returns true if some instances' status is active", () => { const statuses = [ { status: 'STOPPING' }, { status: 'FAILED' }, @@ -89,7 +86,6 @@ describe('Redux selectors and Apollo helpers', () => { }); describe('getInstancesHealthy', () => { - it('returns the number of healthy instances correctly', () => { const instances = [ { healthy: 'HEALTHY' }, @@ -106,39 +102,31 @@ describe('Redux selectors and Apollo helpers', () => { }); describe('getService', () => { - it('returns the service decorated with details for display correctly', () => { - const result = getService(nginxService, 0); expect(result).toEqual(nginxExpectedResult); }); it('returns the consul service decorated with details for display correctly', () => { - const result = getService(consulService, 1); expect(result).toEqual(consulExpectedResult); }); }); describe('processServices', () => { - it('returns the services decorated with details for display correctly', () => { - const services = [ - nginxService, - consulService - ]; - const expectedResult = [ - nginxExpectedResult, - consulExpectedResult - ]; + const services = [nginxService, consulService]; + const expectedResult = [nginxExpectedResult, consulExpectedResult]; const result = processServices(services); expect(result).toEqual(expectedResult); }); it('removes deleted services', () => { - const services = [{ - status: 'DELETED' - }]; + const services = [ + { + status: 'DELETED' + } + ]; const expectedResult = []; const result = processServices(services); expect(result).toEqual(expectedResult); @@ -146,16 +134,12 @@ describe('Redux selectors and Apollo helpers', () => { }); describe('processServicesForTopology', () => { - it('returns the services decorated with details for display correctly', () => { const services = [ { ...nginxService, id: 'nginx-service-0', - connections: [ - 'consul-service-0', - 'consul-service-1' - ] + connections: ['consul-service-0', 'consul-service-1'] }, { ...nginxService, @@ -164,9 +148,7 @@ describe('Redux selectors and Apollo helpers', () => { { ...consulService, id: 'consul-service-0', - connections: [ - 'consul-service-1' - ] + connections: ['consul-service-1'] }, { ...consulService, @@ -177,10 +159,7 @@ describe('Redux selectors and Apollo helpers', () => { { ...nginxExpectedResult, id: 'nginx-service-0', - connections: [ - 'consul-service-0', - 'consul-service-1' - ], + connections: ['consul-service-0', 'consul-service-1'], connected: true, index: 0 }, @@ -193,9 +172,7 @@ describe('Redux selectors and Apollo helpers', () => { { ...consulExpectedResult, id: 'consul-service-0', - connections: [ - 'consul-service-1' - ], + connections: ['consul-service-1'], connected: true, index: 2 }, diff --git a/packages/cp-gql-mock-server/package.json b/packages/cp-gql-mock-server/package.json index fe4d171f..79d18044 100644 --- a/packages/cp-gql-mock-server/package.json +++ b/packages/cp-gql-mock-server/package.json @@ -48,12 +48,8 @@ "tap-xunit": "^1.7.0" }, "ava": { - "files": [ - "test/*.js" - ], - "source": [ - "src/*.js" - ], + "files": ["test/*.js"], + "source": ["src/*.js"], "failFast": true } } diff --git a/packages/cp-gql-mock-server/src/complex-data.json b/packages/cp-gql-mock-server/src/complex-data.json index f8237074..4512b16e 100644 --- a/packages/cp-gql-mock-server/src/complex-data.json +++ b/packages/cp-gql-mock-server/src/complex-data.json @@ -268,8 +268,10 @@ }, { "id": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4", - "slug": "extra service reported by containerpilot: redbaloonservice-https", - "name": "Extra service reported by ContainerPilot: RedBaloonService-HTTPS", + "slug": + "extra service reported by containerpilot: redbaloonservice-https", + "name": + "Extra service reported by ContainerPilot: RedBaloonService-HTTPS", "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "status": "ACTIVE" }, @@ -578,7 +580,8 @@ "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3", "machineId": "c9a49cff-4438-460f-bc46-610bfecbddca", - "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-0" + "name": + "instance-Extra service reported by ContainerPilot: CartService-HTTPS-0" }, { "id": "instance-31663285-2b58-4f92-b6f5-3ef34591c3a3-1", @@ -587,7 +590,8 @@ "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3", "machineId": "4252ddb5-e9b4-4d1e-aa53-6e1bdcdeab30", - "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-1" + "name": + "instance-Extra service reported by ContainerPilot: CartService-HTTPS-1" }, { "id": "instance-31663285-2b58-4f92-b6f5-3ef34591c3a3-2", @@ -596,7 +600,8 @@ "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3", "machineId": "783c5eb2-2145-4fd2-a22f-274bec3b2ffc", - "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-2" + "name": + "instance-Extra service reported by ContainerPilot: CartService-HTTPS-2" }, { "id": "instance-31663285-2b58-4f92-b6f5-3ef34591c3a3-3", @@ -605,7 +610,8 @@ "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "31663285-2b58-4f92-b6f5-3ef34591c3a3", "machineId": "f8a54a11-93f4-4b0a-9c80-be6542393448", - "name": "instance-Extra service reported by ContainerPilot: CartService-HTTPS-3" + "name": + "instance-Extra service reported by ContainerPilot: CartService-HTTPS-3" }, { "id": "instance-3b954132-49fc-405c-9d91-c59b8953d7b8-0", @@ -1747,7 +1753,8 @@ "healthy": "UNKNOWN", "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4", - "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-0", + "name": + "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-0", "machineId": "20f5bf63-c7d7-4b80-bbe0-63dd744f1b72" }, { @@ -1756,7 +1763,8 @@ "healthy": "UNKNOWN", "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4", - "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-1", + "name": + "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-1", "machineId": "bf10d972-17e0-4267-908e-4a8184d7c164" }, { @@ -1765,7 +1773,8 @@ "healthy": "UNKNOWN", "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4", - "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-2", + "name": + "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-2", "machineId": "d7204a39-5005-4925-a2d5-02afbb2457db" }, { @@ -1774,7 +1783,8 @@ "healthy": "UNKNOWN", "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4", - "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-3", + "name": + "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-3", "machineId": "80dac6f7-e459-4f42-b824-5abdd6f13d41" }, { @@ -1783,7 +1793,8 @@ "healthy": "UNKNOWN", "deploymentGroupId": "ba217234-9b1b-41a7-8079-08f9a4aadb0f", "serviceId": "1ad6dd4e-15bd-4ea5-a0db-bf071d7958c4", - "name": "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-4", + "name": + "instance-Extra service reported by ContainerPilot: RedBaloonService-HTTPS-4", "machineId": "dbb819d5-9df2-48e1-8412-7cd48ca4c186" }, { diff --git a/packages/cp-gql-mock-server/src/metric-data.json b/packages/cp-gql-mock-server/src/metric-data.json index 62aae529..fe6f6e81 100644 --- a/packages/cp-gql-mock-server/src/metric-data.json +++ b/packages/cp-gql-mock-server/src/metric-data.json @@ -53,4 +53,4 @@ } ] } -] \ No newline at end of file +] diff --git a/packages/cp-gql-mock-server/src/metric-datasets-0.json b/packages/cp-gql-mock-server/src/metric-datasets-0.json index 6d7b6ab4..39922faf 100644 --- a/packages/cp-gql-mock-server/src/metric-datasets-0.json +++ b/packages/cp-gql-mock-server/src/metric-datasets-0.json @@ -34466,4 +34466,4 @@ } ] } -] \ No newline at end of file +] diff --git a/packages/cp-gql-mock-server/src/metric-datasets-1.json b/packages/cp-gql-mock-server/src/metric-datasets-1.json index 3da18481..70c0873c 100644 --- a/packages/cp-gql-mock-server/src/metric-datasets-1.json +++ b/packages/cp-gql-mock-server/src/metric-datasets-1.json @@ -34490,4 +34490,4 @@ } ] } -] \ No newline at end of file +] diff --git a/packages/cp-gql-mock-server/src/metric-datasets-2.json b/packages/cp-gql-mock-server/src/metric-datasets-2.json index 9d58676d..c57e0ffe 100644 --- a/packages/cp-gql-mock-server/src/metric-datasets-2.json +++ b/packages/cp-gql-mock-server/src/metric-datasets-2.json @@ -22993,4 +22993,4 @@ } ] } -] \ No newline at end of file +] diff --git a/packages/cp-gql-mock-server/src/resolvers.js b/packages/cp-gql-mock-server/src/resolvers.js index f27f8c1b..3e8dbd8f 100644 --- a/packages/cp-gql-mock-server/src/resolvers.js +++ b/packages/cp-gql-mock-server/src/resolvers.js @@ -48,17 +48,11 @@ const cleanQuery = (q = {}) => JSON.parse(JSON.stringify(q)); let metricDataIndex = 0; const getMetrics = query => { - const { - names, - start, - end, - instanceId - } = query; + const { names, start, end, instanceId } = query; const metrics = names.reduce((metrics, name) => { - // pick one of the three metric data jsons, so there's variety - const index = metricDataIndex%metricData.length; + const index = metricDataIndex % metricData.length; metricDataIndex++; const md = metricData[index].find(md => md.name === name); @@ -69,17 +63,20 @@ const getMetrics = query => { // how many records do we need? const duration = e.diff(s); // duration for which we need data - const records = Math.floor(duration/15000); // new metric record every 15 secs + const records = Math.floor(duration / 15000); // new metric record every 15 secs const requiredMetrics = []; let i = 0; const time = moment(s); // start at a random point within the dataset for variety const randomIndex = Math.round(Math.random() * m.length); - while(i < records) { - const index = (randomIndex + i)%m.length; // loop if not enough data + while (i < records) { + const index = (randomIndex + i) % m.length; // loop if not enough data const requiredMetric = m[index]; - requiredMetric.time = time.add(15, 'seconds').utc().format(); // we should have a new record every 15 secs + requiredMetric.time = time + .add(15, 'seconds') + .utc() + .format(); // we should have a new record every 15 secs requiredMetrics.push(requiredMetric); i++; } @@ -90,13 +87,13 @@ const getMetrics = query => { start: s.utc().format(), end: time.utc().format(), // this will be used by the frontend for the next fetch metrics: requiredMetrics - } + }; metrics.push(requiredMetricData); return metrics; - }, []); + }, []); return Promise.resolve(metrics); -} +}; const getInstances = query => { const metricsResolver = ({ id }) => query => @@ -175,13 +172,12 @@ const getServices = query => { return ret; }); - return Promise.resolve(services) - .then((services) => { - if(!services || !services.length) { - throw Boom.notFound(); - } - return services; - }); + return Promise.resolve(services).then(services => { + if (!services || !services.length) { + throw Boom.notFound(); + } + return services; + }); }; const getDeploymentGroups = query => { @@ -199,8 +195,8 @@ const getDeploymentGroups = query => { return Promise.resolve( deploymentGroups.filter(find(cleanQuery(query))).map(addNestedResolvers) - ).then((deploymentGroups) => { - if(!deploymentGroups || !deploymentGroups.length) { + ).then(deploymentGroups => { + if (!deploymentGroups || !deploymentGroups.length) { throw Boom.notFound(); } return deploymentGroups; @@ -406,11 +402,16 @@ const updateServiceAndInstancesStatus = ( instancesStatus ) => { return Promise.all([ - getServices({ id: serviceId })/* , + getServices({ + id: serviceId + }) /* , getServices({ parentId: serviceId }) */ ]) .then(services => { - return services.reduce((services, service) => services.concat(service), []) + return services.reduce( + (services, service) => services.concat(service), + [] + ); }) .then(services => { updateServiceStatus(services, serviceStatus); @@ -431,7 +432,9 @@ const updateServiceAndInstancesStatus = ( }) .then(() => Promise.all([ - getUnfilteredServices({ id: serviceId })/* , + getUnfilteredServices({ + id: serviceId + }) /* , getUnfilteredServices({ parentId: serviceId }) */ ]) ) @@ -536,12 +539,7 @@ const parseEnvVars = (str = '') => const findEnvInterpolation = (str = '') => uniq(str.match(INTERPOLATE_REGEX).map(name => name.replace(/^\$/, ''))); -const config = ({ - environment = '', - files = [], - raw = '', - _plain = false -}) => { +const config = ({ environment = '', files = [], raw = '', _plain = false }) => { const interpolatableNames = findEnvInterpolation(raw); const interpolatableEnv = parseEnvVars(environment); @@ -588,11 +586,10 @@ const config = ({ config: Object.assign(service.config, { id: hasha(JSON.stringify(service.config)), environment: Object.keys(service.config.environment).map(name => ({ - name, - id: hasha(JSON.stringify(service.config.environment[name])), - value: service.config.environment[name] - }) - ) + name, + id: hasha(JSON.stringify(service.config.environment[name])), + value: service.config.environment[name] + })) }) }) ); diff --git a/packages/cp-gql-schema/schema.gql b/packages/cp-gql-schema/schema.gql index e5a05ce5..4bfdfda5 100644 --- a/packages/cp-gql-schema/schema.gql +++ b/packages/cp-gql-schema/schema.gql @@ -203,7 +203,6 @@ type Datacenter { region: String! } - # we probably wont use some of these queries or arguments # but this way we expose the entire db through gql type Query { @@ -265,7 +264,13 @@ type Query { ): [Service] importableDeploymentGroups: [DeploymentGroup] # start and end should be .toISOString() date strings - metrics(deploymentGroupId: ID!, names: [MetricName]!, instances: [ID]!, start: String!, end: String!): [InstanceMetric] + metrics( + deploymentGroupId: ID! + names: [MetricName]! + instances: [ID]! + start: String! + end: String! + ): [InstanceMetric] } type Mutation { diff --git a/packages/normalized-styled-components/src/index.js b/packages/normalized-styled-components/src/index.js index 0cd671fe..6fd45b8d 100644 --- a/packages/normalized-styled-components/src/index.js +++ b/packages/normalized-styled-components/src/index.js @@ -152,17 +152,17 @@ export const Button = styled.button` appearance: button; &::-moz-focus-inner, - &[type="button"]::-moz-focus-inner, - &[type="reset"]::-moz-focus-inner, - &[type="submit"]::-moz-focus-inner { + &[type='button']::-moz-focus-inner, + &[type='reset']::-moz-focus-inner, + &[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } &:-moz-focusring, - &[type="button"]:-moz-focusring, - &[type="reset"]:-moz-focusring, - &[type="submit"]:-moz-focusring { + &[type='button']:-moz-focusring, + &[type='reset']:-moz-focusring, + &[type='submit']:-moz-focusring { outline: ${remcalc(1)} dotted ButtonText; } `; @@ -174,24 +174,24 @@ export const Input = styled.input` margin: 0; overflow: visible; - &[type="checkbox"], - &[type="radio"] { + &[type='checkbox'], + &[type='radio'] { box-sizing: border-box; padding: 0; } - &[type="number"]::-webkit-inner-spin-button, - &[type="number"]::-webkit-outer-spin-button { + &[type='number']::-webkit-inner-spin-button, + &[type='number']::-webkit-outer-spin-button { height: auto; } - &[type="search"] { + &[type='search'] { appearance: textfield; outline-offset: ${remcalc(-2)}; } - &[type="search"]::-webkit-search-cancel-button, - &[type="search"]::-webkit-search-decoration { + &[type='search']::-webkit-search-cancel-button, + &[type='search']::-webkit-search-decoration { appearance: none; } diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js index e58e220c..09868c51 100644 --- a/packages/ui-toolkit/src/anchor/index.js +++ b/packages/ui-toolkit/src/anchor/index.js @@ -36,11 +36,7 @@ const Anchor = ({ children, ...rest }) => { const Views = [() => (to ? StyledLink : null), () => StyledAnchor]; const View = Views.reduce((sel, view) => (sel ? sel : view()), null); - return ( - <View {...rest}> - {children} - </View> - ); + return <View {...rest}>{children}</View>; }; Anchor.propTypes = { diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js index a375f954..934e122c 100644 --- a/packages/ui-toolkit/src/base/global.js +++ b/packages/ui-toolkit/src/base/global.js @@ -21,6 +21,6 @@ export default css` margin: 0; padding: 0; background: ${theme.background}; - font-family: 'Libre Franklin' + font-family: 'Libre Franklin'; } `; diff --git a/packages/ui-toolkit/src/basealign/index.js b/packages/ui-toolkit/src/basealign/index.js index 013e2922..01c19cce 100644 --- a/packages/ui-toolkit/src/basealign/index.js +++ b/packages/ui-toolkit/src/basealign/index.js @@ -18,4 +18,6 @@ export default Component => ? Component.extend` ${alignsFromProps}; ` - : styled(Component)`${alignsFromProps}`; + : styled(Component)` + ${alignsFromProps}; + `; diff --git a/packages/ui-toolkit/src/baseline/index.js b/packages/ui-toolkit/src/baseline/index.js index c0db86c2..9f40f9b9 100644 --- a/packages/ui-toolkit/src/baseline/index.js +++ b/packages/ui-toolkit/src/baseline/index.js @@ -33,4 +33,6 @@ export default Component => ? Component.extend` ${unitsFromProps}; ` - : styled(Component)`${unitsFromProps}`; + : styled(Component)` + ${unitsFromProps}; + `; diff --git a/packages/ui-toolkit/src/boxes/index.js b/packages/ui-toolkit/src/boxes/index.js index ec9a52cb..f0f27dfa 100644 --- a/packages/ui-toolkit/src/boxes/index.js +++ b/packages/ui-toolkit/src/boxes/index.js @@ -11,9 +11,9 @@ export const tooltipShadow = `0 ${remcalc(2)} ${remcalc(6)} ${remcalc( export const modalShadow = `0 0 ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)`; export const border = { - checked: css`${remcalc(1)} solid ${props => props.theme.primary}`, - unchecked: css`${remcalc(1)} solid ${props => props.theme.grey}`, - confirmed: css`${remcalc(1)} solid ${props => props.theme.grey}`, - error: css`${remcalc(1)} solid ${props => props.theme.red}`, - secondary: css`${remcalc(1)} solid ${props => props.theme.secondaryActive}`, + checked: css`${remcalc(1)} solid ${props => props.theme.primary};`, + unchecked: css`${remcalc(1)} solid ${props => props.theme.grey};`, + confirmed: css`${remcalc(1)} solid ${props => props.theme.grey};`, + error: css`${remcalc(1)} solid ${props => props.theme.red};`, + secondary: css`${remcalc(1)} solid ${props => props.theme.secondaryActive};` }; diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js index 4412acaa..ae4ce6d9 100644 --- a/packages/ui-toolkit/src/breadcrumb/index.js +++ b/packages/ui-toolkit/src/breadcrumb/index.js @@ -4,9 +4,10 @@ import { Row } from 'react-styled-flexboxgrid'; /** * @example ./usage.md */ -export default ({ children, ...rest }) => +export default ({ children, ...rest }) => ( <Row name="breadcrum" {...rest}> {children} - </Row>; + </Row> +); export { default as Item } from './item'; diff --git a/packages/ui-toolkit/src/breadcrumb/item.js b/packages/ui-toolkit/src/breadcrumb/item.js index 4c474d0d..3902fe42 100644 --- a/packages/ui-toolkit/src/breadcrumb/item.js +++ b/packages/ui-toolkit/src/breadcrumb/item.js @@ -21,10 +21,11 @@ const Arrow = styled.div` margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)}; `; -export default ({ children, ...rest }) => +export default ({ children, ...rest }) => ( <div> <Name name="breadcrum-item" {...rest}> {children} </Name> <Arrow /> - </div>; + </div> +); diff --git a/packages/ui-toolkit/src/breakpoints/index.js b/packages/ui-toolkit/src/breakpoints/index.js index b9d4fede..4bedfdda 100644 --- a/packages/ui-toolkit/src/breakpoints/index.js +++ b/packages/ui-toolkit/src/breakpoints/index.js @@ -41,7 +41,7 @@ const screens = { const breakpoint = label => (...args) => css` @media ${screens[label]} { - ${css(...args)} + ${css(...args)}; } `; diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index 1f413794..dc5639dc 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/packages/ui-toolkit/src/button/index.js @@ -180,15 +180,13 @@ const Button = props => { const View = Views.reduce((sel, view) => (sel ? sel : view()), null); - const children = loading - ? <StatusLoader secondary={!secondary} tertiary={tertiary} /> - : props.children; - - return ( - <View {...props}> - {children} - </View> + const children = loading ? ( + <StatusLoader secondary={!secondary} tertiary={tertiary} /> + ) : ( + props.children ); + + return <View {...props}>{children}</View>; }; Button.propTypes = { diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js index a978a501..e731c522 100644 --- a/packages/ui-toolkit/src/card/card.js +++ b/packages/ui-toolkit/src/card/card.js @@ -77,11 +77,7 @@ const Card = ({ ); }; - return ( - <Subscriber channel="card"> - {render} - </Subscriber> - ); + return <Subscriber channel="card">{render}</Subscriber>; }; Card.propTypes = { diff --git a/packages/ui-toolkit/src/card/description.js b/packages/ui-toolkit/src/card/description.js index f8ebd53c..88c9f651 100644 --- a/packages/ui-toolkit/src/card/description.js +++ b/packages/ui-toolkit/src/card/description.js @@ -25,23 +25,18 @@ const InnerDescription = styled.div` `; const Description = ({ children, ...rest }) => { - const render = ({ collapsed = false }) => + const render = ({ collapsed = false }) => ( <StyledTitle collapsed={collapsed} name="card-description" xs={collapsed ? 6 : 12} {...rest} > - <InnerDescription collapsed={collapsed}> - {children} - </InnerDescription> - </StyledTitle>; - - return ( - <Subscriber channel="card"> - {render} - </Subscriber> + <InnerDescription collapsed={collapsed}>{children}</InnerDescription> + </StyledTitle> ); + + return <Subscriber channel="card">{render}</Subscriber>; }; Description.propTypes = { diff --git a/packages/ui-toolkit/src/card/group-view.js b/packages/ui-toolkit/src/card/group-view.js index a7ede584..9f30e71c 100644 --- a/packages/ui-toolkit/src/card/group-view.js +++ b/packages/ui-toolkit/src/card/group-view.js @@ -9,9 +9,8 @@ const StyledView = View.extend` background-color: ${props => props.grey}; `; -const GroupView = ({ children, ...rest }) => - <StyledView {...rest}> - {children} - </StyledView>; +const GroupView = ({ children, ...rest }) => ( + <StyledView {...rest}>{children}</StyledView> +); export default Baseline(GroupView); diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js index 8f2b6e3a..3c8336fe 100644 --- a/packages/ui-toolkit/src/card/header.js +++ b/packages/ui-toolkit/src/card/header.js @@ -47,11 +47,7 @@ const Header = ({ children, ...rest }) => { ); }; - return ( - <Subscriber channel="card"> - {render} - </Subscriber> - ); + return <Subscriber channel="card">{render}</Subscriber>; }; Header.propTypes = { diff --git a/packages/ui-toolkit/src/card/meta.js b/packages/ui-toolkit/src/card/meta.js index 6bb66c21..633e3049 100644 --- a/packages/ui-toolkit/src/card/meta.js +++ b/packages/ui-toolkit/src/card/meta.js @@ -35,24 +35,20 @@ const Meta = ({ children, ...rest }) => { headed={headed} {...rest} > - <InnerRow collapsed={collapsed}> - {children} - </InnerRow> + <InnerRow collapsed={collapsed}>{children}</InnerRow> </Col> ); - return fromHeader - ? <View collapsed fromHeader> - {meta} - </View> - : meta; + return fromHeader ? ( + <View collapsed fromHeader> + {meta} + </View> + ) : ( + meta + ); }; - return ( - <Subscriber channel="card"> - {render} - </Subscriber> - ); + return <Subscriber channel="card">{render}</Subscriber>; }; Meta.propTypes = { diff --git a/packages/ui-toolkit/src/card/options.js b/packages/ui-toolkit/src/card/options.js index 86a9863f..10be1134 100644 --- a/packages/ui-toolkit/src/card/options.js +++ b/packages/ui-toolkit/src/card/options.js @@ -66,7 +66,7 @@ const StyledButton = Button.extend` &:active:focus { background-color: ${props => props.theme.grey}; } - `} + `}; `; const StyledContainer = styled.div` @@ -92,11 +92,7 @@ const StyledCircle = styled.div` `; const Options = ({ children, ...rest }) => { - const render = ({ - fromHeader = false, - collapsed = false, - active = true - }) => + const render = ({ fromHeader = false, collapsed = false, active = true }) => ( <StyledNav active={active} fromHeader={fromHeader} name="card-options"> <StyledButton secondary={!fromHeader} @@ -111,13 +107,10 @@ const Options = ({ children, ...rest }) => { <StyledCircle active={active} secondary={!fromHeader} /> </StyledContainer> </StyledButton> - </StyledNav>; - - return ( - <Subscriber channel="card"> - {render} - </Subscriber> + </StyledNav> ); + + return <Subscriber channel="card">{render}</Subscriber>; }; Options.propTypes = { diff --git a/packages/ui-toolkit/src/card/outlet.js b/packages/ui-toolkit/src/card/outlet.js index 26af3bcc..79fec22a 100644 --- a/packages/ui-toolkit/src/card/outlet.js +++ b/packages/ui-toolkit/src/card/outlet.js @@ -26,7 +26,7 @@ const StyledCol = Col.extend` `; const Outlet = ({ children, ...rest }) => { - const render = ({ active = true, collapsed = false }) => + const render = ({ active = true, collapsed = false }) => ( <StyledCol name="card-outlet" active={active} @@ -35,13 +35,10 @@ const Outlet = ({ children, ...rest }) => { {...rest} > {children} - </StyledCol>; - - return ( - <Subscriber channel="card"> - {render} - </Subscriber> + </StyledCol> ); + + return <Subscriber channel="card">{render}</Subscriber>; }; Outlet.propTypes = { diff --git a/packages/ui-toolkit/src/card/subtitle.js b/packages/ui-toolkit/src/card/subtitle.js index 963db1a1..f4457555 100644 --- a/packages/ui-toolkit/src/card/subtitle.js +++ b/packages/ui-toolkit/src/card/subtitle.js @@ -43,11 +43,7 @@ const StyledTitle = Title.extend` `; const Subtitle = ({ children, ...props }) => { - const render = ({ - active = true, - fromHeader = false, - collapsed = false - }) => + const render = ({ active = true, fromHeader = false, collapsed = false }) => ( <StyledTitle name="card-subtitle" fromHeader={fromHeader} @@ -58,13 +54,10 @@ const Subtitle = ({ children, ...props }) => { <Span fromHeader={fromHeader} collapsed={collapsed}> {children} </Span> - </StyledTitle>; - - return ( - <Subscriber channel="card"> - {render} - </Subscriber> + </StyledTitle> ); + + return <Subscriber channel="card">{render}</Subscriber>; }; Subtitle.propTypes = { diff --git a/packages/ui-toolkit/src/card/title.js b/packages/ui-toolkit/src/card/title.js index 49e35a37..7dec5a1f 100644 --- a/packages/ui-toolkit/src/card/title.js +++ b/packages/ui-toolkit/src/card/title.js @@ -50,17 +50,9 @@ const Span = styled.span` `; const Title = ({ children, ...rest }) => { - const _children = isString(children) - ? <Span> - {children} - </Span> - : children; + const _children = isString(children) ? <Span>{children}</Span> : children; - const render = ({ - collapsed = false, - active = true, - fromHeader = false - }) => + const render = ({ collapsed = false, active = true, fromHeader = false }) => ( <Container collapsed={collapsed} fromHeader={fromHeader} @@ -68,16 +60,13 @@ const Title = ({ children, ...rest }) => { name="card-title" xs={collapsed ? 6 : 12} {...rest} - name='container' + name="container" > {_children} - </Container>; - - return ( - <Subscriber channel="card"> - {render} - </Subscriber> + </Container> ); + + return <Subscriber channel="card">{render}</Subscriber>; }; Title.propTypes = { diff --git a/packages/ui-toolkit/src/card/view.js b/packages/ui-toolkit/src/card/view.js index 566dc247..4838ce1f 100644 --- a/packages/ui-toolkit/src/card/view.js +++ b/packages/ui-toolkit/src/card/view.js @@ -36,18 +36,14 @@ const View = ({ children, ...rest }) => { const hide = newValue.headed && !newValue.fromHeader && newValue.collapsed; - return hide - ? null - : <StyledView name="card-view" {...newValue}> - {children} - </StyledView>; + return hide ? null : ( + <StyledView name="card-view" {...newValue}> + {children} + </StyledView> + ); }; - return ( - <Subscriber channel="card"> - {render} - </Subscriber> - ); + return <Subscriber channel="card">{render}</Subscriber>; }; View.propTypes = { diff --git a/packages/ui-toolkit/src/chevron/index.js b/packages/ui-toolkit/src/chevron/index.js index fc82ef75..5b1a20e4 100644 --- a/packages/ui-toolkit/src/chevron/index.js +++ b/packages/ui-toolkit/src/chevron/index.js @@ -20,8 +20,7 @@ export default P.extend` transform: rotate(180deg); `}; - &:before { - content: "\\003e"; + content: '\\003e'; } `; diff --git a/packages/ui-toolkit/src/close-button/index.js b/packages/ui-toolkit/src/close-button/index.js index 22321fae..63d3b561 100644 --- a/packages/ui-toolkit/src/close-button/index.js +++ b/packages/ui-toolkit/src/close-button/index.js @@ -25,9 +25,10 @@ const StyledCloseButton = Button.extend` /** * @example ./usage.md */ -const CloseButton = props => +const CloseButton = props => ( <StyledCloseButton {...props}> <CloseIcon /> - </StyledCloseButton>; + </StyledCloseButton> +); export default CloseButton; diff --git a/packages/ui-toolkit/src/dropdown/index.js b/packages/ui-toolkit/src/dropdown/index.js index dcbddbf0..b8822782 100644 --- a/packages/ui-toolkit/src/dropdown/index.js +++ b/packages/ui-toolkit/src/dropdown/index.js @@ -22,7 +22,8 @@ const StyledSelectList = styled(Tooltip)` padding: 0; list-style-type: none; } - ul:after, ul:before { + ul:after, + ul:before { left: 97%; } `; @@ -32,7 +33,7 @@ const StyledSelect = styled(Select)` option { display: none; } - `} + `}; `; const StyledArrowIcon = styled(ArrowIcon)` @@ -101,17 +102,17 @@ class Dropdown extends Component { <option disabled value={placeholder}> {placeholder} </option> - {data.map((val, index) => + {data.map((val, index) => ( <option value={val} key={index}> {val} </option> - )} + ))} </StyledSelect> <StyledArrowIcon onClick={this.toggleDropdown} /> - {this.state.isDroppedDown && + {this.state.isDroppedDown && ( <StyledSelectList> <ul> - {data.map((val, index) => + {data.map((val, index) => ( <li> <DropdownItem key={index} @@ -121,9 +122,10 @@ class Dropdown extends Component { {val} </DropdownItem> </li> - )} + ))} </ul> - </StyledSelectList>} + </StyledSelectList> + )} </Container> ); } diff --git a/packages/ui-toolkit/src/form/base/input.js b/packages/ui-toolkit/src/form/base/input.js index 330e53aa..0e502b15 100644 --- a/packages/ui-toolkit/src/form/base/input.js +++ b/packages/ui-toolkit/src/form/base/input.js @@ -86,11 +86,7 @@ const BaseInput = Component => props => { ); }; - return ( - <Subscriber channel="input-group"> - {render} - </Subscriber> - ); + return <Subscriber channel="input-group">{render}</Subscriber>; }; BaseInput.propTypes = { diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js index 170288fe..cde28564 100644 --- a/packages/ui-toolkit/src/form/base/toggle.js +++ b/packages/ui-toolkit/src/form/base/toggle.js @@ -137,12 +137,14 @@ const ToggleBase = ({ container = null, type = 'radio' }) => </InnerContainer> ); - const el = OuterContainer - ? <OuterContainer> - {toggle} - {children} - </OuterContainer> - : toggle; + const el = OuterContainer ? ( + <OuterContainer> + {toggle} + {children} + </OuterContainer> + ) : ( + toggle + ); return ( <Broadcast channel="input-group" value={newValue}> @@ -151,11 +153,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) => ); }; - return ( - <Subscriber channel="input-group"> - {render} - </Subscriber> - ); + return <Subscriber channel="input-group">{render}</Subscriber>; }); export default ToggleBase; diff --git a/packages/ui-toolkit/src/form/checkbox.js b/packages/ui-toolkit/src/form/checkbox.js index 7d247ac7..93417f87 100644 --- a/packages/ui-toolkit/src/form/checkbox.js +++ b/packages/ui-toolkit/src/form/checkbox.js @@ -14,7 +14,6 @@ const Checkbox = Baseline( /** * @example ./usage-checkbox.md */ -export default ({ children, ...rest }) => - <Checkbox {...rest}> - {children} - </Checkbox>; +export default ({ children, ...rest }) => ( + <Checkbox {...rest}>{children}</Checkbox> +); diff --git a/packages/ui-toolkit/src/form/group.js b/packages/ui-toolkit/src/form/group.js index 46c16416..dd1fb197 100644 --- a/packages/ui-toolkit/src/form/group.js +++ b/packages/ui-toolkit/src/form/group.js @@ -25,9 +25,7 @@ class FormGroup extends Component { return ( <Fieldset className={className} style={style}> <Broadcast channel="input-group" value={value}> - <div> - {children} - </div> + <div>{children}</div> </Broadcast> </Fieldset> ); diff --git a/packages/ui-toolkit/src/form/input.js b/packages/ui-toolkit/src/form/input.js index 77de64f7..2a872aa4 100644 --- a/packages/ui-toolkit/src/form/input.js +++ b/packages/ui-toolkit/src/form/input.js @@ -7,7 +7,4 @@ const Input = Baseline(BaseInput(Stylable('input'))); /** * @example ./usage-input.md */ -export default ({ children, ...rest }) => - <Input {...rest}> - {children} - </Input>; +export default ({ children, ...rest }) => <Input {...rest}>{children}</Input>; diff --git a/packages/ui-toolkit/src/form/meta.js b/packages/ui-toolkit/src/form/meta.js index 7e4fbbb9..563c8adc 100644 --- a/packages/ui-toolkit/src/form/meta.js +++ b/packages/ui-toolkit/src/form/meta.js @@ -63,11 +63,7 @@ const Meta = props => { ); }; - return ( - <Subscriber channel="input-group"> - {render} - </Subscriber> - ); + return <Subscriber channel="input-group">{render}</Subscriber>; }; Meta.propTypes = { diff --git a/packages/ui-toolkit/src/form/number-input.js b/packages/ui-toolkit/src/form/number-input.js index 83bf0160..e0cf55a1 100644 --- a/packages/ui-toolkit/src/form/number-input.js +++ b/packages/ui-toolkit/src/form/number-input.js @@ -48,11 +48,7 @@ const NumberInput = BaseInput(props => { ); }; - return ( - <Subscriber channel="input-group"> - {render} - </Subscriber> - ); + return <Subscriber channel="input-group">{render}</Subscriber>; }); NumberInput.propTypes = { diff --git a/packages/ui-toolkit/src/form/radio.js b/packages/ui-toolkit/src/form/radio.js index 6967805e..084c33be 100644 --- a/packages/ui-toolkit/src/form/radio.js +++ b/packages/ui-toolkit/src/form/radio.js @@ -16,11 +16,9 @@ const Ul = styled.ul` padding: 0; `; -const RadioItem = BaseInput(({ children, id, ...rest }) => - <Li {...rest}> - {children} - </Li> -); +const RadioItem = BaseInput(({ children, id, ...rest }) => ( + <Li {...rest}>{children}</Li> +)); const Radio = Baseline( BaseToggle({ @@ -32,9 +30,6 @@ const Radio = Baseline( /** * @example ./usage-radio.md */ -export default ({ children, ...rest }) => - <Radio {...rest}> - {children} - </Radio>; +export default ({ children, ...rest }) => <Radio {...rest}>{children}</Radio>; export const RadioList = Baseline(Ul); diff --git a/packages/ui-toolkit/src/form/select.js b/packages/ui-toolkit/src/form/select.js index 08a197b8..88ecd50a 100644 --- a/packages/ui-toolkit/src/form/select.js +++ b/packages/ui-toolkit/src/form/select.js @@ -7,7 +7,4 @@ const Select = Baseline(BaseInput(Stylable('select'))); /** * @example ./usage-select.md */ -export default ({ children, ...rest }) => - <Select {...rest}> - {children} - </Select>; +export default ({ children, ...rest }) => <Select {...rest}>{children}</Select>; diff --git a/packages/ui-toolkit/src/form/toggle.js b/packages/ui-toolkit/src/form/toggle.js index 832b0327..6977cd5e 100644 --- a/packages/ui-toolkit/src/form/toggle.js +++ b/packages/ui-toolkit/src/form/toggle.js @@ -120,20 +120,15 @@ const BaseToggle = BaseInput(({ children, ...rest }) => { ); }; - return ( - <Subscriber channel="input-group"> - {render} - </Subscriber> - ); + return <Subscriber channel="input-group">{render}</Subscriber>; }); /** * @example ./usage-toggle.md */ -const Toggle = ({ children, ...rest }) => - <BaseToggle {...rest}> - {children} - </BaseToggle>; +const Toggle = ({ children, ...rest }) => ( + <BaseToggle {...rest}>{children}</BaseToggle> +); export default Baseline(Toggle); diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js index 11614c80..ba021f38 100644 --- a/packages/ui-toolkit/src/header/brand.js +++ b/packages/ui-toolkit/src/header/brand.js @@ -19,9 +19,8 @@ const Box = styled.div` padding: ${remcalc(15)} 0; `; -export default ({ children, ...rest }) => +export default ({ children, ...rest }) => ( <Box {...rest}> - <Brand> - {children} - </Brand> - </Box>; + <Brand>{children}</Brand> + </Box> +); diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js index acd58f78..f666c058 100644 --- a/packages/ui-toolkit/src/header/index.js +++ b/packages/ui-toolkit/src/header/index.js @@ -20,10 +20,7 @@ const Header = styled.div` /** * @example ./usage.md */ -export default ({ children, ...rest }) => - <Header {...rest}> - {children} - </Header>; +export default ({ children, ...rest }) => <Header {...rest}>{children}</Header>; export { default as Brand } from './brand'; export { default as Item } from './item'; diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js index 97709f65..5c25c2b9 100644 --- a/packages/ui-toolkit/src/header/item.js +++ b/packages/ui-toolkit/src/header/item.js @@ -23,9 +23,8 @@ const Box = styled.div` max-width: ${remcalc(100)}; `; -export default ({ children, ...rest }) => +export default ({ children, ...rest }) => ( <Box {...rest}> - <Text> - {children} - </Text> - </Box>; + <Text>{children}</Text> + </Box> +); diff --git a/packages/ui-toolkit/src/icon-button/index.js b/packages/ui-toolkit/src/icon-button/index.js index 620668ca..b07a0e37 100644 --- a/packages/ui-toolkit/src/icon-button/index.js +++ b/packages/ui-toolkit/src/icon-button/index.js @@ -99,7 +99,7 @@ const StyledAnchor = A.extend` const StyledLink = styled(Link)` display: inline-block; - ${style} + ${style}; `; /** @@ -116,11 +116,7 @@ const IconButton = props => { const View = Views.reduce((sel, view) => (sel ? sel : view()), null); - return ( - <View {...props}> - {children} - </View> - ); + return <View {...props}>{children}</View>; }; IconButton.propTypes = { diff --git a/packages/ui-toolkit/src/icons/healthy.js b/packages/ui-toolkit/src/icons/healthy.js index 4ba6a62a..4ba2709b 100644 --- a/packages/ui-toolkit/src/icons/healthy.js +++ b/packages/ui-toolkit/src/icons/healthy.js @@ -6,8 +6,10 @@ import styled from 'styled-components'; import HealthyIcon from './svg/icon_healthy.svg'; const StyledHealthyIcon = styled(HealthyIcon)` - fill: ${props => !props.healthy || props.healthy === 'HEALTHY' - ? props.theme.green : props.theme.orange}; + fill: ${props => + !props.healthy || props.healthy === 'HEALTHY' + ? props.theme.green + : props.theme.orange}; `; export default Baseline(StyledHealthyIcon); diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js index 6ee24ad8..e5473179 100644 --- a/packages/ui-toolkit/src/index.js +++ b/packages/ui-toolkit/src/index.js @@ -17,7 +17,13 @@ export { default as Chevron } from './chevron'; export { default as CloseButton } from './close-button'; export { default as Divider } from './divider'; export { default as IconButton } from './icon-button'; -export { Tooltip, TooltipButton, TooltipDivider, TooltipList, TooltipLabel } from './tooltip'; +export { + Tooltip, + TooltipButton, + TooltipDivider, + TooltipList, + TooltipLabel +} from './tooltip'; export { Dropdown } from './dropdown'; export { default as StatusLoader } from './status-loader'; export { default as Message } from './message'; @@ -108,6 +114,4 @@ export { BinIcon } from './icons'; -export { - MetricGraph -} from './metrics'; +export { MetricGraph } from './metrics'; diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js index 38380cf5..3d5bc23f 100644 --- a/packages/ui-toolkit/src/message/index.js +++ b/packages/ui-toolkit/src/message/index.js @@ -50,24 +50,18 @@ const StyledClose = styled(CloseButton)` `; const Message = ({ title, message, onCloseClick, type = 'MESSAGE' }) => { - const renderTitle = title - ? <StyledTitle> - {title} - </StyledTitle> - : null; + const renderTitle = title ? <StyledTitle>{title}</StyledTitle> : null; - const renderClose = onCloseClick - ? <StyledClose onClick={onCloseClick} /> - : null; + const renderClose = onCloseClick ? ( + <StyledClose onClick={onCloseClick} /> + ) : null; return ( <StyledContainer> <StyledColor type={type} /> <StyledMessageContainer> {renderTitle} - <StyledMessage> - {message} - </StyledMessage> + <StyledMessage>{message}</StyledMessage> </StyledMessageContainer> {renderClose} </StyledContainer> diff --git a/packages/ui-toolkit/src/metrics/graph.js b/packages/ui-toolkit/src/metrics/graph.js index c53839c8..3518f8c3 100644 --- a/packages/ui-toolkit/src/metrics/graph.js +++ b/packages/ui-toolkit/src/metrics/graph.js @@ -17,62 +17,60 @@ const chartColors = [ // TODO DISPLAY TIMES SHOULD NOT BE UTC class MetricGraph extends Component { - componentDidMount() { - - const { - xMin, - xMax, - datasets - } = this.processProps(this.props); + const { xMin, xMax, datasets } = this.processProps(this.props); const config = { - type: 'line', - data: { datasets }, - options: { - responsive: false, // this needs to be played with - legend: { - display: false - }, - tooltip: { - display: false // this config doesn't seem to work??? - }, - scales: { - xAxes: [{ - display: true, // config for mini should be false - type: 'time', - distribution: 'linear', - time: { - unit: 'minute', // this also needs to be played with - min: xMin, - max: xMax - } - }], - yAxes: [{ - display: true // needs min / max and measurement - }] + type: 'line', + data: { datasets }, + options: { + responsive: false, // this needs to be played with + legend: { + display: false + }, + tooltip: { + display: false // this config doesn't seem to work??? + }, + scales: { + xAxes: [ + { + display: true, // config for mini should be false + type: 'time', + distribution: 'linear', + time: { + unit: 'minute', // this also needs to be played with + min: xMin, + max: xMax + } } + ], + yAxes: [ + { + display: true // needs min / max and measurement + } + ] } + } }; const ctx = this._refs.chart.getContext('2d'); - this._chart = new Chart(ctx, config); + this._chart = new Chart(ctx, config); } processProps(props) { - - const { - metricsData, - graphDurationSeconds - } = props; + const { metricsData, graphDurationSeconds } = props; const xMax = metricsData[0].end; - const xMin = moment.utc(xMax).subtract(graphDurationSeconds, 'seconds').utc().format(); + const xMin = moment + .utc(xMax) + .subtract(graphDurationSeconds, 'seconds') + .utc() + .format(); const datasets = metricsData.map((data, i) => ({ - fill: false, - borderColor: chartColors[i], - data: this.truncateAndConvertMetrics(data.metrics, xMin, xMax) + fill: false, + borderColor: chartColors[i], + data: this.truncateAndConvertMetrics(data.metrics, xMin, xMax) })); return { @@ -83,34 +81,29 @@ class MetricGraph extends Component { } truncateAndConvertMetrics(metrics, xMin, xMax) { - const xMinMoment = moment.utc(xMin); return metrics.reduce((metrics, metric) => { const diff = moment.utc(metric.time).diff(xMinMoment); - if(diff > -10000) { // diff comparison is less than zero - otherwise no data for beginning of chart - bug or charjs weirdness? + if (diff > -10000) { + // diff comparison is less than zero - otherwise no data for beginning of chart - bug or charjs weirdness? metrics.push({ x: metric.time, y: metric.value // value should be converted here to a readable format - }) + }); } return metrics; }, []); } componentWillReceiveProps(nextProps) { + const { xMin, xMax, datasets } = this.processProps(nextProps); - const { - xMin, - xMax, - datasets - } = this.processProps(nextProps); - - this._chart.data.datasets = datasets; - // these need to be set, but don't seem to truncate the data that's displayed - this._chart.options.scales.xAxes[0].time.max = xMax; - this._chart.options.scales.xAxes[0].time.min = xMin; - this._chart.update(0); + this._chart.data.datasets = datasets; + // these need to be set, but don't seem to truncate the data that's displayed + this._chart.options.scales.xAxes[0].time.max = xMax; + this._chart.options.scales.xAxes[0].time.min = xMin; + this._chart.update(0); } // should not rerender ever, we update only the canvas via chartjs @@ -127,19 +120,9 @@ class MetricGraph extends Component { } render() { + const { width, height } = this.props; - const { - width, - height - } = this.props; - - return ( - <canvas - ref={this.ref('chart')} - width={width} - height={height} - /> - ); + return <canvas ref={this.ref('chart')} width={width} height={height} />; } } diff --git a/packages/ui-toolkit/src/metrics/index.js b/packages/ui-toolkit/src/metrics/index.js index e5d40d1d..8f9c2e7a 100644 --- a/packages/ui-toolkit/src/metrics/index.js +++ b/packages/ui-toolkit/src/metrics/index.js @@ -1 +1 @@ -export { default as MetricGraph } from './graph'; +export { default as MetricGraph } from './graph'; diff --git a/packages/ui-toolkit/src/modal/index.js b/packages/ui-toolkit/src/modal/index.js index 891db4b3..1a5074ee 100644 --- a/packages/ui-toolkit/src/modal/index.js +++ b/packages/ui-toolkit/src/modal/index.js @@ -71,7 +71,7 @@ export default Modal; export const ModalHeading = styled(H2)` line-height: 1.25; - color: ${props => props.theme.secondary}; + color: ${props => props.theme.secondary}; margin: 0 0 ${remcalc(12)} 0; `; diff --git a/packages/ui-toolkit/src/paper-effect/index.js b/packages/ui-toolkit/src/paper-effect/index.js index 83fffdc1..2d19305f 100644 --- a/packages/ui-toolkit/src/paper-effect/index.js +++ b/packages/ui-toolkit/src/paper-effect/index.js @@ -3,8 +3,8 @@ import remcalc from 'remcalc'; export default css` margin-bottom: ${remcalc(16)}; - box-shadow: - 0 ${remcalc(8)} 0 ${remcalc(-5)} ${props => props.theme.background}, + box-shadow: 0 ${remcalc(8)} 0 ${remcalc(-5)} + ${props => props.theme.background}, 0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${props => props.theme.grey}, 0 ${remcalc(16)} 0 ${remcalc(-10)} ${props => props.theme.background}, 0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${props => props.theme.grey}; diff --git a/packages/ui-toolkit/src/progress-bar/button.js b/packages/ui-toolkit/src/progress-bar/button.js index c3de3ec2..7defbc58 100644 --- a/packages/ui-toolkit/src/progress-bar/button.js +++ b/packages/ui-toolkit/src/progress-bar/button.js @@ -111,9 +111,7 @@ const ProgressbarButton = ({ return ( <StyledContainer {...state} {...rest}> <Indicator {...state} /> - <StyledButton {...state}> - {children} - </StyledButton> + <StyledButton {...state}>{children}</StyledButton> <StyledArrow {...state} /> </StyledContainer> ); diff --git a/packages/ui-toolkit/src/progress-bar/index.js b/packages/ui-toolkit/src/progress-bar/index.js index a854bd8e..66bd38ff 100644 --- a/packages/ui-toolkit/src/progress-bar/index.js +++ b/packages/ui-toolkit/src/progress-bar/index.js @@ -10,10 +10,9 @@ const StyledList = styled.ul` /** * @example ./usage.md */ -export default ({ children, ...rest }) => - <StyledList {...rest}> - {children} - </StyledList>; +export default ({ children, ...rest }) => ( + <StyledList {...rest}>{children}</StyledList> +); export { default as ProgressbarItem } from './item'; export { default as ProgressbarButton } from './button'; diff --git a/packages/ui-toolkit/src/progress-bar/item.js b/packages/ui-toolkit/src/progress-bar/item.js index 03e8fd11..8530794c 100644 --- a/packages/ui-toolkit/src/progress-bar/item.js +++ b/packages/ui-toolkit/src/progress-bar/item.js @@ -7,9 +7,8 @@ const StyledItem = styled.li` background-color: ${props => props.theme.white}; `; -const ProgressbarItem = ({ children, ...props }) => - <StyledItem {...props}> - {children} - </StyledItem>; +const ProgressbarItem = ({ children, ...props }) => ( + <StyledItem {...props}>{children}</StyledItem> +); export default Baseline(ProgressbarItem); diff --git a/packages/ui-toolkit/src/section-list/index.js b/packages/ui-toolkit/src/section-list/index.js index 2a3227e8..eb052d39 100644 --- a/packages/ui-toolkit/src/section-list/index.js +++ b/packages/ui-toolkit/src/section-list/index.js @@ -12,10 +12,9 @@ const UnorderedList = styled.ul` /** * @example ./usage.md */ -const SectionList = ({ children, ...rest }) => - <UnorderedList {...rest}> - {children} - </UnorderedList>; +const SectionList = ({ children, ...rest }) => ( + <UnorderedList {...rest}>{children}</UnorderedList> +); export default Baseline(SectionList); diff --git a/packages/ui-toolkit/src/section-list/item.js b/packages/ui-toolkit/src/section-list/item.js index de41fdb6..df6ce181 100644 --- a/packages/ui-toolkit/src/section-list/item.js +++ b/packages/ui-toolkit/src/section-list/item.js @@ -17,10 +17,7 @@ const Li = styled.li` margin-right: ${remcalc(23)}; `; -const Item = ({ children, ...rest }) => - <Li {...rest}> - {children} - </Li>; +const Item = ({ children, ...rest }) => <Li {...rest}>{children}</Li>; export default Baseline(Item); diff --git a/packages/ui-toolkit/src/status-loader/index.js b/packages/ui-toolkit/src/status-loader/index.js index c736a640..fe97920e 100644 --- a/packages/ui-toolkit/src/status-loader/index.js +++ b/packages/ui-toolkit/src/status-loader/index.js @@ -39,7 +39,7 @@ const StyledThirdRect = StyledFirstRect.extend` animation-delay: 1s; `; -export default ({ secondary, tertiary }) => +export default ({ secondary, tertiary }) => ( <svg width="28" height="10"> <StyledFirstRect tertiary={tertiary} @@ -65,4 +65,5 @@ export default ({ secondary, tertiary }) => width="6" height="6" /> - </svg>; + </svg> +); diff --git a/packages/ui-toolkit/src/styleguide/wrapper.js b/packages/ui-toolkit/src/styleguide/wrapper.js index bec3a7bb..2d20c917 100644 --- a/packages/ui-toolkit/src/styleguide/wrapper.js +++ b/packages/ui-toolkit/src/styleguide/wrapper.js @@ -18,9 +18,7 @@ export default class Wrapper extends Component { render() { return ( <ThemeProvider theme={theme}> - <StyledBase> - {this.props.children} - </StyledBase> + <StyledBase>{this.props.children}</StyledBase> </ThemeProvider> ); } diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js index 3182deef..ed6b64d8 100644 --- a/packages/ui-toolkit/src/theme/colors.js +++ b/packages/ui-toolkit/src/theme/colors.js @@ -55,7 +55,7 @@ const borderColor = hex => ]) .toHexString(); -const Color = ({ name, hex }) => +const Color = ({ name, hex }) => ( <Box border={borderColor(hex)}> <Preview hex={hex} /> <InnerBox background={hex} text={mostReadable(hex)}> @@ -74,7 +74,8 @@ const Color = ({ name, hex }) => <code>{hex.toUpperCase()}</code> </Paragraph> </InnerBox> - </Box>; + </Box> +); export default () => { const colors = Object.keys(theme) @@ -85,15 +86,11 @@ export default () => { return _a >= _b ? -1 : 1; }) - .map(name => + .map(name => ( <Col key={name} xs={4}> <Color name={name} hex={theme[name]} /> </Col> - ); + )); - return ( - <Row> - {colors} - </Row> - ); + return <Row>{colors}</Row>; }; diff --git a/packages/ui-toolkit/src/tooltip/button.js b/packages/ui-toolkit/src/tooltip/button.js index 881d787d..a7940c2e 100644 --- a/packages/ui-toolkit/src/tooltip/button.js +++ b/packages/ui-toolkit/src/tooltip/button.js @@ -41,10 +41,9 @@ const StyledButton = styled(Button)` ${is('disabled')` color: ${props => props.theme.grey}; - `} + `}; `; -const TooltipButton = props => - <StyledButton {...props} />; +const TooltipButton = props => <StyledButton {...props} />; export default TooltipButton; diff --git a/packages/ui-toolkit/src/tooltip/tooltip.js b/packages/ui-toolkit/src/tooltip/tooltip.js index 79b75f8c..fd3231cd 100644 --- a/packages/ui-toolkit/src/tooltip/tooltip.js +++ b/packages/ui-toolkit/src/tooltip/tooltip.js @@ -93,26 +93,21 @@ class Tooltip extends Component { ...rest } = this.props; - if(typeof top === 'number') { - top = `${top}px` + if (typeof top === 'number') { + top = `${top}px`; } - if(typeof left === 'number') { - left = `${left}px` + if (typeof left === 'number') { + left = `${left}px`; } - if(typeof bottom === 'number') { - bottom = `${bottom}px` + if (typeof bottom === 'number') { + bottom = `${bottom}px`; } - if(typeof right === 'number') { - right = `${right}px` + if (typeof right === 'number') { + right = `${right}px`; } return ( - <StyledContainer - top={top} - left={left} - bottom={bottom} - right={right} - > + <StyledContainer top={top} left={left} bottom={bottom} right={right}> <StyledInnerContainer secondary={secondary}> {children} </StyledInnerContainer> diff --git a/packages/ui-toolkit/src/topology/index.js b/packages/ui-toolkit/src/topology/index.js index 8faea772..acd69e75 100644 --- a/packages/ui-toolkit/src/topology/index.js +++ b/packages/ui-toolkit/src/topology/index.js @@ -370,7 +370,7 @@ class Topology extends React.Component { this.setDragInfo(false); }; - const renderedNode = (n, index) => + const renderedNode = (n, index) => ( <TopologyNode key={index} data={n} @@ -378,13 +378,16 @@ class Topology extends React.Component { onDragStart={onDragStart} onNodeTitleClick={onNodeTitleClick} onQuickActions={onQuickActionsClick} - />; + /> + ); - const renderedLink = (l, index) => - <TopologyLink key={index} data={l} index={index} />; + const renderedLink = (l, index) => ( + <TopologyLink key={index} data={l} index={index} /> + ); - const renderedLinkArrow = (l, index) => - <TopologyLinkArrow key={index} data={l} index={index} />; + const renderedLinkArrow = (l, index) => ( + <TopologyLinkArrow key={index} data={l} index={index} /> + ); const renderedNodes = this.dragInfo && this.dragInfo.dragging @@ -437,21 +440,11 @@ class Topology extends React.Component { onTouchCancel={onDragEnd} id="topology-svg" > - <g> - {renderedNodes} - </g> - <g> - {renderedLinks} - </g> - <g> - {renderedLinkArrows} - </g> - <g> - {dragNode} - </g> - <g> - {dragLinkArrow} - </g> + <g>{renderedNodes}</g> + <g>{renderedLinks}</g> + <g>{renderedLinkArrows}</g> + <g>{dragNode}</g> + <g>{dragLinkArrow}</g> </StyledSvg> ); } diff --git a/packages/ui-toolkit/src/topology/node/button.js b/packages/ui-toolkit/src/topology/node/button.js index bf5b91cc..ff73356c 100644 --- a/packages/ui-toolkit/src/topology/node/button.js +++ b/packages/ui-toolkit/src/topology/node/button.js @@ -12,7 +12,7 @@ const NodeButton = ({ onButtonClick, index, isConsul, instancesActive }) => { const buttonCircleY = (height - buttonCircleRadius * 4 - buttonCircleSpacing * 2) / 2; - const buttonCircles = [1, 2, 3].map((item, index) => + const buttonCircles = [1, 2, 3].map((item, index) => ( <GraphButtonCircle cx={width / 2} cy={ @@ -23,7 +23,7 @@ const NodeButton = ({ onButtonClick, index, isConsul, instancesActive }) => { consul={isConsul} active={instancesActive} /> - ); + )); return ( <g transform={`translate(${x}, ${y})`}> diff --git a/packages/ui-toolkit/src/topology/node/content.js b/packages/ui-toolkit/src/topology/node/content.js index edad6f62..9d444792 100644 --- a/packages/ui-toolkit/src/topology/node/content.js +++ b/packages/ui-toolkit/src/topology/node/content.js @@ -20,15 +20,15 @@ const GraphNodeContent = ({ } : Constants.infoPosition; - const nodeSubtitle = child - ? <GraphSubtitle - {...Constants.subtitlePosition} - consul={data.isConsul} - active={data.instancesActive} - > - {data.name} - </GraphSubtitle> - : null; + const nodeSubtitle = child ? ( + <GraphSubtitle + {...Constants.subtitlePosition} + consul={data.isConsul} + active={data.instancesActive} + > + {data.name} + </GraphSubtitle> + ) : null; const nodeInfo = <GraphNodeInfo data={data} pos={nodeInfoPos} />; diff --git a/packages/ui-toolkit/src/topology/node/index.js b/packages/ui-toolkit/src/topology/node/index.js index 6483bfb9..449d495f 100644 --- a/packages/ui-toolkit/src/topology/node/index.js +++ b/packages/ui-toolkit/src/topology/node/index.js @@ -62,29 +62,31 @@ const GraphNode = ({ } : {}; - const nodeContent = children - ? children.reduce( - (acc, d, i) => { - acc.children.push( - <GraphNodeContent key={i} child data={d} index={i} y={acc.y} /> - ); - acc.y += getContentRect(d, true).height; - return acc; - }, - { y: Constants.contentRect.y, children: [] } - ).children - : <GraphNodeContent data={data} />; + const nodeContent = children ? ( + children.reduce( + (acc, d, i) => { + acc.children.push( + <GraphNodeContent key={i} child data={d} index={i} y={acc.y} /> + ); + acc.y += getContentRect(d, true).height; + return acc; + }, + { y: Constants.contentRect.y, children: [] } + ).children + ) : ( + <GraphNodeContent data={data} /> + ); - const nodeShadow = instancesActive - ? <GraphShadowRect - x={0} - y={3} - width={width} - height={height} - consul={isConsul} - active={instancesActive} - /> - : null; + const nodeShadow = instancesActive ? ( + <GraphShadowRect + x={0} + y={3} + width={width} + height={height} + consul={isConsul} + active={instancesActive} + /> + ) : null; return ( <g transform={`translate(${x}, ${y})`}> diff --git a/packages/ui-toolkit/src/topology/node/info.js b/packages/ui-toolkit/src/topology/node/info.js index e2bba284..795c3b61 100644 --- a/packages/ui-toolkit/src/topology/node/info.js +++ b/packages/ui-toolkit/src/topology/node/info.js @@ -45,33 +45,31 @@ const GraphNodeInfo = ({ data, pos }) => { const { x, y } = pos; - const statuses = transitionalStatus - ? <GraphText consul={isConsul} active={instancesActive}> - {status.toLowerCase()} - </GraphText> - : instanceStatuses.map((instanceStatus, index) => - <GraphText key={index} consul={isConsul} active={instancesActive}> - {`${instanceStatus.count} + const statuses = transitionalStatus ? ( + <GraphText consul={isConsul} active={instancesActive}> + {status.toLowerCase()} + </GraphText> + ) : ( + instanceStatuses.map((instanceStatus, index) => ( + <GraphText key={index} consul={isConsul} active={instancesActive}> + {`${instanceStatus.count} ${instanceStatus.status.toLowerCase()}`} - </GraphText> - ); + </GraphText> + )) + ); const healthy = instancesHealthy ? <HealthyIcon /> : <UnhealthyIcon />; return ( <g transform={`translate(${x}, ${y})`}> - <g transform={`translate(0, 0)`}> - {healthy} - </g> + <g transform={`translate(0, 0)`}>{healthy}</g> <g transform={'translate(30, 4.5)'}> <StyledInstancesIcon consul={isConsul} active={instancesActive} /> </g> <GraphText x={54} y={14} consul={isConsul} active={instancesActive}> {`${instances.length} inst.`} </GraphText> - <g transform={'translate(54, 36)'}> - {statuses} - </g> + <g transform={'translate(54, 36)'}>{statuses}</g> {/* <g transform={'translate(82, 0)'}> <StyledDataCentresIcon connected={connected} /> </g> diff --git a/packages/ui-toolkit/src/topology/node/metrics.js b/packages/ui-toolkit/src/topology/node/metrics.js index 25f497d9..9ad7bad2 100644 --- a/packages/ui-toolkit/src/topology/node/metrics.js +++ b/packages/ui-toolkit/src/topology/node/metrics.js @@ -8,7 +8,7 @@ const GraphNodeMetrics = ({ connected, metrics, pos }) => { const { x, y } = pos; const metricSpacing = 18; - const metricsText = metrics.map((metric, index) => + const metricsText = metrics.map((metric, index) => ( <GraphText key={index} x={0} @@ -17,13 +17,9 @@ const GraphNodeMetrics = ({ connected, metrics, pos }) => { > {`${metric.name}: ${metric.value}`} </GraphText> - ); + )); - return ( - <g transform={`translate(${x}, ${y})`}> - {metricsText} - </g> - ); + return <g transform={`translate(${x}, ${y})`}>{metricsText}</g>; }; GraphNodeMetrics.propTypes = { diff --git a/packages/ui-toolkit/src/topology/node/title.js b/packages/ui-toolkit/src/topology/node/title.js index c0b6c8fc..25115b93 100644 --- a/packages/ui-toolkit/src/topology/node/title.js +++ b/packages/ui-toolkit/src/topology/node/title.js @@ -4,7 +4,7 @@ import Baseline from '../../baseline'; import Constants from '../constants'; import { GraphTitle } from './shapes'; -const GraphNodeTitle = ({ data, onNodeTitleClick }) => +const GraphNodeTitle = ({ data, onNodeTitleClick }) => ( <g> <GraphTitle x={Constants.paddingLeft} @@ -20,7 +20,8 @@ const GraphNodeTitle = ({ data, onNodeTitleClick }) => <GraphHealthyCircle cx={9} cy={9} r={9} /> <HeartIcon /> </g> */} - </g>; + </g> +); GraphNodeTitle.propTypes = { data: PropTypes.object.isRequired,