Build plugin with grafana toolkit (#1539)
* Use grafana toolkit template for building plugin * Fix linter and type errors * Update styles building * Fix sass deprecation warning * Remove empty js files produced by webpack building sass * Fix signing script * Replace classnames with cx * Fix data source config page * Use custom webpack config instead of overriding original one * Use gpx_ prefix for plugin executable * Remove unused configs * Roll back react hooks dependencies usage * Move plugin-specific ts config to root config file * Temporary do not use rst2html for function description tooltip * Remove unused code * remove unused dependencies * update react table dependency * Migrate tests to typescript * remove unused dependencies * Remove old webpack configs * Add sign target to makefile * Add magefile * Update CI test job * Update go packages * Update build instructions * Downgrade go version to 1.18 * Fix go version in ci * Fix metric picker * Add comment to webpack config * remove angular mocks * update bra config * Rename datasource-zabbix to datasource (fix mage build) * Add instructions for building backend with mage * Fix webpack targets * Fix ci backend tests * Add initial e2e tests * Fix e2e ci tests * Update docker compose for cypress tests * build grafana docker image * Fix docker stop task * CI: add Grafana compatibility check
This commit is contained in:
Alexander Zobnin
GitHub
176
src/datasource/components/VariableQueryEditor.tsx
Normal file
176
src/datasource/components/VariableQueryEditor.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { parseLegacyVariableQuery } from '../utils';
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { VariableQuery, VariableQueryData, VariableQueryProps, VariableQueryTypes } from '../types';
|
||||
import { ZabbixInput } from './ZabbixInput';
|
||||
import { InlineFormLabel, Input, Select } from '@grafana/ui';
|
||||
|
||||
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.ItemTag, label: 'Item tag' },
|
||||
{ value: VariableQueryTypes.Item, label: 'Item' },
|
||||
{ value: VariableQueryTypes.ItemValues, label: 'Item values' },
|
||||
];
|
||||
|
||||
defaults: VariableQueryData = {
|
||||
selectedQueryType: { value: VariableQueryTypes.Group, label: 'Group' },
|
||||
queryType: VariableQueryTypes.Group,
|
||||
group: '/.*/',
|
||||
host: '',
|
||||
application: '',
|
||||
itemTag: '',
|
||||
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, itemTag, item } = this.state;
|
||||
const queryModel = { queryType, group, host, application, itemTag, item };
|
||||
this.props.onChange(queryModel, `Zabbix - ${queryType}`);
|
||||
};
|
||||
|
||||
handleQueryTypeChange = (selectedItem: SelectableValue<VariableQueryTypes>) => {
|
||||
this.setState({
|
||||
...this.state,
|
||||
selectedQueryType: selectedItem,
|
||||
queryType: selectedItem.value,
|
||||
});
|
||||
|
||||
const { group, host, application, itemTag, item } = this.state;
|
||||
const queryType = selectedItem.value;
|
||||
const queryModel = { queryType, group, host, application, itemTag, item };
|
||||
this.props.onChange(queryModel, `Zabbix - ${queryType}`);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { selectedQueryType, legacyQuery, group, host, application, itemTag, item } = this.state;
|
||||
const { datasource } = this.props;
|
||||
const supportsItemTags = datasource?.zabbix?.isZabbix54OrHigher() || false;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="gf-form max-width-21">
|
||||
<InlineFormLabel width={10}>Query Type</InlineFormLabel>
|
||||
<Select
|
||||
width={11}
|
||||
value={selectedQueryType}
|
||||
options={this.queryTypes}
|
||||
onChange={this.handleQueryTypeChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineFormLabel width={10}>Group</InlineFormLabel>
|
||||
<ZabbixInput
|
||||
value={group}
|
||||
onChange={(evt) => this.handleQueryUpdate(evt, 'group')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
{selectedQueryType.value !== VariableQueryTypes.Group && (
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineFormLabel width={10}>Host</InlineFormLabel>
|
||||
<ZabbixInput
|
||||
value={host}
|
||||
onChange={(evt) => this.handleQueryUpdate(evt, 'host')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(selectedQueryType.value === VariableQueryTypes.Application ||
|
||||
selectedQueryType.value === VariableQueryTypes.ItemTag ||
|
||||
selectedQueryType.value === VariableQueryTypes.Item ||
|
||||
selectedQueryType.value === VariableQueryTypes.ItemValues) && (
|
||||
<div className="gf-form-inline">
|
||||
{supportsItemTags && (
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineFormLabel width={10}>Item tag</InlineFormLabel>
|
||||
<ZabbixInput
|
||||
value={itemTag}
|
||||
onChange={(evt) => this.handleQueryUpdate(evt, 'itemTag')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!supportsItemTags && (
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineFormLabel width={10}>Application</InlineFormLabel>
|
||||
<ZabbixInput
|
||||
value={application}
|
||||
onChange={(evt) => this.handleQueryUpdate(evt, 'application')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{(selectedQueryType.value === VariableQueryTypes.Item ||
|
||||
selectedQueryType.value === VariableQueryTypes.ItemValues) && (
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineFormLabel width={10}>Item</InlineFormLabel>
|
||||
<ZabbixInput
|
||||
value={item}
|
||||
onChange={(evt) => this.handleQueryUpdate(evt, 'item')}
|
||||
onBlur={this.handleQueryChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{legacyQuery && (
|
||||
<div className="gf-form">
|
||||
<InlineFormLabel width={10} tooltip="Original query string, read-only">
|
||||
Legacy Query
|
||||
</InlineFormLabel>
|
||||
<Input value={legacyQuery} readOnly={true} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user