<!DOCTYPE doctype html>
<html lang="en">

<head>
    <link href="https://img.icons8.com/flat_round/64/000000/bar-chart.png" rel="shortcut icon" type="image/x-icon" />
    <title>Pytest Metrics</title>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
    <!-- Bootstrap core Googleccharts -->
    <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });
    </script>
    <!-- Bootstrap core Datatable-->
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js" type="text/javascript"></script>

    <style>
        body {
            font-family: -apple-system, sans-serif;
        }

        .sidenav {
            height: 100%;
            width: 220px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: white;
            overflow-x: hidden;
            border-style: ridge;
        }

        .sidenav a {
            padding: 12px 10px 8px 12px;
            text-decoration: none;
            font-size: 18px;
            color: Black;
            display: block;
        }

        .main {
            padding-top: 10px;
        }

        @media screen and (max-height: 450px) {
            .sidenav {
                padding-top: 15px;
            }

            .sidenav a {
                font-size: 18px;
            }
        }

        .tile {
            width: 100%;
            float: left;
            margin: 0px;
            list-style: none;
            font-size: 30px;
            color: #FFF;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            margin-bottom: 5px;
            position: relative;
            text-align: center;
            color: white !important;
        }

        .tile.tile-fail {
            background: #f44336 !important;
        }

        .tile.tile-pass {
            background: #4CAF50 !important;
        }

        .tile.tile-info {
            background: #009688 !important;
        }

        .tile.tile-head {
            background: #616161 !important;
        }

        .dt-buttons {
            margin-left: 5px;
        }

        .loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('https://www.downgraf.com/wp-content/uploads/2014/09/02-loading-blossom-2x.gif') 50% 50% no-repeat rgb(249, 249, 249);
        }
    </style>
</head>

</html>

<body>
    <div class="loader">
    </div>
    <div class="sidenav">
        <a><img src="{{project_image}}"style="height:20vh;max-width:98%;"/></a>
        <a class="tablink" href="#" id="defaultOpen" onclick="openPage('dashboard', this, 'orange')"><i class="fa fa-dashboard"></i> Dashboard</a>
        <a class="tablink" href="#" onclick="openPage('suiteMetrics', this, 'orange'); executeDataTable('#sm',5)"><i class="fa fa-th-large"></i> Suite Metrics</a>
        <a class="tablink" href="#" onclick="openPage('testMetrics', this, 'orange'); executeDataTable('#tm',2)"><i class="fa fa-list-alt"></i> Test Metrics</a>
    </div>
    <div class="main col-md-9 ml-sm-auto col-lg-10 px-4">
        <div class="tabcontent" id="dashboard">
            <div class="d-flex flex-column flex-md-row align-items-center p-1 mb-3 bg-light border-bottom shadow-sm">
                <h5 class="my-0 mr-md-auto font-weight-normal"><i class="fa fa-dashboard"></i> Dashboard</h5>
                <nav class="my-2 my-md-0 mr-md-3" style="color:red">
                    <a class="p-2"><b style="color:black;">Execution Time:</b> {{exe_data[0][10]}} s</a>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <a class="tile tile-head">{{exe_data[0][3]}}<p style="font-size:12px">Executed</p></a>
                </div>
                <!-- <div class="col-md-4">
                    <a class="tile tile-info">{{exe_data[0][4]}}<p style="font-size:12px">Executed</p></a>
                </div> -->
                <div class="col-md-4">
                    <a class="tile tile-pass">{{exe_data[0][4]}}<p style="font-size:12px">Pass</p></a>
                </div>
                <div class="col-md-4">
                    <a class="tile tile-fail">{{exe_data[0][5]}}<p style="font-size:12px">Fail</p></a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <a class="tile tile-head">{{exe_data[0][6]}}<p style="font-size:12px">Skip</p></a>
                </div>
                <!-- <div class="col-md-4">
                    <a class="tile tile-info">{{exe_data[0][10]}}<p style="font-size:12px">Error</p></a>
                </div> -->
                <div class="col-md-4">
                    <a class="tile tile-pass">{{exe_data[0][7]}}<p style="font-size:12px">xPass</p></a>
                </div>
                <div class="col-md-4">
                    <a class="tile tile-fail">{{exe_data[0][8]}}<p style="font-size:12px">xFail</p></a>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-4" style="background-color:white;height:350px;width:auto;border:groove;"> <span style="font-weight:bold">Test Status:</span>
                    <div id="testChartID" style="height:280px;width:auto;"></div>
                </div>
                <div class="col-md-8" style="background-color:white;height:350px;width:auto;border:groove;"> <span style="font-weight:bold">Top 5 Suite Failures:</span>
                    <div id="suiteBarID" style="height:300px;width:auto;"></div>
                </div>
            </div>
            <hr/>
            <div class="row">
                <div class="col-md-12" style="background-color:white;height:450px;width:auto;border:groove;"> <span style="font-weight:bold">Top 10 Test Performance (sec):</span>
                    <div id="testsBarID" style="height:400px;width:auto;"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="height:25px;width:auto;">
                    <p class="text-muted" style="text-align:center;font-size:9px"> <a href="https://github.com/adiralashiva8/pytest-metrics" target="_blank">pytest-metrics</a>
                    </p>
                </div>
            </div>
            <script>
                window.onload = function() {
                    executeDataTable('#sm', 3);
                    executeDataTable('#tm', 2);
                    createBarGraph('#sm', 0, 3, 5, 'suiteBarID', 'Failure ', 'Suite');
                    createPieChart({{exe_data[0][4]}}, {{exe_data[0][5]}}, {{exe_data[0][7]}}, {{exe_data[0][8]}}, 'testChartID', 'Tests Status:');
                    createBarGraph('#tm', 0, 2, 10, 'testsBarID', 'Elapsed Time (s) ', 'Test');
                };
            </script>
            <script>
                function openInNewTab(url, element_id) {
                    var element_id = element_id;
                    var win = window.open(url, '_blank');
                    win.focus();
                    $('body').scrollTo(element_id);
                }
            </script>
        </div>
        <div class="tabcontent" id="suiteMetrics">
            <h4><b><i class="fa fa-table"></i> Suite Metrics</b></h4>
            <hr />
            <table class="table table-striped" id="sm">
                <thead>
                    <tr>
                        <th>Suite Name</th>
                        <th>Executed</th>
                        <th>Pass</th>
                        <th>Fail</th>
                        <th>xPass</th>
                        <th>xFail</th>
                        <th>Skip</th>
                        <th>Error</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in suite_data %}
                    <tr>
                        <td style="word-wrap: break-word;max-width: 250px; white-space: normal;text-align:left;"> {{item[2]}}</td>
                        <td style="color: teal"> {{item[3]}}</td>
                        <td style="color: green"> {{item[4]}}</td>
                        <td style="color: red"> {{item[5]}}</td>
                        <td style="color: brown"> {{item[7]}}</td>
                        <td style="color: brown"> {{item[8]}}</td>
                        <td style="color: brown"> {{item[6]}}</td>
                        <td style="color: gray"> {{item[9]}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div class="row">
                <div class="col-md-12" style="height:25px;width:auto;">
                </div>
            </div>
        </div>
        <div class="tabcontent" id="testMetrics">
            <h4><b><i class="fa fa-table"></i> Test Metrics</b></h4>
            <hr />
            <table class="table table-striped" id="tm">
                <thead>
                    <tr>
                        <th>Suite - Test Case</th>
                        <th>Status</th>
                        <th>Time (s)</th>
                        <th>Error Message</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in test_data %}
                    <tr>
                        <td style="word-wrap: break-word;max-width: 250px; white-space: normal;text-align:left;"> {{item[2]}}</td>
                        {% if (item[3] == "PASS") %}
                            <td style="color: green;"> {{item[3]}}</td>
                        {% elif (item[3] == "FAIL") %}
                            <td style="color: red;"> {{item[3]}}</td>
                        {% else %}
                            <td style="color: brown;"> {{item[3]}}</td>
                        {% endif %}
                        <td>{{item[4]}}</td>
                        <td style="word-wrap: break-word;max-width: 200px; white-space: normal">{{item[5]}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div class="row">
                <div class="col-md-12" style="height:25px;width:auto;">
                </div>
            </div>
        </div>
    </div>

    <script>
        function createPieChart(pass_count, fail_count, xpass_count, xfail_count, ChartID, ChartName) {
            var status = [];
            status.push(['Status', 'Percentage']);
            status.push(['PASS', parseInt(pass_count)], ['FAIL', parseInt(fail_count)],
                ['xPASS', parseInt(xpass_count)], ['xFAIL', parseInt(xfail_count)], );
            var data = google.visualization.arrayToDataTable(status);

            var options = {
                pieHole: 0.6,
                legend: 'none',
                chartArea: {
                    width: "95%",
                    height: "90%"
                },
                colors: ['#2ecc71', '#fc6666', '#8ed4aa', '#d47f7f'],
            };

            var chart = new google.visualization.PieChart(document.getElementById(ChartID));
            chart.draw(data, options);
        }
    </script>
    <script>
        function createBarGraph(tableID, keyword_column, time_column, limit, ChartID, Label, type) {
                var status = [];
                css_selector_locator = tableID + ' tbody >tr'
                var rows = $(css_selector_locator);
                var columns;
                var myColors = [
                    '#4F81BC',
                    '#C0504E',
                    '#9BBB58',
                    '#24BEAA',
                    '#8064A1',
                    '#4AACC5',
                    '#F79647',
                    '#815E86',
                    '#76A032',
                    '#34558B'
                ];
                status.push([type, Label, {
                    role: 'annotation'
                }, {
                    role: 'style'
                }]);
                for (var i = 0; i < rows.length; i++) {
                    if (i == Number(limit)) {
                        break;
                    }
                    //status = [];
                    name_value = $(rows[i]).find('td');

                    time = ($(name_value[Number(time_column)]).html());
                    keyword = ($(name_value[Number(keyword_column)]).html()).trim();
                    status.push([keyword, parseFloat(time), parseFloat(time), myColors[i]]);
                }
                var data = google.visualization.arrayToDataTable(status);

                var options = {
                    legend: 'none',
                    chartArea: {
                        width: "92%",
                        height: "75%"
                    },
                    bar: {
                        groupWidth: '90%'
                    },
                    annotations: {
                        alwaysOutside: true,
                        textStyle: {
                            fontName: 'Comic Sans MS',
                            fontSize: 13,
                            bold: true,
                            italic: true,
                            color: "black", // The color of the text.
                        },
                    },
                    hAxis: {
                        textStyle: {
                            fontName: 'Arial',
                            fontSize: 10,
                        }
                    },
                    vAxis: {
                        gridlines: {
                            count: 10
                        },
                        textStyle: {
                            fontName: 'Comic Sans MS',
                            fontSize: 10,
                        }
                    },
                };

                // Instantiate and draw the chart.
                var chart = new google.visualization.ColumnChart(document.getElementById(ChartID));
                chart.draw(data, options);
            }
    </script>
    <script>
        function executeDataTable(tabname, sortCol) {
            var fileTitle;
            switch (tabname) {
                case "#sm":
                    fileTitle = "SuiteMetrics";
                    break;
                case "#tm":
                    fileTitle = "TestMetrics";
                    break;
                default:
                    fileTitle = "metrics";
            }

            $(tabname).DataTable(
                {
                    retrieve: true,
                    "order": [[Number(sortCol), "desc"]],
                    dom: 'l<".margin" B>frtip',
                    buttons: [
                         {
							extend:    'copyHtml5',
							text:      '<i class="fa fa-files-o"></i>',
							titleAttr: 'Copy',
							exportOptions: {
								columns: ':visible'
							}
						},
                        {
                            extend:    'csvHtml5',
							text:      '<i class="fa fa-file-text-o"></i>',
							titleAttr: 'CSV',
                            filename: function() {
                                return fileTitle + '-' + new Date().toLocaleString();
                            },
							exportOptions: {
								columns: ':visible'
							}
                        },
                        {
                            extend:    'excelHtml5',
							text:      '<i class="fa fa-file-excel-o"></i>',
							titleAttr: 'Excel',
                            filename: function() {
                                return fileTitle + '-' + new Date().toLocaleString();
                            },
							exportOptions: {
								columns: ':visible'
							}
                        },
                        {
							extend:    'print',
							text:      '<i class="fa fa-print"></i>',
							titleAttr: 'Print',
							exportOptions: {
								columns: ':visible',
                                alignment: 'left',
							}
                        },
						{
							extend:    'colvis',
							collectionLayout: 'fixed two-column',
							text:      '<i class="fa fa-low-vision"></i>',
							titleAttr: 'Hide Column',
							exportOptions: {
								columns: ':visible'
							},
							postfixButtons: [ 'colvisRestore' ]
                        },
                    ],
                }
            );
        }
    </script>
    <script>
        function openPage(pageName, elmnt, color) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].style.backgroundColor = "";
            }
            document.getElementById(pageName).style.display = "block";
            elmnt.style.backgroundColor = color;

        }
        // Get the element with id="defaultOpen" and click on it
        document.getElementById("defaultOpen").click();
    </script>
    <script>
        // Get the element with id="defaultOpen" and click on it
        document.getElementById("defaultOpen").click();
    </script>
    <script>
        $(window).on('load', function () { $('.loader').fadeOut(); });
    </script>
</body>