Variable query editor (#856)
* refactor: convert module to typescript * refactor: covert utils to typescript * variable query editor WIP * variable editor: fix type error after grafana/ui update * variable editor: use FormLabel from grafana/ui * variable editor: refactor * variable editor: input validation and highlights * variable editor: fix tests * variable query: fix backward compatibility with empty queries * fix linter errors * variable editor: fix variable replacement in queries
This commit is contained in:
Alexander Zobnin
GitHub
157
src/datasource-zabbix/components/VariableQueryEditor.tsx
Normal file
157
src/datasource-zabbix/components/VariableQueryEditor.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { parseLegacyVariableQuery } from '../utils';
|
||||
import { Select, Input, AsyncSelect, FormLabel } from '@grafana/ui';
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { VariableQuery, VariableQueryTypes, VariableQueryProps, VariableQueryData } from '../types';
|
||||
import { ZabbixInput } from './ZabbixInput';
|
||||
|
||||
export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
|
||||
queryTypes: Array<SelectableValue<VariableQueryTypes>> = [
|
||||
{ value: VariableQueryTypes.Group, label: 'Group'},
|
||||
{ value: VariableQueryTypes.Host, label: 'Host' },
|
||||
{ value: VariableQueryTypes.Application, label: 'Application' },
|
||||
{ value: VariableQueryTypes.Item, label: 'Item' },
|
||||
];
|
||||
|
||||
defaults: VariableQueryData = {
|
||||
selectedQueryType: { value: VariableQueryTypes.Group, label: 'Group' },
|
||||
queryType: VariableQueryTypes.Group,
|
||||
group: '/.*/',
|
||||
host: '',
|
||||
application: '',
|
||||
item: '',
|
||||
};
|
||||
|
||||
constructor(props: VariableQueryProps) {
|
||||
super(props);
|
||||
|
||||
if (this.props.query && typeof this.props.query === 'string') {
|
||||
// Backward compatibility
|
||||
const query = parseLegacyVariableQuery(this.props.query);
|
||||
const selectedQueryType = this.getSelectedQueryType(query.queryType);
|
||||
this.state = {
|
||||
selectedQueryType,
|
||||
legacyQuery: this.props.query,
|
||||
...query
|
||||
};
|
||||
} else if (this.props.query) {
|
||||
const query = (this.props.query as VariableQuery);
|
||||
const selectedQueryType = this.getSelectedQueryType(query.queryType);
|
||||
this.state = {
|
||||
...this.defaults,
|
||||
...query,
|
||||
selectedQueryType,
|
||||
};
|
||||
} else {
|
||||
this.state = this.defaults;
|
||||
}
|
||||
}
|
||||
|
||||
getSelectedQueryType(queryType: VariableQueryTypes) {
|
||||
return this.queryTypes.find(q => q.value === queryType);
|
||||
}
|
||||
|
||||
handleQueryUpdate = (evt: React.ChangeEvent<HTMLInputElement>, prop: string) => {
|
||||
const value = evt.currentTarget.value;
|
||||
this.setState((prevState: VariableQueryData) => {
|
||||
const newQuery = {
|
||||
...prevState,
|
||||
};
|
||||
newQuery[prop] = value;
|
||||
|
||||
return {
|
||||
...newQuery,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
handleQueryChange = () => {
|
||||
const { queryType, group, host, application, item } = this.state;
|
||||
const queryModel = { queryType, group, host, application, item };
|
||||
this.props.onChange(queryModel, `Zabbix - ${queryType}`);
|
||||
}
|
||||
|
||||
handleQueryTypeChange = (selectedItem: SelectableValue<VariableQueryTypes>) => {
|
||||
this.setState({
|
||||
...this.state,
|
||||
selectedQueryType: selectedItem,
|
||||
queryType: selectedItem.value,
|
||||
});
|
||||
|
||||
const { group, host, application, item } = this.state;
|
||||
const queryType = selectedItem.value;
|
||||
const queryModel = { queryType, group, host, application, item };
|
||||
this.props.onChange(queryModel, `Zabbix - ${queryType}`);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { selectedQueryType, legacyQuery, group, host, application, item } = this.state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="gf-form max-width-21">
|
||||
<FormLabel width={10}>Query Type</FormLabel>
|
||||
<Select
|
||||
width={11}
|
||||
value={selectedQueryType}
|
||||
options={this.queryTypes}
|
||||
onChange={this.handleQueryTypeChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form max-width-30">
|
||||
<FormLabel width={10}>Group</FormLabel>
|
||||
<ZabbixInput
|
||||
value={group}
|
||||
onChange={evt => this.handleQueryUpdate(evt, 'group')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
{selectedQueryType.value !== VariableQueryTypes.Group &&
|
||||
<div className="gf-form max-width-30">
|
||||
<FormLabel width={10}>Host</FormLabel>
|
||||
<ZabbixInput
|
||||
value={host}
|
||||
onChange={evt => this.handleQueryUpdate(evt, 'host')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{(selectedQueryType.value === VariableQueryTypes.Application ||
|
||||
selectedQueryType.value === VariableQueryTypes.Item) &&
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form max-width-30">
|
||||
<FormLabel width={10}>Application</FormLabel>
|
||||
<ZabbixInput
|
||||
value={application}
|
||||
onChange={evt => this.handleQueryUpdate(evt, 'application')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
{selectedQueryType.value === VariableQueryTypes.Item &&
|
||||
<div className="gf-form max-width-30">
|
||||
<FormLabel width={10}>Item</FormLabel>
|
||||
<ZabbixInput
|
||||
value={item}
|
||||
onChange={evt => this.handleQueryUpdate(evt, 'item')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
{legacyQuery &&
|
||||
<div className="gf-form">
|
||||
<FormLabel width={10} tooltip="Original query string, read-only">Legacy Query</FormLabel>
|
||||
<Input
|
||||
value={legacyQuery}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
69
src/datasource-zabbix/components/ZabbixInput.tsx
Normal file
69
src/datasource-zabbix/components/ZabbixInput.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import React, { FC } from 'react';
|
||||
import { css, cx } from 'emotion';
|
||||
import { Themeable, withTheme, Input, GrafanaTheme, EventsWithValidation, ValidationEvents } from '@grafana/ui';
|
||||
import { isRegex, variableRegex } from '../utils';
|
||||
|
||||
const variablePattern = RegExp(`^${variableRegex.source}`);
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => ({
|
||||
inputRegex: css`
|
||||
color: ${theme.colors.orange}
|
||||
`,
|
||||
inputVariable: css`
|
||||
color: ${theme.colors.variable}
|
||||
`,
|
||||
});
|
||||
|
||||
const zabbixInputValidationEvents: ValidationEvents = {
|
||||
[EventsWithValidation.onBlur]: [
|
||||
{
|
||||
rule: value => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
if (value.length > 1 && value[0] === '/') {
|
||||
if (value[value.length - 1] !== '/') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
errorMessage: 'Not a valid regex',
|
||||
},
|
||||
{
|
||||
rule: value => {
|
||||
if (value === '*') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
errorMessage: 'Wildcards not supported. Use /.*/ instead',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
interface Props extends React.ComponentProps<typeof Input>, Themeable {
|
||||
}
|
||||
|
||||
const UnthemedZabbixInput: FC<Props> = ({ theme, value, ref, validationEvents, ...restProps }) => {
|
||||
const styles = getStyles(theme);
|
||||
|
||||
let inputClass;
|
||||
if (variablePattern.test(value as string)) {
|
||||
inputClass = styles.inputVariable;
|
||||
}
|
||||
if (isRegex(value)) {
|
||||
inputClass = styles.inputRegex;
|
||||
}
|
||||
|
||||
return (
|
||||
<Input
|
||||
className={inputClass}
|
||||
value={value}
|
||||
validationEvents={zabbixInputValidationEvents}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const ZabbixInput = withTheme(UnthemedZabbixInput);
|
||||
Reference in New Issue
Block a user