Adds an important flag to commands. (#134)

packages/demo-react-js/src/App.js

@@ -98,6 +98,7 @@ class App extends Component {
           <button style={Styles.button} onClick={this.props.requestReactNative}>React Native</button>
           <button style={Styles.button} onClick={this.props.requestMobx}>Mobx</button>
           <button style={Styles.button} onClick={this.props.requestRedux}>Redux</button>
+          <button style={Styles.button} onClick={this.props.requestBad}>Bad</button>
 
         { error ? this.renderError() : this.renderMessage() }
 
@@ -119,8 +120,9 @@ const mapDispatchToProps = dispatch => ({
   requestReactNative: () => dispatch(RepoActions.request('facebook/react-native')),
   requestMobx: () => dispatch(RepoActions.request('mobxjs/mobx')),
   requestRedux: () => dispatch(RepoActions.request('reactjs/redux')),
+  requestBad: () => dispatch(RepoActions.request('zzzz/zzzzz')),
   handleLogoPress: () => {
-    console.tron.log('wait for it...')
+    console.tron.log('wait for it...', true)
     setTimeout(() => { makeErrorForFun('boom') }, 500)
   }
 })

packages/demo-react-js/src/Redux/Store.js

@@ -5,7 +5,8 @@ import createSagaMiddleware from 'redux-saga'
 import rootReducer from './RootReducer'
 import rootSaga from '../Sagas'
 import Reactotron from 'reactotron-react-js'
-import createTrackingEnhancer from 'reactotron-redux'
+import createTronohancer from 'reactotron-redux'
+import { Types as LogoTypes } from './Logo.redux'
 
 // the logger master switch
 const USE_LOGGING = false
@@ -21,7 +22,9 @@ const logger = createLogger({
 // a function which can create our store and auto-persist the data
 export default () => {
   const sagaMiddleware = createSagaMiddleware()
-  const tracker = createTrackingEnhancer(Reactotron, {})
+  const tracker = createTronohancer(Reactotron, {
+    isActionImportant: action => action.type === LogoTypes.Size && action.size > 100
+  })
   const enhancers = compose(
     applyMiddleware(logger, sagaMiddleware),
     tracker

packages/reactotron-app/App/Commands/ApiResponseCommand.js

@@ -61,7 +61,6 @@ class ApiResponseCommand extends Component {
     const { payload } = command
     const { duration } = payload
     const status = dotPath('response.status', payload)
-    const ok = isWithin(200, 299, status || 0)
     const url = dotPath('request.url', payload)
     const method = toUpper(dotPath('request.method', payload) || '')
     const requestHeaders = dotPath('request.headers', payload)

packages/reactotron-app/App/Shared/Command.js

@@ -33,10 +33,18 @@ const Styles = {
     cursor: 'pointer'
   },
   title: {
-    color: Colors.tag,
     textAlign: 'left',
     width: 150
   },
+  titleText: {
+    color: Colors.tag
+  },
+  titleTextInverse: {
+    backgroundColor: Colors.tag,
+    color: Colors.foregroundLight,
+    borderRadius: 4,
+    padding: '4px 8px'
+  },
   subtitle: {
     color: Colors.foreground,
     textAlign: 'left',
@@ -107,9 +115,10 @@ class Command extends Component {
   render () {
     const { isOpen } = this.state
     const { command, children, title, subtitle, preview } = this.props
+    const { important } = command
     const hasSubtitle = !isNilOrEmpty(subtitle)
     const { date } = command
-    const titleStyle = Styles.title
+    const titleTextStyle = merge(Styles.titleText, important ? Styles.titleTextInverse : {})
     const topRowStyle = Styles.topRow
     const timestampStyle = Styles.timestamp
     const Icon = isOpen ? IconOpen : IconClosed
@@ -119,7 +128,9 @@ class Command extends Component {
         <div style={Styles.body}>
           <div style={topRowStyle} onClick={this.handleToggleOpen}>
             <Timestamp date={date} style={timestampStyle} />
-            <span style={titleStyle}>{title}</span>
+            <div style={Styles.title}>
+              <span style={titleTextStyle}>{title}</span>
+            </div>
             {isOpen && hasSubtitle && <span style={Styles.subtitle}>{subtitle}</span>}
             {!isOpen && <span style={Styles.preview}>{preview}</span>}
             {isOpen && <span style={Styles.spacer}></span>}

packages/reactotron-core-client/README.md

@@ -59,6 +59,9 @@ client.connect()
 // send a log message as a string
 client.send('log', { level: 'debug', message: 'hello!' })
 
+// send a log message as a string that's important
+client.send('log', { level: 'debug', message: 'hello!' }, true)
+
 // sending an object log message
 client.send('log', {
   level: 'debug',

packages/reactotron-core-client/src/index.js

@@ -119,8 +119,8 @@ export class Client {
   /**
    * Sends a command to the server
    */
-  send (type, payload) {
-    this.socket && this.socket.emit('command', { type, payload })
+  send (type, payload, important = false) {
+    this.socket && this.socket.emit('command', { type, payload, important: !!important })
   }
 
   /**

packages/reactotron-core-client/src/plugins/api-response.js

@@ -1,11 +1,16 @@
+import { isWithin } from 'ramdasauce'
+
 /**
  * Sends API request/response information.
  */
 export default () => reactotron => {
   return {
     features: {
-      apiResponse: (request, response, duration) =>
-        reactotron.send('api.response', { request, response, duration })
+      apiResponse: (request, response, duration) => {
+        const ok = response && response.status && isWithin(200, 299, response.status)
+        const important = !ok
+        reactotron.send('api.response', { request, response, duration }, important)
+      }
     }
   }
 }

packages/reactotron-core-client/src/plugins/logger.js

@@ -4,10 +4,10 @@
 export default () => reactotron => {
   return {
     features: {
-      log: (message) => reactotron.send('log', { level: 'debug', message }),
-      debug: (message) => reactotron.send('log', { level: 'debug', message }),
-      warn: (message) => reactotron.send('log', { level: 'warn', message }),
-      error: (message, stack) => reactotron.send('log', { level: 'error', message, stack })
+      log: (message, important = false) => reactotron.send('log', { level: 'debug', message}, !!important),
+      debug: (message, important = false) => reactotron.send('log', { level: 'debug', message}, !!important),
+      warn: (message) => reactotron.send('log', { level: 'warn', message }, true),
+      error: (message, stack) => reactotron.send('log', { level: 'error', message, stack }, true)
     }
   }
 }

packages/reactotron-core-client/src/plugins/state-responses.js

@@ -4,8 +4,8 @@
 export default () => reactotron => {
   return {
     features: {
-      stateActionComplete: (name, action) =>
-        reactotron.send('state.action.complete', { name, action }),
+      stateActionComplete: (name, action, important = false) =>
+        reactotron.send('state.action.complete', { name, action }, !!important),
 
       stateValuesResponse: (path, value, valid = true) =>
         reactotron.send('state.values.response', { path, value, valid }),

packages/reactotron-core-server/src/index.js

@@ -99,10 +99,10 @@ class Server {
       })
 
       // when we receive a command from the client
-      socket.on('command', ({ type, payload }) => {
+      socket.on('command', ({ type, important, payload }) => {
         this.messageId++
         const date = new Date()
-        const fullCommand = { type, payload, messageId: this.messageId, date }
+        const fullCommand = { type, important, payload, messageId: this.messageId, date }
 
         // for client intros
         if (type === 'client.intro') {

packages/reactotron-redux/README.md

@@ -38,7 +38,10 @@ Here's a bigger example:
 // came in up in the import section.
 const enhancers = compose(
   applyMiddleware(logger),
-  createReactotronTrackingEnhancer(Reactotron)
+  createReactotronTrackingEnhancer(Reactotron, {
+    // optional flagging of important actions
+    isActionImportant: action => action.type === 'FORMAT_HARD_DRIVE'
+  })
 )
 
 // This creates our store (rootReducer is just from a sample app, you've

packages/reactotron-redux/src/plugin.js

@@ -3,7 +3,7 @@ import requestKeys from './keys-request'
 import requestValues from './values-request'
 import getSubscriptionValues from './get-subscription-values'
 
-const createPlugin = store => {
+const createPlugin = (store, pluginConfig = {}) => {
   // hold onto the send
   let capturedSend
 
@@ -58,7 +58,7 @@ const createPlugin = store => {
   }
 
   // attach a function that we can call from the enhancer
-  plugin.report = (action, ms) => {
+  plugin.report = (action, ms, important = false) => {
     if (!capturedSend) return
 
     // let's call the type, name because that's "generic" name in Reactotron
@@ -70,7 +70,7 @@ const createPlugin = store => {
     }
 
     // off ya go!
-    capturedSend('state.action.complete', { name, action, ms })
+    capturedSend('state.action.complete', { name, action, ms }, important)
   }
 
   return plugin

packages/reactotron-redux/src/store-enhancer.js

@@ -41,7 +41,13 @@ const createReactotronStoreEnhancer = (reactotron, enhancerOptions = {}) => {
 
       // action not blacklisted?
       if (!R.contains(action.type, options.except || [])) {
-        plugin.report(action, ms)
+        // check if the app considers this important
+        let important = false
+        if (enhancerOptions && typeof enhancerOptions.isActionImportant === 'function') {
+          important = !!enhancerOptions.isActionImportant(action)
+        }
+
+        plugin.report(action, ms, important)
       }
 
       // return the real work's result

packages/reactotron-redux/test/store-enhancer-test.js

@@ -13,21 +13,30 @@ test('tests pretty much everything', t => {
   // these guys will hold the values of the command jumping the wire
   let capturedType
   let capturedPayload
+  let capturedImportant = false
+  let importantCount = 0
 
   // create our own socket.io which captures the contents of emit
   const io = x => {
     return {
       on: (command, callback) => true,
-      emit: (command, { type, payload }) => {
+      emit: (command, { type, payload, important }) => {
         capturedType = type
         capturedPayload = payload
+        capturedImportant = important
       }
     }
   }
 
+  // test the important callback
+  const isActionImportant = (action) => {
+    importantCount++
+    return true
+  }
+
   // grab the enhancer
   const client = createClient({ io, plugins: CorePlugins })
-  const enhancer = createEnhancer(client)
+  const enhancer = createEnhancer(client, { isActionImportant })
   t.is(typeof enhancer, 'function')
 
   // things to make sure our internal middleware chains dispatch properly
@@ -62,4 +71,6 @@ test('tests pretty much everything', t => {
   t.is(capturedPayload.name, 'add')
   t.deepEqual(capturedPayload.action, action)
   t.true(capturedPayload.ms >= 0)
+  t.is(importantCount, 1)
+  t.true(capturedImportant)
 })