From e12b87283a48d97d13865bbd51b1ca62868b63a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 11 Jan 2017 17:41:28 +0000 Subject: [PATCH] metrics data in state --- frontend/src/mock-state.json | 189 +++++++++++++++++++++++++++++--- frontend/src/state/selectors.js | 30 +++-- 2 files changed, 192 insertions(+), 27 deletions(-) diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json index ec6c9ce7..a5544fbb 100644 --- a/frontend/src/mock-state.json +++ b/frontend/src/mock-state.json @@ -65,16 +65,129 @@ "time_of_day" ] }, - "data": [{ - "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4", - "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" - }] + "data": { + "types": [{ + "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4", + "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", + "name": "Memory", + "id": "memory" + }], + "datasets": [{ + "type": "2aaa237d-42b3-442f-9094-a17aa470014b", + "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "data": [{ + "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 + }] + }] + } }, "orgs": { "ui": { @@ -177,51 +290,91 @@ "id": "nginx", "name": "Nginx", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 1 + "instances": 1, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }, { "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8", "id": "wordpress", "name": "Wordpress", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 1 + "instances": 1, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }, { "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993", "id": "nfs", "name": "NFS", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 1 + "instances": 1, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }, { "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c", "id": "memcached", "name": "Memcached", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 1 + "instances": 1, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }, { "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70", "id": "percona", "name": "Percona", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 5 + "instances": 5, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }, { "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034", "id": "primary", "name": "Primary", "parent": "4ee4103e-1a52-4099-a48e-01588f597c70", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 1 + "instances": 1, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }, { "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31", "id": "secondaries", "name": "Secondaries", "parent": "4ee4103e-1a52-4099-a48e-01588f597c70", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 4 + "instances": 4, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }, { "uuid": "97c68055-db88-45c9-ad49-f26da4264777", "id": "consul", "name": "Consul", "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances": 1 + "instances": 1, + "metrics": [ + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec", + "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec" + ] }] }, "instances": { diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index f9da01c7..0e2d9225 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -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 metricDatasets = (state) => get(state, 'metrics.data.datasets', []); const projectById = (projectId) => createSelector( projects, @@ -46,22 +47,33 @@ const orgSections = (orgId) => createSelector( ); const servicesByProjectId = (projectId) => createSelector( - [services, projectById(projectId), collapsedServices], - (services, project, collapsed) => + [services, projectById(projectId), collapsedServices, metricDatasets], + (services, project, collapsed, metrics) => services.filter((s) => s.project === project.uuid) .map((service) => ({ ...service, services: services.filter((s) => s.parent === service.uuid) })) .filter((s) => !s.parent) - .map((service) => ({ - ...service, - collapsed: collapsed.indexOf(service.uuid) >= 0, - services: service.services.map((service) => ({ + .map((service) => { + const isCollapsed = (uuid) => collapsed.indexOf(uuid) >= 0; + + const datasets = (uuids) => uuids.map((uuid) => find(metrics, [ + 'uuid', + uuid + ])); + + return { ...service, - collapsed: collapsed.indexOf(service.uuid) >= 0 - })) - })) + metrics: datasets(service.metrics), + collapsed: isCollapsed(service.uuid), + services: service.services.map((service) => ({ + ...service, + metrics: datasets(service.metrics), + collapsed: isCollapsed(service.uuid) + })) + }; + }) ); const instancesByServiceId = (serviceId) => createSelector(