phobos_checkpoint_ui 0.1.0

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

@@ -0,0 +1,67 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount } from 'enzyme'
+import EventOverview, { formatEventTime } from 'components/event-overview'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+
+const mountComponent = (props) => mount(
+  <MuiThemeProvider muiTheme={getMuiTheme()}>
+    <EventOverview {...props} />
+  </MuiThemeProvider>
+)
+
+describe('<EventOverview />', () => {
+  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' } }
+    }
+
+    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/event-overview-dialog/event-overview-dialog.scss

@@ -0,0 +1,15 @@
+.event-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/event-overview-dialog/index.js

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

data/frontend/src/components/event-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 { hideEventRetry, performEventRetry } from 'actions/event-retry'
+
+import Dialog from 'material-ui/Dialog'
+import RaisedButton from 'material-ui/RaisedButton'
+
+class RetryDialog extends Component {
+  static get propTypes () {
+    return {
+      onHideRetry: PropTypes.func.isRequired,
+      onPerformRetry: PropTypes.func.isRequired,
+      isRetryingEvent: PropTypes.bool,
+      event: PropTypes.shape({
+        id: PropTypes.number,
+        retryVisible: PropTypes.bool
+      })
+    }
+  }
+
+  static get defaultProps () {
+    return {
+      event: {}
+    }
+  }
+
+  render () {
+    return (
+      <Dialog
+        modal={!!this.props.isRetryingEvent}
+        title='Are you sure?'
+        open={!!this.props.event.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.event.error}/>
+        </div>
+      </Dialog>
+    )
+  }
+
+  hide () {
+    this.props.onHideRetry(this.props.event)
+  }
+
+  performRetry () {
+    this.props.onPerformRetry(this.props.event)
+  }
+}
+
+const mapStateToProps = (state, ownProps) => (
+  Object.assign({
+    isRetryingEvent: state.xhrStatus.isRetryingEvent
+  }, ownProps)
+)
+
+export default connect(mapStateToProps, {
+  onHideRetry: hideEventRetry,
+  onPerformRetry: performEventRetry
+})(RetryDialog)

data/frontend/src/components/events-list/events-list.scss

@@ -0,0 +1,49 @@
+.events-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/events-list/index.js

@@ -0,0 +1,62 @@
+import React, { Component, PropTypes } from 'react'
+import moment from 'moment'
+import Event from 'components/event'
+
+const SECTION_DATE_FORMAT = 'MMM DD, YYYY'
+const EVENT_TIME_FORMAT = 'YYYY-MM-DD'
+
+export default class extends Component {
+  static get propTypes () {
+    return {
+      events: PropTypes.array
+    }
+  }
+
+  render () {
+    return (
+      <div className='events-list'>
+        <div className='timeline'>
+          {this.renderTimeline()}
+        </div>
+      </div>
+    )
+  }
+
+  renderTimeline () {
+    let day
+    let timeline = []
+
+    this.props.events.forEach((event) => {
+      const eventDay = formatEventDate(event.event_time)
+      if (day !== eventDay) {
+        day = eventDay
+        timeline.push(this.renderDayHeader(day))
+      }
+
+      timeline.push(
+        <Event key={`event-${event.id}`} event={event}/>
+      )
+    })
+
+    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/events-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/flash-message/flash-message.scss

@@ -0,0 +1,40 @@
+.flash-message {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  z-index: 2000;
+  height: 64px;
+  color: #fff;
+  font-family: 'Roboto';
+  font-size: 20px;
+  max-width: 95%;
+
+  .close {
+    transition: all ease-in-out 200ms;
+    position: absolute;
+    right: 10px;
+    cursor: pointer;
+    font-weight: lighter;
+    padding: 4px 12px;
+    border-radius: 50%;
+
+    &:hover {
+      color: black;
+      background-color: white;
+    }
+  }
+
+  &.success {
+    background-color: #5bbd66;
+  }
+
+  &.error {
+    background-color: #ff5f5f;
+  }
+}

data/frontend/src/components/flash-message/index.js

@@ -0,0 +1,45 @@
+import React, { Component, PropTypes } from 'react'
+
+export const AUTO_CLOSE_TIMEOUT = 5 * 1000
+
+export default class extends Component {
+  static get propTypes () {
+    return {
+      id: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      onClose: PropTypes.func.isRequired,
+      autoClose: PropTypes.bool
+    }
+  }
+
+  render () {
+    return (
+      <div className={`flash-message ${this.props.type}`}>
+        <span className='text'>{this.props.text}</span>
+        {this.closeButton()}
+      </div>
+    )
+  }
+
+  componentDidMount () {
+    if (this.props.autoClose) {
+      this.timeout = setTimeout(() => this.close(), AUTO_CLOSE_TIMEOUT)
+    }
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timeout)
+  }
+
+  closeButton () {
+    return !this.props.autoClose
+      ? <span onClick={() => this.close()} className='close'> &times;</span>
+      : null
+  }
+
+  close () {
+    this.props.onClose &&
+      this.props.onClose(this.props.id)
+  }
+}

data/frontend/src/components/flash-message/index.spec.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount } from 'enzyme'
+import FlashMessage, { AUTO_CLOSE_TIMEOUT } from 'components/flash-message'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+
+const mountComponent = (props) => mount(
+  <MuiThemeProvider muiTheme={getMuiTheme()}>
+    <FlashMessage {...props} />
+  </MuiThemeProvider>
+)
+
+describe('<FlashMessage />', () => {
+  let props, component, onClose
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    jasmine.clock().install()
+    onClose = jasmine.createSpy('onClose')
+
+    props = {
+      id: '1',
+      type: 'success',
+      text: 'lorem ipsum',
+      onClose: onClose
+    }
+    component = mountComponent(props)
+  })
+
+  afterEach(() => {
+    jasmine.clock().uninstall()
+  })
+
+  it('displays the message with the correct type', () => {
+    expect(component.text()).toMatch(props.text)
+    expect(component.find(`.flash-message.${props.type}`).length).toEqual(1)
+  })
+
+  describe('when X is clicked', () => {
+    it('calls onClose', () => {
+      component.find('.close').simulate('click')
+      expect(onClose).toHaveBeenCalledWith(props.id)
+    })
+  })
+
+  describe('with autoClose = true', () => {
+    beforeEach(() => {
+      Object.assign(props, { autoClose: true })
+      component = mountComponent(props)
+    })
+
+    it('calls onClose after AUTO_CLOSE_TIMEOUT time', () => {
+      expect(onClose).not.toHaveBeenCalled()
+      jasmine.clock().tick(AUTO_CLOSE_TIMEOUT)
+      expect(onClose).toHaveBeenCalledWith(props.id)
+    })
+  })
+})

data/frontend/src/components/flash-message-list/index.js

@@ -0,0 +1,34 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { deleteFlashMessage } from 'actions/flash-messages'
+
+import FlashMessage from 'components/flash-message'
+
+class FlashMessageList extends Component {
+  static get propTypes () {
+    return {
+      deleteFlashMessage: PropTypes.func.isRequired
+    }
+  }
+
+  render () {
+    return (
+      <div className='flash-message-list'>
+        {
+          this.props.flashMessages.map((message) => (
+            <FlashMessage
+              key={message.id}
+              onClose={this.props.deleteFlashMessage}
+              {...message}/>
+          ))
+        }
+      </div>
+    )
+  }
+}
+
+export default connect(
+  (state) => ({flashMessages: state.flashMessages}), {
+    deleteFlashMessage
+  }
+)(FlashMessageList)

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

@@ -0,0 +1,29 @@
+.header {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+
+  max-height: 64px;
+  box-sizing: border-box;
+
+  &:active,
+  &:visited,
+  &:hover {
+    color: white;
+  }
+
+  img {
+    height: 64px;
+    min-width: 54px;
+    margin: 5px 10px 5px 0;
+  }
+
+  .title {
+    transition: all ease-in-out 150ms;
+    color: white;
+
+    &:hover {
+      color: #999;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import configs from 'configs'
+import AppBar from 'material-ui/AppBar'
+import Chip from 'material-ui/Chip'
+import { Link } from 'react-router'
+
+const DEFAULT_TITLE = 'Phobos Checkpoint'
+
+const style = {
+  bar: {
+    backgroundColor: '#302e3a'
+  },
+  title: {
+    color: '#fff',
+    fontFamily: 'Roboto',
+    fontWeight: 'lighter'
+  },
+  envLabel: {
+    marginLeft: 30
+  }
+}
+
+export default class extends Component {
+  render () {
+    return (
+      <AppBar
+        title={this.logo()}
+        showMenuIconButton={false}
+        style={style.bar}
+        titleStyle={style.title}/>
+    )
+  }
+
+  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>
+    )
+  }
+}