Skip to content

Commit a3ce1d0

Browse files
dmitryk-dkdmitryk-dk
authored
fix issue with many of the filter fileds and values (#492)
* fix issue with many of the filter fileds and values use lodash debounce, fix parsing use memoization to avoid errors on render fix render for Grafana < 11 simplify check update CHANGELOG.md * remove unused state * Combobox component (#493) * implement Combobox for different versions of Grafana implement two types of compatible combobox fix usage of the components cleanup update CHANGELOG.md * fix nit comments * fix fe tests
1 parent 44466e7 commit a3ce1d0

File tree

8 files changed

+440
-66
lines changed

8 files changed

+440
-66
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
## tip
44

55
* FEATURE: fetch tenants from the VictoriaLogs backend and allow selecting a tenant in the datasource settings. See [#475](https://github.com/VictoriaMetrics/victorialogs-datasource/issues/475).
6+
* FEATURE: enable client side caching and make reliable behavior in QueryBuilder filters. See [this issue](https://github.com/VictoriaMetrics/victorialogs-datasource/issues/357).
7+
* FEATURE: add compatibility with Grafana 10.x and 11.x by using dynamic component loading for Combobox.
68

79
## v0.22.4
810

‎src/components/CompatibleAsyncSelect.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React, { useCallback, useMemo } from "react";
2+
import { coerce, gte } from "semver";
3+
4+
import { SelectableValue } from "@grafana/data";
5+
import { config } from "@grafana/runtime";
6+
import {
7+
AsyncSelect,
8+
} from "@grafana/ui";
9+
10+
// Check if we're running Grafana 11+ where Combobox is available
11+
const grafanaVersion = coerce(config.buildInfo.version);
12+
const isGrafana11Plus = grafanaVersion ? gte(grafanaVersion, '11.0.0') : false;
13+
14+
// Try to get Combobox dynamically - it only exists in Grafana 11+
15+
let GrafanaCombobox: React.ComponentType<{
16+
placeholder?: string;
17+
width?: number | "auto";
18+
minWidth?: number;
19+
value: SelectableValue<string> | null;
20+
options: (query: string) => Promise<SelectableValue<string>[]>;
21+
createCustomValue?: boolean;
22+
onChange: (option: SelectableValue<string> | null) => void;
23+
isClearable?: boolean;
24+
}> | null = null;
25+
26+
// Only try to load Combobox if we're on Grafana 11+
27+
if (isGrafana11Plus) {
28+
try {
29+
// eslint-disable-next-line @typescript-eslint/no-require-imports
30+
const ui = require("@grafana/ui");
31+
if (ui.Combobox && typeof ui.Combobox === 'function') {
32+
GrafanaCombobox = ui.Combobox;
33+
}
34+
} catch {
35+
// Combobox not available
36+
}
37+
}
38+
39+
interface CompatibleAsyncSelectProps {
40+
placeholder?: string;
41+
minWidth?: number;
42+
width?: number | "auto";
43+
value: SelectableValue<string> | null;
44+
loadOptions: (inputValue: string) => Promise<SelectableValue<string>[]>;
45+
onChange: (option: SelectableValue<string> | null) => void;
46+
isClearable?: boolean;
47+
allowCustomValue?: boolean;
48+
}
49+
50+
/**
51+
* A compatibility wrapper for async select that uses Combobox in Grafana 11+
52+
* and AsyncSelect in older versions.
53+
*/
54+
export const CompatibleAsyncSelect: React.FC<CompatibleAsyncSelectProps> = ({
55+
placeholder,
56+
minWidth = 15,
57+
width = "auto",
58+
value,
59+
loadOptions,
60+
onChange,
61+
isClearable = false,
62+
allowCustomValue = false,
63+
}) => {
64+
// Normalize value to ComboboxOption format
65+
const normalizedValue = useMemo(() => {
66+
if (!value) return null;
67+
return value;
68+
}, [value]);
69+
70+
// Adapter for AsyncSelect onChange to convert SelectableValue to ComboboxOption
71+
const handleSelectChange = useCallback(
72+
(selected: SelectableValue<string> | null) => {
73+
if (!selected || !selected.value) {
74+
onChange(null);
75+
return;
76+
}
77+
onChange({
78+
value: selected.value,
79+
label: selected.label ?? selected.value,
80+
description: selected.description,
81+
});
82+
},
83+
[onChange]
84+
);
85+
86+
if (GrafanaCombobox) {
87+
return (
88+
<GrafanaCombobox
89+
placeholder={placeholder}
90+
width={width}
91+
minWidth={minWidth}
92+
value={normalizedValue}
93+
options={loadOptions}
94+
createCustomValue={allowCustomValue}
95+
onChange={onChange}
96+
isClearable={isClearable}
97+
/>
98+
);
99+
}
100+
101+
return (
102+
<AsyncSelect
103+
placeholder={placeholder}
104+
width={width}
105+
value={normalizedValue}
106+
loadOptions={loadOptions}
107+
defaultOptions
108+
allowCustomValue={allowCustomValue}
109+
onChange={handleSelectChange}
110+
isClearable={isClearable}
111+
/>
112+
);
113+
};

‎src/components/CompatibleSelect.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React, { useCallback, useMemo } from "react";
2+
import { coerce, gte } from "semver";
3+
4+
import { SelectableValue } from "@grafana/data";
5+
import { config } from "@grafana/runtime";
6+
import { Select } from "@grafana/ui";
7+
8+
// Check if we're running Grafana 11+ where Combobox is available
9+
const grafanaVersion = coerce(config.buildInfo.version);
10+
const isGrafana11Plus = grafanaVersion ? gte(grafanaVersion, '11.0.0') : false;
11+
12+
// Try to get Combobox dynamically - it only exists in Grafana 11+
13+
let GrafanaCombobox: React.ComponentType<{
14+
placeholder?: string;
15+
width?: number | "auto";
16+
minWidth?: number;
17+
value: SelectableValue<string> | null;
18+
options: SelectableValue<string>[];
19+
createCustomValue?: boolean;
20+
onChange: (option: SelectableValue<string> | null) => void;
21+
isClearable?: boolean;
22+
disabled?: boolean;
23+
}> | null = null;
24+
25+
// Only try to load Combobox if we're on Grafana 11+
26+
if (isGrafana11Plus) {
27+
try {
28+
// eslint-disable-next-line @typescript-eslint/no-require-imports
29+
const ui = require("@grafana/ui");
30+
if (ui.Combobox && typeof ui.Combobox === 'function') {
31+
GrafanaCombobox = ui.Combobox;
32+
}
33+
} catch {
34+
// Combobox not available
35+
}
36+
}
37+
38+
interface CompatibleSelectProps {
39+
placeholder?: string;
40+
minWidth?: number;
41+
value: SelectableValue<string> | string | null;
42+
options: SelectableValue<string>[];
43+
onChange: (option: SelectableValue<string> | null) => void;
44+
isClearable?: boolean;
45+
allowCustomValue?: boolean;
46+
loading?: boolean;
47+
disabled?: boolean;
48+
width?: number | "auto";
49+
}
50+
51+
/**
52+
* A compatibility wrapper for static select that uses Combobox in Grafana 11+
53+
* and Select in older versions.
54+
*/
55+
export const CompatibleSelect: React.FC<CompatibleSelectProps> = ({
56+
placeholder,
57+
minWidth = 15,
58+
value,
59+
options,
60+
onChange,
61+
isClearable = false,
62+
allowCustomValue = false,
63+
loading = false,
64+
disabled = false,
65+
width = "auto",
66+
}) => {
67+
// Normalize value to ComboboxOption format
68+
const normalizedValue = useMemo(() => {
69+
if (!value) return null;
70+
if (typeof value === 'string') {
71+
return { value, label: value };
72+
}
73+
return value;
74+
}, [value]);
75+
76+
// Adapter for Select onChange to convert SelectableValue to ComboboxOption
77+
const handleSelectChange = useCallback(
78+
(selected: SelectableValue<string> | null) => {
79+
if (!selected || !selected.value) {
80+
onChange(null);
81+
return;
82+
}
83+
onChange({
84+
value: selected.value,
85+
label: selected.label ?? selected.value,
86+
description: selected.description,
87+
});
88+
},
89+
[onChange]
90+
);
91+
92+
if (GrafanaCombobox) {
93+
return (
94+
<GrafanaCombobox
95+
placeholder={placeholder}
96+
width={width}
97+
minWidth={minWidth}
98+
value={normalizedValue}
99+
options={options}
100+
createCustomValue={allowCustomValue}
101+
onChange={onChange}
102+
isClearable={isClearable}
103+
disabled={disabled}
104+
/>
105+
);
106+
}
107+
108+
return (
109+
<Select
110+
placeholder={placeholder}
111+
width={width}
112+
value={normalizedValue}
113+
options={options}
114+
allowCustomValue={allowCustomValue}
115+
onChange={handleSelectChange}
116+
isClearable={isClearable}
117+
isLoading={loading}
118+
disabled={disabled}
119+
/>
120+
);
121+
};

0 commit comments

Comments
 (0)