无管理员权限下，如何在ADO Dashboard展示SonarQube与Veracode指标？

一、利用现有默认组件的替代方案 #

Markdown组件（手动/半自动化更新） #

这是无需管理员权限即可使用的默认组件，可通过API拉取指标后转为Markdown格式展示：

1. 在SonarQube个人设置生成只读令牌，调用api/measures/component接口获取代码质量核心指标（如漏洞数、覆盖率、代码异味数）；
2. 在Veracode账户设置生成API密钥对，调用appsec/v1/applications/{appId}/findings接口获取安全扫描结果（如高危/严重漏洞数量）；
3. 提取API返回的关键数据，整理成Markdown表格或列表，粘贴到ADO Dashboard的Markdown组件中。

• 半自动化优化：可以用本地脚本（PowerShell/Python）定时调用API生成最新的Markdown内容，再手动更新组件内容，省去重复手动查询的麻烦。

Query Results组件（基于Pipeline同步数据） #

如果你的ADO Pipeline已集成SonarQube和Veracode，可以在Pipeline中添加任务，将扫描指标同步到ADO工作项的自定义字段（如SonarQube_Bugs、Veracode_Critical_Findings）：

1. 在Pipeline中调用SonarQube/Veracode API获取指标；
2. 使用ADO的Update Work Item任务将指标写入目标工作项的自定义字段；
3. 创建ADO查询筛选出目标工作项，用Query Results组件展示这些自定义字段的数值。

二、支持自定义代码的默认组件（动态拉取指标） #

ADO的Markdown组件支持内嵌HTML和JavaScript代码，可直接编写脚本动态调用API拉取并展示实时指标：

<div id="sonar-stats"></div>
<div id="veracode-stats"></div>
<script>
  // 加载SonarQube指标
  fetch('https://你的SonarQube实例地址/api/measures/component?component=你的项目Key&metricKeys=bugs,vulnerabilities,coverage', {
    headers: { 'Authorization': 'Bearer 你的SonarQube只读令牌' }
  })
  .then(res => res.json())
  .then(data => {
    const metrics = data.component.measures;
    let sonarHtml = '<h3>SonarQube 代码质量指标</h3><ul>';
    metrics.forEach(m => sonarHtml += `<li>${m.metric.replace('_', ' ')}: ${m.value} ${m.unit || ''}</li>`);
    document.getElementById('sonar-stats').innerHTML = sonarHtml + '</ul>';
  });

  // 加载Veracode指标
  const veracodeAuth = btoa('你的Veracode API ID:你的Veracode API密钥');
  fetch('https://api.veracode.com/appsec/v1/applications/你的应用ID/findings', {
    headers: {
      'Authorization': `Basic ${veracodeAuth}`,
      'Accept': 'application/json'
    }
  })
  .then(res => res.json())
  .then(data => {
    const critical = data.findings.filter(f => f.severity === 'CRITICAL').length;
    const high = data.findings.filter(f => f.severity === 'HIGH').length;
    document.getElementById('veracode-stats').innerHTML = `
      <h3>Veracode 安全扫描指标</h3>
      <ul>
        <li>严重漏洞数量: ${critical}</li>
        <li>高危漏洞数量: ${high}</li>
      </ul>
    `;
  });
</script>

• 注意事项：
  • 确保SonarQube/Veracode的API端点允许跨域请求，或你的ADO环境能直接访问这些API；
  • 令牌/密钥需妥善保管，避免在公共共享的仪表盘中泄露，建议使用只读权限令牌；
  • 若遇到CORS限制，可通过本地反向代理脚本（如Node.js）转发API请求，再让组件调用本地代理地址。

内容的提问来源于stack exchange，提问作者Vijayanand Kalyanaraman