openvino/tests/stress_tests/scripts/memcheck-template/timeline_report.html

{% extends "base.html" %}
{% block title %}Memcheck report{% endblock %}
{% block head %}
    {{ super() }}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
{% endblock %}
{% block content %}
<div class="w3-container">
<h2>Memcheck report</h2>
    {% for timeline in timelines %}
    <div class="w3-container">
        <h4> {{ timeline['device'][0]|e }} - {{ timeline['precision'][0]|e }} - {{ timeline['model_name'][0]|e }} - {{ timeline['test_name'][0]|e }} </h4>
        <div class={{ '"w3-text-green"' if timeline['status'] else '"w3-text-red"' }}>
            {{ "PASS" if timeline['status'] else "FAIL" }}
        </div>

        <div id="{{timeline['_id'][0]|e}}-details" class="w3-show w3-container">
            <div class="w3-container">
                Test timeline:
            <canvas class="chartjs"
                id="{{timeline['_id'][0]|e}}-chart"
                height="100"
                data-labels='[{% for point in timeline['commit_date'] %} "{{point}}" {{ "," if not loop.last }} {% endfor %}]'
                data-charttype='line'>
                <div class="chartjs-item"
                    data-label='vmrss'
                    data-commitid='[{% for point in timeline['commit_sha'] %} "{{point}}" {{ "," if not loop.last }} {% endfor %}]'
                    data-data='[{% for point in timeline['metrics']['vmrss'] %} {{point}} {{ "," if not loop.last }} {% endfor %}]'
                    data-rgb='255, 68, 55',
                    data-waterline='{{ timeline['ref_metrics']['vmrss'][-1] }}'>
                </div>
                <div class="chartjs-item"
                    data-label='vmhwms'
                    data-commitid='[{% for point in timeline['commit_sha'] %} "{{point}}" {{ "," if not loop.last }} {% endfor %}]'
                    data-data='[{% for point in timeline['metrics']['vmhwm'] %} {{point}} {{ "," if not loop.last }} {% endfor %}]'
                    data-rgb='66,133,244'
                    data-waterline='{{ timeline['ref_metrics']['vmhwm'][-1] }}'>
                </div>
            </canvas>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<script>
    if ($(".chartjs").length > 0) {
        $( ".chartjs" ).each(function() {
            datasets=[];
            annotations=[];
            $(this).find('.chartjs-item').each(function(index, el){
                var data=$(this).data('data');
                var label=$(this).data('label');
                var commitid=$(this).data('commitid');
                var waterline=$(this).data('waterline');
                if($(this).data('rgb')){
                    var rgb=$(this).data('rgb');
                }else{
                    var rgb='244,160,0';
                }
                var dataset=[{
                    label: label,
                    data: data,
                    commitid: commitid,
                    borderColor: 'rgba('+rgb+', 1)',
                    backgroundColor: 'rgba('+rgb+', 0.12)',
                    borderWidth:3,
                    pointBorderWidth:3,
                    pointBorderColor:'rgba('+rgb+', 1)',
                    pointBackgroundColor:'#465f80',
                    pointRadius: 5,
                    lineTension: 0,
                }];
                datasets = $.merge(dataset, datasets);
                var annotation = [{
                    type: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-0',
                    value: waterline,
                    borderColor: 'black',
                    borderWidth: 3,
                    label: {
                        backgroundColor: 'rgba('+rgb+', 1)',
                        content: label + 'waterline',
                        enabled: true,
                    },
                }]
                annotations = $.merge(annotation, annotations)
            });


            var chartType=$(this).data('charttype');
            var labels=$(this).data('labels');
            var myChart = new Chart(this, {
                type: chartType,
                data: {
                    labels: labels,
                    datasets: datasets,
                },
                options: {
                    annotation: {
                        annotations: annotations
                    },
                    scales: {
                        xAxes: [{
                            type: 'time',
                            distribution: 'series',
                            time:       {
                                parser: 'YYYY-MM-DD hh:mm:ss',
                                displayFormats: {
                                    'millisecond': 'MMM DD hh:mm',
                                    'second': 'MMM DD hh:mm',
                                    'minute': 'MMM DD hh:mm',
                                    'hour': 'MMM DD hh:mm',
                                    'day': 'MMM DD hh:mm',
                                    'week': 'MMM DD hh:mm',
                                    'month': 'MMM DD hh:mm',
                                    'quarter': 'MMM DD hh:mm',
                                    'year': 'MMM DD hh:mm',
                                },
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Commit Time'
                            }
                        }]
                    }
                }
            });

            $(this).on('click', function(evt){
                var activePoint = myChart.getElementAtEvent(evt);
                if(activePoint[0]){
                    var commitid = myChart.data.datasets[activePoint[0]._datasetIndex].commitid[activePoint[0]._index];
                    window.open('https://github.com/openvinotoolkit/openvino/commit/' + commitid, '_blank');
                }
            });
        });
    }

function show(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>
{% endblock %}