Sonarqube：使用反应创建自定义页面

Question

我想使用 react 创建一个自定义页面，但我找不到执行此操作的文档。在 Sonarqube 文档中，只有使用 javascript 创建自定义页面的方法，我不明白示例插件如何与 react 一起使用。 你能告诉我是否有我可以使用的文档吗？

Answer 1

简短的回答：没有。目前几乎没有人（据我所见，事实上没有人）使用自定义页面。

但是，这是可能的。您需要使用Webpack（或类似的 JS 打包器）创建一个 React 项目。

我还建议使用Create-React-App。这为您修复了很多设置。之后，在您的 index.js 中使用来自 SonarQube wiki 的示例代码。

这是一个例子：

/*
    PRODUCTION ENTRYPOINT
 */
import React from 'react';
import ReactDOM from 'react-dom';
import Project from './components/Project';
import './main.css';

window.registerExtension('myplugin/coverage', function (options) {

    appendCustomCSS();
    let isDisplayed = true;

    window.SonarRequest.getJSON('/api/measures/component', {
        component: options.component.key,
        metricKeys: 'coverage'
    }).then(function (response) {
        if (isDisplayed) {
            let obj = JSON.parse(response.component.measures[0].value);
            let div = document.createElement('div');
            render(obj, div);
            options.el.appendChild(div);
        }
    });

    return function () {
        isDisplayed = false;
    };
});

function appendCustomCSS() {
    let fileref = document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", "/static/myplugin/coverage.css");
    document.head.append(fileref);
}

function render(objectArray, container) {
    ReactDOM.render(<div className="Coverage"><Project objects={objectArray}/></div>, container);
}