Convert QueryEditor to ts
Andrew Watkins
parent
365230342e
commit
eaa04a3193
|
|
@ -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
|
||||
|
|
@ -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',
|
||||
},
|
||||
]
|
||||
Loading…
Reference in New Issue