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

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

@@ -11,6 +11,7 @@ import { itemTagToString } from '../../utils';
import { ZabbixDatasource } from '../../datasource';
import { ZabbixMetricsQuery } from '../../types/query';
import { ZBXItem, ZBXItemTag } from '../../types';
import { useInterpolatedQuery } from '../../hooks/useInterpolatedQuery';
const countByOptions: Array<SelectableValue<string>> = [
{ value: '', label: 'All triggers' },
@@ -34,6 +35,8 @@ export interface Props {
}
export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
const interpolatedQuery = useInterpolatedQuery(datasource, query);
const loadGroupOptions = async () => {
const groups = await datasource.zabbix.getAllGroups();
const options = groups?.map((group) => ({
@@ -50,8 +53,7 @@ export const TriggersQueryEditor = ({ 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,
@@ -63,14 +65,12 @@ export const TriggersQueryEditor = ({ 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 loadAppOptions = async (group: string, host: string) => {
const groupFilter = datasource.replaceTemplateVars(group);
const hostFilter = datasource.replaceTemplateVars(host);
const apps = await datasource.zabbix.getAllApps(groupFilter, hostFilter);
const apps = await datasource.zabbix.getAllApps(group, host);
let options: Array<SelectableValue<string>> = apps?.map((app) => ({
value: app.name,
label: app.name,
@@ -81,19 +81,16 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
};
const [{ loading: appsLoading, value: appOptions }, fetchApps] = useAsyncFn(async () => {
const options = await loadAppOptions(query.group.filter, query.host.filter);
const options = await loadAppOptions(interpolatedQuery.group.filter, interpolatedQuery.host.filter);
return options;
}, [query.group.filter, query.host.filter]);
}, [interpolatedQuery.group.filter, interpolatedQuery.host.filter]);
const loadTagOptions = async (group: string, host: string) => {
const tagsAvailable = await datasource.zabbix.isZabbix54OrHigher();
if (!tagsAvailable) {
return [];
}
const groupFilter = datasource.replaceTemplateVars(group);
const hostFilter = datasource.replaceTemplateVars(host);
const items = await datasource.zabbix.getAllItems(groupFilter, hostFilter, null, null, {});
const items = await datasource.zabbix.getAllItems(group, host, null, null, {});
const tags: ZBXItemTag[] = _.flatten(items.map((item: ZBXItem) => item.tags || []));
const tagList = _.uniqBy(tags, (t) => t.tag + t.value || '').map((t) => itemTagToString(t));
@@ -107,9 +104,9 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
};
const [{ loading: tagsLoading, value: tagOptions }, fetchItemTags] = useAsyncFn(async () => {
const options = await loadTagOptions(query.group.filter, query.host.filter);
const options = await loadTagOptions(interpolatedQuery.group.filter, interpolatedQuery.host.filter);
return options;
}, [query.group.filter, query.host.filter]);
}, [interpolatedQuery.group.filter, interpolatedQuery.host.filter]);
const loadProxyOptions = async () => {
const proxies = await datasource.zabbix.getProxies();
@@ -127,15 +124,11 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
}, []);
const loadItemOptions = async (group: string, host: string, app: string, itemTag: string) => {
const groupFilter = datasource.replaceTemplateVars(group);
const hostFilter = datasource.replaceTemplateVars(host);
const appFilter = datasource.replaceTemplateVars(app);
const tagFilter = datasource.replaceTemplateVars(itemTag);
const options = {
itemtype: 'num',
showDisabledItems: query.options.showDisabledItems,
};
const items = await datasource.zabbix.getAllItems(groupFilter, hostFilter, appFilter, tagFilter, options);
const items = await datasource.zabbix.getAllItems(group, host, app, itemTag, options);
let itemOptions: Array<SelectableValue<string>> = items?.map((item) => ({
value: item.name,
label: item.name,
@@ -147,19 +140,24 @@ export const TriggersQueryEditor = ({ query, datasource, onChange }: Props) => {
const [{ loading: itemsLoading, value: itemOptions }, fetchItems] = useAsyncFn(async () => {
const options = await loadItemOptions(
query.group.filter,
query.host.filter,
query.application.filter,
query.itemTag.filter
interpolatedQuery.group.filter,
interpolatedQuery.host.filter,
interpolatedQuery.application.filter,
interpolatedQuery.itemTag.filter
);
return options;
}, [query.group.filter, query.host.filter, query.application.filter, query.itemTag.filter]);
}, [
interpolatedQuery.group.filter,
interpolatedQuery.host.filter,
interpolatedQuery.application.filter,
interpolatedQuery.itemTag.filter,
]);
// Update suggestions on every metric change
const groupFilter = datasource.replaceTemplateVars(query.group?.filter);
const hostFilter = datasource.replaceTemplateVars(query.host?.filter);
const appFilter = datasource.replaceTemplateVars(query.application?.filter);
const tagFilter = datasource.replaceTemplateVars(query.itemTag?.filter);
const groupFilter = interpolatedQuery.group?.filter;
const hostFilter = interpolatedQuery.host?.filter;
const appFilter = interpolatedQuery.application?.filter;
const tagFilter = interpolatedQuery.itemTag?.filter;
useEffect(() => {
fetchGroups();