phobos_checkpoint_ui 1.0.0.rc1 → 1.0.0.rc2

data/frontend/src/components/failure/index.scss

@@ -0,0 +1,15 @@
+.failure {
+  cursor: pointer;
+
+  .failure-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .failure-icon {
+    order: 2;
+    width: 35px !important;
+    height: 35px !important;
+    margin-right: 0 !important;
+  }
+}

data/frontend/src/components/failure/index.spec.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import jasmineEnzyme from 'jasmine-enzyme'
 import { mount } from 'enzyme'
-import { Event, formatEventTime } from 'components/event'
+import { Failure } from 'components/failure'
+import { formatTime } from 'components/event/card-style'
 import getMuiTheme from 'material-ui/styles/getMuiTheme'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import { Provider } from 'react-redux'
@@ -14,12 +15,12 @@ const mockStore = configureMockStore(middlewares)
 const mountComponent = (store, props) => mount(
   <Provider store={store}>
     <MuiThemeProvider muiTheme={getMuiTheme()}>
-      <Event {...props} />
+      <Failure {...props} />
     </MuiThemeProvider>
   </Provider>
 )
 
-describe('<Event />', () => {
+describe('<Failure />', () => {
   let props, component, store, onShowOverview
 
   beforeEach(() => {
@@ -34,7 +35,7 @@ describe('<Event />', () => {
 
     props = {
       onShowOverview: onShowOverview,
-      event: {
+      failure: {
         id: 1,
         topic: 'phobos.test',
         group_id: 'phobos-checkpoint-consumer',
@@ -43,7 +44,11 @@ describe('<Event />', () => {
         event_type: 'order-placed',
         event_version: 'v1',
         checksum: '188773471ec0f898fd81d272760a027f',
-        payload: { data: { name: 'phobos' } }
+        payload: { data: { name: 'phobos' } },
+        metadata: { meta: { version: 'foo' } },
+        error_class: 'FooError',
+        error_message: 'Expected "foo" to equal "bar"',
+        error_backtrace: ['Line 1: foo', 'Line 2: baz']
       }
     }
 
@@ -51,7 +56,7 @@ describe('<Event />', () => {
   })
 
   it('displays event_time formatted', () => {
-    expect(component.text()).toMatch(formatEventTime(props.event.event_time))
+    expect(component.text()).toMatch(formatTime(props.failure.event_time))
   })
 
   it('displays topic', () => {
@@ -63,27 +68,27 @@ describe('<Event />', () => {
   })
 
   describe('when clicked', () => {
-    it('calls onShowOverview with the event', () => {
-      component.find('.event').simulate('click')
-      expect(onShowOverview).toHaveBeenCalledWith(props.event)
+    it('calls onShowOverview with the failure', () => {
+      component.find('.failure').simulate('click')
+      expect(onShowOverview).toHaveBeenCalledWith(props.failure)
     })
   })
 
-  describe('when event has overviewVisible=true', () => {
+  describe('when failure has overviewVisible=true', () => {
     let dialog
     beforeEach(() => {
-      Object.assign(props.event, { overviewVisible: true })
+      Object.assign(props.failure, { overviewVisible: true })
       component = mountComponent(store, props)
-      const dialogs = document.getElementsByClassName('event-overview-dialog')
+      const dialogs = document.getElementsByClassName('failure-overview-dialog')
       dialog = dialogs[dialogs.length - 1]
     })
 
-    it('opens the event overview dialog', () => {
+    it('opens the failure overview dialog', () => {
       expect(dialog).not.toBe(null)
     })
 
     it('displays event_id', () => {
-      expect(dialog.innerText).toMatch(`#${props.event.id}`)
+      expect(dialog.innerText).toMatch(`#${props.failure.id}`)
     })
   })
 })

data/frontend/src/components/{failures-list → failure/list}/failures-list.scss

@@ -42,7 +42,7 @@
       }
     }
 
-    & > .event {
+    & > .failure {
       margin: 10px 10px;
     }
   }

data/frontend/src/components/{failures-list → failure/list}/index.spec.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import jasmineEnzyme from 'jasmine-enzyme'
 import { mount } from 'enzyme'
-import EventsList from 'components/events-list'
+import FailuresList from 'components/failure/list'
 import getMuiTheme from 'material-ui/styles/getMuiTheme'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import { Provider } from 'react-redux'
@@ -14,13 +14,13 @@ const mockStore = configureMockStore(middlewares)
 const mountComponent = (store, props) => mount(
   <Provider store={store}>
     <MuiThemeProvider muiTheme={getMuiTheme()}>
-      <EventsList {...props} />
+      <FailuresList {...props} />
     </MuiThemeProvider>
   </Provider>
 )
 
-describe('<EventsList />', () => {
-  let store, props, component, event
+describe('<FailuresList />', () => {
+  let store, props, component, failure
 
   beforeEach(() => {
     jasmineEnzyme()
@@ -31,7 +31,7 @@ describe('<EventsList />', () => {
       }
     })
 
-    event = {
+    failure = {
       id: 1,
       topic: 'phobos.test',
       group_id: 'phobos-checkpoint-consumer',
@@ -40,20 +40,24 @@ describe('<EventsList />', () => {
       event_type: 'order-placed',
       event_version: 'v1',
       checksum: '188773471ec0f898fd81d272760a027f',
-      payload: { data: { name: 'phobos' } }
+      payload: { data: { name: 'phobos' } },
+      metadata: { meta: { version: 'foo' } },
+      error_class: 'FooError',
+      error_message: 'Expected "foo" to equal "bar"',
+      error_backtrace: ['Line 1: foo', 'Line 2: baz']
     }
 
     props = {
-      events: [
-        event,
-        Object.assign({}, event, { id: 2 })
+      failures: [
+        failure,
+        Object.assign({}, failure, { id: 2 })
       ]
     }
 
     component = mountComponent(store, props)
   })
 
-  it('renders the list of events', () => {
-    expect(component.find('.event').length).toEqual(2)
+  it('renders the list of failures', () => {
+    expect(component.find('.failure').length).toEqual(2)
   })
 })

data/frontend/src/components/failure/overview-dialog/index.js

@@ -9,7 +9,7 @@ import Dialog from 'material-ui/Dialog'
 import RaisedButton from 'material-ui/RaisedButton'
 import FailureOverview from 'components/failure/overview'
 
-class OverviewDialog extends Component {
+class FailureOverviewDialog extends Component {
   static get propTypes () {
     return {
       onHideOverview: PropTypes.func,
@@ -46,7 +46,7 @@ class OverviewDialog extends Component {
       <Dialog
         modal={false}
         autoScrollBodyContent
-        className='failures/overview-dialog'
+        className='failure-overview-dialog'
         title={this.dialogTitle()}
         open={!!this.props.failure.overviewVisible}
         onRequestClose={() => this.hideOverview()}
@@ -54,7 +54,7 @@ class OverviewDialog extends Component {
         bodyStyle={{maxWidth: '1024px'}}
         actions={[
           <RaisedButton
-            secondary
+            primary
             label='Retry'
             onClick={() => this.showRetry()}/>
         ]}>
@@ -87,4 +87,4 @@ export default connect(
     onHideOverview: hideFailureOverview,
     onShowRetry: showFailureRetry
   }
-)(OverviewDialog)
+)(FailureOverviewDialog)

data/frontend/src/components/failure/retry-dialog/index.js

@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 
-import ErrorMessage from 'components/event/error-message'
 import Loading from 'components/event/loading'
 
 import { hideFailureRetry, performFailureRetry } from 'actions/failures/retry'
@@ -24,7 +23,7 @@ class FailureRetryDialog extends Component {
 
   static get defaultProps () {
     return {
-      event: {}
+      failure: {}
     }
   }
 
@@ -32,7 +31,7 @@ class FailureRetryDialog extends Component {
     return (
       <Dialog
         modal={!!this.props.isRetryingEvent}
-        title='Are you sure?'
+        title={this.renderTitle()}
         open={!!this.props.failure.retryVisible}
         bodyStyle={{maxWidth: '300px'}}
         contentStyle={{maxWidth: '300px'}}
@@ -41,16 +40,23 @@ class FailureRetryDialog extends Component {
           <RaisedButton
             primary
             label='Retry'
+            disabled={this.props.isRetryingEvent}
             onClick={() => this.performRetry()}/>
         ]}>
         <div style={{textAlign: 'center'}}>
           <Loading visible={this.props.isRetryingEvent}/>
-          <ErrorMessage message={this.props.failure.error}/>
         </div>
       </Dialog>
     )
   }
 
+  renderTitle () {
+    if (this.props.isRetryingEvent) {
+      return 'Retrying failure...'
+    }
+    return 'Are you sure?'
+  }
+
   hide () {
     this.props.onHideRetry(this.props.failure)
   }
@@ -60,11 +66,10 @@ class FailureRetryDialog extends Component {
   }
 }
 
-const mapStateToProps = (state, ownProps) => (
-  Object.assign({
-    isRetryingEvent: state.xhrStatus.isRetryingEvent
-  }, ownProps)
-)
+const mapStateToProps = (state, ownProps) => ({
+  ...ownProps,
+  isRetryingEvent: state.xhrStatus.isRetryingEvent
+})
 
 export default connect(mapStateToProps, {
   onHideRetry: hideFailureRetry,

data/frontend/src/components/flash-message/flash-message.scss

@@ -13,7 +13,6 @@
   color: #fff;
   font-family: 'Roboto';
   font-size: 20px;
-  max-width: 95%;
 
   .close {
     transition: all ease-in-out 200ms;

data/frontend/src/components/header/header.scss

@@ -1,4 +1,9 @@
 .header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.header--title {
   display: inline-flex;
   align-items: center;
   text-decoration: none;

data/frontend/src/components/header/index.js

@@ -5,27 +5,53 @@ import AppBar from 'material-ui/AppBar'
 import Chip from 'material-ui/Chip'
 import { Link } from 'react-router'
 
-import IconButton from 'material-ui/IconButton'
-import IconMenu from 'material-ui/IconMenu'
+import Menu from 'material-ui/Menu'
 import MenuItem from 'material-ui/MenuItem'
-import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
-import ContentSend from 'material-ui/svg-icons/content/send'
-import ActionAssignment from 'material-ui/svg-icons/action/assignment'
+import EventsIcon from 'material-ui/svg-icons/communication/call-received'
+import FailuresIcon from 'material-ui/svg-icons/communication/call-missed'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import {
+  blueGrey800,
+  cyan500,
+  grey100,
+  grey500,
+  yellowA100
+} from 'material-ui/styles/colors'
 import { navigateTo } from 'actions/navigation'
 
 const DEFAULT_TITLE = 'Phobos Checkpoint'
+const muiTheme = getMuiTheme({
+  palette: {
+    accent1Color: cyan500
+  },
+  ripple: {
+    color: grey100
+  }
+})
 
 const style = {
   bar: {
-    backgroundColor: '#302e3a'
+    backgroundColor: blueGrey800
   },
   title: {
-    color: '#fff',
     fontFamily: 'Roboto',
     fontWeight: 'lighter'
   },
   envLabel: {
-    marginLeft: 30
+    marginLeft: 20,
+    backgroundColor: yellowA100
+  },
+  innerTitle: {
+    marginLeft: 10
+  },
+  menuInner: {
+    display: 'flex'
+  },
+  menuItem: {
+    color: grey500,
+    fontFamily: 'Roboto',
+    fontWeight: 'lighter'
   }
 }
 
@@ -37,15 +63,6 @@ export class Header extends Component {
         showMenuIconButton={false}
         style={style.bar}
         titleStyle={style.title}
-        iconElementRight={
-          <IconMenu
-            iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
-            targetOrigin={{horizontal: 'right', vertical: 'top'}}
-            anchorOrigin={{horizontal: 'right', vertical: 'top'}}>
-            <MenuItem primaryText='Events' leftIcon={<ContentSend />} onTouchTap={() => this.props.navigateTo('/events')} />
-            <MenuItem primaryText='Errors' leftIcon={<ActionAssignment />} onTouchTap={() => this.props.navigateTo('/failures')} />
-          </IconMenu>
-        }
       />
     )
   }
@@ -53,11 +70,34 @@ export class Header extends Component {
   logo () {
     const { title, logo, env_label } = configs()
     return (
-      <Link className='header' to='/'>
-        {logo && <img className='logo' src={logo} />}
-        <span className='title'>{title || DEFAULT_TITLE}</span>
-        <Chip className='env-label' style={style.envLabel}>{env_label}</Chip>
-      </Link>
+      <MuiThemeProvider muiTheme={muiTheme}>
+        <div className='header'>
+          <Link className='header--title' to='/'>
+            {logo && <img className='logo' src={logo} />}
+            <span className='title' style={style.innerTitle}>{title || DEFAULT_TITLE}</span>
+            <Chip className='env-label' style={style.envLabel}>{env_label}</Chip>
+          </Link>
+          <Menu
+            disableAutoFocus
+            value={this.props.routing.locationBeforeTransitions.pathname}
+            listStyle={style.menuInner}>
+            <MenuItem
+              value='/events'
+              style={style.menuItem}
+              primaryText='Events'
+              leftIcon={<EventsIcon />}
+              onTouchTap={() => this.props.navigateTo('/events')}
+            />
+            <MenuItem
+              value='/failures'
+              style={style.menuItem}
+              primaryText='Failures'
+              leftIcon={<FailuresIcon />}
+              onTouchTap={() => this.props.navigateTo('/failures')}
+            />
+          </Menu>
+        </div>
+      </MuiThemeProvider>
     )
   }
 }

data/frontend/src/reducers/event-details.js

@@ -2,23 +2,21 @@ import {
   EVENT_SHOW_RETRY,
   EVENT_HIDE_RETRY,
   EVENT_HIDE_OVERVIEW,
-  RECEIVE_EVENT_DETAILS
+  RECEIVE_EVENT_DETAILS,
+  REQUEST_EVENT_RETRY_FAILED
 } from 'actions'
 
-function patchEvent (state, action, params) {
-  if (state.id === action.event.id) {
-    return Object.assign(state, params)
-  }
-  return state
+function patchEvent (state, params) {
+  return {...state, ...params}
 }
 
 export default (state = {}, action) => {
   switch (action.type) {
     case EVENT_SHOW_RETRY:
-      return patchEvent(state, action, { retryVisible: true })
+      return patchEvent(state, { retryVisible: true })
 
     case EVENT_HIDE_RETRY:
-      return patchEvent(state, action, { retryVisible: false })
+      return patchEvent(state, { retryVisible: false, error: null })
 
     case EVENT_HIDE_OVERVIEW:
       return {}
@@ -26,6 +24,9 @@ export default (state = {}, action) => {
     case RECEIVE_EVENT_DETAILS:
       return action.event
 
+    case REQUEST_EVENT_RETRY_FAILED:
+      return patchEvent(state, { error: action.error })
+
     default:
       return state
   }

data/frontend/src/reducers/event-details.spec.js

@@ -2,7 +2,8 @@ import {
   EVENT_SHOW_RETRY,
   EVENT_HIDE_RETRY,
   EVENT_HIDE_OVERVIEW,
-  RECEIVE_EVENT_DETAILS
+  RECEIVE_EVENT_DETAILS,
+  REQUEST_EVENT_RETRY_FAILED
 } from 'actions'
 
 import reducer from 'reducers/event-details'
@@ -21,7 +22,7 @@ describe('reducers/events-details', () => {
     it('sets retryVisible to false', () => {
       const currentState = { id: 1 }
       const action = { type: EVENT_HIDE_RETRY, event: { id: 1 } }
-      const expectedState = { id: 1, retryVisible: false }
+      const expectedState = { id: 1, retryVisible: false, error: null }
       expect(reducer(currentState, action)).toEqual(expectedState)
     })
   })
@@ -44,6 +45,15 @@ describe('reducers/events-details', () => {
     })
   })
 
+  describe('for REQUEST_EVENT_RETRY_FAILED', () => {
+    it('replaces the state', () => {
+      const currentState = { id: 1 }
+      const action = { type: REQUEST_EVENT_RETRY_FAILED, error: 'an error', event: { id: 2 } }
+      const expectedState = { id: 1, error: 'an error' }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
   describe('for default', () => {
     it('returns the currentState', () => {
       const currentState = { current: true }

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

@@ -2,23 +2,21 @@ import {
   FAILURE_SHOW_RETRY,
   FAILURE_HIDE_RETRY,
   FAILURE_HIDE_OVERVIEW,
-  RECEIVE_FAILURE_DETAILS
+  RECEIVE_FAILURE_DETAILS,
+  REQUEST_EVENT_RETRY_FAILED
 } from 'actions'
 
-function patchFailure (state, action, params) {
-  if (state.id === action.failure.id) {
-    return Object.assign(state, params)
-  }
-  return state
+function patchFailure (state, params) {
+  return { ...state, ...params }
 }
 
 export default (state = {}, action) => {
   switch (action.type) {
     case FAILURE_SHOW_RETRY:
-      return patchFailure(state, action, { retryVisible: true })
+      return patchFailure(state, { retryVisible: true })
 
     case FAILURE_HIDE_RETRY:
-      return patchFailure(state, action, { retryVisible: false })
+      return patchFailure(state, { retryVisible: false, error: null })
 
     case FAILURE_HIDE_OVERVIEW:
       return {}
@@ -26,6 +24,9 @@ export default (state = {}, action) => {
     case RECEIVE_FAILURE_DETAILS:
       return action.failure
 
+    case REQUEST_EVENT_RETRY_FAILED:
+      return patchFailure(state, { error: action.error })
+
     default:
       return state
   }

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

@@ -2,7 +2,8 @@ import {
   FAILURE_SHOW_RETRY,
   FAILURE_HIDE_RETRY,
   FAILURE_HIDE_OVERVIEW,
-  RECEIVE_FAILURE_DETAILS
+  RECEIVE_FAILURE_DETAILS,
+  REQUEST_EVENT_RETRY_FAILED
 } from 'actions'
 
 import reducer from 'reducers/failures/details'
@@ -21,7 +22,7 @@ describe('reducers/failures/details', () => {
     it('sets retryVisible to false', () => {
       const currentState = { id: 1 }
       const action = { type: FAILURE_HIDE_RETRY, failure: { id: 1 } }
-      const expectedState = { id: 1, retryVisible: false }
+      const expectedState = { id: 1, retryVisible: false, error: null }
       expect(reducer(currentState, action)).toEqual(expectedState)
     })
   })
@@ -44,6 +45,15 @@ describe('reducers/failures/details', () => {
     })
   })
 
+  describe('for REQUEST_EVENT_RETRY_FAILED', () => {
+    it('replaces the state', () => {
+      const currentState = { id: 1 }
+      const action = { type: REQUEST_EVENT_RETRY_FAILED, error: 'an error', failure: { id: 2 } }
+      const expectedState = { id: 1, error: 'an error' }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
   describe('for default', () => {
     it('returns the currentState', () => {
       const currentState = { current: true }

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

@@ -5,13 +5,13 @@ import {
   FAILURE_SHOW_RETRY,
   FAILURE_HIDE_RETRY,
   RECEIVE_FAILURE_RETRY,
-  REQUEST_FAILURE_RETRY_FAILED
+  DELETE_FAILURE
 } from 'actions'
 
 function patchFailure (state, action, params) {
   return state.map((failure) => {
     if (failure.id === action.failure.id) {
-      return Object.assign({}, failure, params)
+      return { ...failure, ...params }
     }
     return failure
   })
@@ -39,8 +39,10 @@ export default (state = [], action) => {
     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 })
+    case DELETE_FAILURE:
+      return state.filter((failure) => {
+        return failure.id !== action.failure.id
+      })
 
     default:
       return state

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

@@ -5,7 +5,7 @@ import {
   FAILURE_SHOW_RETRY,
   FAILURE_HIDE_RETRY,
   RECEIVE_FAILURE_RETRY,
-  REQUEST_FAILURE_RETRY_FAILED
+  DELETE_FAILURE
 } from 'actions'
 
 import reducer from 'reducers/failures'
@@ -76,11 +76,11 @@ describe('reducers/failures', () => {
     })
   })
 
-  describe('for REQUEST_FAILURE_RETRY_FAILED', () => {
-    it('sets error for a specific', () => {
+  describe('for DELETE_FAILURE', () => {
+    it('removes the given failure from state', () => {
       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 }]
+      const action = { type: DELETE_FAILURE, failure: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 3 }]
       expect(reducer(currentState, action)).toEqual(expectedState)
     })
   })

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

@@ -9,6 +9,8 @@ import {
   REQUEST_FAILURES_SEARCH_RESULTS_FAILED,
   LOAD_MORE_FAILURES_SEARCH_RESULTS,
   TRIGGER_FAILURES_SEARCH,
+  REQUEST_FAILURE_RETRY,
+  REQUEST_FAILURE_RETRY_FAILED,
   REQUEST_EVENT_RETRY,
   RECEIVE_EVENT_RETRY,
   REQUEST_EVENT_RETRY_FAILED,
@@ -63,12 +65,14 @@ export default (state = initialState, action) => {
         currentEventsOffset: action.offset
       })
 
+    case REQUEST_FAILURE_RETRY:
     case REQUEST_EVENT_RETRY:
       return Object.assign({}, state, {
         isRetryingEvent: true
       })
 
     case RECEIVE_EVENT_RETRY:
+    case REQUEST_FAILURE_RETRY_FAILED:
     case REQUEST_EVENT_RETRY_FAILED:
       return Object.assign({}, state, {
         isRetryingEvent: false