Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1743 from grafana/gareth/legacy-forms

Browse Source 
legacy form migration
This commit is contained in:
Gareth Dawson
2023-11-20 10:07:39 +00:00
committed by GitHub
parent fdb72f1a9a c9f515686c
commit 3654866fc4
6 changed files with 129 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/datasource/components/QueryEditor.tsx
View File

@@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { QueryEditorProps, SelectableValue } from '@grafana/data';
import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
import { InlineField, Select } from '@grafana/ui';
import * as c from '../constants';
import { migrate, DS_QUERY_SCHEMA } from '../migrations';
import { ZabbixDatasource } from '../datasource';
@@ -14,6 +14,7 @@ import { ItemIdQueryEditor } from './QueryEditor/ItemIdQueryEditor';
import { ServicesQueryEditor } from './QueryEditor/ServicesQueryEditor';
import { TriggersQueryEditor } from './QueryEditor/TriggersQueryEditor';
import { UserMacrosQueryEditor } from './QueryEditor/UserMacrosQueryEditor';
import { QueryEditorRow } from './QueryEditor/QueryEditorRow';
const zabbixQueryTypeOptions: Array<SelectableValue<string>> = [
{
@@ -197,7 +198,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
return (
<>
<InlineFieldRow>
<QueryEditorRow>
<InlineField label="Query type" labelWidth={12}>
<Select
isSearchable={false}
@@ -207,10 +208,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
onChange={onPropChange('queryType')}
/>
</InlineField>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
</div>
</InlineFieldRow>
</QueryEditorRow>
{queryType === c.MODE_METRICS && renderMetricsEditor()}
{queryType === c.MODE_ITEMID && renderItemIdsEditor()}
{queryType === c.MODE_TEXT && renderTextMetricsEditor()}

19
src/datasource/components/QueryEditor/QueryEditorRow.tsx
View File

@@ -1,13 +1,24 @@
import React from 'react';
import { InlineFieldRow } from '@grafana/ui';
import { InlineFieldRow, InlineFormLabel } from '@grafana/ui';
import { css } from '@emotion/css';
export const QueryEditorRow = ({ children }: React.PropsWithChildren<{}>) => {
const styles = getStyles();
return (
<InlineFieldRow>
{children}
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--grow" />
</div>
<InlineFormLabel className={styles.rowTerminator}>
<></>
</InlineFormLabel>
</InlineFieldRow>
);
};
const getStyles = () => {
return {
rowTerminator: css({
flexGrow: 1,
}),
};
};

110
src/datasource/components/VariableQueryEditor.tsx
View File

@@ -3,7 +3,7 @@ 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';
import { InlineField, InlineFieldRow, InlineFormLabel, Input, Select } from '@grafana/ui';
export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps, VariableQueryData> {
queryTypes: Array<SelectableValue<VariableQueryTypes>> = [
@@ -94,81 +94,95 @@ export class ZabbixVariableQueryEditor extends PureComponent<VariableQueryProps,
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>
<InlineFieldRow>
<InlineField label="Query Type" labelWidth={16}>
<Select
width={30}
value={selectedQueryType}
options={this.queryTypes}
onChange={this.handleQueryTypeChange}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Group" labelWidth={16}>
<ZabbixInput
width={30}
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>
</InlineField>
</InlineFieldRow>
{selectedQueryType.value !== VariableQueryTypes.Group && (
<InlineFieldRow>
<InlineField label="Host" labelWidth={16}>
<ZabbixInput
width={30}
value={host}
onChange={(evt) => this.handleQueryUpdate(evt, 'host')}
onBlur={this.handleQueryChange}
/>
</div>
)}
</div>
</InlineField>
</InlineFieldRow>
)}
{(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>
<InlineFieldRow>
<InlineField label="Item Tag" labelWidth={16}>
<ZabbixInput
width={30}
value={itemTag}
onChange={(evt) => this.handleQueryUpdate(evt, 'itemTag')}
onBlur={this.handleQueryChange}
/>
</InlineField>
</InlineFieldRow>
)}
{!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>
<InlineFieldRow>
<InlineField label="Application" labelWidth={16}>
<ZabbixInput
width={30}
value={application}
onChange={(evt) => this.handleQueryUpdate(evt, 'application')}
onBlur={this.handleQueryChange}
/>
</InlineField>
</InlineFieldRow>
)}
{(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>
<InlineFieldRow>
<InlineField label="Item" labelWidth={16}>
<ZabbixInput
width={30}
value={item}
onChange={(evt) => this.handleQueryUpdate(evt, 'item')}
onBlur={this.handleQueryChange}
/>
</InlineField>
</InlineFieldRow>
)}
</div>
</>
)}
{legacyQuery && (
<div className="gf-form">
<>
<InlineFormLabel width={10} tooltip="Original query string, read-only">
Legacy Query
</InlineFormLabel>
<Input value={legacyQuery} readOnly={true} />
</div>
</>
)}
</>
);

2
src/datasource/components/ZabbixInput.tsx
View File

@@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { isRegex, variableRegex } from '../utils';
import * as grafanaUi from '@grafana/ui';
const Input = (grafanaUi as any).LegacyForms?.Input || (grafanaUi as any).Input;
const Input = (grafanaUi as any).Input || (grafanaUi as any).LegacyForms?.Input;
const variablePattern = RegExp(`^${variableRegex.source}`);