[Airflow] Custom UI for Airflow | LIM

에어플로우는 Plugin 을 이용해서 Webserver 에 메뉴를 수정할 수 있다. 

기본적으로 에어플로우를 설치 후 Webserver 를 띄우면 이렇게 생겼다.

 

Airflow Version: 2.2.4
Python Version: 3.8

 

😩 AS-IS

 

회사 내에서 Airflow 를 개발/ 운영 을 나누어서 2개를 사용하고 있었는데 해당 UI 두개가 동일하여 현재 Airflow 가 Dev인지 Prod 인지 헷갈렸었기 때문에 Plugin 을 이용해 단순 메뉴를 추가함으로써 Dev/ Prod 를 구분하고자 했다. 

 

✨ TO-BE

 

추가로 원하는 Template 을 생성해 UI로 expose 시킬 수도 있다. 현재는 단순 Text 만 보이게 해두었다. 

 

📝 Plugin 을 통해 Webserver 에 Menu Item 추가하기

본격적으로 어떻게 Menu Item 을 추가할 수 있는 지 알아보자. 아래는 참고한 Airflow 공식문서이다. 

https://airflow.apache.org/docs/apache-airflow/2.2.4/plugins.html

Plugins — Airflow Documentation

 

기본적으로 내장된 AirflowPlugin 을 상속받아 Custom Plugin 을 설정한다. Airflow의 Webserver 는 Flask 로 만들어져 있다. 

따라서 Flask 의 모듈을 사용하여 Webserver 를 커스텀하게 수정한다. 따라서 미리 Flask 에 대해 알고있으면 좋다. 

 

 

❗️주의사항

해당 코드는 $AIRFLOW_HOME/plugins 하위에 작성해야 한다. 설정된 AIRFLOW_HOME path 에 plugins 폴더가 없다면 추가해야 한다. 

 

위에 첨부한 Airflow 에 Dev Menu 를 추가한 코드는 다음과 같다. 

 

먼저, Flask 의 Blueprint 를 사용해 라우팅 처리를 한다.

TestAppBuilderBaseView 는 AppBuilderBaseView 를 상속받는다.

AppBuilderBaseView는 내가 지정한 url 을 Flask에 등록시켜주는 constructor 다.

 

❗️AppBuilderBaseView 에서 default_view 는 expose 시킨 함수의 이름과 동일하게 작성해주어야 한다.

 

 

또한, template 폴더를 생성해서 웹 view 를 생성할 수 있다. templates 폴더도 /plugin 하위에 넣어주면 된다. 

 

다음으로는 메뉴에 보여질 view 를 작성 후 AirflowPlugin 에 넣어준다.

 

v_app_builder_package에서 name은 내가 새로 생성한 메뉴 하위에 들어갈 목록 이름을 적는다. 

category 는 내가 위에 생성하고자 하는 menu 이름을 적어주면 된다.

 

이렇게 하면 위와 같은 DEV 메뉴가 생성된 Airflow Webserver 가 띄워지게 된다. 

 

참고) Plugin Folder Structure