From 8471c829de9b3f10d8bb8b8fe4bacef084418816 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Tue, 28 Nov 2017 10:47:14 -0700
Subject: [PATCH] Resolve some PR issues. Improve Logging UX. Switch back to
 version detection due to poor UX (lag) of feature detection. Split out
 LogsTableRow to SFC. LogsTable also becomes an SFC.

---
 ui/src/kapacitor/apis/index.js                | 14 +++
 ui/src/kapacitor/components/LogsTable.js      | 98 ++++---------------
 ui/src/kapacitor/components/LogsTableRow.js   | 68 +++++++++++++
 ui/src/kapacitor/components/LogsToggle.js     | 16 ++-
 .../kapacitor/components/TickscriptHeader.js  | 11 ++-
 ui/src/kapacitor/constants/index.js           |  2 -
 ui/src/kapacitor/containers/TickscriptPage.js | 34 ++++---
 7 files changed, 136 insertions(+), 107 deletions(-)
 create mode 100644 ui/src/kapacitor/components/LogsTableRow.js

diff --git a/ui/src/kapacitor/apis/index.js b/ui/src/kapacitor/apis/index.js
index 41220be6f..4465f8aca 100644
--- a/ui/src/kapacitor/apis/index.js
+++ b/ui/src/kapacitor/apis/index.js
@@ -115,3 +115,17 @@ export const getLogStreamByRuleID = (kapacitor, ruleID) =>
       headers: {'Content-Type': 'application/json'},
     }
   )
+
+export const pingKapacitorVersion = async kapacitor => {
+  try {
+    const result = await AJAX({
+      method: 'GET',
+      url: `${kapacitor.links.proxy}?path=/kapacitor/v1preview/ping`,
+    })
+    const kapVersion = result.headers['x-kapacitor-version']
+    return kapVersion === '' ? null : kapVersion
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.js
index ae1379c9f..0e49badd3 100644
--- a/ui/src/kapacitor/components/LogsTable.js
+++ b/ui/src/kapacitor/components/LogsTable.js
@@ -1,86 +1,26 @@
-import React, {Component, PropTypes} from 'react'
+import React, {PropTypes} from 'react'
 
 import FancyScrollbar from 'shared/components/FancyScrollbar'
-import LogItemSession from 'src/kapacitor/components/LogItemSession'
-import LogItemHTTP from 'src/kapacitor/components/LogItemHTTP'
-import LogItemHTTPError from 'src/kapacitor/components/LogItemHTTPError'
-import LogItemKapacitorPoint from 'src/kapacitor/components/LogItemKapacitorPoint'
-import LogItemKapacitorError from 'src/kapacitor/components/LogItemKapacitorError'
-import LogItemKapacitorDebug from 'src/kapacitor/components/LogItemKapacitorDebug'
-import LogItemInfluxDBDebug from 'src/kapacitor/components/LogItemInfluxDBDebug'
+import LogsTableRow from 'src/kapacitor/components/LogsTableRow'
 
-class LogsTable extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  renderTableRow = (logItem, index) => {
-    if (logItem.service === 'sessions') {
-      return <LogItemSession logItem={logItem} key={index} />
-    }
-    if (logItem.service === 'http' && logItem.msg === 'http request') {
-      return <LogItemHTTP logItem={logItem} key={index} />
-    }
-    if (logItem.service === 'kapacitor' && logItem.msg === 'point') {
-      return <LogItemKapacitorPoint logItem={logItem} key={index} />
-    }
-    if (logItem.service === 'httpd_server_errors' && logItem.lvl === 'error') {
-      return <LogItemHTTPError logItem={logItem} key={index} />
-    }
-    if (logItem.service === 'kapacitor' && logItem.lvl === 'error') {
-      return <LogItemKapacitorError logItem={logItem} key={index} />
-    }
-    if (logItem.service === 'kapacitor' && logItem.lvl === 'debug') {
-      return <LogItemKapacitorDebug logItem={logItem} key={index} />
-    }
-    if (logItem.service === 'influxdb' && logItem.lvl === 'debug') {
-      return <LogItemInfluxDBDebug logItem={logItem} key={index} />
-    }
-
-    return (
-      <div className="logs-table--row" key={index}>
-        <div className="logs-table--divider">
-          <div className={`logs-table--level ${logItem.lvl}`} />
-          <div className="logs-table--timestamp">
-            {logItem.ts}
-          </div>
-        </div>
-        <div className="logs-table--details">
-          <div className="logs-table--service">
-            {logItem.service || '--'}
-          </div>
-          <div className="logs-table--blah">
-            <div className="logs-table--key-values">
-              {logItem.msg || '--'}
-            </div>
-          </div>
-        </div>
+const LogsTable = ({logs}) =>
+  <div className="logs-table--container">
+    <div className="logs-table--header">
+      <h2 className="panel-title">Logs</h2>
+    </div>
+    <FancyScrollbar
+      className="logs-table--panel fancy-scroll--kapacitor"
+      autoHide={false}
+    >
+      <div className="logs-table">
+        {logs.length
+          ? logs.map((log, i) =>
+              <LogsTableRow key={log.key} logItem={log} index={i} />
+            )
+          : <div className="page-spinner" />}
       </div>
-    )
-  }
-
-  render() {
-    const {logs} = this.props
-
-    return (
-      <div className="logs-table--container">
-        <div className="logs-table--header">
-          <h2 className="panel-title">Logs</h2>
-        </div>
-        <FancyScrollbar
-          className="logs-table--panel fancy-scroll--kapacitor"
-          autoHide={false}
-        >
-          <div className="logs-table">
-            {logs.length
-              ? logs.map((log, i) => this.renderTableRow(log, i))
-              : <div className="page-spinner" />}
-          </div>
-        </FancyScrollbar>
-      </div>
-    )
-  }
-}
+    </FancyScrollbar>
+  </div>
 
 const {arrayOf, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js
new file mode 100644
index 000000000..32b658c67
--- /dev/null
+++ b/ui/src/kapacitor/components/LogsTableRow.js
@@ -0,0 +1,68 @@
+import React, {PropTypes} from 'react'
+
+import LogItemSession from 'src/kapacitor/components/LogItemSession'
+import LogItemHTTP from 'src/kapacitor/components/LogItemHTTP'
+import LogItemHTTPError from 'src/kapacitor/components/LogItemHTTPError'
+import LogItemKapacitorPoint from 'src/kapacitor/components/LogItemKapacitorPoint'
+import LogItemKapacitorError from 'src/kapacitor/components/LogItemKapacitorError'
+import LogItemKapacitorDebug from 'src/kapacitor/components/LogItemKapacitorDebug'
+import LogItemInfluxDBDebug from 'src/kapacitor/components/LogItemInfluxDBDebug'
+
+const LogsTableRow = ({logItem, index}) => {
+  if (logItem.service === 'sessions') {
+    return <LogItemSession logItem={logItem} key={index} />
+  }
+  if (logItem.service === 'http' && logItem.msg === 'http request') {
+    return <LogItemHTTP logItem={logItem} key={index} />
+  }
+  if (logItem.service === 'kapacitor' && logItem.msg === 'point') {
+    return <LogItemKapacitorPoint logItem={logItem} key={index} />
+  }
+  if (logItem.service === 'httpd_server_errors' && logItem.lvl === 'error') {
+    return <LogItemHTTPError logItem={logItem} key={index} />
+  }
+  if (logItem.service === 'kapacitor' && logItem.lvl === 'error') {
+    return <LogItemKapacitorError logItem={logItem} key={index} />
+  }
+  if (logItem.service === 'kapacitor' && logItem.lvl === 'debug') {
+    return <LogItemKapacitorDebug logItem={logItem} key={index} />
+  }
+  if (logItem.service === 'influxdb' && logItem.lvl === 'debug') {
+    return <LogItemInfluxDBDebug logItem={logItem} key={index} />
+  }
+
+  return (
+    <div className="logs-table--row" key={index}>
+      <div className="logs-table--divider">
+        <div className={`logs-table--level ${logItem.lvl}`} />
+        <div className="logs-table--timestamp">
+          {logItem.ts}
+        </div>
+      </div>
+      <div className="logs-table--details">
+        <div className="logs-table--service">
+          {logItem.service || '--'}
+        </div>
+        <div className="logs-table--blah">
+          <div className="logs-table--key-values">
+            {logItem.msg || '--'}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const {number, shape, string} = PropTypes
+
+LogsTableRow.propTypes = {
+  logItem: shape({
+    key: string.isRequired,
+    ts: string.isRequired,
+    lvl: string.isRequired,
+    msg: string.isRequired,
+  }).isRequired,
+  index: number,
+}
+
+export default LogsTableRow
diff --git a/ui/src/kapacitor/components/LogsToggle.js b/ui/src/kapacitor/components/LogsToggle.js
index 92bc5f5f1..eedddafbf 100644
--- a/ui/src/kapacitor/components/LogsToggle.js
+++ b/ui/src/kapacitor/components/LogsToggle.js
@@ -1,6 +1,6 @@
 import React, {PropTypes} from 'react'
 
-const LogsToggle = ({areLogsVisible, areLogsEnabled, onToggleLogsVisbility}) =>
+const LogsToggle = ({areLogsVisible, onToggleLogsVisbility}) =>
   <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite logs-toggle">
     <li
       className={areLogsVisible ? null : 'active'}
@@ -8,20 +8,18 @@ const LogsToggle = ({areLogsVisible, areLogsEnabled, onToggleLogsVisbility}) =>
     >
       Editor
     </li>
-    {areLogsEnabled &&
-      <li
-        className={areLogsVisible ? 'active' : null}
-        onClick={onToggleLogsVisbility}
-      >
-        Editor + Logs
-      </li>}
+    <li
+      className={areLogsVisible ? 'active' : null}
+      onClick={onToggleLogsVisbility}
+    >
+      Editor + Logs
+    </li>
   </ul>
 
 const {bool, func} = PropTypes
 
 LogsToggle.propTypes = {
   areLogsVisible: bool,
-  areLogsEnabled: bool,
   onToggleLogsVisbility: func.isRequired,
 }
 
diff --git a/ui/src/kapacitor/components/TickscriptHeader.js b/ui/src/kapacitor/components/TickscriptHeader.js
index 1d13b5003..c830887ae 100644
--- a/ui/src/kapacitor/components/TickscriptHeader.js
+++ b/ui/src/kapacitor/components/TickscriptHeader.js
@@ -16,11 +16,12 @@ const TickscriptHeader = ({
       <div className="page-header__left">
         <h1 className="page-header__title">TICKscript Editor</h1>
       </div>
-      <LogsToggle
-        areLogsVisible={areLogsVisible}
-        areLogsEnabled={areLogsEnabled}
-        onToggleLogsVisbility={onToggleLogsVisbility}
-      />
+      {areLogsEnabled &&
+        <LogsToggle
+          areLogsVisible={areLogsVisible}
+          areLogsEnabled={areLogsEnabled}
+          onToggleLogsVisbility={onToggleLogsVisbility}
+        />}
       <div className="page-header__right">
         <SourceIndicator />
         <button
diff --git a/ui/src/kapacitor/constants/index.js b/ui/src/kapacitor/constants/index.js
index 92815bd86..181543e68 100644
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@@ -219,5 +219,3 @@ export const ALERT_NODES_ACCESSORS = {
       )
       .join('.'),
 }
-
-export const KAPACITOR_LOGS_NOT_FOUND = 404
diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js
index 3f2fef6c7..18ced564c 100644
--- a/ui/src/kapacitor/containers/TickscriptPage.js
+++ b/ui/src/kapacitor/containers/TickscriptPage.js
@@ -7,8 +7,7 @@ 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 {KAPACITOR_LOGS_NOT_FOUND} from 'src/kapacitor/constants'
+import {getLogStreamByRuleID, pingKapacitorVersion} from 'src/kapacitor/apis'
 import {publishNotification} from 'shared/actions/notifications'
 
 class TickscriptPage extends Component {
@@ -32,19 +31,16 @@ class TickscriptPage extends Component {
     }
   }
 
-  shouldFetch = null
-
   fetchChunkedLogs = async (kapacitor, ruleID) => {
     const {notify} = this.props
 
     try {
-      const response = await getLogStreamByRuleID(kapacitor, ruleID)
+      const version = await pingKapacitorVersion(kapacitor)
 
-      if (response.status === KAPACITOR_LOGS_NOT_FOUND) {
+      if (version && parseInt(version.split('.')[1], 10) < 4) {
         this.setState({
           areLogsEnabled: false,
         })
-        this.shouldFetch = false
         notify(
           'warning',
           'Could not use logging, requires Kapacitor version 1.4'
@@ -54,15 +50,27 @@ class TickscriptPage extends Component {
 
       this.setState({
         areLogsEnabled: true,
+        logs: [
+          {
+            id: uuid.v4(),
+            key: uuid.v4(),
+            lvl: 'info',
+            msg: 'created log session',
+            service: 'sessions',
+            tags: 'nil',
+            ts: new Date().toISOString(),
+          },
+        ],
       })
-      this.shouldFetch = true
+
+      const response = await getLogStreamByRuleID(kapacitor, ruleID)
 
       const reader = await response.body.getReader()
       const decoder = new TextDecoder()
 
       let result
 
-      while (this.shouldFetch === true && !(result && result.done)) {
+      while (this.state.areLogsEnabled === true && !(result && result.done)) {
         result = await reader.read()
 
         const chunk = decoder.decode(result.value || new Uint8Array(), {
@@ -117,7 +125,9 @@ class TickscriptPage extends Component {
   }
 
   componentWillUnmount() {
-    this.shouldFetch = false
+    this.setState({
+      areLogsEnabled: false,
+    })
   }
 
   handleSave = async () => {
@@ -163,7 +173,7 @@ class TickscriptPage extends Component {
     this.setState({task: {...this.state.task, id: e.target.value}})
   }
 
-  HandleToggleLogsVisbility = () => {
+  handleToggleLogsVisbility = () => {
     this.setState({areLogsVisible: !this.state.areLogsVisible})
   }
 
@@ -185,7 +195,7 @@ class TickscriptPage extends Component {
         onChangeID={this.handleChangeID}
         areLogsVisible={areLogsVisible}
         areLogsEnabled={areLogsEnabled}
-        onToggleLogsVisbility={this.HandleToggleLogsVisbility}
+        onToggleLogsVisbility={this.handleToggleLogsVisbility}
       />
     )
   }