feat: preventing ddl and dml statements from autosubmiting

ui/.eslintrc

@@ -182,7 +182,7 @@
         "SwitchCase": 1
       }
     ],
-    "linebreak-style": [2, "unix"],
+    "linebreak-style": 0,
     "lines-around-comment": 0,
     "max-depth": 0,
     "max-len": 0,

ui/src/dashboards/components/InfluxQLEditor.tsx

@@ -8,25 +8,32 @@ import ReactCodeMirror from 'src/dashboards/components/ReactCodeMirror'
 import TemplateDrawer from 'src/shared/components/TemplateDrawer'
 import QueryStatus from 'src/shared/components/QueryStatus'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {Dropdown, DropdownMode, ComponentStatus} from 'src/reusable_ui'
-import {Button, ComponentColor, ComponentSize} from 'src/reusable_ui'
+import {
+  Button,
+  ComponentColor,
+  ComponentSize,
+  ComponentStatus,
+  Dropdown,
+  DropdownMode,
+} from 'src/reusable_ui'
 
 // Utils
 import {getDeep} from 'src/utils/wrappers'
 import {makeCancelable} from 'src/utils/promises'
 
 // Constants
-import {MATCH_INCOMPLETE_TEMPLATES, applyMasks} from 'src/tempVars/constants'
-import {METAQUERY_TEMPLATE_OPTIONS} from 'src/data_explorer/constants'
-
-// Types
-import {Template, QueryConfig} from 'src/types'
-import {WrappedCancelablePromise} from 'src/types/promises'
+import {applyMasks, MATCH_INCOMPLETE_TEMPLATES} from 'src/tempVars/constants'
 import {
-  MetaQueryTemplateOption,
   DropdownChildTypes,
+  METAQUERY_TEMPLATE_OPTIONS,
+  MetaQueryTemplateOption,
 } from 'src/data_explorer/constants'
 
+// Types
+import {QueryConfig, Template} from 'src/types'
+import {WrappedCancelablePromise} from 'src/types/promises'
+import {isExcludedStatement} from '../../utils/queryFilter'
+
 interface TempVar {
   tempVar: string
 }
@@ -39,13 +46,14 @@ interface State {
   selectedTemplate: TempVar
   isShowingTemplateValues: boolean
   filteredTemplates: Template[]
-  isSubmitted: boolean
+  submitted: boolean
   configID: string
+  isExcluded: boolean
 }
 
 interface Props {
   query: string
-  onUpdate: (text: string) => Promise<void>
+  onUpdate: (text: string, isAutoSubmitted: boolean) => Promise<void>
   config: QueryConfig
   templates: Template[]
   onMetaQuerySelected: () => void
@@ -63,22 +71,32 @@ const TEMPLATE_VAR = /[:]\w+[:]/g
 
 class InfluxQLEditor extends Component<Props, State> {
   public static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    const {isSubmitted, editedQueryText} = prevState
-
-    const isQueryConfigChanged = nextProps.config.id !== prevState.configID
-    const isQueryTextChanged = editedQueryText.trim() !== nextProps.query.trim()
-
+    const {submitted, editedQueryText} = prevState
+    const {query, config, templates} = nextProps
+    const isQueryConfigChanged = config.id !== prevState.configID
+    const isQueryTextChanged = editedQueryText.trim() !== query.trim()
+    // if query has been switched, set submitted state for excluded query based on the previous submitted way
+    let isSubmitted: boolean
+    if (isQueryConfigChanged) {
+      isSubmitted = isExcludedStatement(query)
+        ? config.isManuallySubmitted
+        : true
+    } else {
+      isSubmitted = submitted
+    }
     if ((isSubmitted && isQueryTextChanged) || isQueryConfigChanged) {
       return {
         ...BLURRED_EDITOR_STATE,
         selectedTemplate: {
-          tempVar: getDeep<string>(nextProps.templates, FIRST_TEMP_VAR, ''),
+          tempVar: getDeep<string>(templates, FIRST_TEMP_VAR, ''),
         },
-        filteredTemplates: nextProps.templates,
-        templatingQueryText: nextProps.query,
-        editedQueryText: nextProps.query,
-        configID: nextProps.config.id,
+        filteredTemplates: templates,
+        templatingQueryText: query,
+        editedQueryText: query,
+        configID: config.id,
         focused: isQueryConfigChanged,
+        submitted: isSubmitted,
+        isExcluded: isExcludedStatement(query),
       }
     }
 
@@ -102,8 +120,9 @@ class InfluxQLEditor extends Component<Props, State> {
       filteredTemplates: props.templates,
       templatingQueryText: props.query,
       editedQueryText: props.query,
-      isSubmitted: true,
       configID: props.config.id,
+      submitted: true,
+      isExcluded: false,
     }
   }
 
@@ -125,7 +144,7 @@ class InfluxQLEditor extends Component<Props, State> {
       filteredTemplates,
       isShowingTemplateValues,
       focused,
-      isSubmitted,
+      submitted,
     } = this.state
 
     return (
@@ -161,7 +180,7 @@ class InfluxQLEditor extends Component<Props, State> {
               <QueryStatus
                 status={config.status}
                 isShowingTemplateValues={isShowingTemplateValues}
-                isSubmitted={isSubmitted}
+                isSubmitted={submitted && !config.status?.loading}
               >
                 {this.queryStatusButtons}
               </QueryStatus>
@@ -200,7 +219,7 @@ class InfluxQLEditor extends Component<Props, State> {
 
   private handleBlurEditor = (): void => {
     this.setState({focused: false, isShowingTemplateValues: false})
-    this.handleUpdate()
+    this.handleUpdate(true)
   }
 
   private handleCloseDrawer = (): void => {
@@ -245,7 +264,7 @@ class InfluxQLEditor extends Component<Props, State> {
 
     const isTemplating = matched && !_.isEmpty(templates)
     if (isTemplating) {
-      // maintain cursor poition
+      // maintain cursor position
       const matchedVar = {tempVar: `${matched[0]}:`}
       const filteredTemplates = this.filterTemplates(matched[0])
       const selectedTemplate = this.selectMatchingTemplate(
@@ -259,35 +278,41 @@ class InfluxQLEditor extends Component<Props, State> {
         selectedTemplate,
         filteredTemplates,
         editedQueryText: value,
-        isSubmitted,
+        submitted: isSubmitted,
       })
     } else {
+      const isExcluded = isExcludedStatement(value)
       this.setState({
         isTemplating,
+        isExcluded,
         templatingQueryText: value,
         editedQueryText: value,
-        isSubmitted,
+        submitted: isSubmitted,
       })
     }
   }
 
-  private handleUpdate = async (): Promise<void> => {
-    const {onUpdate} = this.props
-
-    if (!this.isDisabled && !this.state.isSubmitted) {
-      const {editedQueryText} = this.state
+  private handleUpdate = async (isAutoSubmitted?: boolean): Promise<void> => {
+    const {onUpdate, config} = this.props
+    const {editedQueryText, submitted, isExcluded} = this.state
+    if (
+      !this.isDisabled &&
+      (!submitted || (!config.isManuallySubmitted && isExcluded))
+    ) {
       this.cancelPendingUpdates()
-      const update = onUpdate(editedQueryText)
+      const update = onUpdate(editedQueryText, isAutoSubmitted)
       const cancelableUpdate = makeCancelable(update)
 
       this.pendingUpdates = [...this.pendingUpdates, cancelableUpdate]
 
       try {
         await cancelableUpdate.promise
-
         // prevent changing submitted status when edited while awaiting update
-        if (this.state.editedQueryText === editedQueryText) {
-          this.setState({isSubmitted: true})
+        if (
+          this.state.editedQueryText === editedQueryText &&
+          (!isExcluded || (!isAutoSubmitted && isExcluded))
+        ) {
+          this.setState({submitted: true})
         }
       } catch (error) {
         if (!error.isCanceled) {
@@ -443,7 +468,7 @@ class InfluxQLEditor extends Component<Props, State> {
           size={ComponentSize.ExtraSmall}
           color={ComponentColor.Primary}
           status={this.isDisabled && ComponentStatus.Disabled}
-          onClick={this.handleUpdate}
+          onClick={() => this.handleUpdate()}
           text="Submit Query"
         />
       </div>

ui/src/dashboards/utils/cellGetters.ts

@@ -189,6 +189,7 @@ export const getConfig = async (
     // return back the raw query
     queryConfig.rawText = query
   }
+
   return {
     ...queryConfig,
     originalQuery: query,

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

@@ -50,7 +50,7 @@ interface PassedProps {
   templates: Template[]
   onAddQuery: () => void
   onDeleteQuery: (index: number) => void
-  onEditRawText: (text: string) => Promise<void>
+  onEditRawText: (text: string, isAutoSubmitted: boolean) => Promise<void>
   onMetaQuerySelected: () => void
 }
 

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

@@ -420,7 +420,10 @@ class TimeMachine extends PureComponent<Props, State> {
     return getDeep(queryDrafts, '0.source', '') === ''
   }
 
-  private handleEditRawText = async (text: string): Promise<void> => {
+  private handleEditRawText = async (
+    text: string,
+    isAutoSubmitted: boolean
+  ): Promise<void> => {
     const {templates, onUpdateQueryDrafts, queryDrafts, notify} = this.props
     const activeID = this.activeQuery.id
     const url: string = _.get(this.source, 'links.queries', '')
@@ -445,12 +448,14 @@ class TimeMachine extends PureComponent<Props, State> {
         query: text,
         queryConfig: {
           ...newQueryConfig,
+          isManuallySubmitted: !isAutoSubmitted,
           rawText: text,
           status: {loading: true},
         },
       }
     })
-
+    // Update global query status to loading, skipped query will remain in this state
+    this.handleEditQueryStatus(activeID, {loading: true})
     onUpdateQueryDrafts(updatedQueryDrafts)
   }
 

ui/src/shared/utils/TimeMachineContainer.ts

@@ -27,6 +27,7 @@ import {
   setLocalStorage,
   TMLocalStorageKey,
 } from 'src/shared/utils/timeMachine'
+import {isExcludedStatement} from '../../utils/queryFilter'
 
 // Constants
 import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants'
@@ -147,7 +148,7 @@ export class TimeMachineContainer {
       state = {...state, queryDrafts}
     }
 
-    // prevents "DROP" or "DELETE" queries from being persisted.
+    // prevents DDL and DML statements from being persisted.
     const savable = getDeep<CellQuery[]>(state, 'queryDrafts', []).filter(
       ({query, type}) => {
         if (type !== 'influxql') {
@@ -161,8 +162,8 @@ export class TimeMachineContainer {
         const queries = query.split(';')
         let isSavable = true
         for (let i = 0; i <= queries.length; i++) {
-          const qs = getDeep<string>(queries, `${i}`, '').toLocaleLowerCase()
-          if (qs.startsWith('drop') || qs.startsWith('delete')) {
+          const qs = getDeep<string>(queries, `${i}`, '')
+          if (isExcludedStatement(qs)) {
             isSavable = false
           }
         }

ui/src/types/queries.ts

@@ -26,6 +26,7 @@ export interface QueryConfig {
   lower?: string
   upper?: string
   isQuerySupportedByExplorer?: boolean // doesn't come from server -- is set in CellEditorOverlay
+  isManuallySubmitted?: boolean // doesn't come from server -- is set in InfluxQLEditor
   originalQuery?: string
 }
 

ui/src/utils/buildQueriesForGraphs.ts

@@ -3,6 +3,7 @@ import {buildQuery} from 'src/utils/influxql'
 import {TYPE_QUERY_CONFIG, TYPE_SHIFTED} from 'src/dashboards/constants'
 
 import {Query, QueryConfig, TimeRange, QueryType} from 'src/types'
+import {isExcludedStatement} from './queryFilter'
 
 interface Statement {
   queryConfig: QueryConfig
@@ -15,28 +16,33 @@ const buildQueries = (queryConfigs: QueryConfig[], tR: TimeRange): Query[] => {
     return []
   }
 
-  const statements: Statement[] = queryConfigs.map((query: QueryConfig) => {
-    const {rawText, range, id, shifts, database, measurement, fields} = query
-    const timeRange: TimeRange = range || tR
-    const text: string =
-      rawText || buildQuery(TYPE_QUERY_CONFIG, timeRange, query)
-    const isParsable: boolean =
-      !_.isEmpty(database) && !_.isEmpty(measurement) && fields.length > 0
-
-    if (shifts && shifts.length && isParsable) {
-      const shiftedQueries: string[] = shifts
-        .filter(s => s.unit)
-        .map(s => buildQuery(TYPE_SHIFTED, timeRange, query, s))
-
-      return {
-        text: `${text};${shiftedQueries.join(';')}`,
-        id,
-        queryConfig: query,
+  const statements: Statement[] = queryConfigs
+    .filter(
+      (query: QueryConfig) =>
+        !isExcludedStatement(query.rawText) || query.isManuallySubmitted
+    )
+    .map((query: QueryConfig) => {
+      const {rawText, range, id, shifts, database, measurement, fields} = query
+      const timeRange: TimeRange = range || tR
+      const text: string =
+        rawText || buildQuery(TYPE_QUERY_CONFIG, timeRange, query)
+      const isParsable: boolean =
+        !_.isEmpty(database) && !_.isEmpty(measurement) && fields.length > 0
+
+      if (shifts && shifts.length && isParsable) {
+        const shiftedQueries: string[] = shifts
+          .filter(s => s.unit)
+          .map(s => buildQuery(TYPE_SHIFTED, timeRange, query, s))
+
+        return {
+          text: `${text};${shiftedQueries.join(';')}`,
+          id,
+          queryConfig: query,
+        }
       }
-    }
 
-    return {text, id, queryConfig: query}
-  })
+      return {text, id, queryConfig: query}
+    })
 
   const queries: Query[] = statements
     .filter(s => s.text !== null)

ui/src/utils/queryFilter.ts

@@ -0,0 +1,15 @@
+const excludedStatements: string[] = [
+  'drop',
+  'delete',
+  'alter',
+  'create',
+  'grant',
+  'revoke',
+  'use',
+]
+
+export const isExcludedStatement = (query: string): boolean => {
+  return excludedStatements.some(statement =>
+    query?.toLowerCase().startsWith(statement)
+  )
+}

ui/src/worker/jobs/proxy.ts

@@ -11,7 +11,6 @@ const proxy = async (msg: ProxyMsg): Promise<{data: any}> => {
   const {
     payload: {url, query, rp, db, uuid},
   } = msg
-
   const body = {url, query, rp, db, uuid}
   try {
     const response = await fetch(url, {