菜单

状态页

相关源文件

Uptime Kuma 中的状态页面允许您创建面向公众的仪表板,显示监控服务的状态。这些页面为用户提供了关于您的系统可用性的透明度,并有助于有效传达事件和维护时段。

概述

状态页面充当您的监控系统与用户之间的沟通桥梁。每个状态页面都可以显示多个监控组,显示当前和历史正常运行时间,显示事件,并提供实时状态更新。

来源: server/model/status_page.js13-489 server/routers/status-page-router.js1-248 server/socket-handlers/status-page-socket-handler.js16-356

状态页面架构

状态页面采用分层架构构建,并与 Uptime Kuma 的多个组件集成

来源: server/model/status_page.js13-489 server/routers/status-page-router.js1-248 server/socket-handlers/status-page-socket-handler.js16-356 src/pages/StatusPage.vue1-2127

数据流

了解数据如何在状态页面系统中流动有助于阐明其工作原理

来源: server/routers/status-page-router.js16-112 server/socket-handlers/status-page-socket-handler.js93-258 src/pages/StatusPage.vue698-756

状态页面数据库模型

状态页面使用多个数据库表,它们具有以下关系

来源: server/model/status_page.js395-435 server/socket-handlers/status-page-socket-handler.js154-233

配置选项

状态页面高度可配置,具有以下选项

选项描述默认值
slugURL 友好标识符(/status/slug必填
title状态页面的显示标题必填
description页面上显示的 Markdown 描述""
icon状态页面的自定义徽标"/icon.svg"
theme主题(自动/浅色/深色)“auto”
autoRefreshInterval自动刷新间隔(秒)300
showTags是否显示监控标签false
domainNameList状态页面的自定义域名[]
customCSS用于样式化页面的自定义 CSS""
footerText自定义页脚文本(markdown)""
showPoweredBy是否显示“由 Uptime Kuma 提供支持”true
googleAnalyticsId用于跟踪的 Google Analytics ID""
showCertificateExpiry是否显示证书过期false

来源: src/pages/StatusPage.vue4-105 server/model/status_page.js395-435 server/socket-handlers/status-page-socket-handler.js154-169

状态页面组件

状态页面由出现在渲染页面上的几个关键组件组成

  1. Header - 显示状态页面的标题和徽标
  2. Incident Display - 显示任何固定的事件消息
  3. Overall Status - 显示所有监控的聚合状态
  4. Monitor Groups - 显示组织成组的监控
  5. Description - 以 markdown 格式显示状态页面描述
  6. Footer - 显示自定义页脚文本和归属信息

来源: src/pages/StatusPage.vue129-350

状态状态

状态页面显示以下总体状态

状态常量描述
所有系统运行正常STATUS_PAGE_ALL_UP所有监控器均正常运行
部分服务降级STATUS_PAGE_PARTIAL_DOWN部分监控器出现故障
服务降级STATUS_PAGE_ALL_DOWN所有监控器均出现故障
维护中STATUS_PAGE_MAINTENANCE至少有一个监控器处于维护模式

来源: server/model/status_page.js159-211 src/pages/StatusPage.vue245-263

状态页面事件

事件是向状态页面查看者传达问题或更新的一种方式

来源: src/pages/StatusPage.vue180-233 server/socket-handlers/status-page-socket-handler.js19-91

API 端点

状态页面具有多个用于公共访问的 REST API 端点

端点方法描述缓存持续时间
/status/:slugGET渲染状态页面的 HTML5 分钟
/status/:slug/rssGET提供状态页面的 RSS 源5 分钟
/api/status-page/:slugGET返回状态页面的配置和数据5 分钟
/api/status-page/heartbeat/:slugGET返回监控器的心跳数据1 分钟
/api/status-page/:slug/manifest.jsonGET返回状态页面的 PWA manifest1440 分钟
/api/status-page/:slug/badgeGET返回显示总体状态的 SVG 徽章5 分钟

来源: server/routers/status-page-router.js16-245 server/routers/api-router.js150-211

Socket 事件

以下 Socket.IO 事件用于管理状态页面

事件描述参数
addStatusPage创建新的状态页面title, slug
getStatusPage获取状态页面配置slug
saveStatusPage保存状态页面配置slug, config, imgDataUrl, publicGroupList
deleteStatusPage删除状态页面slug
postIncident发布或编辑事件slug, incident
unpinIncident取消固定事件slug

来源: server/socket-handlers/status-page-socket-handler.js19-356

创建和管理状态页面

创建状态页面

  1. 导航到“设置”→“状态页面”
  2. 点击“新建状态页面”
  3. 输入标题和 slug(URL 路径)
  4. 创建后,您将进入状态页面编辑器

来源: src/pages/AddStatusPage.vue1-90 src/pages/ManageStatusPage.vue1-124

配置状态页面

  1. 编辑常规设置(标题、描述、刷新间隔、主题)
  2. 添加监控组并将监控分配给它们
  3. 自定义外观(徽标、自定义 CSS、页脚文本)
  4. 设置域名(可选)
  5. 保存状态页面

来源: src/pages/StatusPage.vue4-126 server/socket-handlers/status-page-socket-handler.js119-258

创建事件

  1. 导航到您的状态页面并进入编辑模式
  2. 点击“创建事件”
  3. 输入标题和内容(支持Markdown)
  4. 选择样式(信息、警告、危险等)
  5. 发布事件

来源: src/pages/StatusPage.vue180-233 server/socket-handlers/status-page-socket-handler.js19-70

集成特性

自定义域名

可以通过自定义域名访问状态页面,方法是配置 domainNameList

  1. 将域名添加到您的状态页面配置中
  2. 设置 DNS 将域名指向您的 Uptime Kuma 实例
  3. 当通过自定义域名访问时,Uptime Kuma 将提供相应的状态页面

来源: server/model/status_page.js336-373 server/model/status_page.js304-310

Google Analytics

状态页面可以包含 Google Analytics 跟踪,方法是配置 Google Analytics ID

  1. 将您的 Google Analytics ID 添加到状态页面配置中
  2. Uptime Kuma 将把适当的跟踪脚本注入状态页面

来源: server/model/status_page.js123-126 server/google-analytics.js10-24

状态徽章

您可以将状态徽章嵌入到外部网站,以显示您服务的当前状态

https://your-uptime-kuma.example.com/api/status-page/your-slug/badge

可以使用查询参数自定义徽章样式。

来源: server/routers/status-page-router.js151-245

RSS 源

每个状态页面都会自动提供一个 RSS feed,客户端可以订阅该 feed 以获取更新

https://your-uptime-kuma.example.com/status/your-slug/rss

来源: server/model/status_page.js70-94 server/routers/status-page-router.js22-26

最佳实践

  1. 为监控组使用清晰、描述性的名称
  2. 保持描述简洁但信息丰富
  3. 使用事件主动沟通问题
  4. 考虑设置自定义域名以获得专业外观
  5. 定期审查和更新您的状态页面配置

通过有效利用状态页面,您可以向用户提供有关服务状态的透明度,并通过事件期间的清晰沟通来建立信任。