Describe the Bug

Currently, Allure dynamically renders its pages using JSON data stored in various folders such as data, widgets, and test-cases. This data is fetched using Backbone.js to render the pages accordingly.

Observed Issue:

When a user navigates through the Allure Report, data is frequently re-requested from the server. For example:

• On the main (overview) page, Allure requests data for widgets, typically involving 6 JSON files.
• If the user navigates to the "suites" section, data from suites.json is fetched.
• Upon returning to the main "overview" page, the same 6 JSON files are requested again.

This leads to unnecessary server requests and potential delays in page rendering.

Proposed Solution:

Implement a caching mechanism within Backbone.js to store fetched data. The proposed approach is as follows:

• When a file is fetched for the first time, it should be cached.
• Subsequent requests for the same data should retrieve it from the cache.
• If the data is not found in the cache, a new request should be made, and the data should be added to the cache.

This caching strategy will enhance page rendering speed and reduce redundant requests to the server.

I have a working solution for this caching mechanism and would like to propose it for consideration.

Steps to Reproduce

1. Open any Allure report in your browser.
2. Open the Developer Tools and navigate to the Network tab.
3. Switch between different tabs in the report, such as moving from "Overview" to "Suites," and then back to "Overview."
4. Observe that requests are repeatedly being sent to the server each time you navigate back to "Overview."

Expected Behaviour

Let's say the data from the file widgets/environment.json should be fetched only once. If a subsequent request is made for the same file, it doesn't make sense to fetch it again. Instead, when we request the data for the first time, we should cache it. Then, rather than repeatedly fetching the data, we can render the page using the cached data.

Screenshots or Additional Context

Not Much Changes here:-

Allure is already using Backbone. When we call Backbone's fetch method, it internally calls the Backbone.sync method. By overriding the original sync method when loading App.js, it will prevent repeated requests. It will first check the cache for data, and only if the data is not found it will send a request.

I am Currently using this approach as a external plugin, and it is working fine for me:-

Below is the code and Screenshot how it works:-

// Implement a Global Level Caching
var Cache = {
    data: {}
};

(function () {
    // Save a reference to the original Backbone.sync method
    var originalSync = Backbone.sync;

    Backbone.sync = function (method, model, options) {
        options = options || {};
        var url = options.url

        if (Cache.data[url]) {
            // If data is in cache, call success callback directly
            if (options.success) {
                options.success(Cache.data[url]);
            }
            model.trigger('sync', model, Cache.data[url], options);
        } else {
            // If data is not in cache, call original sync and cache the result
            var success = options.success;
            options.success = function (response) {
                Cache.data[url] = response;
                if (success) success(response);
            };
            return originalSync.call(this, method, model, options);
        }
    };
})();

Here is the example:-

What Language are you using?

JavaScript

What Framework/Allure Integration you are using?

NA

What version of Allure Integration you are using?

NA

What version of Allure Report you are using?

NA

Code of Conduct

• I agree to follow this project's Code of Conduct