list instances

This commit is contained in:
Sérgio Ramos 2017-01-09 19:08:47 +00:00
parent 7b73e82237
commit c229a69de6
7 changed files with 119 additions and 9 deletions

View File

@ -0,0 +1,19 @@
const React = require('react');
const ReactIntl = require('react-intl');
const Column = require('@ui/components/column');
const Row = require('@ui/components/row');
const {
FormattedMessage
} = ReactIntl;
module.exports = () => (
<Row>
<Column xs={12}>
<p name='empty'>
<FormattedMessage id='no-instances' />
</p>
</Column>
</Row>
);

View File

@ -1,5 +1,65 @@
const React = require('react'); const React = require('react');
const ReactRedux = require('react-redux');
module.exports = () => ( const EmptyInstances = require('@components/empty/instances');
<p>instances</p> const PropTypes = require('@root/prop-types');
const List = require('@ui/components/list');
const selectors = require('@state/selectors');
const {
connect
} = ReactRedux;
const {
instancesByServiceIdSelector
} = selectors;
const {
ListItem,
ListItemView,
ListItemMeta,
ListItemTitle,
ListItemOptions
} = List;
const Instances = ({
instances = []
}) => {
const empty = instances.length ? null : (
<EmptyInstances />
); );
const instanceList = instances.map((service) => (
<ListItem collapsed key={service.uuid}>
<ListItemView>
<ListItemMeta>
<ListItemTitle>{service.name}</ListItemTitle>
</ListItemMeta>
</ListItemView>
<ListItemOptions>
</ListItemOptions>
</ListItem>
));
return (
<div>
{empty}
{instanceList}
</div>
);
};
Instances.propTypes = {
instances: React.PropTypes.arrayOf(PropTypes.instance)
};
const mapStateToProps = (state, {
params = {}
}) => ({
instances: instancesByServiceIdSelector(params.serviceId)(state)
});
module.exports = connect(
mapStateToProps
)(Instances);

View File

@ -37,13 +37,18 @@ const Services = ({
const list = services.map((service) => { const list = services.map((service) => {
const to = `/${org.id}/projects/${project.id}/services/${service.id}`; const to = `/${org.id}/projects/${project.id}/services/${service.id}`;
const childs = serviceList(service.services);
return ( const name = childs ? service.name : (
<li key={service.id}>
<Link activeClassName='active' to={to}> <Link activeClassName='active' to={to}>
{service.name} {service.name}
</Link> </Link>
{serviceList(service.services)} );
return (
<li key={service.id}>
{name}
{childs}
</li> </li>
); );
}); });

View File

@ -28,6 +28,13 @@ const Service = React.PropTypes.shape({
...BaseObject ...BaseObject
}); });
const Instance = React.PropTypes.shape({
...BaseObject,
datacenter: React.PropTypes.string,
service: React.PropTypes.string,
project: React.PropTypes.string
});
const Sections = React.PropTypes.arrayOf( const Sections = React.PropTypes.arrayOf(
React.PropTypes.string React.PropTypes.string
); );
@ -38,5 +45,6 @@ module.exports = {
org: Org, org: Org,
project: Project, project: Project,
sections: Sections, sections: Sections,
service: Service service: Service,
instance: Instance
}; };

View File

@ -8,6 +8,7 @@ module.exports = () => {
return combineReducers({ return combineReducers({
account: require('@state/reducers/account'), account: require('@state/reducers/account'),
app: require('@state/reducers/app'), app: require('@state/reducers/app'),
instances: require('@state/reducers/instances'),
intl: require('@state/reducers/intl'), intl: require('@state/reducers/intl'),
orgs: require('@state/reducers/orgs'), orgs: require('@state/reducers/orgs'),
projects: require('@state/reducers/projects'), projects: require('@state/reducers/projects'),

View File

@ -0,0 +1,9 @@
const ReduxActions = require('redux-actions');
const {
handleActions
} = ReduxActions;
module.exports = handleActions({
'x': (state) => state // somehow handleActions needs at least one reducer
}, {});

View File

@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
const orgs = (state) => get(state, 'orgs.data', []); const orgs = (state) => get(state, 'orgs.data', []);
const projects = (state) => get(state, 'projects.data', []); const projects = (state) => get(state, 'projects.data', []);
const services = (state) => get(state, 'services.data', []); const services = (state) => get(state, 'services.data', []);
const instances = (state) => get(state, 'instances.data', []);
const projectById = (projectId) => createSelector( const projectById = (projectId) => createSelector(
projects, projects,
@ -54,6 +55,12 @@ const servicesByProjectId = (projectId) => createSelector(
.filter((s) => !s.parent) .filter((s) => !s.parent)
); );
const instancesByServiceId = (serviceId) => createSelector(
[instances, serviceById(serviceId)],
(instances, service) => instances.filter((i) => i.service === service.uuid)
);
module.exports = { module.exports = {
accountSelector: account, accountSelector: account,
accountUISelector: accountUi, accountUISelector: accountUi,
@ -66,5 +73,6 @@ module.exports = {
serviceSectionsSelector: serviceUiSections, serviceSectionsSelector: serviceUiSections,
projectsByOrgIdSelector: projectsByOrgId, projectsByOrgIdSelector: projectsByOrgId,
projectByIdSelector: projectById, projectByIdSelector: projectById,
servicesByProjectIdSelector: servicesByProjectId servicesByProjectIdSelector: servicesByProjectId,
instancesByServiceIdSelector: instancesByServiceId
}; };