Move constants/types/utils to separate files

ui/src/dashboards/components/ImportDashboardMappings.tsx

@@ -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 {Source, Cell} from 'src/types'
-import {ImportedSources} from 'src/types/dashboards'
+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 {sourcesCells, sourceMappings} = createSourceMappings(
-    const sourceMappings: SourceMappings = {}
+      source,
-    const sourceInfo: SourceInfo = this.getSourceInfo(source)
-    const cellsWithNoSource: CellInfo[] = []
-
-    sourcesCells = _.reduce(
       cells,
-      (acc, c) => {
+      importedSources
-        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 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 mappedCells = mapCells(cells, sourceMappings, importedSources)
-      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
-    })
 
     onSubmit(mappedCells)
   }

ui/src/dashboards/constants/index.ts

@@ -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'

ui/src/dashboards/utils/importDashboardMappings.ts

@@ -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
+}

ui/src/types/dashboards.ts

@@ -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
+}