wip: preventing ddl and dml statements from autosubmiting

ui/src/dashboards/components/InfluxQLEditor.tsx

@@ -26,6 +26,7 @@ import {
   MetaQueryTemplateOption,
   DropdownChildTypes,
 } from 'src/data_explorer/constants'
+import {isExcludedStatement} from '../../utils/queryFilter'
 
 interface TempVar {
   tempVar: string
@@ -45,7 +46,7 @@ interface State {
 
 interface Props {
   query: string
-  onUpdate: (text: string) => Promise<void>
+  onUpdate: (text: string, isAutoSubmitted: boolean) => Promise<void>
   config: QueryConfig
   templates: Template[]
   onMetaQuerySelected: () => void
@@ -105,6 +106,7 @@ class InfluxQLEditor extends Component<Props, State> {
       isSubmitted: true,
       configID: props.config.id,
     }
+    console.log('Constructor: isSubmitted', this.state.isSubmitted)
   }
 
   public componentWillUnmount() {
@@ -199,8 +201,9 @@ class InfluxQLEditor extends Component<Props, State> {
   }
 
   private handleBlurEditor = (): void => {
+    console.log('handleBlurEditor')
     this.setState({focused: false, isShowingTemplateValues: false})
-    this.handleUpdate()
+    this.handleUpdate(true)
   }
 
   private handleCloseDrawer = (): void => {
@@ -234,6 +237,7 @@ class InfluxQLEditor extends Component<Props, State> {
     const {templates, query} = this.props
     const isEditedChanged = value !== this.state.editedQueryText
     const isSubmitted = value.trim() === query.trim()
+    console.log('handleChange: isSubmitted', isSubmitted)
 
     if (!isEditedChanged || this.state.isShowingTemplateValues) {
       return
@@ -271,23 +275,23 @@ class InfluxQLEditor extends Component<Props, State> {
     }
   }
 
-  private handleUpdate = async (): Promise<void> => {
+  private handleUpdate = async (isAutoSubmitted?: boolean): Promise<void> => {
     const {onUpdate} = this.props
 
     if (!this.isDisabled && !this.state.isSubmitted) {
       const {editedQueryText} = this.state
       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) {
+        if (this.state.editedQueryText === editedQueryText && (!isAutoSubmitted || !isExcludedStatement(editedQueryText))) {
           this.setState({isSubmitted: true})
+          console.log('handleUpdate: set isSubmitted true')
         }
       } catch (error) {
         if (!error.isCanceled) {
@@ -443,7 +447,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/shared/apis/query.ts

@@ -4,17 +4,18 @@ import {TEMP_VAR_INTERVAL, DEFAULT_DURATION_MS} from 'src/shared/constants'
 import replaceTemplates, {replaceInterval} from 'src/tempVars/utils/replace'
 import {proxy} from 'src/utils/queryUrlGenerator'
 
-import {Source, Template} from 'src/types'
+import {Query, Source, Template} from 'src/types'
 import {TimeSeriesResponse} from 'src/types/series'
+import {isExcludedStatement} from '../../utils/queryFilter'
 
 // REVIEW: why is this different than the `Query` in src/types?
-interface Query {
-  text: string
-  id: string
-  database?: string
-  db?: string
-  rp?: string
-}
+// interface Query {
+//   text: string
+//   id: string
+//   database?: string
+//   db?: string
+//   rp?: string
+// }
 
 interface QueryResult {
   value: TimeSeriesResponse | null
@@ -33,6 +34,10 @@ export function executeQueries(
     let counter = queries.length
 
     for (let i = 0; i < queries.length; i++) {
+      if(isExcludedStatement(queries[i].text) && !queries[i].queryConfig.isSubmitted) {
+        counter -= 1
+        continue
+      }
       executeQuery(source, queries[i], templates, uuid)
         .then(result => (results[i] = {value: result, error: null}))
         .catch(result => (results[i] = {value: null, error: result}))
@@ -58,9 +63,9 @@ export const executeQuery = async (
 
   const {data} = await proxy({
     source: source.links.proxy,
-    rp: query.rp,
+    rp: query.queryConfig.retentionPolicy,
     query: text,
-    db: query.db || query.database,
+    db: query.queryConfig.database,
     uuid,
   })
 

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,7 @@ 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', '')
@@ -429,6 +429,7 @@ class TimeMachine extends PureComponent<Props, State> {
 
     try {
       newQueryConfig = await getConfig(url, activeID, text, templates)
+      newQueryConfig.isSubmitted = !isAutoSubmitted
     } catch {
       notify(analyzeQueryFailed)
       return
@@ -450,7 +451,6 @@ class TimeMachine extends PureComponent<Props, State> {
         },
       }
     })
-
     onUpdateQueryDrafts(updatedQueryDrafts)
   }
 

ui/src/shared/components/time_series/TimeSeries.tsx

@@ -140,12 +140,12 @@ class TimeSeries extends PureComponent<Props, State> {
     const timeRangeChanged = oldLower !== newLower || oldUpper !== newUpper
 
     const shouldExecuteQueries =
-      queriesDifferent ||
-      timeRangeChanged ||
-      templatesDifferent ||
-      this.props.uuid !== prevProps.uuid ||
-      this.state.fetchCount === 0 ||
-      this.props.xPixels !== prevProps.xPixels
+        queriesDifferent ||
+        timeRangeChanged ||
+        templatesDifferent ||
+        this.props.uuid !== prevProps.uuid ||
+        this.state.fetchCount === 0 ||
+        this.props.xPixels !== prevProps.xPixels
 
     if (shouldExecuteQueries) {
       this.debouncer.call(this.executeQueries, EXECUTE_QUERIES_DEBOUNCE_MS)

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'
@@ -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
+  isSubmitted?: boolean // doesn't come from server -- is set in InfluxQLEditor
   originalQuery?: string
 }
 

ui/src/utils/queryFilter.ts

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

ui/src/worker/jobs/proxy.ts

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