[实验]Feast Web UI
这个项目是和 创建反应应用。 。 。 .
使用量
有三种使用方式:
- 通过
feast ui查看当前特性存储器的 CLI - 将 UI 作为模块导入
- 运行整个构建为 React app.
导入 UI 为模块
这是建议使用"Feast UI"的出场方式,用于各小队维持自己的内部UI以部署"Feast".
开始于拖曳程序 create-react-app
npx create-react-app your-feast-ui
然后,在您的应用程序文件夹中安装 Feast UI 并选择它的对等依赖性 。 假设您使用纱线
yarn add @feast-dev/feast-ui
# For custom UI using the Elastic UI Framework (optional):
yarn add @elastic/eui
# For general custom styling (optional):
yarn add @emotion/react
编辑 index.js 在反应应用程序中使用"Feast UI".
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import FeastUI from "@feast-dev/feast-ui";
import "@feast-dev/feast-ui/dist/feast-ui.css";
ReactDOM.render(
<React.StrictMode>
<FeastUI />
</React.StrictMode>,
document.getElementById("root")
);
当你启动反应应用程序,它会寻找 projects-list.json 查找您的项目列表。 JSON应该这样.
{
"projects": [
{
"name": "Credit Score Project",
"description": "Project for credit scoring team and associated models.",
"id": "credit_score_project",
"registryPath": "/registry.json"
},
]
}
- 说明 - 说吧
registryPath只支持文件位置或url.
// Start the React App
yarn start
自定义
将"Feast UI"作为模块导入的优势在于方便定制. 这个 <FeastUI> 组件显示a feastUIConfigs 您可以自定义 UI 的道具 。 目前它支持一些参数.
获取工程列表
默认情况下, Feast UI 从 app root 路径获取工程列表. 你用得着 projectListPromise 以提供一个承诺 压倒它从哪里得到.
<FeastUI
feastUIConfigs={{
projectListPromise: fetch(SOME_PATH, {
headers: {
"Content-Type": "application/json",
},
}).then((res) => {
return res.json();
})
}}
/>
自定义标签
您可以通过 tabsRegistry。 。 。 .
const tabsRegistry = {
RegularFeatureViewCustomTabs: [
{
label: "Custom Tab Demo", // Navigation Label for the tab
path: "demo-tab", // Subpath for the tab
Component: RFVDemoCustomTab, // a React Component
},
]
}
<FeastUI
feastUIConfigs={{
tabsRegistry: tabsRegistry,
}}
/>
自定义标签的实例可见于 /custom-tabs 文件夹.
发展
在回放和创建回放 App上
这个工程被用Create React App(英语:Create React App)的脚本所拖住,并使用它的脚本来简化UI的开发. 你可以多学点 创建 App 文档。 。 。 .
学回放,看看 反应文档。 。 。 .
代码格式
代码格式化使用 高级。IDEs 通常具有Pretier 添加或扩展,用于格式化,但也可以运行:
yarn format以格式化所有文件yarn format:check以检查文件格式是否正确而不修改它们(在 GitHub 动作检查中使用)