Standardization across Zabbix UI components (#2141)

## Summary Throughout Zabbix we did not have a uniform UI - some drop-down were using `Select` others `Combobox` others a custom one that we created. Some had placeholders and others did not. This PR aims to standardize our Zabbix UI across our query, variable and config editors ## Detailed summary - Migrate from `Select` to `Combobox` -> `Select` component is deprecated - Migrate from `HorizontalGroup` to `Stack` -> `HorizontalGroup` is also deprecated - Remove use of "custom" dropdown `MetricPickerMenu` in favor of `Combobox` ensuring uniformity across our drop-down and removing maintenance overhead for us down the line - Standardize placeholders across all inputs <img width="630" height="243" alt="Screenshot 2025-12-17 at 1 13 45 PM" src="https://github.com/user-attachments/assets/9382057e-b443-4474-a9c8-850086d7f3d4" /> <img width="691" height="256" alt="Screenshot 2025-12-17 at 1 14 05 PM" src="https://github.com/user-attachments/assets/a05ff2af-8603-4752-8d12-337dc381c0fd" /> ## Why To have a clean and standard UI and remove use of UI deprecated packages. ## How to test - Query Editor: - By creating a new query in a dashboard or Explore and interacting with all the different query types and drop-downs - All drop-downs should be searchable and have placeholders - Config Editor: - By going to a datasource and ensuring that the dropdown for Datasource (when DB connection is enabled) and Auth type are responsive and working as expected) Fixes: https://github.com/orgs/grafana/projects/457/views/40?pane=issue&itemId=3740545830&issue=grafana%7Coss-big-tent-squad%7C139
2025-12-18 06:28:29 -08:00
parent ce4a8d3e19
commit 127367464e
14 changed files with 152 additions and 356 deletions
--- a/src/datasource/components/AnnotationQueryEditor.tsx
+++ b/src/datasource/components/AnnotationQueryEditor.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React, { useEffect, FormEvent } from 'react';
 import { useAsyncFn } from 'react-use';
 import { AnnotationQuery, SelectableValue } from '@grafana/data';
-import { InlineField, InlineSwitch, Input, Select } from '@grafana/ui';
+import { Combobox, ComboboxOption, InlineField, InlineSwitch, Input } from '@grafana/ui';
 import { ZabbixMetricsQuery } from '../types/query';
 import { ZabbixQueryEditorProps } from './QueryEditor';
 import { QueryEditorRow } from './QueryEditor/QueryEditorRow';
@@ -11,7 +11,7 @@ import { getVariableOptions } from './QueryEditor/utils';
 import { prepareAnnotation } from '../migrations';
 import { useInterpolatedQuery } from '../hooks/useInterpolatedQuery';

-const severityOptions: Array<SelectableValue<number>> = [
+const severityOptions: Array<ComboboxOption<number>> = [
  { value: 0, label: 'Not classified' },
  { value: 1, label: 'Information' },
  { value: 2, label: 'Warning' },
@@ -47,7 +47,7 @@ export const AnnotationQueryEditor = ({ annotation, onAnnotationChange, datasour

  const loadHostOptions = async (group: string) => {
    const hosts = await datasource.zabbix.getAllHosts(group);
-    let options: Array<SelectableValue<string>> = hosts?.map((host) => ({
+    let options: Array<ComboboxOption<string>> = hosts?.map((host) => ({
      value: host.name,
      label: host.name,
    }));
@@ -64,7 +64,7 @@ export const AnnotationQueryEditor = ({ annotation, onAnnotationChange, datasour

  const loadAppOptions = async (group: string, host: string) => {
    const apps = await datasource.zabbix.getAllApps(group, host);
-    let options: Array<SelectableValue<string>> = apps?.map((app) => ({
+    let options: Array<ComboboxOption<string>> = apps?.map((app) => ({
      value: app.name,
      label: app.name,
    }));
@@ -138,6 +138,7 @@ export const AnnotationQueryEditor = ({ annotation, onAnnotationChange, datasour
            options={groupsOptions}
            isLoading={groupsLoading}
            onChange={onFilterChange('group')}
+            placeholder="Group name"
          />
        </InlineField>
        <InlineField label="Host" labelWidth={12}>
@@ -147,6 +148,7 @@ export const AnnotationQueryEditor = ({ annotation, onAnnotationChange, datasour
            options={hostOptions}
            isLoading={hostsLoading}
            onChange={onFilterChange('host')}
+            placeholder="Host name"
          />
        </InlineField>
      </QueryEditorRow>
@@ -158,6 +160,7 @@ export const AnnotationQueryEditor = ({ annotation, onAnnotationChange, datasour
            options={appOptions}
            isLoading={appsLoading}
            onChange={onFilterChange('application')}
+            placeholder="Application name"
          />
        </InlineField>
        <InlineField label="Problem" labelWidth={12}>
@@ -171,8 +174,7 @@ export const AnnotationQueryEditor = ({ annotation, onAnnotationChange, datasour
      </QueryEditorRow>
      <>
        <InlineField label="Min severity" labelWidth={12}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={query.options?.minSeverity}
            options={severityOptions}
--- a/src/datasource/components/ConfigEditor.tsx
+++ b/src/datasource/components/ConfigEditor.tsx
@@ -2,13 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { getDataSourceSrv, config } from '@grafana/runtime';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings, GrafanaTheme2, SelectableValue } from '@grafana/data';
 import {
+  Combobox,
+  ComboboxOption,
  Field,
  Icon,
  Input,
  Label,
  SecretInput,
  SecureSocksProxySettings,
-  Select,
  Switch,
  Tooltip,
  useStyles2,
@@ -31,7 +32,7 @@ import { css } from '@emotion/css';
 // the postgres-plugin changed it's id, so we list both the old name and the new name
 const SUPPORTED_SQL_DS = ['mysql', 'grafana-postgresql-datasource', 'postgres', 'influxdb'];

-const authOptions: Array<SelectableValue<ZabbixAuthType>> = [
+const authOptions: Array<ComboboxOption<ZabbixAuthType>> = [
  { label: 'User and password', value: ZabbixAuthType.UserLogin },
  { label: 'API token', value: ZabbixAuthType.Token },
 ];
@@ -130,7 +131,7 @@ export const ConfigEditor = (props: Props) => {

      <ConfigSection title="Zabbix Connection">
        <Field label="Auth type">
-          <Select
+          <Combobox
            width={40}
            options={authOptions}
            value={options.jsonData.authType}
@@ -313,7 +314,7 @@ export const ConfigEditor = (props: Props) => {
          {options.jsonData.dbConnectionEnable && (
            <>
              <Field label="Data Source">
-                <Select
+                <Combobox
                  width={40}
                  value={selectedDBDatasource}
                  options={getDirectDBDSOptions()}
@@ -323,6 +324,7 @@ export const ConfigEditor = (props: Props) => {
                    setSelectedDBDatasource,
                    setCurrentDSType
                  )}
+                  placeholder="Select a DB datasource (MySQL, PostgreSQL, InfluxDB)"
                />
              </Field>

@@ -419,7 +421,7 @@ const jsonDataSelectHandler =
    value: DataSourceSettings<ZabbixDSOptions, ZabbixSecureJSONData>,
    onChange: Props['onOptionsChange']
  ) =>
-  (option: SelectableValue) => {
+  (option: ComboboxOption) => {
    onChange({
      ...value,
      jsonData: {
@@ -505,7 +507,7 @@ const getDirectDBDatasources = () => {

 const getDirectDBDSOptions = () => {
  const dsList = getDirectDBDatasources();
-  const dsOpts: Array<SelectableValue<number>> = dsList.map((ds) => ({
+  const dsOpts: Array<ComboboxOption<number>> = dsList.map((ds) => ({
    label: ds.name,
    value: ds.id,
    description: ds.type,
--- a/src/datasource/components/QueryEditor.tsx
+++ b/src/datasource/components/QueryEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import { QueryEditorProps, SelectableValue } from '@grafana/data';
-import { InlineField, Select } from '@grafana/ui';
+import { QueryEditorProps } from '@grafana/data';
+import { Combobox, ComboboxOption, InlineField, Stack } from '@grafana/ui';
 import * as c from '../constants';
 import { migrate, DS_QUERY_SCHEMA } from '../migrations';
 import { ZabbixDatasource } from '../datasource';
@@ -17,7 +17,7 @@ import { TriggersQueryEditor } from './QueryEditor/TriggersQueryEditor';
 import { UserMacrosQueryEditor } from './QueryEditor/UserMacrosQueryEditor';
 import { QueryEditorRow } from './QueryEditor/QueryEditorRow';

-const zabbixQueryTypeOptions: Array<SelectableValue<QueryType>> = [
+const zabbixQueryTypeOptions: Array<ComboboxOption<QueryType>> = [
  {
    value: c.MODE_METRICS,
    label: 'Metrics',
@@ -133,7 +133,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
  }, []);

  const onPropChange = (prop: string) => {
-    return (option: SelectableValue) => {
+    return (option: ComboboxOption) => {
      if (option.value !== null) {
        onChangeInternal({ ...query, [prop]: option.value });
      }
@@ -171,7 +171,6 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
    return (
      <>
        <TextMetricsQueryEditor query={query} datasource={datasource} onChange={onChangeInternal} />
-        {/* <QueryFunctionsEditor query={query} onChange={onChangeInternal} /> */}
      </>
    );
  };
@@ -198,11 +197,10 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
  };

  return (
-    <>
+    <Stack direction="column">
      <QueryEditorRow>
        <InlineField label="Query type" labelWidth={12}>
-          <Select<QueryType>
-            isSearchable={false}
+          <Combobox<QueryType>
            width={24}
            value={queryType}
            options={zabbixQueryTypeOptions}
@@ -218,6 +216,6 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
      {queryType === c.MODE_TRIGGERS && renderTriggersEditor()}
      {queryType === c.MODE_MACROS && renderUserMacrosEditor()}
      <QueryOptionsEditor queryType={queryType} queryOptions={query.options} onChange={onOptionsChange} />
-    </>
+    </Stack>
  );
 };
--- a/src/datasource/components/QueryEditor/MetricsQueryEditor.tsx
+++ b/src/datasource/components/QueryEditor/MetricsQueryEditor.tsx
@@ -2,8 +2,7 @@ import _ from 'lodash';
 import React, { useEffect } from 'react';
 import { useAsyncFn } from 'react-use';

-import { SelectableValue } from '@grafana/data';
-import { InlineField } from '@grafana/ui';
+import { InlineField, ComboboxOption } from '@grafana/ui';
 import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
@@ -39,7 +38,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {

  const loadHostOptions = async (group: string) => {
    const hosts = await datasource.zabbix.getAllHosts(group);
-    let options: Array<SelectableValue<string>> = hosts?.map((host) => ({
+    let options: Array<ComboboxOption<string>> = hosts?.map((host) => ({
      value: host.name,
      label: host.name,
    }));
@@ -56,7 +55,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {

  const loadAppOptions = async (group: string, host: string) => {
    const apps = await datasource.zabbix.getAllApps(group, host);
-    let options: Array<SelectableValue<string>> = apps?.map((app) => ({
+    let options: Array<ComboboxOption<string>> = apps?.map((app) => ({
      value: app.name,
      label: app.name,
    }));
@@ -81,7 +80,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {
    // const tags: ZBXItemTag[] = await datasource.zabbix.getItemTags(groupFilter, hostFilter, null);

    const tagList = _.uniqBy(tags, (t) => t.tag + t.value || '').map((t) => itemTagToString(t));
-    let options: Array<SelectableValue<string>> = tagList?.map((tag) => ({
+    let options: Array<ComboboxOption<string>> = tagList?.map((tag) => ({
      value: tag,
      label: tag,
    }));
@@ -101,7 +100,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {
      showDisabledItems: query.options.showDisabledItems,
    };
    const items = await datasource.zabbix.getAllItems(group, host, app, itemTag, options);
-    let itemOptions: Array<SelectableValue<string>> = items?.map((item) => ({
+    let itemOptions: Array<ComboboxOption<string>> = items?.map((item) => ({
      value: item.name,
      label: item.name,
    }));
@@ -171,6 +170,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={groupsOptions}
            isLoading={groupsLoading}
            onChange={onFilterChange('group')}
+            placeholder="Group name"
          />
        </InlineField>
        <InlineField label="Host" labelWidth={12}>
@@ -180,6 +180,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={hostOptions}
            isLoading={hostsLoading}
            onChange={onFilterChange('host')}
+            placeholder="Host name"
          />
        </InlineField>
      </QueryEditorRow>
@@ -192,6 +193,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {
              options={appOptions}
              isLoading={appsLoading}
              onChange={onFilterChange('application')}
+              placeholder="Application name"
            />
          </InlineField>
        )}
@@ -203,6 +205,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {
              options={tagOptions}
              isLoading={tagsLoading}
              onChange={onFilterChange('itemTag')}
+              placeholder="Item tag name"
            />
          </InlineField>
        )}
@@ -213,6 +216,7 @@ export const MetricsQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={itemOptions}
            isLoading={itemsLoading}
            onChange={onFilterChange('item')}
+            placeholder="Item name"
          />
        </InlineField>
      </QueryEditorRow>
--- a/src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx
+++ b/src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, FormEvent } from 'react';
 import { useAsyncFn } from 'react-use';

 import { SelectableValue } from '@grafana/data';
-import { InlineField, Input, MultiSelect, Select } from '@grafana/ui';
+import { Combobox, ComboboxOption, InlineField, Input, MultiSelect } from '@grafana/ui';
 import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
@@ -11,7 +11,7 @@ import { ZabbixDatasource } from '../../datasource';
 import { ZabbixMetricsQuery, ZabbixTagEvalType } from '../../types/query';
 import { useInterpolatedQuery } from '../../hooks/useInterpolatedQuery';

-const showProblemsOptions: Array<SelectableValue<string>> = [
+const showProblemsOptions: Array<ComboboxOption<string>> = [
  { label: 'Problems', value: 'problems' },
  { label: 'Recent problems', value: 'recent' },
  { label: 'History', value: 'history' },
@@ -26,7 +26,7 @@ const severityOptions: Array<SelectableValue<number>> = [
  { value: 5, label: 'Disaster' },
 ];

-const evaltypeOptions: Array<SelectableValue<ZabbixTagEvalType>> = [
+const evaltypeOptions: Array<ComboboxOption<ZabbixTagEvalType>> = [
  { label: 'AND/OR', value: ZabbixTagEvalType.AndOr },
  { label: 'OR', value: ZabbixTagEvalType.Or },
 ];
@@ -57,7 +57,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {

  const loadHostOptions = async (group: string) => {
    const hosts = await datasource.zabbix.getAllHosts(group);
-    let options: Array<SelectableValue<string>> = hosts?.map((host) => ({
+    let options: Array<ComboboxOption<string>> = hosts?.map((host) => ({
      value: host.name,
      label: host.name,
    }));
@@ -74,7 +74,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {

  const loadAppOptions = async (group: string, host: string) => {
    const apps = await datasource.zabbix.getAllApps(group, host);
-    let options: Array<SelectableValue<string>> = apps?.map((app) => ({
+    let options: Array<ComboboxOption<string>> = apps?.map((app) => ({
      value: app.name,
      label: app.name,
    }));
@@ -166,6 +166,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={groupsOptions}
            isLoading={groupsLoading}
            onChange={onFilterChange('group')}
+            placeholder="Group name"
          />
        </InlineField>
        <InlineField label="Host" labelWidth={12}>
@@ -175,6 +176,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={hostOptions}
            isLoading={hostsLoading}
            onChange={onFilterChange('host')}
+            placeholder="Host name"
          />
        </InlineField>
        <InlineField label="Proxy" labelWidth={12}>
@@ -184,6 +186,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={proxiesOptions}
            isLoading={proxiesLoading}
            onChange={onFilterChange('proxy')}
+            placeholder="Proxy name"
          />
        </InlineField>
      </QueryEditorRow>
@@ -196,6 +199,7 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
              options={appOptions}
              isLoading={appsLoading}
              onChange={onFilterChange('application')}
+              placeholder="Application name"
            />
          </InlineField>
        )}
@@ -216,19 +220,12 @@ export const ProblemsQueryEditor = ({ query, datasource, onChange }: Props) => {
          />
        </InlineField>
        <InlineField>
-          <Select
-            isSearchable={false}
-            width={15}
-            value={query.evaltype}
-            options={evaltypeOptions}
-            onChange={onPropChange('evaltype')}
-          />
+          <Combobox width={15} value={query.evaltype} options={evaltypeOptions} onChange={onPropChange('evaltype')} />
        </InlineField>
      </QueryEditorRow>
      <QueryEditorRow>
        <InlineField label="Show" labelWidth={12}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={query.showProblems}
            options={showProblemsOptions}
--- a/src/datasource/components/QueryEditor/QueryOptionsEditor.tsx
+++ b/src/datasource/components/QueryEditor/QueryOptionsEditor.tsx
@@ -2,31 +2,32 @@ import { css } from '@emotion/css';
 import React, { useState, FormEvent, ReactNode } from 'react';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import {
-  HorizontalGroup,
+  Combobox,
+  ComboboxOption,
  Icon,
  InlineField,
  InlineFieldRow,
  InlineSwitch,
  Input,
-  Select,
+  Stack,
  useStyles2,
 } from '@grafana/ui';
 import * as c from '../../constants';
 import { ZabbixQueryOptions } from '../../types/query';

-const ackOptions: Array<SelectableValue<number>> = [
+const ackOptions: Array<ComboboxOption<number>> = [
  { label: 'all triggers', value: 2 },
  { label: 'unacknowledged', value: 0 },
  { label: 'acknowledged', value: 1 },
 ];

-const sortOptions: Array<SelectableValue<string>> = [
+const sortOptions: Array<ComboboxOption<string>> = [
  { label: 'Default', value: 'default' },
  { label: 'Last change', value: 'lastchange' },
  { label: 'Severity', value: 'severity' },
 ];

-const trendsOptions: Array<SelectableValue<string>> = [
+const trendsOptions: Array<ComboboxOption<string>> = [
  { label: 'Default', value: 'default' },
  { label: 'True', value: 'true' },
  { label: 'False', value: 'false' },
@@ -60,12 +61,12 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)
  const renderClosed = () => {
    return (
      <>
-        <HorizontalGroup>
+        <Stack>
          {!isOpen && <Icon name="angle-right" />}
          {isOpen && <Icon name="angle-down" />}
          <span className={styles.label}>Options</span>
          <div className={styles.options}>{renderOptions()}</div>
-        </HorizontalGroup>
+        </Stack>
      </>
    );
  };
@@ -100,8 +101,7 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)
    return (
      <>
        <InlineField label="Trends" labelWidth={24}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={16}
            value={queryOptions.useTrends}
            options={trendsOptions}
@@ -147,8 +147,7 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)
    return (
      <>
        <InlineField label="Acknowledged" labelWidth={24}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={queryOptions.acknowledged}
            options={ackOptions}
@@ -156,8 +155,7 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)
          />
        </InlineField>
        <InlineField label="Sort by" labelWidth={24}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={queryOptions.sortProblems}
            options={sortOptions}
@@ -193,8 +191,7 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)
    return (
      <>
        <InlineField label="Acknowledged" labelWidth={24}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={queryOptions.acknowledged}
            options={ackOptions}
@@ -213,7 +210,7 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)

  return (
    <>
-      <InlineFieldRow>
+      <InlineFieldRow style={{ alignItems: 'center' }}>
        <div className={styles.container} onClick={() => setIsOpen(!isOpen)}>
          {renderClosed()}
        </div>
@@ -226,12 +223,14 @@ export const QueryOptionsEditor = ({ queryType, queryOptions, onChange }: Props)
 const getStyles = (theme: GrafanaTheme2) => ({
  container: css({
    backgroundColor: theme.colors.background.secondary,
-    borderRadius: theme.shape.borderRadius(),
+    borderRadius: theme.shape.radius.default,
    marginRight: theme.spacing(0.5),
    marginBottom: theme.spacing(0.5),
    padding: `0 ${theme.spacing(1)}`,
-    height: `${theme.v1.spacing.formInputHeight}px`,
+    height: theme.spacing(4),
    width: `100%`,
+    display: 'flex',
+    alignItems: 'center',
  }),
  label: css({
    color: theme.colors.info.text,
@@ -241,13 +240,15 @@ const getStyles = (theme: GrafanaTheme2) => ({
  options: css({
    color: theme.colors.text.disabled,
    fontSize: theme.typography.bodySmall.fontSize,
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  optionContainer: css({
+    marginRight: theme.spacing(2),
+  }),
+  editorContainer: css({
+    display: 'flex',
+    flexDirection: 'column',
+    marginLeft: theme.spacing(4),
  }),
-  optionContainer: css`
-    margin-right: ${theme.spacing(2)};
-  `,
-  editorContainer: css`
-    display: flex;
-    flex-direction: column;
-    margin-left: ${theme.spacing(4)};
-  `,
 });
--- a/src/datasource/components/QueryEditor/ServicesQueryEditor.tsx
+++ b/src/datasource/components/QueryEditor/ServicesQueryEditor.tsx
@@ -2,15 +2,14 @@ import _ from 'lodash';
 import React, { useEffect } from 'react';
 import { useAsyncFn } from 'react-use';

-import { SelectableValue } from '@grafana/data';
-import { InlineField, Select } from '@grafana/ui';
+import { Combobox, ComboboxOption, InlineField } from '@grafana/ui';
 import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
 import { ZabbixDatasource } from '../../datasource';
 import { ZabbixMetricsQuery } from '../../types/query';

-const slaPropertyList: Array<SelectableValue<string>> = [
+const slaPropertyList: Array<ComboboxOption<string>> = [
  { label: 'Status', value: 'status' },
  { label: 'SLI', value: 'sli' },
  { label: 'Uptime', value: 'uptime' },
@@ -18,7 +17,7 @@ const slaPropertyList: Array<SelectableValue<string>> = [
  { label: 'Error budget', value: 'error_budget' },
 ];

-const slaIntervals: Array<SelectableValue<string>> = [
+const slaIntervals: Array<ComboboxOption<string>> = [
  { label: 'No interval', value: 'none' },
  { label: 'Auto', value: 'auto' },
  { label: '1 hour', value: '1h' },
@@ -71,7 +70,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => {
  }, []);

  const onPropChange = (prop: string) => {
-    return (option: SelectableValue) => {
+    return (option: ComboboxOption) => {
      if (option.value) {
        onChange({ ...query, [prop]: option.value });
      }
@@ -96,6 +95,7 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={itServicesOptions}
            isLoading={itServicesLoading}
            onChange={onStringPropChange('itServiceFilter')}
+            placeholder="Service name"
          />
        </InlineField>
        <InlineField label="SLA" labelWidth={12}>
@@ -105,26 +105,27 @@ export const ServicesQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={slaOptions}
            isLoading={slaLoading}
            onChange={onStringPropChange('slaFilter')}
+            placeholder="SLA name"
          />
        </InlineField>
      </QueryEditorRow>
      <QueryEditorRow>
        <InlineField label="Property" labelWidth={12}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={query.slaProperty}
            options={slaPropertyList}
            onChange={onPropChange('slaProperty')}
+            placeholder="Property name"
          />
        </InlineField>
        <InlineField label="Interval" labelWidth={12}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={query.slaInterval}
            options={slaIntervals}
            onChange={onPropChange('slaInterval')}
+            placeholder="SLA interval"
          />
        </InlineField>
      </QueryEditorRow>
--- a/src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx
+++ b/src/datasource/components/QueryEditor/TextMetricsQueryEditor.tsx
@@ -2,8 +2,7 @@ import _ from 'lodash';
 import React, { useEffect, FormEvent } from 'react';
 import { useAsyncFn } from 'react-use';

-import { SelectableValue } from '@grafana/data';
-import { InlineField, InlineSwitch, Input } from '@grafana/ui';
+import { InlineField, InlineSwitch, Input, ComboboxOption } from '@grafana/ui';
 import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
@@ -37,7 +36,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =

  const loadHostOptions = async (group: string) => {
    const hosts = await datasource.zabbix.getAllHosts(group);
-    let options: Array<SelectableValue<string>> = hosts?.map((host) => ({
+    let options: Array<ComboboxOption<string>> = hosts?.map((host) => ({
      value: host.name,
      label: host.name,
    }));
@@ -54,7 +53,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =

  const loadAppOptions = async (group: string, host: string) => {
    const apps = await datasource.zabbix.getAllApps(group, host);
-    let options: Array<SelectableValue<string>> = apps?.map((app) => ({
+    let options: Array<ComboboxOption<string>> = apps?.map((app) => ({
      value: app.name,
      label: app.name,
    }));
@@ -74,7 +73,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
      showDisabledItems: query.options.showDisabledItems,
    };
    const items = await datasource.zabbix.getAllItems(group, host, app, itemTag, options);
-    let itemOptions: Array<SelectableValue<string>> = items?.map((item) => ({
+    let itemOptions: Array<ComboboxOption<string>> = items?.map((item) => ({
      value: item.name,
      label: item.name,
    }));
@@ -145,6 +144,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
            options={groupsOptions}
            isLoading={groupsLoading}
            onChange={onFilterChange('group')}
+            placeholder="Group name"
          />
        </InlineField>
        <InlineField label="Host" labelWidth={12}>
@@ -154,6 +154,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
            options={hostOptions}
            isLoading={hostsLoading}
            onChange={onFilterChange('host')}
+            placeholder="Host name"
          />
        </InlineField>
      </QueryEditorRow>
@@ -165,6 +166,7 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
            options={appOptions}
            isLoading={appsLoading}
            onChange={onFilterChange('application')}
+            placeholder="Application name"
          />
        </InlineField>
        <InlineField label="Item" labelWidth={12}>
@@ -174,12 +176,18 @@ export const TextMetricsQueryEditor = ({ query, datasource, onChange }: Props) =
            options={itemOptions}
            isLoading={itemsLoading}
            onChange={onFilterChange('item')}
+            placeholder="Item name"
          />
        </InlineField>
      </QueryEditorRow>
      <QueryEditorRow>
        <InlineField label="Text filter" labelWidth={12}>
-          <Input width={24} defaultValue={query.textFilter} onBlur={onTextFilterChange} />
+          <Input
+            width={24}
+            defaultValue={query.textFilter}
+            onBlur={onTextFilterChange}
+            placeholder="Metric text filter"
+          />
        </InlineField>
        <InlineField label="Use capture groups" labelWidth={18}>
          <InlineSwitch
--- a/src/datasource/components/QueryEditor/TriggersQueryEditor.tsx
+++ b/src/datasource/components/QueryEditor/TriggersQueryEditor.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, FormEvent } from 'react';
 import { useAsyncFn } from 'react-use';

 import { SelectableValue } from '@grafana/data';
-import { InlineField, InlineSwitch, Input, Select } from '@grafana/ui';
+import { Combobox, ComboboxOption, InlineField, InlineSwitch, Input } from '@grafana/ui';
 import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
@@ -13,13 +13,13 @@ import { ZabbixMetricsQuery } from '../../types/query';
 import { ZBXItem, ZBXItemTag } from '../../types';
 import { useInterpolatedQuery } from '../../hooks/useInterpolatedQuery';

-const countByOptions: Array<SelectableValue<string>> = [
+const countByOptions: Array<ComboboxOption<string>> = [
  { value: '', label: 'All triggers' },
  { value: 'problems', label: 'Problems' },
  { value: 'items', label: 'Items' },
 ];

-const severityOptions: Array<SelectableValue<number>> = [
+const severityOptions: Array<ComboboxOption<number>> = [
  { value: 0, label: 'Not classified' },
  { value: 1, label: 'Information' },
  { value: 2, label: 'Warning' },
@@ -54,7 +54,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {

  const loadHostOptions = async (group: string) => {
    const hosts = await datasource.zabbix.getAllHosts(group);
-    let options: Array<SelectableValue<string>> = hosts?.map((host) => ({
+    let options: Array<ComboboxOption<string>> = hosts?.map((host) => ({
      value: host.name,
      label: host.name,
    }));
@@ -71,7 +71,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {

  const loadAppOptions = async (group: string, host: string) => {
    const apps = await datasource.zabbix.getAllApps(group, host);
-    let options: Array<SelectableValue<string>> = apps?.map((app) => ({
+    let options: Array<ComboboxOption<string>> = apps?.map((app) => ({
      value: app.name,
      label: app.name,
    }));
@@ -94,7 +94,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
    const tags: ZBXItemTag[] = _.flatten(items.map((item: ZBXItem) => item.tags || []));

    const tagList = _.uniqBy(tags, (t) => t.tag + t.value || '').map((t) => itemTagToString(t));
-    let options: Array<SelectableValue<string>> = tagList?.map((tag) => ({
+    let options: Array<ComboboxOption<string>> = tagList?.map((tag) => ({
      value: tag,
      label: tag,
    }));
@@ -129,7 +129,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
      showDisabledItems: query.options.showDisabledItems,
    };
    const items = await datasource.zabbix.getAllItems(group, host, app, itemTag, options);
-    let itemOptions: Array<SelectableValue<string>> = items?.map((item) => ({
+    let itemOptions: Array<ComboboxOption<string>> = items?.map((item) => ({
      value: item.name,
      label: item.name,
    }));
@@ -218,13 +218,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
    <>
      <QueryEditorRow>
        <InlineField label="Count by" labelWidth={12}>
-          <Select
-            isSearchable={false}
-            width={24}
-            value={query.countTriggersBy}
-            options={countByOptions}
-            onChange={onCountByChange}
-          />
+          <Combobox width={24} value={query.countTriggersBy} options={countByOptions} onChange={onCountByChange} />
        </InlineField>
      </QueryEditorRow>
      <QueryEditorRow>
@@ -235,6 +229,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={groupsOptions}
            isLoading={groupsLoading}
            onChange={onFilterChange('group')}
+            placeholder="Group name"
          />
        </InlineField>
        <InlineField label="Host" labelWidth={12}>
@@ -244,6 +239,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
            options={hostOptions}
            isLoading={hostsLoading}
            onChange={onFilterChange('host')}
+            placeholder="Host name"
          />
        </InlineField>
        {query.countTriggersBy === 'problems' && (
@@ -254,6 +250,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
              options={proxiesOptions}
              isLoading={proxiesLoading}
              onChange={onFilterChange('proxy')}
+              placeholder="Proxy name"
            />
          </InlineField>
        )}
@@ -267,6 +264,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
              options={appOptions}
              isLoading={appsLoading}
              onChange={onFilterChange('application')}
+              placeholder="Application name"
            />
          </InlineField>
        )}
@@ -278,6 +276,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
              options={tagOptions}
              isLoading={tagsLoading}
              onChange={onFilterChange('itemTag')}
+              placeholder="Item tag name"
            />
          </InlineField>
        )}
@@ -301,6 +300,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
              options={itemOptions}
              isLoading={itemsLoading}
              onChange={onFilterChange('item')}
+              placeholder="Item name"
            />
          </InlineField>
        )}
@@ -317,8 +317,7 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
      </QueryEditorRow>
      <QueryEditorRow>
        <InlineField label="Min severity" labelWidth={12}>
-          <Select
-            isSearchable={false}
+          <Combobox
            width={24}
            value={query.options?.minSeverity}
            options={severityOptions}
--- a/src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx
+++ b/src/datasource/components/QueryEditor/UserMacrosQueryEditor.tsx
@@ -2,8 +2,7 @@ import _ from 'lodash';
 import React, { useEffect } from 'react';
 import { useAsyncFn } from 'react-use';

-import { SelectableValue } from '@grafana/data';
-import { InlineField } from '@grafana/ui';
+import { InlineField, ComboboxOption } from '@grafana/ui';
 import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
@@ -36,7 +35,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>

  const loadHostOptions = async (group: string) => {
    const hosts = await datasource.zabbix.getAllHosts(group);
-    let options: Array<SelectableValue<string>> = hosts?.map((host) => ({
+    let options: Array<ComboboxOption<string>> = hosts?.map((host) => ({
      value: host.name,
      label: host.name,
    }));
@@ -53,7 +52,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>

  const loadMacrosOptions = async (group: string, host: string) => {
    const macros = await datasource.zabbix.getAllMacros(group, host);
-    let options: Array<SelectableValue<string>> = macros?.map((m) => ({
+    let options: Array<ComboboxOption<string>> = macros?.map((m) => ({
      value: m.macro,
      label: m.macro,
    }));
@@ -102,6 +101,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
            options={groupsOptions}
            isLoading={groupsLoading}
            onChange={onFilterChange('group')}
+            placeholder="Group name"
          />
        </InlineField>
        <InlineField label="Host" labelWidth={12}>
@@ -111,6 +111,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
            options={hostOptions}
            isLoading={hostsLoading}
            onChange={onFilterChange('host')}
+            placeholder="Host name"
          />
        </InlineField>
      </QueryEditorRow>
@@ -122,6 +123,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
            options={macrosOptions}
            isLoading={macrosLoading}
            onChange={onFilterChange('macro')}
+            placeholder="Macro name"
          />
        </InlineField>
      </QueryEditorRow>