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 ( +
+ {empty} + +
+ ); +}; + +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) => ( -
-

instances

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