Remove function closure in Severity Options components

ui/src/logs/components/ColorDropdown.tsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import React, {Component, MouseEvent} from 'react'
 
 import classnames from 'classnames'
 import {ClickOutside} from 'src/shared/components/ClickOutside'
@@ -13,7 +13,8 @@ interface Props {
   selected: SeverityColor
   disabled?: boolean
   stretchToFit?: boolean
-  onChoose: (colors: SeverityColor) => void
+  onChoose: (severityLevel: string, colors: SeverityColor) => void
+  severityLevel: string
 }
 
 interface State {
@@ -94,8 +95,10 @@ export default class ColorDropdown extends Component<Props, State> {
               className={classnames('color-dropdown--item', {
                 active: color.name === selected.name,
               })}
+              data-tag-key={color.name}
+              data-tag-value={color.hex}
               key={i}
-              onClick={this.handleColorClick(color)}
+              onClick={this.handleColorClick}
               title={color.name}
             >
               <span
@@ -123,8 +126,13 @@ export default class ColorDropdown extends Component<Props, State> {
     this.setState({expanded: false})
   }
 
-  private handleColorClick = (color: SeverityColor) => (): void => {
-    this.props.onChoose(color)
+  private handleColorClick = (e: MouseEvent<HTMLElement>): void => {
+    const target = e.target as HTMLElement
+    const hex = target.dataset.tagValue || target.parentElement.dataset.tagValue
+    const name = target.dataset.tagKey || target.parentElement.dataset.tagKey
+
+    const color: SeverityColor = {name, hex}
+    this.props.onChoose(this.props.severityLevel, color)
     this.setState({expanded: false})
   }
 }

ui/src/logs/components/OptionsOverlay.tsx

@@ -128,7 +128,8 @@ class OptionsOverlay extends Component<Props, State> {
     this.setState({workingSeverityLevels: DEFAULT_SEVERITY_LEVELS})
   }
 
-  private handleChangeSeverityLevel = (severity: string) => (
+  private handleChangeSeverityLevel = (
+    severity: string,
     override: SeverityColor
   ): void => {
     const workingSeverityLevels = this.state.workingSeverityLevels.map(
@@ -144,7 +145,7 @@ class OptionsOverlay extends Component<Props, State> {
     this.setState({workingSeverityLevels})
   }
 
-  private handleChangeSeverityFormat = (format: SeverityFormat) => () => {
+  private handleChangeSeverityFormat = (format: SeverityFormat) => {
     this.setState({workingFormat: format})
   }
 

ui/src/logs/components/SeverityColumnFormat.tsx

@@ -1,11 +1,11 @@
-import React, {SFC} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 
 import {SeverityFormatOptions} from 'src/logs/constants'
 import {SeverityFormat} from 'src/types/logs'
 
 interface Props {
   format: SeverityFormat
-  onChangeFormat: (format: SeverityFormat) => () => void
+  onChangeFormat: (format: SeverityFormat) => void
 }
 
 const className = (name: SeverityFormat, format: SeverityFormat): string => {
@@ -16,30 +16,51 @@ const className = (name: SeverityFormat, format: SeverityFormat): string => {
   return null
 }
 
-const SeverityFormat: SFC<Props> = ({format, onChangeFormat}) => (
-  <div className="graph-options-group">
-    <label className="form-label">Severity Format</label>
-    <ul className="nav nav-tablist nav-tablist-sm stretch">
-      <li
-        onClick={onChangeFormat(SeverityFormatOptions.dot)}
-        className={className(SeverityFormatOptions.dot, format)}
-      >
-        Dot
-      </li>
-      <li
-        onClick={onChangeFormat(SeverityFormatOptions.dotText)}
-        className={className(SeverityFormatOptions.dotText, format)}
-      >
-        Dot + Text
-      </li>
-      <li
-        onClick={onChangeFormat(SeverityFormatOptions.text)}
-        className={className(SeverityFormatOptions.text, format)}
-      >
-        Text
-      </li>
-    </ul>
-  </div>
-)
+class SeverityColumnFormat extends PureComponent<Props> {
+  constructor(props: Props) {
+    super(props)
+  }
 
-export default SeverityFormat
+  public render() {
+    const {format} = this.props
+
+    return (
+      <div className="graph-options-group">
+        <label className="form-label">Severity Format</label>
+        <ul className="nav nav-tablist nav-tablist-sm stretch">
+          <li
+            data-tag-value={SeverityFormatOptions.dot}
+            onClick={this.handleClick}
+            className={className(SeverityFormatOptions.dot, format)}
+          >
+            Dot
+          </li>
+          <li
+            data-tag-value={SeverityFormatOptions.dotText}
+            onClick={this.handleClick}
+            className={className(SeverityFormatOptions.dotText, format)}
+          >
+            Dot + Text
+          </li>
+          <li
+            data-tag-value={SeverityFormatOptions.text}
+            onClick={this.handleClick}
+            className={className(SeverityFormatOptions.text, format)}
+          >
+            Text
+          </li>
+        </ul>
+      </div>
+    )
+  }
+
+  private handleClick = (e: MouseEvent<HTMLElement>) => {
+    const {onChangeFormat} = this.props
+    const target = e.target as HTMLElement
+    const value = target.dataset.tagValue
+
+    onChangeFormat(SeverityFormatOptions[value])
+  }
+}
+
+export default SeverityColumnFormat

ui/src/logs/components/SeverityOptions.tsx

@@ -7,9 +7,9 @@ import {SeverityLevel, SeverityColor, SeverityFormat} from 'src/types/logs'
 interface Props {
   severityLevels: SeverityLevel[]
   onReset: () => void
-  onChangeSeverityLevel: (severity: string) => (override: SeverityColor) => void
+  onChangeSeverityLevel: (severity: string, override: SeverityColor) => void
   severityFormat: SeverityFormat
-  onChangeSeverityFormat: (format: SeverityFormat) => () => void
+  onChangeSeverityFormat: (format: SeverityFormat) => void
 }
 
 const SeverityConfig: SFC<Props> = ({
@@ -30,8 +30,9 @@ const SeverityConfig: SFC<Props> = ({
           <div className="logs-options--color-column">
             <ColorDropdown
               selected={config.override || config.default}
-              onChoose={onChangeSeverityLevel(config.severity)}
+              onChoose={onChangeSeverityLevel}
               stretchToFit={true}
+              severityLevel={config.severity}
             />
           </div>
         </div>