### Configure Environment Variables for Local Install (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Copies the example environment file and prompts the user to modify it with necessary configurations like UPTIME_KUMA_BASE_URL and PAGE_ID. These variables are crucial for the application to function correctly. ```bash cp .env.example .env UPTIME_KUMA_BASE_URL=https://your-kuma-instance.com PAGE_ID=your_status_page_id ``` -------------------------------- ### Start Kuma Mieru Development Server (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Starts the Kuma Mieru development server using Bun. The application will be accessible at http://localhost:3883. ```bash bun run dev ``` -------------------------------- ### Install Bun and Dependencies (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Installs the Bun JavaScript runtime and then installs project dependencies using Bun. Kuma Mieru relies on Bun for package management. ```bash # Linux/macOS curl -fsSL https://bun.sh/install | bash # Windows powershell -c "irm bun.sh/install.ps1 | iex" bun install ``` -------------------------------- ### Build and Start Kuma Mieru Production (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Builds the Kuma Mieru application for production and then starts the production server. This is typically done after development is complete. ```bash bun run build bun run start ``` -------------------------------- ### Start Kuma Mieru with Docker Compose (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Starts the Kuma Mieru services in detached mode using Docker Compose. The application will be available at http://0.0.0.0:3883. ```bash docker compose up -d ``` -------------------------------- ### Configure Environment Variables for Docker Compose (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Copies the example environment file and instructs the user to edit it with required configurations for Docker Compose deployment. Key variables include UPTIME_KUMA_BASE_URL and PAGE_ID. ```bash cp .env.example .env UPTIME_KUMA_BASE_URL=https://example.kuma-mieru.invalid PAGE_ID=your-status-page-id ``` -------------------------------- ### Clone Kuma Mieru Repository (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Clones the Kuma Mieru repository from GitHub to your local machine. This is the first step for local installation and Docker deployments. ```bash git clone https://github.com/Alice39s/kuma-mieru.git cd kuma-mieru ``` -------------------------------- ### Multi-Page Setup Configuration - Bash Source: https://context7.com/alice39s/kuma-mieru/llms.txt Configures Kuma Mieru to manage multiple status pages by listing their IDs in the `PAGE_ID` environment variable. The first ID in the list is set as the default page. Users can switch between pages in the UI. ```bash # .env - Multiple pages configuration UPTIME_KUMA_BASE_URL=https://uptime.example.com PAGE_ID=global,asia,europe,americas # First page ID becomes the default # Users can switch between pages in the UI ``` -------------------------------- ### Uptime Kuma Integration Configuration - Bash Source: https://context7.com/alice39s/kuma-mieru/llms.txt Steps to integrate Kuma Mieru with an Uptime Kuma instance. Involves setting the display timezone in Uptime Kuma, creating a status page to get its slug, and configuring the `.env` file for Kuma Mieru. Data refreshes automatically. ```bash # Step 1: Configure Uptime Kuma # In Uptime Kuma settings, set Display Timezone to UTC+0 # Step 2: Create status page in Uptime Kuma # Navigate to Status Pages → Create new page → Get the page slug # Example: https://uptime.example.com/status/my-services # The slug is "my-services" # Step 3: Configure Kuma Mieru # .env UPTIME_KUMA_BASE_URL=https://uptime.example.com PAGE_ID=my-services # Step 4: Deploy and access # The dashboard will automatically fetch data from Uptime Kuma # Data refreshes every 60 seconds with SWR caching ``` -------------------------------- ### Configure Application Behavior via Environment Variables (Bash) Source: https://context7.com/alice39s/kuma-mieru/llms.txt Demonstrates how to configure application behavior using environment variables. This allows for different settings across various deployment scenarios, enabling flexibility in application management. ```bash # Example of setting environment variables (specific commands depend on the shell and OS) # export NODE_ENV=production # export PORT=3000 # export DATABASE_URL="postgres://user:password@host:port/database" ``` -------------------------------- ### Build Kuma Mieru Docker Image (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Builds a Docker image for Kuma Mieru from the current directory. This is a prerequisite for manual Docker deployment. ```bash docker build -t kuma-mieru . ``` -------------------------------- ### Configuration API Source: https://context7.com/alice39s/kuma-mieru/llms.txt Retrieves global configuration including page metadata, theme settings, and maintenance information. It requires a `pageId` query parameter. ```APIDOC ## GET /api/config ### Description Retrieves global configuration including page metadata, theme settings, and maintenance information. ### Method GET ### Endpoint `/api/config` ### Parameters #### Query Parameters - **pageId** (string) - Required - Identifier for the status page to retrieve configuration for. ### Request Example `GET /api/config?pageId=default` ### Response #### Success Response (200) - **success** (boolean) - Indicates if the request was successful. - **timestamp** (number) - The timestamp of the data retrieval. - **config** (object) - Global configuration settings for the status page. - **slug** (string) - The unique identifier for the page. - **title** (string) - The title of the status page. - **description** (string) - A description of the status page. - **icon** (string) - URL to the page's icon. - **theme** (string) - The theme of the status page (e.g., 'dark'). - **published** (boolean) - Whether the page is published. - **showTags** (boolean) - Whether to display tags. - **customCSS** (string) - Custom CSS applied to the page. - **footerText** (string | null) - Text to display in the footer. - **showPoweredBy** (boolean) - Whether to show 'Powered By' information. - **googleAnalyticsId** (string | null) - Google Analytics ID, if configured. - **showCertificateExpiry** (boolean) - Whether to show certificate expiry information. - **incident** (object | null) - Information about an ongoing incident. - **id** (number) - The ID of the incident. - **title** (string) - The title of the incident. - **content** (string) - The content or description of the incident. - **style** (string) - The style or severity of the incident (e.g., 'warning'). - **createdDate** (string) - The date and time the incident was created. - **lastUpdatedDate** (string) - The date and time the incident was last updated. - **maintenanceList** (array) - A list of scheduled maintenance activities. - **id** (number) - The ID of the maintenance. - **title** (string) - The title of the maintenance. - **description** (string) - A description of the maintenance. - **status** (string) - The status of the maintenance (e.g., 'scheduled'). - **timeslotList** (array) - A list of time slots for the maintenance. - **startDate** (string) - The start date and time of the maintenance slot. - **endDate** (string) - The end date and time of the maintenance slot. #### Response Example ```json { "success": true, "timestamp": 1704063600000, "config": { "slug": "default", "title": "Service Status", "description": "Real-time status of all services", "icon": "/icon.svg", "theme": "dark", "published": true, "showTags": true, "customCSS": "", "footerText": null, "showPoweredBy": false, "googleAnalyticsId": null, "showCertificateExpiry": false }, "incident": { "id": 1, "title": "Database Maintenance", "content": "Scheduled database maintenance in progress", "style": "warning", "createdDate": "2024-01-01T00:00:00.000Z", "lastUpdatedDate": "2024-01-01T01:00:00.000Z" }, "maintenanceList": [ { "id": 1, "title": "Server Upgrade", "description": "Upgrading server infrastructure", "status": "scheduled", "timeslotList": [ { "startDate": "2024-01-15T02:00:00.000Z", "endDate": "2024-01-15T04:00:00.000Z" } ] } ] } ``` ``` -------------------------------- ### Fetch Configuration API (TypeScript) Source: https://context7.com/alice39s/kuma-mieru/llms.txt Retrieves global configuration settings for a status page, including metadata, theme preferences, and any active incident or maintenance information. Requires a 'pageId' query parameter. ```typescript const response = await fetch('/api/config?pageId=default'); const config = await response.json(); // Response structure { "success": true, "timestamp": 1704063600000, "config": { "slug": "default", "title": "Service Status", "description": "Real-time status of all services", "icon": "/icon.svg", "theme": "dark", "published": true, "showTags": true, "customCSS": "", "footerText": null, "showPoweredBy": false, "googleAnalyticsId": null, "showCertificateExpiry": false }, "incident": { "id": 1, "title": "Database Maintenance", "content": "Scheduled database maintenance in progress", "style": "warning", "createdDate": "2024-01-01T00:00:00.000Z", "lastUpdatedDate": "2024-01-01T01:00:00.000Z" }, "maintenanceList": [ { "id": 1, "title": "Server Upgrade", "description": "Upgrading server infrastructure", "status": "scheduled", "timeslotList": [ { "startDate": "2024-01-15T02:00:00.000Z", "endDate": "2024-01-15T04:00:00.000Z" } ] } ] } ``` -------------------------------- ### Load Page Configuration - TypeScript Source: https://context7.com/alice39s/kuma-mieru/llms.txt Demonstrates how to retrieve configuration details for a specific Uptime Kuma page ID. It includes accessing base URL, page ID, endpoints, and site metadata. Requires the @/config/api module. ```typescript // config/api.ts import { getConfig, getAvailablePageIds } from '@/config/api'; // Get configuration for specific page function loadPageConfig() { const config = getConfig('default'); if (!config) { console.error('Invalid page ID'); return; } console.log('Base URL:', config.baseUrl); console.log('Page ID:', config.pageId); console.log('HTML Endpoint:', config.htmlEndpoint); console.log('API Endpoint:', config.apiEndpoint); console.log('Site Meta:', config.siteMeta); // Endpoints constructed automatically: // htmlEndpoint: https://status.example.com/status/default // apiEndpoint: https://status.example.com/api/status-page/heartbeat/default } // List all available page IDs function listPages() { const pageIds = getAvailablePageIds(); console.log('Available pages:', pageIds); // Output: ['default', 'asia-servers', 'eu-servers'] pageIds.forEach(pageId => { const config = getConfig(pageId); if (config) { console.log(`${pageId}: ${config.siteMeta.title}`); } }); } // Dynamic page switching function switchPage(pageId: string) { const config = getConfig(pageId); if (!config) { console.error(`Page "${pageId}" not found`); return null; } // Fetch data for the selected page fetch(`/api/monitor?pageId=${pageId}`) .then(res => res.json()) .then(data => console.log('Monitor data:', data)); fetch(`/api/config?pageId=${pageId}`) .then(res => res.json()) .then(data => console.log('Page config:', data)); } ``` -------------------------------- ### View Kuma Mieru Docker Compose Logs (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Follows the logs of the Kuma Mieru services managed by Docker Compose. This is useful for debugging. ```bash docker compose logs -f ``` -------------------------------- ### Run Kuma Mieru Container Manually (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Runs Kuma Mieru as a Docker container in detached mode, mapping port 3883 and setting necessary environment variables. This allows for manual Docker deployment without Docker Compose. ```bash docker run -d \ --name kuma-mieru \ -p 3883:3000 \ -e UPTIME_KUMA_BASE_URL=https://example.kuma-mieru.invalid \ -e PAGE_ID=your-status-page-id \ kuma-mieru ``` -------------------------------- ### Programmatic Multi-Page Handling - TypeScript Source: https://context7.com/alice39s/kuma-mieru/llms.txt Fetches metadata for multiple status page tabs using `getPageTabsMetadata` and renders navigation elements. It then iterates through each tab to fetch monitor and configuration data, demonstrating dynamic page handling. ```typescript // Programmatic multi-page handling import { getPageTabsMetadata } from '@/services/config.server'; async function renderPageTabs() { const tabs = await getPageTabsMetadata(); // Render navigation tabs.forEach((tab, index) => { console.log(`Tab ${index + 1}:`); console.log(` ID: ${tab.id}`); console.log(` Title: ${tab.title}`); console.log(` Icon: ${tab.icon}`); // First tab is default if (index === 0) { console.log(' [DEFAULT PAGE]'); } }); // Fetch data for each page for (const tab of tabs) { const monitor = await fetch(`/api/monitor?pageId=${tab.id}`); const config = await fetch(`/api/config?pageId=${tab.id}`); console.log(`Data loaded for ${tab.id}`); } } ``` -------------------------------- ### Monitor Data API Source: https://context7.com/alice39s/kuma-mieru/llms.txt Fetches real-time monitoring data including heartbeats and uptime statistics for all monitors. It requires a `pageId` query parameter. ```APIDOC ## GET /api/monitor ### Description Fetches real-time monitoring data including heartbeats and uptime statistics for all monitors. ### Method GET ### Endpoint `/api/monitor` ### Parameters #### Query Parameters - **pageId** (string) - Required - Identifier for the status page to retrieve data for. ### Request Example `GET /api/monitor?pageId=default` ### Response #### Success Response (200) - **success** (boolean) - Indicates if the request was successful. - **timestamp** (number) - The timestamp of the data retrieval. - **monitorGroups** (array) - An array of monitor groups, each containing its ID, name, weight, and a list of monitors. - **id** (number) - The ID of the monitor group. - **name** (string) - The name of the monitor group. - **weight** (number) - The weight of the monitor group. - **monitorList** (array) - A list of monitors within the group. - **id** (number) - The ID of the monitor. - **name** (string) - The name of the monitor. - **url** (string) - The URL of the monitor. - **type** (string) - The type of monitor (e.g., 'http'). - **data** (object) - Contains heartbeat and uptime statistics. - **heartbeatList** (object) - A map where keys are monitor IDs and values are arrays of heartbeat objects. - **status** (number) - The status code of the heartbeat (e.g., 1 for up). - **time** (string) - The timestamp of the heartbeat. - **msg** (string) - A message associated with the heartbeat. - **ping** (number) - The ping time in milliseconds. - **uptimeList** (object) - A map where keys are monitor IDs and values contain uptime percentages. - **uptime** (number) - The overall uptime percentage. - **24h** (number) - The uptime percentage over the last 24 hours. - **30d** (number) - The uptime percentage over the last 30 days. #### Response Example ```json { "success": true, "timestamp": 1704063600000, "monitorGroups": [ { "id": 1, "name": "Web Services", "weight": 1, "monitorList": [ { "id": 1, "name": "Main Website", "url": "https://example.com", "type": "http" } ] } ], "data": { "heartbeatList": { "1": [ { "status": 1, "time": "2024-01-01T00:00:00.000Z", "msg": "200 - OK", "ping": 45 } ] }, "uptimeList": { "1": { "uptime": 99.9, "24h": 100, "30d": 99.5 } } } } ``` ``` -------------------------------- ### Manage Uptime Kuma Configuration and Status (TypeScript) Source: https://context7.com/alice39s/kuma-mieru/llms.txt Extracts global configuration, maintenance schedules, and page metadata from Uptime Kuma status pages. It supports multiple fallback strategies and logs details such as title, theme, active incidents, and maintenance timeslots. Dependencies include '@/services/config.server'. ```typescript // services/config.server.ts import { getGlobalConfig, getMaintenanceData, getPageTabsMetadata } from '@/services/config.server'; // Get global configuration with caching async function loadConfiguration() { const config = await getGlobalConfig('default'); // Access configuration console.log(`Title: ${config.config.title}`); console.log(`Theme: ${config.config.theme}`); // Check for active incident if (config.incident) { console.log(`Active incident: ${config.incident.title}`); console.log(`Status: ${config.incident.style}`); } // Process maintenance schedules config.maintenanceList.forEach(maintenance => { console.log(`Maintenance: ${maintenance.title}`); console.log(`Status: ${maintenance.status}`); if (maintenance.timeslotList) { maintenance.timeslotList.forEach(slot => { console.log(` From: ${slot.startDate}`); console.log(` To: ${slot.endDate}`); }); } }); } // Get maintenance data separately async function checkMaintenanceWindows() { const result = await getMaintenanceData('default'); if (result.success) { const active = result.maintenanceList.filter( m => m.status === 'under-maintenance' ); const scheduled = result.maintenanceList.filter( m => m.status === 'scheduled' ); console.log(`Active maintenance: ${active.length}`); console.log(`Scheduled maintenance: ${scheduled.length}`); } } // Get metadata for all configured pages async function getPageMetadata() { const tabs = await getPageTabsMetadata(); tabs.forEach(tab => { console.log(`Page: ${tab.id}`); console.log(` Title: ${tab.title}`); console.log(` Description: ${tab.description}`); console.log(` Icon: ${tab.icon}`); }); } ``` -------------------------------- ### Custom HTTP Fetch with Retry and Timeout (TypeScript) Source: https://context7.com/alice39s/kuma-mieru/llms.txt Provides an HTTP client with automatic retry logic for network errors (ECONNRESET, ETIMEDOUT, ECONNREFUSED, EHOSTUNREACH), configurable timeouts, and TLS 1.2/1.3 support. It also handles self-signed certificates in development mode. Dependencies include '@/services/utils/fetch'. ```typescript // services/utils/fetch.ts import { customFetch } from '@/services/utils/fetch'; // Basic usage with retry and timeout async function fetchWithRetry() { try { const response = await customFetch( 'https://status.example.com/api/data', { method: 'GET', maxRetries: 3, retryDelay: 1000, timeout: 10000, headers: { 'Accept': 'application/json', 'User-Agent': 'Kuma-Mieru/1.6.0' } } ); if (response.ok) { const data = await response.json(); console.log('Data fetched successfully:', data); return data; } else { console.error(`Request failed: ${response.status} ${response.statusText}`); } } catch (error) { console.error('Fetch error:', error); // Automatic retry on ECONNRESET, ETIMEDOUT, ECONNREFUSED, EHOSTUNREACH throw error; } } // POST request example async function postData(payload: object) { const response = await customFetch( 'https://status.example.com/api/update', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), maxRetries: 2, timeout: 5000 } ); return response.json(); } // Features: // - Automatic retry on network errors // - Configurable timeout (default: 10s) // - Exponential backoff on retries // - TLS 1.2/1.3 with strong ciphers // - Development mode: accepts self-signed certificates ``` -------------------------------- ### Check Docker Container Health Status Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md These bash commands are used to check the status of running Docker containers, including the Kuma Mieru service. The `docker ps` command lists all running containers, while `docker compose ps` is specific to services defined in a Docker Compose file. ```bash docker ps ``` ```bash docker compose ps ``` -------------------------------- ### Fetch Monitor Data API (TypeScript) Source: https://context7.com/alice39s/kuma-mieru/llms.txt Fetches real-time monitoring data, including heartbeats and uptime statistics for all monitors. This endpoint is crucial for displaying the current status and historical performance of monitored services. It requires a 'pageId' query parameter. ```typescript const response = await fetch('/api/monitor?pageId=default'); const data = await response.json(); // Response structure { "success": true, "timestamp": 1704063600000, "monitorGroups": [ { "id": 1, "name": "Web Services", "weight": 1, "monitorList": [ { "id": 1, "name": "Main Website", "url": "https://example.com", "type": "http" } ] } ], "data": { "heartbeatList": { "1": [ { "status": 1, "time": "2024-01-01T00:00:00.000Z", "msg": "200 - OK", "ping": 45 } ] }, "uptimeList": { "1": { "uptime": 99.9, "24h": 100, "30d": 99.5 } } } } // Error handling if (!data.success) { console.error('Failed to fetch monitor data:', data.error); } ``` -------------------------------- ### Update Kuma Mieru Docker Compose Images (Bash) Source: https://github.com/alice39s/kuma-mieru/blob/main/README.en.md Pulls the latest Docker images for Kuma Mieru and restarts the services to apply updates when using Docker Compose. ```bash docker compose pull docker compose up -d ``` -------------------------------- ### Fetch and Process Uptime Kuma Monitoring Data (TypeScript) Source: https://context7.com/alice39s/kuma-mieru/llms.txt Retrieves monitoring data from Uptime Kuma, processes it into monitor groups, and logs uptime and latest ping for each monitor. It handles UTC timezone conversion and provides fallback data on errors. Dependencies include '@/services/monitor.server'. ```typescript // services/monitor.server.ts import { getMonitoringData } from '@/services/monitor.server'; // Fetch monitoring data with automatic UTC timezone conversion async function fetchMonitorData() { try { const result = await getMonitoringData('default'); // Process monitor groups result.monitorGroups.forEach(group => { console.log(`Group: ${group.name}`); group.monitorList.forEach(monitor => { const heartbeats = result.data.heartbeatList[monitor.id]; const uptime = result.data.uptimeList[monitor.id]; console.log(` ${monitor.name}: ${uptime?.uptime}% uptime`); console.log(` Latest ping: ${heartbeats?.[0]?.ping}ms`); }); }); return result; } catch (error) { console.error('Failed to fetch monitoring data:', error); // Returns empty data structure on error return { monitorGroups: [], data: { heartbeatList: {}, uptimeList: {} } }; } } // Service automatically handles: // - UTC timezone conversion for all timestamps // - JSON parsing validation // - Heartbeat data structure validation // - Graceful error handling with fallback values ``` -------------------------------- ### Embedding Control Configuration - Bash Source: https://context7.com/alice39s/kuma-mieru/llms.txt Configures iframe embedding security for Kuma Mieru. Options range from blocking all embedding by default (`false`), allowing specific domains via a comma-separated list, to allowing all origins (`true`), which is not recommended for security. ```bash # Block all iframe embedding (default) ALLOW_EMBEDDING=false # Allow specific domains ALLOW_EMBEDDING=dashboard.company.com,internal.company.com # Allow all (not recommended) ALLOW_EMBEDDING=true ``` -------------------------------- ### Embedding Kuma Mieru in Parent Application - HTML Source: https://context7.com/alice39s/kuma-mieru/llms.txt Demonstrates how to embed a Kuma Mieru status page within a parent HTML application using an iframe. It includes basic security attributes like `sandbox` and sets up a message event listener to receive status updates from the embedded page. ```html