find functionallity

client/app/components/consts.js

@@ -1,19 +1,24 @@
 import keyMirror from 'keymirror'
 
 export const ACTIONS = keyMirror({
-  SOCKET_READY:       null,
+  CLEAR_CONTENT:      null,
+  CLEAR_FIND:         null,
   INDEX_READY:        null,
-  SET_FILES:          null,
-  SET_CURRENT_PATH:   null,
+  RECEIVE_REQUEST:    null,
+  FIND_NEXT:          null,
+  FIND_PREV:          null,
+  SEND_REQUEST:       null,
   SET_CONTENT:        null,
-  CLEAR_CONTENT:      null,
   SET_CONTENT_ID:     null,
+  SET_CURRENT_PATH:   null,
+  SET_FILES:          null,
   SET_FILTER:         null,
+  SET_FIND:           null,
   SET_SEARCH:         null,
   SET_SEARCH_ID:      null,
   SET_SEARCH_RESULTS: null,
-  SEND_REQUEST:       null,
-  RECEIVE_REQUEST:    null,
+  SET_LEVELS:         null,
+  SOCKET_READY:       null,
 })
 
 export const API_ACTIONS = {

client/app/components/file-view/file-view.js

@@ -1,35 +1,39 @@
 import React, {Component} from 'react'
-import {Map, List, Set} from 'immutable'
-import {contentSelector, filesSelector, hasPendingRequest, indexSelector, locationSelect} from 'selectors'
+import {List, Map} from 'immutable'
+import {
+  contentSelector, filesSelector, findSelector, hasPendingRequest, indexSelector, levelsSelector, locationSelect, matchesSelector,
+} from 'selectors'
 import {connect} from 'react-redux'
 import {createStructuredSelector} from 'reselect'
 import queryString from 'query-string'
-import {clearContent, send, setSearch} from 'sockets/socket-actions'
+import {clearContent, send, setLevels, setSearch} from 'sockets/socket-actions'
 import {API_ACTIONS, colorByLevel} from 'consts'
 import {LinesView} from 'file-view/lines-view'
 import {FSBar} from 'fs-bar'
 import {navigate} from 'utils'
 import Loader from 'loader/loader'
 import {Checkbox} from 'antd'
 import filesize from 'file-size'
-
-const ALL_LEVELS = Set(['debug', 'info', 'warning', 'error', 'success', 'progress'])
+import {ALL_LEVELS} from 'reducers/app-reducers'
 
 @connect(createStructuredSelector({
   location:   locationSelect,
   content:    contentSelector,
+  matches:    matchesSelector,
   files:      filesSelector,
+  levels:     levelsSelector,
+  find:       findSelector,
   index:      indexSelector,
   requesting: hasPendingRequest(API_ACTIONS.GET_CONTENT),
 }), {
   send,
   setSearch,
   clearContent,
+  setLevels,
 })
 class FileView extends Component {
   state = {
     activeFs:        [],
-    showLevels:      ALL_LEVELS,
     showTimestamp:   true,
     showLinenumbers: true,
   }
@@ -75,14 +79,11 @@ class FileView extends Component {
   }
 
   _handleLevelToggle = (index) => {
-    if (this.state.showLevels.includes(index)) {
-      this.setState({
-        showLevels: this.state.showLevels.delete(index),
-      })
+    const {levels, setLevels} = this.props
+    if (levels.includes(index)) {
+      setLevels(levels.delete(index))
     } else {
-      this.setState({
-        showLevels: this.state.showLevels.add(index),
-      })
+      setLevels(levels.add(index))
     }
   }
 
@@ -102,18 +103,38 @@ class FileView extends Component {
     navigate(`${pathname}?${fs}`)
   }
 
+  _matchToLine = (matches, index) => {
+    let matchCount = 0
+    for (let lineIndex of matches.keySeq().sort()) {
+      const lineMatches = matches.get(lineIndex)
+      if (matchCount + lineMatches.length > index) {
+        return lineIndex
+      }
+      matchCount += lineMatches.length
+    }
+  }
+
   render() {
-    const {content, location, index, requesting} = this.props
-    let contentComponent                         = null
+    let {matches, content, location, index, requesting, find, levels} = this.props
+
+    const scrollToLine = matches.size ? this._matchToLine(matches, find.get('index')) : undefined
+
+    let contentComponent = null
+
     if (requesting) {
       contentComponent = <Loader/>
-    } else if (content && content.size > 0) {
+    } else if (content.size > 0) {
       contentComponent =
         <LinesView lines={content}
                    location={location}
-                   showLevels={this.state.showLevels}
+                   matches={matches}
+                   findIndex={find.get('index')}
+                   findQuery={find.get('query')}
+                   scrollToLine={scrollToLine}
+                   showLevels={levels}
                    showLinenumbers={this.state.showLinenumbers}
-                   showTimestamp={this.state.showTimestamp}/>
+                   showTimestamp={this.state.showTimestamp}
+        />
     } else {
       contentComponent = <div>File is empty</div>
     }
@@ -136,7 +157,7 @@ class FileView extends Component {
                  className="levels"
                  items={ALL_LEVELS.map(level => ({
                    name:   level,
-                   active: this.state.showLevels.includes(level),
+                   active: levels.includes(level),
                    color:  colorByLevel(level),
                  })).toJS()}/>
           <Checkbox checked={this.state.showLinenumbers} onChange={({target: {checked}}) => {

client/app/components/file-view/lines-view.js

@@ -1,4 +1,6 @@
 import React, {Component} from 'react'
+import _isString from 'lodash/isString'
+import _flatMap from 'lodash/flatMap'
 import cn from 'classnames'
 import {Set, Map} from 'immutable'
 import {Tag} from 'antd'
@@ -12,7 +14,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import {navigate} from 'utils'
 
 const calculateMaxLengths = (lines) => lines.reduce(({message, level}, line) => ({
-  message: Math.max(message, line.get('msg').length),
+  message: Math.max(message, Array.isArray(line.get('msg')) ? line.get('msg').reduce((lineLength, token) => {
+    if (_isString(token)) {
+      return lineLength + token.length
+    } else {
+      return lineLength + 1
+    }
+  }, 0) : line.get('msg').length),
   level:   Math.max(level, line.get('level').length),
 }), {message: 0, level: 0})
 
@@ -24,8 +32,6 @@ const calculateLines = ({lines, showLevels, showFilename}) => {
       line: groupLines.getIn([0, 'line']),
       fs:   groupLines.getIn([0, 'fs']),
     }), ...groupLines]).toList()
-  } else if (showLevels.size > 0) {
-    return lines.filter(line => !line.get('level') || showLevels.includes(line.get('level', '').toLowerCase()))
   }
   return lines
 }
@@ -40,6 +46,7 @@ class LinesView extends Component {
     showFilename:    PropTypes.bool,
     showTimestamp:   PropTypes.bool,
     showLinenumbers: PropTypes.bool,
+    scrollToLine:    PropTypes.number,
     showLevels:      ImmutablePropTypes.set,
   }
 
@@ -116,7 +123,20 @@ class LinesView extends Component {
     }
 
     const message   = line.get('msg', '')
-    const lineCount = message.split('\n').length
+    let lineCount
+
+    if (Array.isArray(message)) {
+      lineCount = message.reduce((count, token) => {
+        if (_isString(token)) {
+          return count + token.split('\n').length - 1
+        } else {
+          return count
+        }
+      }, 0)
+    } else {
+      lineCount = message.split('\n').length
+    }
+
     return (lineCount > 1 ? lineCount + 2 : 1) * 16
   }
 
@@ -134,8 +154,9 @@ class LinesView extends Component {
                      key,
                      style,
                    }) => {
-    const column = this._getColumns()[columnIndex]
-    const line   = this.state.lines.get(index)
+    const {matches, findIndex, findQuery} = this.props
+    const column                          = this._getColumns()[columnIndex]
+    const line                            = this.state.lines.get(index)
 
     let content = null
     switch (column.name) {
@@ -145,6 +166,24 @@ class LinesView extends Component {
           content =
             <div className="file-name"><Link to={`/${content}?fs=${line.get('fs')}&line=${line.get('line')}`}>{content}</Link></div>
         }
+        if (matches && matches.has(line.get('line'))) {
+          const findIndexOffset = matches.keySeq().sort().reduce((result, matchIndex) => {
+            const lineMatches = matches.get(matchIndex)
+            if (matchIndex < line.get('line')
+            ) {
+              return result + lineMatches.length
+            }
+            return result
+          }, 0)
+
+          const tokens = content.split(findQuery)
+          content      = _flatMap(tokens, (token, tokenIndex) => {
+            const isCurrent = findIndexOffset + tokenIndex === findIndex
+            return (tokenIndex < (tokens.length - 1) ? [token,
+              <span
+                className={cn('find-highlight', {current: isCurrent})}>{findQuery}</span>] : [token])
+          })
+        }
         break
       }
       case 'level': {
@@ -174,16 +213,16 @@ class LinesView extends Component {
   }
 
   _renderLines = () => {
-    const {location = {}} = this.props
-    const {lines}         = this.state
+    const {location = {}, scrollToLine} = this.props
+    const {lines}                       = this.state
 
     const {line = 0} = queryString.parse(location.search)
     return (
       <AutoSizer>
         {({height, width}) => (
           <Grid
             ref={node => this.grid = node}
-            scrollToRow={Math.min(lines.size, Number(line))}
+            scrollToRow={scrollToLine || Math.min(lines.size, Number(line))}
             width={width}
             height={height}
             rowCount={lines.size}

client/app/components/index.sass

@@ -24,6 +24,11 @@
     line-height: 31px
     .ant-breadcrumb-link
       line-height: normal
+      .ant-input, .ant-input-group-wrapper
+        width: initial
+      .ant-input-group-addon
+        padding: 0
+        border: none
     .ant-spin
       margin-left: 10px
   .logo
@@ -48,6 +53,10 @@
     white-space: pre
     font-family: monospace
     font-size: 12px
+    .find-highlight
+      background-color: yellow
+      &.current
+        background-color: orange
     .time
       color: #5b6360
       padding-right: 5px
@@ -69,6 +78,9 @@
     border: none
     padding: 5px
     background: rgba(0, 0, 0, 0.05)
+  .find-index
+    font-size: 12px
+    margin-left: 5px
   .ant-list
     overflow-y: auto
   .search-view