diff --git a/ui/src/admin/components/FilterBar.js b/ui/src/admin/components/FilterBar.js
index 44239d5db..8e74f7388 100644
--- a/ui/src/admin/components/FilterBar.js
+++ b/ui/src/admin/components/FilterBar.js
@@ -24,7 +24,7 @@ class FilterBar extends Component {
 
   render() {
     const {type, isEditing, onClickCreate} = this.props
-    const placeholderText = type.replace(/\w\S*/g, function(txt) {
+    const placeholderText = type.replace(/\w\S*/g, function (txt) {
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
     })
     return (
diff --git a/ui/src/dashboards/containers/DashboardsPage.tsx b/ui/src/dashboards/containers/DashboardsPage.tsx
index af0181b38..e4a6651cc 100644
--- a/ui/src/dashboards/containers/DashboardsPage.tsx
+++ b/ui/src/dashboards/containers/DashboardsPage.tsx
@@ -121,9 +121,9 @@ export class DashboardsPage extends PureComponent<Props, State> {
     push(`/sources/${id}/dashboards/${data.id}`)
   }
 
-  private handleCloneDashboard = (dashboard: Dashboard) => async (): Promise<
-    void
-  > => {
+  private handleCloneDashboard = (
+    dashboard: Dashboard
+  ) => async (): Promise<void> => {
     const {
       source: {id},
       router: {push},
@@ -139,9 +139,9 @@ export class DashboardsPage extends PureComponent<Props, State> {
     this.props.handleDeleteDashboard(dashboard)
   }
 
-  private handleExportDashboard = (dashboard: Dashboard) => async (): Promise<
-    void
-  > => {
+  private handleExportDashboard = (
+    dashboard: Dashboard
+  ) => async (): Promise<void> => {
     const dashboardForDownload = await this.modifyDashboardForDownload(
       dashboard
     )
diff --git a/ui/src/external/codemirror.js b/ui/src/external/codemirror.js
index de30572ca..8169a6ed5 100644
--- a/ui/src/external/codemirror.js
+++ b/ui/src/external/codemirror.js
@@ -10,13 +10,13 @@ import 'codemirror/addon/hint/show-hint'
 /* eslint-disable */
 const CodeMirror = require('codemirror')
 
-CodeMirror.defineSimpleMode = function(name, states) {
-  CodeMirror.defineMode(name, function(config) {
+CodeMirror.defineSimpleMode = function (name, states) {
+  CodeMirror.defineMode(name, function (config) {
     return CodeMirror.simpleMode(config, states)
   })
 }
 
-CodeMirror.simpleMode = function(config, states) {
+CodeMirror.simpleMode = function (config, states) {
   ensureState(states, 'start')
   const states_ = {},
     meta = states.meta || {}
@@ -92,7 +92,7 @@ CodeMirror.simpleMode = function(config, states) {
   return mode
 }
 
-CodeMirror.defineOption('placeholder', '', function(cm, val, old) {
+CodeMirror.defineOption('placeholder', '', function (cm, val, old) {
   var prev = old && old != CodeMirror.Init
   if (val && !prev) {
     cm.on('blur', onBlur)
@@ -198,7 +198,7 @@ function Rule(data, states) {
 }
 
 function tokenFunction(states, config) {
-  return function(stream, state) {
+  return function (stream, state) {
     if (state.pending) {
       const pend = state.pending.shift()
       if (state.pending.length === 0) {
@@ -343,7 +343,7 @@ function indexOf(val, arr) {
 }
 
 function indentFunction(states, meta) {
-  return function(state, textAfter, line) {
+  return function (state, textAfter, line) {
     if (state.local && state.local.mode.indent) {
       return state.local.mode.indent(state.localState, textAfter, line)
     }
diff --git a/ui/src/external/download.js b/ui/src/external/download.js
index 2691d4991..65fc9ab03 100644
--- a/ui/src/external/download.js
+++ b/ui/src/external/download.js
@@ -37,20 +37,17 @@ const download = (data, strFileName, strMimeType) => {
 
   if (url && url.length < 2048) {
     // if no filename and no mime, assume a url was passed as the only argument
-    fileName = url
-      .split('/')
-      .pop()
-      .split('?')[0]
+    fileName = url.split('/').pop().split('?')[0]
     anchor.href = url // assign href prop to temp anchor
     if (anchor.href.indexOf(url) !== -1) {
       // if the browser determines that it's a potentially valid url path:
       const ajax = new XMLHttpRequest()
       ajax.open('GET', url, true)
       ajax.responseType = 'blob'
-      ajax.onload = function(e) {
+      ajax.onload = function (e) {
         download(e.target.response, fileName, defaultMime)
       }
-      setTimeout(function() {
+      setTimeout(function () {
         ajax.send()
       }, 0) // allows setting custom ajax headers using the return:
       return ajax
@@ -66,11 +63,11 @@ const download = (data, strFileName, strMimeType) => {
       anchor.innerHTML = 'downloading...'
       anchor.style.display = 'none'
       document.body.appendChild(anchor)
-      setTimeout(function() {
+      setTimeout(function () {
         anchor.click()
         document.body.removeChild(anchor)
         if (winMode === true) {
-          setTimeout(function() {
+          setTimeout(function () {
             _window.URL.revokeObjectURL(anchor.href)
           }, 250)
         }
@@ -87,7 +84,7 @@ const download = (data, strFileName, strMimeType) => {
       url = `data:${url.replace(/^data:([\w/\-+]+)/, defaultMime)}`
     }
     f.src = url
-    setTimeout(function() {
+    setTimeout(function () {
       document.body.removeChild(f)
     }, 333)
   } // end saver
@@ -129,7 +126,7 @@ const download = (data, strFileName, strMimeType) => {
 
     // Blob but not URL support:
     reader = new FileReader()
-    reader.onload = function() {
+    reader.onload = function () {
       saver(this.result)
     }
     reader.readAsDataURL(blob)
diff --git a/ui/src/external/dygraph.js b/ui/src/external/dygraph.js
index 597e42077..965edf7b4 100644
--- a/ui/src/external/dygraph.js
+++ b/ui/src/external/dygraph.js
@@ -34,7 +34,7 @@ import Dygraph from 'dygraphs/src-es5/dygraph'
  * The `range` option has no effect unless `zoom` is true (the default).
  */
 
-var synchronize = function(/* dygraphs..., opts */) {
+var synchronize = function (/* dygraphs..., opts */) {
   if (arguments.length === 0) {
     throw 'Invalid invocation of Dygraph.synchronize(). Need >= 1 argument.'
   }
@@ -48,7 +48,7 @@ var synchronize = function(/* dygraphs..., opts */) {
   var dygraphs = []
   var prevCallbacks = []
 
-  var parseOpts = function(obj) {
+  var parseOpts = function (obj) {
     if (!(obj instanceof Object)) {
       throw 'Last argument must be either Dygraph or Object.'
     } else {
@@ -69,8 +69,10 @@ var synchronize = function(/* dygraphs..., opts */) {
       }
     }
     if (i < arguments.length - 1) {
-      throw 'Invalid invocation of Dygraph.synchronize(). ' +
+      throw (
+        'Invalid invocation of Dygraph.synchronize(). ' +
         'All but the last argument must be Dygraph objects.'
+      )
     } else if (i == arguments.length - 1) {
       parseOpts(arguments[arguments.length - 1])
     }
@@ -82,23 +84,29 @@ var synchronize = function(/* dygraphs..., opts */) {
     if (arguments.length == 2) {
       parseOpts(arguments[1])
     } else if (arguments.length > 2) {
-      throw 'Invalid invocation of Dygraph.synchronize(). ' +
+      throw (
+        'Invalid invocation of Dygraph.synchronize(). ' +
         'Expected two arguments: array and optional options argument.'
+      )
     } // otherwise arguments.length == 1, which is fine.
   } else {
-    throw 'Invalid invocation of Dygraph.synchronize(). ' +
+    throw (
+      'Invalid invocation of Dygraph.synchronize(). ' +
       'First parameter must be either Dygraph or list of Dygraphs.'
+    )
   }
 
   if (dygraphs.length < 2) {
-    throw 'Invalid invocation of Dygraph.synchronize(). ' +
+    throw (
+      'Invalid invocation of Dygraph.synchronize(). ' +
       'Need two or more dygraphs to synchronize.'
+    )
   }
 
   var readycount = dygraphs.length
   for (var i = 0; i < dygraphs.length; i++) {
     var g = dygraphs[i]
-    g.ready(function() {
+    g.ready(function () {
       if (--readycount == 0) {
         // store original callbacks
         var callBackTypes = [
@@ -130,7 +138,7 @@ var synchronize = function(/* dygraphs..., opts */) {
   }
 
   return {
-    detach: function() {
+    detach: function () {
       for (var i = 0; i < dygraphs.length; i++) {
         var g = dygraphs[i]
         if (opts.zoom) {
@@ -167,7 +175,7 @@ function attachZoomHandlers(gs, syncOpts, prevCallbacks) {
     var g = gs[i]
     g.updateOptions(
       {
-        drawCallback: function(me, initial) {
+        drawCallback: function (me, initial) {
           if (block || initial) return
           block = true
           // In the original code, the following assignment was originally
@@ -209,7 +217,7 @@ function attachSelectionHandlers(gs, prevCallbacks) {
 
     g.updateOptions(
       {
-        highlightCallback: function(event, x, points, row, seriesName) {
+        highlightCallback: function (event, x, points, row, seriesName) {
           if (block) return
           block = true
           var me = this
@@ -227,7 +235,7 @@ function attachSelectionHandlers(gs, prevCallbacks) {
           }
           block = false
         },
-        unhighlightCallback: function(event) {
+        unhighlightCallback: function (event) {
           if (block) return
           block = true
           var me = this
@@ -257,7 +265,7 @@ function isValidPoint(p, opt_allowNaNY) {
   return true
 }
 
-Dygraph.prototype.findClosestPoint = function(domX, domY) {
+Dygraph.prototype.findClosestPoint = function (domX, domY) {
   if (Dygraph.VERSION !== '2.0.0') {
     console.error(
       `Dygraph version changed to ${Dygraph.VERSION} - re-copy findClosestPoint`
@@ -303,7 +311,7 @@ Dygraph.prototype.findClosestPoint = function(domX, domY) {
 
 Dygraph.synchronize = synchronize
 
-Dygraph.Plugins.Crosshair = (function() {
+Dygraph.Plugins.Crosshair = (function () {
   'use strict'
   /**
    * Creates the crosshair
@@ -311,13 +319,13 @@ Dygraph.Plugins.Crosshair = (function() {
    * @constructor
    */
 
-  var crosshair = function(opt_options) {
+  var crosshair = function (opt_options) {
     this.canvas_ = document.createElement('canvas')
     opt_options = opt_options || {}
     this.direction_ = opt_options.direction || null
   }
 
-  crosshair.prototype.toString = function() {
+  crosshair.prototype.toString = function () {
     return 'Crosshair Plugin'
   }
 
@@ -325,7 +333,7 @@ Dygraph.Plugins.Crosshair = (function() {
    * @param {Dygraph} g Graph instance.
    * @return {object.<string, function(ev)>} Mapping of event names to callbacks.
    */
-  crosshair.prototype.activate = function(g) {
+  crosshair.prototype.activate = function (g) {
     g.graphDiv.appendChild(this.canvas_)
 
     return {
@@ -334,7 +342,7 @@ Dygraph.Plugins.Crosshair = (function() {
     }
   }
 
-  crosshair.prototype.select = function(e) {
+  crosshair.prototype.select = function (e) {
     if (this.direction_ === null) {
       return
     }
@@ -378,12 +386,12 @@ Dygraph.Plugins.Crosshair = (function() {
     }
   }
 
-  crosshair.prototype.deselect = function(e) {
+  crosshair.prototype.deselect = function (e) {
     var ctx = this.canvas_.getContext('2d')
     ctx.clearRect(0, 0, this.canvas_.width, this.canvas_.height)
   }
 
-  crosshair.prototype.destroy = function() {
+  crosshair.prototype.destroy = function () {
     this.canvas_ = null
   }
 
diff --git a/ui/src/kapacitor/components/config/OpsGenieConfig.tsx b/ui/src/kapacitor/components/config/OpsGenieConfig.tsx
index 9463848d7..543180669 100644
--- a/ui/src/kapacitor/components/config/OpsGenieConfig.tsx
+++ b/ui/src/kapacitor/components/config/OpsGenieConfig.tsx
@@ -120,9 +120,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
               </div>
             </div>
           </div>
-        ) : (
-          undefined
-        )}
+        ) : undefined}
 
         <div className="form-group col-xs-12">
           <div className="form-control-static">
diff --git a/ui/src/logs/components/LogsFilterBar.tsx b/ui/src/logs/components/LogsFilterBar.tsx
index aa4adb7c6..467dea3b1 100644
--- a/ui/src/logs/components/LogsFilterBar.tsx
+++ b/ui/src/logs/components/LogsFilterBar.tsx
@@ -59,9 +59,7 @@ class LogsFilters extends PureComponent<Props> {
           >
             <span className="icon bar-chart" />
           </button>
-        ) : (
-          undefined
-        )}
+        ) : undefined}
         <Radio>
           <Radio.Button
             id="logs-truncation--truncate"
diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx
index 250f44c41..a0e4c2bcd 100644
--- a/ui/src/logs/containers/LogsPage.tsx
+++ b/ui/src/logs/containers/LogsPage.tsx
@@ -281,9 +281,7 @@ class LogsPage extends Component<Props, State> {
               isHistogramHidden ? 'logs-viewer--table-only' : ''
             }`}
           >
-            {isHistogramHidden ? (
-              undefined
-            ) : (
+            {isHistogramHidden ? undefined : (
               <LogsGraphContainer>
                 {this.chartControlBar}
                 {this.chart}
diff --git a/ui/src/reusable_ui/components/form_layout/Form.tsx b/ui/src/reusable_ui/components/form_layout/Form.tsx
index 7685b1529..cffa5bca7 100644
--- a/ui/src/reusable_ui/components/form_layout/Form.tsx
+++ b/ui/src/reusable_ui/components/form_layout/Form.tsx
@@ -29,9 +29,7 @@ class Form extends Component<Props> {
   ]
 
   public static ValidChildNames: string = _.map(Form.ValidChildTypes, valid => {
-    const name = _.get(valid, 'displayName', '')
-      .split('Form')
-      .pop()
+    const name = _.get(valid, 'displayName', '').split('Form').pop()
 
     return `<Form.${name}>`
   }).join(', ')
diff --git a/ui/src/reusable_ui/components/panel/Panel.tsx b/ui/src/reusable_ui/components/panel/Panel.tsx
index 3fd8c46c3..d76b46f0f 100644
--- a/ui/src/reusable_ui/components/panel/Panel.tsx
+++ b/ui/src/reusable_ui/components/panel/Panel.tsx
@@ -39,9 +39,7 @@ class Panel extends Component<Props> {
   public static ValidChildNames: string = _.map(
     Panel.ValidChildTypes,
     child => {
-      const name = _.get(child, 'displayName', '')
-        .split('Panel')
-        .pop()
+      const name = _.get(child, 'displayName', '').split('Panel').pop()
 
       return `<Panel.${name}>`
     }
diff --git a/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx b/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx
index c99de7cbd..1a31c8540 100644
--- a/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx
+++ b/ui/src/reusable_ui/components/wizard/ProgressConnector.tsx
@@ -17,8 +17,9 @@ class ProgressConnector extends PureComponent<Props> {
 
     return (
       <span
-        className={`wizard-progress-connector wizard-progress-connector--${status ||
-          ConnectorState.None}`}
+        className={`wizard-progress-connector wizard-progress-connector--${
+          status || ConnectorState.None
+        }`}
       />
     )
   }
diff --git a/ui/src/shared/apis/flux/metaQueries.ts b/ui/src/shared/apis/flux/metaQueries.ts
index 8677b7043..4b20bca44 100644
--- a/ui/src/shared/apis/flux/metaQueries.ts
+++ b/ui/src/shared/apis/flux/metaQueries.ts
@@ -162,6 +162,8 @@ export const proxy = async (source: Source, script: string) => {
 const handleError = error => {
   console.error('Problem fetching data', error)
 
-  throw _.get(error, 'headers.x-influx-error', false) ||
+  throw (
+    _.get(error, 'headers.x-influx-error', false) ||
     _.get(error, 'data.message', 'unknown error 🤷')
+  )
 }
diff --git a/ui/src/shared/components/AnnotationPoint.tsx b/ui/src/shared/components/AnnotationPoint.tsx
index 90388bb9b..867853183 100644
--- a/ui/src/shared/components/AnnotationPoint.tsx
+++ b/ui/src/shared/components/AnnotationPoint.tsx
@@ -140,12 +140,16 @@ class AnnotationPoint extends Component<Props, State> {
   private get markerStyle(): CSSProperties {
     const {annotation, dygraph, staticLegendHeight} = this.props
 
-    const left = `${dygraph.toDomXCoord(Number(annotation.startTime)) +
-      DYGRAPH_CONTAINER_H_MARGIN}px`
+    const left = `${
+      dygraph.toDomXCoord(Number(annotation.startTime)) +
+      DYGRAPH_CONTAINER_H_MARGIN
+    }px`
 
-    const height = `calc(100% - ${staticLegendHeight +
+    const height = `calc(100% - ${
+      staticLegendHeight +
       DYGRAPH_CONTAINER_XLABEL_MARGIN +
-      DYGRAPH_CONTAINER_V_MARGIN * 2}px)`
+      DYGRAPH_CONTAINER_V_MARGIN * 2
+    }px)`
 
     return {
       left,
diff --git a/ui/src/shared/components/AnnotationSpan.tsx b/ui/src/shared/components/AnnotationSpan.tsx
index 96bd6222b..d07d6ad2b 100644
--- a/ui/src/shared/components/AnnotationSpan.tsx
+++ b/ui/src/shared/components/AnnotationSpan.tsx
@@ -159,9 +159,11 @@ class AnnotationSpan extends Component<Props, State> {
 
     const markerStyles = {
       left: `${dygraph.toDomXCoord(startTime) + DYGRAPH_CONTAINER_H_MARGIN}px`,
-      height: `calc(100% - ${staticLegendHeight +
+      height: `calc(100% - ${
+        staticLegendHeight +
         DYGRAPH_CONTAINER_XLABEL_MARGIN +
-        DYGRAPH_CONTAINER_V_MARGIN * 2}px)`,
+        DYGRAPH_CONTAINER_V_MARGIN * 2
+      }px)`,
     }
 
     return (
@@ -212,9 +214,11 @@ class AnnotationSpan extends Component<Props, State> {
 
     const markerStyles = {
       left: `${dygraph.toDomXCoord(endTime) + DYGRAPH_CONTAINER_H_MARGIN}px`,
-      height: `calc(100% - ${staticLegendHeight +
+      height: `calc(100% - ${
+        staticLegendHeight +
         DYGRAPH_CONTAINER_XLABEL_MARGIN +
-        DYGRAPH_CONTAINER_V_MARGIN * 2}px)`,
+        DYGRAPH_CONTAINER_V_MARGIN * 2
+      }px)`,
     }
 
     return (
diff --git a/ui/src/shared/components/AnnotationWindow.tsx b/ui/src/shared/components/AnnotationWindow.tsx
index c265164be..2f88f9af7 100644
--- a/ui/src/shared/components/AnnotationWindow.tsx
+++ b/ui/src/shared/components/AnnotationWindow.tsx
@@ -31,9 +31,11 @@ const windowDimensions = (
     Math.min(windowStartXCoord, windowEndXCoord) + DYGRAPH_CONTAINER_H_MARGIN
 
   const height = staticLegendHeight
-    ? `calc(100% - ${staticLegendHeight +
+    ? `calc(100% - ${
+        staticLegendHeight +
         DYGRAPH_CONTAINER_XLABEL_MARGIN +
-        DYGRAPH_CONTAINER_V_MARGIN * 2}px)`
+        DYGRAPH_CONTAINER_V_MARGIN * 2
+      }px)`
     : 'calc(100% - 36px)'
 
   return {
diff --git a/ui/src/shared/components/Crosshair.tsx b/ui/src/shared/components/Crosshair.tsx
index 2728aa4d6..4cc69365c 100644
--- a/ui/src/shared/components/Crosshair.tsx
+++ b/ui/src/shared/components/Crosshair.tsx
@@ -60,8 +60,9 @@ class Crosshair extends PureComponent<Props> {
   }
 
   private get crosshairHeight(): string {
-    return `calc(100% - ${this.props.staticLegendHeight +
-      DYGRAPH_CONTAINER_XLABEL_MARGIN}px)`
+    return `calc(100% - ${
+      this.props.staticLegendHeight + DYGRAPH_CONTAINER_XLABEL_MARGIN
+    }px)`
   }
 }
 
diff --git a/ui/src/shared/components/CustomSingularTime.tsx b/ui/src/shared/components/CustomSingularTime.tsx
index b2c119ec1..ce99a4cc8 100644
--- a/ui/src/shared/components/CustomSingularTime.tsx
+++ b/ui/src/shared/components/CustomSingularTime.tsx
@@ -17,12 +17,8 @@ interface State {
 @ErrorHandling
 class CustomSingularTime extends Component<Props, State> {
   private calendar?: any
-  private containerRef: React.RefObject<HTMLDivElement> = React.createRef<
-    HTMLDivElement
-  >()
-  private inputRef: React.RefObject<HTMLInputElement> = React.createRef<
-    HTMLInputElement
-  >()
+  private containerRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
+  private inputRef: React.RefObject<HTMLInputElement> = React.createRef<HTMLInputElement>()
 
   constructor(props: Props) {
     super(props)
diff --git a/ui/src/shared/components/LayoutCell.tsx b/ui/src/shared/components/LayoutCell.tsx
index f02909b66..678dcd0f0 100644
--- a/ui/src/shared/components/LayoutCell.tsx
+++ b/ui/src/shared/components/LayoutCell.tsx
@@ -171,9 +171,7 @@ export default class LayoutCell extends Component<Props> {
 
   private async downloadInfluxQLCSV() {
     const {cellData, cell} = this.props
-    const name = `${_.get(cell, 'name', '')
-      .split(' ')
-      .join('_')}.csv`
+    const name = `${_.get(cell, 'name', '').split(' ').join('_')}.csv`
 
     let csv: string
 
@@ -192,9 +190,7 @@ export default class LayoutCell extends Component<Props> {
 
   private downloadFluxCSV() {
     const {cellFluxData, cell} = this.props
-    const joinedName = _.get(cell, 'name', '')
-      .split(' ')
-      .join('_')
+    const joinedName = _.get(cell, 'name', '').split(' ').join('_')
 
     downloadCSV(cellFluxData, joinedName)
   }
diff --git a/ui/src/shared/components/NewAnnotation.tsx b/ui/src/shared/components/NewAnnotation.tsx
index f74304944..57a4666a2 100644
--- a/ui/src/shared/components/NewAnnotation.tsx
+++ b/ui/src/shared/components/NewAnnotation.tsx
@@ -69,8 +69,9 @@ class NewAnnotation extends Component<Props & WithRouterProps, State> {
     const {isMouseOver} = this.state
     const crosshairOne = Math.max(-1000, dygraph.toDomXCoord(resolvedStartTime))
     const crosshairTwo = dygraph.toDomXCoord(resolvedEndTime)
-    const crosshairHeight = `calc(100% - ${staticLegendHeight +
-      DYGRAPH_CONTAINER_XLABEL_MARGIN}px)`
+    const crosshairHeight = `calc(100% - ${
+      staticLegendHeight + DYGRAPH_CONTAINER_XLABEL_MARGIN
+    }px)`
 
     const isDragging = resolvedStartTime !== resolvedEndTime
     const flagOneClass =
diff --git a/ui/src/shared/components/SingleStat.tsx b/ui/src/shared/components/SingleStat.tsx
index 59e458b19..3d7d712fe 100644
--- a/ui/src/shared/components/SingleStat.tsx
+++ b/ui/src/shared/components/SingleStat.tsx
@@ -171,8 +171,9 @@ class SingleStat extends PureComponent<Props, State> {
   private get containerStyle(): CSSProperties {
     const {staticLegendHeight} = this.props
 
-    const height = `calc(100% - ${staticLegendHeight +
-      DYGRAPH_CONTAINER_V_MARGIN * 2}px)`
+    const height = `calc(100% - ${
+      staticLegendHeight + DYGRAPH_CONTAINER_V_MARGIN * 2
+    }px)`
 
     const {backgroundColor} = this.coloration
 
diff --git a/ui/src/shared/components/TableGraph.tsx b/ui/src/shared/components/TableGraph.tsx
index 82c586d23..a9204e9b4 100644
--- a/ui/src/shared/components/TableGraph.tsx
+++ b/ui/src/shared/components/TableGraph.tsx
@@ -462,9 +462,7 @@ class TableGraph extends PureComponent<Props, State> {
 
     if (isTimeData) {
       if (timeZone === TimeZones.UTC) {
-        return moment(cellData)
-          .utc()
-          .format(timeFormat)
+        return moment(cellData).utc().format(timeFormat)
       }
 
       return moment(cellData).format(timeFormat)
diff --git a/ui/src/shared/constants/graphColorPalettes.ts b/ui/src/shared/constants/graphColorPalettes.ts
index dba3c7873..6262dc53c 100644
--- a/ui/src/shared/constants/graphColorPalettes.ts
+++ b/ui/src/shared/constants/graphColorPalettes.ts
@@ -237,8 +237,5 @@ export const getLineColorsHexes = (
   if (numSeries === 2) {
     return [colorsHexArray[0], colorsHexArray[1]]
   }
-  return chroma
-    .scale(colorsHexArray)
-    .mode('lch')
-    .colors(numSeries)
+  return chroma.scale(colorsHexArray).mode('lch').colors(numSeries)
 }
diff --git a/ui/src/shared/parsing/lastValues.ts b/ui/src/shared/parsing/lastValues.ts
index a18a817ed..77b99b879 100644
--- a/ui/src/shared/parsing/lastValues.ts
+++ b/ui/src/shared/parsing/lastValues.ts
@@ -7,7 +7,7 @@ interface LastValues {
   series: string[]
 }
 
-export default function(
+export default function (
   timeSeriesResponse: TimeSeriesServerResponse[] | Data | null
 ): LastValues {
   const values = _.get(
diff --git a/ui/src/tempVars/parsing/index.ts b/ui/src/tempVars/parsing/index.ts
index b31442aba..a31bd6496 100644
--- a/ui/src/tempVars/parsing/index.ts
+++ b/ui/src/tempVars/parsing/index.ts
@@ -27,10 +27,7 @@ export const isInvalidMetaQuery = (metaQuery: string): boolean =>
   !getMetaQueryPrefix(metaQuery)
 
 const getMetaQueryPrefix = (metaQuery: string): string | null => {
-  const words = metaQuery
-    .trim()
-    .toUpperCase()
-    .split(' ')
+  const words = metaQuery.trim().toUpperCase().split(' ')
   const firstTwoWords = words.slice(0, 2).join(' ')
   const firstThreeWords = words.slice(0, 3).join(' ')
 
diff --git a/ui/src/utils/formatting.ts b/ui/src/utils/formatting.ts
index afb2e5391..af688c314 100644
--- a/ui/src/utils/formatting.ts
+++ b/ui/src/utils/formatting.ts
@@ -100,9 +100,7 @@ export const numberValueFormatter = (
       }
     }
     if (kmg2) {
-      const xParts = String(x.toExponential())
-        .split('e-')
-        .map(Number)
+      const xParts = String(x.toExponential()).split('e-').map(Number)
       if (xParts.length === 2 && xParts[1] >= 3 && xParts[1] <= 24) {
         if (xParts[1] % 3 > 0) {
           label = roundNum(xParts[0] / pow(10, xParts[1] % 3), digits)
diff --git a/ui/test/dashboards/templating.test.js b/ui/test/dashboards/templating.test.js
index 1b00fa5a9..1c316a986 100644
--- a/ui/test/dashboards/templating.test.js
+++ b/ui/test/dashboards/templating.test.js
@@ -1,6 +1,6 @@
 import {applyMasks, insertTempVar, unMask} from 'src/tempVars/constants'
 
-const masquerade = (query) => {
+const masquerade = query => {
   const masked = applyMasks(query)
   const inserted = insertTempVar(masked, ':REPLACED:')
   const unmasked = unMask(inserted)
diff --git a/ui/test/dashboards/utils/time.test.ts b/ui/test/dashboards/utils/time.test.ts
index e507e33bd..1497e9d36 100644
--- a/ui/test/dashboards/utils/time.test.ts
+++ b/ui/test/dashboards/utils/time.test.ts
@@ -4,10 +4,7 @@ import * as time from 'src/dashboards/utils/time'
 describe('dashboards.utils.time', () => {
   describe('millisecondTimeRange', () => {
     it('when upper is now() returns valid dates', () => {
-      const expectedNow = moment()
-        .subtract()
-        .seconds(1)
-        .unix()
+      const expectedNow = moment().subtract().seconds(1).unix()
       const timeRange = {upper: 'now()', lower: moment().format()}
       const result = time.millisecondTimeRange(timeRange)
 
@@ -17,10 +14,7 @@ describe('dashboards.utils.time', () => {
 
     it('when seconds is present returns valid dates', () => {
       const timeRange = {seconds: 10}
-      const expectedSince = moment()
-        .subtract()
-        .seconds(10)
-        .unix()
+      const expectedSince = moment().subtract().seconds(10).unix()
       const result = time.millisecondTimeRange(timeRange)
 
       expect(result.since).toBeGreaterThanOrEqual(expectedSince)
diff --git a/ui/test/shared/components/AnnotationEditorForm.test.tsx b/ui/test/shared/components/AnnotationEditorForm.test.tsx
index 43dd30a38..06cc36761 100644
--- a/ui/test/shared/components/AnnotationEditorForm.test.tsx
+++ b/ui/test/shared/components/AnnotationEditorForm.test.tsx
@@ -118,11 +118,7 @@ describe('AnnotationEditorForm', () => {
       expect(tagsError.text()).toEqual('Tag keys must be unique')
       expect(getDraftAnnotation()).toEqual(null)
 
-      wrapper
-        .find(AnnotationTagEditorLi)
-        .at(2)
-        .find('button')
-        .simulate('click')
+      wrapper.find(AnnotationTagEditorLi).at(2).find('button').simulate('click')
 
       tagsError = wrapper.find('[data-test="tags-group"] .error')
 
diff --git a/ui/test/shared/components/AnnotationFilterControl.test.tsx b/ui/test/shared/components/AnnotationFilterControl.test.tsx
index 352eaa7c6..8f04f303e 100644
--- a/ui/test/shared/components/AnnotationFilterControl.test.tsx
+++ b/ui/test/shared/components/AnnotationFilterControl.test.tsx
@@ -24,10 +24,7 @@ describe('AnnotationFilterControl', () => {
     const wrapper = mount(<AnnotationFilterControl {...props} />)
 
     // Focusing the input triggers fetching suggestions
-    wrapper
-      .find('.suggestion-input--input')
-      .at(0)
-      .simulate('focus')
+    wrapper.find('.suggestion-input--input').at(0).simulate('focus')
 
     // Give component a chance to read resolved suggestion promise
     await new Promise(res => setTimeout(res, 50))
@@ -65,17 +62,10 @@ describe('AnnotationFilterControl', () => {
     const wrapper = mount(<AnnotationFilterControl {...props} />)
 
     expect(
-      wrapper
-        .find('button')
-        .at(1)
-        .find('.button-icon')
-        .hasClass('trash')
+      wrapper.find('button').at(1).find('.button-icon').hasClass('trash')
     ).toBe(true)
 
-    wrapper
-      .find('.suggestion-input--input')
-      .at(1)
-      .simulate('focus')
+    wrapper.find('.suggestion-input--input').at(1).simulate('focus')
 
     const saveButton = wrapper.find('button').at(1)
 
diff --git a/ui/test/shared/components/Dropdown.test.js b/ui/test/shared/components/Dropdown.test.js
index b3fba7e80..6ecb6c4d7 100644
--- a/ui/test/shared/components/Dropdown.test.js
+++ b/ui/test/shared/components/Dropdown.test.js
@@ -187,7 +187,7 @@ describe('Components.Shared.Dropdown', () => {
 
     describe('handleSelection', () => {
       it('it calls onChoose with the item provided', () => {
-        const onChoose = jest.fn((item) => item)
+        const onChoose = jest.fn(item => item)
         const {dropdown} = setup({onChoose})
 
         dropdown.simulate('click')
@@ -237,7 +237,7 @@ describe('Components.Shared.Dropdown', () => {
         })
 
         it('fires onChoose with the items at the highlighted index', () => {
-          const onChoose = jest.fn((item) => item)
+          const onChoose = jest.fn(item => item)
           const highlightedItemIndex = 1
           const {dropdown} = setup({items, onChoose})
           dropdown.setState({highlightedItemIndex})
diff --git a/ui/test/shared/reducers/helpers/field.test.js b/ui/test/shared/reducers/helpers/field.test.js
index 7a2bf3c6b..d83258f57 100644
--- a/ui/test/shared/reducers/helpers/field.test.js
+++ b/ui/test/shared/reducers/helpers/field.test.js
@@ -19,7 +19,7 @@ describe('Reducers.Helpers.Fields', () => {
       {value: 'fn1', type: 'func', args: [{value: 'f2', type: 'field'}]},
       {value: 'fn2', type: 'func', args: [{value: 'f2', type: 'field'}]},
     ]
-    const actual = fieldWalk(fields, (f) => _.get(f, 'value'))
+    const actual = fieldWalk(fields, f => _.get(f, 'value'))
     expect(actual).toEqual(['fn1', 'f1', 'f2', 'fn1', 'f2', 'fn2', 'f2'])
   })