Hello,
I need some guidance on how to make a query in React component which would be equal on the shown screenshot below.
I’m developing these plugin now for almost 3 weeks. I really can’t really find anything in the docs… I mean this is the most basic thing and can’t find in docs how to make a simple query.
this is the code I’ve come up for now but i’m keep getting error Datasource.ts:49 Query failed TypeError: Cannot read properties of undefined (reading ‘from’)
import { DataSourceApi, DataQueryRequest, DataQueryResponse } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';
import { dateTime } from '@grafana/data';
// Construct a complete DataQueryRequest object
const optionsQuery: DataQueryRequest<any> = {
requestId: 'my_unique_request_id', // Should be a unique identifier for this request
interval: '1m', // The sampling interval, eg. '1m' for 1 minute
intervalMs: 60000, // The sampling interval in milliseconds
maxDataPoints: 1000, // Max number of data points to return
range: {
// The time range for the query
from: dateTime(new Date('2023-01-01T00:00:00Z')), // Convert to DateTime
to: dateTime(new Date('2023-01-02T00:00:00Z')),
raw: {
from: new Date('2023-01-01T00:00:00Z').toLocaleTimeString(),
to: new Date('2023-01-02T00:00:00Z').toLocaleTimeString(),
},
},
scopedVars: {},
targets: [
{
refId: 'A',
policy: 'autogen',
measurement: 'DavidWindows_SineO3_AmplFFT_metadata',
query: 'SELECT * FROM DavidWindows_SineO3_AmplFFT_metadata WHERE $timeFilter',
rawQuery: true,
},
],
timezone: 'browser',
app: 'dashboard',
startTime: Date.now(),
};
// Fetch data using the constructed DataQueryRequest object
async function fetchData(options: DataQueryRequest) {
const dataSource = await getDataSourceSrv().get('InfluxDB-1');
console.log(dataSource, 'dataSource');
// Execute the query which returns an observable or a promise
const result = await dataSource.query(optionsQuery);
if ('subscribe' in result) {
result.subscribe({
next: (response: DataQueryResponse) => {
console.log(response, 'result of query');
},
error: (error: any) => {
console.error('Query failed', error);
},
complete: () => {
console.log('Query completed');
},
});
} else {
console.log(result, 'result of query');
}
}
export default fetchData;
Hi @davidkramer12!
There should be no need for you to manually construct the DataQueryRequest like that. If you define a QueryEditor component in your plugin’s module.ts and make sure to call props.onChange(newProps) whenever a user changes the query in the UI, Grafana will create the DataQueryRequest and execute the query whenever the dashboard is refreshed.
If you want, you can take a look at our tutorial on how to build data source plugins. We also have a bunch of data source plugin examples in this repo, and I think this plugin might be if particularly interesting.
Hope this was helpful.
Yes I know I can make Custom Query Editor… But what I need to do is when user let’s say make on UI query for DavidWindows_Sine03_AmpIFFT I need to make a query under the hood in so in code query for DavidWindows_Sine03_AmpIFFT.metaData. So If you need to know the context. So DavidWindows_Sine03_AmpIFFT is actually data and in DavidWindows_Sine03_AmpIFFT.metaData are Metrics. Of Course one way is to make user do that but if it’s possible to make a query to DataSource without writing BE that would be great.
So I think there I have like 2-3 options:
1.Make user make this query
2.Write Be for this query
3. Find a way on FE to make this query
Bascilly in Influx this is the query:
Select * from DavidWindows_Sine03_AmpIFFT_metaData and that’s it. I really don’t want to write whole BE for this.
@mikhailvolkov or @marcusolsson Can please any one help at this? Basically what i really need to do is what is shown on screenshot. But really without any user interaction.
@davidkramer12 You can use /ds/query to execute the query: Data source HTTP API | Grafana documentation
Target configuration you can find in options.
p.s Marcus is not working on Grafana anymore.
Yes I tried to used /api/ds/query… But It’s so hard to debug because i’m getting 500 response. The logs from server deosn’t tell much as well… And I can’t really find what scenarioId means as well…
const makeQuery = async () => {
const apiUrl = '/api/ds/query';
const requestBody = {
from: 'now-7d',
to: 'now',
queries: [
{
refId: 'A',
datasourceId: 1,
query:
'SELECT * FROM "autogen"."DavidWindows_Sine03_AmplFFT_metadata" WHERE time >= now() - 7d and time <= now()',
format: 'table',
maxDataPoints: 1848,
intervalMs: 200,
},
],
};
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
body: JSON.stringify(requestBody),
});
console.log(response, 'response');
// Log the response body
console.log(await response.text());
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const responseData = await response.json();
console.log(responseData);
} catch (error) {
console.error('Error making query:', error);
}
};
the response that i’m getting
{"message":"An error occurred within the plugin","messageId":"plugin.downstreamError","statusCode":500,"traceID":""}