diff --git a/frontend/src/components/empty/instances.js b/frontend/src/components/empty/instances.js new file mode 100644 index 00000000..739406c1 --- /dev/null +++ b/frontend/src/components/empty/instances.js @@ -0,0 +1,19 @@ +const React = require('react'); +const ReactIntl = require('react-intl'); + +const Column = require('@ui/components/column'); +const Row = require('@ui/components/row'); + +const { + FormattedMessage +} = ReactIntl; + +module.exports = () => ( + + +

+ +

+
+
+); diff --git a/frontend/src/containers/service/instances.js b/frontend/src/containers/service/instances.js index 84bda49e..c062a507 100644 --- a/frontend/src/containers/service/instances.js +++ b/frontend/src/containers/service/instances.js @@ -1,5 +1,65 @@ const React = require('react'); +const ReactRedux = require('react-redux'); -module.exports = () => ( -

instances

-); +const EmptyInstances = require('@components/empty/instances'); +const PropTypes = require('@root/prop-types'); +const List = require('@ui/components/list'); +const selectors = require('@state/selectors'); + +const { + connect +} = ReactRedux; + +const { + instancesByServiceIdSelector +} = selectors; + +const { + ListItem, + ListItemView, + ListItemMeta, + ListItemTitle, + ListItemOptions +} = List; + +const Instances = ({ + instances = [] +}) => { + const empty = instances.length ? null : ( + + ); + + const instanceList = instances.map((service) => ( + + + + {service.name} + + + + … + + + )); + + return ( +
+ {empty} + {instanceList} +
+ ); +}; + +Instances.propTypes = { + instances: React.PropTypes.arrayOf(PropTypes.instance) +}; + +const mapStateToProps = (state, { + params = {} +}) => ({ + instances: instancesByServiceIdSelector(params.serviceId)(state) +}); + +module.exports = connect( + mapStateToProps +)(Instances); diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js index 244cae8f..82c3454a 100644 --- a/frontend/src/containers/services/index.js +++ b/frontend/src/containers/services/index.js @@ -37,13 +37,18 @@ const Services = ({ const list = services.map((service) => { const to = `/${org.id}/projects/${project.id}/services/${service.id}`; + const childs = serviceList(service.services); + + const name = childs ? service.name : ( + + {service.name} + + ); return (
  • - - {service.name} - - {serviceList(service.services)} + {name} + {childs}
  • ); }); diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js index 1a5b45ef..0edf6fcb 100644 --- a/frontend/src/prop-types.js +++ b/frontend/src/prop-types.js @@ -28,6 +28,13 @@ const Service = React.PropTypes.shape({ ...BaseObject }); +const Instance = React.PropTypes.shape({ + ...BaseObject, + datacenter: React.PropTypes.string, + service: React.PropTypes.string, + project: React.PropTypes.string +}); + const Sections = React.PropTypes.arrayOf( React.PropTypes.string ); @@ -38,5 +45,6 @@ module.exports = { org: Org, project: Project, sections: Sections, - service: Service + service: Service, + instance: Instance }; diff --git a/frontend/src/state/reducers/index.js b/frontend/src/state/reducers/index.js index 8085e6d8..960e9771 100644 --- a/frontend/src/state/reducers/index.js +++ b/frontend/src/state/reducers/index.js @@ -8,6 +8,7 @@ module.exports = () => { return combineReducers({ account: require('@state/reducers/account'), app: require('@state/reducers/app'), + instances: require('@state/reducers/instances'), intl: require('@state/reducers/intl'), orgs: require('@state/reducers/orgs'), projects: require('@state/reducers/projects'), diff --git a/frontend/src/state/reducers/instances.js b/frontend/src/state/reducers/instances.js new file mode 100644 index 00000000..7fec06fb --- /dev/null +++ b/frontend/src/state/reducers/instances.js @@ -0,0 +1,9 @@ +const ReduxActions = require('redux-actions'); + +const { + handleActions +} = ReduxActions; + +module.exports = handleActions({ + 'x': (state) => state // somehow handleActions needs at least one reducer +}, {}); diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index 2f267da0..be168d92 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []); const orgs = (state) => get(state, 'orgs.data', []); const projects = (state) => get(state, 'projects.data', []); const services = (state) => get(state, 'services.data', []); +const instances = (state) => get(state, 'instances.data', []); const projectById = (projectId) => createSelector( projects, @@ -54,6 +55,12 @@ const servicesByProjectId = (projectId) => createSelector( .filter((s) => !s.parent) ); +const instancesByServiceId = (serviceId) => createSelector( + [instances, serviceById(serviceId)], + (instances, service) => instances.filter((i) => i.service === service.uuid) +); + + module.exports = { accountSelector: account, accountUISelector: accountUi, @@ -66,5 +73,6 @@ module.exports = { serviceSectionsSelector: serviceUiSections, projectsByOrgIdSelector: projectsByOrgId, projectByIdSelector: projectById, - servicesByProjectIdSelector: servicesByProjectId + servicesByProjectIdSelector: servicesByProjectId, + instancesByServiceIdSelector: instancesByServiceId };