Refactor log table items into individual components

ui/src/kapacitor/components/LogItemHTTP.js

@@ -0,0 +1,32 @@
+import React, {PropTypes} from 'react'
+
+const LogItemHTTP = ({logItem}) =>
+  <div className="logs-table--row">
+    <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">HTTP Request</div>
+      <div className="logs-table--http">
+        {logItem.method} {logItem.username}@{logItem.host} ({logItem.duration})
+      </div>
+    </div>
+  </div>
+
+const {shape, string} = PropTypes
+
+LogItemHTTP.propTypes = {
+  logItem: shape({
+    lvl: string.isRequired,
+    ts: string.isRequired,
+    method: string.isRequired,
+    username: string.isRequired,
+    host: string.isRequired,
+    duration: string.isRequired,
+  }),
+}
+
+export default LogItemHTTP

ui/src/kapacitor/components/LogItemHTTPError.js

@@ -0,0 +1,32 @@
+import React, {PropTypes} from 'react'
+
+const LogItemHTTPError = ({logItem}) =>
+  <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">
+        {logItem.ts}
+      </div>
+    </div>
+    <div className="logs-table--details">
+      <div className="logs-table--service error">HTTP Server</div>
+      <div className="logs-table--blah">
+        <div className="logs-table--key-values error">
+          ERROR: {logItem.msg}
+        </div>
+      </div>
+    </div>
+  </div>
+
+const {shape, string} = PropTypes
+
+LogItemHTTPError.propTypes = {
+  logItem: shape({
+    key: string.isRequired,
+    lvl: string.isRequired,
+    ts: string.isRequired,
+    msg: string.isRequired,
+  }),
+}
+
+export default LogItemHTTPError

ui/src/kapacitor/components/LogItemInfluxDBDebug.js

@@ -0,0 +1,34 @@
+import React, {PropTypes} from 'react'
+
+const LogItemInfluxDBDebug = ({logItem}) =>
+  <div className="logs-table--row">
+    <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 debug">InfluxDB</div>
+      <div className="logs-table--blah">
+        <div className="logs-table--key-values debug">
+          DEBUG: {logItem.msg}
+          <br />
+          Cluster: {logItem.cluster}
+        </div>
+      </div>
+    </div>
+  </div>
+
+const {shape, string} = PropTypes
+
+LogItemInfluxDBDebug.propTypes = {
+  logItem: shape({
+    lvl: string.isRequired,
+    ts: string.isRequired,
+    msg: string.isRequired,
+    cluster: string.isRequired,
+  }),
+}
+
+export default LogItemInfluxDBDebug

ui/src/kapacitor/components/LogItemKapacitorDebug.js

@@ -0,0 +1,31 @@
+import React, {PropTypes} from 'react'
+
+const LogItemKapacitorDebug = ({logItem}) =>
+  <div className="logs-table--row">
+    <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 debug">Kapacitor</div>
+      <div className="logs-table--blah">
+        <div className="logs-table--key-values debug">
+          DEBUG: {logItem.msg}
+        </div>
+      </div>
+    </div>
+  </div>
+
+const {shape, string} = PropTypes
+
+LogItemKapacitorDebug.propTypes = {
+  logItem: shape({
+    lvl: string.isRequired,
+    ts: string.isRequired,
+    msg: string.isRequired,
+  }),
+}
+
+export default LogItemKapacitorDebug

ui/src/kapacitor/components/LogItemKapacitorError.js

@@ -0,0 +1,31 @@
+import React, {PropTypes} from 'react'
+
+const LogItemKapacitorError = ({logItem}) =>
+  <div className="logs-table--row">
+    <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 error">Kapacitor</div>
+      <div className="logs-table--blah">
+        <div className="logs-table--key-values error">
+          ERROR: {logItem.msg}
+        </div>
+      </div>
+    </div>
+  </div>
+
+const {shape, string} = PropTypes
+
+LogItemKapacitorError.propTypes = {
+  logItem: shape({
+    lvl: string.isRequired,
+    ts: string.isRequired,
+    msg: string.isRequired,
+  }),
+}
+
+export default LogItemKapacitorError

ui/src/kapacitor/components/LogItemKapacitorPoint.js

@@ -0,0 +1,51 @@
+import React, {PropTypes} from 'react'
+
+const renderKeysAndValues = object => {
+  if (!object) {
+    return <span className="logs-table--empty-cell">--</span>
+  }
+  const objKeys = Object.keys(object)
+  const objValues = Object.values(object)
+
+  const objElements = objKeys.map((objKey, i) =>
+    <div key={i} className="logs-table--key-value">
+      {objKey}: <span>{objValues[i]}</span>
+    </div>
+  )
+  return objElements
+}
+const LogItemKapacitorPoint = ({logItem}) =>
+  <div className="logs-table--row">
+    <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">Kapacitor Point</div>
+      <div className="logs-table--blah">
+        <div className="logs-table--key-values">
+          TAGS<br />
+          {renderKeysAndValues(logItem.tag)}
+        </div>
+        <div className="logs-table--key-values">
+          FIELDS<br />
+          {renderKeysAndValues(logItem.field)}
+        </div>
+      </div>
+    </div>
+  </div>
+
+const {shape, string} = PropTypes
+
+LogItemKapacitorPoint.propTypes = {
+  logItem: shape({
+    lvl: string.isRequired,
+    ts: string.isRequired,
+    tag: shape.isRequired,
+    field: shape.isRequired,
+  }),
+}
+
+export default LogItemKapacitorPoint

ui/src/kapacitor/components/LogItemSession.js

@@ -0,0 +1,28 @@
+import React, {PropTypes} from 'react'
+
+const LogItemSession = ({logItem}) =>
+  <div className="logs-table--row">
+    <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--session">
+        {logItem.msg}
+      </div>
+    </div>
+  </div>
+
+const {shape, string} = PropTypes
+
+LogItemSession.propTypes = {
+  logItem: shape({
+    lvl: string.isRequired,
+    ts: string.isRequired,
+    msg: string.isRequired,
+  }),
+}
+
+export default LogItemSession

ui/src/kapacitor/components/LogsTable.js

@@ -1,124 +1,57 @@
 import React, {Component, 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'
+
 class LogsTable extends Component {
   constructor(props) {
     super(props)
   }
 
-  renderKeysAndValues = object => {
-    if (!object) {
-      return <span className="logs-table--empty-cell">--</span>
-    }
-    const objKeys = Object.keys(object)
-    const objValues = Object.values(object)
-
-    const objElements = objKeys.map((objKey, i) =>
-      <div key={i} className="logs-table--key-value">
-        {objKey}: <span>{objValues[i]}</span>
-      </div>
-    )
-    return objElements
-  }
-
-  renderTableRow = logItem => {
-    let rowDetails
-
+  renderTableRow = (logItem, index) => {
     if (logItem.service === 'sessions') {
-      rowDetails = (
-        <div className="logs-table--details">
-          <div className="logs-table--session">
-            {logItem.msg}
-          </div>
-        </div>
-      )
+      return <LogItemSession logItem={logItem} key={index} />
     }
     if (logItem.service === 'http' && logItem.msg === 'http request') {
-      rowDetails = (
-        <div className="logs-table--details">
-          <div className="logs-table--service">HTTP Request</div>
-          <div className="logs-table--http">
-            {logItem.method} {logItem.username}@{logItem.host} ({logItem.duration})
-          </div>
-        </div>
-      )
+      return <LogItemHTTP logItem={logItem} key={index} />
     }
     if (logItem.service === 'kapacitor' && logItem.msg === 'point') {
-      rowDetails = (
-        <div className="logs-table--details">
-          <div className="logs-table--service">Kapacitor Point</div>
-          <div className="logs-table--blah">
-            <div className="logs-table--key-values">
-              TAGS<br />
-              {this.renderKeysAndValues(logItem.tag)}
-            </div>
-            <div className="logs-table--key-values">
-              FIELDS<br />
-              {this.renderKeysAndValues(logItem.field)}
-            </div>
-          </div>
-        </div>
-      )
+      return <LogItemKapacitorPoint logItem={logItem} key={index} />
     }
     if (logItem.service === 'httpd_server_errors' && logItem.lvl === 'error') {
-      rowDetails = (
-        <div className="logs-table--details">
-          <div className="logs-table--service error">HTTP Server</div>
-          <div className="logs-table--blah">
-            <div className="logs-table--key-values error">
-              ERROR: {logItem.msg}
-            </div>
-          </div>
-        </div>
-      )
+      return <LogItemHTTPError logItem={logItem} key={index} />
     }
     if (logItem.service === 'kapacitor' && logItem.lvl === 'error') {
-      rowDetails = (
-        <div className="logs-table--details">
-          <div className="logs-table--service error">Kapacitor</div>
-          <div className="logs-table--blah">
-            <div className="logs-table--key-values error">
-              ERROR: {logItem.msg}
-            </div>
-          </div>
-        </div>
-      )
+      return <LogItemKapacitorError logItem={logItem} key={index} />
     }
     if (logItem.service === 'kapacitor' && logItem.lvl === 'debug') {
-      rowDetails = (
-        <div className="logs-table--details">
-          <div className="logs-table--service debug">Kapacitor</div>
-          <div className="logs-table--blah">
-            <div className="logs-table--key-values debug">
-              DEBUG: {logItem.msg}
-            </div>
-          </div>
-        </div>
-      )
+      return <LogItemKapacitorDebug logItem={logItem} key={index} />
     }
     if (logItem.service === 'influxdb' && logItem.lvl === 'debug') {
-      rowDetails = (
-        <div className="logs-table--details">
-          <div className="logs-table--service debug">InfluxDB</div>
-          <div className="logs-table--blah">
-            <div className="logs-table--key-values debug">
-              DEBUG: {logItem.msg}
-              <br />
-              Cluster: {logItem.cluster}
-            </div>
-          </div>
-        </div>
-      )
+      return <LogItemInfluxDBDebug logItem={logItem} key={index} />
     }
 
     return (
-      <div className="logs-table--row" key={logItem.key}>
+      <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>
-        {rowDetails}
+        <div className="logs-table--details">
+          <div className="logs-table--service debug">Thing</div>
+          <div className="logs-table--blah">
+            <div className="logs-table--key-values">
+              <p>Thang</p>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }
@@ -140,7 +73,7 @@ class LogsTable extends Component {
         </div>
         <div className="logs-table--panel">
           <div className="logs-table">
-            {logs.map(l => this.renderTableRow(l))}
+            {logs.map((log, i) => this.renderTableRow(log, i))}
           </div>
         </div>
       </div>