Replace raw data toggle in layout with option in pencil menu

ui/src/flux/components/TimeMachineVis.tsx

@@ -9,14 +9,10 @@ import DefaultDebouncer, {Debouncer} from 'src/shared/utils/debouncer'
 import {getTimeSeries} from 'src/flux/apis'
 
 import {Service, FluxTable, RemoteDataState} from 'src/types'
+import {VisType} from 'src/types/flux'
 
 const FETCH_NEW_DATA_DELAY = 1000 // ms
 
-enum VisType {
-  Graph,
-  Table,
-}
-
 interface Props {
   script: string
   service: Service

ui/src/flux/containers/FluxPage.tsx

@@ -45,6 +45,7 @@ import {
   DeleteFuncNodeArgs,
   Func,
   ScriptStatus,
+  VisType,
 } from 'src/types/flux'
 import Threesizer from 'src/shared/components/threesizer/Threesizer'
 
@@ -126,7 +127,13 @@ export class FluxPage extends PureComponent<Props, State> {
         handleDisplay: 'none',
         headerButtons: [],
         menuOptions: [],
-        render: () => <TimeMachineVis service={service} script={script} />,
+        render: () => (
+          <TimeMachineVis
+            service={service}
+            visType={VisType.Graph}
+            script={script}
+          />
+        ),
         headerOrientation: HANDLE_HORIZONTAL,
       },
       {

ui/src/shared/components/Layout.tsx

@@ -7,7 +7,6 @@ import WidgetCell from 'src/shared/components/WidgetCell'
 import LayoutCell from 'src/shared/components/LayoutCell'
 import RefreshingGraph from 'src/shared/components/RefreshingGraph'
 import TimeMachineVis from 'src/flux/components/TimeMachineVis'
-import {SlideToggle, ComponentSize} from 'src/reusable_ui'
 
 // Utils
 import {buildQueriesForLayouts} from 'src/utils/buildQueriesForLayouts'
@@ -21,11 +20,7 @@ import {TimeRange, Cell, Template, Source, Service} from 'src/types'
 import {TimeSeriesServerResponse} from 'src/types/series'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {GrabDataForDownloadHandler} from 'src/types/layout'
-
-enum VisType {
-  Graph,
-  Table,
-}
+import {VisType} from 'src/types/flux'
 
 interface Props {
   cell: Cell
@@ -71,9 +66,12 @@ class Layout extends Component<Props, State> {
         cell={cell}
         cellData={cellData}
         templates={templates}
+        visType={this.visType}
         isEditable={isEditable}
         onCloneCell={onCloneCell}
         onDeleteCell={onDeleteCell}
+        isFluxSource={!!this.fluxSource}
+        toggleVisType={this.toggleVisType}
         onSummonOverlayTechnologies={onSummonOverlayTechnologies}
       >
         {this.visualization}
@@ -99,23 +97,13 @@ class Layout extends Component<Props, State> {
 
     if (fluxSource) {
       return (
-        <>
-          <div className="time-machine-vis--header">
-            <div className="time-machine-vis--raw-toggle">
-              <SlideToggle
-                active={this.visType === VisType.Table}
-                onChange={this.toggleVisType}
-                size={ComponentSize.ExtraSmall}
-              />
-              View Raw Data
-            </div>
-          </div>
+        <div className="dash-graph">
           <TimeMachineVis
             service={fluxSource}
             visType={this.visType}
             script={getDeep<string>(cell, 'queries.0.query', '')}
           />
-        </>
+        </div>
       )
     }
   }

ui/src/shared/components/LayoutCell.tsx

@@ -1,6 +1,8 @@
+// Libraries
 import React, {Component, ReactElement} from 'react'
 import _ from 'lodash'
 
+// Components
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import LayoutCellMenu from 'src/shared/components/LayoutCellMenu'
 import LayoutCellHeader from 'src/shared/components/LayoutCellHeader'
@@ -13,10 +15,12 @@ import {dataToCSV} from 'src/shared/parsing/dataToCSV'
 import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers'
 import {PREDEFINED_TEMP_VARS} from 'src/shared/constants'
 
+// Types
 import {Cell, CellQuery, Template} from 'src/types/'
 import {NoteVisibility} from 'src/types/dashboards'
 import {TimeSeriesServerResponse} from 'src/types/series'
 import {CellType} from 'src/types/dashboards'
+import {VisType} from 'src/types/flux'
 
 interface Props {
   cell: Cell
@@ -27,12 +31,24 @@ interface Props {
   isEditable: boolean
   cellData: TimeSeriesServerResponse[]
   templates: Template[]
+  isFluxSource: boolean
+  visType: VisType
+  toggleVisType: () => void
 }
 
 @ErrorHandling
 export default class LayoutCell extends Component<Props> {
   public render() {
-    const {cell, isEditable, cellData, onDeleteCell, onCloneCell} = this.props
+    const {
+      cell,
+      isEditable,
+      cellData,
+      onDeleteCell,
+      onCloneCell,
+      visType,
+      toggleVisType,
+      isFluxSource,
+    } = this.props
 
     return (
       <div className="dash-graph">
@@ -46,6 +62,9 @@ export default class LayoutCell extends Component<Props> {
             onDelete={onDeleteCell}
             onCSVDownload={this.handleCSVDownload}
             queries={this.queries}
+            isFluxSource={isFluxSource}
+            visType={visType}
+            toggleVisType={toggleVisType}
           />
         </Authorized>
         <LayoutCellNote

ui/src/shared/components/LayoutCellMenu.tsx

@@ -10,6 +10,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import {Cell} from 'src/types/dashboards'
 import {QueryConfig} from 'src/types/queries'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {VisType} from 'src/types/flux'
 
 interface Query {
   text?: string
@@ -25,6 +26,9 @@ interface Props {
   onDelete: (cell: Cell) => void
   onCSVDownload: () => void
   queries: Query[]
+  isFluxSource: boolean
+  visType: VisType
+  toggleVisType: () => void
 }
 
 interface State {
@@ -113,9 +117,25 @@ class LayoutCellMenu extends Component<Props, State> {
   }
 
   private get editMenuItems(): MenuItem[] {
-    const {dataExists, onCSVDownload} = this.props
+    const {
+      dataExists,
+      onCSVDownload,
+      toggleVisType,
+      visType,
+      isFluxSource,
+    } = this.props
 
-    return [
+    const visTypeItem = {
+      text: 'View Raw Data',
+      action: toggleVisType,
+      disabled: false,
+    }
+
+    if (visType === VisType.Table) {
+      visTypeItem.text = 'View Visualization'
+    }
+
+    const menuItems = [
       {
         text: 'Configure',
         action: this.handleEditCell,
@@ -127,6 +147,12 @@ class LayoutCellMenu extends Component<Props, State> {
         disabled: !dataExists,
       },
     ]
+
+    if (isFluxSource) {
+      menuItems.push(visTypeItem)
+    }
+
+    return menuItems
   }
 
   private get cloneMenuItems(): MenuItem[] {

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

@@ -68,6 +68,7 @@ import {
   DeleteFuncNodeArgs,
   Func,
   ScriptStatus,
+  VisType,
 } from 'src/types/flux'
 import {
   Axes,
@@ -95,11 +96,6 @@ export interface VisualizationOptions {
   lineColors: ColorString[]
 }
 
-enum VisType {
-  Graph,
-  Table,
-}
-
 interface Props {
   fluxLinks: Links
   source: Source

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

@@ -15,14 +15,12 @@ import buildQueries from 'src/utils/buildQueriesForGraphs'
 import * as QueriesModels from 'src/types/queries'
 import * as SourcesModels from 'src/types/sources'
 import {Service, Template} from 'src/types'
-
-enum VisType {
-  Graph,
-  Table,
-}
+import {VisType} from 'src/types/flux'
 
 interface Props {
   isInCEO: boolean
+  visType: VisType
+  isFluxSource: boolean
   source: SourcesModels.Source
   sources: SourcesModels.SourceOption[]
   service: Service
@@ -36,6 +34,7 @@ interface Props {
   onSelectDynamicSource: () => void
   timeRange: QueriesModels.TimeRange
   updateEditorTimeRange: (timeRange: QueriesModels.TimeRange) => void
+  toggleVisType: () => void
 }
 
 const TimeMachineControls: SFC<Props> = ({

ui/src/style/pages/time-machine.scss

@@ -72,10 +72,14 @@
 .time-machine-vis--raw-toggle {
   display: flex;
   align-items: center;
-  margin-right: 5px;
+  margin-right: $ix-marg-b;
+  font-size: 13px;
+  color: $g13-mist;
+  font-weight: 600;
+  @include no-user-select();
 
   .slide-toggle {
-    margin-right: 10px;
+    margin-right: $ix-marg-b;
   }
 }
 

ui/src/types/flux.ts

@@ -174,3 +174,8 @@ export enum RemoteDataState {
   Done = 'Done',
   Error = 'Error',
 }
+
+export enum VisType {
+  Graph,
+  Table,
+}