Add UI for toggling severity format

ui/src/logs/components/OptionsOverlay.tsx

@@ -5,13 +5,15 @@ import Container from 'src/shared/components/overlay/OverlayContainer'
 import Heading from 'src/shared/components/overlay/OverlayHeading'
 import Body from 'src/shared/components/overlay/OverlayBody'
 import SeverityOptions from 'src/logs/components/SeverityOptions'
-import {SeverityLevel, SeverityColor} from 'src/types/logs'
+import {SeverityLevel, SeverityColor, SeverityFormat} from 'src/types/logs'
 import {DEFAULT_SEVERITY_LEVELS} from 'src/logs/constants'
 
 interface Props {
   severityLevels: SeverityLevel[]
   onUpdateSeverityLevels: (severityLevels: SeverityLevel[]) => void
   onDismissOverlay: () => void
+  severityFormat: SeverityFormat
+  onUpdateSeverityFormat: (format: SeverityFormat) => () => void
 }
 
 interface State {
@@ -24,11 +26,13 @@ class OptionsOverlay extends Component<Props, State> {
 
     this.state = {
       workingSeverityLevels: this.props.severityLevels,
+      workingColumns: this.props.columns,
     }
   }
 
   public render() {
     const {workingSeverityLevels} = this.state
+    const {severityFormat, onUpdateSeverityFormat} = this.props
 
     return (
       <Container maxWidth={700}>
@@ -39,9 +43,11 @@ class OptionsOverlay extends Component<Props, State> {
           <div className="row">
             <div className="col-sm-6">
               <SeverityOptions
-                configs={workingSeverityLevels}
+                severityLevels={workingSeverityLevels}
                 onReset={this.handleResetSeverityLevels}
                 onChangeSeverityLevel={this.handleChangeSeverityLevel}
+                severityFormat={severityFormat}
+                onUpdateSeverityFormat={onUpdateSeverityFormat}
               />
             </div>
             <div className="col-sm-6">

ui/src/logs/components/SeverityColumnFormat.tsx

@@ -0,0 +1,40 @@
+import React, {SFC} from 'react'
+import {SeverityFormat} from 'src/types/logs'
+
+interface Props {
+  format: SeverityFormat
+  onChangeFormat: (format: SeverityFormat) => () => void
+}
+
+const className = (name: SeverityFormat, format: SeverityFormat): string => {
+  if (name === format) {
+    return 'active'
+  }
+
+  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('dot')} className={className('dot', format)}>
+        Dot
+      </li>
+      <li
+        onClick={onChangeFormat('dotText')}
+        className={className('dotText', format)}
+      >
+        Dot + Text
+      </li>
+      <li
+        onClick={onChangeFormat('text')}
+        className={className('text', format)}
+      >
+        Text
+      </li>
+    </ul>
+  </div>
+)
+
+export default SeverityFormat

ui/src/logs/components/SeverityOptions.tsx

@@ -1,23 +1,28 @@
 import React, {SFC} from 'react'
 import uuid from 'uuid'
 import ColorDropdown from 'src/logs/components/ColorDropdown'
-import {SeverityLevel, SeverityColor} from 'src/types/logs'
+import SeverityColumnFormat from 'src/logs/components/SeverityColumnFormat'
+import {SeverityLevel, SeverityColor, SeverityFormat} from 'src/types/logs'
 
 interface Props {
-  configs: SeverityLevel[]
+  severityLevels: SeverityLevel[]
   onReset: () => void
   onChangeSeverityLevel: (severity: string) => (override: SeverityColor) => void
+  severityFormat: SeverityFormat
+  onUpdateSeverityFormat: (format: SeverityFormat) => () => void
 }
 
 const SeverityConfig: SFC<Props> = ({
-  configs,
+  severityLevels,
   onReset,
   onChangeSeverityLevel,
+  severityFormat,
+  onUpdateSeverityFormat,
 }) => (
   <>
     <label className="form-label">Customize Severity Colors</label>
     <div className="logs-options--color-list">
-      {configs.map(config => (
+      {severityLevels.map(config => (
         <div key={uuid.v4()} className="logs-options--color-row">
           <div className="logs-options--color-column">
             <div className="logs-options--label">{config.severity}</div>
@@ -36,6 +41,10 @@ const SeverityConfig: SFC<Props> = ({
       <span className="icon refresh" />
       Reset to Defaults
     </button>
+    <SeverityColumnFormat
+      format={severityFormat}
+      onChangeFormat={onUpdateSeverityFormat}
+    />
   </>
 )
 

ui/src/logs/containers/LogsPage.tsx

@@ -34,8 +34,12 @@ import {colorForSeverity} from 'src/logs/utils/colors'
 import {OverlayContext} from 'src/shared/components/OverlayTechnology'
 
 import {Source, Namespace, TimeRange} from 'src/types'
+<<<<<<< HEAD
 import {Filter, SeverityLevel} from 'src/types/logs'
 import {HistogramData, TimePeriod} from 'src/types/histogram'
+=======
+import {Filter, SeverityLevel, SeverityFormat} from 'src/types/logs'
+>>>>>>> Add UI for toggling severity format
 
 // Mock
 import {DEFAULT_SEVERITY_LEVELS} from 'src/logs/constants'
@@ -296,7 +300,10 @@ class LogsPage extends PureComponent<Props, State> {
   }
 
   private handleShowOptionsOverlay = (): void => {
-    const {showOverlay} = this.props
+    const {
+      showOverlay,
+      tableData: {columns},
+    } = this.props
     const options = {
       dismissOnClickOutside: false,
       dismissOnEscape: false,
@@ -309,6 +316,9 @@ class LogsPage extends PureComponent<Props, State> {
             severityLevels={DEFAULT_SEVERITY_LEVELS} // Todo: replace with real
             onUpdateSeverityLevels={this.handleUpdateSeverityLevels}
             onDismissOverlay={onDismissOverlay}
+            columns={columns}
+            onUpdateSeverityFormat={this.handleUpdateSeverityFormat}
+            severityFormat="dotText" // Todo: repleace with real value
           />
         )}
       </OverlayContext.Consumer>,
@@ -320,6 +330,11 @@ class LogsPage extends PureComponent<Props, State> {
     console.log(levels)
     // Save these new configs here
   }
+
+  private handleUpdateSeverityFormat = (format: SeverityFormat) => () => {
+    console.log(format)
+    // Save these new configs here
+  }
 }
 
 const mapStateToProps = ({

ui/src/types/logs.ts

@@ -36,3 +36,5 @@ export interface SeverityColor {
   hex: string
   name: string
 }
+
+export type SeverityFormat = 'dot' | 'dotText' | 'text'