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:
parent
74c061a6cd
commit
ea79adaa38
@ -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."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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];
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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": {
|
||||
|
@ -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`)
|
||||
};
|
||||
|
@ -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
|
||||
]
|
||||
});
|
||||
}
|
||||
}, {});
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -27,7 +27,6 @@ const AddMetricButton = ({
|
||||
<StyledButton
|
||||
disabled
|
||||
name='add-metric-button'
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</StyledButton>
|
||||
|
40
ui/src/components/add-metric/story.js
Normal file
40
ui/src/components/add-metric/story.js
Normal 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>
|
||||
));
|
@ -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 = ({
|
||||
|
@ -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 />
|
||||
|
Loading…
Reference in New Issue
Block a user