grafana / grafana-aws-sdk-react

Apache License 2.0
3 stars 1 forks source link

Add a Query Editor Header to AWS datasources #37

Closed idastambuk closed 1 year ago

idastambuk commented 1 year ago

I think it would be good to add a separate header for datasources where the Run Query buttons will be included, to mimic the Cloudwatch header, like here:

Screen Shot 2023-01-30 at 5 06 27 PM

AWS datasources will be able to, after adding the header, remove the Run buttons from their Query Editors (Redshift, Athena) or move away from automatically running queries onBlur (e.g. Timestream)

Datasources with async queries will include two buttons, Run and Cancel, something like this:

Screen Shot 2023-01-30 at 6 18 31 PM

As in the Cloudwatch header, the datasource will be able to add left and right elements as props to the header.

const QueryHeader: React.FC<Props> = ({
  ...
  extraHeaderElementLeft,
  extraHeaderElementRight,

Right now, some datasources have a hideQueryButtons prop for hiding buttons in variable and annotations editors. This will make it redundant, as the editors won't by default include the buttons. Once this is implemented in all datasources, this should standardize how queries are run in AWS datasources, as well as how they are included in annotations and variable screens.

Steps and PR links: