phobos_checkpoint_ui 0.4.0 → 1.0.0.rc1

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

@@ -0,0 +1,60 @@
+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/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,
+      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
+    }
+  }
+
+  render () {
+    return (
+      <div className='failure-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>
+        <Attribute label='Metadata'>
+          <JSONPretty className='json-pretty' json={this.props.metadata} />
+        </Attribute>
+        <Attribute label='Error Class' value={this.props.error_class} />
+        <Attribute label='Error Message' value={this.props.error_class} />
+        <Attribute label='Backtrace'>
+          <JSONPretty className='json-pretty' json={this.props.error_backtrace} />
+        </Attribute>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount } from 'enzyme'
+import FailureOverview, { formatEventTime } from 'components/failure/overview'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+
+const mountComponent = (props) => mount(
+  <MuiThemeProvider muiTheme={getMuiTheme()}>
+    <FailureOverview {...props} />
+  </MuiThemeProvider>
+)
+
+describe('<FailureOverview />', () => {
+  let props, component
+
+  beforeEach(() => {
+    jasmineEnzyme()
+
+    props = {
+      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' } },
+      metadata: { meta: { version: 'foo' } },
+      error_class: 'FooError',
+      error_message: 'Expected "foo" to equal "bar"',
+      error_backtrace: ['Line 1: foo', 'Line 2: baz']
+    }
+
+    component = mountComponent(props)
+  })
+
+  it('displays topic', () => {
+    expect(component.text()).toMatch(props.topic)
+  })
+
+  it('displays group_id', () => {
+    expect(component.text()).toMatch(props.group_id)
+  })
+
+  it('displays entity_id', () => {
+    expect(component.text()).toMatch(props.entity_id)
+  })
+
+  it('displays event_time formatted', () => {
+    expect(component.text()).toMatch(formatEventTime(props.event_time))
+  })
+
+  it('displays event_type', () => {
+    expect(component.text()).toMatch(props.event_type)
+  })
+
+  it('displays event_version', () => {
+    expect(component.text()).toMatch(props.event_version)
+  })
+
+  it('displays checksum', () => {
+    expect(component.text()).toMatch(props.checksum)
+  })
+
+  it('displays payload', () => {
+    const payloadFormatted = JSON.stringify(props.payload, null, '  ')
+    expect(component.text()).toMatch(payloadFormatted)
+  })
+})

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

@@ -0,0 +1,15 @@
+.failure-overview-dialog {
+  .dialog-title {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.87);
+
+    &:active,
+    &:visited {
+      color: inherit;
+    }
+
+    &:hover {
+      color: #666;
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router'
+
+import { hideFailureOverview } from 'actions/failures/overview'
+import { showFailureRetry } from 'actions/failures/retry'
+
+import Dialog from 'material-ui/Dialog'
+import RaisedButton from 'material-ui/RaisedButton'
+import FailureOverview from 'components/failure/overview'
+
+class OverviewDialog extends Component {
+  static get propTypes () {
+    return {
+      onHideOverview: PropTypes.func,
+      onShowRetry: 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,
+
+        overviewVisible: PropTypes.bool
+      })
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      failure: {}
+    }
+  }
+
+  render () {
+    return (
+      <Dialog
+        modal={false}
+        autoScrollBodyContent
+        className='failures/overview-dialog'
+        title={this.dialogTitle()}
+        open={!!this.props.failure.overviewVisible}
+        onRequestClose={() => this.hideOverview()}
+        contentStyle={{maxWidth: '1024px'}}
+        bodyStyle={{maxWidth: '1024px'}}
+        actions={[
+          <RaisedButton
+            secondary
+            label='Retry'
+            onClick={() => this.showRetry()}/>
+        ]}>
+        <FailureOverview {...this.props.failure} />
+      </Dialog>
+    )
+  }
+
+  hideOverview () {
+    this.props.onHideOverview(this.props.failure)
+  }
+
+  showRetry () {
+    this.props.onShowRetry(this.props.failure)
+  }
+
+  dialogTitle () {
+    return (
+      <h3>
+        <Link className='dialog-title' to={`/failures/${this.props.failure.id}`}>
+          {`#${this.props.failure.id}`}
+        </Link>
+      </h3>
+    )
+  }
+}
+
+export default connect(
+  (state, ownProps) => ownProps, {
+    onHideOverview: hideFailureOverview,
+    onShowRetry: showFailureRetry
+  }
+)(OverviewDialog)

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

@@ -0,0 +1,72 @@
+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'
+
+import Dialog from 'material-ui/Dialog'
+import RaisedButton from 'material-ui/RaisedButton'
+
+class FailureRetryDialog extends Component {
+  static get propTypes () {
+    return {
+      onHideRetry: PropTypes.func.isRequired,
+      onPerformRetry: PropTypes.func.isRequired,
+      isRetryingEvent: PropTypes.bool,
+      failure: PropTypes.shape({
+        id: PropTypes.number,
+        retryVisible: PropTypes.bool
+      }).isRequired
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      event: {}
+    }
+  }
+
+  render () {
+    return (
+      <Dialog
+        modal={!!this.props.isRetryingEvent}
+        title='Are you sure?'
+        open={!!this.props.failure.retryVisible}
+        bodyStyle={{maxWidth: '300px'}}
+        contentStyle={{maxWidth: '300px'}}
+        onRequestClose={() => this.hide()}
+        actions={[
+          <RaisedButton
+            primary
+            label='Retry'
+            onClick={() => this.performRetry()}/>
+        ]}>
+        <div style={{textAlign: 'center'}}>
+          <Loading visible={this.props.isRetryingEvent}/>
+          <ErrorMessage message={this.props.failure.error}/>
+        </div>
+      </Dialog>
+    )
+  }
+
+  hide () {
+    this.props.onHideRetry(this.props.failure)
+  }
+
+  performRetry () {
+    this.props.onPerformRetry(this.props.failure)
+  }
+}
+
+const mapStateToProps = (state, ownProps) => (
+  Object.assign({
+    isRetryingEvent: state.xhrStatus.isRetryingEvent
+  }, ownProps)
+)
+
+export default connect(mapStateToProps, {
+  onHideRetry: hideFailureRetry,
+  onPerformRetry: performFailureRetry
+})(FailureRetryDialog)

data/frontend/src/components/failure/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/failures-list/failures-list.scss

@@ -0,0 +1,49 @@
+.failures-list {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: inherit;
+  position: relative;
+
+  .timeline {
+    padding-left: 40px;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 15px;
+      display: block;
+      width: 2px;
+      background-color: #cdcdcd;
+    }
+
+    .dot {
+      border: 2px solid #868686;
+      border-radius: 50%;
+      width: 10px;
+      height: 10px;
+      display: inline-block;
+      margin: 0 10px 0 9px;
+      background-color: #e4e4e4;
+      z-index: 1;
+    }
+
+    .day-header {
+      display: inline-flex;
+      align-items: center;
+      color: #333;
+      font-family: Roboto;
+      margin: 10px 0 10px -40px;
+
+      &:first-child {
+        margin-top: 20px;
+      }
+    }
+
+    & > .event {
+      margin: 10px 10px;
+    }
+  }
+}

data/frontend/src/components/failures-list/index.js

@@ -0,0 +1,62 @@
+import React, { Component, PropTypes } from 'react'
+import moment from 'moment'
+import Failure from 'components/failure'
+
+const SECTION_DATE_FORMAT = 'MMM DD, YYYY'
+const EVENT_TIME_FORMAT = 'YYYY-MM-DD'
+
+export default class extends Component {
+  static get propTypes () {
+    return {
+      failures: PropTypes.array
+    }
+  }
+
+  render () {
+    return (
+      <div className='failures-list'>
+        <div className='timeline'>
+          {this.renderTimeline()}
+        </div>
+      </div>
+    )
+  }
+
+  renderTimeline () {
+    let day
+    let timeline = []
+
+    this.props.failures.forEach((failure) => {
+      const eventDay = formatEventDate(failure.event_time)
+      if (day !== eventDay) {
+        day = eventDay
+        timeline.push(this.renderDayHeader(day))
+      }
+
+      timeline.push(
+        <Failure key={`failure-${failure.id}`} failure={failure}/>
+      )
+    })
+
+    return timeline
+  }
+
+  renderDayHeader (day) {
+    return (
+      <div key={`day-header-${day}`} className='day-header'>
+        <span className='dot' />
+        {formatSectionDate(day)}
+      </div>
+    )
+  }
+}
+
+function formatEventDate (eventdate) {
+  if (!eventdate) return null
+  return moment(new Date(eventdate)).format(EVENT_TIME_FORMAT)
+}
+
+function formatSectionDate (date) {
+  if (!date) return null
+  return moment(new Date(date)).format(SECTION_DATE_FORMAT)
+}

data/frontend/src/components/failures-list/index.spec.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount } from 'enzyme'
+import EventsList from 'components/events-list'
+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()}>
+      <EventsList {...props} />
+    </MuiThemeProvider>
+  </Provider>
+)
+
+describe('<EventsList />', () => {
+  let store, props, component, event
+
+  beforeEach(() => {
+    jasmineEnzyme()
+
+    store = mockStore({
+      xhrStatus: {
+        isRetryingEvent: false
+      }
+    })
+
+    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' } }
+    }
+
+    props = {
+      events: [
+        event,
+        Object.assign({}, event, { id: 2 })
+      ]
+    }
+
+    component = mountComponent(store, props)
+  })
+
+  it('renders the list of events', () => {
+    expect(component.find('.event').length).toEqual(2)
+  })
+})

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

@@ -1,9 +1,18 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import configs from 'configs'
 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 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 { navigateTo } from 'actions/navigation'
+
 const DEFAULT_TITLE = 'Phobos Checkpoint'
 
 const style = {
@@ -20,14 +29,24 @@ const style = {
   }
 }
 
-export default class extends Component {
+export class Header extends Component {
   render () {
     return (
       <AppBar
         title={this.logo()}
         showMenuIconButton={false}
         style={style.bar}
-        titleStyle={style.title}/>
+        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>
+        }
+      />
     )
   }
 
@@ -42,3 +61,18 @@ export default class extends Component {
     )
   }
 }
+
+export const mapStateToProps = (state, ownProps) => {
+  return {
+    ...state
+  }
+}
+
+const actionsToConnect = {
+  navigateTo
+}
+
+export default connect(
+  mapStateToProps,
+  actionsToConnect
+)(Header)

data/frontend/src/components/load-more/index.js

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react'
+import { EVENTS_SEARCH_LIMIT } from 'api'
+import RaisedButton from 'material-ui/RaisedButton'
+
+export default class LoadMore extends Component {
+  static get propTypes () {
+    return {
+      loadMoreSearchResults: PropTypes.func.isRequired,
+      xhrStatus: PropTypes.shape({ lastEventsLoadSize: PropTypes.number }).isRequired
+    }
+  }
+
+  render () {
+    return (
+      this.props.xhrStatus.lastEventsLoadSize === EVENTS_SEARCH_LIMIT &&
+        <RaisedButton
+          label='Load more'
+          onClick={() => this.props.loadMoreSearchResults()}
+          style={{margin: '10px'}}/>
+    )
+  }
+}

data/frontend/src/components/load-more/index.spec.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { shallow } from 'enzyme'
+
+import LoadMore from 'components/load-more'
+import { EVENTS_SEARCH_LIMIT } from 'api'
+
+import RaisedButton from 'material-ui/RaisedButton'
+
+describe('<LoadMore />', () => {
+  let props, wrapper
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    props = {
+      loadMoreSearchResults: jasmine.createSpy('loadMoreSearchResults'),
+      xhrStatus: {
+        lastEventsLoadSize: 1
+      }
+    }
+  })
+
+  describe('when events loaded equals event search limit', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        xhrStatus: {
+          lastEventsLoadSize: EVENTS_SEARCH_LIMIT
+        }
+      }
+      wrapper = shallow(<LoadMore {...props} />)
+    })
+
+    it('renders the load more button', () => {
+      expect(wrapper.find(RaisedButton).length).toEqual(1)
+    })
+  })
+
+  describe('when events loaded are less than event search limit', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        xhrStatus: {
+          lastEventsLoadSize: EVENTS_SEARCH_LIMIT - 1
+        }
+      }
+      wrapper = shallow(<LoadMore {...props} />)
+    })
+
+    it('does not render the load more button', () => {
+      expect(wrapper.find(RaisedButton).length).toEqual(0)
+    })
+  })
+})

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

@@ -6,8 +6,6 @@ import {
   changeSearchInputFilterValue
 } from 'actions/search-input-filter'
 
-import { triggerSearch } from 'actions/events-search'
-
 import SelectField from 'material-ui/SelectField'
 import MenuItem from 'material-ui/MenuItem'
 import TextField from 'material-ui/TextField'
@@ -28,11 +26,11 @@ const FILTER_TYPES = [
 export class SearchInput extends Component {
   static get propTypes () {
     return {
-      onSearch: PropTypes.func,
       onChangeFilterType: PropTypes.func,
       onChangeFilterValue: PropTypes.func,
       isFetchingEvents: PropTypes.bool,
 
+      triggerSearch: PropTypes.func.isRequired,
       filterType: PropTypes.string,
       filterValue: PropTypes.string
     }
@@ -80,7 +78,7 @@ export class SearchInput extends Component {
 
   search (e) {
     if (e && e.keyCode === ENTER_KEY || !e) {
-      this.props.onSearch()
+      this.props.triggerSearch()
     }
   }
 
@@ -98,7 +96,6 @@ const mapStateToProps = (state, ownProps) => (
 )
 
 export default connect(mapStateToProps, {
-  onSearch: triggerSearch,
   onChangeFilterType: changeSearchInputFilterType,
   onChangeFilterValue: changeSearchInputFilterValue
 })(SearchInput)