-
Notifications
You must be signed in to change notification settings - Fork 463
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Backend] Merge 'master' changes into the backend (#875)
* CI: fix shellcheck issues (#789) Signed-off-by: Mario Trangoni <[email protected]> * annotations: fix options in grafana 6.x, fix #813 * fix function editor in Grafana 6.4, closes #810 * add typings for grafana packages * Add $__range_series variable for calculating function over the whole series, #531 * fix tests * Don't set alert styles for react panels, fix #823 * docs: add range variables * docs: percentile reference * fix codespell * update packages (build with node 12) * update circleci node image to 12 * fix test configuration (babel) * Fix 817 (#851) * problems: update panel schema * update packages (build with node 12) * problems: use datasource from target * problems: fix query editor after schema update * problems: fix list layout * update circleci node image to 12 * fix tests * build(deps-dev): bump lodash from 4.17.10 to 4.17.13 (#852) Bumps [lodash](https://github.com/lodash/lodash) from 4.17.10 to 4.17.13. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](lodash/lodash@4.17.10...4.17.13) Signed-off-by: dependabot[bot] <[email protected]> * fix packages security alerts * problems: fix tags adding and removal * fix adding func from typeahead, closes #468 * update change log * bump plugin version to 3.10.5 * problems: fix tag removal (list layout) * Fix percentile() function, closes #862 (#863) Like the other aggregation functions, the datapoints need to be sorted in time before calling groupBy_perf(). * Update copyright, happy New Year! * fix not acknowledged problem color with a message (#858) * fix not acknowledged problem color with a message * fix not acknowledged problem color with a message, closes #857 * 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 * Fixes for backend Co-authored-by: Mario Trangoni <[email protected]> Co-authored-by: Alexander Zobnin <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Mark Reibert <[email protected]> Co-authored-by: memfiz <[email protected]>
- Loading branch information
6 people
committed
Jan 15, 2020
1 parent
fcfb237
commit 92e7761
Showing
30 changed files
with
2,999 additions
and
3,346 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -56,6 +56,6 @@ First, [configure](https://alexanderzobnin.github.io/grafana-zabbix/configuratio | |
| - Need additional support? Contact me for details [[email protected]](mailto:[email protected]) | ||
|
|
||
| --- | ||
| :copyright: 2015-2019 Alexander Zobnin [email protected] | ||
| :copyright: 2015-2020 Alexander Zobnin [email protected] | ||
|
|
||
| Licensed under the Apache 2.0 License | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| module.exports = { | ||
| "presets": [ | ||
| [ "@babel/env", { targets: { node: 'current' } } ], | ||
| [ "@babel/preset-env", { "targets": { "node": "current" } } ], | ||
| "@babel/react" | ||
| ], | ||
| "retainLines": true | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 157 additions & 0 deletions
157
src/datasource-zabbix/components/VariableQueryEditor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| } | ||
| </> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { FC } from 'react'; | ||
| import { css, cx } from 'emotion'; | ||
| import { Themeable, withTheme, Input, EventsWithValidation, ValidationEvents } from '@grafana/ui'; | ||
| import { GrafanaTheme } from '@grafana/data'; | ||
| 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.