Feature: Add permissions display to Feast UI lineage visualization

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
feast-dev · franciscojavierarceo · May 4, 2025 · May 3, 2025 · May 4, 2025 · May 4, 2025
commit 85981225adb3bb796f19064e8ccf8ca62ea90eaf
@@ -15,11 +15,12 @@ import {
 } from "reactflow";
 import "reactflow/dist/style.css";
 import dagre from "dagre";
-import { EuiPanel, EuiTitle, EuiSpacer, EuiLoadingSpinner } from "@elastic/eui";
+import { EuiPanel, EuiTitle, EuiSpacer, EuiLoadingSpinner, EuiToolTip } from "@elastic/eui";
 import { FEAST_FCO_TYPES } from "../parsers/types";
 import { EntityRelation } from "../parsers/parseEntityRelationships";
 import { feast } from "../protos";
 import { useTheme } from "../contexts/ThemeContext";
+import { formatPermissions, getEntityPermissions } from "../utils/permissionUtils";
 
 const edgeAnimationStyle = `
   @keyframes dashdraw {
@@ -53,6 +54,7 @@ interface NodeData {
   label: string;
   type: FEAST_FCO_TYPES;
   metadata: any;
+  permissions?: any[]; // Add permissions field
 }
 
 const getNodeColor = (type: FEAST_FCO_TYPES) => {
@@ -107,6 +109,7 @@ const CustomNode = ({ data }: { data: NodeData }) => {
   const lightColor = getLightNodeColor(data.type);
   const icon = getNodeIcon(data.type);
   const [isHovered, setIsHovered] = useState(false);
+  const hasPermissions = data.permissions && data.permissions.length > 0;
 
   const handleClick = () => {
     let path;
@@ -129,6 +132,10 @@ const CustomNode = ({ data }: { data: NodeData }) => {
     navigate(path);
   };
 
+  const permissionsTooltipContent = hasPermissions 
+    ? formatPermissions(data.permissions) 
+    : "No permissions set";
+
   return (
     <div
       style={{
@@ -167,6 +174,30 @@ const CustomNode = ({ data }: { data: NodeData }) => {
         </div>
       )}
 
+      {/* Permissions indicator */}
+      {hasPermissions && (
+        <EuiToolTip
+          position="top"
+          content={<pre style={{ margin: 0 }}>{permissionsTooltipContent}</pre>}
+        >
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              backgroundColor: "#5a7be0",
+              color: "white",
+              padding: "2px 8px",
+              fontSize: "12px",
+              borderBottomRightRadius: "6px",
+              zIndex: 5,
+            }}
+          >
+            P
+          </div>
+        </EuiToolTip>
+      )}
+
       <Handle
         type="target"
         position={Position.Left}
@@ -441,6 +472,7 @@ const Legend = () => {
 const registryToFlow = (
   objects: feast.core.Registry,
   relationships: EntityRelation[],
+  permissions?: any[]
 ) => {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
@@ -453,6 +485,11 @@ const registryToFlow = (
         label: fs.spec?.name,
         type: FEAST_FCO_TYPES.featureService,
         metadata: fs,
+        permissions: permissions ? getEntityPermissions(
+          permissions, 
+          FEAST_FCO_TYPES.featureService, 
+          fs.spec?.name
+        ) : [],
       },
       position: { x: 0, y: 0 },
     });
@@ -466,6 +503,11 @@ const registryToFlow = (
         label: fv.spec?.name,
         type: FEAST_FCO_TYPES.featureView,
         metadata: fv,
+        permissions: permissions ? getEntityPermissions(
+          permissions, 
+          FEAST_FCO_TYPES.featureView, 
+          fv.spec?.name
+        ) : [],
       },
       position: { x: 0, y: 0 },
     });
@@ -479,6 +521,11 @@ const registryToFlow = (
         label: odfv.spec?.name,
         type: FEAST_FCO_TYPES.featureView,
         metadata: odfv,
+        permissions: permissions ? getEntityPermissions(
+          permissions, 
+          FEAST_FCO_TYPES.featureView, 
+          odfv.spec?.name
+        ) : [],
       },
       position: { x: 0, y: 0 },
     });
@@ -492,6 +539,11 @@ const registryToFlow = (
         label: sfv.spec?.name,
         type: FEAST_FCO_TYPES.featureView,
         metadata: sfv,
+        permissions: permissions ? getEntityPermissions(
+          permissions, 
+          FEAST_FCO_TYPES.featureView, 
+          sfv.spec?.name
+        ) : [],
       },
       position: { x: 0, y: 0 },
     });
@@ -505,6 +557,11 @@ const registryToFlow = (
         label: entity.spec?.name,
         type: FEAST_FCO_TYPES.entity,
         metadata: entity,
+        permissions: permissions ? getEntityPermissions(
+          permissions, 
+          FEAST_FCO_TYPES.entity, 
+          entity.spec?.name
+        ) : [],
       },
       position: { x: 0, y: 0 },
     });
@@ -535,6 +592,11 @@ const registryToFlow = (
         label: dsName,
         type: FEAST_FCO_TYPES.dataSource,
         metadata: { name: dsName },
+        permissions: permissions ? getEntityPermissions(
+          permissions, 
+          FEAST_FCO_TYPES.dataSource, 
+          dsName
+        ) : [],
       },
       position: { x: 0, y: 0 },
     });
@@ -590,13 +652,15 @@ interface RegistryVisualizationProps {
   relationships: EntityRelation[];
   indirectRelationships: EntityRelation[];
   filterNode?: { type: FEAST_FCO_TYPES; name: string };
+  permissions?: any[]; // Add permissions field
 }
 
 const RegistryVisualization: React.FC<RegistryVisualizationProps> = ({
   registryData,
   relationships,
   indirectRelationships,
   filterNode,
+  permissions,
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
@@ -668,6 +732,7 @@ const RegistryVisualization: React.FC<RegistryVisualizationProps> = ({
       const { nodes: initialNodes, edges: initialEdges } = registryToFlow(
         registryData,
         validRelationships,
+        permissions
       );
 
       const { nodes: layoutedNodes, edges: layoutedEdges } =

@@ -12,12 +12,14 @@ import useLoadRegistry from "../queries/useLoadRegistry";
 import RegistryPathContext from "../contexts/RegistryPathContext";
 import RegistryVisualization from "./RegistryVisualization";
 import { FEAST_FCO_TYPES } from "../parsers/types";
+import { filterPermissionsByAction } from "../utils/permissionUtils";
 
 const RegistryVisualizationTab = () => {
   const registryUrl = useContext(RegistryPathContext);
   const { isLoading, isSuccess, isError, data } = useLoadRegistry(registryUrl);
   const [selectedObjectType, setSelectedObjectType] = useState("");
   const [selectedObjectName, setSelectedObjectName] = useState("");
+  const [selectedPermissionAction, setSelectedPermissionAction] = useState("");
 
   const getObjectOptions = (objects: any, type: string) => {
     switch (type) {
@@ -114,11 +116,36 @@ const RegistryVisualizationTab = () => {
                 />
               </EuiFormRow>
             </EuiFlexItem>
+            <EuiFlexItem grow={false} style={{ width: 300 }}>
+              <EuiFormRow label="Filter by permissions">
+                <EuiSelect
+                  options={[
+                    { value: "", text: "All" },
+                    { value: "CREATE", text: "CREATE" },
+                    { value: "DESCRIBE", text: "DESCRIBE" },
+                    { value: "UPDATE", text: "UPDATE" },
+                    { value: "DELETE", text: "DELETE" },
+                    { value: "READ_ONLINE", text: "READ_ONLINE" },
+                    { value: "READ_OFFLINE", text: "READ_OFFLINE" },
+                    { value: "WRITE_ONLINE", text: "WRITE_ONLINE" },
+                    { value: "WRITE_OFFLINE", text: "WRITE_OFFLINE" },
+                  ]}
+                  value={selectedPermissionAction}
+                  onChange={(e) => setSelectedPermissionAction(e.target.value)}
+                  aria-label="Filter by permissions"
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
           </EuiFlexGroup>
           <RegistryVisualization
             registryData={data.objects}
             relationships={data.relationships}
             indirectRelationships={data.indirectRelationships}
+            permissions={
+              selectedPermissionAction
+                ? filterPermissionsByAction(data.permissions, selectedPermissionAction)
+                : data.permissions
+            }
             filterNode={
               selectedObjectType && selectedObjectName
                 ? {

@@ -15,6 +15,7 @@ interface FeatureStoreAllData {
   mergedFVList: genericFVType[];
   indirectRelationships: EntityRelation[];
   allFeatures: Feature[];
+  permissions?: any[]; // Add permissions field
 }
 
 interface Feature {
@@ -79,6 +80,7 @@ const useLoadRegistry = (url: string) => {
             relationships,
             indirectRelationships,
             allFeatures,
+            permissions: objects.permissions || [], // Add permissions to the returned data
           };
         });
     },

@@ -0,0 +1,110 @@
+import { FEAST_FCO_TYPES } from "../parsers/types";
+import { feast } from "../protos";
+
+/**
+ * Get permissions for a specific entity
+ * @param permissions List of all permissions
+ * @param entityType Type of the entity
+ * @param entityName Name of the entity
+ * @returns List of permissions that apply to the entity
+ */
+export const getEntityPermissions = (
+  permissions: any[] | undefined,
+  entityType: FEAST_FCO_TYPES,
+  entityName: string
+): any[] => {
+  if (!permissions || permissions.length === 0) {
+    return [];
+  }
+
+  return permissions.filter((permission) => {
+    const matchesType = permission.spec?.types?.includes(
+      getPermissionType(entityType)
+    );
+
+    const matchesName =
+      permission.spec?.name_patterns?.length === 0 ||
+      permission.spec?.name_patterns?.some((pattern: string) => {
+        const regex = new RegExp(pattern);
+        return regex.test(entityName);
+      });
+
+    return matchesType && matchesName;
+  });
+};
+
+/**
+ * Convert FEAST_FCO_TYPES to permission type value
+ */
+const getPermissionType = (type: FEAST_FCO_TYPES): number => {
+  switch (type) {
+    case FEAST_FCO_TYPES.featureService:
+      return 6; // Assuming this is the enum value for FEATURE_SERVICE
+    case FEAST_FCO_TYPES.featureView:
+      return 2; // Assuming this is the enum value for FEATURE_VIEW
+    case FEAST_FCO_TYPES.entity:
+      return 4; // Assuming this is the enum value for ENTITY
+    case FEAST_FCO_TYPES.dataSource:
+      return 7; // Assuming this is the enum value for DATA_SOURCE
+    default:
+      return -1;
+  }
+};
+
+/**
+ * Format permissions for display
+ * @param permissions List of permissions
+ * @returns Formatted permissions string
+ */
+export const formatPermissions = (permissions: any[] | undefined): string => {
+  if (!permissions || permissions.length === 0) {
+    return "No permissions";
+  }
+
+  return permissions
+    .map((p) => {
+      const actions = p.spec?.actions
+        ?.map((a: number) => getActionName(a))
+        .join(", ");
+      return `${p.spec?.name}: ${actions}`;
+    })
+    .join("\n");
+};
+
+/**
+ * Convert action number to readable name
+ */
+const getActionName = (action: number): string => {
+  const actionNames = [
+    "CREATE",
+    "DESCRIBE",
+    "UPDATE",
+    "DELETE",
+    "READ_ONLINE",
+    "READ_OFFLINE",
+    "WRITE_ONLINE",
+    "WRITE_OFFLINE",
+  ];
+  return actionNames[action] || `Unknown (${action})`;
+};
+
+/**
+ * Filter function for permissions
+ * @param permissions List of all permissions
+ * @param action Action to filter by
+ * @returns Filtered permissions list
+ */
+export const filterPermissionsByAction = (
+  permissions: any[] | undefined,
+  action: string
+): any[] => {
+  if (!permissions || permissions.length === 0) {
+    return [];
+  }
+
+  return permissions.filter((permission) => {
+    return permission.spec?.actions?.some(
+      (a: number) => getActionName(a) === action
+    );
+  });
+};