Swap metrics and query columns

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 {
           )}
         />
         <Route
-          path={queryPath}
+          path={metricsPath}
           render={({ match, location }) => {
             const queries = this.state.queries[match.params.rootQuery]
             return (
               <DataColumn>
                 {queries
                   ? queries.map(query => (
-                      <Query
+                      <Metrics
                         key={query._id}
-                        query={query}
+                        trace={query}
                         isActive={match.params.queryId === query._id}
                       />
                     ))
@@ -126,14 +135,16 @@ class App extends React.Component {
           }}
         />
         <Route
-          path={metricsPath}
+          path={queryPath}
           render={({ match }) => {
             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 (
               <DataColumn>
-                {trace ? <Metrics trace={trace} /> : 'loading...'}
+                {query ? <Query query={query} /> : 'loading...'}
               </DataColumn>
             )
           }}

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',

src/__tests__/__snapshots__/App.test.js.snap

@@ -28,9 +28,18 @@ exports[`App renders correctly (after data is returned from server) 1`] = `
         }
       }
     >
-      allLocations
-       - 
-      442
+      <span
+        style={
+          Object {
+            "flexGrow": 1,
+          }
+        }
+      >
+        allLocations
+      </span>
+      <span>
+        442
+      </span>
     </div>
     <div
       className="button"
@@ -41,9 +50,18 @@ exports[`App renders correctly (after data is returned from server) 1`] = `
         }
       }
     >
-      allFlights
-       - 
-      3342
+      <span
+        style={
+          Object {
+            "flexGrow": 1,
+          }
+        }
+      >
+        allFlights
+      </span>
+      <span>
+        3342
+      </span>
     </div>
     <div
       className="button"
@@ -54,10 +72,19 @@ exports[`App renders correctly (after data is returned from server) 1`] = `
         }
       }
     >
-      allWhatever
-       - 
-      2
+      <span
+        style={
+          Object {
+            "flexGrow": 1,
+          }
+        }
+      >
+        allWhatever
+      </span>
+      <span>
+        2
+      </span>
     </div>
   </div>
 </div>
-`;
+`

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}
+    <span style={{ flexGrow: 1 }}>{aggregation.key}</span>
+    <span>{aggregation.doc_count}</span>
   </Button>
 )
 

src/components/Aggregation/__snapshots__/Aggregation.test.js.snap

@@ -10,8 +10,17 @@ exports[`renders correctly 1`] = `
     }
   }
 >
-  allLocations
-   - 
-  6
+  <span
+    style={
+      Object {
+        "flexGrow": 1,
+      }
+    }
+  >
+    allLocations
+  </span>
+  <span>
+    6
+  </span>
 </div>
-`;
+`

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 }) => (
-  <dl style={style}>
-    <dt>Duration</dt>
-    <dd>{parseInt(trace._source.metrics.duration / 10 ** 6)} ms</dd>
-  </dl>
+const Metrics = ({ trace, isActive, history }) => (
+  <Button
+    style={buttonStyle}
+    isActive={isActive}
+    onClick={() =>
+      history.push(`/aggregations/${trace._source.rootQuery}/${trace._id}`)
+    }
+  >
+    <span style={{ flexGrow: 1 }}>{trace._source.rootQuery}</span>
+    <span>{parseInt(trace._source.metrics.duration / 10 ** 6)} ms</span>
+  </Button>
 )
+
+export default withRouter(Metrics)

src/components/Metrics/Metrics.test.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import Metrics from './Metrics'
-import renderer from 'react-test-renderer'
+import { renderWithRouter } from '../../__tests__/helpers'
 
 it('renders correctly', () => {
   const data = {
     _source: {
       metrics: { duration: 1 },
     },
   }
-  const tree = renderer.create(<Metrics trace={data} />).toJSON()
+  const tree = renderWithRouter({ children: <Metrics trace={data} /> })
   expect(tree).toMatchSnapshot()
 })

src/components/Metrics/__snapshots__/Metrics.test.js.snap

@@ -1,19 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<dl
+<div
+  className="button"
+  onClick={[Function]}
   style={
     Object {
       "fontFamily": "sans-serif",
     }
   }
 >
-  <dt>
-    Duration
-  </dt>
-  <dd>
+  <span
+    style={
+      Object {
+        "flexGrow": 1,
+      }
+    }
+  />
+  <span>
     0
      ms
-  </dd>
-</dl>
+  </span>
+</div>
 `;

src/components/Query/Query.js

@@ -1,27 +1,16 @@
 import React from 'react'
-import { withRouter } from 'react-router'
-import Button from '../Button/Button'
 
 const codeStyle = {
   fontFamily: 'monospace',
   whiteSpace: 'pre',
   backgroundColor: 'rgba(248, 248, 255, 1)',
   overflowX: 'auto',
   width: '100%',
-}
-
-const buttonStyle = {
   marginBottom: '20px',
 }
 
 const Query = ({ query, history, location, isActive }) => (
-  <Button
-    style={buttonStyle}
-    isActive={isActive}
-    onClick={() => history.push(`${location.pathname}/${query._id}`)}
-  >
-    <div style={codeStyle}>{query._source.graphql}</div>
-  </Button>
+  <div style={codeStyle}>{query._source.graphql}</div>
 )
 
-export default withRouter(Query)
+export default Query

src/components/Query/__snapshots__/Query.test.js.snap

@@ -2,26 +2,17 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="button"
-  onClick={[Function]}
   style={
     Object {
+      "backgroundColor": "rgba(248, 248, 255, 1)",
+      "fontFamily": "monospace",
       "marginBottom": "20px",
+      "overflowX": "auto",
+      "whiteSpace": "pre",
+      "width": "100%",
     }
   }
 >
-  <div
-    style={
-      Object {
-        "backgroundColor": "rgba(248, 248, 255, 1)",
-        "fontFamily": "monospace",
-        "overflowX": "auto",
-        "whiteSpace": "pre",
-        "width": "100%",
-      }
-    }
-  >
-    {allLocations(search: "Boulder")})
-  </div>
+  {allLocations(search: "Boulder")})
 </div>
-`;
+`