mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00
Code Issues Releases Wiki Activity

collapsed state for service items

Browse Source
This commit is contained in:
Sérgio Ramos 2017-01-10 14:58:51 +00:00
parent c9ea9117f0
commit 08a3a0291d
4 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/mock-state.json
View File

@ -160,6 +160,7 @@
}, },
"services": { "services": {
"ui": { "ui": {
"collapsed": [],
"sections": [ "sections": [
"summary", "summary",
"instances", "instances",

3
frontend/src/state/actions.js
View File

@ -10,5 +10,6 @@ const APP = constantCase(process.env['APP_NAME']);
module.exports = { module.exports = {
...require('@state/thunks'), ...require('@state/thunks'),
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`), updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`) toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`)
}; };

16
frontend/src/state/reducers/services.js
View File

@ -1,9 +1,23 @@
const ReduxActions = require('redux-actions'); const ReduxActions = require('redux-actions');
const actions = require('@state/actions');
const { const {
handleActions handleActions
} = ReduxActions; } = ReduxActions;
const {
toggleServiceCollapsed
} = actions;
module.exports = handleActions({ module.exports = handleActions({
'x': (state) => state // somehow handleActions needs at least one reducer [toggleServiceCollapsed.toString()]: (state, action) => ({
...state,
ui: {
...state.ui,
collapsed: state.ui.collapsed.indexOf(action.payload) >= 0
? state.ui.collapsed.filter((uuid) => uuid !== action.payload)
: [...state.ui.collapsed, action.payload]
}
})
}, {}); }, {});

16
frontend/src/state/selectors.js
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 collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
const instances = (state) => get(state, 'instances.data', []); const instances = (state) => get(state, 'instances.data', []);
const projectById = (projectId) => createSelector( const projectById = (projectId) => createSelector(
@ -45,19 +46,28 @@ const orgSections = (orgId) => createSelector(
); );
const servicesByProjectId = (projectId) => createSelector( const servicesByProjectId = (projectId) => createSelector(
[services, projectById(projectId)], [services, projectById(projectId), collapsedServices],
(services, project) => (services, project, collapsed) =>
services.filter((s) => s.project === project.uuid) services.filter((s) => s.project === project.uuid)
.map((service) => ({ .map((service) => ({
...service, ...service,
services: services.filter((s) => s.parent === service.uuid) services: services.filter((s) => s.parent === service.uuid)
})) }))
.filter((s) => !s.parent) .filter((s) => !s.parent)
.map((service) => ({
...service,
collapsed: collapsed.indexOf(service.uuid) >= 0,
services: service.services.map((service) => ({
...service,
collapsed: collapsed.indexOf(service.uuid) >= 0
}))
}))
); );
const instancesByServiceId = (serviceId) => createSelector( const instancesByServiceId = (serviceId) => createSelector(
[instances, serviceById(serviceId)], [instances, serviceById(serviceId)],
(instances, service) => instances.filter((i) => i.service === service.uuid) (instances, service) =>
instances.filter((i) => i.service === service.uuid)
); );