From 9fda7768ff6b76dad755df78f82b5ce990e01970 Mon Sep 17 00:00:00 2001 From: Jocelyn Collado-Kuri Date: Mon, 5 Jan 2026 09:34:17 -0800 Subject: [PATCH] Add support to use custom values in dropdown (#2163) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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. Screenshot 2026-01-05 at 7 15 23 AM ## 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 --- .changeset/full-parrots-crash.md | 5 +++++ src/components/MetricPicker/MetricPicker.tsx | 4 +++- .../components/QueryEditor/HostTagQueryEditor.tsx | 1 + .../components/QueryEditor/MetricsQueryEditor.tsx | 5 +++++ .../components/QueryEditor/ProblemsQueryEditor.tsx | 4 ++++ .../components/QueryEditor/ServicesQueryEditor.tsx | 2 ++ .../components/QueryEditor/TextMetricsQueryEditor.tsx | 4 ++++ .../components/QueryEditor/TriggersQueryEditor.tsx | 6 ++++++ .../components/QueryEditor/UserMacrosQueryEditor.tsx | 3 +++ 9 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 .changeset/full-parrots-crash.md diff --git a/.changeset/full-parrots-crash.md b/.changeset/full-parrots-crash.md new file mode 100644 index 0000000..9ae2fb4 --- /dev/null +++ b/.changeset/full-parrots-crash.md @@ -0,0 +1,5 @@ +--- +'grafana-zabbix': minor +--- + +Support adding custom values in dropdowns for all query types diff --git a/src/components/MetricPicker/MetricPicker.tsx b/src/components/MetricPicker/MetricPicker.tsx index 84eff49..ee27c6b 100644 --- a/src/components/MetricPicker/MetricPicker.tsx +++ b/src/components/MetricPicker/MetricPicker.tsx @@ -9,10 +9,11 @@ export interface Props { isLoading?: boolean; options: Array>; 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(null); const onMenuOptionSelect = (option: SelectableValue) => { @@ -23,6 +24,7 @@ export const MetricPicker = ({ value, placeholder, options, isLoading, width, on return (
+ createCustomValue={createCustomValue ?? false} width={width} value={value} options={options ?? []} diff --git a/src/datasource/components/QueryEditor/HostTagQueryEditor.tsx b/src/datasource/components/QueryEditor/HostTagQueryEditor.tsx index a0afcf1..337ded1 100644 --- a/src/datasource/components/QueryEditor/HostTagQueryEditor.tsx +++ b/src/datasource/components/QueryEditor/HostTagQueryEditor.tsx @@ -105,6 +105,7 @@ export const HostTagQueryEditor = ({ options={hostTagOptions ?? []} width={19} loading={hostTagOptionsLoading} + createCustomValue={true} /> @@ -259,6 +260,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha isLoading={hostsLoading} onChange={onFilterChange('host')} placeholder="Host name" + createCustomValue={true} /> @@ -271,6 +273,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha options={appOptions} isLoading={appsLoading} onChange={onFilterChange('application')} + createCustomValue={true} placeholder="Application name" /> @@ -283,6 +286,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha options={tagOptions} isLoading={tagsLoading} onChange={onFilterChange('itemTag')} + createCustomValue={true} placeholder="Item tag name" /> @@ -294,6 +298,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange, onItemCountCha options={itemOptions} isLoading={itemsLoading} onChange={onFilterChange('item')} + createCustomValue={true} placeholder="Item name" /> diff --git a/src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx b/src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx index dc44831..916cfa4 100644 --- a/src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx +++ b/src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx @@ -166,6 +166,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => { options={groupsOptions} isLoading={groupsLoading} onChange={onFilterChange('group')} + createCustomValue={true} placeholder="Group name" /> @@ -176,6 +177,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => { options={hostOptions} isLoading={hostsLoading} onChange={onFilterChange('host')} + createCustomValue={true} placeholder="Host name" /> @@ -186,6 +188,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => { options={proxiesOptions} isLoading={proxiesLoading} onChange={onFilterChange('proxy')} + createCustomValue={true} placeholder="Proxy name" /> @@ -199,6 +202,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => { options={appOptions} isLoading={appsLoading} onChange={onFilterChange('application')} + createCustomValue={true} placeholder="Application name" /> diff --git a/src/datasource/components/QueryEditor/ServicesQueryEditor.tsx b/src/datasource/components/QueryEditor/ServicesQueryEditor.tsx index ee889d8..0e006b7 100644 --- a/src/datasource/components/QueryEditor/ServicesQueryEditor.tsx +++ b/src/datasource/components/QueryEditor/ServicesQueryEditor.tsx @@ -95,6 +95,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => { options={itServicesOptions} isLoading={itServicesLoading} onChange={onStringPropChange('itServiceFilter')} + createCustomValue={true} placeholder="Service name" /> @@ -105,6 +106,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => { options={slaOptions} isLoading={slaLoading} onChange={onStringPropChange('slaFilter')} + createCustomValue={true} placeholder="SLA name" /> diff --git a/src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx b/src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx index d7f3d7b..cef9ac8 100644 --- a/src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx +++ b/src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx @@ -144,6 +144,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) = options={groupsOptions} isLoading={groupsLoading} onChange={onFilterChange('group')} + createCustomValue={true} placeholder="Group name" /> @@ -154,6 +155,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) = options={hostOptions} isLoading={hostsLoading} onChange={onFilterChange('host')} + createCustomValue={true} placeholder="Host name" /> @@ -166,6 +168,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) = options={appOptions} isLoading={appsLoading} onChange={onFilterChange('application')} + createCustomValue={true} placeholder="Application name" /> @@ -176,6 +179,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) = options={itemOptions} isLoading={itemsLoading} onChange={onFilterChange('item')} + createCustomValue={true} placeholder="Item name" /> diff --git a/src/datasource/components/QueryEditor/TriggersQueryEditor.tsx b/src/datasource/components/QueryEditor/TriggersQueryEditor.tsx index 3173fbf..cde4e37 100644 --- a/src/datasource/components/QueryEditor/TriggersQueryEditor.tsx +++ b/src/datasource/components/QueryEditor/TriggersQueryEditor.tsx @@ -230,6 +230,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => { isLoading={groupsLoading} onChange={onFilterChange('group')} placeholder="Group name" + createCustomValue={true} /> @@ -239,6 +240,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => { options={hostOptions} isLoading={hostsLoading} onChange={onFilterChange('host')} + createCustomValue={true} placeholder="Host name" /> @@ -250,6 +252,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => { options={proxiesOptions} isLoading={proxiesLoading} onChange={onFilterChange('proxy')} + createCustomValue={true} placeholder="Proxy name" /> @@ -264,6 +267,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => { options={appOptions} isLoading={appsLoading} onChange={onFilterChange('application')} + createCustomValue={true} placeholder="Application name" /> @@ -276,6 +280,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => { options={tagOptions} isLoading={tagsLoading} onChange={onFilterChange('itemTag')} + createCustomValue={true} placeholder="Item tag name" /> @@ -300,6 +305,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => { options={itemOptions} isLoading={itemsLoading} onChange={onFilterChange('item')} + createCustomValue={true} placeholder="Item name" /> diff --git a/src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx b/src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx index 64a9490..57affa1 100644 --- a/src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx +++ b/src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx @@ -101,6 +101,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) => options={groupsOptions} isLoading={groupsLoading} onChange={onFilterChange('group')} + createCustomValue={true} placeholder="Group name" /> @@ -111,6 +112,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) => options={hostOptions} isLoading={hostsLoading} onChange={onFilterChange('host')} + createCustomValue={true} placeholder="Host name" /> @@ -123,6 +125,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) => options={macrosOptions} isLoading={macrosLoading} onChange={onFilterChange('macro')} + createCustomValue={true} placeholder="Macro name" />