Convert Visualization and buildQueriesForGraphs to typescript

Visualization now uses the new context api

ui/src/dashboards/components/Visualization.js

@@ -1,135 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-
-import RefreshingGraph from 'src/shared/components/RefreshingGraph'
-import buildQueries from 'utils/buildQueriesForGraphs'
-import VisualizationName from 'src/dashboards/components/VisualizationName'
-
-import {getCellTypeColors} from 'src/dashboards/constants/cellEditor'
-import {colorsStringSchema, colorsNumberSchema} from 'shared/schemas'
-
-const DashVisualization = (
-  {
-    axes,
-    type,
-    templates,
-    timeRange,
-    lineColors,
-    autoRefresh,
-    gaugeColors,
-    queryConfigs,
-    editQueryStatus,
-    resizerTopHeight,
-    staticLegend,
-    thresholdsListColors,
-    tableOptions,
-    timeFormat,
-    decimalPlaces,
-    fieldOptions,
-    isInCEO,
-  },
-  {
-    source: {
-      links: {proxy},
-    },
-  }
-) => {
-  const colors = getCellTypeColors({
-    cellType: type,
-    gaugeColors,
-    thresholdsListColors,
-    lineColors,
-  })
-
-  return (
-    <div className="graph">
-      <VisualizationName />
-      <div className="graph-container">
-        <RefreshingGraph
-          colors={colors}
-          axes={axes}
-          type={type}
-          tableOptions={tableOptions}
-          queries={buildQueries(proxy, queryConfigs, timeRange)}
-          templates={templates}
-          autoRefresh={autoRefresh}
-          editQueryStatus={editQueryStatus}
-          resizerTopHeight={resizerTopHeight}
-          staticLegend={staticLegend}
-          timeFormat={timeFormat}
-          decimalPlaces={decimalPlaces}
-          fieldOptions={fieldOptions}
-          isInCEO={isInCEO}
-        />
-      </div>
-    </div>
-  )
-}
-
-const {arrayOf, bool, func, number, shape, string} = PropTypes
-
-DashVisualization.propTypes = {
-  type: string.isRequired,
-  autoRefresh: number.isRequired,
-  templates: arrayOf(shape()),
-  timeRange: shape({
-    upper: string,
-    lower: string,
-  }).isRequired,
-  queryConfigs: arrayOf(shape({})).isRequired,
-  editQueryStatus: func.isRequired,
-  axes: shape({
-    y: shape({
-      bounds: arrayOf(string),
-    }),
-  }),
-  tableOptions: shape({}),
-  timeFormat: string.isRequired,
-  decimalPlaces: shape({
-    isEnforced: bool,
-    digits: number,
-  }),
-  fieldOptions: arrayOf(
-    shape({
-      internalName: string.isRequired,
-      displayName: string.isRequired,
-      visible: bool.isRequired,
-    })
-  ),
-  resizerTopHeight: number,
-  thresholdsListColors: colorsNumberSchema,
-  gaugeColors: colorsNumberSchema,
-  lineColors: colorsStringSchema,
-  staticLegend: bool,
-  isInCEO: bool,
-}
-
-DashVisualization.contextTypes = {
-  source: PropTypes.shape({
-    links: PropTypes.shape({
-      proxy: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-}
-
-const mapStateToProps = ({
-  cellEditorOverlay: {
-    thresholdsListColors,
-    gaugeColors,
-    lineColors,
-    cell: {type, axes, tableOptions, fieldOptions, timeFormat, decimalPlaces},
-  },
-}) => ({
-  gaugeColors,
-  thresholdsListColors,
-  lineColors,
-  type,
-  axes,
-  tableOptions,
-  fieldOptions,
-  timeFormat,
-  decimalPlaces,
-})
-
-export default connect(mapStateToProps, null)(DashVisualization)

ui/src/dashboards/components/Visualization.tsx

@@ -0,0 +1,119 @@
+import React, {SFC} from 'react'
+import {connect} from 'react-redux'
+import _ from 'lodash'
+
+import RefreshingGraph from 'src/shared/components/RefreshingGraph'
+import buildQueries from 'src/utils/buildQueriesForGraphs'
+import VisualizationName from 'src/dashboards/components/VisualizationName'
+import {SourceContext} from 'src/CheckSources'
+
+import {getCellTypeColors} from 'src/dashboards/constants/cellEditor'
+
+import {TimeRange, QueryConfig, Axes, Template, Source} from 'src/types'
+import {
+  TableOptions,
+  DecimalPlaces,
+  FieldName,
+  CellType,
+} from 'src/types/dashboard'
+import {ColorString, ColorNumber} from 'src/types/colors'
+
+interface Props {
+  type: CellType
+  autoRefresh: number
+  templates: Template[]
+  timeRange: TimeRange
+  queryConfigs: QueryConfig[]
+  editQueryStatus: () => void
+  axes: Axes
+  tableOptions: TableOptions
+  timeFormat: string
+  decimalPlaces: DecimalPlaces
+  fieldOptions: FieldName[]
+  resizerTopHeight: number
+  thresholdsListColors: ColorNumber[]
+  gaugeColors: ColorNumber[]
+  lineColors: ColorString[]
+  staticLegend: boolean
+  isInCEO: boolean
+}
+
+const DashVisualization: SFC<Props> = ({
+  axes,
+  type,
+  templates,
+  timeRange,
+  lineColors,
+  autoRefresh,
+  gaugeColors,
+  queryConfigs,
+  editQueryStatus,
+  resizerTopHeight,
+  staticLegend,
+  thresholdsListColors,
+  tableOptions,
+  timeFormat,
+  decimalPlaces,
+  fieldOptions,
+  isInCEO,
+}) => {
+  const colors: ColorString[] = getCellTypeColors({
+    cellType: type,
+    gaugeColors,
+    thresholdsListColors,
+    lineColors,
+  })
+
+  return (
+    <div className="graph">
+      <VisualizationName />
+      <div className="graph-container">
+        <SourceContext.Consumer>
+          {(source: Source) => (
+            <RefreshingGraph
+              colors={colors}
+              axes={axes}
+              type={type}
+              tableOptions={tableOptions}
+              queries={buildQueries(
+                _.get(source, 'links.proxy'),
+                queryConfigs,
+                timeRange
+              )}
+              templates={templates}
+              autoRefresh={autoRefresh}
+              editQueryStatus={editQueryStatus}
+              resizerTopHeight={resizerTopHeight}
+              staticLegend={staticLegend}
+              timeFormat={timeFormat}
+              decimalPlaces={decimalPlaces}
+              fieldOptions={fieldOptions}
+              isInCEO={isInCEO}
+            />
+          )}
+        </SourceContext.Consumer>
+      </div>
+    </div>
+  )
+}
+
+const mapStateToProps = ({
+  cellEditorOverlay: {
+    thresholdsListColors,
+    gaugeColors,
+    lineColors,
+    cell: {type, axes, tableOptions, fieldOptions, timeFormat, decimalPlaces},
+  },
+}) => ({
+  gaugeColors,
+  thresholdsListColors,
+  lineColors,
+  type,
+  axes,
+  tableOptions,
+  fieldOptions,
+  timeFormat,
+  decimalPlaces,
+})
+
+export default connect(mapStateToProps, null)(DashVisualization)

ui/src/dashboards/constants/cellEditor.ts

@@ -1,6 +1,7 @@
 import {DEFAULT_TABLE_OPTIONS} from 'src/dashboards/constants'
 import {stringifyColorValues} from 'src/shared/constants/colorOperations'
 import {CellType} from 'src/types/dashboard'
+import {ColorString, ColorNumber} from 'src/types/colors'
 
 export const initializeOptions = (cellType: CellType) => {
   switch (cellType) {
@@ -21,18 +22,20 @@ export const AXES_SCALE_OPTIONS = {
 export const TOOLTIP_Y_VALUE_FORMAT =
   '<p><strong>K/M/B</strong> = Thousand / Million / Billion<br/><strong>K/M/G</strong> = Kilo / Mega / Giga </p>'
 
+interface Color {
+  cellType: CellType
+  thresholdsListColors: ColorNumber[]
+  gaugeColors: ColorNumber[]
+  lineColors: ColorString[]
+}
+
 export const getCellTypeColors = ({
   cellType,
   gaugeColors,
   thresholdsListColors,
   lineColors,
-}: {
+}: Color): ColorString[] => {
-  cellType: CellType
+  let colors: ColorString[] = []
-  gaugeColors
-  thresholdsListColors
-  lineColors
-}) => {
-  let colors = []
 
   switch (cellType) {
     case CellType.Gauge: {

ui/src/utils/buildQueriesForGraphs.js

@@ -1,45 +0,0 @@
-import _ from 'lodash'
-import {buildQuery} from 'utils/influxql'
-import {TYPE_QUERY_CONFIG, TYPE_SHIFTED} from 'src/dashboards/constants'
-
-const buildQueries = (proxy, queryConfigs, tR) => {
-  const statements = queryConfigs.map(query => {
-    const {rawText, range, id, shifts, database, measurement, fields} = query
-    const timeRange = range || tR
-    const text = rawText || buildQuery(TYPE_QUERY_CONFIG, timeRange, query)
-    const isParsable = database && measurement && fields.length
-
-    if (shifts && shifts.length && isParsable) {
-      const shiftedQueries = shifts
-        .filter(s => s.unit)
-        .map(s => buildQuery(TYPE_SHIFTED, timeRange, query, s))
-
-      return {
-        text: `${text};${shiftedQueries.join(';')}`,
-        id,
-        queryConfig: query,
-      }
-    }
-
-    return {text, id, queryConfig: query}
-  })
-
-  const queries = statements
-    .filter(s => s.text !== null)
-    .map(({queryConfig, text, id}) => {
-      const queryProxy = _.get(queryConfig, 'source.links.proxy', '')
-
-      const host = [queryProxy || proxy]
-
-      return {
-        host,
-        text,
-        id,
-        queryConfig,
-      }
-    })
-
-  return queries
-}
-
-export default buildQueries

ui/src/utils/buildQueriesForGraphs.ts

@@ -0,0 +1,66 @@
+import _ from 'lodash'
+import {buildQuery} from 'src/utils/influxql'
+import {TYPE_QUERY_CONFIG, TYPE_SHIFTED} from 'src/dashboards/constants'
+
+import {QueryConfig, TimeRange} from 'src/types'
+
+interface Statement {
+  queryConfig: QueryConfig
+  id: string
+  text: string
+}
+
+interface Query {
+  host: string[]
+  text: string
+  id: string
+  queryConfig: QueryConfig
+}
+
+const buildQueries = (
+  proxy: string,
+  queryConfigs: QueryConfig[],
+  tR: TimeRange
+): Query[] => {
+  const statements: Statement[] = queryConfigs.map(query => {
+    const {rawText, range, id, shifts, database, measurement, fields} = query
+    const timeRange: TimeRange = range || tR
+    const text: string =
+      rawText || buildQuery(TYPE_QUERY_CONFIG, timeRange, query)
+    const isParsable: boolean =
+      !_.isEmpty(database) && !_.isEmpty(measurement) && fields.length > 0
+
+    if (shifts && shifts.length && isParsable) {
+      const shiftedQueries: string[] = shifts
+        .filter(s => s.unit)
+        .map(s => buildQuery(TYPE_SHIFTED, timeRange, query, s))
+
+      return {
+        text: `${text};${shiftedQueries.join(';')}`,
+        id,
+        queryConfig: query,
+      }
+    }
+
+    return {text, id, queryConfig: query}
+  })
+
+  const queries: Query[] = statements
+    .filter(s => s.text !== null)
+    .map(({queryConfig, text, id}) => {
+      const queryProxy: string = _.get(queryConfig, 'source.links.proxy', '')
+
+      const host: string[] = [queryProxy || proxy]
+
+      return {
+        host,
+        text,
+        id,
+        queryConfig,
+      }
+    })
+
+  return queries
+}
+
+export default buildQueries