DORA指标可视化工具

一个展示如何构建devgraph-ai MCP分子的演示项目,提供数据检索工具和自定义UI可视化组件。

  • by arctir
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 arctir/devgraph-dora-molecule-demo

使用说明

DORA Metrics分子演示

演示存储库,展示如何构建 devgraph ai MCP分子提供以下两种功能:

  1. MCP工具 用于数据检索
  2. JS组件 用于自定义UI可视化(RemotePlugin模式)

这是一个人为的例子,展示了用户如何利用devgraph ai渲染器在ai工具结果旁边显示自己的自定义UI小部件。

这表明了什么

从MCP服务器提供静态资产服务

Molecules可以声明应由devgraph MCP服务器提供的静态资产(JS/CSS):

class DoraMCPMolecule:
    # Static assets this molecule provides
    static_assets = {
        "dora-metrics.js": Path(__file__).parent.parent / "static" / "dora-metrics.js",
    }

devgraph MCP服务器从所有加载的分子中收集这些数据,并在 /static/{filename}.

带有渲染器元数据的工具结果

工具返回数据 _meta.renderer 要指定UI应如何呈现结果:

def get_dora_metrics(self, service: str) -> dict:
    return {
        **metrics_data,
        "_meta": {
            "renderer": {
                "type": "remote",
                "source": f"{self.config.base_url}/static/dora-metrics.js",
            }
        },
    }

仪表板的 ToolResultRenderer 使用它来加载和渲染JS组件。

结构

devgraph-dora-molecule-demo/
├── dora_molecule/
│   ├── __init__.py
│   ├── mcp.py           # Main molecule with DORA tools
│   └── server.py        # Example standalone server
├── static/
│   └── dora-metrics.js  # JS component for rendering
├── pyproject.toml       # Package definition with entry point
└── README.md

DORA指标

此演示提供了四个关键DORA指标的工具:

  • 部署频率 -代码部署到生产环境的频率
  • 变更交付周期 -从承诺到生产的时间
  • 平均恢复时间(MTTR) -事故发生后恢复服务的时间
  • 更改失败率 -导致故障的部署百分比

安装

# Clone the repository
git clone https://github.com/arctir/devgraph-dora-molecule-demo.git
cd devgraph-dora-molecule-demo

# Install with uv
uv sync

# Copy example config
cp config.yaml.example config.yaml

配置

编辑 config.yaml 设置您的MCP服务器URL:

mcp:
  name: "DevgraphMCPServer"
  host: "127.0.0.1"
  port: 9000
  base_url: "https://mcp.example.com"  # URL where JS assets will be served
  molecules:
    - name: "dora"
      type: "dorademo.molecules.devgraph.ai"

与devgraph MCP服务器集成

该分子通过入口点系统加载:

[project.entry-points."devgraph.molecules"]
"dorademo.molecules.devgraph.ai" = "dora_molecule.mcp:DoraMCPMolecule"

devgraph MCP服务器将:

  1. 通过入口点加载分子
  2. 收集 static_assets 并在 /static/{fqdn}/{version}/{filename}
  3. 通过MCP协议提供工具

许可证

Apache 2.0-请参阅 许可证 了解详情。