From eaa04a31935b7d803b1780e0dcaa17f12becec7e Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 May 2018 14:43:22 -0700
Subject: [PATCH] Convert QueryEditor to ts

---
 .../data_explorer/components/QueryEditor.tsx  | 105 +++++++++++++
 ui/src/data_explorer/constants/index.ts       | 139 ++++++++++++++++++
 2 files changed, 244 insertions(+)
 create mode 100644 ui/src/data_explorer/components/QueryEditor.tsx
 create mode 100644 ui/src/data_explorer/constants/index.ts

diff --git a/ui/src/data_explorer/components/QueryEditor.tsx b/ui/src/data_explorer/components/QueryEditor.tsx
new file mode 100644
index 0000000000..08af3ca365
--- /dev/null
+++ b/ui/src/data_explorer/components/QueryEditor.tsx
@@ -0,0 +1,105 @@
+import React, {PureComponent, KeyboardEvent} from 'react'
+
+import Dropdown from 'src/shared/components/Dropdown'
+import {QUERY_TEMPLATES, QueryTemplate} from 'src/data_explorer/constants'
+import QueryStatus from 'src/shared/components/QueryStatus'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {QueryConfig} from 'src/types'
+
+interface Props {
+  query: string
+  config: QueryConfig
+  onUpdate: (value: string) => void
+}
+
+interface State {
+  value: string
+}
+
+@ErrorHandling
+class QueryEditor extends PureComponent<Props, State> {
+  private editor: React.RefObject<HTMLTextAreaElement>
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: this.props.query,
+    }
+
+    this.editor = React.createRef<HTMLTextAreaElement>()
+  }
+
+  public componentWillReceiveProps(nextProps) {
+    if (this.props.query !== nextProps.query) {
+      this.setState({value: nextProps.query})
+    }
+  }
+
+  public render() {
+    const {
+      config: {status},
+    } = this.props
+    const {value} = this.state
+
+    return (
+      <div className="query-editor">
+        <textarea
+          className="query-editor--field"
+          ref={this.editor}
+          value={value}
+          autoComplete="off"
+          spellCheck={false}
+          onBlur={this.handleUpdate}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+          data-test="query-editor-field"
+          placeholder="Enter a query or select database, measurement, and field below and have us build one for you..."
+        />
+        <div className="varmoji">
+          <div className="varmoji-container">
+            <div className="varmoji-front">
+              <QueryStatus status={status}>
+                <Dropdown
+                  items={QUERY_TEMPLATES}
+                  selected={'Query Templates'}
+                  onChoose={this.handleChooseMetaQuery}
+                  className="dropdown-140 query-editor--templates"
+                  buttonSize="btn-xs"
+                />
+              </QueryStatus>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  private handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
+    const {value} = this.state
+
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      this.setState({value})
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      this.handleUpdate()
+    }
+  }
+
+  private handleChange = (): void => {
+    const value = this.editor.current.value
+    this.setState({value})
+  }
+
+  private handleUpdate = (): void => {
+    this.props.onUpdate(this.state.value)
+  }
+
+  private handleChooseMetaQuery = (template: QueryTemplate): void => {
+    this.setState({value: template.query})
+  }
+}
+
+export default QueryEditor
diff --git a/ui/src/data_explorer/constants/index.ts b/ui/src/data_explorer/constants/index.ts
new file mode 100644
index 0000000000..bdd8a5d60c
--- /dev/null
+++ b/ui/src/data_explorer/constants/index.ts
@@ -0,0 +1,139 @@
+export const INFLUXQL_FUNCTIONS: string[] = [
+  'mean',
+  'median',
+  'count',
+  'min',
+  'max',
+  'sum',
+  'first',
+  'last',
+  'spread',
+  'stddev',
+]
+
+interface MinHeights {
+  queryMaker: number
+  visualization: number
+}
+
+export const MINIMUM_HEIGHTS: MinHeights = {
+  queryMaker: 350,
+  visualization: 200,
+}
+
+interface InitialHeights {
+  queryMaker: '66.666%'
+  visualization: '33.334%'
+}
+
+export const INITIAL_HEIGHTS: InitialHeights = {
+  queryMaker: '66.666%',
+  visualization: '33.334%',
+}
+
+const SEPARATOR: string = 'SEPARATOR'
+
+export interface QueryTemplate {
+  text: string
+  query: string
+}
+
+export interface Separator {
+  text: string
+}
+
+type Template = QueryTemplate | Separator
+
+export const QUERY_TEMPLATES: Template[] = [
+  {
+    text: 'Show Databases',
+    query: 'SHOW DATABASES',
+  },
+  {
+    text: 'Create Database',
+    query: 'CREATE DATABASE "db_name"',
+  },
+  {
+    text: 'Drop Database',
+    query: 'DROP DATABASE "db_name"',
+  },
+  {
+    text: `${SEPARATOR}`,
+  },
+  {
+    text: 'Show Measurements',
+    query: 'SHOW MEASUREMENTS ON "db_name"',
+  },
+  {
+    text: 'Show Tag Keys',
+    query: 'SHOW TAG KEYS ON "db_name" FROM "measurement_name"',
+  },
+  {
+    text: 'Show Tag Values',
+    query:
+      'SHOW TAG VALUES ON "db_name" FROM "measurement_name" WITH KEY = "tag_key"',
+  },
+  {
+    text: `${SEPARATOR}`,
+  },
+  {
+    text: 'Show Retention Policies',
+    query: 'SHOW RETENTION POLICIES on "db_name"',
+  },
+  {
+    text: 'Create Retention Policy',
+    query:
+      'CREATE RETENTION POLICY "rp_name" ON "db_name" DURATION 30d REPLICATION 1 DEFAULT',
+  },
+  {
+    text: 'Drop Retention Policy',
+    query: 'DROP RETENTION POLICY "rp_name" ON "db_name"',
+  },
+  {
+    text: `${SEPARATOR}`,
+  },
+  {
+    text: 'Show Continuous Queries',
+    query: 'SHOW CONTINUOUS QUERIES',
+  },
+  {
+    text: 'Create Continuous Query',
+    query:
+      'CREATE CONTINUOUS QUERY "cq_name" ON "db_name" BEGIN SELECT min("field") INTO "target_measurement" FROM "current_measurement" GROUP BY time(30m) END',
+  },
+  {
+    text: 'Drop Continuous Query',
+    query: 'DROP CONTINUOUS QUERY "cq_name" ON "db_name"',
+  },
+  {
+    text: `${SEPARATOR}`,
+  },
+  {
+    text: 'Show Users',
+    query: 'SHOW USERS',
+  },
+  {
+    text: 'Create User',
+    query: 'CREATE USER "username" WITH PASSWORD \'password\'',
+  },
+  {
+    text: 'Create Admin User',
+    query:
+      'CREATE USER "username" WITH PASSWORD \'password\' WITH ALL PRIVILEGES',
+  },
+  {
+    text: 'Drop User',
+    query: 'DROP USER "username"',
+  },
+  {
+    text: `${SEPARATOR}`,
+  },
+  {
+    text: 'Show Stats',
+    query: 'SHOW STATS',
+  },
+  {
+    text: 'Show Diagnostics',
+    query: 'SHOW DIAGNOSTICS',
+  },
+]