Convert Visualization and buildQueriesForGraphs to typescript
Visualization now uses the new context apipull/3500/head
Iris Scholten
parent
98b8f6e495
commit
a900224f95
|
|
@ -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)
|
||||
|
|
@ -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)
|
||||
|
|
@ -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,
|
||||
}: {
|
||||
cellType: CellType
|
||||
gaugeColors
|
||||
thresholdsListColors
|
||||
lineColors
|
||||
}) => {
|
||||
let colors = []
|
||||
}: Color): ColorString[] => {
|
||||
let colors: ColorString[] = []
|
||||
|
||||
switch (cellType) {
|
||||
case CellType.Gauge: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue