Skip to content

Conversation

@ritiksahni
Copy link

Add System Status Panel to Admin Section

Overview

Adds a System Status page to the admin panel to monitor database connectivity, storage usage, and update availability.

Features

Database Connectivity Check

  • Real-time connection status
  • Database type display
  • Error reporting on connection failures

Storage Usage Monitoring

  • Total, used, and free space with human-readable formatting
  • Progress bar with visual indicators
  • Warnings at 75% and 90% usage thresholds
  • Filesystem path display
  • Fallback support for different storage detection methods

Update Notifications

  • Current version display
  • Latest version check via Umami update API
  • Update availability indicators using semver comparison

Technical Details

  • New API endpoint: GET /api/admin/status (admin-only)
  • New admin page: /admin/status
  • Added to admin navigation menu
  • Auto-refreshes every 60 seconds
  • Uses existing permission system (canViewUsers check)
  • Full TypeScript type definitions
  • Parallel async checks for performance

Implementation

  • API route: src/app/api/admin/status/route.ts
  • Frontend page: src/app/(main)/admin/status/StatusPage.tsx
  • Navigation: Added to src/app/(main)/admin/AdminNav.tsx
  • Translations: Added labels to src/components/messages.ts

Security

  • Admin-only access using existing permission checks
  • No sensitive data exposed
  • Follows existing authentication patterns

Breaking Changes

None. Backward compatible and requires no database migrations.

Rationale

Administrators currently lack visibility into system health metrics. This provides proactive monitoring capabilities and helps prevent issues before they impact users.

Screenshot 2025-11-13 at 12 35 29 PM

…te checks

Add a comprehensive System Status page to the admin panel that provides
actionable insights for administrators to monitor their Umami instance health.

Features:
- Database connectivity check with connection status and database type
- Storage usage monitoring with total, used, and free space display
  - Visual progress bar with color-coded warnings (75% and 90% thresholds)
  - Human-readable byte formatting
  - Fallback support for different filesystem types
- Update notifications with version comparison using semver
  - Current version display
  - Latest version check via Umami API
  - Clear update availability indicators

Technical details:
- New API endpoint: /api/admin/status (admin-only access)
- New admin page: /admin/status
- Added to admin navigation menu with Activity icon
- Auto-refreshes every 60 seconds
- Proper error handling and graceful degradation
- Uses existing permission system (canViewUsers check)
- Follows existing UI patterns and component structure
- Added i18n labels: systemStatus, database, storage, updates

This addresses the need for administrators to have visibility into system
health and proactively identify potential issues before they impact users.
@vercel
Copy link

vercel bot commented Nov 13, 2025

@ritiksahni is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Nov 13, 2025

Greptile Overview

Greptile Summary

This PR adds a comprehensive system status monitoring panel to the admin section of the Umami analytics platform. The implementation creates a new /admin/status page that displays real-time information about database connectivity, storage usage with visual progress indicators, and software update availability. The feature integrates seamlessly into the existing admin navigation and follows established codebase patterns including the Next.js App Router structure, internationalization system, and admin permission controls. Key components include a new API endpoint at /api/admin/status that performs parallel health checks, a responsive React dashboard with auto-refresh functionality every 60 seconds, and proper TypeScript type definitions throughout. The implementation leverages existing UI components from @umami/react-zen and maintains consistency with other admin pages by using the same authorization patterns and component structure.

Important Files Changed

Filename Score Overview
src/app/(main)/admin/status/page.tsx 5/5 Creates Next.js page component following standard pattern for admin status route
src/app/(main)/admin/AdminNav.tsx 5/5 Adds "System Status" navigation item with Activity icon to admin menu
src/components/messages.ts 5/5 Adds four new internationalization labels for system status features
src/app/(main)/admin/status/StatusPage.tsx 4/5 Comprehensive React dashboard component with status cards and auto-refresh
src/app/api/admin/status/route.ts 3/5 New admin API endpoint with database, storage, and update checks

Confidence score: 3/5

  • This PR requires careful review due to security concerns with shell command execution in the API route
  • Score lowered due to use of execSync with shell commands for storage checking, potential cross-platform compatibility issues, and minor UI inconsistencies in error state styling
  • Pay close attention to src/app/api/admin/status/route.ts for security implications of shell command usage and ensure proper input sanitization

Sequence Diagram

sequenceDiagram
    participant User
    participant AdminNav
    participant StatusPage
    participant API
    participant Database
    participant FileSystem
    participant UpdatesAPI

    User->>AdminNav: "Click System Status menu item"
    AdminNav->>StatusPage: "Navigate to /admin/status"
    StatusPage->>API: "GET /api/admin/status"
    
    API->>API: "Check user permissions (canViewUsers)"
    
    par Database Check
        API->>Database: "Execute SELECT 1 query"
        Database-->>API: "Connection status & type"
    and Storage Check
        API->>FileSystem: "Check storage usage (statfs/df)"
        FileSystem-->>API: "Storage metrics"
    and Updates Check
        API->>UpdatesAPI: "GET latest version info"
        UpdatesAPI-->>API: "Latest version data"
    end
    
    API-->>StatusPage: "Return system status data"
    StatusPage->>StatusPage: "Render status cards with metrics"
    StatusPage-->>User: "Display system status dashboard"
    
    Note over StatusPage: "Auto-refresh every 60 seconds"
    loop Every 60 seconds
        StatusPage->>API: "GET /api/admin/status"
        API-->>StatusPage: "Updated status data"
        StatusPage-->>User: "Refresh display"
    end
Loading

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

5 files reviewed, 3 comments

Edit Code Review Agent Settings | Greptile

@deepakness
Copy link

Great! This can be a very useful feature. Hope this gets accepted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants