Reuse PanelEditor for dashboard settings

Grafana Plugin Development
1

I’m trying to add a functionality to specify a query to get the most recent time from a given data source.
The idea is to create in the dashboard “Quick ranges” a button for “Most recent data”, which will set all the dashboard panels’s time range to be centered on the most recent date.
Upon clicking it, it would result in something like: [most_recent_time - 3 days ; most_recent_time + 3 days].

  • I’ve already added the button “Most recent data” to the “Quick ranges”, so that is done.

  • I want to allow the user to choose a data source and specify a query.
    For that, I thought I should reuse the behavior we get when editing a panel’s query.
    In the following image, I want to use only one single query editor, like the part inside the dark blue rectangle:

grafana_dashboard_query_editor
grafana_dashboard_query_editor1826×556 101 KB

(I don’t have any interest to use the parts with red crosses)

The task would then just be to load the editor part like what is inside the dark blue rectangle into the dashboard settings.
Overall, it would look like this (the dark blue rectangle and the label “Query for most recent time” above it):

grafana_settings_recent_time_GOAL
grafana_settings_recent_time_GOAL1190×1200 97 KB

  • Lastly, the query would be executed on dashboard page load, and the query result (a single date in the date type Grafana already uses to draw panels) would somehow be available inside the file app/features/dashboard/timepicker/timepicker.js to be able to trigger the time range change when the new “Most recent data” button is clicked.

What is the best way to go about this?

In the past I’ve successfully edited the app/features/dashboard/timepicker/timepicker.js for some other small changes (such as storing the time range when the page loads), but I am unsure how to proceed.

The thing is, the query editor components are in:

app/features/dashboard/DashboardGrid.tsx
app/features/dashboard/DashboardPanel.tsx
app/features/dashboard/PanelEditor.tsx

Should I edit these files to add the behavior I want?
But then how do I make sure these typescript classes are being loaded when I’m on the dashboard editor page (like the last image I added on this post)?
I don’t think it would be efficient to copy the entire dashboard panel editor code because the functionality is intermingled between several files: how then would I reuse just the parts I want?

Furthermore, timepicker.js is not typescript but simple JavaScript, so I don’t think I can simply load one of the dashboard classes into it.

While I’m not experienced with typescript, I can learn quickly - needing someone to point me in the right direction regarding Grafana and this issue.
I’ve been trying to figure out the minimal changes needed to implement this in a Grafana-idiomatic way (would contribute this to the source code when it’s done), but decided to ask as there are too many unknown factors for me at the moment.

Thank you very much for your time.