1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

Add AddMetrics functionality and move AddMetric component story to folder

This commit is contained in:
JUDIT GRESKOVITS 2017-01-12 10:25:20 +00:00
parent 74c061a6cd
commit ea79adaa38
12 changed files with 185 additions and 91 deletions

View File

@ -30,12 +30,12 @@
"description": "CPU usages accross all of the CPU cores."
},
"cpu_wait_time": {
"title": "Memory resident set size (tmp)",
"description": "Process memory that is actually stored in the RAM. (tmp)"
"title": "Memory resident set size",
"description": "Process memory that is actually stored in the RAM."
},
"zfs_used": {
"title": "Apache HTTP requests (tmp)",
"description": "Number of website requests to apache if it is used. (tmp)"
"title": "Apache HTTP requests",
"description": "Number of website requests to apache if it is used."
}
}
}

View File

@ -46,7 +46,6 @@ const compile = async () => {
const name = path.parse(filename).name;
const messages = require(path.join(root, filename));
const flattenedMessages = flattenMessages(messages);
console.log('flattenedMessages = ', flattenedMessages);
const json = JSON.stringify(flattenedMessages);
const lang = name.split(/\-/)[0];

View File

@ -1,13 +1,8 @@
const React = require('react');
const ReactRedux = require('react-redux');
const PropTypes = require('@root/prop-types');
const AddMetric = require('@ui/components/add-metric');
const ReactIntl = require('react-intl');
const {
connect
} = ReactRedux;
const {
FormattedMessage
} = ReactIntl;
@ -20,18 +15,25 @@ const {
AddMetricTitle
} = AddMetric;
// we need some props! But like what? We'll need :
// - metrics
// - what metrics we have
// - we need to filter these by...
// instance/service? Think service... no? Huh :|
// - and some other stuff
// - like access to the reducer for when we add a thing
// (by thing I mean metric)
const AddMetrics = ({
metricTypes
metricTypes,
metrics,
onAddMetric
}) => {
const added = (metric) =>
Boolean(metrics.filter((m) => m.id === metric).length);
const addButton = (metric) => (
<AddMetricButton onClick={onAddMetric(metric)}>
<FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
</AddMetricButton>
);
const addedButton = (
<AddMetricButton disabled>
<FormattedMessage id={'metrics.add.added-label'} />
</AddMetricButton>
);
const metricList = metricTypes.map((metric) => (
<AddMetricTile key={metric}>
<AddMetricTitle>
@ -41,11 +43,9 @@ const AddMetrics = ({
<FormattedMessage id={`metrics.${metric}.description`} />
</AddMetricDescription>
<AddMetricLink href='http://somelink.com'>
<FormattedMessage id={'metrics.add.link'} />
<FormattedMessage id={'metrics.add.link-label'} />
</AddMetricLink>
<AddMetricButton>
<FormattedMessage id={'metrics.add.add-label'} />
</AddMetricButton>
{ added(metric) ? addedButton : addButton(metric) }
</AddMetricTile>
));
@ -57,17 +57,9 @@ const AddMetrics = ({
};
AddMetrics.propTypes = {
/* TODO - */
metricTypes: PropTypes.metricTypes
metricTypes: PropTypes.metricTypes.isRequired,
metrics: React.PropTypes.arrayOf(PropTypes.metric).isRequired,
onAddMetric: React.PropTypes.func.isRequired,
};
const mapStateToProps = (state, {
params = {}
}) => ({
/* TODO - tidy up */
metricTypes: state.metrics.ui.types
});
module.exports = connect(
mapStateToProps
)(AddMetrics);
module.exports = AddMetrics;

View File

@ -1,11 +1,71 @@
const React = require('react');
const ReactRedux = require('react-redux');
const PropTypes = require('@root/prop-types');
const selectors = require('@state/selectors');
const AddMetrics = require('../metrics/add-metrics');
const actions = require('@state/actions');
module.exports = () => (
<div>
<p>metrics</p>
const {
connect
} = ReactRedux;
const {
metricsByServiceIdSelector,
serviceByIdSelector
} = selectors;
const {
addMetric
} = actions;
const Metrics = ({
addMetric,
metrics,
metricTypes,
service
}) => {
const onAddMetric = (metric) => {
addMetric({
id: metric,
service: service.uuid
});
};
return (
<div>
<AddMetrics />
<p>metrics</p>
<div>
<AddMetrics
metricTypes={metricTypes}
metrics={metrics}
onAddMetric={onAddMetric}
/>
</div>
</div>
</div>
);
);
};
Metrics.propTypes = {
addMetric: React.PropTypes.func.isRequired,
metricTypes: PropTypes.metricTypes,
metrics: React.PropTypes.arrayOf(PropTypes.metric),
service: PropTypes.service
};
const mapStateToProps = (state, {
params = {}
}) => ({
metrics: metricsByServiceIdSelector(params.serviceId)(state),
metricTypes: state.metrics.ui.types,
service: serviceByIdSelector(params.serviceId)(state)
});
const mapDispatchToProps = (dispatch) => ({
addMetric: (payload) => dispatch(addMetric(payload))
});
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(Metrics);

View File

@ -67,13 +67,16 @@
},
"data": [{
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
"id": "agg-cpu-usage"
"id": "cpu_agg_usage",
"service": "081a792c-47e0-4439-924b-2efa9788ae9e"
}, {
"uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
"id": "mem-res-set-size"
"id": "zfs_used",
"service": "081a792c-47e0-4439-924b-2efa9788ae9e"
}, {
"uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
"id": "apache-http-reqs"
"id": "mem_limit",
"service": "081a792c-47e0-4439-924b-2efa9788ae9e"
}]
},
"orgs": {

View File

@ -11,5 +11,6 @@ module.exports = {
...require('@state/thunks'),
updateRouter: createAction(`${APP}/APP/UPDATE_ROUTER`),
toggleHeaderTooltip: createAction(`${APP}/APP/TOGGLE_HEADER_TOOLTIP`),
toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`)
toggleServiceCollapsed: createAction(`${APP}/APP/TOGGLE_SERVICE_COLLAPSED`),
addMetric: createAction(`${APP}/APP/ADD_METRIC`)
};

View File

@ -1,9 +1,25 @@
const ReduxActions = require('redux-actions');
const actions = require('@state/actions');
const {
handleActions
} = ReduxActions;
const {
addMetric
} = actions;
// This will need to be handled by an async action
// to update on the server too
module.exports = handleActions({
'x': (state) => state // somehow handleActions needs at least one reducer
[addMetric.toString()]: (state, action) => {
return ({
...state,
data: [
...state.data,
action.payload
]
});
}
}, {});

View File

@ -17,6 +17,7 @@ const projects = (state) => get(state, 'projects.data', []);
const services = (state) => get(state, 'services.data', []);
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
const instances = (state) => get(state, 'instances.data', []);
const metrics = (state) => get(state, 'metrics.data', []);
const projectById = (projectId) => createSelector(
projects,
@ -70,6 +71,12 @@ const instancesByServiceId = (serviceId) => createSelector(
instances.filter((i) => i.service === service.uuid)
);
const metricsByServiceId = (serviceId) => createSelector(
[metrics, serviceById(serviceId)],
(metrics, service) =>
metrics.filter((i) => i.service === service.uuid)
);
module.exports = {
accountSelector: account,
@ -84,5 +91,6 @@ module.exports = {
projectsByOrgIdSelector: projectsByOrgId,
projectByIdSelector: projectById,
servicesByProjectIdSelector: servicesByProjectId,
instancesByServiceIdSelector: instancesByServiceId
instancesByServiceIdSelector: instancesByServiceId,
metricsByServiceIdSelector: metricsByServiceId
};

View File

@ -27,7 +27,6 @@ const AddMetricButton = ({
<StyledButton
disabled
name='add-metric-button'
onClick={onClick}
>
{children}
</StyledButton>

View File

@ -0,0 +1,40 @@
const React = require('react');
const Base = require('../base');
const {
storiesOf
} = require('@kadira/storybook');
const {
AddMetricButton,
AddMetricDescription,
AddMetricLink,
AddMetricTile,
AddMetricTitle
} = require('./');
storiesOf('Add Metric', module)
.add('Add Metric', () => (
<Base>
<AddMetricTile>
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
<AddMetricDescription>
CPU usages accross all of the CPU cores.
</AddMetricDescription>
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
<AddMetricButton>Add</AddMetricButton>
</AddMetricTile>
</Base>
))
.add('Added Metric', () => (
<Base>
<AddMetricTile>
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
<AddMetricDescription>
CPU usages accross all of the CPU cores.
</AddMetricDescription>
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
<AddMetricButton disabled>Added</AddMetricButton>
</AddMetricTile>
</Base>
));

View File

@ -5,6 +5,7 @@ const fns = require('../../shared/functions');
const {
boxes,
breakpoints,
colors
} = constants;
@ -21,13 +22,29 @@ const spacing = remcalc(24);
const StyledTile = styled.div`
position: relative;
display: inline-block;
box-sizing: border-box;
margin: 0 ${spacing} ${spacing} 0;
padding: ${spacing};
width: ${300}px;
height: ${247}px;
width: ${remcalc(300)};
height: ${remcalc(247)};
box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary};
background-color: ${colors.brandSecondary};
${breakpoints.small`
width: ${remcalc(300)};
height: ${remcalc(247)};
`}
${breakpoints.medium`
width: ${remcalc(300)};
height: ${remcalc(247)};
`}
${breakpoints.large`
width: ${remcalc(300)};
height: ${remcalc(247)};
`}
`;
const Tile = ({

View File

@ -12,13 +12,6 @@ const {
Row,
Column,
Close,
AddMetric: {
AddMetricButton,
AddMetricDescription,
AddMetricLink,
AddMetricTile,
AddMetricTitle
},
Input,
List: {
ListItemDescription,
@ -114,40 +107,6 @@ storiesOf('Grid', module)
</Base>
));
storiesOf('Add Metric', module)
.add('Add Metric', () => (
<Base>
<Row>
<Column>
<AddMetricTile>
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
<AddMetricDescription>
CPU usages accross all of the CPU cores.
</AddMetricDescription>
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
<AddMetricButton>Add</AddMetricButton>
</AddMetricTile>
</Column>
</Row>
</Base>
))
.add('Added Metric', () => (
<Base>
<Row>
<Column>
<AddMetricTile>
<AddMetricTitle>Aggregated CPU usage</AddMetricTitle>
<AddMetricDescription>
CPU usages accross all of the CPU cores.
</AddMetricDescription>
<AddMetricLink href='http://somelink.com'>Learn more</AddMetricLink>
<AddMetricButton disabled>Added</AddMetricButton>
</AddMetricTile>
</Column>
</Row>
</Base>
));
storiesOf('Checkbox', module)
.add('Default', () => (
<Checkbox />