phobos_checkpoint_ui 0.4.0 → 1.0.0.rc1

data/frontend/src/components/search-input/index.spec.js

@@ -27,11 +27,11 @@ describe('<SearchInput />', () => {
     store = mockStore({})
 
     props = {
-      onSearch: jasmine.createSpy('onSearch'),
       onChangeFilterType: jasmine.createSpy('onChangeFilterType'),
       onChangeFilterValue: jasmine.createSpy('onChangeFilterValue'),
-      isFetchingEvents: false,
+      triggerSearch: jasmine.createSpy('triggerSearch'),
 
+      isFetchingEvents: false,
       filterType: 'entity_id',
       filterValue: '12345'
     }
@@ -44,13 +44,13 @@ describe('<SearchInput />', () => {
     expect(props.onChangeFilterValue).toHaveBeenCalledWith('new-value')
   })
 
-  it('calls onSearch when ENTER is pressed in the textfield', () => {
+  it('calls triggerSearch when ENTER is pressed in the textfield', () => {
     component.find('input').simulate('keyDown', { keyCode: ENTER_KEY })
-    expect(props.onSearch).toHaveBeenCalled()
+    expect(props.triggerSearch).toHaveBeenCalled()
   })
 
-  it('calls onSearch when the search button is pressed', () => {
+  it('calls triggerSearch when the search button is pressed', () => {
     component.find('button').simulate('click')
-    expect(props.onSearch).toHaveBeenCalled()
+    expect(props.triggerSearch).toHaveBeenCalled()
   })
 })

data/frontend/src/reducers/events.js

@@ -1,7 +1,7 @@
 import {
   EVENT_SHOW_OVERVIEW,
   EVENT_HIDE_OVERVIEW,
-  RECEIVE_SEARCH_RESULTS,
+  RECEIVE_EVENTS_SEARCH_RESULTS,
   EVENT_SHOW_RETRY,
   EVENT_HIDE_RETRY,
   RECEIVE_EVENT_RETRY,
@@ -25,7 +25,7 @@ export default (state = [], action) => {
     case EVENT_HIDE_OVERVIEW:
       return patchEvent(state, action, { overviewVisible: false, error: null })
 
-    case RECEIVE_SEARCH_RESULTS:
+    case RECEIVE_EVENTS_SEARCH_RESULTS:
       return action.offset <= 0
         ? action.events
         : state.concat(action.events)

data/frontend/src/reducers/events.spec.js

@@ -1,7 +1,7 @@
 import {
   EVENT_SHOW_OVERVIEW,
   EVENT_HIDE_OVERVIEW,
-  RECEIVE_SEARCH_RESULTS,
+  RECEIVE_EVENTS_SEARCH_RESULTS,
   EVENT_SHOW_RETRY,
   EVENT_HIDE_RETRY,
   RECEIVE_EVENT_RETRY,
@@ -29,11 +29,11 @@ describe('reducers/events', () => {
     })
   })
 
-  describe('for RECEIVE_SEARCH_RESULTS', () => {
+  describe('for RECEIVE_EVENTS_SEARCH_RESULTS', () => {
     describe('when offset less or equal to 0', () => {
       it('overrides events with action events', () => {
         const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
-        const action = { type: RECEIVE_SEARCH_RESULTS, offset: 0, events: [{ id: 4 }] }
+        const action = { type: RECEIVE_EVENTS_SEARCH_RESULTS, offset: 0, events: [{ id: 4 }] }
         const expectedState = [{ id: 4 }]
         expect(reducer(currentState, action)).toEqual(expectedState)
       })
@@ -42,7 +42,7 @@ describe('reducers/events', () => {
     describe('when offset is greater than 0', () => {
       it('add the new events to state', () => {
         const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
-        const action = { type: RECEIVE_SEARCH_RESULTS, offset: 1, events: [{ id: 4 }] }
+        const action = { type: RECEIVE_EVENTS_SEARCH_RESULTS, offset: 1, events: [{ id: 4 }] }
         const expectedState = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
         expect(reducer(currentState, action)).toEqual(expectedState)
       })

data/frontend/src/reducers/failures/details/index.js

@@ -0,0 +1,32 @@
+import {
+  FAILURE_SHOW_RETRY,
+  FAILURE_HIDE_RETRY,
+  FAILURE_HIDE_OVERVIEW,
+  RECEIVE_FAILURE_DETAILS
+} from 'actions'
+
+function patchFailure (state, action, params) {
+  if (state.id === action.failure.id) {
+    return Object.assign(state, params)
+  }
+  return state
+}
+
+export default (state = {}, action) => {
+  switch (action.type) {
+    case FAILURE_SHOW_RETRY:
+      return patchFailure(state, action, { retryVisible: true })
+
+    case FAILURE_HIDE_RETRY:
+      return patchFailure(state, action, { retryVisible: false })
+
+    case FAILURE_HIDE_OVERVIEW:
+      return {}
+
+    case RECEIVE_FAILURE_DETAILS:
+      return action.failure
+
+    default:
+      return state
+  }
+}

data/frontend/src/reducers/failures/details/index.spec.js

@@ -0,0 +1,54 @@
+import {
+  FAILURE_SHOW_RETRY,
+  FAILURE_HIDE_RETRY,
+  FAILURE_HIDE_OVERVIEW,
+  RECEIVE_FAILURE_DETAILS
+} from 'actions'
+
+import reducer from 'reducers/failures/details'
+
+describe('reducers/failures/details', () => {
+  describe('for FAILURE_SHOW_RETRY', () => {
+    it('sets retryVisible to true', () => {
+      const currentState = { id: 1 }
+      const action = { type: FAILURE_SHOW_RETRY, failure: { id: 1 } }
+      const expectedState = { id: 1, retryVisible: true }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for FAILURE_HIDE_RETRY', () => {
+    it('sets retryVisible to false', () => {
+      const currentState = { id: 1 }
+      const action = { type: FAILURE_HIDE_RETRY, failure: { id: 1 } }
+      const expectedState = { id: 1, retryVisible: false }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for FAILURE_HIDE_OVERVIEW', () => {
+    it('erases the state', () => {
+      const currentState = { id: 1 }
+      const action = { type: FAILURE_HIDE_OVERVIEW, failure: { id: 1 } }
+      const expectedState = { }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_FAILURE_DETAILS', () => {
+    it('replaces the state', () => {
+      const currentState = { id: 1 }
+      const action = { type: RECEIVE_FAILURE_DETAILS, failure: { id: 2 } }
+      const expectedState = { id: 2 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for default', () => {
+    it('returns the currentState', () => {
+      const currentState = { current: true }
+      const action = { type: 'another' }
+      expect(reducer(currentState, action)).toEqual(currentState)
+    })
+  })
+})

data/frontend/src/reducers/failures/index.js

@@ -0,0 +1,48 @@
+import {
+  FAILURE_SHOW_OVERVIEW,
+  FAILURE_HIDE_OVERVIEW,
+  RECEIVE_FAILURES_SEARCH_RESULTS,
+  FAILURE_SHOW_RETRY,
+  FAILURE_HIDE_RETRY,
+  RECEIVE_FAILURE_RETRY,
+  REQUEST_FAILURE_RETRY_FAILED
+} from 'actions'
+
+function patchFailure (state, action, params) {
+  return state.map((failure) => {
+    if (failure.id === action.failure.id) {
+      return Object.assign({}, failure, params)
+    }
+    return failure
+  })
+}
+
+export default (state = [], action) => {
+  switch (action.type) {
+    case FAILURE_SHOW_OVERVIEW:
+      return patchFailure(state, action, { overviewVisible: true })
+
+    case FAILURE_HIDE_OVERVIEW:
+      return patchFailure(state, action, { overviewVisible: false, error: null })
+
+    case RECEIVE_FAILURES_SEARCH_RESULTS:
+      return action.offset <= 0
+        ? action.failures
+        : state.concat(action.failures)
+
+    case FAILURE_SHOW_RETRY:
+      return patchFailure(state, action, { retryVisible: true })
+
+    case FAILURE_HIDE_RETRY:
+      return patchFailure(state, action, { retryVisible: false, error: null })
+
+    case RECEIVE_FAILURE_RETRY:
+      return patchFailure(state, action, { acknowledged: action.acknowledged, error: null })
+
+    case REQUEST_FAILURE_RETRY_FAILED:
+      return patchFailure(state, action, { error: action.error })
+
+    default:
+      return state
+  }
+}

data/frontend/src/reducers/failures/index.spec.js

@@ -0,0 +1,95 @@
+import {
+  FAILURE_SHOW_OVERVIEW,
+  FAILURE_HIDE_OVERVIEW,
+  RECEIVE_FAILURES_SEARCH_RESULTS,
+  FAILURE_SHOW_RETRY,
+  FAILURE_HIDE_RETRY,
+  RECEIVE_FAILURE_RETRY,
+  REQUEST_FAILURE_RETRY_FAILED
+} from 'actions'
+
+import reducer from 'reducers/failures'
+
+describe('reducers/failures', () => {
+  describe('for FAILURE_SHOW_OVERVIEW', () => {
+    it('sets overviewVisible for the specific event to true', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: FAILURE_SHOW_OVERVIEW, failure: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, overviewVisible: true }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for FAILURE_HIDE_OVERVIEW', () => {
+    it('sets overviewVisible to false and erase errors for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2, overviewVisible: true }, { id: 3 }]
+      const action = { type: FAILURE_HIDE_OVERVIEW, failure: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, overviewVisible: false, error: null }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_FAILURES_SEARCH_RESULTS', () => {
+    describe('when offset less or equal to 0', () => {
+      it('overrides failures with action failures', () => {
+        const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+        const action = { type: RECEIVE_FAILURES_SEARCH_RESULTS, offset: 0, failures: [{ id: 4 }] }
+        const expectedState = [{ id: 4 }]
+        expect(reducer(currentState, action)).toEqual(expectedState)
+      })
+    })
+
+    describe('when offset is greater than 0', () => {
+      it('add the new failures to state', () => {
+        const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+        const action = { type: RECEIVE_FAILURES_SEARCH_RESULTS, offset: 1, failures: [{ id: 4 }] }
+        const expectedState = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
+        expect(reducer(currentState, action)).toEqual(expectedState)
+      })
+    })
+  })
+
+  describe('for FAILURE_SHOW_RETRY', () => {
+    it('sets retryVisible for the specific event to true', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: FAILURE_SHOW_RETRY, failure: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, retryVisible: true }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for FAILURE_HIDE_RETRY', () => {
+    it('sets retryVisible to false and erase errors for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2, retryVisible: true }, { id: 3 }]
+      const action = { type: FAILURE_HIDE_RETRY, failure: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, retryVisible: false, error: null }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_FAILURE_RETRY', () => {
+    it('sets acknowledged and erase errors for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: RECEIVE_FAILURE_RETRY, failure: { id: 2 }, acknowledged: true }
+      const expectedState = [{ id: 1 }, { id: 2, acknowledged: true, error: null }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_FAILURE_RETRY_FAILED', () => {
+    it('sets error for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: REQUEST_FAILURE_RETRY_FAILED, failure: { id: 2 }, error: 'some error' }
+      const expectedState = [{ id: 1 }, { id: 2, error: 'some error' }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for default', () => {
+    it('returns the currentState', () => {
+      const currentState = { current: true }
+      const action = { type: 'another' }
+      expect(reducer(currentState, action)).toEqual(currentState)
+    })
+  })
+})

data/frontend/src/reducers/index.js

@@ -2,7 +2,9 @@ import { combineReducers } from 'redux'
 import { routerReducer } from 'react-router-redux'
 
 import events from 'reducers/events'
+import failures from 'reducers/failures'
 import eventDetails from 'reducers/event-details'
+import failureDetails from 'reducers/failures/details'
 import eventsFilters from 'reducers/events-filters'
 import xhrStatus from 'reducers/xhr-status'
 import flashMessages from 'reducers/flash-messages'
@@ -12,7 +14,8 @@ export default combineReducers({
   flashMessages,
   eventsFilters,
   eventDetails,
+  failureDetails,
   events,
-
+  failures,
   routing: routerReducer
 })

data/frontend/src/reducers/index.spec.js

@@ -13,7 +13,9 @@ describe('reducers', () => {
       flashMessages: [],
       eventsFilters: { type: 'entity_id' },
       eventDetails: {},
+      failureDetails: {},
       events: [],
+      failures: [],
       routing: { locationBeforeTransitions: null }
     })
   })

data/frontend/src/reducers/xhr-status.js

@@ -1,9 +1,14 @@
 import {
-  REQUEST_SEARCH_RESULTS,
-  RECEIVE_SEARCH_RESULTS,
-  REQUEST_SEARCH_RESULTS_FAILED,
-  LOAD_MORE_SEARCH_RESULTS,
-  TRIGGER_SEARCH,
+  REQUEST_EVENTS_SEARCH_RESULTS,
+  RECEIVE_EVENTS_SEARCH_RESULTS,
+  REQUEST_EVENTS_SEARCH_RESULTS_FAILED,
+  LOAD_MORE_EVENTS_SEARCH_RESULTS,
+  TRIGGER_EVENTS_SEARCH,
+  REQUEST_FAILURES_SEARCH_RESULTS,
+  RECEIVE_FAILURES_SEARCH_RESULTS,
+  REQUEST_FAILURES_SEARCH_RESULTS_FAILED,
+  LOAD_MORE_FAILURES_SEARCH_RESULTS,
+  TRIGGER_FAILURES_SEARCH,
   REQUEST_EVENT_RETRY,
   RECEIVE_EVENT_RETRY,
   REQUEST_EVENT_RETRY_FAILED,
@@ -21,29 +26,39 @@ const initialState = {
 
 export default (state = initialState, action) => {
   switch (action.type) {
-    case TRIGGER_SEARCH:
+    case TRIGGER_FAILURES_SEARCH:
+    case TRIGGER_EVENTS_SEARCH:
       return Object.assign({}, state, {
         currentEventsOffset: 0,
         lastEventsLoadSize: 0
       })
 
-    case REQUEST_SEARCH_RESULTS:
+    case REQUEST_FAILURES_SEARCH_RESULTS:
+    case REQUEST_EVENTS_SEARCH_RESULTS:
       return Object.assign({}, state, {
         isFetchingEvents: true
       })
 
-    case RECEIVE_SEARCH_RESULTS:
+    case RECEIVE_FAILURES_SEARCH_RESULTS:
+      return Object.assign({}, state, {
+        isFetchingEvents: false,
+        lastEventsLoadSize: action.failures.length
+      })
+
+    case RECEIVE_EVENTS_SEARCH_RESULTS:
       return Object.assign({}, state, {
         isFetchingEvents: false,
         lastEventsLoadSize: action.events.length
       })
 
-    case REQUEST_SEARCH_RESULTS_FAILED:
+    case REQUEST_FAILURES_SEARCH_RESULTS_FAILED:
+    case REQUEST_EVENTS_SEARCH_RESULTS_FAILED:
       return Object.assign({}, state, {
         isFetchingEvents: false
       })
 
-    case LOAD_MORE_SEARCH_RESULTS:
+    case LOAD_MORE_FAILURES_SEARCH_RESULTS:
+    case LOAD_MORE_EVENTS_SEARCH_RESULTS:
       return Object.assign({}, state, {
         currentEventsOffset: action.offset
       })

data/frontend/src/reducers/xhr-status.spec.js

@@ -1,9 +1,14 @@
 import {
-  TRIGGER_SEARCH,
-  REQUEST_SEARCH_RESULTS,
-  RECEIVE_SEARCH_RESULTS,
-  REQUEST_SEARCH_RESULTS_FAILED,
-  LOAD_MORE_SEARCH_RESULTS,
+  TRIGGER_EVENTS_SEARCH,
+  REQUEST_EVENTS_SEARCH_RESULTS,
+  RECEIVE_EVENTS_SEARCH_RESULTS,
+  REQUEST_EVENTS_SEARCH_RESULTS_FAILED,
+  LOAD_MORE_EVENTS_SEARCH_RESULTS,
+  TRIGGER_FAILURES_SEARCH,
+  REQUEST_FAILURES_SEARCH_RESULTS,
+  RECEIVE_FAILURES_SEARCH_RESULTS,
+  REQUEST_FAILURES_SEARCH_RESULTS_FAILED,
+  LOAD_MORE_FAILURES_SEARCH_RESULTS,
   REQUEST_EVENT_RETRY,
   RECEIVE_EVENT_RETRY,
   REQUEST_EVENT_RETRY_FAILED
@@ -12,46 +17,91 @@ import {
 import reducer from 'reducers/xhr-status'
 
 describe('reducers/xhr-status', () => {
-  describe('for TRIGGER_SEARCH', () => {
+  describe('for TRIGGER_EVENTS_SEARCH', () => {
     it('resets currentEventsOffset and lastEventsLoadSize', () => {
       const currentState = { currentEventsOffset: 5, lastEventsLoadSize: 10 }
-      const action = { type: TRIGGER_SEARCH }
+      const action = { type: TRIGGER_EVENTS_SEARCH }
       const expectedState = { currentEventsOffset: 0, lastEventsLoadSize: 0 }
       expect(reducer(currentState, action)).toEqual(expectedState)
     })
   })
 
-  describe('for REQUEST_SEARCH_RESULTS', () => {
+  describe('for TRIGGER_FAILURES_SEARCH', () => {
+    it('resets currentEventsOffset and lastEventsLoadSize', () => {
+      const currentState = { currentEventsOffset: 5, lastEventsLoadSize: 10 }
+      const action = { type: TRIGGER_FAILURES_SEARCH }
+      const expectedState = { currentEventsOffset: 0, lastEventsLoadSize: 0 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_EVENTS_SEARCH_RESULTS', () => {
+    it('enables isFetchingEvents', () => {
+      const currentState = { isFetchingEvents: false }
+      const action = { type: REQUEST_EVENTS_SEARCH_RESULTS }
+      const expectedState = { isFetchingEvents: true }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_FAILURES_SEARCH_RESULTS', () => {
     it('enables isFetchingEvents', () => {
       const currentState = { isFetchingEvents: false }
-      const action = { type: REQUEST_SEARCH_RESULTS }
+      const action = { type: REQUEST_FAILURES_SEARCH_RESULTS }
       const expectedState = { isFetchingEvents: true }
       expect(reducer(currentState, action)).toEqual(expectedState)
     })
   })
 
-  describe('for RECEIVE_SEARCH_RESULTS', () => {
+  describe('for RECEIVE_EVENTS_SEARCH_RESULTS', () => {
     it('disables isFetchingEvents and keep the load size', () => {
       const currentState = { isFetchingEvents: true }
-      const action = { type: RECEIVE_SEARCH_RESULTS, events: ['A', 'B', 'C'] }
+      const action = { type: RECEIVE_EVENTS_SEARCH_RESULTS, events: ['A', 'B', 'C'] }
       const expectedState = { isFetchingEvents: false, lastEventsLoadSize: 3 }
       expect(reducer(currentState, action)).toEqual(expectedState)
     })
   })
 
-  describe('for REQUEST_SEARCH_RESULTS_FAILED', () => {
+  describe('for RECEIVE_FAILURES_SEARCH_RESULTS', () => {
+    it('disables isFetchingEvents and keep the load size', () => {
+      const currentState = { isFetchingEvents: true }
+      const action = { type: RECEIVE_FAILURES_SEARCH_RESULTS, failures: ['A', 'B', 'C'] }
+      const expectedState = { isFetchingEvents: false, lastEventsLoadSize: 3 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_EVENTS_SEARCH_RESULTS_FAILED', () => {
     it('disables isFetchingEvents', () => {
       const currentState = { isFetchingEvents: true }
-      const action = { type: REQUEST_SEARCH_RESULTS_FAILED }
+      const action = { type: REQUEST_EVENTS_SEARCH_RESULTS_FAILED }
       const expectedState = { isFetchingEvents: false }
       expect(reducer(currentState, action)).toEqual(expectedState)
     })
   })
 
-  describe('for LOAD_MORE_SEARCH_RESULTS', () => {
+  describe('for REQUEST_FAILURES_SEARCH_RESULTS_FAILED', () => {
+    it('disables isFetchingEvents', () => {
+      const currentState = { isFetchingEvents: true }
+      const action = { type: REQUEST_FAILURES_SEARCH_RESULTS_FAILED }
+      const expectedState = { isFetchingEvents: false }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for LOAD_MORE_EVENTS_SEARCH_RESULTS', () => {
+    it('updates currentEventsOffset', () => {
+      const currentState = { currentEventsOffset: 0 }
+      const action = { type: LOAD_MORE_EVENTS_SEARCH_RESULTS, offset: 3 }
+      const expectedState = { currentEventsOffset: 3 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for LOAD_MORE_FAILURES_SEARCH_RESULTS', () => {
     it('updates currentEventsOffset', () => {
       const currentState = { currentEventsOffset: 0 }
-      const action = { type: LOAD_MORE_SEARCH_RESULTS, offset: 3 }
+      const action = { type: LOAD_MORE_FAILURES_SEARCH_RESULTS, offset: 3 }
       const expectedState = { currentEventsOffset: 3 }
       expect(reducer(currentState, action)).toEqual(expectedState)
     })

data/frontend/src/routes.js

@@ -4,8 +4,10 @@ import { syncHistoryWithStore } from 'react-router-redux'
 
 import store from 'store'
 import Layout from 'views/layout'
-import EventsSearch from 'views/events-search'
-import EventDetails from 'views/event-details'
+import EventsSearch from 'views/events/search'
+import EventDetails from 'views/events/details'
+import FailuresSearch from 'views/failures/search'
+import FailureDetails from 'views/failures/details'
 
 export const history = syncHistoryWithStore(browserHistory, store)
 
@@ -15,6 +17,8 @@ export default (
       <IndexRedirect to='/events' />
       <Route path='/events' component={EventsSearch} />
       <Route path='/events/:id' component={EventDetails} />
+      <Route path='/failures' component={FailuresSearch} />
+      <Route path='/failures/:id' component={FailureDetails} />
     </Route>
   </Router>
 )

data/frontend/src/store.js

@@ -1,13 +1,17 @@
 import { createStore, applyMiddleware, compose } from 'redux'
+import { routerMiddleware } from 'react-router-redux'
+import { browserHistory } from 'react-router'
 import thunkMiddleware from 'redux-thunk'
 
-import reducer from 'reducers'
+import reducers from 'reducers'
+
+const browserMiddleware = routerMiddleware(browserHistory)
 
 const store = createStore(
-  reducer,
+  reducers,
   {}, // initial state
   compose(
-    applyMiddleware(thunkMiddleware), // for async actions
+    applyMiddleware(thunkMiddleware, browserMiddleware), // for async actions
     window.devToolsExtension ? window.devToolsExtension() : (f) => f
   )
 )