Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move constants/types/utils to separate files

pull/4068/head
Iris Scholten 2018-07-30 18:24:00 -07:00
parent a3716a586c
commit 29d32cd209
4 changed files with 193 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
ui/src/dashboards/components/ImportDashboardMappings.tsx
View File

@ -4,9 +4,20 @@ import _ from 'lodash'
import Dropdown from 'src/shared/components/Dropdown'
import {getDeep} from 'src/utils/wrappers'
import {
mapCells,
getSourceInfo,
createSourceMappings,
} from 'src/dashboards/utils/importDashboardMappings'
import {NO_SOURCE} from 'src/dashboards/constants'
import {Source, Cell, CellQuery} from 'src/types'
import {ImportedSources} from 'src/types/dashboards'
import {Source, Cell} from 'src/types'
import {
SourcesCells,
SourceMappings,
ImportedSources,
SourceItemValue,
} from 'src/types/dashboards'
interface Props {
cells: Cell[]
@ -21,33 +32,6 @@ interface State {
sourceMappings: SourceMappings
}
interface CellInfo {
id: string
name: string
}
interface SourcesCells {
[x: string]: CellInfo[]
}
interface SourceInfo {
name: string
id: string
link: string
}
interface SourceMappings {
[x: string]: SourceInfo
}
interface SourceItemValue {
importedSourceID: string
sourceInfo: SourceInfo
text?: string
}
const NO_SOURCE = 'none'
class ImportDashboardMappings extends Component<Props, State> {
constructor(props: Props) {
super(props)
@ -61,54 +45,11 @@ class ImportDashboardMappings extends Component<Props, State> {
return
}
let sourcesCells: SourcesCells = {}
const sourceMappings: SourceMappings = {}
const sourceInfo: SourceInfo = this.getSourceInfo(source)
const cellsWithNoSource: CellInfo[] = []
sourcesCells = _.reduce(
const {sourcesCells, sourceMappings} = createSourceMappings(
source,
cells,
(acc, c) => {
const cellInfo: CellInfo = {id: c.i, name: c.name}
const query = getDeep<CellQuery>(c, 'queries.0', null)
if (_.isEmpty(query)) {
return acc
}
const sourceLink = getDeep<string>(query, 'source', '')
if (!sourceLink) {
cellsWithNoSource.push(cellInfo)
return acc
}
let importedSourceID = _.findKey(
importedSources,
is => is.link === sourceLink
importedSources
)
if (!importedSourceID) {
const sourceIDRegex = /sources\/(\d+)/g
// first capture group
const sourceLinkSID = sourceIDRegex.exec(sourceLink)[1]
if (!sourceLinkSID) {
return acc
}
importedSourceID = sourceLinkSID
}
if (acc[importedSourceID]) {
acc[importedSourceID].push(cellInfo)
} else {
acc[importedSourceID] = [cellInfo]
}
sourceMappings[importedSourceID] = sourceInfo
return acc
},
sourcesCells
)
if (cellsWithNoSource.length) {
sourcesCells[NO_SOURCE] = cellsWithNoSource
}
this.setState({sourcesCells, sourceMappings})
}
@ -200,12 +141,6 @@ class ImportDashboardMappings extends Component<Props, State> {
</div>
</td>
<td className="text-right">
{/* <Dropdown
onChange={this.handleDropdownChange}
selectedID={this.getSelectedSourceID(sourceID)}
>
{this.getSourceItems(sourceID)}
</Dropdown> */}
<Dropdown
className="dropdown-stretch"
buttonColor="btn-default"
@ -223,7 +158,7 @@ class ImportDashboardMappings extends Component<Props, State> {
const {sources} = this.props
return sources.map(source => {
const sourceInfo = this.getSourceInfo(source)
const sourceInfo = getSourceInfo(source)
const sourceMap: SourceItemValue = {
sourceInfo,
importedSourceID,
@ -233,14 +168,6 @@ class ImportDashboardMappings extends Component<Props, State> {
})
}
private getSourceInfo(source: Source): SourceInfo {
return {
name: source.name,
id: source.id,
link: source.links.self,
}
}
private get header() {
return (
<thead>
@ -284,39 +211,7 @@ class ImportDashboardMappings extends Component<Props, State> {
const {cells, onSubmit, importedSources} = this.props
const {sourceMappings} = this.state
const mappedCells = cells.map(c => {
const query = getDeep<CellQuery>(c, 'queries.0', null)
if (_.isEmpty(query)) {
return c
}
const sourceLink = getDeep<string>(query, 'source', '')
if (!sourceLink) {
const mappedSourceLink = sourceMappings[NO_SOURCE].link
let queries = getDeep<CellQuery[]>(c, 'queries', [])
if (queries.length) {
queries = queries.map(q => {
return {...q, source: mappedSourceLink}
})
}
return {...c, queries}
}
const importedSourceID = _.findKey(
importedSources,
is => is.link === sourceLink
)
if (sourceLink && importedSourceID) {
const mappedSourceLink = sourceMappings[importedSourceID].link
let queries = getDeep<CellQuery[]>(c, 'queries', [])
if (queries.length) {
queries = queries.map(q => {
return {...q, source: mappedSourceLink}
})
}
return {...c, queries}
}
return c
})
const mappedCells = mapCells(cells, sourceMappings, importedSources)
onSubmit(mappedCells)
}

3
ui/src/dashboards/constants/index.ts
View File

@ -118,3 +118,6 @@ export enum CEOTabs {
export const MAX_TOLOCALESTRING_VAL = 20 // 20 is the max input to maximumFractionDigits in spec for tolocalestring
export const MIN_DECIMAL_PLACES = '0'
export const MAX_DECIMAL_PLACES = MAX_TOLOCALESTRING_VAL.toString()
// used in importing dashboards and mapping sources
export const NO_SOURCE = 'none'

127
ui/src/dashboards/utils/importDashboardMappings.ts Normal file
View File

@ -0,0 +1,127 @@
import _ from 'lodash'
import {getDeep} from 'src/utils/wrappers'
import {NO_SOURCE} from 'src/dashboards/constants'
import {CellQuery, Cell, Source} from 'src/types'
import {
CellInfo,
SourceInfo,
SourcesCells,
SourceMappings,
ImportedSources,
} from 'src/types/dashboards'
export const createSourceMappings = (source, cells, importedSources) => {
let sourcesCells: SourcesCells = {}
const sourceMappings: SourceMappings = {}
const sourceInfo: SourceInfo = getSourceInfo(source)
const cellsWithNoSource: CellInfo[] = []
sourcesCells = _.reduce(
cells,
(acc, c) => {
const cellInfo: CellInfo = {id: c.i, name: c.name}
const query = getDeep<CellQuery>(c, 'queries.0', null)
if (_.isEmpty(query)) {
return acc
}
const sourceLink = getDeep<string>(query, 'source', '')
if (!sourceLink) {
cellsWithNoSource.push(cellInfo)
return acc
}
let importedSourceID = _.findKey(
importedSources,
is => is.link === sourceLink
)
if (!importedSourceID) {
const sourceLinkSID = getSourceIDFromLink(sourceLink)
if (!sourceLinkSID) {
return acc
}
importedSourceID = sourceLinkSID
}
if (acc[importedSourceID]) {
acc[importedSourceID].push(cellInfo)
} else {
acc[importedSourceID] = [cellInfo]
}
sourceMappings[importedSourceID] = sourceInfo
return acc
},
sourcesCells
)
if (cellsWithNoSource.length) {
sourcesCells[NO_SOURCE] = cellsWithNoSource
}
return {sourcesCells, sourceMappings}
}
export const mapCells = (
cells: Cell[],
sourceMappings: SourceMappings,
importedSources: ImportedSources
) => {
const mappedCells = cells.map(c => {
const query = getDeep<CellQuery>(c, 'queries.0', null)
if (_.isEmpty(query)) {
return c
}
const sourceLink = getDeep<string>(query, 'source', '')
if (!sourceLink) {
return mapQueriesInCells(sourceMappings, c, NO_SOURCE)
}
let importedSourceID = _.findKey(
importedSources,
is => is.link === sourceLink
)
if (!importedSourceID) {
const sourceLinkSID = getSourceIDFromLink(sourceLink)
if (!sourceLinkSID) {
return c
}
importedSourceID = sourceLinkSID
}
if (importedSourceID) {
return mapQueriesInCells(sourceMappings, c, importedSourceID)
}
return c
})
return mappedCells
}
export const mapQueriesInCells = (sourceMappings, cell, sourceID) => {
const mappedSourceLink = sourceMappings[sourceID].link
let queries = getDeep<CellQuery[]>(cell, 'queries', [])
if (queries.length) {
queries = queries.map(q => {
return {...q, source: mappedSourceLink}
})
}
return {...cell, queries}
}
export const getSourceInfo = (source: Source): SourceInfo => {
return {
name: source.name,
id: source.id,
link: source.links.self,
}
}
export const getSourceIDFromLink = (sourceLink: string) => {
const sourceIDRegex = /sources\/(\d+)/g
// first capture group
const sourceLinkSID = sourceIDRegex.exec(sourceLink)[1]
return sourceLinkSID
}

64
ui/src/types/dashboards.ts
View File

@ -114,25 +114,6 @@ export interface DashboardName {
link: string
}
interface DashboardFileMetaSection {
chronografVersion?: string
sources?: ImportedSources
}
export interface ImportedSources {
[x: string]: ImportedSourceInfo
}
export interface ImportedSourceInfo {
name: string
link: string
}
export interface DashboardFile {
meta?: DashboardFileMetaSection
dashboard: Dashboard
}
export enum ThresholdType {
Text = 'text',
BG = 'background',
@ -167,3 +148,48 @@ export interface DashboardSwitcherLinks {
active?: DashboardSwitcherLink
links: DashboardSwitcherLink[]
}
// Dashboards Imports
interface DashboardFileMetaSection {
chronografVersion?: string
sources?: ImportedSources
}
export interface ImportedSources {
[x: string]: ImportedSourceInfo
}
export interface ImportedSourceInfo {
name: string
link: string
}
export interface CellInfo {
id: string
name: string
}
export interface SourcesCells {
[x: string]: CellInfo[]
}
export interface SourceInfo {
name: string
id: string
link: string
}
export interface SourceMappings {
[x: string]: SourceInfo
}
export interface SourceItemValue {
importedSourceID: string
sourceInfo: SourceInfo
text?: string
}
export interface DashboardFile {
meta?: DashboardFileMetaSection
dashboard: Dashboard
}