css - 扩展 Airflow Web UI 并添加静态 HTML 页面和 CSS

标签 css flask plugins airflow mkdocs

我一直在尝试通过添加 Airflow 插件来扩展 Airflow 的用户界面。我的目标是能够从 Airflow 中显示内部元素文档。我为此使用 MKDocs。

我遵循了 Airflow 文档流程( https://airflow.apache.org/plugins.html#example )并成功创建了一个插件。该链接出现,当我点击它时,它会将我带到 index.html。我的问题是它没有呈现任何 CSS、图像和其他 .md 或 .html 文件。它们都在同一个文件夹中。

我在 StackOverflow ( Airlfow serving static html directory ) 上发现了一个类似的线程。我试图按照那里发布的解决方案进行操作,但它没有帮助。

我也在 Airflow 帮助论坛上发布了查询,但我还没有收到任何解决方案。我将不胜感激任何线索。谢谢你。

#Creating a flask appbuilder BaseView
class TestAppBuilderBaseView(AppBuilderBaseView):
    template_folder = '/home/airflow/airflow/plugins/test-project/site'

    @expose("/")
    def list(self):
        return self.render_template("index.html", content="")

v_appbuilder_view = TestAppBuilderBaseView()

v_appbuilder_package = {"name": "Test View",
                        "category": "Test Plugin",
                        "view": v_appbuilder_view}

插件类:
# Defining the plugin class
class AirflowTestPlugin(AirflowPlugin):
    name = "test_plugin"
    appbuilder_views = [v_appbuilder_package]

最佳答案

面临类似的问题:我不得不在 doc_md 中显示图像一个 DAG。
长话短说,我们需要配置一个 Blueprint正确托管静态文件和模板。
以下为我工作 airflow=1.10.14 .test_plugin.py

from airflow.plugins_manager import AirflowPlugin
from flask import Blueprint
from flask_admin import base, BaseView, expose


# Creating a flask admin BaseView
class 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 folder
bp = 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>
目录结构
airflow 
    - plugins
        - test_plugin.py
        - templates
            - testview
                - index.html
        - static
            - testview
                - img
                    - initial-state.png

关于css - 扩展 Airflow Web UI 并添加静态 HTML 页面和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57608958/

相关文章:

python - 在 Google Cloud Storage 中存储多个同名文件?

plugins - 手动安装 Gradle 插件

php - Wordpress:从插件内将表单提交到不同的数据库和表

javascript - 如何将插件添加到 Bootstrap

java - CSS 文件未加载?

html - Bootstrap 4 : div with Equal height with color fill and gutter in between

python - Flask:Peewee model_to_dict 助手不起作用

javascript - 显示隐藏 <div> 并同时滚动的按钮

CSS:获取父级内部的所有可用高度而不会溢出

html - 无法理解 flask 如何使用 url_for