Sonarqube:使用React创建自定义页面

Question

我想使用react创建一个自定义页面，但我找不到可以执行此操作的文档。在Sonarqube文档上，只有仅使用JavaScript创建自定义页面的方法，我不了解示例插件如何与React一起使用。您能告诉我是否有可以使用的文档。

Answer 1

简短答案：没有。目前，几乎没有人（据我所知，实际上没有人）使用自定义页面。

但是，这是可能的。您需要使用WebPack（或类似的JS Packager）创建一个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);
}