phobos_checkpoint_ui 1.0.0.rc1 → 1.0.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c06ac3b49f17bb1a0cfd0b99c381cbf472ea99c2
-  data.tar.gz: 6a20e89e24e36288a4448c6e05d560613c7440b6
+  metadata.gz: eb5df88871389fe9876fae517e7ea256819fc778
+  data.tar.gz: 51534f08782de450550e91019322e2be8bf26681
 SHA512:
-  metadata.gz: 9c9ff42eee60f0ec01a4ce14b24f3f9903444a91a41a6bd140aae7eef2d427817275f2300ed768fa8b08bc2c5a04a4a9270681697d4116c991a3f86b04f1085a
-  data.tar.gz: 11524361e949b14a83a0404c6161581d08b0342b8628ea162e4a7432c660f32337077cb0c56e4e6e670c9b2aed9592bb7246bf4348c36aa7228a3b5c2e73a55f
+  metadata.gz: 5c9ffd04210a079c88c49096d0dd45fb8828b04c3d54a3203af1334c63c185aee87c8a73efeecffd4d288a1874c57a75132f461a6ee0dda8864c7e4a3ab2a97d
+  data.tar.gz: 9e1865a07414149eeaaf201b2b3def89a217669ba8469f9d749db4cbb1d648e73c18badabfa5a420b19c6d019ff2af3387cf17129bdee6046a4594066d42f901

data/CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## 1.0.0.rc1 (2017-03-01)
+## 1.0.0.rc2 (2017-03-01)
 
 - [feature] Add GUI interacting with PhobosDBCheckpoint failures
 

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

@@ -31,12 +31,10 @@ export const fetchEventDetails = (event) => (dispatch, getState) => {
     .then((response) => dispatch(receiveEventDetails(response.data)))
     .catch((response) => {
       const error = parseResponseError(response)
-      return Promise
-        .resolve()
-        .then(() => dispatch(requestEventDetailsFailed(event, error.message)))
-        .then(() => dispatch(addFlashMessage({
-          type: 'error',
-          text: error.message
-        })))
+      dispatch(requestEventDetailsFailed(event, error.message))
+      dispatch(addFlashMessage({
+        type: 'error',
+        text: error.message
+      }))
     })
 }

data/frontend/src/actions/event-retry.js

@@ -41,15 +41,13 @@ export const performEventRetry = (event) => (dispatch, getState) => {
   return API.Event
     .retry({id: event.id})
     .then((response) => {
-      return Promise
-        .resolve()
-        .then(() => dispatch(receiveEventRetry(event, response.data)))
-        .then(() => dispatch(hideEventRetry(event)))
-        .then(() => dispatch(addFlashMessage({
-          type: 'success',
-          text: `Event retried with success. Acknowledged: ${response.data.acknowledged}`,
-          autoClose: true
-        })))
+      dispatch(receiveEventRetry(event, response.data))
+      dispatch(hideEventRetry(event))
+      dispatch(addFlashMessage({
+        type: 'success',
+        text: `Event retried with success. Acknowledged: ${response.data.acknowledged}`,
+        autoClose: true
+      }))
     })
     .catch((response) => {
       const error = parseResponseError(response)

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

@@ -53,13 +53,11 @@ export const fetchSearchResults = () => (dispatch, getState) => {
     })
     .catch((response) => {
       const error = parseResponseError(response)
-      return Promise
-        .resolve()
-        .then(() => dispatch(requestSearchResultsFailed(query, error.message)))
-        .then(() => dispatch(addFlashMessage({
-          type: 'error',
-          text: `Events search failed. "${error.message}"`
-        })))
+      dispatch(requestSearchResultsFailed(query, error.message))
+      dispatch(addFlashMessage({
+        type: 'error',
+        text: `Events search failed. "${error.message}"`
+      }))
     })
 }
 

data/frontend/src/actions/failures/details.js

@@ -31,12 +31,10 @@ export const fetchFailureDetails = (failure) => (dispatch, getState) => {
     .then((response) => dispatch(receiveFailureDetails(response.data)))
     .catch((response) => {
       const error = parseResponseError(response)
-      return Promise
-        .resolve()
-        .then(() => dispatch(requestFailureDetailsFailed(failure, error.message)))
-        .then(() => dispatch(addFlashMessage({
-          type: 'error',
-          text: error.message
-        })))
+      dispatch(requestFailureDetailsFailed(failure, error.message))
+      dispatch(addFlashMessage({
+        type: 'error',
+        text: error.message
+      }))
     })
 }

data/frontend/src/actions/failures/details.spec.js

@@ -19,7 +19,7 @@ beforeEach(() => {
   Mappersmith.Env.Fixture.clear()
 })
 
-describe('actions/failure-details', () => {
+describe('actions/failures/details', () => {
   describe('#fetchFailureDetails', () => {
     describe('when it succeeds', () => {
       let failure, store

data/frontend/src/actions/failures/retry.js

@@ -6,7 +6,9 @@ import {
   FAILURE_HIDE_RETRY,
   REQUEST_FAILURE_RETRY,
   RECEIVE_FAILURE_RETRY,
-  REQUEST_FAILURE_RETRY_FAILED
+  REQUEST_FAILURE_RETRY_FAILED,
+  FAILURE_HIDE_OVERVIEW,
+  DELETE_FAILURE
 } from 'actions'
 
 export const showFailureRetry = (failure) => ({
@@ -21,19 +23,28 @@ export const hideFailureRetry = (failure) => ({
 
 const requestFailureRetry = (failure) => ({
   type: REQUEST_FAILURE_RETRY,
-  failure: failure
+  failure
 })
 
 const receiveFailureRetry = (failure, data) => ({
   type: RECEIVE_FAILURE_RETRY,
-  failure: failure,
-  acknowledged: data.acknowledged
+  acknowledged: data.acknowledged,
+  failure
+})
+
+const hideFailureOverview = (failure) => ({
+  type: FAILURE_HIDE_OVERVIEW,
+  failure
 })
 
-const requestFailureRetryFailed = (failure, error) => ({
+const deleteFailure = (failure) => ({
+  type: DELETE_FAILURE,
+  failure
+})
+
+const requestFailureRetryFailed = (failure) => ({
   type: REQUEST_FAILURE_RETRY_FAILED,
-  failure: failure,
-  error
+  failure
 })
 
 export const performFailureRetry = (failure) => (dispatch, getState) => {
@@ -41,18 +52,24 @@ export const performFailureRetry = (failure) => (dispatch, getState) => {
   return API.Failure
     .retry({id: failure.id})
     .then((response) => {
-      return Promise
-        .resolve()
-        .then(() => dispatch(receiveFailureRetry(failure, response.data)))
-        .then(() => dispatch(hideFailureRetry(failure)))
-        .then(() => dispatch(addFlashMessage({
-          type: 'success',
-          text: `Failure retried with success. Acknowledged: ${response.data.acknowledged}`,
-          autoClose: true
-        })))
+      dispatch(receiveFailureRetry(failure, response.data))
+      dispatch(hideFailureRetry(failure))
+      dispatch(addFlashMessage({
+        type: 'success',
+        text: `Failure retried with success. Acknowledged: ${response.data.acknowledged}`,
+        autoClose: true
+      }))
+      dispatch(hideFailureOverview(failure))
+      dispatch(deleteFailure(failure))
     })
     .catch((response) => {
       const error = parseResponseError(response)
-      dispatch(requestFailureRetryFailed(failure, error.message))
+      dispatch(hideFailureRetry(failure))
+      dispatch(addFlashMessage({
+        type: 'error',
+        text: `Failure retried with error: ${error.message}`,
+        autoClose: false
+      }))
+      dispatch(requestFailureRetryFailed(failure))
     })
 }

data/frontend/src/actions/failures/retry.spec.js

@@ -12,8 +12,10 @@ import {
   FAILURE_HIDE_RETRY,
   REQUEST_FAILURE_RETRY,
   RECEIVE_FAILURE_RETRY,
+  REQUEST_FAILURE_RETRY_FAILED,
   ADD_FLASH_MESSAGE,
-  REQUEST_FAILURE_RETRY_FAILED
+  FAILURE_HIDE_OVERVIEW,
+  DELETE_FAILURE
 } from 'actions'
 
 import {
@@ -87,12 +89,32 @@ describe('actions/failures/retry', () => {
         })
         .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
       })
+
+      it('creates an action to hide the failure overview', (done) => {
+        store.dispatch(performFailureRetry(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[4]).toEqual({ type: FAILURE_HIDE_OVERVIEW, failure: failure })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+
+      it('creates an action to delete the failure from state', (done) => {
+        store.dispatch(performFailureRetry(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[5]).toEqual({ type: DELETE_FAILURE, failure: failure })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
     })
 
     describe('when it fails', () => {
-      it('creates REQUEST and REQUEST_FAILED actions', (done) => {
-        const failure = { id: 1 }
-        const store = mockStore({})
+      let store, failure
+
+      beforeEach(() => {
+        failure = { id: 1 }
+        store = mockStore({})
         Mappersmith.Env.Fixture
           .define('post')
           .matching({ url: `/api/v1/failures/${failure.id}/retry` })
@@ -103,11 +125,36 @@ describe('actions/failures/retry', () => {
               message: 'some error'
             })
           })
+      })
 
+      it('creates REQUEST and REQUEST_FAILED actions', (done) => {
         store.dispatch(performFailureRetry(failure)).then(() => {
           const actions = store.getActions()
           expect(actions[0]).toEqual({ type: REQUEST_FAILURE_RETRY, failure })
-          expect(actions[1]).toEqual({ type: REQUEST_FAILURE_RETRY_FAILED, failure, error: 'some error' })
+          expect(actions[1]).toEqual({ type: FAILURE_HIDE_RETRY, failure })
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+
+      it('creates an action to add an error flash message', (done) => {
+        store.dispatch(performFailureRetry(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[2]).toEqual({ type: ADD_FLASH_MESSAGE, message: {
+            id: jasmine.any(String),
+            type: 'error',
+            text: 'Failure retried with error: some error',
+            autoClose: false
+          }})
+          done()
+        })
+        .catch((e) => done.fail(`test failed with promise error: ${e.message}`))
+      })
+
+      it('creates an action to clear the loading status', (done) => {
+        store.dispatch(performFailureRetry(failure)).then(() => {
+          const actions = store.getActions()
+          expect(actions[3]).toEqual({ type: REQUEST_FAILURE_RETRY_FAILED, failure })
           done()
         })
         .catch((e) => done.fail(`test failed with promise error: ${e.message}`))

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

@@ -1,4 +1,3 @@
-
 import API, { EVENTS_SEARCH_LIMIT, parseResponseError } from 'api'
 import { addFlashMessage } from 'actions/flash-messages'
 import { history } from 'routes'
@@ -54,13 +53,11 @@ export const fetchSearchResults = () => (dispatch, getState) => {
     })
     .catch((response) => {
       const error = parseResponseError(response)
-      return Promise
-        .resolve()
-        .then(() => dispatch(requestSearchResultsFailed(query, error.message)))
-        .then(() => dispatch(addFlashMessage({
-          type: 'error',
-          text: `Failures search failed. "${error.message}"`
-        })))
+      dispatch(requestSearchResultsFailed(query, error.message))
+      dispatch(addFlashMessage({
+        type: 'error',
+        text: `Failures search failed. "${error.message}"`
+      }))
     })
 }
 

data/frontend/src/actions/failures/search/index.spec.js

@@ -145,14 +145,14 @@ describe('actions/failures/search', () => {
     let failure, initialState, store
     beforeEach(() => {
       initialState = {
-        eventsFilters: {},
+        eventsFilters: { type: 'event_type', value: 'new' },
         xhrStatus: { currentEventsOffset: 0 }
       }
       store = mockStore(initialState)
       failure = { id: 1 }
       Mappersmith.Env.Fixture
         .define('get')
-        .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&offset=0` })
+        .matching({ url: `/api/v1/failures?limit=${EVENTS_SEARCH_LIMIT}&event_type=new&offset=0` })
         .response([failure])
     })
 

data/frontend/src/actions/index.js

@@ -13,8 +13,8 @@ export const REQUEST_EVENT_RETRY_FAILED = 'REQUEST_EVENT_RETRY_FAILED'
 export const FAILURE_SHOW_RETRY = 'FAILURE_SHOW_RETRY'
 export const FAILURE_HIDE_RETRY = 'FAILURE_HIDE_RETRY'
 export const REQUEST_FAILURE_RETRY = 'REQUEST_FAILURE_RETRY'
-export const RECEIVE_FAILURE_RETRY = 'RECEIVE_FAILURE_RETRY'
 export const REQUEST_FAILURE_RETRY_FAILED = 'REQUEST_FAILURE_RETRY_FAILED'
+export const RECEIVE_FAILURE_RETRY = 'RECEIVE_FAILURE_RETRY'
 
 export const SEARCH_INPUT_CHANGE_FILTER_TYPE = 'SEARCH_INPUT_CHANGE_FILTER_TYPE'
 export const SEARCH_INPUT_CHANGE_FILTER_VALUE = 'SEARCH_INPUT_CHANGE_FILTER_VALUE'
@@ -41,3 +41,5 @@ export const REQUEST_EVENT_DETAILS_FAILED = 'REQUEST_EVENT_DETAILS_FAILED'
 export const REQUEST_FAILURE_DETAILS = 'REQUEST_FAILURE_DETAILS'
 export const RECEIVE_FAILURE_DETAILS = 'RECEIVE_FAILURE_DETAILS'
 export const REQUEST_FAILURE_DETAILS_FAILED = 'REQUEST_FAILURE_DETAILS_FAILED'
+
+export const DELETE_FAILURE = 'DELETE_FAILURE'

data/frontend/src/components/empty-event/empty-event.scss

@@ -0,0 +1,6 @@
+.empty-event {
+  margin: 50px 15px 0;
+  font-size: 30px;
+  font-weight: lighter;
+  font-family: Roboto;
+}

data/frontend/src/components/event/card-style.js

@@ -0,0 +1,29 @@
+import moment from 'moment'
+const TIME_FORMAT = 'h:mm:ss a'
+const EMPTY_TYPE = '<no type>'
+
+export function formatTime (time) {
+  if (!time) return null
+  const timeDate = new Date(time)
+  return moment(timeDate).format(TIME_FORMAT)
+}
+
+export function formattedEventType (eventType) {
+  return eventType || EMPTY_TYPE
+}
+
+export default {
+  card: {
+    width: '490px',
+    overflow: 'hidden'
+  },
+  cardHeader: {
+    title: {
+      fontWeight: 'lighter'
+    }
+  },
+  cardTitle: {
+    fontSize: '38px',
+    fontWeight: 'lighter'
+  }
+}

data/frontend/src/components/event/event.scss

@@ -1,3 +1,15 @@
 .event {
   cursor: pointer;
+
+  .event-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .event-icon {
+    order: 2;
+    width: 35px !important;
+    height: 35px !important;
+    margin-right: 0 !important;
+  }
 }

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

@@ -1,22 +1,17 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import moment from 'moment'
 
 import { showEventOverview } from 'actions/event-overview'
-import style from 'components/event/style'
+import cardStyle, {
+  formatTime,
+  formattedEventType
+} from 'components/event/card-style'
 
 import {Card, CardHeader, CardTitle} from 'material-ui/Card'
+import EventsIcon from 'material-ui/svg-icons/communication/call-received'
 import EventOverviewDialog from 'components/event-overview-dialog'
 import EventRetryDialog from 'components/event-retry-dialog'
-
-const EVENT_TIME_FORMAT = 'h:mm:ss a'
-const EMPTY_EVENT_TYPE = '<no type>'
-
-export function formatEventTime (eventTime) {
-  if (!eventTime) return null
-  const eventTimeDate = new Date(eventTime)
-  return moment(eventTimeDate).format(EVENT_TIME_FORMAT)
-}
+import { green200 } from 'material-ui/styles/colors'
 
 export class Event extends Component {
   static get propTypes () {
@@ -46,17 +41,17 @@ export class Event extends Component {
     return (
       <Card
         className='event'
-        style={style.card}
+        style={cardStyle.card}
         onClick={() => this.showOverview()}>
         <CardHeader
           className='event-header'
-          titleStyle={style.cardHeader.title}
-          subtitleStyle={style.cardHeader.subtitle}
-          title={formatEventTime(this.props.event.event_time)}
+          avatar={<EventsIcon className='event-icon' color={green200} />}
+          titleStyle={cardStyle.cardHeader.title}
+          title={formatTime(this.props.event.event_time)}
           subtitle={this.props.event.topic}/>
         <CardTitle
-          titleStyle={style.cardTitle}
-          title={this.formatedEventType()}/>
+          titleStyle={cardStyle.cardTitle}
+          title={formattedEventType(this.props.event.event_type)}/>
         <EventOverviewDialog event={this.props.event} />
         <EventRetryDialog event={this.props.event} />
       </Card>
@@ -66,10 +61,6 @@ export class Event extends Component {
   showOverview () {
     this.props.onShowOverview(this.props.event)
   }
-
-  formatedEventType () {
-    return this.props.event.event_type || EMPTY_EVENT_TYPE
-  }
 }
 
 export default connect((state, ownProps) => ownProps, {

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

@@ -1,7 +1,8 @@
 import React from 'react'
 import jasmineEnzyme from 'jasmine-enzyme'
 import { mount } from 'enzyme'
-import { Event, formatEventTime } from 'components/event'
+import { Event } from 'components/event'
+import { formatTime } from 'components/event/card-style'
 import getMuiTheme from 'material-ui/styles/getMuiTheme'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import { Provider } from 'react-redux'
@@ -51,7 +52,7 @@ describe('<Event />', () => {
   })
 
   it('displays event_time formatted', () => {
-    expect(component.text()).toMatch(formatEventTime(props.event.event_time))
+    expect(component.text()).toMatch(formatTime(props.event.event_time))
   })
 
   it('displays topic', () => {

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

@@ -49,7 +49,7 @@ class OverviewDialog extends Component {
         bodyStyle={{maxWidth: '1024px'}}
         actions={[
           <RaisedButton
-            secondary
+            primary
             label='Retry'
             onClick={() => this.showRetry()}/>
         ]}>

data/frontend/src/components/event-retry-dialog/index.js

@@ -32,7 +32,7 @@ class RetryDialog extends Component {
     return (
       <Dialog
         modal={!!this.props.isRetryingEvent}
-        title='Are you sure?'
+        title={this.renderTitle()}
         open={!!this.props.event.retryVisible}
         bodyStyle={{maxWidth: '300px'}}
         contentStyle={{maxWidth: '300px'}}
@@ -41,6 +41,7 @@ class RetryDialog extends Component {
           <RaisedButton
             primary
             label='Retry'
+            disabled={this.props.isRetryingEvent}
             onClick={() => this.performRetry()}/>
         ]}>
         <div style={{textAlign: 'center'}}>
@@ -51,6 +52,13 @@ class RetryDialog extends Component {
     )
   }
 
+  renderTitle () {
+    if (this.props.isRetryingEvent) {
+      return 'Retrying event...'
+    }
+    return 'Are you sure?'
+  }
+
   hide () {
     this.props.onHideRetry(this.props.event)
   }

data/frontend/src/components/failure/empty/empty-failure.scss

@@ -0,0 +1,6 @@
+.empty-failure {
+  margin: 50px 15px 0;
+  font-size: 30px;
+  font-weight: lighter;
+  font-family: Roboto;
+}

data/frontend/src/components/failure/empty/index.js

@@ -0,0 +1,20 @@
+import React, { Component, PropTypes } from 'react'
+
+export default class EmptyFailure extends Component {
+  static get propTypes () {
+    return {
+      failures: PropTypes.array.isRequired,
+      isFetchingEvents: PropTypes.bool.isRequired
+    }
+  }
+
+  render () {
+    return (
+      this.props.failures.length === 0 &&
+        !this.props.isFetchingEvents &&
+        <div className='empty-failure'>
+          No failures found
+        </div>
+    )
+  }
+}

data/frontend/src/components/failure/empty/index.spec.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import jasmineEnzyme from 'jasmine-enzyme'
+import { shallow } from 'enzyme'
+
+import EmptyFailure from 'components/failure/empty'
+
+describe('<EmptyFailure />', () => {
+  let props, wrapper
+
+  beforeEach(() => {
+    jasmineEnzyme()
+    props = {
+      failures: [{ id: 1 }, { id: 2 }],
+      isFetchingEvents: false
+    }
+    wrapper = shallow(<EmptyFailure {...props} />)
+  })
+
+  describe('with events', () => {
+    it('does not render <EmptyFailure />', () => {
+      expect(wrapper.find('.empty-failure').length).toEqual(0)
+    })
+  })
+
+  describe('without events', () => {
+    beforeEach(() => {
+      props = {
+        ...props,
+        failures: []
+      }
+      wrapper = shallow(<EmptyFailure {...props} />)
+    })
+
+    it('renders <EmptyFailure />', () => {
+      expect(wrapper.find('.empty-failure').length).toEqual(1)
+    })
+  })
+})

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

@@ -1,22 +1,17 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import moment from 'moment'
 
 import { showFailureOverview } from 'actions/failures/overview'
-import style from 'components/event/style'
+import cardStyle, {
+  formatTime,
+  formattedEventType
+} from 'components/event/card-style'
 
 import { Card, CardHeader, CardTitle } from 'material-ui/Card'
+import FailuresIcon from 'material-ui/svg-icons/communication/call-missed'
 import FailureOverviewDialog from 'components/failure/overview-dialog'
 import FailureRetryDialog from 'components/failure/retry-dialog'
-
-const TIME_FORMAT = 'h:mm:ss a'
-const EMPTY_TYPE = '<no type>'
-
-export function formatTime (time) {
-  if (!time) return null
-  const timeDate = new Date(time)
-  return moment(timeDate).format(TIME_FORMAT)
-}
+import { red500 } from 'material-ui/styles/colors'
 
 export class Failure extends Component {
   static get propTypes () {
@@ -51,17 +46,17 @@ export class Failure extends Component {
     return (
       <Card
         className='failure'
-        style={style.card}
+        style={cardStyle.card}
         onClick={() => this.showOverview()}>
         <CardHeader
           className='failure-header'
-          titleStyle={style.cardHeader.title}
-          subtitleStyle={style.cardHeader.subtitle}
+          avatar={<FailuresIcon className='failure-icon' color={red500} />}
+          titleStyle={cardStyle.cardHeader.title}
           title={formatTime(this.props.failure.event_time)}
           subtitle={this.props.failure.topic}/>
         <CardTitle
-          titleStyle={style.cardTitle}
-          title={this.formattedEventType()}/>
+          titleStyle={cardStyle.cardTitle}
+          title={formattedEventType(this.props.failure.event_type)}/>
         <FailureOverviewDialog failure={this.props.failure} />
         <FailureRetryDialog failure={this.props.failure} />
       </Card>
@@ -71,10 +66,6 @@ export class Failure extends Component {
   showOverview () {
     this.props.onShowOverview(this.props.failure)
   }
-
-  formattedEventType () {
-    return this.props.failure.event_type || EMPTY_TYPE
-  }
 }
 
 export default connect((state, ownProps) => ownProps, {