2017-01-03 00:32:29 +02:00
|
|
|
const React = require('react');
|
2017-01-09 21:08:47 +02:00
|
|
|
const ReactRedux = require('react-redux');
|
2017-01-03 00:32:29 +02:00
|
|
|
|
2017-01-11 23:11:48 +02:00
|
|
|
const actions = require('@state/actions');
|
2017-01-09 21:08:47 +02:00
|
|
|
const EmptyInstances = require('@components/empty/instances');
|
|
|
|
const PropTypes = require('@root/prop-types');
|
|
|
|
const List = require('@ui/components/list');
|
2017-01-11 23:11:48 +02:00
|
|
|
const DatasetsRow = require('@components/metrics-row');
|
2017-01-09 21:08:47 +02:00
|
|
|
const selectors = require('@state/selectors');
|
|
|
|
|
2017-01-11 23:11:48 +02:00
|
|
|
const {
|
|
|
|
toggleInstanceCollapsed
|
|
|
|
} = actions;
|
|
|
|
|
2017-01-09 21:08:47 +02:00
|
|
|
const {
|
|
|
|
connect
|
|
|
|
} = ReactRedux;
|
|
|
|
|
|
|
|
const {
|
|
|
|
instancesByServiceIdSelector
|
|
|
|
} = selectors;
|
|
|
|
|
|
|
|
const {
|
|
|
|
ListItem,
|
|
|
|
ListItemView,
|
|
|
|
ListItemMeta,
|
|
|
|
ListItemTitle,
|
2017-01-11 23:11:48 +02:00
|
|
|
ListItemOptions,
|
|
|
|
ListItemOutlet
|
2017-01-09 21:08:47 +02:00
|
|
|
} = List;
|
|
|
|
|
|
|
|
const Instances = ({
|
2017-01-11 23:11:48 +02:00
|
|
|
instances = [],
|
|
|
|
toggleCollapsed = () => null
|
2017-01-09 21:08:47 +02:00
|
|
|
}) => {
|
2017-01-11 23:11:48 +02:00
|
|
|
const onClick = (uuid) => () => toggleCollapsed(uuid);
|
|
|
|
|
2017-01-09 21:08:47 +02:00
|
|
|
const empty = instances.length ? null : (
|
|
|
|
<EmptyInstances />
|
|
|
|
);
|
|
|
|
|
2017-01-11 23:11:48 +02:00
|
|
|
const instanceList = instances.map((instance) => (
|
|
|
|
<ListItem collapsed={!instance.collapsed} key={instance.uuid} >
|
2017-01-09 21:08:47 +02:00
|
|
|
<ListItemView>
|
2017-01-11 23:11:48 +02:00
|
|
|
<ListItemMeta onClick={onClick(instance.uuid)}>
|
|
|
|
<ListItemTitle>{instance.name}</ListItemTitle>
|
2017-01-09 21:08:47 +02:00
|
|
|
</ListItemMeta>
|
2017-01-11 23:11:48 +02:00
|
|
|
<ListItemOutlet>
|
|
|
|
<DatasetsRow metrics={instance.metrics} />
|
|
|
|
</ListItemOutlet>
|
2017-01-09 21:08:47 +02:00
|
|
|
</ListItemView>
|
|
|
|
<ListItemOptions>
|
|
|
|
…
|
|
|
|
</ListItemOptions>
|
|
|
|
</ListItem>
|
|
|
|
));
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{empty}
|
|
|
|
{instanceList}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Instances.propTypes = {
|
2017-01-11 23:11:48 +02:00
|
|
|
instances: React.PropTypes.arrayOf(PropTypes.instance),
|
|
|
|
toggleCollapsed: React.PropTypes.func
|
2017-01-09 21:08:47 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const mapStateToProps = (state, {
|
|
|
|
params = {}
|
|
|
|
}) => ({
|
|
|
|
instances: instancesByServiceIdSelector(params.serviceId)(state)
|
|
|
|
});
|
|
|
|
|
2017-01-11 23:11:48 +02:00
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
|
|
toggleCollapsed: (uuid) => dispatch(toggleInstanceCollapsed(uuid))
|
|
|
|
});
|
|
|
|
|
2017-01-09 21:08:47 +02:00
|
|
|
module.exports = connect(
|
2017-01-11 23:11:48 +02:00
|
|
|
mapStateToProps,
|
|
|
|
mapDispatchToProps
|
2017-01-09 21:08:47 +02:00
|
|
|
)(Instances);
|