Plugin in overview

[rafaelferreiras]

Hello everyone!

Our team maintains 2 plugins with our internal data. However, we are having difficulty bringing the data to the overview page. Can anyone help us?

Another question, is it possible to combine two plugins on a single page, as tab-graphs works?

Below is the code for one of the plugins

@Override
protected AllureData getData(final List<LaunchResults> launches) {
    final AllureData data = new AllureData()
            .setStatistic(new Statistic())
            .setTime(new GroupTime())
            .setTestRuns(new ArrayList<>())
            .setReportName("Test Cases");
    launches.stream()
            .flatMap(launch -> launch.getResults().stream())
            .forEach(result -> {
                try {
                    result.getTestStage().getSteps().iterator().forEachRemaining(step -> {
                        if (step.getName().startsWith("CT")) {
                            data.getStatistic().update(step.getStatus());
                            data.getTime().update(step.getTime());
                            accumulator++;
                        }
                    });
                } catch (Exception e) {
                    expurgo++;
                }
            });

    return data;
}

`'use strict';

allure.api.addTranslation('en', {
    tab: {
        asserts: {
            name: 'Assertions'
        }
    },
    widget: {
        asserts: {
            name: 'Assertions'      
        }
    }
});

allure.api.addTranslation('br', {
    tab: {
        asserts: {
            name: 'Validações'
        }
    },
    widget: {
        asserts: {
            name: 'Validações'
        }
    }
});

var MyTabModelAssert = Backbone.Collection.extend({
    url: 'widgets/asserts.json'
})

class MyLayoutAssert extends allure.components.AppLayout {

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

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

    getContentView() {
        return new MyViewAssert({items: this.model.models});
    }
}
function criarChartAssert(data) {
	var div = document.createElement("div");

	var title = document.createElement("h1");
	title.setAttribute("id", "asserts");
	title.appendChild(document.createTextNode("Asserções"));
	title.setAttribute("style", "display: flex; position: relative; left: 80px; font-size: 3vw; color: #003641");
	
	var canvas = document.createElement("canvas");
    canvas.setAttribute("id","myChartAssert");
	canvas.setAttribute("style", "display: flex; position: relative; left: 50px; max-height:300px; max-width:300px;");
    div.appendChild(canvas);
	
   	var total = document.createElement("p");
	total.setAttribute("id","total");
	total.appendChild(document.createTextNode(data.items[0].attributes.statisticAssert.total + " Validações"));
	total.setAttribute("style", "display: flex; position: relative; margin-top: -140px; left: 140px; font-size: 18px; color: #003641");
	
	var app__content = document.getElementsByClassName('app__content').item(0);
	app__content.appendChild(title);	
	app__content.appendChild(canvas);
	app__content.appendChild(total);  
}


const templateAssert = function (data) {

	 var meuObjects = [];
	 
	 var dados = data.items[0].attributes.statisticAssert;
	
	 const entries = Object.entries(dados); 
        entries.forEach(e => {          
            let object = {
                "nome": e[0],
                "valor":e[1],
            }
            meuObjects.push(object);
        });

    const myLabels = meuObjects.map((x) => x.nome);   
    const myDatas = meuObjects.map((x) => x.valor);
	myLabels.pop();	
	myDatas.pop();
	
	document.body.onload = criarChartAssert(data);
	
    var myChartAssert = new Chart('myChartAssert', {
        type: 'doughnut',
        data: {
            labels: myLabels,
            datasets: [
                {
					data: myDatas,
                    backgroundColor: [
                        'rgb(253, 90, 62)',
						'rgb(255, 208, 80)',
						'rgb(170, 170, 170)',
						'rgb(151, 204, 100)',
						'rgb(211, 94, 190)'
					]
                }
            ]
        },
		options: { 
			aspectRatio: 1,
			responsive: true,
			maintainAspectRatio: true,
			cutout: 95	
        }		
    })
}

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

    render: function () {
        this.$el.html(this.template(this.options));
        return this;
    }
})

allure.api.addTab('asserts', {
    title: 'tab.asserts.name', icon: 'fa fa-check-square-o',
    route: 'asserts',
    onEnter: (function () {
        return new MyLayoutAssert()
    })
});

allure.api.addWidget('widgets', 'asserts', MyLayoutAssert);

[baev]

Overview widgets use WidgetsModel by default, which uses the data stored in widgets/${widgetName}.json file, but parses it differently. You can override that by providing Model as the last argument of addWidget method:

allure.api.addWidget('widgets', 'asserts', MyLayoutAssert, MyTabModelAssert);

[rafaelferreiras]

@baev
Thank you very much for the prompt response. On the first attempt, app__nav appeared inside the widget.

'use strict';

var MyTabModelAssert = Backbone.Collection.extend({
    url: 'widgets/asserts.json'
})

class MyLayoutAssert extends allure.components.AppLayout {
    initialize() {
        this.model = new MyTabModelAssert();
    }
    loadData() {
        return this.model.fetch();
    }
    getContentView() {
        return new MyViewAssert({items: this.model.models});
    }
}
function createChartAssert(data) {  
  //mycode
}


const templateAssert = function (data) {
	//mycode	
}

var MyViewAssert = Backbone.Marionette.View.extend({
    template: templateAssert,
    render: function () {
        this.$el.html(this.template(this.options));
        return this;
    }
})

allure.api.addWidget('widgets', 'asserts', MyLayoutAssert,MyTabModelAssert);

I tried the approach below and it was also unsuccessful

class MyWidget extends Backbone.Marionette.View {

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

    serializeData() {
        return {
            items: this.model.get('items'),
        }
    }
}

allure.api.addWidget('widgets', 'asserts', MyWidget);

[rafaelferreiras]

Can anyone help us? We've tried a little bit of everything. We have already tried customizing the "AppLayout" class. We have already tried using the View, WidgetStatusView and Widget classes. We don't have examples that work across the internet.

[baev]

Another question, is it possible to combine two plugins on a single page, as tab-graphs works?

Could you please explain it to me in more detail?

[rafaelferreiras]

Below is our last unsuccessful attempt.

'use strict';

allure.api.addTranslation('en', {
    tab: {
        asserts: {
            name: 'Assertions'
        }
    },
    widget: {
        asserts: {
            name: 'Assertions'      
        }
    }
});

allure.api.addTranslation('br', {
    tab: {
        asserts: {
            name: 'Validações'
        }
    },
    widget: {
        asserts: {
            name: 'Validações'
        }
    }
});

var MyTabModelAssert = Backbone.Collection.extend({
    url: 'widgets/asserts.json'
})

class MyLayoutAssert extends allure.components.AppLayout {

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

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

    getContentView() {
        return new MyViewAssert({items: this.model.models});
    }
}
function criarChartAssert(data) {
	var total = document.createElement("p");
	total.setAttribute("id","total");
	total.appendChild(document.createTextNode(data.items[0].attributes.statisticAssert.total + " Validações"));
	total.setAttribute("style", "font-size: 18px; color: #003641");
	
	var app__content = document.getElementsByClassName('app__content').item(0);		
	app__content.appendChild(total);  
}


const templateAssert = function (data) {

	 var meuObjects = [];
	 
	 var dados = data.items[0].attributes.statisticAssert;
	
	 const entries = Object.entries(dados); 
        entries.forEach(e => {          
            let object = {
                "nome": e[0],
                "valor":e[1],
            }
            meuObjects.push(object);
        });


	// Chama a função criarChartAssert()
	criarChartAssert(data);
}

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

    render: function () {
        this.$el.html(this.template(this.options));
        return this;
    }
})

allure.api.addTab('asserts', {
    title: 'tab.asserts.name', icon: 'fa fa-check-square-o',
    route: 'asserts',	
    onEnter: (function () {
        return new MyLayoutAssert()
    })
});

class MyWidgetStatusView extends allure.components.WidgetStatusView {

    initialize() {
        super.initialize();

        // Adiciona um observador de eventos para o atributo "total"
        this.model.on("change:statisticAssert.total", this.updateTotal, this);
    }

    // Atualiza o valor do widget
    updateTotal() {
        this.text = this.model.attributes.statisticAssert.total + " Validações";
    }

}


allure.api.addWidget('widgets', 'asserts', MyWidgetStatusView);