Add legend to grid view

[bbovenzi]

Description

It would be useful to add a simple legend to the grid view.

• Help a user understand the icons for a manual / backfill / dataset triggered dag runs
• Help a user understand the symbol for tasks/runs with a note

Use case/motivation

No response

Related issues

No response

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

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

[amoghrajesh]

@bbovenzi is this issue taken? I would like to try my hands here given some more reference material here.

[bbovenzi]

@bbovenzi is this issue taken? I would like to try my hands here given some more reference material here.

Nope! It's all yours. Feel free to ask any questions here.

We'll probably want to make a new react component and put add it in the main grid view component here.

• We'll want to refer to each RunTypeIcon

• And we'll want to explain the gradient we use to indicate if there is a note

[amoghrajesh]

Hi, @bbovenzi I am new to Airflow and would like to get a few things clarified before starting.

• Do we have some kind of legends in the airflow codebase that I can refer to? Also, are we talking about legend being a small component that gives out some information like in graphs etc or react-legend? (https://www.npmjs.com/package/react-legend)
• I would appreciate it if you could provide me with some online references for the same

[bbovenzi]

You can refer to the legend row of dag run/task instance statuses. Basically, just a representation of each icon/gradient with a word or two next to it.
We don't need an extra mom package. Just a simple react component.

[amoghrajesh]

@bbovenzi a follow-up on which legend row you meant here? Can you show me where the legend is here?

[ashb]

@amoghrajesh That is not the Gird view we are talking about -- this one is https://airflow.apache.org/docs/apache-airflow/stable/ui.html#grid-view

[amoghrajesh]

@ashb @bbovenzi coming back to this issue after some time. We are trying to add some legend to this page if I am not mistaken:

1. We can add a small legend for type of run
2. A small legend for tasks vs runs? How do I identify them in terms of logos?

[bbovenzi]

1.Here you can see each run type and icon we use
2. No, but we want to also indicate if a task or run has a note. See the logic here

[Grzyblon]

@bbovenzi is this issue still relevant?

[bbovenzi]

Yes, I would say its still useful