You are viewing a plain text version of this content. The canonical link for it is here.

Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2020/10/26 22:01:56 UTC

[GitHub] [airflow] ryanahamilton opened a new pull request #11866: Fix oversized width of DAGs table with hide/reveal of "links"

ryanahamilton opened a new pull request #11866:
URL: https://github.com/apache/airflow/pull/11866

Resolves #11795

This update improves the presentation of the DAGs (home) view by making better use of the horizontal space. This was accomplished through a handful of changes:

- Fixed the broken tooltip on the "i" icon in the leftmost column heading by adding missing `js-tooltip` class.
- Moves the tags beneath the DAG ID. By not having left and right aligned elements within the same column, the contents of the cell flow better with the variation of screen widths, and there is less visual distraction with a single alignment point.
- Changes the tag background from green to blue. Green typically communicates a positive status, but in this context the tag has no relation to the DAG's status. The blue is a better neutral color.
- Changed the column order to a more logical organization. Going left-to-right the order now displays broader-to-detailed properties of the DAG. It also seemed to make more sense to have "schedule" and "last run" adjacent to each other given the former determines the latter.
- Moved the existing CSS only used for this view out of the shared (`main.css`) file to a dedicated `dags.css` file only loaded for this view. The new CSS added in this PR was added to this file as well.
- With the "links" taking up a great deal of space and not providing any actual detail of the DAGs, I've moved them to a hidden menu in the last column of the table. The menu is revealed upon hover of the "•••". In addition to saving space, this alleviates a lot of the visual clutter of having so many icons grouped throughout the page. Additionally, this allows text to be displayed beside the link icons—providing much better information to the user.

![Screen Recording 2020-10-26 at 05 52 14 PM](https://user-images.githubusercontent.com/3267/97232709-0c216780-17b4-11eb-871b-456a1e908136.gif)

- Doc screenshot of this view has been updated accordingly.

## Screenshots of overall updates

**Full width - Before**

**Full width - After**

___

**Narrow width - Before**

**Narrow width - After**

---
**^ Add meaningful description above**

Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/master/CONTRIBUTING.rst#pull-request-guidelines)** for more information.
In case of fundamental code change, Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvements+Proposals)) is needed.
In case of a new dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).
In case of backwards incompatible changes please leave a note in [UPDATING.md](https://github.com/apache/airflow/blob/master/UPDATING.md).

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org