fix(flux-4720): temporary fix to hardcode top20 examples, plus add cursor awarenss in function injection (#4595)

* hardcode top 20 functions used, and move all special-cased function handling to the same file
* have timeMachine flux editor use the common position calculations
* enable LSP suggestions when inserting functions, (based on cursor awareness)
* leave in extra space if have suggested args, if not then remove extra space

Author: wiedld

cypress/e2e/shared/explorerVisualizations.test.ts

@@ -89,6 +89,7 @@ describe('visualizations', () => {
           cy.log('check to see if new aggregate rate is at the bottom')
           cy.get('.view-line')
             .last()
+            .prev()
             .contains('aggregate.')
           cy.getByTestID('flux-editor').should('exist')
           cy.getByTestID('flux-editor').monacoType(`yoyoyoyoyo`)

src/flows/context/editor.tsx

@@ -7,38 +7,32 @@ import React, {
 } from 'react'
 import {EditorType} from 'src/types'
 import {PipeContext} from 'src/flows/context/pipe'
-
-export enum InjectionType {
-  OnOwnLine = 'onOwnLine',
-  SameLine = 'sameLine',
-}
-
-interface InjectionPosition {
-  row: number
-  column: number
-  shouldStartWithNewLine: boolean
-  shouldEndInNewLine: boolean
-}
+import {
+  InjectionType,
+  calcInjectionPosition,
+  moveCursorAndTriggerSuggest,
+} from 'src/shared/utils/fluxFunctions'
+export {InjectionType, InjectionPosition} from 'src/shared/utils/fluxFunctions'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 export interface InjectionOptions {
   header?: string | null
   text: string
   type: InjectionType
+  triggerSuggest?: boolean
 }
 
 export interface EditorContextType {
   editor: EditorType | null
   setEditor: (editor: EditorType) => void
   inject: (options: InjectionOptions) => void
-  calcInjectiontPosition: (type: InjectionType) => Partial<InjectionPosition>
   updateText: (t: string) => void
 }
 
 const DEFAULT_CONTEXT: EditorContextType = {
   editor: null,
   setEditor: _ => {},
   inject: _ => {},
-  calcInjectiontPosition: _ => ({}),
   updateText: _ => {},
 }
 
@@ -62,88 +56,25 @@ export const EditorProvider: FC = ({children}) => {
     [queries, activeQuery]
   )
 
-  const calcInjectiontPosition = useCallback(
-    (type: InjectionType): Partial<InjectionPosition> => {
-      if (!editor) {
-        return {}
-      }
-      const {lineNumber, column: col} = editor.getPosition()
-      let row = lineNumber
-      let column = col
-
-      const queryText = editor.getModel().getValue()
-      const split = queryText.split('\n')
-      const getCurrentLineText = () => {
-        // row is not zero indexed in monaco editor. 1..N
-        return (split[row - 1] || split[split.length - 1]).trimEnd()
-      }
-
-      let currentLineText = getCurrentLineText()
-      // column is not zero indexed in monnao editor. 1..N
-      let textAheadOfCursor = currentLineText.slice(0, column - 1).trim()
-      let textBehindCursor = currentLineText.slice(column - 1).trim()
-
-      // if cursor has text in front of it, and should be onOwnRow
-      if (type == InjectionType.OnOwnLine && textAheadOfCursor) {
-        row++
-        column = 1
-      }
-      // edge case for when user toggles to the script editor
-      // this defaults the cursor to the initial position (top-left, 1:1 position)
-      const [currentRange] = editor.getVisibleRanges()
-      if (row === 1 && column === 1) {
-        row = currentRange.endLineNumber + 1
-      }
-
-      if (row !== lineNumber) {
-        currentLineText = getCurrentLineText()
-        textAheadOfCursor = currentLineText.slice(0, column - 1).trim()
-        textBehindCursor = currentLineText.slice(column - 1).trim()
-      }
-
-      let shouldEndInNewLine = false
-      // if cursor has text behind it, and should be onOwnRow
-      if (type == InjectionType.OnOwnLine && textBehindCursor) {
-        shouldEndInNewLine = true
-      }
-
-      const cursorInMiddleOfText = textAheadOfCursor && textBehindCursor
-      if (type == InjectionType.OnOwnLine && cursorInMiddleOfText) {
-        row++
-        column = 1
-        shouldEndInNewLine = true
-      }
-
-      // if we asked to insert on a row out-of-range
-      // then need to manually append newline to front of row
-      const shouldStartWithNewLine = row > currentRange.endLineNumber
-
-      return {row, column, shouldStartWithNewLine, shouldEndInNewLine}
-    },
-    [editor]
-  )
-
   const inject = useCallback(
     (options: InjectionOptions) => {
       if (!editor) {
         return {}
       }
 
-      const {header, text: initT, type} = options
+      const {header, text: initT, type, triggerSuggest} = options
+      const injectionPosition = calcInjectionPosition(editor, type)
       const {
         row,
         column: initC,
         shouldStartWithNewLine,
         shouldEndInNewLine,
-      } = calcInjectiontPosition(type)
-      let text = ''
+      } = injectionPosition
 
+      let text = initT.trimRight()
       if (shouldStartWithNewLine) {
-        text = `\n${initT}`
-      } else {
-        text = initT
+        text = `\n${text}`
       }
-
       if (shouldEndInNewLine) {
         text = `${text}\n`
       }
@@ -157,13 +88,13 @@ export const EditorProvider: FC = ({children}) => {
         },
       ]
 
-      if (
+      const addHeader =
         header &&
         !editor
           .getModel()
           .getValue()
           .includes(header)
-      ) {
+      if (addHeader) {
         edits.unshift({
           range: new monaco.Range(1, 1, 1, 1),
           text: `${header}\n`,
@@ -172,8 +103,17 @@ export const EditorProvider: FC = ({children}) => {
 
       editor.executeEdits('', edits)
       updateText(editor.getValue())
+
+      if (isFlagEnabled('fluxDynamicDocs') && triggerSuggest) {
+        moveCursorAndTriggerSuggest(
+          editor,
+          injectionPosition,
+          addHeader,
+          text.length
+        )
+      }
     },
-    [editor, calcInjectiontPosition, updateText]
+    [editor, updateText]
   )
 
   return (
@@ -182,7 +122,6 @@ export const EditorProvider: FC = ({children}) => {
         editor,
         setEditor,
         inject,
-        calcInjectiontPosition,
         updateText,
       }}
     >

src/flows/pipes/RawFluxEditor/view.tsx

@@ -38,6 +38,10 @@ import DynamicFunctions from 'src/flows/pipes/RawFluxEditor/FunctionsList/Dynami
 import 'src/flows/pipes/RawFluxEditor/style.scss'
 
 // Utils
+import {
+  isPipeTransformation,
+  functionRequiresNewLine,
+} from 'src/shared/utils/fluxFunctions'
 import {event} from 'src/cloud/utils/reporting'
 import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -75,19 +79,9 @@ const Query: FC<PipeProp> = ({Context}) => {
 
   const injectIntoEditor = useCallback(
     (fn): void => {
-      let text = ''
-      if (CLOUD && isFlagEnabled('fluxDynamicDocs')) {
-        // only fluxTypes with <- sign require a pipe forward sign
-        text = fn.fluxType.startsWith('<-', 1)
-          ? `  |> ${fn.example}`
-          : `${fn.example}`
-      } else {
-        if (fn.name === 'from' || fn.name === 'union') {
-          text = `${fn.example}`
-        } else {
-          text = `  |> ${fn.example}`
-        }
-      }
+      const text = isPipeTransformation(fn)
+        ? `  |> ${fn.example}`
+        : `${fn.example}`
 
       const getHeader = fn => {
         let importStatement = null
@@ -106,10 +100,16 @@ const Query: FC<PipeProp> = ({Context}) => {
         return importStatement
       }
 
+      const type =
+        isPipeTransformation(fn) || functionRequiresNewLine(fn)
+          ? InjectionType.OnOwnLine
+          : InjectionType.SameLine
+
       const options = {
         text,
-        type: InjectionType.OnOwnLine,
+        type,
         header: getHeader(fn),
+        triggerSuggest: true,
       }
       inject(options)
     },

src/shared/utils/fluxExample.test.ts

@@ -62,7 +62,7 @@ describe('Flux example functions and values', () => {
     }
 
     expect(getFluxExample(exampleFunc).example).toEqual(
-      `${exampleFunc.package}.${exampleFunc.name}(  )`
+      `${exampleFunc.package}.${exampleFunc.name}()`
     )
   })
 

src/shared/utils/fluxExample.ts

@@ -1,9 +1,46 @@
 import {FluxFunction} from 'src/types/shared'
 
+// temporary solution, for the top 20 functions
+// longterm solution requires changes in the payload from the backend (flux docs)
+const TOP_20 = {
+  'universe.filter': 'filter(fn: (r) => r._measurement == "cpu")',
+  'universe.range': 'range(start: -15m, stop: now())',
+  'universe.sort': 'sort(columns: ["_value"], desc: false)',
+  'universe.keep': 'keep(columns: ["col1", "col2"])',
+  'universe.yield': 'yield(name: "custom-name")',
+  'universe.map': 'map(fn: (r) => ({ r with _value: r._value * r._value }))',
+  'universe.pivot':
+    'pivot(rowKey:["_time"], columnKey: ["_field"], valueColumn: "_value")',
+  'universe.last': 'last()',
+  'universe.fill': 'fill(column: "_value", usePrevious: true)',
+  'universe.time': 'time(v: r._value)',
+  'universe.union': 'union(tables: [table1, table2])',
+  'universe.int': 'int(v: r._value)',
+  'events.duration': `events.duration(
+    unit: 1ns,
+    columnName: "duration",
+    timeColumn: "_time",
+    stopColumn: "_stop",
+    stop: 2020-01-01T00:00:00Z
+)`,
+  'universe.group': 'group(columns: ["host", "_measurement"], mode:"by")',
+  'universe.aggregateWindow':
+    'aggregateWindow(every: v.windowPeriod, fn: mean)',
+  'universe.limit': 'limit(n:10, offset: 0)',
+  'universe.now': 'now()',
+  'universe.distinct': 'distinct(column: "host")',
+  'universe.sum': 'sum(column: "_value")',
+}
+
 export const getFluxExample = (func: FluxFunction) => {
   const {fluxParameters = [], kind, name, package: packageName} = func
 
   let example = `${packageName}.${name}`
+
+  if (!!TOP_20[example]) {
+    return {...func, example: TOP_20[example]}
+  }
+
   if (kind.toLowerCase() === 'function') {
     let injectedParameters = ''
     for (const parameter of fluxParameters) {
@@ -17,6 +54,9 @@ export const getFluxExample = (func: FluxFunction) => {
         injectedParameters = `${injectedParameters} `
       }
     }
+    injectedParameters = injectedParameters.trim().length
+      ? injectedParameters.trimLeft()
+      : injectedParameters.trim()
     example =
       packageName === 'universe'
         ? `${name}(${injectedParameters})`