project instances

This commit is contained in:
Sérgio Ramos 2017-01-12 16:13:45 +00:00
parent 555c432cc4
commit df02761784
7 changed files with 159 additions and 45 deletions

View File

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

View File

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

View File

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

View File

@ -1,9 +1,63 @@
const React = require('react'); 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 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 : (
<EmptyInstances />
);
return (
<Section {...props}>
{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);
module.exports = (props) => (
<Section {...props}>
<p>instances</p>
</Section>
);

View File

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

View File

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

View File

@ -93,6 +93,16 @@ const metricsByServiceId = (serviceId) => createSelector(
metricTypes.filter((i) => i.service === service.uuid) 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 = { module.exports = {
accountSelector: account, accountSelector: account,
@ -108,5 +118,6 @@ module.exports = {
projectByIdSelector: projectById, projectByIdSelector: projectById,
servicesByProjectIdSelector: servicesByProjectId, servicesByProjectIdSelector: servicesByProjectId,
instancesByServiceIdSelector: instancesByServiceId, instancesByServiceIdSelector: instancesByServiceId,
metricsByServiceIdSelector: metricsByServiceId metricsByServiceIdSelector: metricsByServiceId,
instancesByProjectIdSelector: instancesByProjectId
}; };