Convert files to Typescript and fix errors

Co-authored-by: Brandon Farmer <bthesorceror@gmail.com>

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -3,6 +3,11 @@ import React, {Component} from 'react'
 import _ from 'lodash'
 import uuid from 'uuid'
 
+import {
+  CellEditorOverlayActions,
+  CellEditorOverlayActionsFunc,
+} from 'src/types/dashboard'
+
 import ResizeContainer from 'src/shared/components/ResizeContainer'
 import QueryMaker from 'src/dashboards/components/QueryMaker'
 import Visualization from 'src/dashboards/components/Visualization'
@@ -243,7 +248,10 @@ class CellEditorOverlay extends Component<Props, State> {
     this.overlayRef = r
   }
 
-  private queryStateReducer = queryModifier => (queryID, ...payload) => {
+  private queryStateReducer = (queryModifier): CellEditorOverlayActionsFunc => (
+    queryID: string,
+    ...payload: any[]
+  ) => {
     const {queriesWorkingDraft} = this.state
     const query = queriesWorkingDraft.find(q => q.id === queryID)
 
@@ -455,11 +463,26 @@ class CellEditorOverlay extends Component<Props, State> {
     )
   }
 
-  private get queryActions() {
-    return {
-      editRawTextAsync: this.handleEditRawText,
-      ..._.mapValues(queryModifiers, this.queryStateReducer),
+  private get queryActions(): CellEditorOverlayActions {
+    const original = {
+      editRawTextAsync: () => Promise.resolve(),
+      ...queryModifiers,
     }
+    const mapped = _.reduce<CellEditorOverlayActions, CellEditorOverlayActions>(
+      original,
+      (acc, v, k) => {
+        acc[k] = this.queryStateReducer(v)
+        return acc
+      },
+      original
+    )
+
+    const result = {
+      ...mapped,
+      editRawTextAsync: this.handleEditRawText,
+    }
+
+    return result
   }
 
   private get sourceLink(): string {

ui/src/dashboards/components/QueryMaker.tsx

@@ -29,8 +29,8 @@ interface Props {
   queries: QueryConfig[]
   timeRange: TimeRange
   actions: CellEditorOverlayActions
-  setActiveQueryIndex: () => void
-  onDeleteQuery: () => void
+  setActiveQueryIndex: (index: number) => void
+  onDeleteQuery: (index: number) => void
   activeQueryIndex: number
   activeQuery: QueryConfig
   onAddQuery: () => void
@@ -76,7 +76,6 @@ const QueryMaker: SFC<Props> = ({
           source={source}
           actions={actions}
           query={activeQuery}
-          onAddQuery={onAddQuery}
           initialGroupByTime={initialGroupByTime}
           isQuerySupportedByExplorer={_.get(
             activeQuery,

ui/src/data_explorer/components/GroupByTimeDropdown.tsx

@@ -7,6 +7,7 @@ import groupByTimeOptions from 'src/data_explorer/data/groupByTimes'
 import Dropdown from 'src/shared/components/Dropdown'
 
 import {AUTO_GROUP_BY} from 'src/shared/constants'
+import {GroupBy} from 'src/types'
 
 interface GroupByTimeOption {
   defaultTimeBound: string
@@ -17,7 +18,7 @@ interface GroupByTimeOption {
 interface Props {
   location?: Location
   selected: string
-  onChooseGroupByTime: () => void
+  onChooseGroupByTime: (groupBy: GroupBy) => void
   isDisabled: boolean
 }
 

ui/src/shared/components/FieldList.tsx

@@ -1,7 +1,8 @@
 import React, {PureComponent} from 'react'
-import PropTypes from 'prop-types'
 import _ from 'lodash'
 
+import {QueryConfig, GroupBy, Source, TimeShift} from 'src/types'
+
 import QueryOptions from 'src/shared/components/QueryOptions'
 import FieldListItem from 'src/data_explorer/components/FieldListItem'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
@@ -16,8 +17,67 @@ import {
 } from 'src/shared/reducers/helpers/fields'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+interface GroupByOption extends GroupBy {
+  menuOption: string
+}
+
+interface TimeShiftOption extends TimeShift {
+  text: string
+}
+interface Links {
+  proxy: string
+}
+
+interface Field {
+  type: string
+  value: string
+}
+
+interface FieldFunc extends Field {
+  args: FuncArg[]
+}
+interface FuncArg {
+  value: string
+  type: string
+}
+
+interface ApplyFuncsToFieldArgs {
+  field: Field
+  funcs: FuncArg[]
+}
+
+interface Props {
+  query: QueryConfig
+  onTimeShift: (shift: TimeShiftOption) => void
+  onToggleField: (field: Field) => void
+  onGroupByTime: (groupByOption: string) => void
+  onFill: (fill: string) => void
+  applyFuncsToField: (field: ApplyFuncsToFieldArgs, groupBy: GroupBy) => void
+  isKapacitorRule: boolean
+  querySource: {
+    links: Links
+  }
+  removeFuncs: (fields: Field[]) => void
+  addInitialField: (field: Field, groupBy: GroupBy) => void
+  initialGroupByTime: string | null
+  isQuerySupportedByExplorer: boolean
+}
+
+interface State {
+  fields: Field[]
+}
+
+interface Context {
+  source: Source
+}
 @ErrorHandling
-class FieldList extends PureComponent {
+class FieldList extends PureComponent<Props, State> {
+  public static context: Context
+  public static defaultProps: Partial<Props> = {
+    isKapacitorRule: false,
+    initialGroupByTime: null,
+  }
+
   constructor(props) {
     super(props)
     this.state = {
@@ -31,7 +91,7 @@ class FieldList extends PureComponent {
       return
     }
 
-    this._getFields()
+    this.getFields()
   }
 
   public componentDidUpdate(prevProps) {
@@ -55,91 +115,7 @@ class FieldList extends PureComponent {
       return
     }
 
-    this._getFields()
-  }
-
-  public handleGroupByTime = groupBy => {
-    this.props.onGroupByTime(groupBy.menuOption)
-  }
-
-  public handleFill = fill => {
-    this.props.onFill(fill)
-  }
-
-  public handleToggleField = field => {
-    const {
-      query,
-      onToggleField,
-      addInitialField,
-      initialGroupByTime: time,
-      isKapacitorRule,
-      isQuerySupportedByExplorer,
-    } = this.props
-    const {fields, groupBy} = query
-    if (!isQuerySupportedByExplorer) {
-      return
-    }
-    const initialGroupBy = {...groupBy, time}
-
-    if (!_.size(fields)) {
-      return isKapacitorRule
-        ? onToggleField(field)
-        : addInitialField(field, initialGroupBy)
-    }
-
-    onToggleField(field)
-  }
-
-  public handleApplyFuncs = fieldFunc => {
-    const {
-      query,
-      removeFuncs,
-      applyFuncsToField,
-      initialGroupByTime: time,
-    } = this.props
-    const {groupBy, fields} = query
-    const {funcs} = fieldFunc
-
-    // If one field has no funcs, all fields must have no funcs
-    if (!_.size(funcs)) {
-      return removeFuncs(fields)
-    }
-
-    // If there is no groupBy time, set one
-    if (!groupBy.time) {
-      return applyFuncsToField(fieldFunc, {...groupBy, time})
-    }
-
-    applyFuncsToField(fieldFunc, groupBy)
-  }
-
-  public handleTimeShift = shift => {
-    this.props.onTimeShift(shift)
-  }
-
-  public _getFields = () => {
-    const {database, measurement, retentionPolicy} = this.props.query
-    const {source} = this.context
-    const {querySource} = this.props
-
-    const proxy =
-      _.get(querySource, ['links', 'proxy'], null) || source.links.proxy
-
-    showFieldKeys(proxy, database, measurement, retentionPolicy).then(resp => {
-      const {errors, fieldSets} = showFieldKeysParser(resp.data)
-      if (errors.length) {
-        console.error('Error parsing fields keys: ', errors)
-      }
-
-      const newFields = _.get(fieldSets, measurement, []).map(f => ({
-        value: f,
-        type: 'field',
-      }))
-
-      this.setState({
-        fields: newFields,
-      })
-    })
+    this.getFields()
   }
 
   public render() {
@@ -184,7 +160,10 @@ class FieldList extends PureComponent {
                   fields
                 )
 
-                const funcs = getFuncsByFieldName(fieldFunc.value, fields)
+                const funcs: FieldFunc[] = getFuncsByFieldName(
+                  fieldFunc.value,
+                  fields
+                )
                 const fieldFuncs = selectedFields.length
                   ? selectedFields
                   : [fieldFunc]
@@ -208,51 +187,90 @@ class FieldList extends PureComponent {
       </div>
     )
   }
-}
 
-const {arrayOf, bool, func, shape, string} = PropTypes
+  private handleGroupByTime = (groupBy: GroupByOption): void => {
+    this.props.onGroupByTime(groupBy.menuOption)
+  }
 
-FieldList.defaultProps = {
-  isKapacitorRule: false,
-  initialGroupByTime: null,
-}
+  private handleFill = (fill: string): void => {
+    this.props.onFill(fill)
+  }
 
-FieldList.contextTypes = {
-  source: shape({
-    links: shape({
-      proxy: string.isRequired,
-    }).isRequired,
-  }).isRequired,
-}
+  private handleToggleField = (field: Field) => {
+    const {
+      query,
+      onToggleField,
+      addInitialField,
+      initialGroupByTime: time,
+      isKapacitorRule,
+      isQuerySupportedByExplorer,
+    } = this.props
+    const {fields, groupBy} = query
+    if (!isQuerySupportedByExplorer) {
+      return
+    }
+    const initialGroupBy = {...groupBy, time}
 
-FieldList.propTypes = {
-  query: shape({
-    database: string,
-    retentionPolicy: string,
-    measurement: string,
-    shifts: arrayOf(
-      shape({
-        label: string,
-        unit: string,
-        quantity: string,
+    if (!_.size(fields)) {
+      return isKapacitorRule
+        ? onToggleField(field)
+        : addInitialField(field, initialGroupBy)
+    }
+
+    onToggleField(field)
+  }
+
+  private handleApplyFuncs = (fieldFunc: ApplyFuncsToFieldArgs): void => {
+    const {
+      query,
+      removeFuncs,
+      applyFuncsToField,
+      initialGroupByTime: time,
+    } = this.props
+    const {groupBy, fields} = query
+    const {funcs} = fieldFunc
+
+    // If one field has no funcs, all fields must have no funcs
+    if (!_.size(funcs)) {
+      return removeFuncs(fields)
+    }
+
+    // If there is no groupBy time, set one
+    if (!groupBy.time) {
+      return applyFuncsToField(fieldFunc, {...groupBy, time})
+    }
+
+    applyFuncsToField(fieldFunc, groupBy)
+  }
+
+  private handleTimeShift = (shift: TimeShiftOption): void => {
+    this.props.onTimeShift(shift)
+  }
+
+  private getFields = (): void => {
+    const {database, measurement, retentionPolicy} = this.props.query
+    const {source} = this.context
+    const {querySource} = this.props
+
+    const proxy =
+      _.get(querySource, ['links', 'proxy'], null) || source.links.proxy
+
+    showFieldKeys(proxy, database, measurement, retentionPolicy).then(resp => {
+      const {errors, fieldSets} = showFieldKeysParser(resp.data)
+      if (errors.length) {
+        console.error('Error parsing fields keys: ', errors)
+      }
+
+      const newFields = _.get(fieldSets, measurement, []).map(f => ({
+        value: f,
+        type: 'field',
+      }))
+
+      this.setState({
+        fields: newFields,
       })
-    ),
-  }).isRequired,
-  onTimeShift: func,
-  onToggleField: func.isRequired,
-  onGroupByTime: func.isRequired,
-  onFill: func,
-  applyFuncsToField: func.isRequired,
-  isKapacitorRule: bool,
-  querySource: shape({
-    links: shape({
-      proxy: string.isRequired,
-    }).isRequired,
-  }),
-  removeFuncs: func.isRequired,
-  addInitialField: func,
-  initialGroupByTime: string,
-  isQuerySupportedByExplorer: bool,
+    })
+  }
 }
 
 export default FieldList

ui/src/shared/components/FillQuery.tsx

@@ -31,6 +31,12 @@ interface State {
 
 @ErrorHandling
 class FillQuery extends PureComponent<Props, State> {
+  public static defaultProps: Partial<Props> = {
+    size: 'sm',
+    theme: 'blue',
+    value: NULL_STRING,
+  }
+
   private numberInput: HTMLElement
 
   constructor(props) {
@@ -51,12 +57,6 @@ class FillQuery extends PureComponent<Props, State> {
         }
   }
 
-  public static defaultProps: Partial<Props> = {
-    size: 'sm',
-    theme: 'blue',
-    value: NULL_STRING,
-  }
-
   public render() {
     const {size, theme, isDisabled} = this.props
     const {selected, currentNumberValue} = this.state

ui/src/shared/components/QueryOptions.tsx

@@ -8,12 +8,12 @@ import FillQuery from 'src/shared/components/FillQuery'
 
 interface Props {
   fill: string
-  onFill: () => void
+  onFill: (fill: string) => void
   groupBy: GroupBy
   shift: TimeShift
-  onGroupByTime: () => void
+  onGroupByTime: (groupBy: GroupBy) => void
   isKapacitorRule: boolean
-  onTimeShift: () => void
+  onTimeShift: (shift: TimeShift) => void
   isDisabled: boolean
 }
 

ui/src/shared/components/SchemaExplorer.js

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import {QueryConfig, Source} from 'src/types'
-import {CellEditorOverlayActions} from 'src/types/dashboard'
-
 import DatabaseList from 'src/shared/components/DatabaseList'
 import MeasurementList from 'src/shared/components/MeasurementList'
 import FieldList from 'src/shared/components/FieldList'
@@ -12,10 +9,8 @@ const actionBinder = (id, action) => (...args) => action(id, ...args)
 
 const SchemaExplorer = ({
   query,
-  query: {id},
   source,
   initialGroupByTime,
-  isQuerySupportedByExplorer,
   actions: {
     fill,
     timeShift,
@@ -30,39 +25,44 @@ const SchemaExplorer = ({
     applyFuncsToField,
     toggleTagAcceptance,
   },
-}) => (
-  <div className="query-builder">
-    <DatabaseList
-      query={query}
-      querySource={source}
-      onChooseNamespace={actionBinder(id, chooseNamespace)}
-    />
-    <MeasurementList
-      source={source}
-      query={query}
-      querySource={source}
-      onChooseTag={actionBinder(id, chooseTag)}
-      onGroupByTag={actionBinder(id, groupByTag)}
-      onChooseMeasurement={actionBinder(id, chooseMeasurement)}
-      onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)}
-      isQuerySupportedByExplorer={isQuerySupportedByExplorer}
-    />
-    <FieldList
-      source={source}
-      query={query}
-      querySource={source}
-      onFill={actionBinder(id, fill)}
-      initialGroupByTime={initialGroupByTime}
-      onTimeShift={actionBinder(id, timeShift)}
-      removeFuncs={actionBinder(id, removeFuncs)}
-      onToggleField={actionBinder(id, toggleField)}
-      onGroupByTime={actionBinder(id, groupByTime)}
-      addInitialField={actionBinder(id, addInitialField)}
-      applyFuncsToField={actionBinder(id, applyFuncsToField)}
-      isQuerySupportedByExplorer={isQuerySupportedByExplorer}
-    />
-  </div>
-)
+  isQuerySupportedByExplorer = true,
+}) => {
+  const {id} = query
+
+  return (
+    <div className="query-builder">
+      <DatabaseList
+        query={query}
+        querySource={source}
+        onChooseNamespace={actionBinder(id, chooseNamespace)}
+      />
+      <MeasurementList
+        source={source}
+        query={query}
+        querySource={source}
+        onChooseTag={actionBinder(id, chooseTag)}
+        onGroupByTag={actionBinder(id, groupByTag)}
+        onChooseMeasurement={actionBinder(id, chooseMeasurement)}
+        onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)}
+        isQuerySupportedByExplorer={isQuerySupportedByExplorer}
+      />
+      <FieldList
+        source={source}
+        query={query}
+        querySource={source}
+        onFill={actionBinder(id, fill)}
+        initialGroupByTime={initialGroupByTime}
+        onTimeShift={actionBinder(id, timeShift)}
+        removeFuncs={actionBinder(id, removeFuncs)}
+        onToggleField={actionBinder(id, toggleField)}
+        onGroupByTime={actionBinder(id, groupByTime)}
+        addInitialField={actionBinder(id, addInitialField)}
+        applyFuncsToField={actionBinder(id, applyFuncsToField)}
+        isQuerySupportedByExplorer={isQuerySupportedByExplorer}
+      />
+    </div>
+  )
+}
 
 const {bool, func, shape, string} = PropTypes
 

ui/src/shared/components/TimeShiftDropdown.tsx

@@ -2,10 +2,11 @@ import React, {SFC} from 'react'
 
 import Dropdown from 'src/shared/components/Dropdown'
 import {TIME_SHIFTS} from 'src/shared/constants/timeShift'
+import {TimeShift} from 'src/types'
 
 interface Props {
   selected: string
-  onChooseTimeShift: () => void
+  onChooseTimeShift: (timeShift: TimeShift) => void
   isDisabled: boolean
 }
 

ui/src/shared/reducers/helpers/fields.js

@@ -42,6 +42,12 @@ export const firstFieldName = fields => _.head(fieldNamesDeep(fields))
 export const hasField = (fieldName, fields) =>
   fieldNamesDeep(fields).some(f => f === fieldName)
 
+/**
+ * getAllFields and funcs with fieldName
+ * @param {string} fieldName
+ * @param {FieldFunc[]} fields
+ * @returns {FieldFunc[]}
+ */
 // getAllFields and funcs with fieldName
 export const getFieldsWithName = (fieldName, fields) =>
   getFieldsDeep(fields).filter(f => f.value === fieldName)

ui/src/types/dashboard.ts

@@ -77,18 +77,20 @@ export interface Template {
   values: TemplateValue[]
 }
 
+export type CellEditorOverlayActionsFunc = (id: string, ...args: any[]) => any
+
 export interface CellEditorOverlayActions {
-  chooseNamespace: () => void
-  chooseMeasurement: () => void
-  applyFuncsToField: () => void
-  chooseTag: () => void
-  groupByTag: () => void
-  toggleField: () => void
-  groupByTime: () => void
-  toggleTagAcceptance: () => void
-  fill: () => void
-  editRawTextAsync: () => void
-  addInitialField: () => void
-  removeFuncs: () => void
-  timeShift: () => void
+  chooseNamespace: CellEditorOverlayActionsFunc
+  chooseMeasurement: CellEditorOverlayActionsFunc
+  applyFuncsToField: CellEditorOverlayActionsFunc
+  chooseTag: CellEditorOverlayActionsFunc
+  groupByTag: CellEditorOverlayActionsFunc
+  toggleField: CellEditorOverlayActionsFunc
+  groupByTime: CellEditorOverlayActionsFunc
+  toggleTagAcceptance: CellEditorOverlayActionsFunc
+  fill: CellEditorOverlayActionsFunc
+  editRawTextAsync: CellEditorOverlayActionsFunc
+  addInitialField: CellEditorOverlayActionsFunc
+  removeFuncs: CellEditorOverlayActionsFunc
+  timeShift: CellEditorOverlayActionsFunc
 }

ui/src/types/index.ts

@@ -1,6 +1,13 @@
 import {AuthLinks, Organization, Role, User, Me} from './auth'
 import {Template, Cell, CellQuery, Legend} from './dashboard'
-import {GroupBy, QueryConfig, Status, TimeRange, TimeShift} from './query'
+import {
+  GroupBy,
+  QueryConfig,
+  Status,
+  TimeRange,
+  TimeShift,
+  Field,
+} from './query'
 import {AlertRule, Kapacitor, Task} from './kapacitor'
 import {Source, SourceLinks} from './sources'
 import {DropdownAction, DropdownItem} from './shared'
@@ -18,6 +25,7 @@ export {
   Status,
   QueryConfig,
   TimeShift,
+  Field,
   GroupBy,
   AlertRule,
   Kapacitor,