[Alpha] Web UI

Warning: This is an experimental feature. It's intended for early testing and feedback, and could change without warnings in future releases.
Overview
The Feast Web UI allows users to explore their feature repository through a Web UI. It includes functionality such as:
Browsing Feast objects (feature views, entities, data sources, feature services, and saved datasets) and their relationships
Searching and filtering for Feast objects by tags
Sample UI
Usage
There are several ways to use the Feast Web UI.
Feast CLI
The easiest way to get started is to run the feast ui command within a feature repository:
Output of feast ui --help:
1
Usage: feast ui [OPTIONS]
2
​
3
Shows the Feast UI over the current directory
4
​
5
Options:
6
-h, --host TEXT                 Specify a host for the server [default: 0.0.0.0]
7
-p, --port INTEGER              Specify a port for the server [default: 8888]
8
-r, --registry_ttl_sec INTEGER  Number of seconds after which the registry is refreshed. Default is 5 seconds.
9
--help                          Show this message and exit.
Copied!
This will spin up a Web UI on localhost which automatically refreshes its view of the registry every registry_ttl_sec
Importing as a module to integrate with an existing React App
This is the recommended way to use Feast UI for teams maintaining their own internal UI for their deployment of Feast.
Start with bootstrapping a React app with create-react-app
1
npx create-react-app your-feast-ui
Copied!
Then, in your app folder, install Feast UI and its peer dependencies. Assuming you use yarn
1
yarn add @feast-dev/feast-ui
2
yarn add @elastic/eui @elastic/datemath @emotion/react moment prop-types inter-ui react-query react-router-dom use-query-params zod typescript query-string d3 @types/d3
Copied!
Edit index.js in the React app to use Feast UI.
1
import React from "react";
2
import ReactDOM from "react-dom";
3
import "./index.css";
4
​
5
import FeastUI from "@feast-dev/feast-ui";
6
import "@feast-dev/feast-ui/dist/feast-ui.css";
7
​
8
ReactDOM.render(
9
  <React.StrictMode>
10
    <FeastUI />
11
  </React.StrictMode>,
12
  document.getElementById("root")
13
);
Copied!
When you start the React app, it will look for project-list.json to find a list of your projects. The JSON should looks something like this.
1
{
2
  "projects": [
3
    {
4
      "name": "Credit Score Project",
5
      "description": "Project for credit scoring team and associated models.",
6
      "id": "credit_score_project",
7
      "registryPath": "/registry.json"
8
    }
9
  ]
10
}
Copied!
Then start the React App
1
yarn start
Copied!
Customization
The advantage of importing Feast UI as a module is in the ease of customization. The <FeastUI> component exposes a feastUIConfigs prop thorough which you can customize the UI. Currently it supports a few parameters.
Fetching the Project List
You can use projectListPromise to provide a promise that overrides where the Feast UI fetches the project list from.
1
<FeastUI
2
  feastUIConfigs={{
3
    projectListPromise: fetch(SOME_PATH, {
4
      headers: {
5
        "Content-Type": "application/json",
6
      },
7
    }).then((res) => {
8
      return res.json();
9
    })
10
  }}
11
/>
Copied!
Custom Tabs
You can add custom tabs for any of the core Feast objects through the tabsRegistry.
1
const tabsRegistry = {
2
  RegularFeatureViewCustomTabs: [
3
    {
4
      label: "Custom Tab Demo", // Navigation Label for the tab
5
      path: "demo-tab", // Subpath for the tab
6
      Component: RFVDemoCustomTab, // a React Component
7
    },
8
  ]
9
}
10
​
11
<FeastUI
12
  feastUIConfigs={{
13
    tabsRegistry: tabsRegistry,
14
  }}
15
/>
Copied!
Examples of custom tabs can be found in the ui/custom-tabs folder.

Go-based feature retrieval

Next - Reference

[Alpha] Data quality monitoring

Last modified 1mo ago

Export as PDF

Copy link

Edit on GitHub

Contents

Overview

Usage

Feast CLI

Importing as a module to integrate with an existing React App