feast-dev · franciscojavierarceo · Mar 27, 2025 · Mar 27, 2025
@@ -13,6 +13,7 @@ import DatasourceIndex from "./pages/data-sources/Index";
 import DatasetIndex from "./pages/saved-data-sets/Index";
 import EntityIndex from "./pages/entities/Index";
 import EntityInstance from "./pages/entities/EntityInstance";
+import FeatureListPage from "./pages/features/FeatureListPage";
 import FeatureInstance from "./pages/features/FeatureInstance";
 import FeatureServiceIndex from "./pages/feature-services/Index";
 import FeatureViewIndex from "./pages/feature-views/Index";
@@ -88,6 +89,7 @@ const FeastUISansProviders = ({
                       path="data-source/:dataSourceName/*"
                       element={<DataSourceInstance />}
                     />
+                    <Route path="features/" element={<FeatureListPage />} />
                     <Route
                       path="feature-view/"
                       element={<FeatureViewIndex />}

@@ -11,6 +11,7 @@ import { EntityIcon } from "../graphics/EntityIcon";
 import { FeatureViewIcon } from "../graphics/FeatureViewIcon";
 import { FeatureServiceIcon } from "../graphics/FeatureServiceIcon";
 import { DatasetIcon } from "../graphics/DatasetIcon";
+import { FeatureIcon } from "../graphics/FeatureIcon";
 
 const SideNav = () => {
   const registryUrl = useContext(RegistryPathContext);
@@ -41,6 +42,12 @@ const SideNav = () => {
       : ""
   }`;
 
+  const featureListLabel = `Features ${
+    isSuccess && data?.allFeatures && data?.allFeatures.length > 0
+      ? `(${data?.allFeatures.length})`
+      : ""
+  }`;
+
   const featureServicesLabel = `Feature Services ${
     isSuccess && data?.objects.featureServices
       ? `(${data?.objects.featureServices?.length})`
@@ -77,6 +84,13 @@ const SideNav = () => {
           renderItem: (props) => <Link {...props} to={`${baseUrl}/entity`} />,
           isSelected: useMatchSubpath(`${baseUrl}/entity`),
         },
+        {
+          name: featureListLabel,
+          id: htmlIdGenerator("featureList")(),
+          icon: <EuiIcon type={FeatureIcon} />,
+          renderItem: (props) => <Link {...props} to={`${baseUrl}/features`} />,
+          isSelected: useMatchSubpath(`${baseUrl}/features`),
+        },
         {
           name: featureViewsLabel,
           id: htmlIdGenerator("featureView")(),

@@ -0,0 +1,133 @@
+import React, { useState, useContext } from "react";
+import {
+  EuiBasicTable,
+  EuiTableFieldDataColumnType,
+  EuiTableComputedColumnType,
+  EuiFieldSearch,
+  EuiPageTemplate,
+  CriteriaWithPagination,
+  Pagination,
+} from "@elastic/eui";
+import EuiCustomLink from "../../components/EuiCustomLink";
+import { useParams } from "react-router-dom";
+import useLoadRegistry from "../../queries/useLoadRegistry";
+import RegistryPathContext from "../../contexts/RegistryPathContext";
+
+interface Feature {
+  name: string;
+  featureView: string;
+  type: string;
+}
+
+type FeatureColumn =
+  | EuiTableFieldDataColumnType<Feature>
+  | EuiTableComputedColumnType<Feature>;
+
+const FeatureListPage = () => {
+  const { projectName } = useParams();
+  const registryUrl = useContext(RegistryPathContext);
+  const { data, isLoading, isError } = useLoadRegistry(registryUrl);
+  const [searchText, setSearchText] = useState("");
+
+  const [sortField, setSortField] = useState<keyof Feature>("name");
+  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
+
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(100);
+
+  if (isLoading) return <p>Loading...</p>;
+  if (isError) return <p>Error loading features.</p>;
+
+  const features: Feature[] = data?.allFeatures || [];
+
+  const filteredFeatures = features.filter((feature) =>
+    feature.name.toLowerCase().includes(searchText.toLowerCase()),
+  );
+
+  const sortedFeatures = [...filteredFeatures].sort((a, b) => {
+    const valueA = a[sortField].toLowerCase();
+    const valueB = b[sortField].toLowerCase();
+    return sortDirection === "asc"
+      ? valueA.localeCompare(valueB)
+      : valueB.localeCompare(valueA);
+  });
+
+  const paginatedFeatures = sortedFeatures.slice(
+    pageIndex * pageSize,
+    (pageIndex + 1) * pageSize,
+  );
+
+  const columns: FeatureColumn[] = [
+    {
+      name: "Feature Name",
+      field: "name",
+      sortable: true,
+      render: (name: string, feature: Feature) => (
+        <EuiCustomLink
+          to={`/p/${projectName}/feature-view/${feature.featureView}/feature/${name}`}
+        >
+          {name}
+        </EuiCustomLink>
+      ),
+    },
+    {
+      name: "Feature View",
+      field: "featureView",
+      sortable: true,
+      render: (featureView: string) => (
+        <EuiCustomLink to={`/p/${projectName}/feature-view/${featureView}`}>
+          {featureView}
+        </EuiCustomLink>
+      ),
+    },
+    { name: "Type", field: "type", sortable: true },
+  ];
+
+  const onTableChange = ({ page, sort }: CriteriaWithPagination<Feature>) => {
+    if (sort) {
+      setSortField(sort.field as keyof Feature);
+      setSortDirection(sort.direction);
+    }
+    if (page) {
+      setPageIndex(page.index);
+      setPageSize(page.size);
+    }
+  };
+
+  const getRowProps = (feature: Feature) => ({
+    "data-test-subj": `row-${feature.name}`,
+  });
+
+  const pagination: Pagination = {
+    pageIndex,
+    pageSize,
+    totalItemCount: sortedFeatures.length,
+    pageSizeOptions: [20, 50, 100],
+  };
+
+  return (
+    <EuiPageTemplate panelled>
+      <EuiPageTemplate.Header pageTitle="Feature List" />
+      <EuiPageTemplate.Section>
+        <EuiFieldSearch
+          placeholder="Search features"
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          fullWidth
+        />
+        <EuiBasicTable
+          columns={columns}
+          items={paginatedFeatures}
+          rowProps={getRowProps}
+          sorting={{
+            sort: { field: sortField, direction: sortDirection },
+          }}
+          onChange={onTableChange}
+          pagination={pagination}
+        />
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
+  );
+};
+
+export default FeatureListPage;
@@ -14,6 +14,13 @@ interface FeatureStoreAllData {
   mergedFVMap: Record<string, genericFVType>;
   mergedFVList: genericFVType[];
   indirectRelationships: EntityRelation[];
+  allFeatures: Feature[];
+}
+
+interface Feature {
+  name: string;
+  featureView: string;
+  type: string;
 }
 
 const useLoadRegistry = (url: string) => {
@@ -51,6 +58,18 @@ const useLoadRegistry = (url: string) => {
           //   relationships,
           //   indirectRelationships,
           // });
+          const allFeatures: Feature[] =
+            objects.featureViews?.flatMap(
+              (fv) =>
+                fv?.spec?.features?.map((feature) => ({
+                  name: feature.name ?? "Unknown",
+                  featureView: fv?.spec?.name || "Unknown FeatureView",
+                  type:
+                    feature.valueType != null
+                      ? feast.types.ValueType.Enum[feature.valueType]
+                      : "Unknown Type",
+                })) || [],
+            ) || [];
 
           return {
             project: objects.projects[0].spec?.name!,
@@ -59,6 +78,7 @@ const useLoadRegistry = (url: string) => {
             mergedFVList,
             relationships,
             indirectRelationships,
+            allFeatures,
           };
         });
     },