modules/performance-statistics-ext/report/js/txTab.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

const TX_OPERATIONS = ["commit", "rollback"];

const TX_COLORS = {
    commit: "#1BCDD1",
    rollback: "#007bff"
};

const txSearchCachesSelect = $('#txSearchCaches');
const txSearchNodesSelect = $('#txSearchNodes');
const txCharts = $("#txCharts");

function drawTxCharts() {
    var cacheId = txSearchCachesSelect.val();
    var nodeId = txSearchNodesSelect.val();

    txCharts.empty();

    $.each(TX_OPERATIONS, function (k, opName) {
        var txChartId = opName + "TxChart";

        txCharts.append('<canvas class="my-4" id="' + txChartId + '" height="120""></canvas>');

        new Chart(document.getElementById(txChartId), {
            type: 'line',
            data: {
                datasets: prepareTxDatasets(nodeId, cacheId, opName)
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            displayFormats: {
                                'millisecond': 'HH:mm:ss',
                                'second': 'HH:mm:ss',
                                'minute': 'HH:mm:ss',
                                'hour': 'HH:mm'
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Date'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Count'
                        },
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 10
                        }
                    }]
                },
                legend: {
                    display: true
                },
                title: {
                    display: true,
                    text: "Count of [" + opName + "]",
                    fontSize: 20
                },
                animation: false
            }
        })
    });

    txCharts.prepend('<canvas class="my-4" id="txHistogram" height="80""></canvas>');

    new Chart(document.getElementById("txHistogram"), {
        type: 'bar',
        data: {
            labels: buildTxHistogramBuckets(),
            datasets: prepareTxHistogramDatasets(nodeId, cacheId)
        },
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        offsetGridLines: true
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Duration of transaction'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Count of transactions'
                    }
                }]
            },
            legend: {
                display: false
            },
            title: {
                display: true,
                text: "Histogram of transaction durations",
                fontSize: 20
            },
            animation: false
        }
    });
}

function prepareTxHistogramDatasets(nodeId, cacheId) {
    var datasets = [];

    var datasetData = REPORT_DATA.txHistogram[nodeId] === undefined ? undefined : REPORT_DATA.txHistogram[nodeId][cacheId];

    if (datasetData === undefined)
        return datasets;

    var dataset = {
        label: 'Count of transactions',
        data: datasetData,
        backgroundColor: '#FAA586',
    };

    datasets.push(dataset);

    return datasets;
}

function prepareTxDatasets(nodeId, cacheId, opName) {
    var datasets = [];

    var txData = REPORT_DATA.tx[nodeId] === undefined ? undefined : REPORT_DATA.tx[nodeId][cacheId];

    if (txData === undefined)
        return datasets;

    var datasetData = [];

    $.each(txData[opName], function (time, arr) {
        datasetData.push({t: parseInt(arr[0]), y: arr[1]})
    });

    sortByKeyAsc(datasetData, "t");

    var dataset = {
        data: datasetData,
        label: "Count of " + opName,
        lineTension: 0,
        backgroundColor: 'transparent',
        borderWidth: 2,
        pointRadius: 1,
        borderColor: TX_COLORS[opName],
        pointBackgroundColor: TX_COLORS[opName]
    };

    datasets.push(dataset);

    return datasets;
}

function buildTxHistogramBuckets() {
    var buckets = [];

    var lastVal = 0;

    $.each(REPORT_DATA.txHistogramBuckets, function (idx, value) {
        buckets.push(lastVal + " to " + value + " ms");
        lastVal = value;
    });

    buckets.push(lastVal + " ms or more");

    return buckets;
}

buildSelectCaches(txSearchCachesSelect, drawTxCharts);
buildSelectNodes(txSearchNodesSelect, drawTxCharts);

drawTxCharts();