Add very basic analytics frontend

README.md

@@ -84,17 +84,20 @@ Defaults:
 }
 ```
 
-## Configuring aggregations
+## Configuring elastic mappings
 
-Before constructing the aggregations, you will need to run the following against your elasticsearch instance.
+Before constructing the aggregations, you will need to run the following against your elasticsearch instance. Replace `graphql_test` with the name of the index you will use in your app.
 
 ```
-PUT graphql/_mapping/graphql?update_all_types
+PUT graphql_test
+{}
+
+PUT graphql_test/_mapping/graphql
 {
   "properties": {
     "rootQuery": {
-      "type":     "text",
-      "fielddata": true
+      "type": "keyword",
+      "index": true
     }
   }
 }

package.json

@@ -9,10 +9,18 @@
   },
   "repository": "git@github.com:kiwicom/graphql-optics.git",
   "dependencies": {
+    "classnames": "^2.2.5",
+    "css-loader": "^0.28.11",
     "elasticsearch-browser": "^14.2.2",
+    "identity-obj-proxy": "^3.0.0",
+    "prismjs": "^1.14.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-redux": "^5.0.7",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-syntax-highlighter-prismjs": "^5.9.0",
+    "style-loader": "^0.21.0",
     "styled-jsx": "^2.2.6",
     "webpack": "^4.6.0",
     "webpack-cli": "^2.0.15",
@@ -40,5 +48,11 @@
     "html-webpack-plugin": "^3.2.0",
     "jest": "^22.4.3",
     "react-test-renderer": "^16.3.2"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css)$": "identity-obj-proxy"
+    },
+    "testRegex": ".*\\.test\\.js$"
   }
 }

packages/tracer/webpack.config.js

@@ -1,14 +1,11 @@
 // @flow
 
-const path = require('path');
-
-const appDirectory = __dirname;
+const path = require('path')
 
 module.exports = () => ({
-  context: appDirectory,
   entry: './src/tracer.js',
   output: {
-    path: path.resolve(appDirectory, 'dist'),
+    path: path.resolve(__dirname, 'dist'),
     filename: 'index.js',
     libraryTarget: 'commonjs2',
   },
@@ -21,8 +18,8 @@ module.exports = () => ({
           babelrc: true,
         },
         include: [
-          path.resolve(appDirectory, 'config'),
-          path.resolve(appDirectory, 'src'),
+          path.resolve(__dirname, 'config'),
+          path.resolve(__dirname, 'src'),
         ],
       },
       {
@@ -32,4 +29,4 @@ module.exports = () => ({
     ],
   },
   target: 'node',
-});
+})

packages/tracer/yarn.lock

@@ -2449,8 +2449,8 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0, fsevents@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.0.tgz#e11a5ff285471e4cc43ab9cd09bb7986c565dcdc"
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.2.tgz#4f598f0f69b273188ef4a62ca4e9e08ace314bbf"
   dependencies:
     nan "^2.9.2"
     node-pre-gyp "^0.9.0"
@@ -3798,8 +3798,8 @@ lodash@2.4.2:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"
 
 lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
-  version "4.17.5"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
 log-symbols@^1.0.2:
   version "1.0.2"

src/App.js

@@ -1,10 +1,32 @@
 import React from 'react'
-import AggregationList from './AggregationList'
+import { Route, withRouter, matchPath } from 'react-router-dom'
 import server from './server'
+
+import Aggregation from './components/Aggregation/Aggregation'
+import DataColumn from './components/DataColumn/DataColumn'
+import ColumnLayout from './components/ColumnLayout/ColumnLayout'
+import Query from './components/Query/Query'
+import Metrics from './components/Metrics/Metrics'
+
 import config from './config.json'
+import './styles/globals.css'
+
+const aggPath = '/:_?/:rootQuery?'
+const queryPath = '/aggregations/:rootQuery/:queryId?'
+const metricsPath = '/aggregations/:rootQuery/:queryId'
 
 class App extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      aggregations: [],
+      queries: {},
+    }
+  }
+
   loadAggregations() {
+    if (this.state.aggregations.length) return
+
     server
       .search({
         index: config.elastic_index,
@@ -26,28 +48,99 @@ class App extends React.Component {
       })
   }
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      aggregations: [],
-    }
+  loadQueries() {
+    const match = matchPath(this.props.location.pathname, { path: queryPath })
+    if (!match) return
+    const rootQuery = match.params.rootQuery
+    const query = this.state.queries[rootQuery]
+    if (query) return
+
+    server
+      .search({
+        index: config.elastic_index,
+        body: {
+          query: {
+            match: {
+              rootQuery,
+            },
+          },
+        },
+      })
+      .then(data => {
+        this.setState({
+          queries: {
+            ...this.state.queries,
+            [rootQuery]: data.hits.hits,
+          },
+        })
+      })
   }
 
-  componentDidMount() {
+  loadData() {
     this.loadAggregations()
+    this.loadQueries()
+  }
+
+  componentDidUpdate() {
+    this.loadData()
+  }
+
+  componentDidMount() {
+    this.loadData()
   }
 
   render() {
     return (
-      <div>
-        <h1>graphql-optics</h1>
-        <div>
-          <h2>Aggregations</h2>
-          <AggregationList aggregations={this.state.aggregations} />
-        </div>
-      </div>
+      <ColumnLayout>
+        <Route
+          path={aggPath}
+          render={({ match }) => (
+            <DataColumn>
+              {this.state.aggregations.map(aggregation => (
+                <Aggregation
+                  key={aggregation.key}
+                  aggregation={aggregation}
+                  isActive={match.params.rootQuery === aggregation.key}
+                />
+              ))}
+            </DataColumn>
+          )}
+        />
+        <Route
+          path={queryPath}
+          render={({ match, location }) => {
+            const queries = this.state.queries[match.params.rootQuery]
+            return (
+              <DataColumn>
+                {queries
+                  ? queries.map(query => (
+                      <Query
+                        key={query._id}
+                        query={query}
+                        isActive={match.params.queryId === query._id}
+                      />
+                    ))
+                  : 'loading...'}
+              </DataColumn>
+            )
+          }}
+        />
+        <Route
+          path={metricsPath}
+          render={({ match }) => {
+            const queries = this.state.queries[match.params.rootQuery]
+            if (!queries) return 'loading...'
+            const trace = queries.find(t => t._id === match.params.queryId)
+            return (
+              <DataColumn>
+                {trace ? <Metrics trace={trace} /> : 'loading...'}
+              </DataColumn>
+            )
+          }}
+        />
+      </ColumnLayout>
     )
   }
 }
 
-export default App
+export default withRouter(App)

src/__tests__/App.test.js

@@ -1,6 +1,7 @@
 import React from 'react'
+import { renderWithRouter } from './helpers'
 import App from '../App'
-import renderer from 'react-test-renderer'
+
 import config from '../config.json'
 
 jest.mock('../server', () => {
@@ -21,32 +22,42 @@ jest.mock('../server', () => {
 
   const _search_spy = jest.fn()
 
+  const aggsResponse = {
+    aggregations: {
+      rootQueries: {
+        buckets: data,
+      },
+    },
+  }
+  const queriesResponse = {
+    hits: {
+      hits: [{ _id: 'uuid', _source: { graphql: 'allLocations...' } }],
+    },
+  }
+
   return {
     search: query => {
       _search_spy(query)
       return {
-        then: fn =>
-          fn({
-            aggregations: {
-              rootQueries: {
-                buckets: data,
-              },
-            },
-          }),
+        then: fn => fn(query.body.aggs ? aggsResponse : queriesResponse),
       }
     },
     _search_spy,
   }
 })
 
+afterEach(() => {
+  jest.resetAllMocks()
+})
+
 describe('App', () => {
   it('renders correctly (after data is returned from server)', () => {
-    const tree = renderer.create(<App />).toJSON()
+    const tree = renderWithRouter({ children: <App /> })
     expect(tree).toMatchSnapshot()
   })
 
   it('requests aggregation list using the correct query', () => {
-    const tree = renderer.create(<App />).toJSON()
+    const tree = renderWithRouter({ children: <App /> })
     const server = require.requireMock('../server')
     expect(server._search_spy).toHaveBeenCalledWith({
       index: config.elastic_index,
@@ -62,4 +73,22 @@ describe('App', () => {
       },
     })
   })
+
+  it('requests query list using the rootQuery route param', () => {
+    const tree = renderWithRouter({
+      children: <App />,
+      location: '/aggregations/allLocations',
+    })
+    const server = require.requireMock('../server')
+    expect(server._search_spy.mock.calls[1][0]).toEqual({
+      index: config.elastic_index,
+      body: {
+        query: {
+          match: {
+            rootQuery: 'allLocations',
+          },
+        },
+      },
+    })
+  })
 })