Airflow Extension

Browser Extension to improve Airflow UI User Experience.

• Airflow Extension
  • Features
    • Highlight DAGs
    • Color Navbar depending on environment
  • Installation
    • Chrome
    • Firefox
  • Updates
  • Contribute
  • Author

Compatible with Chrome and Firefox. This extension has been tested on the following Airflow versions:

• 2.2.2
• 2.6.3
• 2.8.1
• 2.9.2

This extension is not available on Chrome and Firefox stores. You'll need to build it yourself, you'll see how in the Installation section.

Features

Highlight DAGs

It is possible to define a list of DAGs which will be highlighted on Airflow UI.

Open extension popup and then click on "Settings".

In settings page, define a list of DAGs name in csv (e.g. dag1,dag2,dag3) in the textarea under "List of dags to highlight". Then on Airflow UI "DAGs" page, if a DAG name contains one of the name defined in option, the line will be highlighted. It is a contains rule, meaning if you write "my_dag", all dags containing "my_dag" will be highlighted ("a_my_dag", "my°dag_c")

It is possible to customize style applied to highlighted DAG's in Option page. You just need to change the CSS style.

Color Navbar depending on environment

It is possible to distinguish Airflow environment depending on URL to use a custom color for prod and/or staging.

In settings section, it is possible to add a list of url (csv format) for prod and staging, and to define a dedicated color. Urls can contain wildcards - e.g. airflow-*.prod.*.mycompany.com

Installation

Clone repository where you want it, for example in your home director.

git clone https://github.com/rinzool/airflow-extension.git ~/

Build package

cd airflow-extension
make build-all

Chrome

On Chrome, go to chrome://extensions/

Active Developer Mode on the top right, then select Load Unpack on the top left, and choose the subdirectory airflow-extension/chrome.

Firefox

WARNING : You will need Firefox Developer Edition to install the add-on and set the field xpinstall.signatures.required to false in the configuration window (about:config).

Firefox, go to add-ons menu (about:addons), choose Install Add-on from file and select firefox/airflow-extension.zip

Updates

To get last updates :

• git pull
• make build-all
• Reload extension on your browser or re-import it for firefox users

Contribute

Fork the project and submit a PR on the Github repo.

You may use the Makefile to build and clean the files and folders. Do not forget to update the VERSION file and bumpit to manifests with the command make bump-all.

Technologies :

• Prettier: Code formater
• Bootstrap: Frontend toolkit
• HTML5 Validator Action: HTML Validator

Author

Quentin FLEURENT NAMBOT Lukland