phobos_checkpoint_ui 0.1.0

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

@@ -0,0 +1,104 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import {
+  changeSearchInputFilterType,
+  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'
+import SearchSVG from 'material-ui/svg-icons/action/search'
+import RaisedButton from 'material-ui/RaisedButton'
+import CircularProgress from 'material-ui/CircularProgress'
+
+import { DEFAULT_FILTER_TYPE } from 'reducers/events-filters'
+
+export const ENTER_KEY = 13
+const FILTER_TYPES = [
+  'entity_id',
+  'event_type',
+  'group_id',
+  'topic'
+]
+
+export class SearchInput extends Component {
+  static get propTypes () {
+    return {
+      onSearch: PropTypes.func,
+      onChangeFilterType: PropTypes.func,
+      onChangeFilterValue: PropTypes.func,
+      isFetchingEvents: PropTypes.bool,
+
+      filterType: PropTypes.string,
+      filterValue: PropTypes.string
+    }
+  }
+
+  render () {
+    return (
+      <div className='search-input'>
+        <SelectField
+          style={{width: '140px'}}
+          value={this.props.filterType || DEFAULT_FILTER_TYPE}
+          onChange={(e, index, value) => this.changeFilterType(value)}>
+          {
+            FILTER_TYPES.map((type) => (
+              <MenuItem
+                key={type}
+                value={type}
+                primaryText={type} />
+            ))
+          }
+        </SelectField>
+        <TextField
+          name='filterValue'
+          style={{width: '100%'}}
+          onChange={(e) => this.changeFilterValue(e.target.value)}
+          onKeyDown={(e) => this.search(e)}
+          value={this.props.filterValue || ''}
+          hintText='Press ENTER to search' />
+        <RaisedButton
+          primary
+          onClick={() => this.search()}
+          style={{height: '50px', marginLeft: '20px'}}
+          icon={this.getButtonIcon()} />
+      </div>
+    )
+  }
+
+  changeFilterType (value) {
+    this.props.onChangeFilterType(value)
+  }
+
+  changeFilterValue (value) {
+    this.props.onChangeFilterValue(value)
+  }
+
+  search (e) {
+    if (e && e.keyCode === ENTER_KEY || !e) {
+      this.props.onSearch()
+    }
+  }
+
+  getButtonIcon () {
+    return this.props.isFetchingEvents
+      ? <CircularProgress size={0.4}/>
+      : <SearchSVG color={'#fff'} style={{width: 30, height: 50}}/>
+  }
+}
+
+const mapStateToProps = (state, ownProps) => (
+  Object.assign({
+    isFetchingEvents: state.xhrStatus.isFetchingEvents
+  }, ownProps)
+)
+
+export default connect(mapStateToProps, {
+  onSearch: triggerSearch,
+  onChangeFilterType: changeSearchInputFilterType,
+  onChangeFilterValue: changeSearchInputFilterValue
+})(SearchInput)

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

@@ -0,0 +1,56 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount } from 'enzyme'
+import { SearchInput, ENTER_KEY } from 'components/search-input'
+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()}>
+      <SearchInput {...props} />
+    </MuiThemeProvider>
+  </Provider>
+)
+
+describe('<SearchInput />', () => {
+  let props, component, store
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    store = mockStore({})
+
+    props = {
+      onSearch: jasmine.createSpy('onSearch'),
+      onChangeFilterType: jasmine.createSpy('onChangeFilterType'),
+      onChangeFilterValue: jasmine.createSpy('onChangeFilterValue'),
+      isFetchingEvents: false,
+
+      filterType: 'entity_id',
+      filterValue: '12345'
+    }
+
+    component = mountComponent(store, props)
+  })
+
+  it('calls onChangeFilterValue with the new value when type is changed', () => {
+    component.find('input').simulate('change', { target: { value: 'new-value' } })
+    expect(props.onChangeFilterValue).toHaveBeenCalledWith('new-value')
+  })
+
+  it('calls onSearch when ENTER is pressed in the textfield', () => {
+    component.find('input').simulate('keyDown', { keyCode: ENTER_KEY })
+    expect(props.onSearch).toHaveBeenCalled()
+  })
+
+  it('calls onSearch when the search button is pressed', () => {
+    component.find('button').simulate('click')
+    expect(props.onSearch).toHaveBeenCalled()
+  })
+})

data/frontend/src/components/search-input/search-input.scss

@@ -0,0 +1,7 @@
+.search-input {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  padding: 5px 30px;
+  margin: 0 10px;
+}

data/frontend/src/configs.js

@@ -0,0 +1,15 @@
+import API from 'api'
+
+let config
+
+export function load () {
+  return API.Config
+    .load()
+    .then((response) => {
+      config = response.data
+    })
+}
+
+export default function get () {
+  return Object.assign({}, config)
+}

data/frontend/src/helpers.spec.js

@@ -0,0 +1,2 @@
+import injectTapEventPlugin from 'react-tap-event-plugin'
+injectTapEventPlugin()

data/frontend/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>PhobosCheckpoint</title>
+  <meta charset="utf-8" />
+</head>
+<body>
+  <div id="root">
+    <div class='loading-boot'>Loading...</div>
+  </div>
+</body>
+</html>

data/frontend/src/index.js

@@ -0,0 +1,26 @@
+import './index.scss'
+
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import injectTapEventPlugin from 'react-tap-event-plugin'
+injectTapEventPlugin()
+
+import store from 'store'
+import Routes from 'routes'
+import { load } from 'configs'
+
+const Root = (
+  <Provider store={store}>
+    {Routes}
+  </Provider>
+)
+
+const mountNode = document.getElementById('root')
+
+load()
+  .then(() => render(Root, mountNode))
+  .catch(() => render(
+    <div className='load-error'>Failed to load configs</div>,
+    mountNode
+  ))

data/frontend/src/index.scss

@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #root {
+  height: 100%
+}
+
+body {
+  background-color: #ccc;
+  color: #d0d0d0;
+}
+
+.loading-boot,
+.load-error {
+  margin: 0 auto;
+  color: black;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  font-size: 40px;
+  padding-top: 100px;
+}
+
+.load-error {
+  color: #ff5f5f;
+}

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

@@ -0,0 +1,32 @@
+import {
+  EVENT_SHOW_RETRY,
+  EVENT_HIDE_RETRY,
+  EVENT_HIDE_OVERVIEW,
+  RECEIVE_EVENT_DETAILS
+} from 'actions'
+
+function patchEvent (state, action, params) {
+  if (state.id === action.event.id) {
+    return Object.assign(state, params)
+  }
+  return state
+}
+
+export default (state = {}, action) => {
+  switch (action.type) {
+    case EVENT_SHOW_RETRY:
+      return patchEvent(state, action, { retryVisible: true })
+
+    case EVENT_HIDE_RETRY:
+      return patchEvent(state, action, { retryVisible: false })
+
+    case EVENT_HIDE_OVERVIEW:
+      return {}
+
+    case RECEIVE_EVENT_DETAILS:
+      return action.event
+
+    default:
+      return state
+  }
+}

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

@@ -0,0 +1,54 @@
+import {
+  EVENT_SHOW_RETRY,
+  EVENT_HIDE_RETRY,
+  EVENT_HIDE_OVERVIEW,
+  RECEIVE_EVENT_DETAILS
+} from 'actions'
+
+import reducer from 'reducers/event-details'
+
+describe('reducers/events-details', () => {
+  describe('for EVENT_SHOW_RETRY', () => {
+    it('sets retryVisible to true', () => {
+      const currentState = { id: 1 }
+      const action = { type: EVENT_SHOW_RETRY, event: { id: 1 } }
+      const expectedState = { id: 1, retryVisible: true }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for EVENT_HIDE_RETRY', () => {
+    it('sets retryVisible to false', () => {
+      const currentState = { id: 1 }
+      const action = { type: EVENT_HIDE_RETRY, event: { id: 1 } }
+      const expectedState = { id: 1, retryVisible: false }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for EVENT_HIDE_OVERVIEW', () => {
+    it('erases the state', () => {
+      const currentState = { id: 1 }
+      const action = { type: EVENT_HIDE_OVERVIEW, event: { id: 1 } }
+      const expectedState = { }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_EVENT_DETAILS', () => {
+    it('replaces the state', () => {
+      const currentState = { id: 1 }
+      const action = { type: RECEIVE_EVENT_DETAILS, event: { id: 2 } }
+      const expectedState = { id: 2 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for default', () => {
+    it('returns the currentState', () => {
+      const currentState = { current: true }
+      const action = { type: 'another' }
+      expect(reducer(currentState, action)).toEqual(currentState)
+    })
+  })
+})

data/frontend/src/reducers/events-filters.js

@@ -0,0 +1,17 @@
+import { SEARCH_INPUT_CHANGE_FILTER_TYPE, SEARCH_INPUT_CHANGE_FILTER_VALUE } from 'actions'
+
+export const DEFAULT_FILTER_TYPE = 'entity_id'
+const initialState = { type: DEFAULT_FILTER_TYPE }
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case SEARCH_INPUT_CHANGE_FILTER_TYPE:
+      return Object.assign({}, state, { type: action.filterType })
+
+    case SEARCH_INPUT_CHANGE_FILTER_VALUE:
+      return Object.assign({}, state, { value: action.filterValue })
+
+    default:
+      return state
+  }
+}

data/frontend/src/reducers/events-filters.spec.js

@@ -0,0 +1,34 @@
+import {
+  SEARCH_INPUT_CHANGE_FILTER_TYPE,
+  SEARCH_INPUT_CHANGE_FILTER_VALUE
+} from 'actions'
+
+import reducer from 'reducers/events-filters'
+
+describe('reducers/events-filters', () => {
+  describe('for SEARCH_INPUT_CHANGE_FILTER_TYPE', () => {
+    it('sets type', () => {
+      const currentState = { type: 'foo' }
+      const action = { type: SEARCH_INPUT_CHANGE_FILTER_TYPE, filterType: 'bar' }
+      const expectedState = { type: 'bar' }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for SEARCH_INPUT_CHANGE_FILTER_VALUE', () => {
+    it('sets type', () => {
+      const currentState = { value: 'foo' }
+      const action = { type: SEARCH_INPUT_CHANGE_FILTER_VALUE, filterValue: 'bar' }
+      const expectedState = { value: 'bar' }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for default', () => {
+    it('returns the currentState', () => {
+      const currentState = { current: true }
+      const action = { type: 'another' }
+      expect(reducer(currentState, action)).toEqual(currentState)
+    })
+  })
+})

data/frontend/src/reducers/events.js

@@ -0,0 +1,48 @@
+import {
+  EVENT_SHOW_OVERVIEW,
+  EVENT_HIDE_OVERVIEW,
+  RECEIVE_SEARCH_RESULTS,
+  EVENT_SHOW_RETRY,
+  EVENT_HIDE_RETRY,
+  RECEIVE_EVENT_RETRY,
+  REQUEST_EVENT_RETRY_FAILED
+} from 'actions'
+
+function patchEvent (state, action, params) {
+  return state.map((event) => {
+    if (event.id === action.event.id) {
+      return Object.assign({}, event, params)
+    }
+    return event
+  })
+}
+
+export default (state = [], action) => {
+  switch (action.type) {
+    case EVENT_SHOW_OVERVIEW:
+      return patchEvent(state, action, { overviewVisible: true })
+
+    case EVENT_HIDE_OVERVIEW:
+      return patchEvent(state, action, { overviewVisible: false, error: null })
+
+    case RECEIVE_SEARCH_RESULTS:
+      return action.offset <= 0
+        ? action.events
+        : state.concat(action.events)
+
+    case EVENT_SHOW_RETRY:
+      return patchEvent(state, action, { retryVisible: true })
+
+    case EVENT_HIDE_RETRY:
+      return patchEvent(state, action, { retryVisible: false, error: null })
+
+    case RECEIVE_EVENT_RETRY:
+      return patchEvent(state, action, { acknowledged: action.acknowledged, error: null })
+
+    case REQUEST_EVENT_RETRY_FAILED:
+      return patchEvent(state, action, { error: action.error })
+
+    default:
+      return state
+  }
+}

data/frontend/src/reducers/events.spec.js

@@ -0,0 +1,95 @@
+import {
+  EVENT_SHOW_OVERVIEW,
+  EVENT_HIDE_OVERVIEW,
+  RECEIVE_SEARCH_RESULTS,
+  EVENT_SHOW_RETRY,
+  EVENT_HIDE_RETRY,
+  RECEIVE_EVENT_RETRY,
+  REQUEST_EVENT_RETRY_FAILED
+} from 'actions'
+
+import reducer from 'reducers/events'
+
+describe('reducers/events', () => {
+  describe('for EVENT_SHOW_OVERVIEW', () => {
+    it('sets overviewVisible for the specific event to true', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: EVENT_SHOW_OVERVIEW, event: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, overviewVisible: true }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for EVENT_HIDE_OVERVIEW', () => {
+    it('sets overviewVisible to false and erase errors for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2, overviewVisible: true }, { id: 3 }]
+      const action = { type: EVENT_HIDE_OVERVIEW, event: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, overviewVisible: false, error: null }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_SEARCH_RESULTS', () => {
+    describe('when offset less or equal to 0', () => {
+      it('overrides events with action events', () => {
+        const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+        const action = { type: RECEIVE_SEARCH_RESULTS, offset: 0, events: [{ id: 4 }] }
+        const expectedState = [{ id: 4 }]
+        expect(reducer(currentState, action)).toEqual(expectedState)
+      })
+    })
+
+    describe('when offset is greater than 0', () => {
+      it('add the new events to state', () => {
+        const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+        const action = { type: RECEIVE_SEARCH_RESULTS, offset: 1, events: [{ id: 4 }] }
+        const expectedState = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
+        expect(reducer(currentState, action)).toEqual(expectedState)
+      })
+    })
+  })
+
+  describe('for EVENT_SHOW_RETRY', () => {
+    it('sets retryVisible for the specific event to true', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: EVENT_SHOW_RETRY, event: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, retryVisible: true }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for EVENT_HIDE_RETRY', () => {
+    it('sets retryVisible to false and erase errors for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2, retryVisible: true }, { id: 3 }]
+      const action = { type: EVENT_HIDE_RETRY, event: { id: 2 } }
+      const expectedState = [{ id: 1 }, { id: 2, retryVisible: false, error: null }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_EVENT_RETRY', () => {
+    it('sets acknowledged and erase errors for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: RECEIVE_EVENT_RETRY, event: { id: 2 }, acknowledged: true }
+      const expectedState = [{ id: 1 }, { id: 2, acknowledged: true, error: null }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_EVENT_RETRY_FAILED', () => {
+    it('sets error for a specific', () => {
+      const currentState = [{ id: 1 }, { id: 2 }, { id: 3 }]
+      const action = { type: REQUEST_EVENT_RETRY_FAILED, event: { id: 2 }, error: 'some error' }
+      const expectedState = [{ id: 1 }, { id: 2, error: 'some error' }, { id: 3 }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for default', () => {
+    it('returns the currentState', () => {
+      const currentState = { current: true }
+      const action = { type: 'another' }
+      expect(reducer(currentState, action)).toEqual(currentState)
+    })
+  })
+})

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

@@ -0,0 +1,14 @@
+import { ADD_FLASH_MESSAGE, DELETE_FLASH_MESSAGE } from 'actions'
+
+export default (state = [], action) => {
+  switch (action.type) {
+    case ADD_FLASH_MESSAGE:
+      return [...state, action.message]
+
+    case DELETE_FLASH_MESSAGE:
+      return state.filter((message) => message.id !== action.id)
+
+    default:
+      return state
+  }
+}

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

@@ -0,0 +1,34 @@
+import {
+  ADD_FLASH_MESSAGE,
+  DELETE_FLASH_MESSAGE
+} from 'actions'
+
+import reducer from 'reducers/flash-messages'
+
+describe('reducers/flash-messages', () => {
+  describe('for ADD_FLASH_MESSAGE', () => {
+    it('adds a new message', () => {
+      const currentState = []
+      const action = { type: ADD_FLASH_MESSAGE, message: { id: 1, type: 'success' } }
+      const expectedState = [action.message]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for DELETE_FLASH_MESSAGE', () => {
+    it('deletes the message by id', () => {
+      const currentState = [{ id: 1, type: 'success' }, { id: 2, type: 'error' }]
+      const action = { type: DELETE_FLASH_MESSAGE, id: 2 }
+      const expectedState = [{ id: 1, type: 'success' }]
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for default', () => {
+    it('returns the currentState', () => {
+      const currentState = { current: true }
+      const action = { type: 'another' }
+      expect(reducer(currentState, action)).toEqual(currentState)
+    })
+  })
+})

data/frontend/src/reducers/index.js

@@ -0,0 +1,18 @@
+import { combineReducers } from 'redux'
+import { routerReducer } from 'react-router-redux'
+
+import events from 'reducers/events'
+import eventDetails from 'reducers/event-details'
+import eventsFilters from 'reducers/events-filters'
+import xhrStatus from 'reducers/xhr-status'
+import flashMessages from 'reducers/flash-messages'
+
+export default combineReducers({
+  xhrStatus,
+  flashMessages,
+  eventsFilters,
+  eventDetails,
+  events,
+
+  routing: routerReducer
+})

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

@@ -0,0 +1,20 @@
+import reducer from 'reducers'
+
+describe('reducers', () => {
+  it('without actions returns the initial state', () => {
+    expect(reducer(undefined, {})).toEqual({
+      xhrStatus: {
+        isFetchingEvents: false,
+        isRetryingEvent: false,
+        isFetchingEventDetails: false,
+        currentEventsOffset: 0,
+        lastEventsLoadSize: 0
+      },
+      flashMessages: [],
+      eventsFilters: { type: 'entity_id' },
+      eventDetails: {},
+      events: [],
+      routing: { locationBeforeTransitions: null }
+    })
+  })
+})