Raft Policy Management System

A comprehensive Open Policy Agent (OPA) management interface for creating, editing, testing, and managing authorization policies written in the Rego language.

Overview

This policy management system provides a complete solution for managing OPA policies with a modern, user-friendly interface. It enables policy authors to create, edit, test, and visualize authorization policies with real-time feedback, making policy development faster and more accessible.

Features

๐Ÿ”ง Policy Management

  • Create New Policies: Interactive policy creation with templates and guidance

  • Edit Existing Policies: Full-featured Monaco editor with Rego syntax highlighting

  • Policy Versioning: Track changes and maintain policy history

  • Real-time Sync: Automatic synchronization with OPA decision engine

  • Import/Export: Support for policy import and export functionality

๐Ÿงช Policy Testing

  • Interactive Testing: Test policies with custom JSON input

  • Real-time Evaluation: See policy results instantly

  • Input Generation: Auto-generate test inputs from policy structure

  • Error Handling: Comprehensive error reporting and validation

  • Performance Monitoring: Track policy evaluation performance

๐Ÿ“Š Policy Visualization

  • Statement Cards: Visual representation of policy rules and statements

  • Diff View: Compare policy changes with side-by-side visualization

  • Syntax Highlighting: Color-coded Rego syntax for better readability

  • Line Indicators: Highlight specific lines when editing or debugging

  • Change Tracking: Visual indicators for added, modified, and removed policies

๐Ÿ” Security & Access Control

  • Built-in Policies: Read-only system policies for core functionality

  • User-defined Policies: Full CRUD operations for custom policies

  • Access Control: Role-based access to policy management features

  • Audit Trail: Track all policy changes and user actions

Technical Architecture

Frontend Stack

  • React 18 with TypeScript

  • Next.js for server-side rendering and API routes

  • Material-UI (MUI) for consistent UI components

  • Monaco Editor for advanced code editing

  • TanStack Query for efficient data fetching and caching

  • Highlight.js for syntax highlighting

API Integration

  • OPA REST API: Direct integration with Open Policy Agent

  • Policy Storage: Persistent storage for policy definitions

  • Real-time Updates: WebSocket connections for live policy status

  • Batch Operations: Support for bulk policy operations

Language Support

  • Rego Language: Full support for OPA’s policy language

  • JSON Input/Output: Standard format for policy testing

  • Custom Parsers: Advanced Rego parsing for visualization

File Structure

pages/policies/
โ”œโ”€โ”€ index.tsx              # Main policy management page
โ””โ”€โ”€ README.md              # This documentation

components/Service/OPA/
โ”œโ”€โ”€ policies.d.ts          # TypeScript type definitions
โ”œโ”€โ”€ PolicyList.tsx         # Policy navigation and management
โ”œโ”€โ”€ PolicyToolbar.tsx      # Policy action buttons and controls
โ”œโ”€โ”€ EditorPanel.tsx        # Monaco editor integration
โ”œโ”€โ”€ TestingPanel.tsx       # Policy testing interface
โ”œโ”€โ”€ StatementCard.tsx      # Visual policy statement representation
โ”œโ”€โ”€ StatementCards.tsx     # Collection of statement cards
โ”œโ”€โ”€ StatementPanel.tsx     # Statement management panel
โ”œโ”€โ”€ Welcome.tsx            # Welcome screen and onboarding
โ”œโ”€โ”€ Utils.ts               # Policy parsing and utility functions
โ”œโ”€โ”€ CreateNewPolicyDialog.tsx # New policy creation dialog
โ”œโ”€โ”€ PolicyVersionControl.tsx  # Version control interface
โ””โ”€โ”€ Editor/                # Advanced editor components
    โ”œโ”€โ”€ Utils.ts           # Editor utilities
    โ””โ”€โ”€ [other editor files]

Usage Guide

Getting Started

  1. Navigate to Policies: Access the policy management interface at /policies

  2. View Existing Policies: Browse the policy list in the left sidebar

  3. Create New Policy: Click the "Create New" button to start a new policy

  4. Edit Policy: Select a policy from the list and click the edit icon

Creating a New Policy

  1. Click "Create New" button in the policy list

  2. Enter your policy name and description

  3. Write your Rego policy in the editor

  4. Use the Testing Panel to validate your policy

  5. Save your policy to make it active

Testing Policies

  1. Select a policy from the list

  2. Open the Testing Panel

  3. Enter JSON input data or click "Generate Input from Policy"

  4. Click "Evaluate Policy for Input" to see results

  5. Review the output and any warnings or errors

Understanding Policy Statements

  • Statement Cards: Each policy is broken down into visual statement cards

  • Rule Types: Different colors indicate rules, variables, and functions

  • Change Indicators: Modified policies show visual change indicators

  • Line Highlighting: Click on statement cards to highlight corresponding editor lines

Policy Development Best Practices

Writing Effective Policies

  1. Keep it Simple: Write clear, readable policies

  2. Use Comments: Document complex logic with comments

  3. Test Thoroughly: Always test policies with various inputs

  4. Version Control: Save policies frequently and track changes

  5. Follow Naming Conventions: Use descriptive policy and rule names

Common Patterns

# Allow access based on user role
allow {
    input.user.role == "admin"
}

# Conditional access with multiple criteria
allow {
    input.user.role == "user"
    input.resource.type == "document"
    input.action == "read"
}

# Time-based access control
allow {
    input.user.role == "employee"
    time.now_ns() < input.resource.expires_at
}

Error Handling

  • Syntax Errors: The editor highlights syntax issues in real-time

  • Policy Conflicts: Visual indicators show conflicting rules

  • Performance Issues: Monitor evaluation times for complex policies

  • Load Failures: Red indicators show policies that failed to load into OPA

API Integration

Policy CRUD Operations

// Get all policies
GET /api/frontend/df-services/opa/get_policies

// Get active policies from OPA
GET /api/frontend/df-services/opa/get_policies_active

// Evaluate policy
POST /api/frontend/df-services/opa/evaluate/{policyPath}

// Save policy
PUT /api/frontend/df-services/opa/policies/{policyId}

// Delete policy
DELETE /api/frontend/df-services/opa/policies/{policyId}

// Chatbot integration
POST /api/v1/prediction/{chatflowId}

Policy Types

  • USER_DEFINED: Custom policies created by users

  • BUILTIN: System policies (read-only)

Configuration

Theme Configuration

The system supports both light and dark themes with automatic switching based on system preferences.

Troubleshooting

Common Issues

  1. Policy Not Loading

    1. Check for syntax errors in the Rego code

    2. Verify policy format matches OPA requirements

    3. Review server logs for loading errors

  2. Testing Failures

    1. Ensure input JSON is valid

    2. Check policy rules for logic errors

    3. Verify policy is loaded in OPA

  3. Performance Issues

    1. Review complex policies for optimization opportunities

    2. Monitor evaluation times in testing panel

    3. Consider breaking down complex policies

Support

For additional help:

  • Check the OPA documentation for Rego language reference

  • Review policy examples in the built-in policies

Contributing

When contributing to the policy management system:

  1. Follow TypeScript best practices

  2. Add comprehensive tests for new features

  3. Update documentation for any API changes

  4. Ensure backward compatibility with existing policies

  5. Test with both built-in and user-defined policies

Security Considerations

  • All policies are validated before activation

  • Built-in policies are protected from modification

  • User actions are logged for audit purposes

  • Policy evaluation is sandboxed within OPA

  • Regular security updates are applied to dependencies