diff --git a/frontend/src/components/instance-item/index.js b/frontend/src/components/instance-item/index.js
new file mode 100644
index 00000000..5638f110
--- /dev/null
+++ b/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
+}) => (
+
+
+
+ {instance.name}
+
+
+
+
+
+
+ …
+
+
+);
+
+InstanceItem.propTypes = {
+ instance: PropTypes.instance,
+ toggleCollapsed: React.PropTypes.func
+};
+
+module.exports = InstanceItem;
\ No newline at end of file
diff --git a/frontend/src/components/instance-list/index.js b/frontend/src/components/instance-list/index.js
new file mode 100644
index 00000000..5662c827
--- /dev/null
+++ b/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) => (
+
+ ));
+
+ return (
+
+ {instanceList}
+
+ );
+};
+
+InstanceList.propTypes = {
+ instances: React.PropTypes.arrayOf(PropTypes.instance),
+ toggleCollapsed: React.PropTypes.func
+};
+
+module.exports = InstanceList;
diff --git a/frontend/src/components/service-item/index.js b/frontend/src/components/service-item/index.js
index 3fe83741..7453afa4 100644
--- a/frontend/src/components/service-item/index.js
+++ b/frontend/src/components/service-item/index.js
@@ -87,7 +87,7 @@ const ServiceItem = ({
{description}
-
+
);
diff --git a/frontend/src/containers/project/instances.js b/frontend/src/containers/project/instances.js
index dbb58acf..2909f1b5 100644
--- a/frontend/src/containers/project/instances.js
+++ b/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');
+
+const {
+ toggleInstanceCollapsed
+} = actions;
+
+const {
+ connect
+} = ReactRedux;
+
+const {
+ instancesByProjectIdSelector
+} = selectors;
+
+const Instances = (props) => {
+ const {
+ instances = [],
+ toggleCollapsed = () => null
+ } = props;
+
+ const empty = instances.length ? null : (
+
+ );
+
+ return (
+
+ );
+};
+
+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);
-module.exports = (props) => (
-
-);
diff --git a/frontend/src/containers/service/instances.js b/frontend/src/containers/service/instances.js
index 6572c529..019d38d2 100644
--- a/frontend/src/containers/service/instances.js
+++ b/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 = ({
- instances = [],
- toggleCollapsed = () => null
-}) => {
- const onClick = (uuid) => () => toggleCollapsed(uuid);
+const Instances = (props) => {
+ const {
+ instances = [],
+ toggleCollapsed = () => null
+ } = props;
const empty = instances.length ? null : (
);
- const instanceList = instances.map((instance) => (
-
-
-
- {instance.name}
-
-
-
-
-
-
- …
-
-
- ));
-
return (
{empty}
- {instanceList}
+
);
};
diff --git a/frontend/src/prop-types.js b/frontend/src/prop-types.js
index c3422655..9908426d 100644
--- a/frontend/src/prop-types.js
+++ b/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
})
)
});
diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js
index 27aa0201..7c154b3d 100644
--- a/frontend/src/state/selectors.js
+++ b/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
};