React Web Dashboard for Kubernetes Incident Management
The KubeRCA Frontend is a React-based web dashboard that provides a user interface for viewing and managing Kubernetes incidents. It displays RCA (Root Cause Analysis) results, alerts, and allows users to search for similar past incidents.
- Incident Dashboard - View and manage Kubernetes incidents
- RCA Viewer - Display AI-generated root cause analysis
- Alert Management - Browse and filter alerts
- Similar Incident Search - Find related past incidents via vector similarity
- Muted Incidents - Manage hidden/muted incidents
- Dark Mode - Toggle between light and dark themes
- Authentication - Login/signup with JWT tokens
The dashboard provides views for:
- Incident list with filtering and pagination
- Incident detail with RCA analysis results
- Alert list and detail views
- Hidden/muted incident management
| Category | Technology |
|---|---|
| Framework | React 18 |
| Language | TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS |
| Linting | ESLint |
| Container | Docker + Nginx |
- Node.js 18+ (LTS recommended)
- npm 9+
# Run in repository root
# (monorepo layout: cd frontend/main)
npm installnpm run devOpen http://localhost:5173 in your browser.
npm run buildnpm run previewfrontend/
├── src/
│ ├── main.tsx # React entrypoint
│ ├── App.tsx # Main app with routing
│ ├── types.ts # TypeScript type definitions
│ ├── index.css # Tailwind CSS entrypoint
│ ├── components/ # React components
│ │ ├── AlertTable.tsx # Alerts list table
│ │ ├── AlertDetailView.tsx # Alert detail view
│ │ ├── RCATable.tsx # Incidents/RCA list table
│ │ ├── RCADetailView.tsx # Incident detail with RCA
│ │ ├── ArchiveTable.tsx # Hidden incidents table
│ │ ├── ArchiveDetailView.tsx # Hidden incident detail
│ │ ├── UnifiedSearchPanel.tsx # Unified search panel
│ │ ├── Header.tsx # App header (theme, auth)
│ │ ├── AuthPanel.tsx # Login/signup panel
│ │ ├── Pagination.tsx # Pagination component
│ │ └── TimeRangeSelector.tsx # Time range filter
│ ├── context/ # React Context providers
│ │ ├── ThemeContext.ts # Theme context definition
│ │ ├── ThemeProvider.tsx # Theme provider component
│ │ └── SearchContext.tsx # Search context
│ ├── constants/ # Application constants
│ │ └── index.ts
│ └── utils/ # Utility functions
│ ├── api.ts # Backend API client
│ ├── auth.ts # Authentication utilities
│ ├── config.ts # Configuration utilities
│ ├── filterAlerts.ts # Alert filtering logic
│ └── searchLogic.ts # Search scoring and sorting
├── Dockerfile # Production build (Nginx)
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
└── .eslintrc.cjs # ESLint configuration
| Variable | Description | Default |
|---|---|---|
VITE_API_BASE_URL |
Backend API URL | '' (same-origin) |
Create a .env file:
VITE_API_BASE_URL=http://localhost:8080In Kubernetes deployments, set VITE_API_BASE_URL when frontend and backend are served from different origins.
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
npm run lint && npm run buildThe frontend communicates with the KubeRCA Backend API:
| API | Description |
|---|---|
/api/v1/auth/* |
Authentication (login, register, refresh) |
/api/v1/incidents |
Incident list and details |
/api/v1/alerts |
Alert list and details |
/api/v1/embeddings/search |
Similar incident search |
Located at src/utils/api.ts, the API client handles:
- Request/response formatting
- Authentication token management
- Error handling
The project uses Tailwind CSS for styling:
// Example component with Tailwind classes
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<h1 className="text-xl font-bold text-gray-900 dark:text-white">
Incident Details
</h1>
</div>Dark mode is implemented using Tailwind's dark: prefix:
<div className="bg-white dark:bg-gray-900">
{/* Content adapts to theme */}
</div>Toggle is available in the header component.
docker build -t kube-rca-frontend .docker run -d -p 80:80 kube-rca-frontendAccess at http://localhost.
Multi-stage build:
- Build stage - Node.js builds the React app
- Production stage - Nginx serves static files
- Use strict mode (
tsconfig.json) - Define shared types in
src/types.ts - Use interface for component props
- Functional components with hooks
- Keep components focused and reusable
- Use React Context for global state
// Example API call pattern
const [data, setData] = useState<Incident[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await api.getIncidents();
setData(response);
} catch (err) {
setError('Failed to fetch incidents');
} finally {
setLoading(false);
}
};
fetchData();
}, []);- Avoid merge commits when merging PRs; they can create duplicate changelog entries.
- Prefer "Squash and merge" or "Rebase and merge" and ensure the final commit message is conventional.
- KubeRCA Backend - Go REST API server
- KubeRCA Agent - Python analysis service
- Helm Charts - Kubernetes deployment
This project is part of KubeRCA, licensed under the MIT License. See the LICENSE file for details.