Airflow 网页UI定制

介绍

Apache Airflow 是一个强大的工作流管理工具，广泛用于数据管道的编排和调度。其内置的网页用户界面（UI）为用户提供了直观的任务监控和管理功能。然而，在某些情况下，默认的UI可能无法完全满足特定需求。通过定制Airflow的网页UI，您可以增强用户体验、添加自定义功能或调整界面布局。

本文将逐步介绍如何定制Airflow的网页UI，包括修改模板、添加自定义视图以及调整样式。

1. 理解Airflow的UI架构

Airflow的网页UI基于Flask框架构建，使用Jinja2模板引擎渲染页面。UI的主要组件包括：

Templates: 用于生成HTML页面的Jinja2模板。
Static Files: 包括CSS、JavaScript和图片等静态资源。
Views: 处理HTTP请求并返回响应的Flask视图函数。

通过修改这些组件，您可以实现UI的定制。

2. 修改模板

Airflow的模板文件位于 airflow/www/templates 目录中。您可以通过覆盖这些模板来修改UI的外观和行为。

示例：自定义导航栏

假设您希望在导航栏中添加一个自定义链接。首先，创建一个新的模板文件 custom_navbar.html：

html
<!-- custom_navbar.html -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Airflow</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li><a href="/custom">Custom Link</a></li>
    </ul>
  </div>
</nav>

然后，在 airflow.cfg 中指定自定义模板路径：

ini
[webserver]
template_folder = /path/to/custom/templates

重启Airflow后，导航栏将显示您添加的自定义链接。

3. 添加自定义视图

您可以通过创建自定义视图来扩展Airflow的UI功能。以下是一个简单的示例，展示如何添加一个自定义页面。

示例：创建自定义页面

首先，创建一个新的Flask视图函数：

python
from flask import Blueprint, render_template

custom_blueprint = Blueprint('custom', __name__, url_prefix='/custom')

@custom_blueprint.route('/')
def custom_page():
    return render_template('custom_page.html')

def register_custom_views(app):
    app.register_blueprint(custom_blueprint)

然后，在 airflow/www/views.py 中注册该视图：

python
from airflow.www import app
from custom_views import register_custom_views

register_custom_views(app)

最后，创建一个模板文件 custom_page.html：

html
<!-- custom_page.html -->
{% extends "airflow/master.html" %}
{% block content %}
<h1>Custom Page</h1>
<p>This is a custom page added to Airflow UI.</p>
{% endblock %}

重启Airflow后，访问 /custom 路径即可看到自定义页面。

4. 调整样式

您可以通过修改静态文件来调整Airflow的样式。静态文件位于 airflow/www/static 目录中。

示例：自定义CSS

假设您希望更改Airflow的背景颜色。首先，创建一个新的CSS文件 custom.css：

css
/* custom.css */
body {
    background-color: #f0f0f0;
}

然后，在 airflow.cfg 中指定自定义静态文件路径：

ini
[webserver]
static_folder = /path/to/custom/static

重启Airflow后，页面背景颜色将变为浅灰色。

5. 实际案例

案例：添加任务状态统计图表

假设您希望在Airflow的UI中添加一个任务状态统计图表。您可以通过以下步骤实现：

创建一个自定义视图，用于获取任务状态数据。
使用JavaScript库（如Chart.js）在页面上绘制图表。
将图表嵌入到Airflow的模板中。

以下是一个简单的示例：

python
from flask import Blueprint, jsonify
from airflow.models import TaskInstance

custom_blueprint = Blueprint('custom', __name__, url_prefix='/custom')

@custom_blueprint.route('/task_stats')
def task_stats():
    stats = {
        'success': TaskInstance.query.filter_by(state='success').count(),
        'failed': TaskInstance.query.filter_by(state='failed').count(),
        'running': TaskInstance.query.filter_by(state='running').count(),
    }
    return jsonify(stats)

def register_custom_views(app):
    app.register_blueprint(custom_blueprint)

在模板中添加JavaScript代码以绘制图表：

html
<!-- custom_page.html -->
{% extends "airflow/master.html" %}
{% block content %}
<h1>Task Statistics</h1>
<canvas id="taskStatsChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
fetch('/custom/task_stats')
    .then(response => response.json())
    .then(data => {
        const ctx = document.getElementById('taskStatsChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Success', 'Failed', 'Running'],
                datasets: [{
                    label: 'Task Status',
                    data: [data.success, data.failed, data.running],
                    backgroundColor: ['green', 'red', 'blue']
                }]
            }
        });
    });
</script>
{% endblock %}

重启Airflow后，访问 /custom 路径即可看到任务状态统计图表。

总结

通过定制Airflow的网页UI，您可以增强用户体验、添加自定义功能或调整界面布局。本文介绍了如何修改模板、添加自定义视图以及调整样式，并通过实际案例展示了如何添加任务状态统计图表。

附加资源

练习

尝试在Airflow的UI中添加一个新的页面，显示所有DAG的列表。
修改Airflow的默认样式，使其符合您团队的品牌风格。
创建一个自定义视图，显示最近24小时内失败的任务列表。

通过完成这些练习，您将更深入地理解如何定制Airflow的网页UI。

介绍​

1. 理解Airflow的UI架构​

2. 修改模板​

示例：自定义导航栏​

3. 添加自定义视图​

示例：创建自定义页面​

4. 调整样式​

示例：自定义CSS​

5. 实际案例​

案例：添加任务状态统计图表​

总结​

附加资源​

练习​

介绍