Address some issues in PR.

ui/src/kapacitor/apis/index.js

@@ -100,3 +100,15 @@ export const updateTask = async (
     throw error
   }
 }
+
+export const getLogStream = kapacitor =>
+  fetch(`${kapacitor.links.proxy}?path=/kapacitor/v1/logs`, {
+    method: 'GET',
+    headers: {'Content-Type': 'application/json'},
+  })
+
+export const getLogStreamByRuleID = (kapacitor, ruleID) =>
+  fetch(`${kapacitor.links.proxy}?path=/kapacitor/v1/logs?task=${ruleID}`, {
+    method: 'GET',
+    headers: {'Content-Type': 'application/json'},
+  })

ui/src/kapacitor/components/LogsTable.js

@@ -20,7 +20,7 @@ class LogsTable extends Component {
     return objElements
   }
 
-  renderTableRow = (logItem, i) => {
+  renderTableRow = logItem => {
     let rowDetails
 
     if (logItem.service === 'sessions') {
@@ -111,7 +111,7 @@ class LogsTable extends Component {
     }
 
     return (
-      <div className="logs-table--row" key={i}>
+      <div className="logs-table--row" key={logItem.key}>
         <div className="logs-table--divider">
           <div className={`logs-table--level ${logItem.lvl}`} />
           <div className="logs-table--timestamp">
@@ -140,7 +140,7 @@ class LogsTable extends Component {
         </div>
         <div className="logs-table--panel">
           <div className="logs-table">
-            {logs.map((l, i) => this.renderTableRow(l, i))}
+            {logs.map(l => this.renderTableRow(l))}
           </div>
         </div>
       </div>

ui/src/kapacitor/containers/TickscriptPage.js

@@ -1,11 +1,14 @@
 import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
+import uuid from 'node-uuid'
 
 import Tickscript from 'src/kapacitor/components/Tickscript'
 import * as kapactiorActionCreators from 'src/kapacitor/actions/view'
 import * as errorActionCreators from 'shared/actions/errors'
 import {getActiveKapacitor} from 'src/shared/apis'
+import {getLogStreamByRuleID} from 'src/kapacitor/apis'
+import {publishNotification} from 'shared/actions/notifications'
 
 class TickscriptPage extends Component {
   constructor(props) {
@@ -29,26 +32,16 @@ class TickscriptPage extends Component {
 
   shouldFetch = null
 
-  logKey = j => (log, i) => ({
-    ...log,
-    key: `${log.ts}-${j}-${i}`,
-  })
-
   fetchChunkedLogs = async (kapacitor, ruleID) => {
+    const {notify} = this.props
+
     try {
-      const response = await fetch(
-        `${kapacitor.links.proxy}?path=/kapacitor/v1/logs?task=${ruleID}`,
-        {
-          method: 'GET',
-          headers: {'Content-Type': 'application/json'},
-        }
-      )
+      const response = await getLogStreamByRuleID(kapacitor, ruleID)
 
       const reader = await response.body.getReader()
       const decoder = new TextDecoder()
 
       let result
-      let j = 0
 
       while (this.shouldFetch === true && !(result && result.done)) {
         result = await reader.read()
@@ -57,20 +50,21 @@ class TickscriptPage extends Component {
           stream: !result.done,
         })
 
-        const json = `[${chunk.split('}{').join('},{')}]`
+        const json = `[${chunk.split('}\n{').join('},{')}]`
 
-        const logs = JSON.parse(json).map(this.logKey(j))
+        const logs = JSON.parse(json).map(log => ({
+          ...log,
+          key: uuid.v4(),
+        }))
 
         this.setState({
-          logs: [...this.state.logs, ...logs],
+          logs: [...logs, ...this.state.logs],
         })
-
-        j += 1
       }
     } catch (error) {
       console.error(error)
+      notify('error', error)
       throw error
-      // TODO error handling
     }
   }
 
@@ -205,6 +199,7 @@ TickscriptPage.propTypes = {
     ruleID: string,
   }).isRequired,
   rules: arrayOf(shape()),
+  notify: func.isRequired,
 }
 
 const mapStateToProps = state => {
@@ -216,6 +211,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => ({
   kapacitorActions: bindActionCreators(kapactiorActionCreators, dispatch),
   errorActions: bindActionCreators(errorActionCreators, dispatch),
+  notify: bindActionCreators(publishNotification, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(TickscriptPage)

ui/src/shared/components/ResizeContainer.js

@@ -97,7 +97,7 @@ class ResizeContainer extends Component {
 
   render() {
     const {bottomHeightPixels, topHeight, bottomHeight, isDragging} = this.state
-    const {containerClass, children, isKapacitorTheme} = this.props
+    const {containerClass, children, theme} = this.props
 
     if (React.Children.count(children) > maximumNumChildren) {
       console.error(
@@ -122,7 +122,7 @@ class ResizeContainer extends Component {
           })}
         </div>
         <ResizeHandle
-          isKapacitorTheme={isKapacitorTheme}
+          theme={theme}
           isDragging={isDragging}
           onHandleStartDrag={this.handleStartDrag}
           top={topHeight}
@@ -141,7 +141,7 @@ class ResizeContainer extends Component {
   }
 }
 
-const {bool, node, number, string} = PropTypes
+const {node, number, string} = PropTypes
 
 ResizeContainer.propTypes = {
   children: node.isRequired,
@@ -150,7 +150,7 @@ ResizeContainer.propTypes = {
   minBottomHeight: number,
   initialTopHeight: string,
   initialBottomHeight: string,
-  isKapacitorTheme: bool,
+  theme: string,
 }
 
 export default ResizeContainer

ui/src/shared/components/ResizeHandle.js

@@ -6,18 +6,18 @@ const ResizeHandle = React.createClass({
   propTypes: {
     onHandleStartDrag: func.isRequired,
     isDragging: bool.isRequired,
-    isKapacitorTheme: bool,
+    theme: string,
     top: string,
   },
 
   render() {
-    const {isDragging, onHandleStartDrag, top, isKapacitorTheme} = this.props
+    const {isDragging, onHandleStartDrag, top, theme} = this.props
 
     return (
       <div
         className={classnames('resizer--handle', {
           dragging: isDragging,
-          'resizer--malachite': isKapacitorTheme,
+          'resizer--malachite': theme === 'kapacitor',
         })}
         onMouseDown={onHandleStartDrag}
         style={{top}}