|
1 | | -import React, { ChangeEvent } from 'react'; |
2 | | -import { Button, Icon, InlineField, Input } from '@grafana/ui'; |
3 | | -import { QueryEditorProps } from '@grafana/data'; |
| 1 | +import React, { ChangeEvent, ReactNode } from 'react'; |
| 2 | +import { Button, Form, Icon, InlineField, Input, Select } from '@grafana/ui'; |
| 3 | +import { QueryEditorProps, SelectableValue } from '@grafana/data'; |
4 | 4 | import { DataSource } from '../datasource'; |
5 | | -import { MyDataSourceOptions, MyQuery } from '../types'; |
| 5 | +import { DEFAULT_QUERY, MyDataSourceOptions, MyQuery } from '../types'; |
6 | 6 |
|
7 | 7 | type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>; |
8 | 8 |
|
9 | 9 | export function QueryEditor({ query, onChange, onRunQuery }: Props) { |
10 | | - const onExprChange = (event: ChangeEvent<HTMLInputElement>) => { |
11 | | - onChange({ ...query, expr: event.target.value }); |
| 10 | + const onTypeChange = (event: SelectableValue<number>) => { |
| 11 | + let queryTypeIndex = event.value ?? queryTypeDefault.value; |
| 12 | + onChange({ ...query, type: queryTypes[queryTypeIndex].label }); |
| 13 | + }; |
| 14 | + const onEvalChange = (event: ChangeEvent<HTMLInputElement>) => { |
| 15 | + onChange({ ...query, eval: event.target.value }); |
| 16 | + }; |
| 17 | + const onHisReadChange = (event: ChangeEvent<HTMLInputElement>) => { |
| 18 | + onChange({ ...query, hisRead: event.target.value }); |
| 19 | + }; |
| 20 | + |
| 21 | + const queryTypes = [ |
| 22 | + { label: 'Eval', value: 0, description: 'Evaluate an Axon expression' }, |
| 23 | + { label: 'HisRead', value: 1, description: 'Read the histories of a list of points' } |
| 24 | + ]; |
| 25 | + const queryTypeDefault = queryTypes[0]; |
| 26 | + function queryTypeFromLabel(label: string) { |
| 27 | + return queryTypes.find(queryType => queryType.label == label) ?? queryTypeDefault |
| 28 | + } |
| 29 | + |
| 30 | + const SelectComponent = () => { |
| 31 | + return ( |
| 32 | + <Select |
| 33 | + options={queryTypes} |
| 34 | + value={queryTypeFromLabel(query.type)} |
| 35 | + defaultValue={queryTypeDefault} |
| 36 | + width={30} |
| 37 | + onChange={ queryType => { |
| 38 | + onTypeChange(queryType); |
| 39 | + }} |
| 40 | + /> |
| 41 | + ); |
12 | 42 | }; |
13 | 43 |
|
14 | | - const { expr } = query; |
| 44 | + function renderQuery(): ReactNode { |
| 45 | + let queryType = queryTypeFromLabel(query.type); |
| 46 | + switch(queryType.value) { |
| 47 | + case 0: // Eval |
| 48 | + return <InlineField label="Axon" labelWidth="auto" tooltip="An Axon expression to evaluate on the Haystack server"> |
| 49 | + <Input width={100} prefix={<Icon name="angle-right" />} onChange={onEvalChange} value={query.eval ?? DEFAULT_QUERY.eval} /> |
| 50 | + </InlineField> |
| 51 | + case 1: // HisRead |
| 52 | + return <InlineField label="Point ID" labelWidth="auto" tooltip="The ID of the point to read"> |
| 53 | + <Input width={100} prefix={<Icon name="angle-right" />} onChange={onHisReadChange} value={query.hisRead ?? DEFAULT_QUERY.hisRead} /> |
| 54 | + </InlineField> |
| 55 | + } |
| 56 | + return <p>Select a query type</p> |
| 57 | + } |
15 | 58 |
|
16 | 59 | return ( |
17 | 60 | <div className="gf-form"> |
18 | | - <InlineField label="Axon" labelWidth="auto" tooltip="An Axon expression to evaluate on the Haystack server"> |
19 | | - <Input width={100} prefix={<Icon name="angle-right" />} onChange={onExprChange} value={expr || ''} /> |
20 | | - </InlineField> |
21 | | - <Button type="submit" onClick={onRunQuery}>Run</Button> |
| 61 | + <Form |
| 62 | + defaultValues={DEFAULT_QUERY} |
| 63 | + onSubmit={(newQuery: Partial<MyQuery>) => query = { ...query, ...newQuery }} |
| 64 | + >{({register, errors}) => { |
| 65 | + return ( |
| 66 | + <div> |
| 67 | + <SelectComponent/> |
| 68 | + {renderQuery()} |
| 69 | + <Button type="submit" onClick={onRunQuery}>Run</Button> |
| 70 | + </div> |
| 71 | + ) |
| 72 | + }}</Form> |
22 | 73 | </div> |
23 | 74 | ); |
24 | 75 | } |
0 commit comments