Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Restructure redux state enable duration changing for metrics

Browse Source
This commit is contained in:
JUDIT GRESKOVITS 2017-01-24 17:37:08 +00:00
parent 390adddd30
commit 636a478f40
12 changed files with 671 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/locales/en-us.json
View File

@ -28,15 +28,15 @@
"metric": { "metric": {
"settings-label": "Settings" "settings-label": "Settings"
}, },
"cpu_agg_usage": { "cpu-agg-usage": {
"title": "Aggregated CPU usage", "title": "Aggregated CPU usage",
"description": "CPU usages accross all of the CPU cores." "description": "CPU usages accross all of the CPU cores."
}, },
"cpu_wait_time": { "cpu-wait-time": {
"title": "Memory resident set size", "title": "Memory resident set size",
"description": "Process memory that is actually stored in the RAM." "description": "Process memory that is actually stored in the RAM."
}, },
"zfs_used": { "zfs-used": {
"title": "Apache HTTP requests", "title": "Apache HTTP requests",
"description": "Number of website requests to apache if it is used." "description": "Number of website requests to apache if it is used."
} }

16
frontend/src/containers/metrics/add-metrics.js
View File

@ -16,13 +16,13 @@ const {
} = AddMetric; } = AddMetric;
const AddMetrics = ({ const AddMetrics = ({
datasets,
metricTypes, metricTypes,
metrics,
onAddMetric onAddMetric
}) => { }) => {
const added = (metric) => const added = (metric) =>
Boolean(metrics.filter((m) => m.id === metric).length); Boolean(datasets.filter((dataset) => dataset.type.id === metric).length);
const addButton = (metric) => ( const addButton = (metric) => (
<AddMetricButton metric={metric} onClick={onAddMetric}> <AddMetricButton metric={metric} onClick={onAddMetric}>
<FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} /> <FormattedMessage id={'metrics.add.add-label'} onClick={onAddMetric} />
@ -35,17 +35,17 @@ const AddMetrics = ({
); );
const metricList = metricTypes.map((metric) => ( const metricList = metricTypes.map((metric) => (
<AddMetricTile key={metric}> <AddMetricTile key={metric.id}>
<AddMetricTitle> <AddMetricTitle>
<FormattedMessage id={`metrics.${metric}.title`} /> <FormattedMessage id={`metrics.${metric.id}.title`} />
</AddMetricTitle> </AddMetricTitle>
<AddMetricDescription> <AddMetricDescription>
<FormattedMessage id={`metrics.${metric}.description`} /> <FormattedMessage id={`metrics.${metric.id}.description`} />
</AddMetricDescription> </AddMetricDescription>
<AddMetricLink href='http://somelink.com'> <AddMetricLink href='http://somelink.com'>
<FormattedMessage id={'metrics.add.link-label'} /> <FormattedMessage id={'metrics.add.link-label'} />
</AddMetricLink> </AddMetricLink>
{ added(metric) ? addedButton : addButton(metric) } { added(metric.id) ? addedButton : addButton(metric.id) }
</AddMetricTile> </AddMetricTile>
)); ));
@ -57,8 +57,8 @@ const AddMetrics = ({
}; };
AddMetrics.propTypes = { AddMetrics.propTypes = {
metricTypes: React.PropTypes.arrayOf(React.PropTypes.string), datasets: React.PropTypes.arrayOf(PropTypes.dataset),
metrics: React.PropTypes.arrayOf(PropTypes.metric).isRequired, metricTypes: React.PropTypes.arrayOf(PropTypes.metric),
onAddMetric: React.PropTypes.func.isRequired, onAddMetric: React.PropTypes.func.isRequired,
}; };

18
frontend/src/containers/metrics/index.js
View File

@ -20,13 +20,16 @@ const {
const Metrics = ({ const Metrics = ({
addMetric, addMetric,
metrics, datasets,
metricTypes, metricTypes,
metricTypeUuid = '', metricTypeUuid = '',
metricDurationChange,
service, service,
toggleMonitorView = () => null toggleMonitorView = () => null
}) => { }) => {
const onMonitorsClick = (ev) => toggleMonitorView(metricTypeUuid); const onMonitorsClick = (ev) => toggleMonitorView(metricTypeUuid);
const onRemoveMetric = (ev) => {};
return ( return (
<div> <div>
@ -37,12 +40,14 @@ const Metrics = ({
</Row> </Row>
<Monitors /> <Monitors />
<MetricCharts <MetricCharts
datasets={metrics.datasets} datasets={datasets}
onSettingsClick={toggleMonitorView} onDurationChange={metricDurationChange}
onRemoveMetric={onRemoveMetric}
onSettingsClick={onMonitorsClick}
/> />
<AddMetrics <AddMetrics
datasets={datasets}
metricTypes={metricTypes} metricTypes={metricTypes}
metrics={metrics.types}
onAddMetric={addMetric} onAddMetric={addMetric}
/> />
</div> </div>
@ -51,9 +56,10 @@ const Metrics = ({
Metrics.propTypes = { Metrics.propTypes = {
addMetric: React.PropTypes.func.isRequired, addMetric: React.PropTypes.func.isRequired,
datasets: React.PropTypes.arrayOf(PropTypes.dataset),
metricDurationChange: React.PropTypes.func.isRequired,
metricTypeUuid: React.PropTypes.string, metricTypeUuid: React.PropTypes.string,
metricTypes: React.PropTypes.arrayOf(React.PropTypes.string), metricTypes: React.PropTypes.arrayOf(PropTypes.metric),
metrics: React.PropTypes.arrayOf(PropTypes.metric),
service: PropTypes.service, service: PropTypes.service,
toggleMonitorView: React.PropTypes.func.isRequired toggleMonitorView: React.PropTypes.func.isRequired
}; };

40
frontend/src/containers/metrics/metric-charts.js
View File

@ -20,34 +20,41 @@ const {
const MetricCharts = ({ const MetricCharts = ({
datasets, datasets,
duration = 360,
durations = [ durations = [
360, 360,
720, 720,
1440, 1440,
2880 2880
], ],
onDurationChange = () => {}, onDurationChange,
onSettingsClick = () => {}, onSettingsClick,
onRemoveMetric = () => {} onRemoveMetric = () => {}
}) => { }) => {
const optionList = durations.map(duration => ( const optionList = durations.map(duration => (
<option key={duration} value={duration}> <option key={String(duration)} value={duration}>
{moment.duration(duration, 'minutes').humanize()} {moment.duration(duration, 'minutes').humanize()}
</option> </option>
)); ));
const metricList = datasets.map((dataset) => { const metricList = datasets.map((dataset, index) => {
// TODO
// - yMeasurement '%' or not const {
// - yMin & yMax should all come from the metric type description data,
duration=durations[0],
type
} = dataset;
const onSelectChange = (evt) =>
onDurationChange(Number(evt.target.value), dataset.uuid);
return ( return (
<MetricView key={dataset.uuid + Math.random()}> <MetricView key={type.id}>
<MetricHeader> <MetricHeader>
<MetricTitle>{dataset.uuid}</MetricTitle> <MetricTitle>
<MetricSelect onChange={onDurationChange} value={durations[0]}> <FormattedMessage id={`metrics.${type.id}.title`} />
</MetricTitle>
<MetricSelect onChange={onSelectChange} value={String(duration)}>
{optionList} {optionList}
</MetricSelect> </MetricSelect>
<MetricSettingsButton onClick={onSettingsClick}> <MetricSettingsButton onClick={onSettingsClick}>
@ -56,11 +63,11 @@ const MetricCharts = ({
<MetricCloseButton onClick={onRemoveMetric} /> <MetricCloseButton onClick={onRemoveMetric} />
</MetricHeader> </MetricHeader>
<MetricGraph <MetricGraph
data={dataset.data} data={data}
duration={duration} duration={duration}
yMax={100} yMax={type.max}
yMeasurement='%' yMeasurement={type.measurement}
yMin={0} yMin={type.min}
/> />
</MetricView> </MetricView>
); );
@ -74,8 +81,7 @@ const MetricCharts = ({
}; };
MetricCharts.propTypes = { MetricCharts.propTypes = {
datasets: React.PropTypes.arrayOf(PropTypes.Dataset), datasets: React.PropTypes.arrayOf(PropTypes.dataset),
duration: React.PropTypes.number,
durations: React.PropTypes.arrayOf(React.PropTypes.number), durations: React.PropTypes.arrayOf(React.PropTypes.number),
onDurationChange: React.PropTypes.func.isRequired, onDurationChange: React.PropTypes.func.isRequired,
onRemoveMetric: React.PropTypes.func.isRequired, onRemoveMetric: React.PropTypes.func.isRequired,

20
frontend/src/containers/service/metrics.js
View File

@ -10,33 +10,41 @@ const {
const { const {
metricsByServiceIdSelector, metricsByServiceIdSelector,
metricTypesSelector,
serviceByIdSelector serviceByIdSelector
} = selectors; } = selectors;
const { const {
addMetric addMetric,
metricDurationChange
} = actions; } = actions;
const mapStateToProps = (state, { const mapStateToProps = (state, {
params = {} params = {}
}) => ({ }) => ({
metrics: metricsByServiceIdSelector(params.serviceId)(state), datasets: metricsByServiceIdSelector(params.serviceId)(state),
metricTypes: state.metrics.ui.types, metricTypes: metricTypesSelector(state),
service: serviceByIdSelector(params.serviceId)(state) service: serviceByIdSelector(params.serviceId)(state)
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
addMetric: (service) => (metric) => dispatch(addMetric({ addMetric: (service) => (metric) => dispatch(addMetric({
id: metric, metric: metric,
service: service.uuid service: service.uuid
})) })),
metricDurationChange: (service) =>
(duration, dataset) => dispatch(metricDurationChange({
duration,
dataset
}))
}); });
const mergeProps = (stateProps, dispatchProps, ownProps) => ({ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
...stateProps, ...stateProps,
...dispatchProps, ...dispatchProps,
...ownProps, ...ownProps,
addMetric: dispatchProps.addMetric(stateProps.service) addMetric: dispatchProps.addMetric(stateProps.service),
metricDurationChange: dispatchProps.metricDurationChange(stateProps.service)
}); });
module.exports = connect( module.exports = connect(

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

@ -53,44 +53,112 @@
}, },
"metrics": { "metrics": {
"ui": { "ui": {
"types": [
"cpu_agg_usage",
"cpu_wait_time",
"zfs_used",
"zfs_available",
"load_average",
"mem_agg_usage",
"mem_limit",
"mem_swap",
"mem_swap_limit",
"net_agg_packets_in",
"net_agg_packets_out",
"net_agg_bytes_in",
"net_agg_bytes_out",
"time_of_day"
],
"durations": [ "durations": [
360, "360",
720, "720",
1440, "1440",
2880 "2880"
] ]
}, },
"data": { "data": {
"types": [{ "types": [{
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "agg-cpu-usage"
}, {
"uuid": "9e77b50e-42d7-425d-8daf-c0e98e2bdd6a",
"id": "mem-res-set-size"
}, {
"uuid": "347dbdc7-15e3-4e12-8dfb-865d38526e14",
"id": "apache-http-reqs"
}, {
"uuid": "2aaa237d-42b3-442f-9094-a17aa470014b", "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
"name": "Memory", "name": "Aggregated CPU usage",
"id": "memory" "id": "cpu-agg-usage",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d6",
"name": "Aggregated CPU usage",
"id": "cpu-wait-time",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
"name": "Aggregated CPU usage",
"id": "zfs-used",
"min": 1,
"max": 2,
"measurement": "kb"
}, {
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d8",
"name": "Aggregated CPU usage",
"id": "zfs-available",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
"name": "Aggregated CPU usage",
"id": "load-average",
"min": 0,
"max": 20,
"measurement": "kb"
}, {
"uuid": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "mem-agg-usage",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad93-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "mem-limit",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad94-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "mem-swap",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad95-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "mem-swap-limit",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad96-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "net-agg-packets-in",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-46ce-ad97-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "net-agg-packets-out",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-47ce-ad91-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "net-agg-bytes-in",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-48ce-ad91-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "net-agg-bytes-out",
"min": 0,
"max": 100,
"measurement": "%"
}, {
"uuid": "dca08514-72e5-49ce-ad91-e68b3b0914d4",
"name": "Aggregated CPU usage",
"id": "time-of-day",
"min": 0,
"max": 100,
"measurement": "%"
}], }],
"datasets": [{ "datasets": [{
"type": "2aaa237d-42b3-442f-9094-a17aa470014b", "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
@ -197,7 +265,215 @@
"median": 30, "median": 30,
"max": 49, "max": 49,
"min": 30 "min": 30
}, {
"firstQuartile": 15,
"thirdQuartile": 15,
"median": 15,
"max": 15,
"min": 15
}, {
"firstQuartile": 26,
"thirdQuartile": 26,
"median": 26,
"max": 26,
"min": 26
}, {
"firstQuartile": 17,
"thirdQuartile": 17,
"median": 17,
"max": 17,
"min": 17
}, {
"firstQuartile": 15,
"thirdQuartile": 25,
"median": 19,
"max": 19,
"min": 20
}, {
"firstQuartile": 19,
"thirdQuartile": 25,
"median": 21,
"max": 20,
"min": 25
}, {
"firstQuartile": 24,
"thirdQuartile": 30,
"median": 25,
"max": 26,
"min": 10
}, {
"firstQuartile": 28,
"thirdQuartile": 34,
"median": 30,
"max": 30,
"min": 30
}, {
"firstQuartile": 30,
"thirdQuartile": 45,
"median": 35,
"max": 40,
"min": 40
}, {
"firstQuartile": 20,
"thirdQuartile": 55,
"median": 45,
"max": 44,
"min": 44
}, {
"firstQuartile": 55,
"thirdQuartile": 55,
"median": 55,
"max": 55,
"min": 55
}, {
"firstQuartile": 57,
"thirdQuartile": 56,
"median": 57,
"max": 58,
"min": 57
}, {
"firstQuartile": 57,
"thirdQuartile": 56,
"median": 56,
"max": 56,
"min": 56
}, {
"firstQuartile": 60,
"thirdQuartile": 56,
"median": 60,
"max": 60,
"min": 60
}, {
"firstQuartile": 57,
"thirdQuartile": 57,
"median": 57,
"max": 57,
"min": 57
}, {
"firstQuartile": 57,
"thirdQuartile": 55,
"median": 55,
"max": 55,
"min": 55
}, {
"firstQuartile": 20,
"thirdQuartile": 45,
"median": 45,
"max": 45,
"min": 45
}, {
"firstQuartile": 15,
"thirdQuartile": 40,
"median": 30,
"max": 49,
"min": 30
}, {
"firstQuartile": 15,
"thirdQuartile": 15,
"median": 15,
"max": 15,
"min": 15
}, {
"firstQuartile": 26,
"thirdQuartile": 26,
"median": 26,
"max": 26,
"min": 26
}, {
"firstQuartile": 17,
"thirdQuartile": 17,
"median": 17,
"max": 17,
"min": 17
}, {
"firstQuartile": 15,
"thirdQuartile": 25,
"median": 19,
"max": 19,
"min": 20
}, {
"firstQuartile": 19,
"thirdQuartile": 25,
"median": 21,
"max": 20,
"min": 25
}, {
"firstQuartile": 24,
"thirdQuartile": 30,
"median": 25,
"max": 26,
"min": 27
}, {
"firstQuartile": 28,
"thirdQuartile": 34,
"median": 30,
"max": 30,
"min": 30
}, {
"firstQuartile": 30,
"thirdQuartile": 45,
"median": 35,
"max": 40,
"min": 40
}, {
"firstQuartile": 20,
"thirdQuartile": 55,
"median": 45,
"max": 44,
"min": 44
}, {
"firstQuartile": 55,
"thirdQuartile": 55,
"median": 55,
"max": 55,
"min": 55
}, {
"firstQuartile": 57,
"thirdQuartile": 56,
"median": 57,
"max": 58,
"min": 57
}, {
"firstQuartile": 57,
"thirdQuartile": 56,
"median": 56,
"max": 56,
"min": 56
}, {
"firstQuartile": 60,
"thirdQuartile": 56,
"median": 60,
"max": 60,
"min": 60
}, {
"firstQuartile": 57,
"thirdQuartile": 57,
"median": 57,
"max": 57,
"min": 57
}, {
"firstQuartile": 57,
"thirdQuartile": 55,
"median": 55,
"max": 55,
"min": 55
}, {
"firstQuartile": 20,
"thirdQuartile": 45,
"median": 45,
"max": 45,
"min": 45
}, {
"firstQuartile": 15,
"thirdQuartile": 40,
"median": 30,
"max": 49,
"min": 30
}] }]
},{
"type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
"uuid": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
"data": [{"firstQuartile":1.62,"thirdQuartile":1.62,"median":1.62,"max":1.62,"min":1.62},{"firstQuartile":1.67,"thirdQuartile":1.67,"median":1.67,"max":1.67,"min":1.67},{"firstQuartile":1.63,"thirdQuartile":1.63,"median":1.63,"max":1.63,"min":1.63},{"firstQuartile":1.62,"thirdQuartile":1.66,"median":1.64,"max":1.64,"min":1.64},{"firstQuartile":1.64,"thirdQuartile":1.66,"median":1.64,"max":1.64,"min":1.66},{"firstQuartile":1.66,"thirdQuartile":1.69,"median":1.66,"max":1.67,"min":1.67},{"firstQuartile":1.68,"thirdQuartile":1.70,"median":1.69,"max":1.69,"min":1.69},{"firstQuartile":1.69,"thirdQuartile":1.75,"median":1.71,"max":1.73,"min":1.73},{"firstQuartile":1.64,"thirdQuartile":1.80,"median":1.75,"max":1.75,"min":1.75},{"firstQuartile":1.80,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.81,"max":1.81,"min":1.81},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.82,"thirdQuartile":1.80,"median":1.82,"max":1.82,"min":1.82},{"firstQuartile":1.81,"thirdQuartile":1.81,"median":1.81,"max":1.81,"min":1.81},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.64,"thirdQuartile":1.75,"median":1.75,"max":1.75,"min":1.75},{"firstQuartile":1.62,"thirdQuartile":1.73,"median":1.69,"max":1.77,"min":1.69},{"firstQuartile":1.62,"thirdQuartile":1.62,"median":1.62,"max":1.62,"min":1.62},{"firstQuartile":1.67,"thirdQuartile":1.67,"median":1.67,"max":1.67,"min":1.67},{"firstQuartile":1.63,"thirdQuartile":1.63,"median":1.63,"max":1.63,"min":1.63},{"firstQuartile":1.62,"thirdQuartile":1.66,"median":1.64,"max":1.64,"min":1.64},{"firstQuartile":1.64,"thirdQuartile":1.66,"median":1.64,"max":1.64,"min":1.66},{"firstQuartile":1.66,"thirdQuartile":1.69,"median":1.66,"max":1.67,"min":1.59},{"firstQuartile":1.68,"thirdQuartile":1.70,"median":1.69,"max":1.69,"min":1.69},{"firstQuartile":1.69,"thirdQuartile":1.75,"median":1.71,"max":1.73,"min":1.73},{"firstQuartile":1.64,"thirdQuartile":1.80,"median":1.75,"max":1.75,"min":1.75},{"firstQuartile":1.80,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.81,"max":1.81,"min":1.81},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.82,"thirdQuartile":1.80,"median":1.82,"max":1.82,"min":1.82},{"firstQuartile":1.81,"thirdQuartile":1.81,"median":1.81,"max":1.81,"min":1.81},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.64,"thirdQuartile":1.75,"median":1.75,"max":1.75,"min":1.75},{"firstQuartile":1.62,"thirdQuartile":1.73,"median":1.69,"max":1.77,"min":1.69},{"firstQuartile":1.62,"thirdQuartile":1.62,"median":1.62,"max":1.62,"min":1.62},{"firstQuartile":1.67,"thirdQuartile":1.67,"median":1.67,"max":1.67,"min":1.67},{"firstQuartile":1.63,"thirdQuartile":1.63,"median":1.63,"max":1.63,"min":1.63},{"firstQuartile":1.62,"thirdQuartile":1.66,"median":1.64,"max":1.64,"min":1.64},{"firstQuartile":1.64,"thirdQuartile":1.66,"median":1.64,"max":1.64,"min":1.66},{"firstQuartile":1.66,"thirdQuartile":1.69,"median":1.66,"max":1.67,"min":1.67},{"firstQuartile":1.68,"thirdQuartile":1.70,"median":1.69,"max":1.69,"min":1.69},{"firstQuartile":1.69,"thirdQuartile":1.75,"median":1.71,"max":1.73,"min":1.73},{"firstQuartile":1.64,"thirdQuartile":1.80,"median":1.75,"max":1.75,"min":1.75},{"firstQuartile":1.80,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.81,"max":1.81,"min":1.81},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.82,"thirdQuartile":1.80,"median":1.82,"max":1.82,"min":1.82},{"firstQuartile":1.81,"thirdQuartile":1.81,"median":1.81,"max":1.81,"min":1.81},{"firstQuartile":1.81,"thirdQuartile":1.80,"median":1.80,"max":1.80,"min":1.80},{"firstQuartile":1.64,"thirdQuartile":1.75,"median":1.75,"max":1.75,"min":1.75},{"firstQuartile":1.62,"thirdQuartile":1.73,"median":1.69,"max":1.77,"min":1.69}]
}] }]
} }
}, },
@ -320,55 +596,80 @@
"name": "Nginx", "name": "Nginx",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1, "instances": 1,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8", "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
"id": "wordpress", "id": "wordpress",
"name": "Wordpress", "name": "Wordpress",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1, "instances": 1,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "6a0eee76-c019-413b-9d5f-44712b55b993", "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
"id": "nfs", "id": "nfs",
"name": "NFS", "name": "NFS",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1, "instances": 1,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
"id": "memcached", "id": "memcached",
"name": "Memcached", "name": "Memcached",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 5, "instances": 5,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "4ee4103e-1a52-4099-a48e-01588f597c70", "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
"id": "percona", "id": "percona",
"name": "Percona", "name": "Percona",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 5, "instances": 5,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034", "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
"id": "primary", "id": "primary",
@ -376,11 +677,16 @@
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70", "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1, "instances": 1,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31", "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
"id": "secondaries", "id": "secondaries",
@ -388,22 +694,32 @@
"parent": "4ee4103e-1a52-4099-a48e-01588f597c70", "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 4, "instances": 4,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "97c68055-db88-45c9-ad49-f26da4264777", "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
"id": "consul", "id": "consul",
"name": "Consul", "name": "Consul",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"instances": 1, "instances": 1,
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}] }]
}, },
"instances": { "instances": {
@ -416,121 +732,176 @@
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8", "service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2", "uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
"name": "nfs_01", "name": "nfs_01",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "6a0eee76-c019-413b-9d5f-44712b55b993", "service": "6a0eee76-c019-413b-9d5f-44712b55b993",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d", "uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
"name": "consul", "name": "consul",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "97c68055-db88-45c9-ad49-f26da4264777", "service": "97c68055-db88-45c9-ad49-f26da4264777",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061", "uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
"name": "memcache_01", "name": "memcache_01",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd", "uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
"name": "memcache_02", "name": "memcache_02",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "2ea99763-3b44-4179-8393-d66d94961051", "uuid": "2ea99763-3b44-4179-8393-d66d94961051",
"name": "memcache_03", "name": "memcache_03",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d", "uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
"name": "memcache_04", "name": "memcache_04",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "8be01042-0281-4a77-a357-25979e87bf3d", "uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
"name": "memcache_05", "name": "memcache_05",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662", "uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
"name": "nginx", "name": "nginx",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "081a792c-47e0-4439-924b-2efa9788ae9e", "service": "081a792c-47e0-4439-924b-2efa9788ae9e",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b", "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
"name": "percona-primary", "name": "percona-primary",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "4ee4103e-1a52-4099-a48e-01588f597c70", "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}, { }, {
"uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76", "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
"name": "percona-secundary", "name": "percona-secundary",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb", "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "4ee4103e-1a52-4099-a48e-01588f597c70", "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
"metrics": [ "metrics": [{
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "type": "cpu-agg-usage",
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
"3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" }, {
] "type": "zfs-used",
"dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
}, {
"type": "mem-agg-usage",
"dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
}]
}] }]
} }
} }

7
frontend/src/prop-types.js
View File

@ -36,7 +36,10 @@ const Instance = React.PropTypes.shape({
}); });
const Metric = React.PropTypes.shape({ const Metric = React.PropTypes.shape({
...BaseObject ...BaseObject,
min: React.PropTypes.number,
max: React.PropTypes.number,
measurement: React.PropTypes.string
}); });
const MetricType = React.PropTypes.shape({ const MetricType = React.PropTypes.shape({
@ -45,7 +48,7 @@ const MetricType = React.PropTypes.shape({
const Dataset = React.PropTypes.shape({ const Dataset = React.PropTypes.shape({
uuid: React.PropTypes.string, uuid: React.PropTypes.string,
type: React.PropTypes.string, type: MetricType,
data: React.PropTypes.arrayOf( data: React.PropTypes.arrayOf(
React.PropTypes.shape({ React.PropTypes.shape({
firstQuartile: React.PropTypes.number, firstQuartile: React.PropTypes.number,

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

@ -13,6 +13,7 @@ module.exports = {
toggleHeaderTooltip: createAction(`${APP}/TOGGLE_HEADER_TOOLTIP`), toggleHeaderTooltip: createAction(`${APP}/TOGGLE_HEADER_TOOLTIP`),
toggleServiceCollapsed: createAction(`${APP}/TOGGLE_SERVICE_COLLAPSED`), toggleServiceCollapsed: createAction(`${APP}/TOGGLE_SERVICE_COLLAPSED`),
addMetric: createAction(`${APP}/ADD_METRIC`), addMetric: createAction(`${APP}/ADD_METRIC`),
metricDurationChange: createAction(`${APP}/METRIC_DURATION_CHANGE`),
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`), toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`), toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`), switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),

20
frontend/src/state/reducers/metrics.js
View File

@ -7,23 +7,19 @@ const {
} = ReduxActions; } = ReduxActions;
const { const {
addMetric metricDurationChange
} = actions; } = actions;
// This will need to be handled by an async action
// to update on the server too
module.exports = handleActions({ module.exports = handleActions({
[addMetric.toString()]: (state, action) => { [metricDurationChange.toString()]: (state, action) => {
return ({ return ({
...state, ...state,
data: { ui: {
types: [ ...state.ui,
...state.data.types, [action.payload.dataset]: {
action.payload ...state.ui[action.payload.dataset],
], duration: action.payload.duration
datasets: [ }
...state.data.datasets
]
} }
}); });
} }

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

@ -8,6 +8,7 @@ const {
} = ReduxActions; } = ReduxActions;
const { const {
addMetric,
toggleServiceCollapsed toggleServiceCollapsed
} = actions; } = actions;
@ -15,6 +16,45 @@ const {
toggleCollapsed toggleCollapsed
} = common; } = common;
const getMetrics = (stateMetrics, addMetric, metric) => {
const metrics = stateMetrics.map((m) => {
return ({
...m
});
});
if(addMetric) {
metrics.push({
type: metric
});
}
return metrics;
};
const getServices = (stateServices, service, metric) => {
return stateServices.map((s) => {
return ({
...s,
metrics: getMetrics(
s.metrics,
s.uuid === service,
metric
)
});
});
};
module.exports = handleActions({ module.exports = handleActions({
[toggleServiceCollapsed.toString()]: toggleCollapsed [toggleServiceCollapsed.toString()]: toggleCollapsed,
// This will need to be handled by an async action
// to update on the server too
[addMetric.toString()]: (state, action) => {
return ({
...state,
data: getServices(
state.data,
action.payload.service,
action.payload.metric
)
});
}
}, {}); }, {});

44
frontend/src/state/selectors.js
View File

@ -20,8 +20,10 @@ const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []); const collapsedInstances = (state) => get(state, 'instances.ui.collapsed', []);
const instances = (state) => get(state, 'instances.data', []); const instances = (state) => get(state, 'instances.data', []);
const members = (state) => get(state, 'members.data', []); const members = (state) => get(state, 'members.data', []);
const metricsUI = (state) => get(state, 'metrics.ui', {});
const metricTypes = (state) => get(state, 'metrics.data.types', []); const metricTypes = (state) => get(state, 'metrics.data.types', []);
const metricDatasets = (state) => get(state, 'metrics.data.datasets', []); // const metricDatasets = (state) => get(state, 'metrics.data.datasets', []);
const metricsData = (state) => get(state, 'metrics.data', {});
const projectById = (projectId) => createSelector( const projectById = (projectId) => createSelector(
projects, projects,
@ -52,14 +54,16 @@ const orgSections = (orgId) => createSelector(
const isCollapsed = (collapsed, uuid) => collapsed.indexOf(uuid) >= 0; const isCollapsed = (collapsed, uuid) => collapsed.indexOf(uuid) >= 0;
const datasets = (metrics, uuids) => uuids.map((uuid) => find(metrics, [ const datasets = (metricsData, serviceOrInstanceMetrics, metricsUI) =>
'uuid', serviceOrInstanceMetrics.map((soim) => ({
uuid ...find(metricsData.datasets, [ 'uuid', soim.dataset ]),
])); type: find(metricsData.types, [ 'id', soim.type ]),
...metricsUI[soim.dataset]
}));
const servicesByProjectId = (projectId) => createSelector( const servicesByProjectId = (projectId) => createSelector(
[services, projectById(projectId), collapsedServices, metricDatasets], [services, projectById(projectId), collapsedServices, metricsData, metricsUI],
(services, project, collapsed, metrics) => (services, project, collapsed, metrics, metricsUI) =>
services.filter((s) => s.project === project.uuid) services.filter((s) => s.project === project.uuid)
.map((service) => ({ .map((service) => ({
...service, ...service,
@ -68,33 +72,36 @@ const servicesByProjectId = (projectId) => createSelector(
.filter((s) => !s.parent) .filter((s) => !s.parent)
.map((service) => ({ .map((service) => ({
...service, ...service,
metrics: datasets(metrics, service.metrics), metrics: datasets(metrics, service.metrics, metricsUI),
collapsed: isCollapsed(collapsed, service.uuid), collapsed: isCollapsed(collapsed, service.uuid),
services: service.services.map((service) => ({ services: service.services.map((service) => ({
...service, ...service,
metrics: datasets(metrics, service.metrics), metrics: datasets(metrics, service.metrics, metricsUI),
collapsed: isCollapsed(collapsed, service.uuid) collapsed: isCollapsed(collapsed, service.uuid)
})) }))
})) }))
); );
const instancesByServiceId = (serviceId) => createSelector( const instancesByServiceId = (serviceId) => createSelector(
[instances, serviceById(serviceId), collapsedInstances, metricDatasets], [
(instances, service, collapsed, metrics) => instances,
serviceById(serviceId),
collapsedInstances,
metricsData,
metricsUI
],
(instances, service, collapsed, metrics, metricsUI) =>
instances.filter((i) => i.service === service.uuid) instances.filter((i) => i.service === service.uuid)
.map((instance) => ({ .map((instance) => ({
...instance, ...instance,
metrics: datasets(metrics, instance.metrics), metrics: datasets(metrics, instance.metrics, metricsUI),
collapsed: isCollapsed(collapsed, instance.uuid) collapsed: isCollapsed(collapsed, instance.uuid)
})) }))
); );
const metricsByServiceId = (serviceId) => createSelector( const metricsByServiceId = (serviceId) => createSelector(
[metricTypes, serviceById(serviceId), metricDatasets], [serviceById(serviceId), metricsData, metricsUI],
(metricTypes, service, metrics) => ({ (service, metrics, metricsUI) => datasets(metrics, service.metrics, metricsUI)
types: metricTypes.filter((i) => i.service === service.uuid),
datasets: datasets(metrics, service.metrics)
})
); );
const metricTypeByUuid = (metricTypeUuid) => createSelector( const metricTypeByUuid = (metricTypeUuid) => createSelector(
@ -104,7 +111,7 @@ const metricTypeByUuid = (metricTypeUuid) => createSelector(
const instancesByProjectId = (projectId) => createSelector( const instancesByProjectId = (projectId) => createSelector(
[instances, projectById(projectId), collapsedInstances, metricDatasets], [instances, projectById(projectId), collapsedInstances, metricsData],
(instances, project, collapsed, metrics) => (instances, project, collapsed, metrics) =>
instances.filter((i) => i.project === project.uuid) instances.filter((i) => i.project === project.uuid)
.map((instance) => ({ .map((instance) => ({
@ -143,6 +150,7 @@ module.exports = {
servicesByProjectIdSelector: servicesByProjectId, servicesByProjectIdSelector: servicesByProjectId,
instancesByServiceIdSelector: instancesByServiceId, instancesByServiceIdSelector: instancesByServiceId,
metricsByServiceIdSelector: metricsByServiceId, metricsByServiceIdSelector: metricsByServiceId,
metricTypesSelector: metricTypes,
instancesByProjectIdSelector: instancesByProjectId, instancesByProjectIdSelector: instancesByProjectId,
metricTypeByUuidSelector: metricTypeByUuid, metricTypeByUuidSelector: metricTypeByUuid,
peopleByOrgIdSelector: peopleByOrgId peopleByOrgIdSelector: peopleByOrgId

52
ui/src/components/metric/graph.js
View File

@ -59,9 +59,9 @@ class Graph extends React.Component {
unitStepSize: xUnitStepSize, unitStepSize: xUnitStepSize,
max: xMax, max: xMax,
min: xMin, min: xMin,
/*displayFormats: { displayFormats: {
hour: 'MMM D, hA' hour: 'MMM D, hA'
}*/ }
}, },
}], }],
yAxes: [{ yAxes: [{
@ -70,7 +70,9 @@ class Graph extends React.Component {
min: yMin, min: yMin,
max: yMax, max: yMax,
callback: (value, index, values) => { callback: (value, index, values) => {
return `${value.toFixed(2)}${yMeasurement}`; return value < 10 && value !== 0 ?
`${value.toFixed(2)}${yMeasurement}` :
`${value}${yMeasurement}`;
} }
} }
}] }]
@ -100,11 +102,15 @@ class Graph extends React.Component {
this._chart.update(0); this._chart.update(0);
} }
shouldComponentUpdate(nextProps, nextState) {
return false;
}
processData(props) { processData(props) {
const { const {
data = [], data = [],
duration = 360 duration = 360
} = this.props; } = props;
// I'm going to assume that data will be structured in 10min intervals... // I'm going to assume that data will be structured in 10min intervals...
// And that newest data will be at the end... // And that newest data will be at the end...
// Let's rock and roll! // Let's rock and roll!
@ -113,21 +119,24 @@ class Graph extends React.Component {
// first time on scale x // first time on scale x
const before = moment().subtract(duration, 'minutes'); const before = moment().subtract(duration, 'minutes');
// remove leading data before first time on scale x // remove leading data before first time on scale x
const totalData = data.slice(data.length - 1 - duration/10); let dataWithTime = [];
// adjust time of first data, if there's less data than would fill the chart if(data && data.length) {
const start = moment(before) const totalData = data.slice(data.length - 1 - duration/10);
.add(duration - (totalData.length-1)*10, 'minutes'); // adjust time of first data, if there's less data than would fill the chart
// add times to data const start = moment(before)
const dataWithTime = totalData.map((d, i) => { .add(duration - (totalData.length-1)*10, 'minutes');
const add = i*10; // add times to data
return Object.assign( dataWithTime = totalData.map((d, i) => {
{}, const add = i*10;
d, return Object.assign(
{ {},
x: moment(start).add(add, 'minutes').toDate() d,
} {
); x: moment(start).add(add, 'minutes').toDate()
}); }
);
});
}
// set min and max // set min and max
const xMax = now.toDate(); const xMax = now.toDate();
@ -152,6 +161,7 @@ class Graph extends React.Component {
} }
render() { render() {
return ( return (
<Container name='metric-body'> <Container name='metric-body'>
<Canvas <Canvas
@ -165,8 +175,8 @@ class Graph extends React.Component {
} }
Graph.propTypes = { Graph.propTypes = {
data: React.PropTypes.array, data: React.PropTypes.array, // eslint-disable-line react/no-unused-prop-types
duration: React.PropTypes.number, duration: React.PropTypes.number, // eslint-disable-line react/no-unused-prop-types
yMax: React.PropTypes.number, yMax: React.PropTypes.number,
yMeasurement: React.PropTypes.string, yMeasurement: React.PropTypes.string,
yMin: React.PropTypes.number yMin: React.PropTypes.number