Add `json` and `sql` template rendering to Grid View

[nathadfield]

Apache Airflow version

2.9.1

If "Other Airflow 2 version" selected, which one?

No response

What happened?

In Airflow v2.9.1, the Rendered Template link is now missing from the Details tab when in Grid view.

2.8.4

2.9.1

What you think should happen instead?

It is still possible to get to the rendered template via More Details but having this link here is much more convenient.

How to reproduce

Simply start an instance of Airflow 2.9.1.

Operating System

n/a

Versions of Apache Airflow Providers

n/a

Deployment

Astronomer

Deployment details

No response

Anything else?

No response

Are you willing to submit PR?

• [ ] Yes I am willing to submit a PR!

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[tirkarthi]

It has been made as a separate section in 2.9.1 in this PR. I guess the removal was intentional.

https://github.com/apache/airflow/pull/39122

cc: @bbovenzi

[nathadfield]

@tirkarthi Hmm, that's a bit disappointing. I hate clicking more than times that I have to, or was previously used to.

[tirkarthi]

Isn't rendered template available in details tab at the bottom? Is the new section missing some details from old page?

[nathadfield]

@tirkarthi Ah, ok, well, I suppose it depends on what is being rendered. For example, SQL being run via the BigQueryInsertJobOperator looks like this when you go to the specific rendered template page which used to be available from Details.

Whereas it looks like this now.

The important thing is that it's not possible to copy and paste the SQL directly from the UI and the previous page is now several clicks away.

[tirkarthi]

Thanks, the legacy page uses renderers along with pformat which indents the dict. Maybe the issue can updated to have formatting for the values like the legacy page.

[nathadfield]

@tirkarthi It's not just about dict, but also the SQL contained within it. If the new page could render both in a similar way then great!

[bbovenzi]

Yes, we should render the json and sql better in the grid view. We should add a copy button too.

[nathadfield]

@bbovenzi Great thanks! I'll change this to a feature request then.

[jscheffl]

I also always wanted to contribute this but never came to this. I'd favor making this consistent like the DAG Run Conf which is rendered as a struct with a copy option.

Same applies for XCom results, too.

[tirkarthi]

I was working on this issue and it looks complex since the legacy page uses the task template fields to get the relevant renderer and uses pygment lexer for highlighting along with lot of other inference for the objects. The issue is that in this case there is configuration which is a json and configuration.query.query which is a sql with both of them template fields. But in the API response the rendered template field string is just returned without any lexer information. Also the legacy page has access to dagbag and the corresponding task which the API endpoints don't have.

I have made some progress on this issue and can raise a PR once I get to a working state.

Thanks

[tirkarthi]

Another thing is that case in the fields in the response like bash_command is turned to bashCommand at the react layer which gets rendered in the UI as bashCommand which is also incorrect and a bug IMO.

[tirkarthi]

I have created https://github.com/apache/airflow/pull/39918 as a possible solution. Thanks.

[cah-jonathan-cachat01]

god bless - my group just updated Airflow & as a DE this rendered template page is a daily visit.

it looks like this PR is stuck still - anyone have any ideas when we will get our Rendered Template page back?