phobos_checkpoint_ui 0.4.0 → 1.0.0.rc1

data/frontend/src/actions/failures/search/index.spec.js

@@ -0,0 +1,197 @@
+import 'babel-polyfill'
+import Mappersmith from 'mappersmith'
+import 'mappersmith/fixtures'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import { EVENTS_SEARCH_LIMIT } from 'api'
+
+const middlewares = [ thunk ]
+const mockStore = configureMockStore(middlewares)
+
+import {
+  TRIGGER_FAILURES_SEARCH,
+  REQUEST_FAILURES_SEARCH_RESULTS,
+  RECEIVE_FAILURES_SEARCH_RESULTS,
+  REQUEST_FAILURES_SEARCH_RESULTS_FAILED,
+  ADD_FLASH_MESSAGE,
+  LOAD_MORE_FAILURES_SEARCH_RESULTS
+} from 'actions'
+
+import {
+  triggerSearch,
+  fetchSearchResults,
+  loadMoreSearchResults
+} from 'actions/failures/search'
+
+beforeEach(() => {
+  Mappersmith.Env.Fixture.clear()
+})
+
+describe('actions/failures/search', () => {
+  describe('#fetchSearchResults', () => {
+    describe('without filters', () => {
+      let failure, initialState, store
+      beforeEach(() => {
+        initialState = { eventsFilters: {}, xhrStatus: { currentEventsOffset: 0 } }
+        store = mockStore(initialState)
+        failure = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&offset=0` })
+          .response([failure])
+      })
+
+      it('creates REQUEST and RECEIVE actions', (done) => {
+        store.dispatch(fetchSearchResults(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_FAILURES_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({ type: RECEIVE_FAILURES_SEARCH_RESULTS, failures: [failure], offset: 0 })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+
+    describe('with specific filters', () => {
+      let failure, initialState, store
+      beforeEach(() => {
+        initialState = {
+          eventsFilters: { type: 'event_type', value: 'new' },
+          xhrStatus: { currentEventsOffset: 0 }
+        }
+        store = mockStore(initialState)
+        failure = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&event_type=new&offset=0` })
+          .response([failure])
+      })
+
+      it('creates REQUEST and RECEIVE actions using the filters', (done) => {
+        store.dispatch(fetchSearchResults(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_FAILURES_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({ type: RECEIVE_FAILURES_SEARCH_RESULTS, failures: [failure], offset: 0 })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+
+    describe('with a different offset', () => {
+      let failure, initialState, store
+      beforeEach(() => {
+        initialState = {
+          eventsFilters: { },
+          xhrStatus: { currentEventsOffset: 4 }
+        }
+        store = mockStore(initialState)
+        failure = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&offset=4` })
+          .response([failure])
+      })
+
+      it('creates REQUEST and RECEIVE actions pointing to the correct offset', (done) => {
+        store.dispatch(fetchSearchResults(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_FAILURES_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({ type: RECEIVE_FAILURES_SEARCH_RESULTS, failures: [failure], offset: 4 })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+
+    describe('when it fails', () => {
+      let failure, initialState, store
+      beforeEach(() => {
+        initialState = { eventsFilters: {}, xhrStatus: { currentEventsOffset: 0 } }
+        store = mockStore(initialState)
+        failure = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&offset=0` })
+          .failure()
+          .response({
+            responseText: JSON.stringify({
+              error: true,
+              message: 'some error'
+            })
+          })
+      })
+
+      it('creates REQUEST and RECEIVE actions pointing to the correct offset', (done) => {
+        store.dispatch(fetchSearchResults(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_FAILURES_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({
+            type: REQUEST_FAILURES_SEARCH_RESULTS_FAILED,
+            query: { offset: 0 }, error: 'some error'
+          })
+          expect(actions[2]).toEqual({
+            type: ADD_FLASH_MESSAGE,
+            message: { id: jasmine.any(String), type: 'error', text: 'Failures search failed. "some error"' }
+          })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+  })
+
+  describe('#triggerSearch', () => {
+    let failure, initialState, store
+    beforeEach(() => {
+      initialState = {
+        eventsFilters: {},
+        xhrStatus: { currentEventsOffset: 0 }
+      }
+      store = mockStore(initialState)
+      failure = { id: 1 }
+      Mappersmith.Env.Fixture
+        .define('get')
+        .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&offset=0` })
+        .response([failure])
+    })
+
+    it('creates TRIGGER_FAILURES_SEARCH and REQUEST actions', (done) => {
+      store.dispatch(triggerSearch()).then(() => {
+        const actions = store.getActions()
+        expect(actions[0]).toEqual({ type: TRIGGER_FAILURES_SEARCH })
+        expect(actions[1]).toEqual({ type: REQUEST_FAILURES_SEARCH_RESULTS })
+        expect(actions[2]).toEqual({ type: RECEIVE_FAILURES_SEARCH_RESULTS, failures: [failure], offset: 0 })
+        done()
+      })
+      .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+    })
+  })
+
+  describe('#loadMoreSearchResults', () => {
+    let failure, initialState, store
+    beforeEach(() => {
+      initialState = {
+        eventsFilters: {},
+        xhrStatus: { currentEventsOffset: 4 }
+      }
+      store = mockStore(initialState)
+      failure = { id: 1 }
+      Mappersmith.Env.Fixture
+        .define('get')
+        .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&offset=4` })
+        .response([failure])
+    })
+
+    it('creates LOAD_MORE_FAILURES_SEARCH_RESULTS and REQUEST actions', (done) => {
+      store.dispatch(loadMoreSearchResults()).then(() => {
+        const actions = store.getActions()
+        expect(actions[0]).toEqual({ type: LOAD_MORE_FAILURES_SEARCH_RESULTS, offset: 4 + EVENTS_SEARCH_LIMIT })
+        expect(actions[1]).toEqual({ type: REQUEST_FAILURES_SEARCH_RESULTS })
+        expect(actions[2]).toEqual({ type: RECEIVE_FAILURES_SEARCH_RESULTS, failures: [failure], offset: 4 })
+        done()
+      })
+      .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+    })
+  })
+})

data/frontend/src/actions/index.js

@@ -1,20 +1,35 @@
 export const EVENT_SHOW_OVERVIEW = 'EVENT_SHOW_OVERVIEW'
 export const EVENT_HIDE_OVERVIEW = 'EVENT_HIDE_OVERVIEW'
 
+export const FAILURE_SHOW_OVERVIEW = 'FAILURE_SHOW_OVERVIEW'
+export const FAILURE_HIDE_OVERVIEW = 'FAILURE_HIDE_OVERVIEW'
+
 export const EVENT_SHOW_RETRY = 'EVENT_SHOW_RETRY'
 export const EVENT_HIDE_RETRY = 'EVENT_HIDE_RETRY'
 export const REQUEST_EVENT_RETRY = 'REQUEST_EVENT_RETRY'
 export const RECEIVE_EVENT_RETRY = 'RECEIVE_EVENT_RETRY'
 export const REQUEST_EVENT_RETRY_FAILED = 'REQUEST_EVENT_RETRY_FAILED'
 
+export const FAILURE_SHOW_RETRY = 'FAILURE_SHOW_RETRY'
+export const FAILURE_HIDE_RETRY = 'FAILURE_HIDE_RETRY'
+export const REQUEST_FAILURE_RETRY = 'REQUEST_FAILURE_RETRY'
+export const RECEIVE_FAILURE_RETRY = 'RECEIVE_FAILURE_RETRY'
+export const REQUEST_FAILURE_RETRY_FAILED = 'REQUEST_FAILURE_RETRY_FAILED'
+
 export const SEARCH_INPUT_CHANGE_FILTER_TYPE = 'SEARCH_INPUT_CHANGE_FILTER_TYPE'
 export const SEARCH_INPUT_CHANGE_FILTER_VALUE = 'SEARCH_INPUT_CHANGE_FILTER_VALUE'
 
-export const REQUEST_SEARCH_RESULTS = 'REQUEST_SEARCH_RESULTS'
-export const RECEIVE_SEARCH_RESULTS = 'RECEIVE_SEARCH_RESULTS'
-export const REQUEST_SEARCH_RESULTS_FAILED = 'REQUEST_SEARCH_RESULTS_FAILED'
-export const LOAD_MORE_SEARCH_RESULTS = 'LOAD_MORE_SEARCH_RESULTS'
-export const TRIGGER_SEARCH = 'TRIGGER_SEARCH'
+export const REQUEST_EVENTS_SEARCH_RESULTS = 'REQUEST_EVENTS_SEARCH_RESULTS'
+export const RECEIVE_EVENTS_SEARCH_RESULTS = 'RECEIVE_EVENTS_SEARCH_RESULTS'
+export const REQUEST_EVENTS_SEARCH_RESULTS_FAILED = 'REQUEST_EVENTS_SEARCH_RESULTS_FAILED'
+export const LOAD_MORE_EVENTS_SEARCH_RESULTS = 'LOAD_MORE_EVENTS_SEARCH_RESULTS'
+export const TRIGGER_EVENTS_SEARCH = 'TRIGGER_EVENTS_SEARCH'
+
+export const REQUEST_FAILURES_SEARCH_RESULTS = 'REQUEST_FAILURES_SEARCH_RESULTS'
+export const RECEIVE_FAILURES_SEARCH_RESULTS = 'RECEIVE_FAILURES_SEARCH_RESULTS'
+export const REQUEST_FAILURES_SEARCH_RESULTS_FAILED = 'REQUEST_FAILURES_SEARCH_RESULTS_FAILED'
+export const LOAD_MORE_FAILURES_SEARCH_RESULTS = 'LOAD_MORE_FAILURES_SEARCH_RESULTS'
+export const TRIGGER_FAILURES_SEARCH = 'TRIGGER_FAILURES_SEARCH'
 
 export const ADD_FLASH_MESSAGE = 'ADD_FLASH_MESSAGE'
 export const DELETE_FLASH_MESSAGE = 'DELETE_FLASH_MESSAGE'
@@ -22,3 +37,7 @@ export const DELETE_FLASH_MESSAGE = 'DELETE_FLASH_MESSAGE'
 export const REQUEST_EVENT_DETAILS = 'REQUEST_EVENT_DETAILS'
 export const RECEIVE_EVENT_DETAILS = 'RECEIVE_EVENT_DETAILS'
 export const REQUEST_EVENT_DETAILS_FAILED = 'REQUEST_EVENT_DETAILS_FAILED'
+
+export const REQUEST_FAILURE_DETAILS = 'REQUEST_FAILURE_DETAILS'
+export const RECEIVE_FAILURE_DETAILS = 'RECEIVE_FAILURE_DETAILS'
+export const REQUEST_FAILURE_DETAILS_FAILED = 'REQUEST_FAILURE_DETAILS_FAILED'

data/frontend/src/actions/navigation/index.js

@@ -0,0 +1,5 @@
+import { push } from 'react-router-redux'
+
+export const navigateTo = (path) => (dispatch) => {
+  dispatch(push(path))
+}

data/frontend/src/actions/navigation/index.spec.js

@@ -0,0 +1,21 @@
+import 'babel-polyfill'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import { push } from 'react-router-redux'
+
+import { navigateTo } from 'actions/navigation'
+
+const mockStore = configureMockStore([thunk])
+
+describe('action navigate', () => {
+  let store
+  beforeEach(() => {
+    store = mockStore({})
+  })
+
+  it('dispatches a push event from react-router-redux', () => {
+    store.dispatch(navigateTo('/foo'))
+    const actions = store.getActions()
+    expect(actions[0]).toEqual(push('/foo'))
+  })
+})

data/frontend/src/api.js

@@ -41,6 +41,17 @@ export default Mappersmith.forge({
         path: '/api/v1/events',
         params: { limit: EVENTS_SEARCH_LIMIT }
       }
+    },
+    Failure: {
+      findById: '/api/v1/failures/{id}',
+      retry: {
+        path: '/api/v1/failures/{id}/retry',
+        method: 'POST'
+      },
+      search: {
+        path: '/api/v1/failures',
+        params: { limit: EVENTS_SEARCH_LIMIT }
+      }
     }
   }
 })

data/frontend/src/components/empty-event/index.js

@@ -0,0 +1,20 @@
+import React, { Component, PropTypes } from 'react'
+
+export default class EmptyEvent extends Component {
+  static get propTypes () {
+    return {
+      events: PropTypes.array.isRequired,
+      isFetchingEvents: PropTypes.bool.isRequired
+    }
+  }
+
+  render () {
+    return (
+      this.props.events.length === 0 &&
+        !this.props.isFetchingEvents &&
+        <div className='empty-event'>
+          No events found
+        </div>
+    )
+  }
+}

data/frontend/src/components/empty-event/index.spec.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { shallow } from 'enzyme'
+
+import EmptyEvent from 'components/empty-event'
+
+describe('<EmptyEvent />', () => {
+  let props, wrapper
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    props = {
+      events: [{ id: 1 }, { id: 2 }],
+      isFetchingEvents: false
+    }
+    wrapper = shallow(<EmptyEvent {...props} />)
+  })
+
+  describe('with events', () => {
+    it('does not render <EmptyEvent />', () => {
+      expect(wrapper.find('.empty-event').length).toEqual(0)
+    })
+  })
+
+  describe('without events', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        events: []
+      }
+      wrapper = shallow(<EmptyEvent {...props} />)
+    })
+
+    it('renders <EmptyEvent />', () => {
+      expect(wrapper.find('.empty-event').length).toEqual(1)
+    })
+  })
+})

data/frontend/src/components/event-overview/index.js

@@ -3,7 +3,7 @@ import moment from 'moment'
 import JSONPretty from 'react-json-pretty'
 import 'react-json-pretty/src/JSONPretty.monikai.css'
 
-import Attribute from 'components/event-overview/attribute'
+import Attribute from 'components/attribute'
 
 const EVENT_TIME_FORMAT = 'MMMM Do YYYY, h:mm:ss a'
 

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

@@ -18,7 +18,7 @@ class RetryDialog extends Component {
       event: PropTypes.shape({
         id: PropTypes.number,
         retryVisible: PropTypes.bool
-      })
+      }).isRequired
     }
   }
 

data/frontend/src/components/failure/error-message.js

@@ -0,0 +1,19 @@
+import React, { Component, PropTypes } from 'react'
+import ErrorSVG from 'material-ui/svg-icons/alert/error'
+
+export default class extends Component {
+  static get propTypes () {
+    return {
+      message: PropTypes.string
+    }
+  }
+
+  render () {
+    return this.props.message ? (
+      <div className='event-error-message'>
+        <ErrorSVG style={{marginRight: '10px'}}/>
+        <span>{this.props.message}</span>
+      </div>
+    ) : null
+  }
+}

data/frontend/src/components/failure/error-message.scss

@@ -0,0 +1,8 @@
+.event-error-message {
+  display: flex;
+  text-align: left;
+
+  & > span {
+    color: #f44336;
+  }
+}

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

@@ -0,0 +1,3 @@
+.event {
+  cursor: pointer;
+}

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

@@ -0,0 +1,82 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import moment from 'moment'
+
+import { showFailureOverview } from 'actions/failures/overview'
+import style from 'components/event/style'
+
+import { Card, CardHeader, CardTitle } from 'material-ui/Card'
+import FailureOverviewDialog from 'components/failure/overview-dialog'
+import FailureRetryDialog from 'components/failure/retry-dialog'
+
+const TIME_FORMAT = 'h:mm:ss a'
+const EMPTY_TYPE = '<no type>'
+
+export function formatTime (time) {
+  if (!time) return null
+  const timeDate = new Date(time)
+  return moment(timeDate).format(TIME_FORMAT)
+}
+
+export class Failure extends Component {
+  static get propTypes () {
+    return {
+      onShowOverview: PropTypes.func,
+      failure: PropTypes.shape({
+        id: PropTypes.number,
+        created_at: PropTypes.string,
+        topic: PropTypes.string,
+        group_id: PropTypes.string,
+        entity_id: PropTypes.string,
+        event_time: PropTypes.string,
+        event_type: PropTypes.string,
+        event_version: PropTypes.string,
+        checksum: PropTypes.string,
+        payload: PropTypes.object,
+        metadata: PropTypes.object,
+        error_class: PropTypes.string,
+        error_message: PropTypes.string,
+        error_backtrace: PropTypes.array
+      })
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      failure: {}
+    }
+  }
+
+  render () {
+    return (
+      <Card
+        className='failure'
+        style={style.card}
+        onClick={() => this.showOverview()}>
+        <CardHeader
+          className='failure-header'
+          titleStyle={style.cardHeader.title}
+          subtitleStyle={style.cardHeader.subtitle}
+          title={formatTime(this.props.failure.event_time)}
+          subtitle={this.props.failure.topic}/>
+        <CardTitle
+          titleStyle={style.cardTitle}
+          title={this.formattedEventType()}/>
+        <FailureOverviewDialog failure={this.props.failure} />
+        <FailureRetryDialog failure={this.props.failure} />
+      </Card>
+    )
+  }
+
+  showOverview () {
+    this.props.onShowOverview(this.props.failure)
+  }
+
+  formattedEventType () {
+    return this.props.failure.event_type || EMPTY_TYPE
+  }
+}
+
+export default connect((state, ownProps) => ownProps, {
+  onShowOverview: showFailureOverview
+})(Failure)

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

@@ -0,0 +1,89 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount } from 'enzyme'
+import { Event, formatEventTime } from 'components/event'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import { Provider } from 'react-redux'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+
+const middlewares = [ thunk ]
+const mockStore = configureMockStore(middlewares)
+
+const mountComponent = (store, props) => mount(
+  <Provider store={store}>
+    <MuiThemeProvider muiTheme={getMuiTheme()}>
+      <Event {...props} />
+    </MuiThemeProvider>
+  </Provider>
+)
+
+describe('<Event />', () => {
+  let props, component, store, onShowOverview
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    store = mockStore({
+      xhrStatus: {
+        isRetryingEvent: false
+      }
+    })
+
+    onShowOverview = jasmine.createSpy('onShowOverview')
+
+    props = {
+      onShowOverview: onShowOverview,
+      event: {
+        id: 1,
+        topic: 'phobos.test',
+        group_id: 'phobos-checkpoint-consumer',
+        entity_id: 'a5dbd02d-bc40-6d15-b993-83a4825d94e6',
+        event_time: '2016-09-23T21:00:40.515Z',
+        event_type: 'order-placed',
+        event_version: 'v1',
+        checksum: '188773471ec0f898fd81d272760a027f',
+        payload: { data: { name: 'phobos' } }
+      }
+    }
+
+    component = mountComponent(store, props)
+  })
+
+  it('displays event_time formatted', () => {
+    expect(component.text()).toMatch(formatEventTime(props.event.event_time))
+  })
+
+  it('displays topic', () => {
+    expect(component.text()).toMatch('phobos.test')
+  })
+
+  it('displays event_type', () => {
+    expect(component.text()).toMatch('order-placed')
+  })
+
+  describe('when clicked', () => {
+    it('calls onShowOverview with the event', () => {
+      component.find('.event').simulate('click')
+      expect(onShowOverview).toHaveBeenCalledWith(props.event)
+    })
+  })
+
+  describe('when event has overviewVisible=true', () => {
+    let dialog
+    beforeEach(() => {
+      Object.assign(props.event, { overviewVisible: true })
+      component = mountComponent(store, props)
+      const dialogs = document.getElementsByClassName('event-overview-dialog')
+      dialog = dialogs[dialogs.length - 1]
+    })
+
+    it('opens the event overview dialog', () => {
+      expect(dialog).not.toBe(null)
+    })
+
+    it('displays event_id', () => {
+      expect(dialog.innerText).toMatch(`#${props.event.id}`)
+    })
+  })
+})

data/frontend/src/components/failure/loading.js

@@ -0,0 +1,16 @@
+import React, { Component, PropTypes } from 'react'
+import CircularProgress from 'material-ui/CircularProgress'
+
+export default class extends Component {
+  static get propTypes () {
+    return {
+      visible: PropTypes.bool.isRequired
+    }
+  }
+
+  render () {
+    return this.props.visible
+      ? <CircularProgress />
+      : null
+  }
+}

data/frontend/src/components/failure/overview/failure-overview.scss

@@ -0,0 +1,28 @@
+.failure-overview {
+  .detail {
+    margin-bottom: 20px;
+
+    &:first-child {
+      margin-top: 20px;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    label {
+      font-weight: lighter;
+      text-transform: uppercase;
+    }
+
+    .value {
+      font-weight: bold;
+    }
+  }
+
+  .json-pretty {
+    margin-top: 0;
+    padding: 10px;
+    white-space: pre-wrap;
+  }
+}