project instances

frontend/src/components/instance-item/index.js

@@ -0,0 +1,40 @@
+const React = require('react');
+
+const DatasetsRow = require('@components/metrics-row');
+const PropTypes = require('@root/prop-types');
+const List = require('@ui/components/list');
+
+const {
+  ListItem,
+  ListItemView,
+  ListItemMeta,
+  ListItemTitle,
+  ListItemOptions,
+  ListItemOutlet
+} = List;
+
+const InstanceItem = ({
+  instance = {},
+  toggleCollapsed = () => null
+}) => (
+  <ListItem collapsed={!instance.collapsed} key={instance.uuid} >
+    <ListItemView>
+      <ListItemMeta onClick={toggleCollapsed}>
+        <ListItemTitle>{instance.name}</ListItemTitle>
+      </ListItemMeta>
+      <ListItemOutlet>
+        <DatasetsRow datasets={instance.metrics} />
+      </ListItemOutlet>
+    </ListItemView>
+    <ListItemOptions>
+      …
+    </ListItemOptions>
+  </ListItem>
+);
+
+InstanceItem.propTypes = {
+  instance: PropTypes.instance,
+  toggleCollapsed: React.PropTypes.func
+};
+
+module.exports = InstanceItem;

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

@@ -0,0 +1,32 @@
+const React = require('react');
+
+const InstanceItem = require('@components/instance-item');
+const PropTypes = require('@root/prop-types');
+
+const InstanceList = ({
+  instances = [],
+  toggleCollapsed = () => null
+}) => {
+  const onClick = (uuid) => () => toggleCollapsed(uuid);
+
+  const instanceList = instances.map((instance) => (
+    <InstanceItem
+      instance={instance}
+      key={instance.uuid}
+      toggleCollapsed={onClick(instance.uuid)}
+    />
+  ));
+
+  return (
+    <div>
+      {instanceList}
+    </div>
+  );
+};
+
+InstanceList.propTypes = {
+  instances: React.PropTypes.arrayOf(PropTypes.instance),
+  toggleCollapsed: React.PropTypes.func
+};
+
+module.exports = InstanceList;

frontend/src/components/service-item/index.js

@@ -87,7 +87,7 @@ const ServiceItem = ({
         {description}
       </ListItemMeta>
       <ListItemOutlet>
-        <MetricsRow metrics={service.metrics} />
+        <MetricsRow datasets={service.metrics} />
       </ListItemOutlet>
     </ListItemView>
   );

frontend/src/containers/project/instances.js

@@ -1,9 +1,63 @@
 const React = require('react');
+const ReactRedux = require('react-redux');
 
+const actions = require('@state/actions');
+const EmptyInstances = require('@components/empty/instances');
+const PropTypes = require('@root/prop-types');
 const Section = require('./section');
+const InstanceList = require('@components/instance-list');
+const selectors = require('@state/selectors');
 
-module.exports = (props) => (
+const {
+  toggleInstanceCollapsed
+} = actions;
+
+const {
+  connect
+} = ReactRedux;
+
+const {
+  instancesByProjectIdSelector
+} = selectors;
+
+const Instances = (props) => {
+  const {
+    instances = [],
+    toggleCollapsed = () => null
+  } = props;
+
+  const empty = instances.length ? null : (
+    <EmptyInstances />
+  );
+
+  return (
     <Section {...props}>
-    <p>instances</p>
+      {empty}
+      <InstanceList
+        instances={instances}
+        toggleCollapsed={toggleCollapsed}
+      />
     </Section>
-);
+  );
+};
+
+Instances.propTypes = {
+  instances: React.PropTypes.arrayOf(PropTypes.instance),
+  toggleCollapsed: React.PropTypes.func
+};
+
+const mapStateToProps = (state, {
+  params = {}
+}) => ({
+  instances: instancesByProjectIdSelector(params.projectId)(state)
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
+});
+
+module.exports = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Instances);
+

frontend/src/containers/service/instances.js

@@ -4,8 +4,7 @@ const ReactRedux = require('react-redux');
 const actions = require('@state/actions');
 const EmptyInstances = require('@components/empty/instances');
 const PropTypes = require('@root/prop-types');
-const List = require('@ui/components/list');
-const DatasetsRow = require('@components/metrics-row');
+const InstanceList = require('@components/instance-list');
 const selectors = require('@state/selectors');
 
 const {
@@ -20,45 +19,23 @@ const {
   instancesByServiceIdSelector
 } = selectors;
 
-const {
-  ListItem,
-  ListItemView,
-  ListItemMeta,
-  ListItemTitle,
-  ListItemOptions,
-  ListItemOutlet
-} = List;
-
-const Instances = ({
+const Instances = (props) => {
+  const {
     instances = [],
     toggleCollapsed = () => null
-}) => {
-  const onClick = (uuid) => () => toggleCollapsed(uuid);
+  } = props;
 
   const empty = instances.length ? null : (
     <EmptyInstances />
   );
 
-  const instanceList = instances.map((instance) => (
-    <ListItem collapsed={!instance.collapsed} key={instance.uuid} >
-      <ListItemView>
-        <ListItemMeta onClick={onClick(instance.uuid)}>
-          <ListItemTitle>{instance.name}</ListItemTitle>
-        </ListItemMeta>
-        <ListItemOutlet>
-          <DatasetsRow metrics={instance.metrics} />
-        </ListItemOutlet>
-      </ListItemView>
-      <ListItemOptions>
-        …
-      </ListItemOptions>
-    </ListItem>
-  ));
-
   return (
     <div>
       {empty}
-      {instanceList}
+      <InstanceList
+        instances={instances}
+        toggleCollapsed={toggleCollapsed}
+      />
     </div>
   );
 };

frontend/src/prop-types.js

@@ -44,11 +44,11 @@ const Dataset = React.PropTypes.shape({
   type: React.PropTypes.string,
   data: React.PropTypes.arrayOf(
     React.PropTypes.shape({
-      firstQuartile: React.PropTypes.string,
-      thirdQuartile: React.PropTypes.string,
-      median: React.PropTypes.string,
-      max: React.PropTypes.string,
-      min: React.PropTypes.string
+      firstQuartile: React.PropTypes.number,
+      thirdQuartile: React.PropTypes.number,
+      median: React.PropTypes.number,
+      max: React.PropTypes.number,
+      min: React.PropTypes.number
     })
   )
 });

frontend/src/state/selectors.js

@@ -93,6 +93,16 @@ const metricsByServiceId = (serviceId) => createSelector(
     metricTypes.filter((i) => i.service === service.uuid)
 );
 
+const instancesByProjectId = (projectId) => createSelector(
+  [instances, projectById(projectId), collapsedInstances, metricDatasets],
+  (instances, project, collapsed, metrics) =>
+    instances.filter((i) => i.project === project.uuid)
+    .map((instance) => ({
+      ...instance,
+      metrics: datasets(metrics, instance.metrics),
+      collapsed: isCollapsed(collapsed, instance.uuid)
+    }))
+);
 
 module.exports = {
   accountSelector: account,
@@ -108,5 +118,6 @@ module.exports = {
   projectByIdSelector: projectById,
   servicesByProjectIdSelector: servicesByProjectId,
   instancesByServiceIdSelector: instancesByServiceId,
-  metricsByServiceIdSelector: metricsByServiceId
+  metricsByServiceIdSelector: metricsByServiceId,
+  instancesByProjectIdSelector: instancesByProjectId
 };