Merge pull request #3225 from influxdata/dashboard-error-handling

Add error handling to dashboard components

ui/src/alerts/components/AlertsTable.js

@@ -7,9 +7,11 @@ import {Link} from 'react-router'
 import uuid from 'uuid'
 
 import InfiniteScroll from 'shared/components/InfiniteScroll'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 import {ALERTS_TABLE} from 'src/alerts/constants/tableSizing'
 
+@ErrorHandling
 class AlertsTable extends Component {
   constructor(props) {
     super(props)
@@ -239,6 +241,7 @@ class AlertsTable extends Component {
   }
 }
 
+@ErrorHandling
 class SearchBar extends Component {
   constructor(props) {
     super(props)

ui/src/alerts/containers/AlertsApp.js

@@ -5,6 +5,7 @@ import SourceIndicator from 'shared/components/SourceIndicator'
 import AlertsTable from 'src/alerts/components/AlertsTable'
 import NoKapacitorError from 'shared/components/NoKapacitorError'
 import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 import {getAlerts} from 'src/alerts/apis'
 import AJAX from 'utils/ajax'
@@ -14,6 +15,7 @@ import moment from 'moment'
 
 import {timeRanges} from 'shared/data/timeRanges'
 
+@ErrorHandling
 class AlertsApp extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/AxesOptions.js

@@ -16,10 +16,12 @@ import {
 import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
 
 import {updateAxes} from 'src/dashboards/actions/cellEditorOverlay'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const {LINEAR, LOG, BASE_2, BASE_10} = AXES_SCALE_OPTIONS
 const getInputMin = scale => (scale === LOG ? '0' : null)
 
+@ErrorHandling
 class AxesOptions extends Component {
   handleSetPrefixSuffix = e => {
     const {handleUpdateAxes, axes} = this.props

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -30,6 +30,7 @@ import {getCellTypeColors} from 'src/dashboards/constants/cellEditor'
 import {TimeRange, Source, Query} from 'src/types'
 import {Status} from 'src/types/query'
 import {Cell, CellQuery, Legend} from 'src/types/dashboard'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const staticLegend: Legend = {
   type: 'static',
@@ -86,6 +87,7 @@ const createWorkingDrafts = (source: string, queries: CellQuery[]): Query[] =>
     queries.map((query: CellQuery) => createWorkingDraft(source, query))
   )
 
+@ErrorHandling
 class CellEditorOverlay extends Component<Props, State> {
   private overlayRef: HTMLDivElement
 

ui/src/dashboards/components/DashboardHeaderEdit.js

@@ -4,7 +4,9 @@ import {
   DASHBOARD_NAME_MAX_LENGTH,
   NEW_DASHBOARD,
 } from 'src/dashboards/constants/index'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class DashboardEditHeader extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/DashboardSwitcher.js

@@ -4,7 +4,9 @@ import {Link} from 'react-router'
 import _ from 'lodash'
 import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class DashboardSwitcher extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/DashboardsPageContents.js

@@ -6,7 +6,9 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import DashboardsTable from 'src/dashboards/components/DashboardsTable'
 import SearchBar from 'src/hosts/components/SearchBar'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class DashboardsPageContents extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/DisplayOptions.js

@@ -9,7 +9,9 @@ import AxesOptions from 'src/dashboards/components/AxesOptions'
 import TableOptions from 'src/dashboards/components/TableOptions'
 
 import {buildDefaultYLabel} from 'shared/presenters'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class DisplayOptions extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/GaugeOptions.js

@@ -21,7 +21,9 @@ import {
   updateAxes,
 } from 'src/dashboards/actions/cellEditorOverlay'
 import {colorsNumberSchema} from 'shared/schemas'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class GaugeOptions extends Component {
   handleAddThreshold = () => {
     const {gaugeColors, handleUpdateGaugeColors, onResetFocus} = this.props

ui/src/dashboards/components/GraphOptionsCustomizableField.tsx

@@ -11,6 +11,7 @@ import {
   ConnectDropTarget,
   ConnectDragPreview,
 } from 'react-dnd'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const fieldType = 'field'
 
@@ -98,6 +99,7 @@ function MyDragSource(dragv1, dragv2, dragfunc1) {
   return target => DragSource(dragv1, dragv2, dragfunc1)(target) as any
 }
 
+@ErrorHandling
 @MyDropTarget(fieldType, fieldTarget, (connect: DropTargetConnector) => ({
   connectDropTarget: connect.dropTarget(),
 }))

ui/src/dashboards/components/GraphOptionsTimeFormat.tsx

@@ -7,6 +7,7 @@ import {
   TIME_FORMAT_DEFAULT,
   TIME_FORMAT_TOOLTIP_LINK,
 } from 'src/shared/constants/tableGraph'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface TimeFormatOptions {
   text: string
@@ -22,6 +23,7 @@ interface State {
   format: string
 }
 
+@ErrorHandling
 class GraphOptionsTimeFormat extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)

ui/src/dashboards/components/MeasurementDropdown.js

@@ -4,8 +4,10 @@ import PropTypes from 'prop-types'
 import Dropdown from 'shared/components/Dropdown'
 import {showMeasurements} from 'shared/apis/metaQuery'
 import parsers from 'shared/parsing'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 const {measurements: showMeasurementsParser} = parsers
 
+@ErrorHandling
 class MeasurementDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/QueryTextArea.js

@@ -5,6 +5,7 @@ import classnames from 'classnames'
 
 import TemplateDrawer from 'shared/components/TemplateDrawer'
 import QueryStatus from 'shared/components/QueryStatus'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 import {
   MATCH_INCOMPLETE_TEMPLATES,
@@ -13,6 +14,7 @@ import {
   unMask,
 } from 'src/dashboards/constants'
 
+@ErrorHandling
 class QueryTextArea extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/SingleStatOptions.js

@@ -8,7 +8,9 @@ import ThresholdsList from 'shared/components/ThresholdsList'
 import ThresholdsListTypeToggle from 'shared/components/ThresholdsListTypeToggle'
 
 import {updateAxes} from 'src/dashboards/actions/cellEditorOverlay'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class SingleStatOptions extends Component {
   handleUpdatePrefix = e => {
     const {handleUpdateAxes, axes} = this.props

ui/src/dashboards/components/TableOptions.tsx

@@ -17,6 +17,7 @@ import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeTo
 import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
 import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
 import {QueryConfig} from 'src/types/query'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Option {
   text: string
@@ -44,6 +45,7 @@ interface Props {
   onResetFocus: () => void
 }
 
+@ErrorHandling
 export class TableOptions extends PureComponent<Props, {}> {
   constructor(props) {
     super(props)

ui/src/dashboards/components/TagKeyDropdown.js

@@ -4,8 +4,10 @@ import PropTypes from 'prop-types'
 import Dropdown from 'shared/components/Dropdown'
 import {showTagKeys} from 'shared/apis/metaQuery'
 import parsers from 'shared/parsing'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 const {tagKeys: showTagKeysParser} = parsers
 
+@ErrorHandling
 class TagKeyDropdown extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/Threshold.tsx

@@ -2,6 +2,7 @@ import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
 
 import ColorDropdown from 'src/shared/components/ColorDropdown'
 import {THRESHOLD_COLORS} from 'src/shared/constants/thresholds'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface SelectedColor {
   hex: string
@@ -35,6 +36,7 @@ interface State {
   valid: boolean
 }
 
+@ErrorHandling
 class Threshold extends PureComponent<Props, State> {
   private thresholdInputRef: HTMLInputElement
 

ui/src/dashboards/components/VisualizationName.js

@@ -4,7 +4,9 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
 import {renameCell} from 'src/dashboards/actions/cellEditorOverlay'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class VisualizationName extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/components/template_variables/Row.js

@@ -25,6 +25,7 @@ import {errorThrown as errorThrownAction} from 'shared/actions/errors'
 import {notify as notifyAction} from 'shared/actions/notifications'
 
 import {notifyTempVarAlreadyExists} from 'shared/copy/notifications'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const compact = values => uniq(values).filter(value => /\S/.test(value))
 
@@ -124,6 +125,7 @@ const TemplateVariableRow = ({
   </form>
 )
 
+@ErrorHandling
 class RowWrapper extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/containers/DashboardPage.js

@@ -38,6 +38,7 @@ import {presentationButtonDispatcher} from 'shared/dispatchers'
 import {interval, DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants'
 import {notifyDashboardNotFound} from 'shared/copy/notifications'
 import {colorsStringSchema, colorsNumberSchema} from 'shared/schemas'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
 const FORMAT_INFLUXQL = 'influxql'
 const defaultTimeRange = {
@@ -47,6 +48,7 @@ const defaultTimeRange = {
   format: FORMAT_INFLUXQL,
 }
 
+@ErrorHandling
 class DashboardPage extends Component {
   constructor(props) {
     super(props)

ui/src/dashboards/containers/DashboardsPage.js

@@ -11,7 +11,9 @@ import {createDashboard} from 'src/dashboards/apis'
 import {getDashboardsAsync, deleteDashboardAsync} from 'src/dashboards/actions'
 
 import {NEW_DASHBOARD} from 'src/dashboards/constants'
+import {ErrorHandling} from 'src/shared/decorators/errors'
 
+@ErrorHandling
 class DashboardsPage extends Component {
   componentDidMount() {
     this.props.handleGetDashboards()