mdawar/nats-dashboard

NATS Web Dashboard

一个用于显示[***]

在线演示监控位于https://demo.nats.io:8222%E7%9A%84%E6%BC%94%E7%A4%BANATS%E6%9C%8D%E5%8A%A1%E5%99%A8%E3%80%82

概述

这是一个静态Web应用，灵感来源于https://github.com/nats-io/nats-top%EF%BC%8C%E5%AE%83%E8%8E%B7%E5%8F%96%E5%B9%B6%E6%98%BE%E7%A4%BAhttps://nats.io%E7%9A%84%E7%9B%91%E6%8E%A7%E7%BB%9F%E8%AE%A1%E4%BF%A1%E6%81%AF%EF%BC%8C%E4%BD%86%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%80%8C%E9%9D%9E%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%95%8C%E9%9D%A2%E3%80%82

由于这是一个静态Web应用，它可以部署在任何地方，也可以在您的机器上本地运行。

它还是一个PWA（渐进式Web应用），因此可以安装并离线使用，但当然您需要能够访问NATS服务器，例如您可以在离线时监控本地NATS服务器。

该应用没有后端参与，请求直接从浏览器发出，因此即使应用不是本地运行，您也可以监控本地NATS服务器（http://localhost:8222%EF%BC%89%E3%80%82

没有数据保留功能，因此无法显示历史统计信息，您只能查看实时服务器统计信息。如果需要此功能，您应该使用带有Grafana的Prometheus导出器并设置适当的数据保留策略。

使用方法

PWA

该应用部署在https://pages.cloudflare.com%E4%B8%8A%EF%BC%9A

[***]

该应用可以安装在您的设备上以便离线使用（桌面或移动设备）。

Docker镜像

sh
docker run --rm -it -p 8000:80 docker.xuanyuan.run/mdawar/nats-dashboard

该镜像使用[***]

在上面的示例中，我们将镜像的端口80映射到localhost的端口8000。

注意：您可以使用自定义服务器配置（Caddyfile）并将其挂载到/etc/caddy/Caddyfile。

构建文件

构建文件在发布页面上以build.zip文件提供。

您可以使用任何HTTP服务器在本地提供应用服务。

使用Python的HTTP服务器提供服务：

sh
cd ./dist && python -m http.server

使用Caddy服务器提供服务：

sh
docker run --rm -it -p 8000:80 -v ./dist:/usr/share/caddy docker.xuanyuan.run/caddy

配置

该应用使用在/config.json提供的运行时JSON配置文件。

您可以运行Docker镜像并将config.json文件挂载到/srv/config.json。

配置选项

Server类型定义：

ts
interface Server {
  /** 服务器显示名称（可选）。 */
  name?: string;
  /** 服务器URL。 */
  url: string;
}

示例配置文件

json
{
  "server": {
    "name": "我的NATS服务器",
    "url": "http://nats:8222"
  },
  "servers": [
    {
      "name": "本地主机",
      "url": "http://localhost:8222"
    },
    {
      "name": "demo.nats.io",
      "url": "https://demo.nats.io:8222"
    }
  ],
  "hideServerInput": false
}

单服务器配置示例

此配置适用于监控单个NATS服务器。

json
{
  "server": {
    "name": "我的NATS服务器",
    "url": "http://nats:8222"
  },
  "hideServerInput": true
}

内部NATS服务器

该应用只能监控用户可访问的NATS服务器，因此可以监控网络上任何可访问的NATS服务器。

要监控私有网络上的NATS服务器，您可以使用Docker镜像运行自己的应用实例，并配置到NATS监控服务器的反向代理。

示例Docker Compose配置：

yml
services:
  # 内部NATS服务器。
  server:
    image: docker.xuanyuan.run/nats:2.10
    command: -n internal-server -m 8222 -js

  # 在同一私有网络上运行的NATS仪表板实例。
  dashboard:
    image: docker.xuanyuan.run/mdawar/nats-dashboard
    environment:
      # NATS监控服务器将在前端的/proxy/*上被代理。
      # 参见：config/Caddyfile获取反向代理配置。
      REVERSE_PROXY_UPSTREAM: 'server:8222'
    volumes:
      # 可选的配置文件。
      - ./config.json:/srv/config.json
    ports:
      - target: 80
        published: 8000
        protocol: tcp

现在使用应用时，您可以使用同一域上的路径/proxy/监控此私有NATS服务器。

这是设置默认URL并禁用URL输入的示例config.json文件：

json
{
  "server": {
    "name": "内部服务器",
    "url": "https://natsdashboard.example.com/proxy/"
  },
  "hideServerInput": true
}

将服务器url替换为实际的NATS仪表板URL。

警告：您的NATS监控服务器将被公开，您必须确保保护您的NATS仪表板实例的安全。

限制

混合内容

使用明文HTTP获取内容的HTTPS页面称为混合内容页面。

如果应用通过HTTPS提供服务，您将无法监控通过HTTP提供服务的NATS服务器（大多数浏览器阻止混合内容）。

使用托管在[***]

注意：这不会影响在localhost上运行的NATS服务器。

解决方案：

1. 通过HTTPS提供NATS监控服务器。
2. 在localhost上反向代理监控服务器（浏览器允许本地提供的混合内容）。

例如：

sh
# 在localhost:8222上反向代理NATS监控服务器。
# 现在可以使用http://localhost:8222监控服务器，而不会被浏览器阻止。
docker run --rm -it --net host docker.xuanyuan.run/caddy caddy reverse-proxy --from http://localhost:8222 --to http://example.com:8222

数据获取

默认情况下，数据使用https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API%E8%8E%B7%E5%8F%96%EF%BC%8C%E5%9B%A0%E4%B8%BANATS%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BB%8Ehttps://github.com/nats-io/nats-server/releases/tag/v2.9.22%E7%89%88%E6%9C%AC%E5%BC%80%E5%A7%8B%E6%94%AF%E6%8C%81https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS%E3%80%82

对于< v2.9.22的NATS服务器，可以选择使用JSONP请求，通过注入执行并调用接收数据的JavaScript函数的<script>标签来获取数据。

此选项必须在应用设置中明确启用。

替代方案

• https://github.com/nats-io/nats-top%EF%BC%9A%E7%94%A8%E4%BA%8E%E7%9B%91%E6%8E%A7NATS%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E7%B1%BBtop%E5%B7%A5%E5%85%B7%E3%80%82
• https://github.com/nats-io/prometheus-nats-exporter%EF%BC%9ANATS%E6%8C%87%E6%A0%87%E7%9A%84Prometheus%E5%AF%BC%E5%87%BA%E5%99%A8%E3%80%82
• https://github.com/nats-io/nats-surveyor%EF%BC%9A%E5%8F%A6%E4%B8%80%E4%B8%AAPrometheus%E5%AF%BC%E5%87%BA%E5%99%A8%E3%80%82

credits

• https://astro.build/%EF%BC%9AWeb%E6%A1%86%E6%9E%B6
• Solid：UI框架
• TanStack Query：异步状态管理
• Tailwind UI：Tailwind CSS组件
• Heroicons：SVG图标
• https://github.com/cncf/artwork%EF%BC%9ANATS%E5%BE%BD%E6%A0%87
• Workbox：Service Worker库和工具