From 925ed91042a4ed3f5ebd4787371251560e1a7277 Mon Sep 17 00:00:00 2001 From: Paul Hine Date: Thu, 26 Apr 2018 11:22:45 +0200 Subject: [PATCH] Swap metrics and query columns (#12) * tracer package * configure package and webpack for distribution * separate logEntry and formatEntry; send entry to elastic * shallow copy elastic.Client options because https://github.com/elasticsearch/elasticsearch-js/issues/33 * add API docs to readme * adjust readme * Update README.md * configure frontend to work with trace data in elasticsearch * add circleci config * Update README.md * move elastic call to componentDidMount * move jest.json to root and only call test once in circle * remove fast-async * run packages/tracer/yarn install in circle * try different syntax for circle deps * Add basic functional analytics frontend * Remove superfluous curly braces from App.js * Swap metrics and query columns --- src/App.js | 37 ++++++++++----- src/__tests__/App.test.js | 14 +++++- src/__tests__/__snapshots__/App.test.js.snap | 47 +++++++++++++++---- src/components/Aggregation/Aggregation.js | 3 +- .../__snapshots__/Aggregation.test.js.snap | 17 +++++-- src/components/Metrics/Metrics.js | 22 ++++++--- src/components/Metrics/Metrics.test.js | 4 +- .../__snapshots__/Metrics.test.js.snap | 20 +++++--- src/components/Query/Query.js | 15 +----- .../Query/__snapshots__/Query.test.js.snap | 23 +++------ 10 files changed, 129 insertions(+), 73 deletions(-) diff --git a/src/App.js b/src/App.js index 4e08a2d..c23f5ba 100644 --- a/src/App.js +++ b/src/App.js @@ -12,8 +12,8 @@ import config from './config.json' import './styles/globals.css' const aggPath = '/:_?/:rootQuery?' -const queryPath = '/aggregations/:rootQuery/:queryId?' -const metricsPath = '/aggregations/:rootQuery/:queryId' +const metricsPath = '/aggregations/:rootQuery/:queryId?' +const queryPath = '/aggregations/:rootQuery/:queryId' class App extends React.Component { constructor(props) { @@ -26,7 +26,7 @@ class App extends React.Component { loadAggregations() { if (this.state.aggregations.length) return - + server .search({ index: config.elastic_index, @@ -49,16 +49,25 @@ class App extends React.Component { } loadQueries() { - const match = matchPath(this.props.location.pathname, { path: queryPath }) - if (!match) return + const match = matchPath(this.props.location.pathname, { path: metricsPath }) + if (!match) { + return + } const rootQuery = match.params.rootQuery const query = this.state.queries[rootQuery] if (query) return - + server .search({ index: config.elastic_index, body: { + sort: [ + { + 'metrics.duration': { + order: 'desc', + }, + }, + ], query: { match: { rootQuery, @@ -107,16 +116,16 @@ class App extends React.Component { )} /> { const queries = this.state.queries[match.params.rootQuery] return ( {queries ? queries.map(query => ( - )) @@ -126,14 +135,16 @@ class App extends React.Component { }} /> { const queries = this.state.queries[match.params.rootQuery] - if (!queries) return 'loading...' - const trace = queries.find(t => t._id === match.params.queryId) + if (!queries) { + return 'loading...' + } + const query = queries.find(t => t._id === match.params.queryId) return ( - {trace ? : 'loading...'} + {query ? : 'loading...'} ) }} diff --git a/src/__tests__/App.test.js b/src/__tests__/App.test.js index 9afd88f..678ae80 100644 --- a/src/__tests__/App.test.js +++ b/src/__tests__/App.test.js @@ -31,7 +31,12 @@ jest.mock('../server', () => { } const queriesResponse = { hits: { - hits: [{ _id: 'uuid', _source: { graphql: 'allLocations...' } }], + hits: [ + { + _id: 'uuid', + _source: { graphql: 'allLocations...', metrics: { duration: 1 } }, + }, + ], }, } @@ -83,6 +88,13 @@ describe('App', () => { expect(server._search_spy.mock.calls[1][0]).toEqual({ index: config.elastic_index, body: { + sort: [ + { + 'metrics.duration': { + order: 'desc', + }, + }, + ], query: { match: { rootQuery: 'allLocations', diff --git a/src/__tests__/__snapshots__/App.test.js.snap b/src/__tests__/__snapshots__/App.test.js.snap index b96274c..b407d68 100644 --- a/src/__tests__/__snapshots__/App.test.js.snap +++ b/src/__tests__/__snapshots__/App.test.js.snap @@ -28,9 +28,18 @@ exports[`App renders correctly (after data is returned from server) 1`] = ` } } > - allLocations - - - 442 + + allLocations + + + 442 +
- allFlights - - - 3342 + + allFlights + + + 3342 +
- allWhatever - - - 2 + + allWhatever + + + 2 +
-`; +` diff --git a/src/components/Aggregation/Aggregation.js b/src/components/Aggregation/Aggregation.js index 223d171..2e7198e 100644 --- a/src/components/Aggregation/Aggregation.js +++ b/src/components/Aggregation/Aggregation.js @@ -13,7 +13,8 @@ const Aggregation = ({ aggregation, history, isActive }) => ( isActive={isActive} onClick={() => history.push(`/aggregations/${aggregation.key}`)} > - {aggregation.key} - {aggregation.doc_count} + {aggregation.key} + {aggregation.doc_count} ) diff --git a/src/components/Aggregation/__snapshots__/Aggregation.test.js.snap b/src/components/Aggregation/__snapshots__/Aggregation.test.js.snap index 277da3e..e3c656f 100644 --- a/src/components/Aggregation/__snapshots__/Aggregation.test.js.snap +++ b/src/components/Aggregation/__snapshots__/Aggregation.test.js.snap @@ -10,8 +10,17 @@ exports[`renders correctly 1`] = ` } } > - allLocations - - - 6 + + allLocations + + + 6 + -`; +` diff --git a/src/components/Metrics/Metrics.js b/src/components/Metrics/Metrics.js index b2540b3..4d7b55a 100644 --- a/src/components/Metrics/Metrics.js +++ b/src/components/Metrics/Metrics.js @@ -1,14 +1,24 @@ import React from 'react' +import Button from '../Button/Button' +import { withRouter } from 'react-router' import vars from '../../styles/vars' -const style = { +const buttonStyle = { fontFamily: vars.fontFamily, } -export default ({ trace }) => ( -
-
Duration
-
{parseInt(trace._source.metrics.duration / 10 ** 6)} ms
-
+const Metrics = ({ trace, isActive, history }) => ( + ) + +export default withRouter(Metrics) diff --git a/src/components/Metrics/Metrics.test.js b/src/components/Metrics/Metrics.test.js index 2644c89..b3c253f 100644 --- a/src/components/Metrics/Metrics.test.js +++ b/src/components/Metrics/Metrics.test.js @@ -1,6 +1,6 @@ import React from 'react' import Metrics from './Metrics' -import renderer from 'react-test-renderer' +import { renderWithRouter } from '../../__tests__/helpers' it('renders correctly', () => { const data = { @@ -8,6 +8,6 @@ it('renders correctly', () => { metrics: { duration: 1 }, }, } - const tree = renderer.create().toJSON() + const tree = renderWithRouter({ children: }) expect(tree).toMatchSnapshot() }) diff --git a/src/components/Metrics/__snapshots__/Metrics.test.js.snap b/src/components/Metrics/__snapshots__/Metrics.test.js.snap index cdddf00..1611228 100644 --- a/src/components/Metrics/__snapshots__/Metrics.test.js.snap +++ b/src/components/Metrics/__snapshots__/Metrics.test.js.snap @@ -1,19 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders correctly 1`] = ` -
-
- Duration -
-
+ + 0 ms -
-
+ + `; diff --git a/src/components/Query/Query.js b/src/components/Query/Query.js index dd318b9..0a9f58e 100644 --- a/src/components/Query/Query.js +++ b/src/components/Query/Query.js @@ -1,6 +1,4 @@ import React from 'react' -import { withRouter } from 'react-router' -import Button from '../Button/Button' const codeStyle = { fontFamily: 'monospace', @@ -8,20 +6,11 @@ const codeStyle = { backgroundColor: 'rgba(248, 248, 255, 1)', overflowX: 'auto', width: '100%', -} - -const buttonStyle = { marginBottom: '20px', } const Query = ({ query, history, location, isActive }) => ( - +
{query._source.graphql}
) -export default withRouter(Query) +export default Query diff --git a/src/components/Query/__snapshots__/Query.test.js.snap b/src/components/Query/__snapshots__/Query.test.js.snap index 824caca..883594b 100644 --- a/src/components/Query/__snapshots__/Query.test.js.snap +++ b/src/components/Query/__snapshots__/Query.test.js.snap @@ -2,26 +2,17 @@ exports[`renders correctly 1`] = `
-
- {allLocations(search: "Boulder")}) -
+ {allLocations(search: "Boulder")})
-`; +`