Dashboard Pages
Relevant source files
The following files were used as context for generating this wiki page:
- apps/dashboard/src/pages/Dashboard.tsx
- apps/dashboard/src/pages/Events.tsx
- apps/dashboard/src/pages/Workflows.tsx
- apps/dashboard/src/pages/Settings.tsx
- apps/dashboard/src/App.tsx
- apps/dashboard/src/components/Sidebar.tsx
- apps/dashboard/package.json
- apps/api/examples/express-app.js
- apps/runtime/crates/ts-addon/src/lib.rs
The Kodus Runtime Dashboard is a web-based user interface designed for monitoring and interacting with the Kodus event processing system. Built as a single-page application using React and Vite, it provides a centralized location to view system statistics, manage events, and configure workflows. The dashboard is structured around a main Layout component that includes a persistent sidebar for navigation between its primary sections: Dashboard, Events, Workflows, and Settings.
The application fetches real-time data from the Kodus API, with the main dashboard page displaying key metrics like the total number of events. While the core structure and the main statistics view are functional, several pages like Events, Workflows, and Settings are currently implemented as placeholders, indicating areas for future development.
Architecture and Technology Stack
The dashboard is a modern React application built with Vite. It relies on several key libraries for its functionality, including react-router-dom for navigation and @tanstack/react-query for efficient data fetching and state management.
Sources: apps/dashboard/package.json
Technology Stack
| Library | Version | Purpose |
|---|---|---|
react | ^19.1.1 | Core UI library. |
react-router-dom | ^7.9.1 | Client-side routing and navigation. |
@tanstack/react-query | ^5.90.1 | Data fetching, caching, and state synchronization. |
axios | ^1.12.2 | Promise-based HTTP client for making API requests. |
tailwindcss | ^4.1.13 | Utility-first CSS framework for styling. |
vite | ^7.1.7 | Build tool and development server. |
typescript | ^5.9.2 | Static typing for JavaScript. |
Sources: apps/dashboard/package.json:13-22,25-32
Component Structure
The application's UI is organized into a hierarchical structure, with the App component at the root. It uses a Layout component to provide a consistent shell, which in turn renders the Sidebar and the content of the currently active page.
This diagram illustrates the main component hierarchy of the dashboard application.
Page Routing
Navigation within the dashboard is handled by react-router-dom. The App.tsx file defines the application's routes, mapping URL paths to their corresponding page components. All pages are rendered within a common Layout component.
| Path | Component | Description |
|---|---|---|
/ | <Dashboard> | The main dashboard, displaying system statistics. |
/events | <Events> | A page for viewing and managing events (placeholder). |
/workflows | <Workflows> | A page for creating and managing workflows (placeholder). |
/settings | <Settings> | A page for system configuration (placeholder). |
Sources: apps/dashboard/src/App.tsx:12-15
Core Components
Sidebar Navigation
The Sidebar.tsx component provides the primary navigation for the dashboard. It is a fixed element on the left side of the screen and contains links to all major pages. The active link is highlighted based on the current URL path.
The navigation items are defined in a navigation array:
// apps/dashboard/src/components/Sidebar.tsx:4-9
const navigation = [
{ name: 'Dashboard', href: '/', icon: HomeIcon },
{ name: 'Events', href: '/events', icon: QueueListIcon },
{ name: 'Workflows', href: '/workflows', icon: DocumentTextIcon },
{ name: 'Settings', href: '/settings', icon: Cog6ToothIcon },
]
Sources: apps/dashboard/src/components/Sidebar.tsx:4-9
Page-Specific Analysis
Dashboard Page (Dashboard.tsx)
This is the main landing page, providing a high-level overview of the Kodus Runtime's status. It uses the useQuery hook from @tanstack/react-query to fetch and display system statistics.
Data Fetching
- Query Key:
['stats'] - Endpoint:
/api/events/stats - Refetch Interval: The data is automatically refreshed every 5 seconds (
refetchInterval: 5000).
The component expects a Stats object from the API with the following structure:
| Field | Type | Description |
|---|---|---|
totalEvents | number | The total number of events in the system. |
treeStats | string | Internal statistics from the Sled database. |
Sources: apps/dashboard/src/pages/Dashboard.tsx:4-7,12, [apps/runtime/crates/ts-addon/src/lib.rs:188-192]
Displayed Statistics
The page displays three main statistics in card-based UI elements:
- Total Events: Shows the
stats.totalEventsvalue fetched from the API. - Active Workflows: Currently hardcoded to
0. - Queue Size: Currently hardcoded to
0.
Sources: apps/dashboard/src/pages/Dashboard.tsx:48-50, 67-69, 86-88
Data Fetching Sequence
The following diagram shows the sequence of operations when the Dashboard page fetches statistics.
Placeholder Pages
Several pages in the dashboard are defined in the routing but are not yet fully implemented. They render a simple placeholder message indicating that the feature is planned for the future.
- Events Page (
Events.tsx): Displays "Events page coming soon...". - Workflows Page (
Workflows.tsx): Displays "Workflows page coming soon...". - Settings Page (
Settings.tsx): Displays "Settings page coming soon...".
Sources: apps/dashboard/src/pages/Events.tsx:10, apps/dashboard/src/pages/Workflows.tsx:10, apps/dashboard/src/pages/Settings.tsx
Conclusion
The Kodus Runtime Dashboard provides the foundational front-end for monitoring and managing the system. Its architecture is built on a modern React stack, with a clear separation of concerns for routing, layout, and page-specific logic. The main Dashboard page is functional and provides real-time statistics by polling the backend API. However, key sections such as Events, Workflows, and Settings are currently placeholders, outlining the roadmap for future UI development.