list instances

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 = () => (
+  <Row>
+    <Column xs={12}>
+      <p name='empty'>
+        <FormattedMessage id='no-instances' />
+      </p>
+    </Column>
+  </Row>
+);

frontend/src/containers/service/instances.js

@@ -1,5 +1,65 @@
 const React = require('react');
+const ReactRedux = require('react-redux');
 
-module.exports = () => (
-  <p>instances</p>
+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 : (
+    <EmptyInstances />
   );
+
+  const instanceList = instances.map((service) => (
+    <ListItem collapsed key={service.uuid}>
+      <ListItemView>
+        <ListItemMeta>
+          <ListItemTitle>{service.name}</ListItemTitle>
+        </ListItemMeta>
+      </ListItemView>
+      <ListItemOptions>
+        …
+      </ListItemOptions>
+    </ListItem>
+  ));
+
+  return (
+    <div>
+      {empty}
+      {instanceList}
+    </div>
+  );
+};
+
+Instances.propTypes = {
+  instances: React.PropTypes.arrayOf(PropTypes.instance)
+};
+
+const mapStateToProps = (state, {
+  params = {}
+}) => ({
+  instances: instancesByServiceIdSelector(params.serviceId)(state)
+});
+
+module.exports = connect(
+  mapStateToProps
+)(Instances);

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);
 
-      return (
-        <li key={service.id}>
+      const name = childs ? service.name : (
         <Link activeClassName='active' to={to}>
           {service.name}
         </Link>
-          {serviceList(service.services)}
+      );
+
+      return (
+        <li key={service.id}>
+          {name}
+          {childs}
         </li>
       );
     });

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
 };

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'),

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
+}, {});

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
 };