How to create new tab with charts, tables (interested more UI part)

[ezlo-maksymk]

Hello guys,

Small question :)

I have created new plugin according to HOWTO from https://docs.qameta.io/allure/#_allure_plugins_system - everything working smoothly.

My main idea was a traceability matrix with some additional coverage metrics stuff..

created plugin structure

- dist
--- static
------ index.js
- main/java
 -----Plugin.java

then started looking how to add a chart (of corse I can use google charts, but started native elements)
found https://github.com/allure-framework/allure2/blob/430255d8cf5c236ed29bc0df0b72dcd9389c3df9/allure-generator/src/main/javascript/plugins/tab-graph/index.js

and started from this example
added following files

- dist
--- static
------ index.js
------ MyLayout.js
------ MyCollection.js
- main/java
 -----Plugin.java

in index.js

import CoverageCollection from "./CoverageCollection";
allure.api.addTab("coverage", {
  title: "Coverage",
  icon: "fa fa-trophy",
  route: "coverage",
  onEnter: () => new MyLayout(),
});

But when I want to create my own Layout and View I faced with troubles.
On load of generated report I got:
Uncaught SyntaxError: Cannot use import statement outside a module index.js:1

with simple example from tutorial works fine
when index.js

var MyTabModel = Backbone.Collection.extend({
    url: 'data/myplugindata.json'
})

class MyLayout extends allure.components.AppLayout {

    initialize() {
        this.model = new MyTabModel();
    }

    loadData() {
        return this.model.fetch();
    }

    getContentView() {
        return new MyView({items: this.model.models});
    }
}
const template = function (data) {
    html = '<h3 class="pane__title">My Tab</h3>';
    for (var item of data.items) {
        html += '<p>' + item.attributes.name + ' says: ' + item.attributes.sounds + '</p>';
    }
    return html;
}

var MyView = Backbone.Marionette.View.extend({
    template: template,

    render: function () {
        this.$el.html(this.template(this.options));
        return this;
    }
})
allure.api.addTab('mytab', {
    title: 'My Tab', icon: 'fa fa-trophy',
    route: 'mytab',
    onEnter: (function () {
        return new MyLayout()
    })
});

I will appreciate for an example of dummy page with charts or pls point me on wrong place in my stuff.

PS. also not clear where i can find any information about global object allure, which functions/methods does it have?

[baev]

also not clear where i can find any information about global object allure, which functions/methods does it have?

https://github.com/allure-framework/allure2/blob/master/allure-generator/src/main/javascript/pluginApi.js

[ezlo-maksymk]

Thank you @baev, for your response!

I am not really good in front-end stuff and maybe I am wrong, but looking on allure object I understood that current implementation of allure-generator doesn't give a possibility create own layouts and view out of plugin/index.js file, right?

[baev]

you can use any bundler tool (webpack, rollup etc) and build everything into single file

[ezlo-maksymk]

ok, clear.

Thanks for your time.

[sakshisingla]

Hi @ezlo-maksymk : The link https://docs.qameta.io/allure/#_allure_plugins_system doesn't seem to work. Could you share the updated link in case you have it. (I am trying to understand how should I create and use the plugin to create a new tab in Allure2)

[sakshisingla]

https://github.com/allure-framework/allure-docs/blob/main/content/plugins/overview.md

Posting here for someone who is looking for it!!