phobos_checkpoint_ui 1.1.0 → 1.2.0

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

@@ -6,6 +6,7 @@ import {
   changeSearchInputFilterValue
 } from 'actions/search-input-filter'
 
+import Paper from 'material-ui/Paper'
 import SelectField from 'material-ui/SelectField'
 import MenuItem from 'material-ui/MenuItem'
 import TextField from 'material-ui/TextField'
@@ -38,7 +39,7 @@ export class SearchInput extends Component {
 
   render () {
     return (
-      <div className='search-input'>
+      <Paper className='search-input'>
         <SelectField
           style={{width: '140px'}}
           value={this.props.filterType || DEFAULT_FILTER_TYPE}
@@ -64,7 +65,7 @@ export class SearchInput extends Component {
           onClick={() => this.search()}
           style={{height: '50px', marginLeft: '20px'}}
           icon={this.getButtonIcon()} />
-      </div>
+      </Paper>
     )
   }
 

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

@@ -0,0 +1,15 @@
+import {
+  RECEIVE_FAILURE_COUNT
+} from 'actions'
+
+export default (state = {}, action) => {
+  switch (action.type) {
+    case RECEIVE_FAILURE_COUNT:
+      return {...state,
+        failureCount: action.data.count
+      }
+
+    default:
+      return state
+  }
+}

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

@@ -0,0 +1,16 @@
+import {
+  RECEIVE_FAILURE_COUNT
+} from 'actions'
+
+import reducer from 'reducers/dashboard'
+
+describe('reducers/dashboard', () => {
+  describe('for RECEIVE_FAILURE_COUNT', () => {
+    it('sets overviewVisible for the specific event to true', () => {
+      const currentState = {}
+      const action = { type: RECEIVE_FAILURE_COUNT, data: { count: 8 } }
+      const expectedState = { failureCount: 8 }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+})

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

@@ -1,4 +1,7 @@
-import { SEARCH_INPUT_CHANGE_FILTER_TYPE, SEARCH_INPUT_CHANGE_FILTER_VALUE } from 'actions'
+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 }

data/frontend/src/reducers/index.js

@@ -2,6 +2,7 @@ import { combineReducers } from 'redux'
 import { routerReducer } from 'react-router-redux'
 
 import events from 'reducers/events'
+import dashboard from 'reducers/dashboard'
 import failures from 'reducers/failures'
 import eventDetails from 'reducers/event-details'
 import failureDetails from 'reducers/failures/details'
@@ -10,6 +11,7 @@ import xhrStatus from 'reducers/xhr-status'
 import flashMessages from 'reducers/flash-messages'
 
 export default combineReducers({
+  dashboard,
   xhrStatus,
   flashMessages,
   eventsFilters,

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

@@ -3,11 +3,14 @@ import reducer from 'reducers'
 describe('reducers', () => {
   it('without actions returns the initial state', () => {
     expect(reducer(undefined, {})).toEqual({
+      dashboard: {},
       xhrStatus: {
         isFetchingEvents: false,
         isRetryingEvent: false,
         isRetryingFailure: false,
         isDeletingFailure: false,
+        isFetchingFailureCount: false,
+        fetchFailureCountFailed: false,
         isFetchingEventDetails: false,
         currentEventsOffset: 0,
         lastEventsLoadSize: 0

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

@@ -19,15 +19,20 @@ import {
   RECEIVE_EVENT_RETRY,
   REQUEST_EVENT_RETRY_FAILED,
   REQUEST_EVENT_DETAILS,
-  RECEIVE_EVENT_DETAILS
+  RECEIVE_EVENT_DETAILS,
+  REQUEST_FAILURE_COUNT,
+  RECEIVE_FAILURE_COUNT,
+  REQUEST_FAILURE_COUNT_FAILED
 } from 'actions'
 
 const initialState = {
   isFetchingEvents: false,
+  isFetchingFailureCount: false,
   isRetryingEvent: false,
   isRetryingFailure: false,
   isDeletingFailure: false,
   isFetchingEventDetails: false,
+  fetchFailureCountFailed: false,
   currentEventsOffset: 0,
   lastEventsLoadSize: 0
 }
@@ -114,6 +119,23 @@ export default (state = initialState, action) => {
         isFetchingEventDetails: false
       }
 
+    case REQUEST_FAILURE_COUNT:
+      return {...state,
+        isFetchingFailureCount: true
+      }
+
+    case RECEIVE_FAILURE_COUNT:
+      return {...state,
+        isFetchingFailureCount: false,
+        fetchFailureCountFailed: false
+      }
+
+    case REQUEST_FAILURE_COUNT_FAILED:
+      return {...state,
+        isFetchingFailureCount: false,
+        fetchFailureCountFailed: true
+      }
+
     default:
       return state
   }

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

@@ -17,7 +17,10 @@ import {
   REQUEST_FAILURE_DELETE_FAILED,
   REQUEST_EVENT_RETRY,
   RECEIVE_EVENT_RETRY,
-  REQUEST_EVENT_RETRY_FAILED
+  REQUEST_EVENT_RETRY_FAILED,
+  REQUEST_FAILURE_COUNT,
+  RECEIVE_FAILURE_COUNT,
+  REQUEST_FAILURE_COUNT_FAILED
 } from 'actions'
 
 import reducer from 'reducers/xhr-status'
@@ -194,6 +197,33 @@ describe('reducers/xhr-status', () => {
     })
   })
 
+  describe('for REQUEST_FAILURE_COUNT', () => {
+    it('enables isFetchingFailureCount', () => {
+      const currentState = { isFetchingFailureCount: false }
+      const action = { type: REQUEST_FAILURE_COUNT }
+      const expectedState = { isFetchingFailureCount: true }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for RECEIVE_FAILURE_COUNT', () => {
+    it('disables isFetchingFailureCount', () => {
+      const currentState = { isFetchingFailureCount: true, fetchFailureCountFailed: true }
+      const action = { type: RECEIVE_FAILURE_COUNT }
+      const expectedState = { isFetchingFailureCount: false, fetchFailureCountFailed: false }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
+  describe('for REQUEST_FAILURE_COUNT_FAILED', () => {
+    it('disables isFetchingFailureCount', () => {
+      const currentState = { isFetchingFailureCount: true, fetchFailureCountFailed: false }
+      const action = { type: REQUEST_FAILURE_COUNT_FAILED }
+      const expectedState = { isFetchingFailureCount: false, fetchFailureCountFailed: true }
+      expect(reducer(currentState, action)).toEqual(expectedState)
+    })
+  })
+
   describe('for default', () => {
     it('returns the currentState', () => {
       const currentState = { current: true }

data/frontend/src/routes.js

@@ -8,13 +8,15 @@ import EventsSearch from 'views/events/search'
 import EventDetails from 'views/events/details'
 import FailuresSearch from 'views/failures/search'
 import FailureDetails from 'views/failures/details'
+import Dashboard from 'views/dashboard'
 
 export const history = syncHistoryWithStore(browserHistory, store)
 
 export default (
   <Router history={history}>
     <Route path='/' component={Layout}>
-      <IndexRedirect to='/events' />
+      <IndexRedirect to='/dashboard' />
+      <Route path='/dashboard' component={Dashboard} />
       <Route path='/events' component={EventsSearch} />
       <Route path='/events/:id' component={EventDetails} />
       <Route path='/failures' component={FailuresSearch} />

data/frontend/src/views/dashboard/index.js

@@ -0,0 +1,68 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+
+import Badge from 'components/badge'
+import Paper from 'material-ui/Paper'
+import { fetchFailureCount } from 'actions/dashboard/failure-count'
+import { style } from 'views/style'
+
+export class Dashboard extends Component {
+  static get propTypes () {
+    return {
+      fetchFailureCount: PropTypes.func.isRequired,
+
+      xhrStatus: PropTypes.shape({
+        isFetchingFailureCount: PropTypes.bool
+      })
+    }
+  }
+
+  componentDidMount () {
+    this.props.fetchFailureCount()
+
+    this.intervalId = setInterval(() => {
+      this.props.fetchFailureCount()
+    }, 10000)
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.intervalId)
+  }
+
+  render () {
+    return (
+      <Paper zDepth={3} className='dashboard' style={style.view}>
+        <div style={style.title}>
+          Dashboard
+        </div>
+        <div style={style.body}>
+          <div style={style.row}>
+            <div style={style.heading}>
+              There are
+            </div>
+            {
+              <Badge
+                classCondition={this.props.dashboard.failureCount === 0}
+                text={this.props.dashboard.failureCount}
+                failed={this.props.xhrStatus.fetchFailureCountFailed}
+                loading={this.isLoadingFirstPage()} />
+            }
+            <div style={style.altHeading}>
+              failures
+            </div>
+          </div>
+        </div>
+      </Paper>
+    )
+  }
+
+  isLoadingFirstPage () {
+    return this.props.dashboard.failureCount === null && this.props.xhrStatus.isFetchingFailureCount
+  }
+ }
+
+export default connect(
+  (state) => state, {
+    fetchFailureCount
+  }
+)(Dashboard)

data/frontend/src/views/dashboard/index.scss

@@ -0,0 +1,5 @@
+.dashboard {
+  font-size: 30px;
+  color: #333;
+  min-height: 720px;
+}

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

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 
+import Paper from 'material-ui/Paper'
 import LoadMore from 'components/load-more'
 import EmptyEvent from 'components/empty-event'
 import EventsList from 'components/events-list'
@@ -10,6 +11,7 @@ import CircularProgress from 'material-ui/CircularProgress'
 import { fetchSearchResults, loadMoreSearchResults, triggerSearch } from 'actions/events-search'
 import { changeSearchInputFilterType, changeSearchInputFilterValue } from 'actions/search-input-filter'
 import { showEventOverview } from 'actions/event-overview'
+import { style } from 'views/style'
 
 export class EventsSearch extends Component {
   static get propTypes () {
@@ -68,7 +70,10 @@ export class EventsSearch extends Component {
     const { type, value } = this.props.eventsFilters
 
     return (
-      <div className='events-search'>
+      <Paper zDepth={3} className='events-search' style={style.view}>
+        <div style={style.title}>
+          Event search
+        </div>
         <SearchInput triggerSearch={this.props.triggerSearch} filterType={type} filterValue={value}/>
         <div>
           <EventsList events={events} />
@@ -83,7 +88,7 @@ export class EventsSearch extends Component {
               <CircularProgress />
             </div>
         }
-      </div>
+      </Paper>
     )
   }
 

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

@@ -1,11 +1,4 @@
 .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;

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

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 
+import Paper from 'material-ui/Paper'
 import LoadMore from 'components/load-more'
 import EmptyFailure from 'components/failure/empty'
 import FailuresList from 'components/failure/list'
@@ -10,6 +11,7 @@ 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'
+import { style } from 'views/style'
 
 export class FailuresSearch extends Component {
   static get propTypes () {
@@ -76,7 +78,10 @@ export class FailuresSearch extends Component {
     const { type, value } = this.props.eventsFilters
 
     return (
-      <div className='failures-search'>
+      <Paper zDepth={3} className='failures-search' style={style.view}>
+        <div style={style.title}>
+          Failure search
+        </div>
         <SearchInput triggerSearch={this.props.triggerSearch} filterType={type} filterValue={value}/>
         <div>
           <FailuresList failures={failures} />
@@ -91,7 +96,7 @@ export class FailuresSearch extends Component {
               <CircularProgress />
             </div>
         }
-      </div>
+      </Paper>
     )
   }
 

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

@@ -1,11 +1,4 @@
 .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;

data/frontend/src/views/style.js

@@ -0,0 +1,43 @@
+import {
+  grey200,
+  grey50,
+  blueGrey300
+} from 'material-ui/styles/colors'
+
+export const style = {
+  view: {
+    maxWidth: '1020px',
+    minHeigh: '100%',
+    backgroundColor: grey200,
+    margin: '0 auto'
+  },
+  title: {
+    padding: '20px 20px',
+    color: grey50,
+    backgroundColor: blueGrey300,
+    fontSize: '20px',
+    fontWeight: 'lighter',
+    fontFamily: 'Roboto',
+    marginBottom: '20px'
+  },
+  body: {
+    display: 'flex',
+    padding: '0 20px',
+    justifyContent: 'center'
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'flex-start'
+  },
+  heading: {
+    fontSize: '24px',
+    fontWeight: 'lighter',
+    fontFamily: 'Roboto'
+  },
+  altHeading: {
+    fontSize: '24px',
+    fontWeight: 'lighter',
+    fontFamily: 'Roboto',
+    alignSelf: 'flex-end'
+  }
+}

data/lib/phobos_checkpoint_ui/version.rb

@@ -1,3 +1,3 @@
 module PhobosCheckpointUI
-  VERSION = '1.1.0'
+  VERSION = '1.2.0'
 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', '~> 2.0'
+  spec.add_dependency 'phobos_db_checkpoint', '~> 2.4'
 end