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

Mon, 26 Oct 2020 15:02:21 -0700 


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**
   
   <img width="1576" alt="Image 2020-10-26 at 5 22 18 PM" 
src="https://user-images.githubusercontent.com/3267/97232928-73d7b280-17b4-11eb-9152-34c06819cfec.png";>
   
   **Full width - After**
   
   <img width="1576" alt="Image 2020-10-26 at 5 23 16 PM" 
src="https://user-images.githubusercontent.com/3267/97232921-71755880-17b4-11eb-9685-8d00724a0d1d.png";>
   
   ___
   
   **Narrow width - Before**
   
   <img width="1335" alt="Image 2020-10-26 at 5 21 33 PM" 
src="https://user-images.githubusercontent.com/3267/97232904-66222d00-17b4-11eb-8fdd-b00503151629.png";>
   
   **Narrow width - After**
   
   <img width="1333" alt="Image 2020-10-26 at 5 11 22 PM" 
src="https://user-images.githubusercontent.com/3267/97233004-9e297000-17b4-11eb-9377-d2192aadc3c5.png";>
   
   
   
   ---
   **^ 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:
[email protected]

Reply via email to