Visualize check view with check plot (#14599)

* Use CheckPlot to visualize check view

* Revert to add threshold types

* Disable view type dropdown in checkView

* Add proper equality

* Add errors in default cases

http/swagger.yml

@@ -8938,6 +8938,11 @@ components:
               type: array
               items:
                 $ref: "#/components/schemas/Threshold"
+    Threshold:
+      oneOf:
+        - $ref: "#/components/schemas/GreaterThreshold"
+        - $ref: "#/components/schemas/LesserThreshold"
+        - $ref: "#/components/schemas/RangeThreshold"
     DeadmanCheck:
       allOf:
         - $ref: "#/components/schemas/CheckBase"
@@ -8954,19 +8959,54 @@ components:
               type: boolean
             level:
               $ref: "#/components/schemas/CheckStatusLevel"
-    Threshold:
+    ThresholdBase:
       properties:
         level:
          $ref: "#/components/schemas/CheckStatusLevel"
         allValues:
           description: if true, only alert if all values meet threshold
           type: boolean
-        lowerBound:
+    GreaterThreshold:
-          type: number
+      allOf:
-          format: float
+        - $ref: "#/components/schemas/ThresholdBase"
-        upperBound:
+        - type: object
-          type: number
+          required: [type, value]
-          format: float
+          properties:
+            type:
+              type: string
+              enum: [greater]
+            value:
+              type: number
+              format: float
+    LesserThreshold:
+      allOf:
+        - $ref: "#/components/schemas/ThresholdBase"
+        - type: object
+          required: [type, value]
+          properties:
+            type:
+              type: string
+              enum: [lesser]
+            value:
+              type: number
+              format: float
+    RangeThreshold:
+      allOf:
+        - $ref: "#/components/schemas/ThresholdBase"
+        - type: object
+          required: [type, min, max, within]
+          properties:
+            type:
+              type: string
+              enum: [range]
+            min:
+              type: number
+              format: float
+            max:
+              type: number
+              format: float
+            within:
+              type: boolean
     CheckStatusLevel:
       description: the state to record if check matches a criteria
       type: string

ui/src/alerting/constants/index.ts

@@ -23,7 +23,10 @@ export const DEFAULT_THRESHOLD_CHECK: Partial<ThresholdCheck> = {
   name: DEFAULT_CHECK_NAME,
   type: 'threshold',
   status: 'active',
-  thresholds: [],
+  thresholds: [
+    {type: 'greater', value: 40, level: 'INFO'},
+    {type: 'lesser', value: 20, level: 'OK'},
+  ],
   every: DEFAULT_CHECK_EVERY,
   offset: DEFAULT_CHECK_OFFSET,
 }
@@ -59,9 +62,9 @@ export const check1: Check = {
   statusMessageTemplate: 'this is a great message template',
   thresholds: [
     {
-      level: 'UNKNOWN',
+      level: 'CRIT',
-      lowerBound: 20,
+      type: 'lesser',
-      allValues: false,
+      value: 10,
     },
   ],
 }
@@ -81,9 +84,9 @@ export const check2: Check = {
   statusMessageTemplate: 'this is a great message template',
   thresholds: [
     {
-      level: 'UNKNOWN',
+      level: 'INFO',
-      lowerBound: 20,
+      type: 'greater',
-      allValues: false,
+      value: 10,
     },
   ],
 }

ui/src/shared/components/CheckPlot.tsx

@@ -1,5 +1,6 @@
 // Libraries
-import React, {useState, FunctionComponent} from 'react'
+import React, {FunctionComponent} from 'react'
+import {connect} from 'react-redux'
 import {Config, Table} from '@influxdata/giraffe'
 import {flatMap} from 'lodash'
 
@@ -21,21 +22,25 @@ import {
   RemoteDataState,
   CheckViewProperties,
   TimeZone,
+  AppState,
+  Check,
   Threshold,
 } from 'src/types'
+import {updateCurrentCheck} from 'src/alerting/actions/checks'
 
 const X_COLUMN = '_time'
 const Y_COLUMN = '_value'
 
-const THRESHOLDS: Threshold[] = [
+interface DispatchProps {
-  {
+  updateCurrentCheck: typeof updateCurrentCheck
-    level: 'UNKNOWN',
+}
-    lowerBound: 20,
-    allValues: false,
-  },
-]
 
-interface Props {
+interface StateProps {
+  check: Partial<Check>
+  thresholds: Threshold[]
+}
+
+interface OwnProps {
   table: Table
   fluxGroupKeyUnion: string[]
   loading: RemoteDataState
@@ -44,14 +49,20 @@ interface Props {
   children: (config: Config) => JSX.Element
 }
 
+type Props = OwnProps & DispatchProps & StateProps
+
 const CheckPlot: FunctionComponent<Props> = ({
+  updateCurrentCheck,
   table,
+  thresholds,
   fluxGroupKeyUnion,
   loading,
   children,
   timeZone,
 }) => {
-  const [thresholds, setThresholds] = useState(THRESHOLDS)
+  const updateCheckThresholds = (thresholds: Threshold[]) => {
+    updateCurrentCheck({thresholds})
+  }
 
   const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
     [0, 100],
@@ -115,7 +126,7 @@ const CheckPlot: FunctionComponent<Props> = ({
           <ThresholdMarkers
             key="custom"
             thresholds={thresholds}
-            onSetThresholds={setThresholds}
+            onSetThresholds={updateCheckThresholds}
             yScale={yScale}
             yDomain={yDomain}
           />
@@ -132,4 +143,26 @@ const CheckPlot: FunctionComponent<Props> = ({
   )
 }
 
-export default CheckPlot
+const mstp = (state: AppState): StateProps => {
+  const {
+    checks: {
+      current: {check},
+    },
+  } = state
+
+  let thresholds = []
+  if (check.type === 'threshold') {
+    thresholds = check.thresholds
+  }
+
+  return {check, thresholds}
+}
+
+const mdtp: DispatchProps = {
+  updateCurrentCheck: updateCurrentCheck,
+}
+
+export default connect<StateProps, DispatchProps, {}>(
+  mstp,
+  mdtp
+)(CheckPlot)

ui/src/shared/components/GreaterThresholdMarker.tsx

@@ -11,29 +11,29 @@ import {isInDomain, clamp} from 'src/shared/utils/vis'
 import {DragEvent} from 'src/shared/utils/useDragBehavior'
 
 // Types
-import {Threshold} from 'src/types'
+import {GreaterThreshold} from 'src/types'
 
 interface Props {
   yScale: Scale<number, number>
   yDomain: number[]
-  threshold: Threshold
+  threshold: GreaterThreshold
   onChangePos: (e: DragEvent) => void
 }
 
 const GreaterThresholdMarker: FunctionComponent<Props> = ({
   yDomain,
   yScale,
-  threshold: {level, lowerBound},
+  threshold: {level, value},
   onChangePos,
 }) => {
-  const y = yScale(clamp(lowerBound, yDomain))
+  const y = yScale(clamp(value, yDomain))
 
   return (
     <>
-      {isInDomain(lowerBound, yDomain) && (
+      {isInDomain(value, yDomain) && (
         <ThresholdMarker level={level} y={y} onDrag={onChangePos} />
       )}
-      {lowerBound <= yDomain[1] && (
+      {value <= yDomain[1] && (
         <ThresholdMarkerArea
           level={level}
           top={yScale(yDomain[1])}

ui/src/shared/components/LessThresholdMarker.tsx

@@ -11,29 +11,29 @@ import {clamp, isInDomain} from 'src/shared/utils/vis'
 import {DragEvent} from 'src/shared/utils/useDragBehavior'
 
 // Types
-import {Threshold} from 'src/types'
+import {LesserThreshold} from 'src/types'
 
 interface Props {
   yScale: Scale<number, number>
   yDomain: number[]
-  threshold: Threshold
+  threshold: LesserThreshold
   onChangePos: (e: DragEvent) => void
 }
 
 const LessThresholdMarker: FunctionComponent<Props> = ({
   yScale,
   yDomain,
-  threshold: {level, upperBound},
+  threshold: {level, value},
   onChangePos,
 }) => {
-  const y = yScale(clamp(upperBound, yDomain))
+  const y = yScale(clamp(value, yDomain))
 
   return (
     <>
-      {isInDomain(upperBound, yDomain) && (
+      {isInDomain(value, yDomain) && (
         <ThresholdMarker level={level} y={y} onDrag={onChangePos} />
       )}
-      {upperBound >= yDomain[0] && (
+      {value >= yDomain[0] && (
         <ThresholdMarkerArea
           level={level}
           top={y}

ui/src/shared/components/RangeThresholdMarkers.tsx

@@ -11,12 +11,12 @@ import {isInDomain, clamp} from 'src/shared/utils/vis'
 import {DragEvent} from 'src/shared/utils/useDragBehavior'
 
 // Types
-import {Threshold} from 'src/types'
+import {RangeThreshold} from 'src/types'
 
 interface Props {
   yScale: Scale<number, number>
   yDomain: number[]
-  threshold: Threshold
+  threshold: RangeThreshold
   onChangeMaxPos: (e: DragEvent) => void
   onChangeMinPos: (e: DragEvent) => void
 }
@@ -24,33 +24,33 @@ interface Props {
 const RangeThresholdMarkers: FunctionComponent<Props> = ({
   yScale,
   yDomain,
-  threshold: {level, lowerBound, upperBound},
+  threshold: {level, within, min, max},
   onChangeMinPos,
   onChangeMaxPos,
 }) => {
-  const minY = yScale(clamp(lowerBound, yDomain))
+  const minY = yScale(clamp(min, yDomain))
-  const maxY = yScale(clamp(upperBound, yDomain))
+  const maxY = yScale(clamp(max, yDomain))
 
   return (
     <>
-      {isInDomain(lowerBound, yDomain) && (
+      {isInDomain(min, yDomain) && (
         <ThresholdMarker level={level} y={minY} onDrag={onChangeMinPos} />
       )}
-      {isInDomain(upperBound, yDomain) && (
+      {isInDomain(max, yDomain) && (
         <ThresholdMarker level={level} y={maxY} onDrag={onChangeMaxPos} />
       )}
-      {lowerBound > upperBound ? (
+      {within ? (
         <ThresholdMarkerArea level={level} top={maxY} height={minY - maxY} />
       ) : (
         <>
-          {upperBound <= yDomain[1] && (
+          {max <= yDomain[1] && (
             <ThresholdMarkerArea
               level={level}
               top={yScale(yDomain[1])}
               height={maxY - yScale(yDomain[1])}
             />
           )}
-          {lowerBound >= yDomain[0] && (
+          {min >= yDomain[0] && (
             <ThresholdMarkerArea
               level={level}
               top={minY}

ui/src/shared/components/ThresholdMarkers.tsx

@@ -36,6 +36,18 @@ const ThresholdMarkers: FunctionComponent<Props> = ({
       [field]: yValue,
     }
 
+    if (
+      nextThreshold.type === 'range' &&
+      nextThreshold.min > nextThreshold.max
+    ) {
+      // If the user drags the min past the max or vice versa, we swap the
+      // values that are set so that the min is always at most the max
+      const maxValue = nextThreshold.min
+
+      nextThreshold.min = nextThreshold.max
+      nextThreshold.max = maxValue
+    }
+
     const nextThresholds = thresholds.map((t, i) =>
       i === index ? nextThreshold : t
     )
@@ -50,41 +62,40 @@ const ThresholdMarkers: FunctionComponent<Props> = ({
         const onChangeMaxPos = ({y}) => handleDrag(index, 'maxValue', y)
         const onChangeMinPos = ({y}) => handleDrag(index, 'minValue', y)
 
-        if (threshold.lowerBound && threshold.upperBound) {
+        switch (threshold.type) {
-          return (
+          case 'greater':
-            <RangeThresholdMarkers
+            return (
-              key={index}
+              <GreaterThresholdMarker
-              yScale={yScale}
+                key={index}
-              yDomain={yDomain}
+                yScale={yScale}
-              threshold={threshold}
+                yDomain={yDomain}
-              onChangeMinPos={onChangeMinPos}
+                threshold={threshold}
-              onChangeMaxPos={onChangeMaxPos}
+                onChangePos={onChangePos}
-            />
+              />
-          )
+            )
-        }
+          case 'lesser':
-
+            return (
-        if (threshold.lowerBound) {
+              <LessThresholdMarker
-          return (
+                key={index}
-            <GreaterThresholdMarker
+                yScale={yScale}
-              key={index}
+                yDomain={yDomain}
-              yScale={yScale}
+                threshold={threshold}
-              yDomain={yDomain}
+                onChangePos={onChangePos}
-              threshold={threshold}
+              />
-              onChangePos={onChangePos}
+            )
-            />
+          case 'range':
-          )
+            return (
-        }
+              <RangeThresholdMarkers
-
+                key={index}
-        if (threshold.upperBound) {
+                yScale={yScale}
-          return (
+                yDomain={yDomain}
-            <LessThresholdMarker
+                threshold={threshold}
-              key={index}
+                onChangeMinPos={onChangeMinPos}
-              yScale={yScale}
+                onChangeMaxPos={onChangeMaxPos}
-              yDomain={yDomain}
+              />
-              threshold={threshold}
+            )
-              onChangePos={onChangePos}
+          default:
-            />
+            throw new Error('Unknown threshold type in <ThresholdMarkers /> ')
-          )
         }
       })}
     </div>

ui/src/shared/components/ViewSwitcher.tsx

@@ -12,6 +12,7 @@ import FluxTablesTransform from 'src/shared/components/FluxTablesTransform'
 import XYPlot from 'src/shared/components/XYPlot'
 import ScatterPlot from 'src/shared/components/ScatterPlot'
 import LatestValueTransform from 'src/shared/components/LatestValueTransform'
+import CheckPlot from 'src/shared/components/CheckPlot'
 
 // Types
 import {
@@ -155,8 +156,21 @@ const ViewSwitcher: FunctionComponent<Props> = ({
         </ScatterPlot>
       )
 
+    case 'check':
+      return (
+        <CheckPlot
+          table={table}
+          fluxGroupKeyUnion={fluxGroupKeyUnion}
+          loading={loading}
+          timeZone={timeZone}
+          viewProperties={properties}
+        >
+          {config => <Plot config={config} />}
+        </CheckPlot>
+      )
+
     default:
-      return <div />
+      throw new Error('Unknown view type in <ViewSwitcher /> ')
   }
 }
 

ui/src/timeMachine/components/view_options/ViewTypeDropdown.tsx

@@ -16,6 +16,7 @@ import {VIS_GRAPHICS} from 'src/timeMachine/constants/visGraphics'
 
 // Types
 import {View, NewView, AppState, ViewType} from 'src/types'
+import {ComponentStatus} from 'src/clockface'
 
 interface DispatchProps {
   onUpdateType: typeof setType
@@ -34,7 +35,11 @@ class ViewTypeDropdown extends PureComponent<Props> {
         widthPixels={215}
         className="view-type-dropdown"
         button={(active, onClick) => (
-          <Dropdown.Button active={active} onClick={onClick}>
+          <Dropdown.Button
+            active={active}
+            onClick={onClick}
+            status={this.dropdownStatus}
+          >
             {this.getVewTypeGraphic(this.selectedView)}
           </Dropdown.Button>
         )}
@@ -67,6 +72,15 @@ class ViewTypeDropdown extends PureComponent<Props> {
     ))
   }
 
+  private get dropdownStatus(): ComponentStatus {
+    const {view} = this.props
+
+    if (view.properties.type === 'check') {
+      return ComponentStatus.Disabled
+    }
+    return ComponentStatus.Valid
+  }
+
   private get selectedView(): ViewType {
     const {view} = this.props
 

ui/src/types/alerting.ts

@@ -37,6 +37,9 @@ export {
   LevelRule,
   TagRule,
   CheckStatusLevel,
+  GreaterThreshold,
+  LesserThreshold,
+  RangeThreshold,
   ThresholdCheck,
   DeadmanCheck,
   NotificationEndpoint,