css - 扩展 Airflow Web UI 并添加静态 HTML 页面和 CSS
问题描述
我一直在尝试通过添加气流插件来扩展气流的 UI。我的目标是能够从气流中显示内部项目文档。我为此使用 MKDocs。
我遵循了气流文档流程(https://airflow.apache.org/plugins.html#example)并成功创建了一个插件。该链接出现,当我单击它时,它会将我带到 index.html。我的问题是它没有渲染任何 CSS、图像和其他 .md 或 .html 文件。它们都在同一个文件夹中。
我在 StackOverflow 上找到了一个类似的线程(Airlfow serving static html directory)。我试图遵循那里发布的解决方案,但它没有帮助。
我还在气流帮助论坛上发布了查询,但我还没有收到任何解决方案。我会很感激任何线索。谢谢你。
#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
推荐阅读
- ruby-on-rails - 如何在管理 gem 中关联 Ancestry gem 数据
- javascript - Uncaught exception in AWS lambda javascript
- ios - Implement protocol variable conforming to single protocol as variable conforming to several protocols
- python - Having trouble making what should be a simple addition to Sudoku solver
- python - Can't solve this python problem I got error every time
- xpath - XPath query for importing web content
- java - How to create folder in root folder of the project?
- ios - 如何在 SwiftUI 中将渐变前景色文本移动到视图的中心?
- flutter - How to make a DataTable in a Positioned inside of a Stack scrollable
- typescript - How exactly do Protractor's ExpectedConditions work (related to behaviour on a non-angular site)?