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.
