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

Migrate from DatasourceAPI to DatasourceWithBackend (#2123)

Browse Source 
This PR migrates the use of `DatasourceApi` to `DatasourceWithBackend`,
with this a couple additional improvements were made:

1. Migrate to use `interpolateVariablesInQuery` everywhere instead of
the custom `replaceTemplateVariables` we were using
2. Moves util functions out of `datasource.ts` and into the existing
`utils.ts`

<img width="1261" height="406" alt="Screenshot 2025-11-20 at 11 37
56 AM"
src="https://github.com/user-attachments/assets/9e396cf2-eab0-49d1-958c-963a2e896eba"
/>

Now we can see the `query` calls being made to the backend:
<img width="367" height="102" alt="Screenshot 2025-11-20 at 11 38 18 AM"
src="https://github.com/user-attachments/assets/a5a9a337-7f19-4f7c-9d04-9d30c0216fb2"
/>

Tested:
- By running queries from Explore and Dashboards (with and without
variables)
- By interacting with all the different Editors to make sure `ComboBox`
was working as expected


Next:
Once this is merged, we will next be able to slowly move away from using
the `ZabbixConnector` to make backend datasource calls.

Fixes:
[#131](https://github.com/orgs/grafana/projects/457/views/40?pane=issue&itemId=139450234&issue=grafana%7Coss-big-tent-squad%7C131)
This commit is contained in:
Jocelyn Collado-Kuri
2025-12-16 09:58:02 -08:00
committed by GitHub
parent cc492b916d
commit ce4a8d3e19
13 changed files with 658 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ import { MetricPicker } from '../../../components';
import { getVariableOptions } from './utils';
import { ZabbixDatasource } from '../../datasource';
import { ZabbixMetricsQuery } from '../../types/query';
import { useInterpolatedQuery } from '../../hooks/useInterpolatedQuery';
export interface Props {
query: ZabbixMetricsQuery;
@@ -17,6 +18,7 @@ export interface Props {
}
export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) => {
const interpolatedQuery = useInterpolatedQuery(datasource, query);
const loadGroupOptions = async () => {
const groups = await datasource.zabbix.getAllGroups();
const options = groups?.map((group) => ({
@@ -33,8 +35,7 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
}, []);
const loadHostOptions = async (group: string) => {
const groupFilter = datasource.replaceTemplateVars(group);
const hosts = await datasource.zabbix.getAllHosts(groupFilter);
const hosts = await datasource.zabbix.getAllHosts(group);
let options: Array<SelectableValue<string>> = hosts?.map((host) => ({
value: host.name,
label: host.name,
@@ -46,14 +47,12 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
};
const [{ loading: hostsLoading, value: hostOptions }, fetchHosts] = useAsyncFn(async () => {
const options = await loadHostOptions(query.group.filter);
const options = await loadHostOptions(interpolatedQuery.group.filter);
return options;
}, [query.group.filter]);
}, [interpolatedQuery.group.filter]);
const loadMacrosOptions = async (group: string, host: string) => {
const groupFilter = datasource.replaceTemplateVars(group);
const hostFilter = datasource.replaceTemplateVars(host);
const macros = await datasource.zabbix.getAllMacros(groupFilter, hostFilter);
const macros = await datasource.zabbix.getAllMacros(group, host);
let options: Array<SelectableValue<string>> = macros?.map((m) => ({
value: m.macro,
label: m.macro,
@@ -65,13 +64,13 @@ export const UserMacrosQueryEditor = ({ query, datasource, onChange }: Props) =>
};
const [{ loading: macrosLoading, value: macrosOptions }, fetchmacros] = useAsyncFn(async () => {
const options = await loadMacrosOptions(query.group.filter, query.host.filter);
const options = await loadMacrosOptions(interpolatedQuery.group.filter, interpolatedQuery.host.filter);
return options;
}, [query.group.filter, query.host.filter]);
}, [interpolatedQuery.group.filter, interpolatedQuery.host.filter]);
// Update suggestions on every metric change
const groupFilter = datasource.replaceTemplateVars(query.group?.filter);
const hostFilter = datasource.replaceTemplateVars(query.host?.filter);
const groupFilter = interpolatedQuery.group?.filter;
const hostFilter = interpolatedQuery.host?.filter;
useEffect(() => {
fetchGroups();