phobos_checkpoint_ui 0.4.0 → 1.0.0.rc1

data/frontend/src/views/{events-search.js → events/search/index.js}

@@ -1,13 +1,13 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { EVENTS_SEARCH_LIMIT } from 'api'
 
+import LoadMore from 'components/load-more'
+import EmptyEvent from 'components/empty-event'
 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 { fetchSearchResults, loadMoreSearchResults, triggerSearch } from 'actions/events-search'
 import { changeSearchInputFilterType, changeSearchInputFilterValue } from 'actions/search-input-filter'
 import { showEventOverview } from 'actions/event-overview'
 
@@ -16,9 +16,39 @@ export class EventsSearch extends Component {
     return {
       fetchSearchResults: PropTypes.func.isRequired,
       loadMoreSearchResults: PropTypes.func.isRequired,
+      triggerSearch: PropTypes.func.isRequired,
       changeSearchInputFilterType: PropTypes.func.isRequired,
       changeSearchInputFilterValue: PropTypes.func.isRequired,
-      showEventOverview: PropTypes.func.isRequired
+      showEventOverview: PropTypes.func.isRequired,
+
+      xhrStatus: PropTypes.shape({
+        type: PropTypes.string,
+        value: PropTypes.string,
+        isFetchingEvents: PropTypes.bool
+      }),
+      eventsFilters: PropTypes.shape({
+        type: PropTypes.string,
+        value: PropTypes.string
+      }),
+      events: PropTypes.arrayOf(
+        PropTypes.shape({
+          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
+          })
+        })
+      ),
+      location: PropTypes.shape({
+        query: PropTypes.object
+      })
     }
   }
 
@@ -39,7 +69,7 @@ export class EventsSearch extends Component {
 
     return (
       <div className='events-search'>
-        <SearchInput filterType={type} filterValue={value}/>
+        <SearchInput triggerSearch={this.props.triggerSearch} filterType={type} filterValue={value}/>
         <div>
           <EventsList events={events} />
           <LoadMore {...this.props} />
@@ -58,53 +88,16 @@ export class EventsSearch extends Component {
   }
 
   isFetchingFirstPage () {
-    return this.props.xhrStatus.isFetchingEvents &&
+    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,
+    triggerSearch,
     changeSearchInputFilterType,
     changeSearchInputFilterValue,
     showEventOverview

data/frontend/src/views/{events-search.spec.js → events/search/index.spec.js}

@@ -1,13 +1,17 @@
 import React from 'react'
 import jasmineEnzyme from 'jasmine-enzyme'
-import { mount } from 'enzyme'
-import { EventsSearch } from 'views/events-search'
+import { mount, shallow } 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'
 
+import SearchInput from 'components/search-input'
+import EventsList from 'components/events-list'
+import EmptyEvent from 'components/empty-event'
+
 const middlewares = [ thunk ]
 const mockStore = configureMockStore(middlewares)
 
@@ -20,7 +24,7 @@ const mountComponent = (store, props) => mount(
 )
 
 describe('view <EventsSearch />', () => {
-  let props, component, store
+  let props, store, wrapper
 
   beforeEach(() => {
     jasmineEnzyme()
@@ -33,41 +37,51 @@ describe('view <EventsSearch />', () => {
     props = {
       fetchSearchResults: jasmine.createSpy('fetchSearchResults'),
       loadMoreSearchResults: jasmine.createSpy('loadMoreSearchResults'),
+      triggerSearch: jasmine.createSpy('triggerSearch'),
       changeSearchInputFilterType: jasmine.createSpy('changeSearchInputFilterType'),
       changeSearchInputFilterValue: jasmine.createSpy('changeSearchInputFilterValue'),
       showEventOverview: jasmine.createSpy('showEventOverview'),
 
       xhrStatus: { isFetchingEvents: false, lastEventsLoadSize: 0 },
-      location: { query: {} },
-      eventsFilters: {},
+      location: { pathname: '', query: {} },
+      eventsFilters: {
+        type: 'foo',
+        value: 'bar'
+      },
       events: [{ id: 1 }, { id: 2 }]
     }
 
-    component = mountComponent(store, props)
+    wrapper = shallow(<EventsSearch {...props} />)
   })
 
   it('renders <SearchInput />', () => {
-    expect(component.find('.search-input').length).toEqual(1)
+    expect(wrapper.contains(
+      <SearchInput triggerSearch={props.triggerSearch} filterType={props.eventsFilters.type} filterValue={props.eventsFilters.value} />
+    )).toEqual(true)
   })
 
   it('renders <EventsList />', () => {
-    expect(component.find('.events-list').length).toEqual(1)
+    expect(wrapper.contains(<EventsList events={props.events} />)).toEqual(true)
   })
 
-  it('does not render <EventsSearch.EmptyEvent />', () => {
-    expect(component.find('.empty-event').length).toEqual(0)
+  it('renders <EmptyEvent />', () => {
+    expect(wrapper.contains(<EmptyEvent events={props.events} isFetchingEvents={props.xhrStatus.isFetchingEvents} />)).toEqual(true)
   })
 
   describe('when it initializes with filter type and value', () => {
     beforeEach(() => {
-      Object.assign(props, {
-        location: { query: {
-          type: 'entity_id',
-          value: '12345'
-        }}
-      })
-
-      component = mountComponent(store, props)
+      props = {
+        ...props,
+        location: {
+          pathname: '/events',
+          query: {
+            type: 'entity_id',
+            value: '12345'
+          }
+        }
+      }
+
+      mountComponent(store, props)
     })
 
     it('calls changeSearchInputFilterType with type', () => {
@@ -79,18 +93,14 @@ describe('view <EventsSearch />', () => {
     })
   })
 
-  describe('when events is empty', () => {
+  describe('when events are empty', () => {
     beforeEach(() => {
-      Object.assign(props, { events: [] })
-      component = mountComponent(store, props)
+      props = {...props, events: []}
+      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/failures/details/index.js

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

data/frontend/src/views/failures/search/index.js

@@ -0,0 +1,113 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import LoadMore from 'components/load-more'
+import EmptyEvent from 'components/empty-event'
+import FailuresList from 'components/failures-list'
+import SearchInput from 'components/search-input'
+import CircularProgress from 'material-ui/CircularProgress'
+
+import { fetchSearchResults, loadMoreSearchResults, triggerSearch } from 'actions/failures/search'
+import { changeSearchInputFilterType, changeSearchInputFilterValue } from 'actions/search-input-filter'
+import { showEventOverview } from 'actions/event-overview'
+
+export class FailuresSearch extends Component {
+  static get propTypes () {
+    return {
+      fetchSearchResults: PropTypes.func.isRequired,
+      loadMoreSearchResults: PropTypes.func.isRequired,
+      triggerSearch: PropTypes.func.isRequired,
+      changeSearchInputFilterType: PropTypes.func.isRequired,
+      changeSearchInputFilterValue: PropTypes.func.isRequired,
+      showEventOverview: PropTypes.func.isRequired,
+
+      xhrStatus: PropTypes.shape({
+        type: PropTypes.string,
+        value: PropTypes.string,
+        isFetchingEvents: PropTypes.bool
+      }),
+
+      eventsFilters: PropTypes.shape({
+        type: PropTypes.string,
+        value: PropTypes.string
+      }),
+
+      failures: PropTypes.arrayOf(
+        PropTypes.shape({
+          onShowOverview: PropTypes.func,
+          failure: PropTypes.shape({
+            id: PropTypes.number,
+            created_at: PropTypes.string,
+            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,
+            metadata: PropTypes.object,
+            error_class: PropTypes.string,
+            error_message: PropTypes.string,
+            error_backtrace: PropTypes.array
+          })
+        })
+      ),
+
+      location: PropTypes.shape({
+        query: PropTypes.object
+      })
+    }
+  }
+
+  componentDidMount () {
+    const { type, value } = this.props.location.query
+    if (type && value) {
+      this.props.changeSearchInputFilterType(type)
+      this.props.changeSearchInputFilterValue(value)
+    }
+
+    this.props.failures.length === 0 &&
+      this.props.fetchSearchResults({ offset: 0 })
+  }
+
+  render () {
+    const { failures } = this.props
+    const { type, value } = this.props.eventsFilters
+
+    return (
+      <div className='failures-search'>
+        <SearchInput triggerSearch={this.props.triggerSearch} filterType={type} filterValue={value}/>
+        <div>
+          <FailuresList failures={failures} />
+          <LoadMore {...this.props} />
+          <EmptyEvent
+            events={failures}
+            isFetchingEvents={this.props.xhrStatus.isFetchingEvents}/>
+        </div>
+        {
+          this.isFetchingFirstPage() &&
+            <div className='page-loader'>
+              <CircularProgress />
+            </div>
+        }
+      </div>
+    )
+  }
+
+  isFetchingFirstPage () {
+    this.props.xhrStatus.isFetchingEvents &&
+      this.props.failures.length === 0
+  }
+}
+
+export default connect(
+  (state) => state, {
+    fetchSearchResults,
+    loadMoreSearchResults,
+    triggerSearch,
+    changeSearchInputFilterType,
+    changeSearchInputFilterValue,
+    showEventOverview
+  }
+)(FailuresSearch)

data/frontend/src/views/failures/search/index.scss

@@ -0,0 +1,24 @@
+.failures-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/failures/search/index.spec.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { mount, shallow } from 'enzyme'
+import { FailuresSearch } from 'views/failures/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'
+
+import SearchInput from 'components/search-input'
+import FailuresList from 'components/failures-list'
+import EmptyEvent from 'components/empty-event'
+
+const middlewares = [ thunk ]
+const mockStore = configureMockStore(middlewares)
+
+const mountComponent = (store, props) => mount(
+  <Provider store={store}>
+    <MuiThemeProvider muiTheme={getMuiTheme()}>
+      <FailuresSearch {...props} />
+    </MuiThemeProvider>
+  </Provider>
+)
+
+describe('view <FailuresSearch />', () => {
+  let props, store, wrapper
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    store = mockStore({
+      xhrStatus: {
+        isRetryingEvent: false
+      }
+    })
+
+    props = {
+      fetchSearchResults: jasmine.createSpy('fetchSearchResults'),
+      loadMoreSearchResults: jasmine.createSpy('loadMoreSearchResults'),
+      triggerSearch: jasmine.createSpy('triggerSearch'),
+      changeSearchInputFilterType: jasmine.createSpy('changeSearchInputFilterType'),
+      changeSearchInputFilterValue: jasmine.createSpy('changeSearchInputFilterValue'),
+      showEventOverview: jasmine.createSpy('showEventOverview'),
+
+      xhrStatus: { isFetchingEvents: false, lastEventsLoadSize: 0 },
+      location: { pathname: '', query: {} },
+      eventsFilters: {
+        type: 'foo',
+        value: 'bar'
+      },
+      failures: [{ id: 1 }, { id: 2 }]
+    }
+
+    wrapper = shallow(<FailuresSearch {...props} />)
+  })
+
+  it('renders <SearchInput />', () => {
+    expect(wrapper.contains(
+      <SearchInput triggerSearch={props.triggerSearch} filterType={props.eventsFilters.type} filterValue={props.eventsFilters.value} />)
+    ).toEqual(true)
+  })
+
+  it('renders <FailuresList />', () => {
+    expect(wrapper.contains(<FailuresList failures={props.failures} />)).toEqual(true)
+  })
+
+  it('renders <EmptyEvent />', () => {
+    expect(wrapper.contains(<EmptyEvent events={props.failures} isFetchingEvents={props.xhrStatus.isFetchingEvents} />)).toEqual(true)
+  })
+
+  describe('when it initializes with filter type and value', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        location: {
+          pathname: '/failures',
+          query: {
+            type: 'entity_id',
+            value: '12345'
+          }
+        }
+      }
+
+      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 are empty', () => {
+    beforeEach(() => {
+      props = {...props, failures: []}
+      mountComponent(store, props)
+    })
+
+    it('calls fetchSearchResults with offset 0', () => {
+      expect(props.fetchSearchResults).toHaveBeenCalledWith({ offset: 0 })
+    })
+  })
+})

data/lib/phobos_checkpoint_ui/version.rb

@@ -1,3 +1,3 @@
 module PhobosCheckpointUI
-  VERSION = '0.4.0'
+  VERSION = '1.0.0.rc1'
 end

data/phobos_checkpoint_ui.gemspec

@@ -50,5 +50,5 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency 'rake'
   spec.add_dependency 'sinatra'
-  spec.add_dependency 'phobos_db_checkpoint', '>= 0.3.0'
+  spec.add_dependency 'phobos_db_checkpoint', '~> 2.0.0.rc1'
 end