Add visualization options to cell while sending to dashboard

ui/src/dashboards/actions/index.ts

@@ -512,7 +512,7 @@ export const deleteDashboardAsync = (dashboard: Dashboard) => async (
 
 export const addDashboardCellAsync = (
   dashboard: Dashboard,
-  cell: NewDefaultCell
+  cell: Partial<Cell>
 ) => async (dispatch: Dispatch<Action>): Promise<void> => {
   try {
     const {data} = await addDashboardCellAJAX(dashboard, cell)

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -4,9 +4,7 @@ import _ from 'lodash'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import TimeMachine, {
-  VisualizationOptions,
-} from 'src/shared/components/TimeMachine/TimeMachine'
+import TimeMachine from 'src/shared/components/TimeMachine/TimeMachine'
 import CEOHeader from 'src/dashboards/components/CEOHeader'
 
 // Utils
@@ -28,6 +26,7 @@ import {editCellQueryStatus} from 'src/dashboards/actions'
 import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants'
 import {getCellTypeColors} from 'src/dashboards/constants/cellEditor'
 import {IS_STATIC_LEGEND} from 'src/shared/constants'
+import {STATIC_LEGEND} from 'src/dashboards/constants/cellEditor'
 
 // Types
 import * as ColorsModels from 'src/types/colors'
@@ -38,11 +37,7 @@ import {Service, NotificationAction} from 'src/types'
 import {Template} from 'src/types/tempVars'
 import {NewDefaultCell, ThresholdType} from 'src/types/dashboards'
 import {Links, ScriptStatus} from 'src/types/flux'
-
-const staticLegend: DashboardsModels.Legend = {
-  type: 'static',
-  orientation: 'bottom',
-}
+import {VisualizationOptions} from 'src/types/dataExplorer'
 
 interface Props {
   fluxLinks: Links
@@ -299,7 +294,7 @@ class CellEditorOverlay extends Component<Props, State> {
       ...cell,
       queries,
       colors,
-      legend: isStaticLegend ? staticLegend : {},
+      legend: isStaticLegend ? STATIC_LEGEND : {},
     }
 
     this.props.onSave(newCell)

ui/src/dashboards/components/DisplayOptions.tsx

@@ -48,7 +48,7 @@ import {buildDefaultYLabel} from 'src/shared/presenters'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {Axes, Cell, QueryConfig} from 'src/types'
 import {ColorNumber, ColorString} from 'src/types/colors'
-import {VisualizationOptions} from 'src/shared/components/TimeMachine/TimeMachine'
+import {VisualizationOptions} from 'src/types/dataExplorer'
 
 interface Props extends VisualizationOptions {
   cell: Cell | NewDefaultCell

ui/src/dashboards/constants/cellEditor.ts

@@ -1,6 +1,6 @@
 import {DEFAULT_TABLE_OPTIONS} from 'src/dashboards/constants'
 import {stringifyColorValues} from 'src/shared/constants/colorOperations'
-import {CellType, Axis, Axes} from 'src/types/dashboards'
+import {CellType, Axis, Axes, Legend} from 'src/types/dashboards'
 import {ColorString, ColorNumber} from 'src/types/colors'
 
 export const initializeOptions = (cellType: CellType) => {
@@ -76,3 +76,8 @@ export const getCellTypeColors = ({
 
   return colors
 }
+
+export const STATIC_LEGEND: Legend = {
+  type: 'static',
+  orientation: 'bottom',
+}

ui/src/data_explorer/components/SendToDashboardOverlay.tsx

@@ -3,6 +3,7 @@ import React, {PureComponent} from 'react'
 
 // Utils
 import {getNewDashboardCell} from 'src/dashboards/utils/cellGetters'
+import {getCellTypeColors} from 'src/dashboards/constants/cellEditor'
 
 // Components
 import {
@@ -18,11 +19,16 @@ import {
 } from 'src/reusable_ui'
 
 // Constants
+import {STATIC_LEGEND} from 'src/dashboards/constants/cellEditor'
+
+// Actions
 import {addDashboardCellAsync} from 'src/dashboards/actions'
 
 // Types
-import {QueryConfig, Dashboard, Source, Service} from 'src/types'
+import {QueryConfig, Dashboard, Source, Service, Cell} from 'src/types'
 import {getDeep} from 'src/utils/wrappers'
+import {VisualizationOptions} from 'src/types/dataExplorer'
+import {ColorString} from 'src/types/colors'
 
 interface Props {
   queryConfig: QueryConfig
@@ -33,6 +39,8 @@ interface Props {
   service: Service
   onCancel: () => void
   addDashboardCell: typeof addDashboardCellAsync
+  visualizationOptions: VisualizationOptions
+  isStaticLegend: boolean
 }
 
 interface State {
@@ -160,6 +168,7 @@ class SendToDashboardOverlay extends PureComponent<Props, State> {
   }
 
   private sendToDashboard = async () => {
+    const {name} = this.state
     const {
       queryConfig,
       script,
@@ -168,8 +177,20 @@ class SendToDashboardOverlay extends PureComponent<Props, State> {
       source,
       onCancel,
       service,
+      visualizationOptions,
+      isStaticLegend,
     } = this.props
-    const {name} = this.state
+    const {
+      type,
+      gaugeColors,
+      thresholdsListColors,
+      lineColors,
+      axes,
+      decimalPlaces,
+      timeFormat,
+      note,
+      noteVisibility,
+    } = visualizationOptions
 
     const newCellQueries = this.isFlux
       ? [
@@ -181,13 +202,30 @@ class SendToDashboardOverlay extends PureComponent<Props, State> {
         ]
       : [{queryConfig, query: rawText, source: source.links.self}]
 
+    const colors: ColorString[] = getCellTypeColors({
+      cellType: type,
+      gaugeColors,
+      thresholdsListColors,
+      lineColors,
+    })
+
+    const legend = isStaticLegend ? STATIC_LEGEND : {}
+
     await Promise.all(
       this.selectedDashboards.map(dashboard => {
         const emptyCell = getNewDashboardCell(dashboard)
-        const newCell = {
+        const newCell: Partial<Cell> = {
           ...emptyCell,
           name,
           queries: newCellQueries,
+          type,
+          axes,
+          legend,
+          colors,
+          decimalPlaces,
+          timeFormat,
+          note,
+          noteVisibility,
         }
         return addDashboardCell(dashboard, newCell)
       })

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -23,9 +23,7 @@ import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechno
 import ManualRefresh from 'src/shared/components/ManualRefresh'
 import SendToDashboardOverlay from 'src/data_explorer/components/SendToDashboardOverlay'
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
-import TimeMachine, {
-  VisualizationOptions,
-} from 'src/shared/components/TimeMachine/TimeMachine'
+import TimeMachine from 'src/shared/components/TimeMachine/TimeMachine'
 import DEHeader from 'src/data_explorer/components/DEHeader'
 
 // Actions
@@ -45,6 +43,7 @@ import {
   addQueryAsync,
   deleteQueryAsync,
   updateEditorTimeRange,
+  QueryUpdateState,
 } from 'src/shared/actions/queries'
 import {fetchAllFluxServicesAsync} from 'src/shared/actions/services'
 import {notify as notifyAction} from 'src/shared/actions/notifications'
@@ -81,7 +80,7 @@ import {
   TableOptions,
   NoteVisibility,
 } from 'src/types/dashboards'
-import {QueryUpdateState} from 'src/shared/actions/queries'
+import {VisualizationOptions} from 'src/types/dataExplorer'
 
 interface Props {
   source: Source
@@ -331,7 +330,7 @@ export class DataExplorer extends PureComponent<Props, State> {
   private get sendToDashboardOverlay(): JSX.Element {
     const {source, dashboards, addDashboardCell, script} = this.props
 
-    const {isSendToDashboardVisible} = this.state
+    const {isSendToDashboardVisible, isStaticLegend} = this.state
     return (
       <Authorized requiredRole={EDITOR_ROLE}>
         <OverlayTechnology visible={isSendToDashboardVisible}>
@@ -344,6 +343,8 @@ export class DataExplorer extends PureComponent<Props, State> {
             rawText={this.rawText}
             dashboards={dashboards}
             addDashboardCell={addDashboardCell}
+            visualizationOptions={this.visualizationOptions}
+            isStaticLegend={isStaticLegend}
           />
         </OverlayTechnology>
       </Authorized>

ui/src/shared/components/TimeMachine/TimeMachine.tsx

@@ -71,31 +71,8 @@ import {
   ScriptStatus,
   VisType,
 } from 'src/types/flux'
-import {
-  Axes,
-  CellType,
-  FieldOption,
-  TableOptions,
-  ThresholdType,
-  DecimalPlaces,
-  NoteVisibility,
-} from 'src/types/dashboards'
-import {ColorNumber, ColorString} from 'src/types/colors'
 
-export interface VisualizationOptions {
-  type: CellType
-  axes: Axes | null
-  tableOptions: TableOptions
-  fieldOptions: FieldOption[]
-  timeFormat: string
-  decimalPlaces: DecimalPlaces
-  note: string
-  noteVisibility: NoteVisibility
-  thresholdsListColors: ColorNumber[]
-  thresholdsListType: ThresholdType
-  gaugeColors: ColorNumber[]
-  lineColors: ColorString[]
-}
+import {VisualizationOptions} from 'src/types/dataExplorer'
 
 interface Props {
   fluxLinks: Links

ui/src/types/dataExplorer.ts

@@ -1,4 +1,10 @@
-import {ThresholdColor, GaugeColor, LineColor} from 'src/types/colors'
+import {
+  ThresholdColor,
+  GaugeColor,
+  LineColor,
+  ColorNumber,
+  ColorString,
+} from 'src/types/colors'
 import {TimeRange, CellQuery, QueryStatus, CellType, Axes} from 'src/types'
 import {
   DecimalPlaces,
@@ -33,3 +39,18 @@ export interface DEState {
   note: string
   noteVisibility: NoteVisibility
 }
+
+export interface VisualizationOptions {
+  type: CellType
+  axes: Axes | null
+  tableOptions: TableOptions
+  fieldOptions: FieldOption[]
+  timeFormat: string
+  decimalPlaces: DecimalPlaces
+  note: string
+  noteVisibility: NoteVisibility
+  thresholdsListColors: ColorNumber[]
+  thresholdsListType: ThresholdType
+  gaugeColors: ColorNumber[]
+  lineColors: ColorString[]
+}