rbac-element

Interactive Kubernetes RBAC permission matrix viewer built with React + TypeScript + Ant Design.

Parses ClusterRole / Role YAML manifests and renders a detailed, filterable permission matrix with full YAML source linking.

Features

• Permission Matrix — resource-verb grid with API group sections, wildcard resolution, and color-coded verb categories
• YAML Source Linking — click any rule reference to open the manifest in a Monaco Editor side panel with highlighted lines
• Live K8s API Discovery — fetches available API resources to resolve wildcards (*) and detect phantom resources
• Filtering — filter by API group, resource, verb, resource name, and non-resource URL
• Non-Resource URLs — dedicated section for non-resource URL permissions
• Dark / Light Theme — full Ant Design theme support with automatic color adaptation
• Resource Kind Badges — visual indicators showing the Kubernetes Kind for each resource

Tech Stack

Layer	Technology
UI	React 19, Ant Design 6, Ant Icons
Editor	Monaco Editor (@monaco-editor/react)
YAML	js-yaml
Language	TypeScript 5
Build	Vite 6

Getting Started

Prerequisites

• Node.js >= 20
• Access to a Kubernetes API (for live resource discovery)

Installation

npm install

Development

npm run dev

The app starts at http://localhost:5173 with a proxy to the Kubernetes API.

Build

npm run build

Linting & Formatting

npm run lint          # ESLint check
npm run lint:fix      # ESLint auto-fix
npm run format        # Prettier format
npm run format:check  # Prettier check
npm run stylelint     # Stylelint CSS check

Project Structure

src/
├── App.tsx                         # Root component, data orchestration
├── main.tsx                        # Entry point, providers
├── types.ts                        # Shared interfaces and constants
├── components/
│   ├── ApiGroupSection.tsx         # Collapsible API group with matrix table
│   ├── FilterPanel.tsx             # Multi-select filters
│   ├── KindBadge.tsx               # Resource Kind visual badge
│   ├── LoadingState.tsx            # Loading / error states
│   ├── MatrixTable.tsx             # Resource-verb permission matrix
│   ├── NonResourceUrlsSection.tsx  # Non-resource URL permissions
│   ├── PermissionCell.tsx          # Individual permission cell
│   ├── ResourceNamesBadge.tsx      # Resource name restriction badge
│   ├── ResourceNamesPopover.tsx    # Resource names detail popover
│   ├── RulePopover.tsx             # RBAC rule detail popover
│   ├── SummaryHeader.tsx           # Role summary with stats
│   ├── YamlDrawer.tsx              # Monaco Editor YAML side panel
│   └── YamlViewerContext.tsx       # YAML viewer state management
├── theme/
│   ├── ThemeContext.tsx             # Theme provider and color utilities
│   ├── themeConfig.ts              # Ant Design theme configuration
│   └── overrides.css               # Minimal CSS overrides
└── utils/
    ├── dataTransformer.ts          # YAML parsing, rule grouping, line ranges
    ├── filterEngine.ts             # Filter logic
    └── k8sApiClient.ts             # Kubernetes API resource discovery

Configuration

The Kubernetes API proxy is configured in vite.config.ts. Update the target to point to your cluster:

server: {
  proxy: {
    "/k8s": {
      target: "https://your-cluster-api",
      changeOrigin: true,
      secure: false,
      rewrite: (path) => path.replace(/^\/k8s/, ""),
    },
  },
},

Place your ClusterRole YAML manifest as role.yaml in the project root.

Contributing

Check CONTRIBUTING.md for guidelines.

License

MIT