Admin Dashboard UI
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Dashboard UI serves as the central management hub for the Casdoor Identity and Access Management (IAM) platform. It provides administrators with a comprehensive overview of system activities, user statistics, and resource allocations through data visualizations and management interfaces. The dashboard is designed to facilitate the monitoring of multiple entities including Organizations, Users, Applications, and Providers.
Sources: web/src/basic/Dashboard.js:20-25, web/src/App.js:250-300
Main Dashboard Visualization
The primary dashboard component (Dashboard.js) utilizes ECharts to render a 30-day historical view of system growth. It tracks 14 distinct resource types, providing a high-level overview of the platform's usage trends.
Key Visual Components
- Statistic Cards: Display total users and growth metrics (today, past 7 days, past 30 days) using
antdStatistic components. Sources: web/src/basic/Dashboard.js:154-180 - Trend Chart: A line chart visualizing the count of Users, Providers, Applications, Organizations, and other system entities over the previous month. Sources: web/src/basic/Dashboard.js:95-152
The following diagram illustrates the data flow for the main dashboard:
Sources: web/src/basic/Dashboard.js:35-70
Resource Tracking
The dashboard visualizes counts for the following items:
| Resource Name | Data Source Field |
|---|---|
| Organizations | organizationCounts |
| Users | userCounts |
| Providers | providerCounts |
| Applications | applicationCounts |
| Roles | roleCounts |
| Resources | resourceCounts |
Sources: web/src/basic/Dashboard.js:124-140
System Monitoring
The SystemInfo.js module provides real-time infrastructure monitoring for the Casdoor server. It polls system metrics every two seconds to ensure administrators have current data on hardware and API performance. Sources: web/src/SystemInfo.js:38-60
Infrastructure Metrics
- CPU Usage: Visualized via Progress bars for each core.
- Memory Usage: Displays used vs. total memory with a circular progress indicator.
- API Performance: Tracks API Latency and Throughput via Prometheus integration.
Sources: web/src/SystemInfo.js:115-135
Sources: web/src/SystemInfo.js:38-70
Entity Management Interfaces
The dashboard UI includes specialized list pages for managing the core entities of the IAM system. These pages inherit from BaseListPage and provide standard CRUD operations, filtering, and searching.
Organization and User Lists
- Organization Management: Lists organizations with details such as
websiteUrl,favicon, andpasswordType. It allows administrators to togglesoftDeletionand manage organization-specific users. Sources: web/src/OrganizationListPage.js:117-200 - User Management: Supports global user viewing or organization-specific filtering. Includes specialized actions like Impersonation, allowing admins to sign in as a specific user for troubleshooting. Sources: web/src/UserListPage.js:284-350, web/src/UserListPage.js:400-410
Navigation and Access Control
The App.js component manages the global layout and navigation menu. The visibility of dashboard items is determined by the user's role and organization settings:
- Local Admins: Can see navigation items defined in
organization.navItems. Sources: web/src/App.js:175-185 - Menu Flattening: The UI automatically flattens grouped menus into a single-level list if the total item count is low, improving mobile and small-screen accessibility. Sources: web/src/App.js:187-200
User Guidance (Interactive Tour)
Casdoor includes an integrated tour system (TourConfig.js) that guides new administrators through the dashboard's features. The tour is context-aware and changes based on the current URL path. Sources: web/src/TourConfig.js:5-10
| Page | Tour Focus | Element ID Target |
|---|---|---|
| Home | Statistic cards & Charts | statistic, echarts-chart |
| System Info | CPU/Memory/API Stats | cpu-card, memory-card, latency-card |
| Users | Importing via XLSX | upload-button |
Sources: web/src/TourConfig.js:12-40, web/src/TourConfig.js:220-230
Summary
The Casdoor Admin Dashboard UI provides a centralized, data-driven interface for managing an identity platform. By combining real-time system monitoring (SystemInfo.js), historical growth visualization (Dashboard.js), and granular entity management (UserListPage.js, OrganizationListPage.js), it enables administrators to maintain system health and oversee complex user hierarchies efficiently. The interface is further enhanced by localized configurations and interactive onboarding to streamline the administrative experience.