phobos_checkpoint_ui 0.1.0

data/frontend/src/actions/events-search.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_SEARCH,
+  REQUEST_SEARCH_RESULTS,
+  RECEIVE_SEARCH_RESULTS,
+  REQUEST_SEARCH_RESULTS_FAILED,
+  ADD_FLASH_MESSAGE,
+  LOAD_MORE_SEARCH_RESULTS
+} from 'actions'
+
+import {
+  triggerSearch,
+  fetchSearchResults,
+  loadMoreSearchResults
+} from 'actions/events-search'
+
+beforeEach(() => {
+  Mappersmith.Env.Fixture.clear()
+})
+
+describe('actions/event-search', () => {
+  describe('#fetchSearchResults', () => {
+    describe('without filters', () => {
+      let event, initialState, store
+      beforeEach(() => {
+        initialState = { eventsFilters: {}, xhrStatus: { currentEventsOffset: 0 } }
+        store = mockStore(initialState)
+        event = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/events?limit=${EVENTS_SEARCH_LIMIT}&offset=0` })
+          .response([event])
+      })
+
+      it('creates REQUEST and RECEIVE actions', (done) => {
+        store.dispatch(fetchSearchResults(event)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({ type: RECEIVE_SEARCH_RESULTS, events: [event], offset: 0 })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+
+    describe('with specific filters', () => {
+      let event, initialState, store
+      beforeEach(() => {
+        initialState = {
+          eventsFilters: { type: 'event_type', value: 'new' },
+          xhrStatus: { currentEventsOffset: 0 }
+        }
+        store = mockStore(initialState)
+        event = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/events?limit=${EVENTS_SEARCH_LIMIT}&event_type=new&offset=0` })
+          .response([event])
+      })
+
+      it('creates REQUEST and RECEIVE actions using the filters', (done) => {
+        store.dispatch(fetchSearchResults(event)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({ type: RECEIVE_SEARCH_RESULTS, events: [event], offset: 0 })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+
+    describe('with a different offset', () => {
+      let event, initialState, store
+      beforeEach(() => {
+        initialState = {
+          eventsFilters: { },
+          xhrStatus: { currentEventsOffset: 4 }
+        }
+        store = mockStore(initialState)
+        event = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/events?limit=${EVENTS_SEARCH_LIMIT}&offset=4` })
+          .response([event])
+      })
+
+      it('creates REQUEST and RECEIVE actions pointing to the correct offset', (done) => {
+        store.dispatch(fetchSearchResults(event)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({ type: RECEIVE_SEARCH_RESULTS, events: [event], offset: 4 })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+
+    describe('when it fails', () => {
+      let event, initialState, store
+      beforeEach(() => {
+        initialState = { eventsFilters: {}, xhrStatus: { currentEventsOffset: 0 } }
+        store = mockStore(initialState)
+        event = { id: 1 }
+        Mappersmith.Env.Fixture
+          .define('get')
+          .matching({ url: `/api/v1/events?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(event)).then(() => {
+          const actions = store.getActions()
+          expect(actions[0]).toEqual({ type: REQUEST_SEARCH_RESULTS })
+          expect(actions[1]).toEqual({
+            type: REQUEST_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: 'Events search failed. "some error"' }
+          })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+    })
+  })
+
+  describe('#triggerSearch', () => {
+    let event, initialState, store
+    beforeEach(() => {
+      initialState = {
+        eventsFilters: {},
+        xhrStatus: { currentEventsOffset: 0 }
+      }
+      store = mockStore(initialState)
+      event = { id: 1 }
+      Mappersmith.Env.Fixture
+        .define('get')
+        .matching({ url: `/api/v1/events?limit=${EVENTS_SEARCH_LIMIT}&offset=0` })
+        .response([event])
+    })
+
+    it('creates TRIGGER_SEARCH and REQUEST actions', (done) => {
+      store.dispatch(triggerSearch()).then(() => {
+        const actions = store.getActions()
+        expect(actions[0]).toEqual({ type: TRIGGER_SEARCH })
+        expect(actions[1]).toEqual({ type: REQUEST_SEARCH_RESULTS })
+        expect(actions[2]).toEqual({ type: RECEIVE_SEARCH_RESULTS, events: [event], offset: 0 })
+        done()
+      })
+      .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+    })
+  })
+
+  describe('#loadMoreSearchResults', () => {
+    let event, initialState, store
+    beforeEach(() => {
+      initialState = {
+        eventsFilters: {},
+        xhrStatus: { currentEventsOffset: 4 }
+      }
+      store = mockStore(initialState)
+      event = { id: 1 }
+      Mappersmith.Env.Fixture
+        .define('get')
+        .matching({ url: `/api/v1/events?limit=${EVENTS_SEARCH_LIMIT}&offset=4` })
+        .response([event])
+    })
+
+    it('creates LOAD_MORE_SEARCH_RESULTS and REQUEST actions', (done) => {
+      store.dispatch(loadMoreSearchResults()).then(() => {
+        const actions = store.getActions()
+        expect(actions[0]).toEqual({ type: LOAD_MORE_SEARCH_RESULTS, offset: 4 + EVENTS_SEARCH_LIMIT })
+        expect(actions[1]).toEqual({ type: REQUEST_SEARCH_RESULTS })
+        expect(actions[2]).toEqual({ type: RECEIVE_SEARCH_RESULTS, events: [event], offset: 4 })
+        done()
+      })
+      .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+    })
+  })
+})

data/frontend/src/actions/flash-messages.js

@@ -0,0 +1,16 @@
+let ids = 0
+
+import {
+  ADD_FLASH_MESSAGE,
+  DELETE_FLASH_MESSAGE
+} from 'actions'
+
+export const addFlashMessage = (message) => ({
+  type: ADD_FLASH_MESSAGE,
+  message: Object.assign({ id: `${++ids}` }, message)
+})
+
+export const deleteFlashMessage = (id) => ({
+  type: DELETE_FLASH_MESSAGE,
+  id: id
+})

data/frontend/src/actions/flash-messages.spec.js

@@ -0,0 +1,23 @@
+import { ADD_FLASH_MESSAGE, DELETE_FLASH_MESSAGE } from 'actions'
+import { addFlashMessage, deleteFlashMessage } from 'actions/flash-messages'
+
+describe('actions/flash-messages', () => {
+  describe('#addFlashMessage', () => {
+    it('creates an action to add flash messags auto generating the id', () => {
+      const message = { type: 'success', text: 'congrats!' }
+      const expectedAction = {
+        type: ADD_FLASH_MESSAGE,
+        message: Object.assign({ id: jasmine.any(String) }, message)
+      }
+      expect(addFlashMessage(message)).toEqual(expectedAction)
+    })
+  })
+
+  describe('#addFlashMessage', () => {
+    it('creates an action to delete flash messags', () => {
+      const id = '1'
+      const expectedAction = { type: DELETE_FLASH_MESSAGE, id: id }
+      expect(deleteFlashMessage(id)).toEqual(expectedAction)
+    })
+  })
+})

data/frontend/src/actions/index.js

@@ -0,0 +1,24 @@
+export const EVENT_SHOW_OVERVIEW = 'EVENT_SHOW_OVERVIEW'
+export const EVENT_HIDE_OVERVIEW = 'EVENT_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 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 ADD_FLASH_MESSAGE = 'ADD_FLASH_MESSAGE'
+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'

data/frontend/src/actions/search-input-filter.js

@@ -0,0 +1,14 @@
+import {
+  SEARCH_INPUT_CHANGE_FILTER_TYPE,
+  SEARCH_INPUT_CHANGE_FILTER_VALUE
+} from 'actions'
+
+export const changeSearchInputFilterType = (filterType) => ({
+  type: SEARCH_INPUT_CHANGE_FILTER_TYPE,
+  filterType
+})
+
+export const changeSearchInputFilterValue = (filterValue) => ({
+  type: SEARCH_INPUT_CHANGE_FILTER_VALUE,
+  filterValue
+})

data/frontend/src/actions/search-input-filter.spec.js

@@ -0,0 +1,20 @@
+import { SEARCH_INPUT_CHANGE_FILTER_TYPE, SEARCH_INPUT_CHANGE_FILTER_VALUE } from 'actions'
+import { changeSearchInputFilterType, changeSearchInputFilterValue } from 'actions/search-input-filter'
+
+describe('actions/search-input-filter', () => {
+  describe('#changeSearchInputFilterType', () => {
+    it('creates an action to change the filter type', () => {
+      const type = 'entity_id'
+      const expectedAction = { type: SEARCH_INPUT_CHANGE_FILTER_TYPE, filterType: type }
+      expect(changeSearchInputFilterType(type)).toEqual(expectedAction)
+    })
+  })
+
+  describe('#changeSearchInputFilterValue', () => {
+    it('creates an action to change the filter value', () => {
+      const value = '123abc'
+      const expectedAction = { type: SEARCH_INPUT_CHANGE_FILTER_VALUE, filterValue: value }
+      expect(changeSearchInputFilterValue(value)).toEqual(expectedAction)
+    })
+  })
+})

data/frontend/src/api.js

@@ -0,0 +1,46 @@
+import Mappersmith from 'mappersmith'
+
+Mappersmith.Env.USE_PROMISES = true
+
+export const EVENTS_SEARCH_LIMIT = 20
+
+export function parseResponseError (response) {
+  let error
+
+  if (response.err) {
+    const errorObj = response.err[0]
+    if (errorObj.responseText) {
+      try {
+        error = JSON.parse(errorObj.responseText)
+      } catch (e) {
+        error = { message: errorObj.responseText }
+      }
+    }
+  } else if (response.message) {
+    error = response
+  } else {
+    error = { message: response }
+  }
+
+  return error
+}
+
+export default Mappersmith.forge({
+  host: false,
+  resources: {
+    Config: {
+      load: '/configs'
+    },
+    Event: {
+      findById: '/api/v1/events/{id}',
+      retry: {
+        path: '/api/v1/events/{id}/retry',
+        method: 'POST'
+      },
+      search: {
+        path: '/api/v1/events',
+        params: { limit: EVENTS_SEARCH_LIMIT }
+      }
+    }
+  }
+})

data/frontend/src/components/event/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/event/error-message.scss

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

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

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

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

@@ -0,0 +1,77 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import moment from 'moment'
+
+import { showEventOverview } from 'actions/event-overview'
+import style from 'components/event/style'
+
+import {Card, CardHeader, CardTitle} from 'material-ui/Card'
+import EventOverviewDialog from 'components/event-overview-dialog'
+import EventRetryDialog from 'components/event-retry-dialog'
+
+const EVENT_TIME_FORMAT = 'h:mm:ss a'
+const EMPTY_EVENT_TYPE = '<no type>'
+
+export function formatEventTime (eventTime) {
+  if (!eventTime) return null
+  const eventTimeDate = new Date(eventTime)
+  return moment(eventTimeDate).format(EVENT_TIME_FORMAT)
+}
+
+export class Event extends Component {
+  static get propTypes () {
+    return {
+      onShowOverview: PropTypes.func,
+      event: PropTypes.shape({
+        id: PropTypes.number,
+        group_id: PropTypes.string,
+        topic: PropTypes.string,
+        entity_id: PropTypes.string,
+        event_type: PropTypes.string,
+        event_time: PropTypes.string,
+        event_version: PropTypes.string,
+        checksum: PropTypes.string,
+        payload: PropTypes.object
+      })
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      event: {}
+    }
+  }
+
+  render () {
+    return (
+      <Card
+        className='event'
+        style={style.card}
+        onClick={() => this.showOverview()}>
+        <CardHeader
+          className='event-header'
+          titleStyle={style.cardHeader.title}
+          subtitleStyle={style.cardHeader.subtitle}
+          title={formatEventTime(this.props.event.event_time)}
+          subtitle={this.props.event.topic}/>
+        <CardTitle
+          titleStyle={style.cardTitle}
+          title={this.formatedEventType()}/>
+        <EventOverviewDialog event={this.props.event} />
+        <EventRetryDialog event={this.props.event} />
+      </Card>
+    )
+  }
+
+  showOverview () {
+    this.props.onShowOverview(this.props.event)
+  }
+
+  formatedEventType () {
+    return this.props.event.event_type || EMPTY_EVENT_TYPE
+  }
+}
+
+export default connect((state, ownProps) => ownProps, {
+  onShowOverview: showEventOverview
+})(Event)

data/frontend/src/components/event/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/event/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/event/style.js

@@ -0,0 +1,16 @@
+export default {
+  card: {
+    width: '490px',
+    overflow: 'hidden',
+    backgroundColor: '#fff'
+  },
+  cardHeader: {
+    title: {color: '#000', fontWeight: 'lighter'},
+    subtitle: {color: '#000'}
+  },
+  cardTitle: {
+    color: '#000',
+    fontSize: '38px',
+    fontWeight: 'lighter'
+  }
+}

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

@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react'
+
+export default class extends Component {
+  static get propTypes () {
+    return {
+      label: PropTypes.string,
+      value: PropTypes.string
+    }
+  }
+
+  render () {
+    const { label, value, children } = this.props
+    const body = children || null
+    return (value || body) &&
+      <div className='detail'>
+        <p><label>{label}</label></p>
+        {
+          value
+            ? <p className='value'>{value}</p>
+            : body
+        }
+      </div>
+  }
+}

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

@@ -0,0 +1,28 @@
+.event-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;
+  }
+}

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

@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react'
+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'
+
+const EVENT_TIME_FORMAT = 'MMMM Do YYYY, h:mm:ss a'
+
+export function formatEventTime (eventTime) {
+  if (!eventTime) return null
+  const eventTimeDate = new Date(eventTime)
+  return moment(eventTimeDate).format(EVENT_TIME_FORMAT)
+}
+
+export default class extends Component {
+  static get propTypes () {
+    return {
+      id: PropTypes.number,
+      group_id: PropTypes.string,
+      topic: PropTypes.string,
+      entity_id: PropTypes.string,
+      event_type: PropTypes.string,
+      event_time: PropTypes.string,
+      event_version: PropTypes.string,
+      checksum: PropTypes.string,
+      payload: PropTypes.object
+    }
+  }
+
+  render () {
+    return (
+      <div className='event-overview'>
+        <Attribute label='Group ID' value={this.props.group_id} />
+        <Attribute label='Topic' value={this.props.topic} />
+        <Attribute label='Entity ID' value={this.props.entity_id} />
+        <Attribute label='Event Type' value={this.props.event_type} />
+        <Attribute label='Event Time' value={formatEventTime(this.props.event_time)} />
+        <Attribute label='Event Version' value={this.props.event_version} />
+        <Attribute label='Checksum' value={this.props.checksum} />
+        <Attribute label='Payload'>
+          <JSONPretty className='json-pretty' json={this.props.payload} />
+        </Attribute>
+      </div>
+    )
+  }
+}