feat: add button to switch to table graph if data invalid

Co-authored-by: Alirie Gray <alirie.gray@gmail.com>

ui/src/shared/components/InvalidData.tsx

@@ -1,7 +1,14 @@
 import React, {PureComponent} from 'react'
 
+import {Button} from 'src/reusable_ui'
+
+import {CellType} from 'src/types'
+import {ComponentColor, ComponentSize} from 'src/reusable_ui/types'
+import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
+
 interface Props {
   message?: string
+  onUpdateVisType?: TimeMachineContainer['handleUpdateType']
 }
 
 class InvalidData extends PureComponent<Props> {
@@ -17,10 +24,25 @@ class InvalidData extends PureComponent<Props> {
     return (
       <p>
         The data returned from the query can't be visualized with this graph
-        type.<br />Try updating the query or selecting a different graph type.
+        type.<br />
+        {this.props.onUpdateVisType && (
+          <>
+            <br />
+            <Button
+              text={'Switch to Table Graph'}
+              onClick={this.handleSwitchToTableGraph}
+              color={ComponentColor.Primary}
+              size={ComponentSize.Small}
+            />
+          </>
+        )}
       </p>
     )
   }
+
+  private handleSwitchToTableGraph = () => {
+    this.props.onUpdateVisType(CellType.Table)
+  }
 }
 
 export default InvalidData

ui/src/shared/components/LineGraph.tsx

@@ -37,6 +37,7 @@ import {
   FluxTable,
 } from 'src/types'
 import {DataType} from 'src/shared/constants'
+import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
 
 interface Props {
   axes: Axes
@@ -54,6 +55,7 @@ interface Props {
   onZoom: () => void
   handleSetHoverTime: () => void
   activeQueryIndex?: number
+  onUpdateVisType?: TimeMachineContainer['handleUpdateType']
 }
 
 type LineGraphProps = Props & RouteComponentProps<any, any>
@@ -132,7 +134,7 @@ class LineGraph extends PureComponent<LineGraphProps, State> {
 
   public render() {
     if (!this.isValidData) {
-      return <InvalidData />
+      return <InvalidData onUpdateVisType={this.props.onUpdateVisType} />
     }
     const {
       data,

ui/src/shared/components/RefreshingGraph.tsx

@@ -56,6 +56,7 @@ import {
 } from 'src/types/dashboards'
 import {GrabDataForDownloadHandler} from 'src/types/layout'
 import {TimeSeriesServerResponse} from 'src/types/series'
+import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
 
 interface TypeAndData {
   dataType: DataType
@@ -96,6 +97,7 @@ interface Props {
   editorLocation?: QueryUpdateState
   onUpdateCellColors?: (bgColor: string, textColor: string) => void
   onUpdateFieldOptions?: (fieldOptions: FieldOption[]) => void
+  onUpdateVisType?: TimeMachineContainer['handleUpdateType']
 }
 
 class RefreshingGraph extends Component<Props> {
@@ -467,6 +469,7 @@ class RefreshingGraph extends Component<Props> {
       decimalPlaces,
       staticLegend,
       manualRefresh,
+      onUpdateVisType,
       handleSetHoverTime,
     } = this.props
 
@@ -488,6 +491,7 @@ class RefreshingGraph extends Component<Props> {
         cellHeight={cellHeight}
         staticLegend={staticLegend}
         decimalPlaces={decimalPlaces}
+        onUpdateVisType={onUpdateVisType}
         handleSetHoverTime={handleSetHoverTime}
       />
     )

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

@@ -31,6 +31,7 @@ interface ConnectedProps {
   timeRange: TimeRange
   queryType: QueryType
   onUpdateFieldOptions: TimeMachineContainer['handleUpdateFieldOptions']
+  onUpdateVisType: TimeMachineContainer['handleUpdateType']
   type: CellType
   axes: Axes | null
   tableOptions: TableOptions
@@ -95,6 +96,7 @@ const TimeMachineVisualization: SFC<Props> = props => {
             cellNote={props.note}
             cellNoteVisibility={props.noteVisibility}
             onUpdateFieldOptions={props.onUpdateFieldOptions}
+            onUpdateVisType={props.onUpdateVisType}
           />
         </div>
       </div>
@@ -125,6 +127,7 @@ const ConnectedTimeMachineVisualization = (props: PassedProps) => (
           note={state.note}
           noteVisibility={state.noteVisibility}
           onUpdateFieldOptions={container.handleUpdateFieldOptions}
+          onUpdateVisType={container.handleUpdateType}
         />
       )
     }}