phobos_checkpoint_ui 0.1.0

data/frontend/src/reducers/xhr-status.js

@@ -0,0 +1,75 @@
+import {
+  REQUEST_SEARCH_RESULTS,
+  RECEIVE_SEARCH_RESULTS,
+  REQUEST_SEARCH_RESULTS_FAILED,
+  LOAD_MORE_SEARCH_RESULTS,
+  TRIGGER_SEARCH,
+  REQUEST_EVENT_RETRY,
+  RECEIVE_EVENT_RETRY,
+  REQUEST_EVENT_RETRY_FAILED,
+  REQUEST_EVENT_DETAILS,
+  RECEIVE_EVENT_DETAILS
+} from 'actions'
+
+const initialState = {
+  isFetchingEvents: false,
+  isRetryingEvent: false,
+  isFetchingEventDetails: false,
+  currentEventsOffset: 0,
+  lastEventsLoadSize: 0
+}
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case TRIGGER_SEARCH:
+      return Object.assign({}, state, {
+        currentEventsOffset: 0,
+        lastEventsLoadSize: 0
+      })
+
+    case REQUEST_SEARCH_RESULTS:
+      return Object.assign({}, state, {
+        isFetchingEvents: true
+      })
+
+    case RECEIVE_SEARCH_RESULTS:
+      return Object.assign({}, state, {
+        isFetchingEvents: false,
+        lastEventsLoadSize: action.events.length
+      })
+
+    case REQUEST_SEARCH_RESULTS_FAILED:
+      return Object.assign({}, state, {
+        isFetchingEvents: false
+      })
+
+    case LOAD_MORE_SEARCH_RESULTS:
+      return Object.assign({}, state, {
+        currentEventsOffset: action.offset
+      })
+
+    case REQUEST_EVENT_RETRY:
+      return Object.assign({}, state, {
+        isRetryingEvent: true
+      })
+
+    case RECEIVE_EVENT_RETRY:
+    case REQUEST_EVENT_RETRY_FAILED:
+      return Object.assign({}, state, {
+        isRetryingEvent: false
+      })
+
+    case REQUEST_EVENT_DETAILS:
+      return Object.assign({}, state, {
+        isFetchingEventDetails: true
+      })
+
+    case RECEIVE_EVENT_DETAILS:
+      return Object.assign({}, state, {
+        isFetchingEventDetails: false
+      })
+
+    default:
+      return state
+  }
+}

data/frontend/src/reducers/xhr-status.spec.js

@@ -0,0 +1,94 @@
+import {
+  TRIGGER_SEARCH,
+  REQUEST_SEARCH_RESULTS,
+  RECEIVE_SEARCH_RESULTS,
+  REQUEST_SEARCH_RESULTS_FAILED,
+  LOAD_MORE_SEARCH_RESULTS,
+  REQUEST_EVENT_RETRY,
+  RECEIVE_EVENT_RETRY,
+  REQUEST_EVENT_RETRY_FAILED
+} from 'actions'
+
+import reducer from 'reducers/xhr-status'
+
+describe('reducers/xhr-status', () => {
+  describe('for TRIGGER_SEARCH', () => {
+    it('resets currentEventsOffset and lastEventsLoadSize', () => {
+      const currentState = { currentEventsOffset: 5, lastEventsLoadSize: 10 }
+      const action = { type: TRIGGER_SEARCH }
+      const expectedState = { currentEventsOffset: 0, lastEventsLoadSize: 0 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_SEARCH_RESULTS', () => {
+    it('enables isFetchingEvents', () => {
+      const currentState = { isFetchingEvents: false }
+      const action = { type: REQUEST_SEARCH_RESULTS }
+      const expectedState = { isFetchingEvents: true }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_SEARCH_RESULTS', () => {
+    it('disables isFetchingEvents and keep the load size', () => {
+      const currentState = { isFetchingEvents: true }
+      const action = { type: RECEIVE_SEARCH_RESULTS, events: ['A', 'B', 'C'] }
+      const expectedState = { isFetchingEvents: false, lastEventsLoadSize: 3 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_SEARCH_RESULTS_FAILED', () => {
+    it('disables isFetchingEvents', () => {
+      const currentState = { isFetchingEvents: true }
+      const action = { type: REQUEST_SEARCH_RESULTS_FAILED }
+      const expectedState = { isFetchingEvents: false }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for LOAD_MORE_SEARCH_RESULTS', () => {
+    it('updates currentEventsOffset', () => {
+      const currentState = { currentEventsOffset: 0 }
+      const action = { type: LOAD_MORE_SEARCH_RESULTS, offset: 3 }
+      const expectedState = { currentEventsOffset: 3 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_EVENT_RETRY', () => {
+    it('enables isRetryingEvent', () => {
+      const currentState = { isRetryingEvent: false }
+      const action = { type: REQUEST_EVENT_RETRY }
+      const expectedState = { isRetryingEvent: true }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_EVENT_RETRY', () => {
+    it('disables isRetryingEvent', () => {
+      const currentState = { isRetryingEvent: true }
+      const action = { type: RECEIVE_EVENT_RETRY }
+      const expectedState = { isRetryingEvent: false }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_EVENT_RETRY_FAILED', () => {
+    it('disables isRetryingEvent', () => {
+      const currentState = { isRetryingEvent: true }
+      const action = { type: REQUEST_EVENT_RETRY_FAILED }
+      const expectedState = { isRetryingEvent: false }
+      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/routes.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Router, Route, IndexRedirect, browserHistory } from 'react-router'
+import { syncHistoryWithStore } from 'react-router-redux'
+
+import store from 'store'
+import Layout from 'views/layout'
+import EventsSearch from 'views/events-search'
+import EventDetails from 'views/event-details'
+
+export const history = syncHistoryWithStore(browserHistory, store)
+
+export default (
+  <Router history={history}>
+    <Route path='/' component={Layout}>
+      <IndexRedirect to='/events' />
+      <Route path='/events' component={EventsSearch} />
+      <Route path='/events/:id' component={EventDetails} />
+    </Route>
+  </Router>
+)

data/frontend/src/store.js

@@ -0,0 +1,15 @@
+import { createStore, applyMiddleware, compose } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+
+import reducer from 'reducers'
+
+const store = createStore(
+  reducer,
+  {}, // initial state
+  compose(
+    applyMiddleware(thunkMiddleware), // for async actions
+    window.devToolsExtension ? window.devToolsExtension() : (f) => f
+  )
+)
+
+export default store

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

@@ -0,0 +1,50 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { history } from 'routes'
+
+import { fetchEventDetails } from 'actions/event-details'
+import EventOverviewDialog from 'components/event-overview-dialog'
+import EventRetryDialog from 'components/event-retry-dialog'
+
+class EventDetails extends Component {
+  static get propTypes () {
+    return {
+      fetchEventDetails: PropTypes.func.isRequired
+    }
+  }
+
+  componentDidMount () {
+    this.props.params.id &&
+      this.props.fetchEventDetails({ id: this.props.params.id })
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.isDialogClosed(prevProps)) {
+      history.push('/events')
+    }
+  }
+
+  render () {
+    const details = this.props.eventDetails
+    const visible = !!details.id
+    const event = Object.assign({ overviewVisible: visible }, details)
+
+    return (
+      <div className='event-details'>
+        <EventOverviewDialog event={event} />
+        <EventRetryDialog event={event} />
+      </div>
+    )
+  }
+
+  isDialogClosed (prevProps) {
+    return prevProps.eventDetails.id !== undefined &&
+      this.props.eventDetails.id === undefined
+  }
+}
+
+export default connect(
+  (state) => state, {
+    fetchEventDetails
+  }
+)(EventDetails)

data/frontend/src/views/events-search.js

@@ -0,0 +1,112 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { EVENTS_SEARCH_LIMIT } from 'api'
+
+import EventsList from 'components/events-list'
+import SearchInput from 'components/search-input'
+import CircularProgress from 'material-ui/CircularProgress'
+import RaisedButton from 'material-ui/RaisedButton'
+
+import { fetchSearchResults, loadMoreSearchResults } from 'actions/events-search'
+import { changeSearchInputFilterType, changeSearchInputFilterValue } from 'actions/search-input-filter'
+import { showEventOverview } from 'actions/event-overview'
+
+export class EventsSearch extends Component {
+  static get propTypes () {
+    return {
+      fetchSearchResults: PropTypes.func.isRequired,
+      loadMoreSearchResults: PropTypes.func.isRequired,
+      changeSearchInputFilterType: PropTypes.func.isRequired,
+      changeSearchInputFilterValue: PropTypes.func.isRequired,
+      showEventOverview: PropTypes.func.isRequired
+    }
+  }
+
+  componentDidMount () {
+    const { type, value } = this.props.location.query
+    if (type && value) {
+      this.props.changeSearchInputFilterType(type)
+      this.props.changeSearchInputFilterValue(value)
+    }
+
+    this.props.events.length === 0 &&
+      this.props.fetchSearchResults({ offset: 0 })
+  }
+
+  render () {
+    const { events } = this.props
+    const { type, value } = this.props.eventsFilters
+
+    return (
+      <div className='events-search'>
+        <SearchInput filterType={type} filterValue={value}/>
+        <div>
+          <EventsList events={events} />
+          <LoadMore {...this.props} />
+          <EmptyEvent
+            events={events}
+            isFetchingEvents={this.props.xhrStatus.isFetchingEvents}/>
+        </div>
+        {
+          this.isFetchingFirstPage() &&
+            <div className='page-loader'>
+              <CircularProgress />
+            </div>
+        }
+      </div>
+    )
+  }
+
+  isFetchingFirstPage () {
+    return this.props.xhrStatus.isFetchingEvents &&
+      this.props.events.length === 0
+  }
+}
+
+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'}}/>
+    )
+  }
+}
+
+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>
+    )
+  }
+}
+
+export default connect(
+  (state) => state, {
+    fetchSearchResults,
+    loadMoreSearchResults,
+    changeSearchInputFilterType,
+    changeSearchInputFilterValue,
+    showEventOverview
+  }
+)(EventsSearch)

data/frontend/src/views/events-search.scss

@@ -0,0 +1,24 @@
+.events-search {
+  max-width: 1020px;
+  min-height: 100%;
+
+  background-color: #e4e4e4;
+  margin: 0 auto;
+  padding: 20px 0;
+
+  .page-loader {
+    text-align: center;
+    padding: 50px 0;
+  }
+
+  .empty-event {
+    margin: 50px 15px 0;
+    font-size: 30px;
+    font-weight: lighter;
+    font-family: Roboto;
+  }
+
+  & > .event {
+    margin: 10px 10px;
+  }
+}

data/frontend/src/views/events-search.spec.js

@@ -0,0 +1,96 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount } from 'enzyme'
+import { EventsSearch } from 'views/events-search'
+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()}>
+      <EventsSearch {...props} />
+    </MuiThemeProvider>
+  </Provider>
+)
+
+describe('view <EventsSearch />', () => {
+  let props, component, store
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    store = mockStore({
+      xhrStatus: {
+        isRetryingEvent: false
+      }
+    })
+
+    props = {
+      fetchSearchResults: jasmine.createSpy('fetchSearchResults'),
+      loadMoreSearchResults: jasmine.createSpy('loadMoreSearchResults'),
+      changeSearchInputFilterType: jasmine.createSpy('changeSearchInputFilterType'),
+      changeSearchInputFilterValue: jasmine.createSpy('changeSearchInputFilterValue'),
+      showEventOverview: jasmine.createSpy('showEventOverview'),
+
+      xhrStatus: { isFetchingEvents: false, lastEventsLoadSize: 0 },
+      location: { query: {} },
+      eventsFilters: {},
+      events: [{ id: 1 }, { id: 2 }]
+    }
+
+    component = mountComponent(store, props)
+  })
+
+  it('renders <SearchInput />', () => {
+    expect(component.find('.search-input').length).toEqual(1)
+  })
+
+  it('renders <EventsList />', () => {
+    expect(component.find('.events-list').length).toEqual(1)
+  })
+
+  it('does not render <EventsSearch.EmptyEvent />', () => {
+    expect(component.find('.empty-event').length).toEqual(0)
+  })
+
+  describe('when it initializes with filter type and value', () => {
+    beforeEach(() => {
+      Object.assign(props, {
+        location: { query: {
+          type: 'entity_id',
+          value: '12345'
+        }}
+      })
+
+      component = mountComponent(store, props)
+    })
+
+    it('calls changeSearchInputFilterType with type', () => {
+      expect(props.changeSearchInputFilterType).toHaveBeenCalledWith('entity_id')
+    })
+
+    it('calls changeSearchInputFilterValue with value', () => {
+      expect(props.changeSearchInputFilterValue).toHaveBeenCalledWith('12345')
+    })
+  })
+
+  describe('when events is empty', () => {
+    beforeEach(() => {
+      Object.assign(props, { events: [] })
+      component = mountComponent(store, props)
+    })
+
+    it('calls fetchSearchResults with offset 0', () => {
+      expect(props.fetchSearchResults).toHaveBeenCalledWith({ offset: 0 })
+    })
+
+    it('renders <EventsSearch.EmptyEvent />', () => {
+      expect(component.find('.empty-event').length).toEqual(1)
+    })
+  })
+})

data/frontend/src/views/layout.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+
+import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import getMuiTheme from 'material-ui/styles/getMuiTheme'
+
+import Header from 'components/header'
+import FlashMessageList from 'components/flash-message-list'
+
+const theme = getMuiTheme(lightBaseTheme)
+
+export default class extends Component {
+  render () {
+    return (
+      <MuiThemeProvider muiTheme={theme}>
+        <div className='layout'>
+          <Header />
+          <FlashMessageList />
+          {React.cloneElement(this.props.children)}
+        </div>
+      </MuiThemeProvider>
+    )
+  }
+}

data/frontend/src/views/layout.scss

@@ -0,0 +1,3 @@
+.layout {
+  height: 100%
+}

data/lib/phobos_checkpoint_ui/app.rb

@@ -0,0 +1,11 @@
+module PhobosCheckpointUI
+  module App
+    def self.new(api_app, configs = {})
+      StaticApp.configs = configs
+      Rack::URLMap.new(
+        '/' => StaticApp,
+        '/api' => api_app
+      )
+    end
+  end
+end

data/lib/phobos_checkpoint_ui/static_app.rb

@@ -0,0 +1,19 @@
+module PhobosCheckpointUI
+  class StaticApp < Sinatra::Base
+    class << self
+      attr_accessor :configs
+    end
+
+    set :logging, nil
+    set :public_folder, -> { File.join(Dir.pwd, 'public') }
+
+    get '/configs' do
+      content_type :json
+      self.class.configs.to_json
+    end
+
+    get '/*' do
+      send_file File.join(settings.public_folder, 'index.html')
+    end
+  end
+end

data/lib/phobos_checkpoint_ui/tasks.rb

@@ -0,0 +1,20 @@
+require 'rake'
+require 'fileutils'
+
+module PhobosCheckpointUI
+  module Tasks
+    extend Rake::DSL if defined? Rake::DSL
+
+    namespace :phobos_checkpoint_ui do
+      desc 'Copy Assets to ./public folder. It creates the folder if it doesn\'t exist'
+      task :copy_assets do
+        folder = File.join(Dir.pwd, 'public')
+        assets = File.expand_path(File.join(File.dirname(__FILE__), '../../assets'))
+        FileUtils.rm_rf(folder)
+        FileUtils.mkdir_p(folder)
+        FileUtils.cp_r(assets, File.join(folder, 'assets'))
+        FileUtils.mv(File.join(folder, 'assets/index.html'), File.join(folder, 'index.html'))
+      end
+    end
+  end
+end

data/lib/phobos_checkpoint_ui/version.rb

@@ -0,0 +1,3 @@
+module PhobosCheckpointUI
+  VERSION = '0.1.0'
+end

data/lib/phobos_checkpoint_ui.rb

@@ -0,0 +1,10 @@
+require 'json'
+require 'rack'
+require 'sinatra'
+
+require 'phobos_checkpoint_ui/version'
+require 'phobos_checkpoint_ui/static_app'
+require 'phobos_checkpoint_ui/app'
+
+module PhobosCheckpointUI
+end

data/phobos_checkpoint_ui.gemspec

@@ -0,0 +1,53 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'phobos_checkpoint_ui/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'phobos_checkpoint_ui'
+  spec.version       = PhobosCheckpointUI::VERSION
+  spec.authors       = [
+    'Túlio Ornelas',
+    'Mathias Klippinge',
+    'Sergey Evstifeev',
+    'Thiago R. Colucci',
+    'Martin Svalin',
+    'Francisco Juan'
+  ]
+  spec.email         = [
+    'ornelas.tulio@gmail.com',
+    'mathias.klippinge@gmail.com',
+    'sergey.evstifeev@gmail.com',
+    'ticolucci@gmail.com',
+    'martin@lite.nu',
+    'francisco.juan@gmail.com'
+  ]
+
+  spec.summary       = 'Phobos Checkpoint UI is a GUI for phobos checkpoint API'
+  spec.description   = 'Phobos Checkpoint UI is a GUI for phobos checkpoint API, it is compatible with https://github.com/klarna/phobos_db_checkpoint'
+  spec.homepage      = 'https://github.com/klarna/phobos_checkpoint_ui'
+  spec.license       = 'MIT'
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata['allowed_push_host'] = 'https://rubygems.org'
+  else
+    raise 'RubyGems 2.0 or newer is required to protect against public gem pushes.'
+  end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = 'bin'
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.require_paths = ['lib']
+
+  spec.add_development_dependency 'bundler', '~> 1.12'
+  spec.add_development_dependency 'rake', '~> 10.0'
+  spec.add_development_dependency 'rspec', '~> 3.0'
+  spec.add_development_dependency 'pry-byebug'
+  spec.add_development_dependency 'rack-test'
+  spec.add_development_dependency 'rspec_junit_formatter', '0.2.2'
+
+  spec.add_dependency 'rake'
+  spec.add_dependency 'sinatra'
+end