Extending Airflow Web UI and adding Static HTML pages and CSS Extending Airflow Web UI and adding Static HTML pages and CSS flask flask

Extending Airflow Web UI and adding Static HTML pages and CSS


Faced a similar issue: I had to show images in doc_md of a DAG.Long story short we need to configure a Blueprint properly to host static files and templates.

Following works for me for airflow=1.10.14.

test_plugin.py

from airflow.plugins_manager import AirflowPluginfrom flask import Blueprintfrom flask_admin import base, BaseView, expose# Creating a flask admin BaseViewclass TestView(BaseView):    @expose('/')    def list(self):        return self.render("index.html", content="")v = TestView(category="Test Plugin", name="Test View")# Creating a flask blueprint to integrate the templates and static folderbp = Blueprint(    "test_blueprint", __name__,    template_folder='templates/testview',    static_folder='static/testview',    static_url_path='/admin/testview/static')class AirflowTestPlugin(AirflowPlugin):    name = "test_plugin"    admin_views = [v]    flask_blueprints = [bp]

index.html

<!DOCTYPE html><HTML>    <body>        <p>This is a paragraph.</p>        <img alt="initial-state" src="static/img/initial-state.png">    </body></html>

Directory Structure

airflow     - plugins        - test_plugin.py        - templates            - testview                - index.html        - static            - testview                - img                    - initial-state.png