Apache Airflowのナビゲーションバーの色を変更する

こんにちは。サービスグループの武田です。

ワークフローエンジンのひとつであるApache AirflowではWebベースの管理UIが提供されています。環境がひとつなのであれば特に問題はないのですが、いくつかの異なる環境でAirflowを起動していた場合、ぱっと見でどの環境の管理画面を開いているのかわかりにくいことがあります。

Airflowはオープンソースなので自分たちで管理UIをカスタマイズできますが、もっと簡単に違いを出すことができます。それがナビゲーションバーの色です。これは設定で指定するだけなのでとても簡単です。

デフォルトの色

まずこちらがデフォルトの管理UIで、色指定は#fffです。ちなみに今回のバージョンは2.0.2で、1系はまた違う画面なので注意してください（色変更のやり方は同じです）。

Airflow 1に近い色を指定してみる

それでは色を変えてみます。色は設定ファイルのwebserver.navbar_colorに指定します。設定ファイルを直接変更できない場合は、代わりに環境変数AIRFLOW__WEBSERVER__NAVBAR_COLORで指定できます。今回はAirflow 1でデフォルト指定されていた#007A87に近い#007A88を指定してみます。ちなみに#007A87を指定すると、次のようなメッセージが表示されて無効化されました。

/usr/local/lib/python3.7/site-packages/airflow/configuration.py:275: FutureWarning: The navbar_color setting in [webserver] has the old default value of '#007A87'. This value has been changed to '#fff' in the running config, but please update your config before Apache Airflow 2.1.

以前紹介したaws-mwaa-local-runnerを例にすると、これはdocker-composeを利用しているため、composeファイルに設定を追加すればOKです。

--- a/docker/docker-compose-local.yml
+++ b/docker/docker-compose-local.yml
@@ -21,6 +21,7 @@ services:
         environment:
             - LOAD_EX=n
             - EXECUTOR=Local
+            - AIRFLOW__WEBSERVER__NAVBAR_COLOR=#007A88
         logging:
             options:
                 max-size: 10m

変更後の画面がこちらです。うーん、見づらい。

いっそ文字色と同じにしてみる

メニューの文字色は#51504fのようです。これを指定してみたのがこちら。

なんか画面全体が霞んでいるような、なんとも言えない感じになりました……。

まとめ

ナビゲーションバーの色変更のみであれば比較的簡単に実現できました。しかし文字色などは指定できないため、細かいカスタマイズをしたい場合はソースに手を入れるしかなさそうです。メンテナンスコストなども発生してしまうため、トータルで判断してベストな選択をしたいですね。