feat: add error thresholds setting for visualization panels on notebooks (#3533)

Author: asalem1

package.json

@@ -192,6 +192,7 @@
     "normalizr": "^3.4.1",
     "onigasm": "^2.2.4",
     "papaparse": "^5.2.0",
+    "qrcode.react": "^1.0.1",
     "qs": "^6.5.2",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.0.0",

src/flows/components/Sidebar.scss

@@ -1,8 +1,8 @@
 @import '@influxdata/clockface/dist/variables.scss';
 
 .flow-sidebar {
-  flex: 0 0 300px;
-  width: 300px;
+  flex: 0 0 calc(420px - $cf-space-2xs);
+  width: 420px - $cf-space-2xs;
   padding: 0 $cf-space-2xs;
 
   .sidebar--item {
@@ -42,6 +42,7 @@
 
 .flow-sidebar--submenu-wrapper {
   width: calc(100% - 16px);
+  padding-bottom: 20px;
 }
 
 .flow-sidebar--dropdownmenu {

src/flows/pipes/Notification/Threshold.tsx

@@ -19,74 +19,12 @@ import 'src/flows/pipes/Notification/Threshold.scss'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
-
-enum ThresholdFormat {
-  Value = 'value',
-  Range = 'range',
-  Deadman = 'deadman',
-}
-
-type Threshold = {
-  value: number
-  type: string
-  field: string
-  max?: number
-  min?: number
-  deadmanCheckValue?: string
-  deadmanStopValue: string
-}
-
-export const deadmanType = 'missing-for-longer-than'
-
-export const THRESHOLD_TYPES = {
-  greater: {
-    name: 'greater than',
-    format: ThresholdFormat.Value,
-    condition: data => `(r) => (r["${data.field}"] > ${data.value})`,
-  },
-  'greater-equal': {
-    name: 'greater than or equal to',
-    format: ThresholdFormat.Value,
-    condition: data => `(r) => (r["${data.field}"] >= ${data.value})`,
-  },
-  less: {
-    name: 'less than',
-    format: ThresholdFormat.Value,
-    condition: data => `(r) => (r["${data.field}"] < ${data.value})`,
-  },
-  'less-equal': {
-    name: 'less than or equal to',
-    format: ThresholdFormat.Value,
-    condition: data => `(r) => (r["${data.field}"] <= ${data.value})`,
-  },
-  equal: {
-    name: 'equal to',
-    format: ThresholdFormat.Value,
-    condition: data => `(r) => (r["${data.field}"] == ${data.value})`,
-  },
-  'not-equal': {
-    name: 'not equal to',
-    format: ThresholdFormat.Value,
-    condition: data => `(r) => (r["${data.field}"] != ${data.value})`,
-  },
-  between: {
-    name: 'between',
-    format: ThresholdFormat.Range,
-    condition: data =>
-      `(r) => (r["${data.field}"] > ${data.min} and r["${data.field}"] < ${data.max})`,
-  },
-  'not-between': {
-    name: 'not between',
-    format: ThresholdFormat.Range,
-    condition: data =>
-      `(r) => (r["${data.field}"] < ${data.min} or r["${data.field}"] > ${data.max})`,
-  },
-  [deadmanType]: {
-    name: 'missing for longer than',
-    format: ThresholdFormat.Deadman,
-    condition: _ => `(r) => (r["dead"])`,
-  },
-}
+import {
+  deadmanType,
+  Threshold,
+  ThresholdFormat,
+  THRESHOLD_TYPES,
+} from 'src/flows/pipes/Visualization/threshold'
 
 interface Props {
   readOnly?: boolean
@@ -102,7 +40,7 @@ const Threshold: FC<Props> = ({readOnly}) => {
   const thresholds = useMemo(() => data?.thresholds ?? [], [data?.thresholds])
 
   const setThresholdType = useCallback(
-    (type, index) => {
+    (type: string, index) => {
       if (!THRESHOLD_TYPES[type]) {
         return
       }

src/flows/pipes/Notification/view.tsx

@@ -34,10 +34,11 @@ import {PipeContext} from 'src/flows/context/pipe'
 import {FlowQueryContext} from 'src/flows/context/flow.query'
 import {remove} from 'src/shared/contexts/query'
 import Expressions from 'src/flows/pipes/Notification/Expressions'
-import Threshold, {
+import Threshold from 'src/flows/pipes/Notification/Threshold'
+import {
   deadmanType,
   THRESHOLD_TYPES,
-} from 'src/flows/pipes/Notification/Threshold'
+} from 'src/flows/pipes/Visualization/threshold'
 import {
   ENDPOINT_DEFINITIONS,
   ENDPOINT_ORDER,

src/flows/pipes/Visualization/Controls.tsx

@@ -13,9 +13,10 @@ import {
 } from 'src/visualization'
 import {ViewType} from 'src/types'
 import {event} from 'src/cloud/utils/reporting'
-
+import ErrorThresholds from 'src/flows/pipes/Visualization/ErrorThresholds'
 import {SidebarContext} from 'src/flows/context/sidebar'
 import {PipeContext, PipeProvider} from 'src/flows/context/pipe'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const WrappedViewOptions: FC = () => {
   const {data, update, results} = useContext(PipeContext)
@@ -33,11 +34,14 @@ const WrappedViewOptions: FC = () => {
   )
 
   return (
-    <ViewOptions
-      properties={data.properties}
-      results={results.parsed}
-      update={updateProperties}
-    />
+    <>
+      <ViewOptions
+        properties={data.properties}
+        results={results.parsed}
+        update={updateProperties}
+      />
+      {isFlagEnabled('flowErrorThresholds') && <ErrorThresholds />}
+    </>
   )
 }