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);
}

Sonarqube：使用react创建自定义页面

1 个答案: