Server Status Dashboard

A modern, real-time server status monitoring dashboard built with React and TypeScript. This application provides a clean and intuitive interface for monitoring the operational status of multiple servers.

Features

• 🔄 Real-time server status monitoring
• 📊 Historical uptime tracking
• 📱 Responsive design
• ⚡ Fast and lightweight
• 🖥️ Fullscreen mode
• 🔄 Auto-refresh every hour
• 📈 Uptime percentage calculations
• 🎨 Clean, modern UI with dark mode
• Zabbix 5 integration

Tech Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Font Awesome Icons
• date-fns
• zabbix/python3 for fetching the data

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

Install dependencies:

npm install

Start the development server:

Will use the status-history.json in the public directory

npm run dev

Create a production build:

Will use the status-history.json in the dist (current) directory

npm run build

Zabbix Integration Setup

This application can fetch real-time monitoring data from Zabbix using the scripts/fetch-zabbix.py script.

Prerequisites for Zabbix Integration

• Python 3.x
• requests library (pip install requests)
• Access to a Zabbix server with API enabled (tested on Zabbix 5)
• Zabbix user credentials with read permissions

Configuration

1. Install Python dependencies:

   pip install requests
   # Or on debian flavors :
   apt install python3 python3-requests

2. Edit the fetch-zabbix.py script and configure the following variables:

   # Zabbix server configuration
   zabbix_url = "https://YOUR-SERVER/zabbix/api_jsonrpc.php"
   username = "your-zabbix-username"
   password = "your-zabbix-password"
   
   # Output file path (should match your build directory)
   output_file = "dist/status-history.json"
   
   # Host filter (regex pattern to filter specific hosts)
   host_filter = r"^v\d+\..*"  # Example: hosts starting with 'v' followed by numbers
   
   # History retention in days
   history_duration_days = 90

3. Create data JSON

   # Generate/update data from Zabbix
   python3 scripts/fetch-zabbix.py

For production/automated deployments (quiet mode):

python3 scripts/fetch-zabbix.py -q

How It Works

The script performs the following operations:

1. Authentication: Connects to Zabbix API using provided credentials
2. Host Discovery: Retrieves hosts matching the configured filter pattern
3. Data Collection: Fetches ICMP ping data for each host
4. Historical Analysis: Processes daily uptime statistics
5. JSON Generation: Creates/updates the status-history.json file with:
   • Server status history
   • Uptime percentages
   • Last update timestamps
   • Historical data (configurable retention period)

Data Format

The generated JSON follows this structure:

{
  "lastUpdated": "2023-12-01T10:00:00Z",
  "servers": [
    {
      "id": "10001",
      "name": "server1.example.com",
      "history": [
        {
          "timestamp": "2023-12-01",
          "up": true,
          "average": 0.9876
        }
      ]
    }
  ]
}

You can use any script to generate the JSON structure above

Automation

For continuous monitoring, you can set up a cron job to automatically update the data:

# Update every hour
0 * * * * cd /path/to/project && python3 scripts/fetch-zabbix.py -q

Open your browser and navigate to http://localhost:5173

Project Structure

src/
├── components/           # React components
│   ├── ServiceRow.tsx   # Individual server status row
│   ├── StatusBar.tsx    # Status history visualization
│   ├── StatusGrid.tsx   # Grid view of server status
│   └── StatusPage.tsx   # Main status dashboard
├── hooks/               # Custom React hooks
│   ├── useFullscreen.ts # Fullscreen mode functionality
│   └── useInterval.ts   # Auto-refresh functionality
├── types/               # TypeScript type definitions
│   └── server.ts        # Server and status types
├── utils/               # Utility functions
│   └── calculations.ts  # Uptime calculations
├── App.tsx             # Root component
├── index.css           # Main CSS file
└── main.tsx            # Application entry point

Features in Detail

Real-time Status Monitoring

• Visual indicators for server status (up/down)
• Historical status timeline
• Last update timestamp

Status History

• Timeline view of server status
• Quick visual reference for past performance
• Hover details for specific timestamps

Uptime Calculations

• Percentage-based uptime calculations
• Historical data analysis
• Clear status indicators

Auto-refresh

• Automatic data updates every hour
• Manual refresh capability
• Last refresh timestamp display

Fullscreen Mode

• Toggle fullscreen view
• Optimized display for monitoring screens
• Keyboard shortcut support

Credits

Answeb - Development

This application was developed by Answeb, an agency specialized in web development and e-commerce solutions. Answeb supports businesses in their digital transformation by creating custom solutions tailored to their specific needs.

Answeb Expertise:

• WordPress & WooCommerce, Prestashop development
• ERP integrations and business solutions
• Custom connectors and APIs
• Advanced e-commerce solutions

For any technical questions or feature requests for this application, you can contact the Answeb team through our website.