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

Add support to use custom values in dropdown (#2163)

Browse Source 
## Summary
When we switched to use `Combobox` we were no longer able to add custom
values for our dropdowns, and this prevented users from using regexp
values for `group`, `host`, `proxy` etc. This PR adds
`createCustomValue` flag so that any custom value can be entered into
the dropdowns.

## Detailed summary
- Make use of `Combobox`'s `createCustomValues` so that wherever
necessary, users are able to enter regex values.
    
<img width="720" height="221" alt="Screenshot 2026-01-05 at 7 15 23 AM"
src="https://github.com/user-attachments/assets/841716eb-cd86-49d1-b13c-a0e37e8a37b9"
/>

## Why
For users to be able to use regexp, and any custom value in our
dropdowns.

## How to test
For all query types where dropdowns are used and user configurable (i.e.
group, host, proxy, application) start typing a value that does not
already exist in the dropdown. You should see an option to `Use custom
value`

Fixes
[comment](https://github.com/grafana/grafana-zabbix/pull/2141#issuecomment-3698818476),
thanks for the testing and call out @christos-diamantis
This commit is contained in:
Jocelyn Collado-Kuri
2026-01-05 09:34:17 -08:00
committed by GitHub
parent 0d64736e86
commit 9fda7768ff
9 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/MetricPicker/MetricPicker.tsx
View File

@@ -9,10 +9,11 @@ export interface Props {
isLoading?: boolean;
options: Array<ComboboxOption<string>>;
width?: number;
createCustomValue?: boolean;
onChange: (value: string) => void;
}
export const MetricPicker = ({ value, placeholder, options, isLoading, width, onChange }: Props) => {
export const MetricPicker = ({ value, placeholder, options, isLoading, width, onChange, createCustomValue }: Props) => {
const ref = useRef<HTMLDivElement>(null);
const onMenuOptionSelect = (option: SelectableValue<string>) => {
@@ -23,6 +24,7 @@ export const MetricPicker = ({ value, placeholder, options, isLoading, width, on
return (
<div data-testid="role-picker" style={{ position: 'relative' }} ref={ref}>
<Combobox<string>
createCustomValue={createCustomValue ?? false}
width={width}
value={value}
options={options ?? []}

1
src/datasource/components/QueryEditor/HostTagQueryEditor.tsx
View File

@@ -105,6 +105,7 @@ export const HostTagQueryEditor = ({
options={hostTagOptions ?? []}
width={19}
loading={hostTagOptionsLoading}
createCustomValue={true}
/>
<Combobox
value={filter.operator}

5
src/datasource/components/QueryEditor/MetricsQueryEditor.tsx
View File

@@ -239,6 +239,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
isLoading={groupsLoading}
onChange={onFilterChange('group')}
placeholder="Group name"
createCustomValue={true}
/>
</InlineField>
<InlineField label="Host tag" labelWidth={12}>
@@ -259,6 +260,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
isLoading={hostsLoading}
onChange={onFilterChange('host')}
placeholder="Host name"
createCustomValue={true}
/>
</InlineField>
</QueryEditorRow>
@@ -271,6 +273,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
options={appOptions}
isLoading={appsLoading}
onChange={onFilterChange('application')}
createCustomValue={true}
placeholder="Application name"
/>
</InlineField>
@@ -283,6 +286,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
options={tagOptions}
isLoading={tagsLoading}
onChange={onFilterChange('itemTag')}
createCustomValue={true}
placeholder="Item tag name"
/>
</InlineField>
@@ -294,6 +298,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha
options={itemOptions}
isLoading={itemsLoading}
onChange={onFilterChange('item')}
createCustomValue={true}
placeholder="Item name"
/>
</InlineField>

4
src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx
View File

@@ -166,6 +166,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
options={groupsOptions}
isLoading={groupsLoading}
onChange={onFilterChange('group')}
createCustomValue={true}
placeholder="Group name"
/>
</InlineField>
@@ -176,6 +177,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
options={hostOptions}
isLoading={hostsLoading}
onChange={onFilterChange('host')}
createCustomValue={true}
placeholder="Host name"
/>
</InlineField>
@@ -186,6 +188,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
options={proxiesOptions}
isLoading={proxiesLoading}
onChange={onFilterChange('proxy')}
createCustomValue={true}
placeholder="Proxy name"
/>
</InlineField>
@@ -199,6 +202,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
options={appOptions}
isLoading={appsLoading}
onChange={onFilterChange('application')}
createCustomValue={true}
placeholder="Application name"
/>
</InlineField>

2
src/datasource/components/QueryEditor/ServicesQueryEditor.tsx
View File

@@ -95,6 +95,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => {
options={itServicesOptions}
isLoading={itServicesLoading}
onChange={onStringPropChange('itServiceFilter')}
createCustomValue={true}
placeholder="Service name"
/>
</InlineField>
@@ -105,6 +106,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => {
options={slaOptions}
isLoading={slaLoading}
onChange={onStringPropChange('slaFilter')}
createCustomValue={true}
placeholder="SLA name"
/>
</InlineField>

4
src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx
View File

@@ -144,6 +144,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
options={groupsOptions}
isLoading={groupsLoading}
onChange={onFilterChange('group')}
createCustomValue={true}
placeholder="Group name"
/>
</InlineField>
@@ -154,6 +155,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
options={hostOptions}
isLoading={hostsLoading}
onChange={onFilterChange('host')}
createCustomValue={true}
placeholder="Host name"
/>
</InlineField>
@@ -166,6 +168,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
options={appOptions}
isLoading={appsLoading}
onChange={onFilterChange('application')}
createCustomValue={true}
placeholder="Application name"
/>
</InlineField>
@@ -176,6 +179,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
options={itemOptions}
isLoading={itemsLoading}
onChange={onFilterChange('item')}
createCustomValue={true}
placeholder="Item name"
/>
</InlineField>

6
src/datasource/components/QueryEditor/TriggersQueryEditor.tsx
View File

@@ -230,6 +230,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
isLoading={groupsLoading}
onChange={onFilterChange('group')}
placeholder="Group name"
createCustomValue={true}
/>
</InlineField>
<InlineField label="Host" labelWidth={12}>
@@ -239,6 +240,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
options={hostOptions}
isLoading={hostsLoading}
onChange={onFilterChange('host')}
createCustomValue={true}
placeholder="Host name"
/>
</InlineField>
@@ -250,6 +252,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
options={proxiesOptions}
isLoading={proxiesLoading}
onChange={onFilterChange('proxy')}
createCustomValue={true}
placeholder="Proxy name"
/>
</InlineField>
@@ -264,6 +267,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
options={appOptions}
isLoading={appsLoading}
onChange={onFilterChange('application')}
createCustomValue={true}
placeholder="Application name"
/>
</InlineField>
@@ -276,6 +280,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
options={tagOptions}
isLoading={tagsLoading}
onChange={onFilterChange('itemTag')}
createCustomValue={true}
placeholder="Item tag name"
/>
</InlineField>
@@ -300,6 +305,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
options={itemOptions}
isLoading={itemsLoading}
onChange={onFilterChange('item')}
createCustomValue={true}
placeholder="Item name"
/>
</InlineField>

3
src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx
View File

@@ -101,6 +101,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
options={groupsOptions}
isLoading={groupsLoading}
onChange={onFilterChange('group')}
createCustomValue={true}
placeholder="Group name"
/>
</InlineField>
@@ -111,6 +112,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
options={hostOptions}
isLoading={hostsLoading}
onChange={onFilterChange('host')}
createCustomValue={true}
placeholder="Host name"
/>
</InlineField>
@@ -123,6 +125,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
options={macrosOptions}
isLoading={macrosLoading}
onChange={onFilterChange('macro')}
createCustomValue={true}
placeholder="Macro name"
/>
</InlineField>