mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
list instances
This commit is contained in:
parent
7b73e82237
commit
c229a69de6
19
frontend/src/components/empty/instances.js
Normal file
19
frontend/src/components/empty/instances.js
Normal 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>
|
||||
);
|
@ -1,5 +1,65 @@
|
||||
const React = require('react');
|
||||
const ReactRedux = require('react-redux');
|
||||
|
||||
module.exports = () => (
|
||||
<p>instances</p>
|
||||
);
|
||||
const EmptyInstances = require('@components/empty/instances');
|
||||
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);
|
||||
|
@ -37,13 +37,18 @@ const Services = ({
|
||||
|
||||
const list = services.map((service) => {
|
||||
const to = `/${org.id}/projects/${project.id}/services/${service.id}`;
|
||||
const childs = serviceList(service.services);
|
||||
|
||||
const name = childs ? service.name : (
|
||||
<Link activeClassName='active' to={to}>
|
||||
{service.name}
|
||||
</Link>
|
||||
);
|
||||
|
||||
return (
|
||||
<li key={service.id}>
|
||||
<Link activeClassName='active' to={to}>
|
||||
{service.name}
|
||||
</Link>
|
||||
{serviceList(service.services)}
|
||||
{name}
|
||||
{childs}
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
@ -28,6 +28,13 @@ const Service = React.PropTypes.shape({
|
||||
...BaseObject
|
||||
});
|
||||
|
||||
const Instance = React.PropTypes.shape({
|
||||
...BaseObject,
|
||||
datacenter: React.PropTypes.string,
|
||||
service: React.PropTypes.string,
|
||||
project: React.PropTypes.string
|
||||
});
|
||||
|
||||
const Sections = React.PropTypes.arrayOf(
|
||||
React.PropTypes.string
|
||||
);
|
||||
@ -38,5 +45,6 @@ module.exports = {
|
||||
org: Org,
|
||||
project: Project,
|
||||
sections: Sections,
|
||||
service: Service
|
||||
service: Service,
|
||||
instance: Instance
|
||||
};
|
||||
|
@ -8,6 +8,7 @@ module.exports = () => {
|
||||
return combineReducers({
|
||||
account: require('@state/reducers/account'),
|
||||
app: require('@state/reducers/app'),
|
||||
instances: require('@state/reducers/instances'),
|
||||
intl: require('@state/reducers/intl'),
|
||||
orgs: require('@state/reducers/orgs'),
|
||||
projects: require('@state/reducers/projects'),
|
||||
|
9
frontend/src/state/reducers/instances.js
Normal file
9
frontend/src/state/reducers/instances.js
Normal 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
|
||||
}, {});
|
@ -15,6 +15,7 @@ const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
|
||||
const orgs = (state) => get(state, 'orgs.data', []);
|
||||
const projects = (state) => get(state, 'projects.data', []);
|
||||
const services = (state) => get(state, 'services.data', []);
|
||||
const instances = (state) => get(state, 'instances.data', []);
|
||||
|
||||
const projectById = (projectId) => createSelector(
|
||||
projects,
|
||||
@ -54,6 +55,12 @@ const servicesByProjectId = (projectId) => createSelector(
|
||||
.filter((s) => !s.parent)
|
||||
);
|
||||
|
||||
const instancesByServiceId = (serviceId) => createSelector(
|
||||
[instances, serviceById(serviceId)],
|
||||
(instances, service) => instances.filter((i) => i.service === service.uuid)
|
||||
);
|
||||
|
||||
|
||||
module.exports = {
|
||||
accountSelector: account,
|
||||
accountUISelector: accountUi,
|
||||
@ -66,5 +73,6 @@ module.exports = {
|
||||
serviceSectionsSelector: serviceUiSections,
|
||||
projectsByOrgIdSelector: projectsByOrgId,
|
||||
projectByIdSelector: projectById,
|
||||
servicesByProjectIdSelector: servicesByProjectId
|
||||
servicesByProjectIdSelector: servicesByProjectId,
|
||||
instancesByServiceIdSelector: instancesByServiceId
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user