Azure DevOps构建视图自定义参数标签页实现方案咨询

现成实现方案 #

直接在Azure DevOps Marketplace中搜索第三方扩展，比如Build Parameters Viewer，安装后就能在构建详情页的Summary、Tests标签旁新增Parameters标签，直接展示该次构建运行时使用的所有参数值，无需点击“Run New”查看历史参数。

自定义开发指引 #

如果需要自己开发符合需求的扩展，可按以下步骤操作：

1. 准备开发环境
   安装Node.js，然后通过npm安装Azure DevOps扩展开发工具：

   npm install -g azure-devops-extension-sdk tfx-cli
   

2. 初始化扩展项目
   使用Yeoman生成器快速创建扩展骨架：

   npm install -g yo generator-azure-devops-extension
   yo azure-devops-extension
   

   按照提示选择“Tab”类型的扩展，关联到构建详情页场景。

3. 开发参数展示组件

   • 通过Azure DevOps SDK获取当前构建的上下文信息（比如构建ID）
   • 调用Builds - Get REST API，传入构建ID获取构建的完整数据，其中parameters字段包含了运行时的参数信息
   • 编写前端组件（推荐React），将参数数据格式化展示为清晰的表格或列表

4. 配置扩展贡献点
   在项目根目录的vss-extension.json中，添加构建详情页标签的贡献配置：

   "contributions": [
     {
       "id": "custom-build-parameters-tab",
       "type": "ms.vss-web.tab",
       "targets": [
         "ms.vss-build-web.build-details-tab-group"
       ],
       "properties": {
         "name": "Parameters",
         "uri": "dist/tab.html"
       }
     }
   ]
   

5. 打包并部署扩展

   • 执行npm run build编译组件
   • 用tfx打包扩展：

     tfx extension create --manifest-globs vss-extension.json
     

   • 将生成的.vsix文件上传到Azure DevOps Marketplace（或组织私有扩展库），然后在组织中启用该扩展

内容的提问来源于stack exchange，提问作者Adrian Rodzik