自定义 Apache Airflow 中的 UI

2025 年 6 月 10 日 | 阅读 8 分钟

引言

Apache Airflow 是一个强大的开源工作流编排工具。虽然它开箱即用地提供了结构良好的 Web UI，但有时用户可能希望自定义界面以更好地满足其需求。自定义 Apache Airflow 的 UI 可以增强可用性、集成品牌标识，并为用户提供量身定制的功能。

了解 Apache Airflow UI

默认的 Apache Airflow UI 是使用 Flask Web 框架构建的，并遵循标准的布局，包括：

DAGs 页面：列出所有可用的有向无环图 (DAG)。
图视图：以图形格式显示 DAG 执行。
树视图：以结构化的树状图显示任务执行历史。
甘特图：可视化任务执行时间。
任务实例详情页面：提供有关单个任务的信息。

UI 的自定义主要涉及通过 Flask 模板、JavaScript 和 CSS 修改这些组件。

自定义 Apache Airflow UI 的方法

更改主题（CSS 自定义）

Apache Airflow 的 UI 使用 Bootstrap，因此可以通过自定义 CSS 文件来修改 UI 主题。

修改 UI 主题的步骤

1. 找到模板目录

Airflow 使用 Flask 的 Jinja2 模板来渲染 UI。您可以通过修改 airflow/www/templates 中的文件来覆盖这些模板。

2. 修改 CSS 文件

找到 airflow/www/static/css 目录。
创建一个新的自定义 CSS 文件或修改现有的 main.css 文件。

3. 应用自定义样式

修改 main.css 中背景颜色和字体的示例

 
body {
    background-color: #f8f9fa; /* Light gray */
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #007bff !important; /* Change navigation bar color */
}   

4. 重启 Airflow Webserver

运行以下命令以应用更改

自定义 Apache Airflow Logo

要将默认的 Apache Airflow logo 替换为自定义公司 logo

导航到 airflow/www/static/img。
将 airflow_logo.png 替换为您的自定义 logo 文件。
重启 Airflow Webserver

向 UI 添加自定义页面

创建自定义 Flask 视图

Apache Airflow 允许通过扩展 Flask 的蓝图系统来添加自定义页面。

添加自定义页面的步骤

1. 创建一个新的 Flask 蓝图

在 airflow/plugins 目录中，创建一个名为 custom_view.py 的新文件。

 
from flask import Blueprint, render_template
from airflow.www.security import AirflowSecurityManager
from airflow.plugins_manager import AirflowPlugin
custom_page = Blueprint(
    "custom_page", __name__,
    template_folder='templates',
    static_folder='static',
)
@custom_page.route("/custom_dashboard")
def custom_dashboard():
    return render_template("custom_dashboard.html")
class CustomViewPlugin(AirflowPlugin):
    name = "custom_view"
    flask_blueprints = [custom_page]   

2. 创建自定义 HTML 模板

在 airflow/plugins/templates/ 中，创建一个名为 custom_dashboard.html 的文件。

 
{% extends "airflow/master.html" %}
{% block title %}Custom Dashboard{% endblock %}
{% block content %}
<h1>Welcome to the Custom Dashboard</h1>
<p>This is a custom UI extension for Apache Airflow.</p>
{% endblock %}   

3. 重启 Airflow Webserver

4. 访问自定义页面

打开浏览器并导航到

修改现有 UI 元素

自定义 DAGs 列表页面

可以通过修改 airflow/www/templates/airflow/dags.html 文件来自定义 DAGs 列表页面。

例如，在顶部添加自定义消息

 
{% extends "airflow/master.html" %}
{% block title %}DAGs List{% endblock %}
{% block content %}
<h2>Welcome to Your Custom Airflow DAGs Page</h2>
<p>This page has been customized.</p>
{{ super() }}
{% endblock %}   

重启 Webserver 以应用更改。

使用 JavaScript 扩展 UI 功能

Apache Airflow 允许添加 JavaScript 函数来增强 UI 交互性。

示例：在页面加载时添加自定义 JavaScript 警报

修改 airflow/www/static/js/main.js

 
document.addEventListener("DOMContentLoaded", function() {
    alert("Welcome to the Custom Apache Airflow UI!");
});   

重启 Airflow 以应用更改。

向导航栏添加自定义链接

要向 UI 添加自定义导航链接，请修改 airflow/www/templates/airflow/master.html 文件。

 
<ul class="navbar-nav">
   <li class="nav-item">
       <a class="nav-link" href="/custom_dashboard">Custom Dashboard</a>
   </li>
</ul>   

这将把一个 **自定义仪表板** 链接添加到顶部导航栏。

使用身份验证自定义 UI 安全性

Apache Airflow 支持 **RBAC（基于角色的访问控制）**，它允许限制对某些 UI 元素的访问。

启用 RBAC

1. 编辑 airflow.cfg

 
[webserver]
rbac = True   

2. 在 airflow/www/security.py 中定义用户角色。

 
from flask_appbuilder.security.sqla.models import Role

role = Role(name="CustomUser")
role.permissions.append("can_read")
session.add(role)
session.commit()   

3. 重启 Webserver。

自定义 UI 中的任务日志

默认情况下，任务日志会出现在 Airflow UI 的 Log 选项卡中。您可以修改 airflow.cfg 文件来自定义日志格式。

 
[logging]
task_log_reader = custom_log_reader   

要自定义日志的显示方式，请修改 airflow/www/views.py。

 
class CustomLogView(BaseView):
    @expose('/log/<task_id>')
    def log(self, task_id):
        return self.render("custom_log.html", task_id=task_id)   

重启 Webserver 以应用更改。

创建自定义插件以扩展 UI 功能

Apache Airflow 支持插件，允许开发人员扩展其 UI 和后端功能。通过使用插件，您可以在不更改核心 Airflow 代码的情况下添加新视图、修改现有页面和集成外部工具。

创建自定义 UI 插件

要创建 UI 插件，请按照以下步骤操作：

1. 导航到插件目录

确保您的 Airflow 主目录中有一个 plugins 目录。如果不存在，请创建它。

2. 创建自定义插件文件

在 plugins 目录中，创建一个名为 custom_plugin.py 的新文件。

 
from airflow.plugins_manager import AirflowPlugin
from flask import Blueprint, render_template
custom_blueprint = Blueprint("custom_ui", __name__, template_folder="templates")
@custom_blueprint.route("/custom_page")
def custom_page():
    return render_template("custom_page.html")
class CustomUIPlugin(AirflowPlugin):
    name = "custom_ui_plugin"
    flask_blueprints = [custom_blueprint]   

3. 创建自定义 HTML 页面

在 plugins/templates/ 中，创建一个名为 custom_page.html 的文件。

 
{% extends "airflow/master.html" %}
{% block title %}Custom UI Page{% endblock %}
{% block content %}
<h1>Welcome to the Custom UI Page</h1>
<p>This page is added using a custom Airflow plugin.</p>
{% endblock %}   

4. 重启 Airflow Webserver

5. 访问自定义页面

此方法允许在不修改核心 Airflow 代码的情况下添加新的 UI 元素。

将第三方工具集成到 UI 中

许多组织在 Airflow 之外使用外部监控和可视化工具，例如 **Grafana、Kibana 或 Prometheus。** 这些工具可以嵌入到 UI 中，以便更好地进行工作流监控。

嵌入外部仪表板

要集成第三方工具，例如 **Grafana 仪表板，** 请按照以下步骤操作：

1. 为仪表板创建一个 HTML 文件。 在 plugins/templates/ 中，创建一个名为 grafana_dashboard.html 的文件。

 
{% extends "airflow/master.html" %}
{% block content %}
<iframe src="https://your-grafana-dashboard.com" width="100%" height="800px"></iframe>
{% endblock %}   

2. 修改插件文件以包含此视图。 更新 custom_plugin.py。

 
external_dashboard_blueprint = Blueprint(
    "external_dashboard", __name__, template_folder="templates"
)
def grafana_dashboard():
    return render_template("grafana_dashboard.html")
class ExternalDashboardPlugin(AirflowPlugin):
    name = "external_dashboard"
    flask_blueprints = [external_dashboard_blueprint]   

3. 重启 Airflow Webserver

4. 访问仪表板

此方法允许 Airflow 用户使用外部工具监控工作流，而无需在多个界面之间切换。

优化 Apache Airflow UI 性能

如果 Apache Airflow UI 速度缓慢，请考虑实现性能优化。

启用缓存以加快页面加载速度

Airflow 默认不缓存 UI 元素，但您可以启用缓存以提高性能。

1. 安装 Flask-Caching

2. 修改 Web 应用程序以使用缓存

更新 custom_plugin.py

 
from flask_caching import Cache
from airflow.www.app import cached_app

cache = Cache(config={'CACHE_TYPE': 'simple'})

@cached_app.before_first_request
def setup_cache():
    cache.init_app(cached_app)   

3. 重启 Airflow Webserver

现在，经常访问的 UI 元素将加载得更快。

减少加载的 DAG 数量

如果 DAGs 列表页面加载时间过长，请减少每个请求获取的 DAG 数量。

修改 airflow.cfg

 
[webserver]
dag_default_view = graph
dag_orientation = LR   

此设置可确保 DAG 列表更有效地呈现。

排除 UI 自定义常见问题

以下是自定义 Apache Airflow UI 时遇到的一些常见问题及其解决方案。

UI 更改未生效

问题：模板或静态文件中的修改未显示。

解决方案

清除浏览器缓存并重启 Webserver。

确保自定义文件放置在 airflow/plugins/templates/ 中。

Flask 蓝图未注册

问题：自定义视图未显示在 UI 中。

解决方案

检查蓝图是否在插件中正确注册。
确保 Airflow Webserver 日志中没有显示导入错误。

UI 性能问题

问题：修改后 UI 变慢。

解决方案

启用缓存。
减少数据库查询次数。
通过最小化文件大小来优化 JavaScript 和 CSS。

Apache Airflow UI 的未来增强功能

展望未来，可以进行其他自定义，包括：

深色模式支持
修改 CSS 样式以提供深色模式选项。
实时 DAG 监控
- 使用 WebSockets 动态更新 DAG 状态。
用户特定仪表板
- 实现 RBAC 以根据用户角色显示不同的 UI 元素。

修改 DAG 视图以获得更好的可视化效果

Apache Airflow 中的 DAG 可视化提供了对任务执行的重要见解。然而，组织通常需要进行修改以增强清晰度和可用性。

自定义图视图

默认的图视图使用节点和边表示 DAG 执行。自定义此视图有助于突出关键任务和依赖项。

修改图视图的步骤

1. 找到 airflow/www/static/js/graph.js。

2. 修改渲染逻辑，根据执行状态自定义节点颜色。

 
function customizeGraphNodeColors(status) {
    if (status === "success") return "#28a745";  // Green for success
    return "#ffc107";  // Yellow for pending
}   

3. 重启 Airflow Webserver 以应用更改。

改进树视图

树视图提供了一个关于 DAG 随时间执行的分层表示。为了使其更易读：

修改 airflow/www/templates/airflow/tree.html。
添加工具提示以显示额外的任务信息。
使用 CSS 调整间距以提高可读性。

添加交互式 UI 元素

添加交互式元素可以使导航更直观，并改进工作流监控。

启用实时数据更新

默认情况下，Airflow 的 UI 需要手动刷新。您可以使用 AJAX 启用实时更新。

启用实时数据更新的步骤

1. 修改 airflow/www/static/js/main.js

 
setInterval(function() {
    location.reload();
}, 60000);  // Refresh every 60 seconds   

2. 重启 Webserver。

为快速操作添加自定义按钮

为了简化常见操作，例如重启失败的任务，请在 DAGs 页面中添加自定义按钮。

添加重启按钮的步骤

1. 编辑 airflow/www/templates/airflow/dags.html。

2. 添加以下 HTML 按钮：

3. 在 airflow/www/static/js/main.js 中实现重启逻辑。

 
function restartFailedTasks() {
    fetch("/restart_failed_tasks", { method: "POST" })
        .then(response => alert("Tasks restarted successfully!"))
        .catch(error => alert("Error restarting tasks"));
}   

4. 重启 Airflow Webserver。

嵌入第三方监控工具

许多团队使用 **Grafana、Prometheus** 和 **Kibana** 等外部监控工具来跟踪 Airflow 性能。将这些工具嵌入 UI 中可以提供无缝的监控体验。

集成 Grafana 仪表板

将 Grafana 嵌入 UI 的步骤

1. 在 airflow/plugins/templates/ 中创建一个 HTML 页面。

 
{% extends "airflow/master.html" %}
{% block content %}
<iframe src="https://your-grafana-dashboard.com" width="100%" height="800px"></iframe>
{% endblock %}   

2. 在 custom_plugin.py 中注册视图。

 
from flask import Blueprint, render_template
from airflow.plugins_manager import AirflowPlugin
grafana_page = Blueprint("grafana", __name__, template_folder="templates")
@grafana_page.route("/grafana_dashboard")
def grafana_dashboard():
    return render_template("grafana_dashboard.html")
class GrafanaPlugin(AirflowPlugin):
    name = "grafana_plugin"
    flask_blueprints = [grafana_page]   

3. 重启 Airflow Webserver 并访问 https://:8080/grafana_dashboard。

排除 UI 自定义常见问题

在自定义 Apache Airflow UI 时，用户可能会遇到各种问题。以下是如何有效解决这些问题的方法。

UI 更改未生效

问题：模板或静态文件中的自定义未显示。

解决方案

清除浏览器缓存并重启 Airflow Webserver。

确保静态文件放置在 airflow/plugins/static/ 中。

Flask 蓝图未注册

问题：自定义视图未显示在 UI 中。

解决方案

检查 Blueprint 是否在 custom_plugin.py 中正确注册。
确保 Airflow Webserver 日志中没有显示导入错误。

UI 性能缓慢

问题：修改后 UI 变慢。

解决方案

使用 Flask-Caching 启用缓存。
优化 JavaScript 和 CSS 文件大小。
减少数据库查询次数。

Apache Airflow UI 的未来增强功能

Apache Airflow UI 可以通过以下功能进一步增强：

深色模式支持 – 修改 CSS 样式以引入深色模式切换。
实时 DAG 监控 – 使用 WebSockets 动态更新 DAG 状态。
用户特定仪表板 – 实现 RBAC 以根据用户角色个性化 UI 元素。

自定义 Apache Airflow UI 可增强用户体验，符合品牌形象，并改进工作流管理。通过修改主题、添加自定义视图、集成第三方工具和优化性能，组织可以根据自身需求定制 Airflow。深色模式和实时监控等功能进一步增强了可用性。通过持续改进，精心定制的 UI 可确保更好的效率、可访问性和控制力，使 Airflow 成为更强大、更易于使用的编排工具。

下一主题Managing-variables-in-apache-airflow

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Airflow 教程

自定义 Apache Airflow 中的 UI

引言

了解 Apache Airflow UI

自定义 Apache Airflow UI 的方法

更改主题（CSS 自定义）

自定义 Apache Airflow Logo

向 UI 添加自定义页面

创建自定义 Flask 视图

修改现有 UI 元素

自定义 DAGs 列表页面

使用 JavaScript 扩展 UI 功能

向导航栏添加自定义链接

使用身份验证自定义 UI 安全性

自定义 UI 中的任务日志

创建自定义插件以扩展 UI 功能

创建自定义 UI 插件

将第三方工具集成到 UI 中

嵌入外部仪表板

优化 Apache Airflow UI 性能

启用缓存以加快页面加载速度

减少加载的 DAG 数量

排除 UI 自定义常见问题

UI 更改未生效

Flask 蓝图未注册

UI 性能问题

Apache Airflow UI 的未来增强功能

修改 DAG 视图以获得更好的可视化效果

自定义图视图

改进树视图

添加交互式 UI 元素

启用实时数据更新

为快速操作添加自定义按钮

嵌入第三方监控工具

集成 Grafana 仪表板

排除 UI 自定义常见问题

UI 更改未生效

Flask 蓝图未注册

UI 性能缓慢

Apache Airflow UI 的未来增强功能

相关帖子

Apache Airflow 编写插件

Apache Airflow 密钥后端

Apache Airflow 包额外功能

Apache Airflow DAG 运行

在 Docker 中运行 Airflow

Apache Airflow 中的设置和拆卸

Apache Airflow TaskFlow API

Apache Airflow Kerberos 集成

Airflow 的公共接口

Apache Airflow DAG

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器