<div class="modal fade modal-wide" tabindex="-1" role="dialog" id="load_test_operation_modal">
</div>

<script type="text/javascript">
	function toggle_stats_ranged() {
		$(".range_selected").toggle(200);
	}
	
	function toggle_stats_all() {
		$(".range_all").toggle(200);		
	}
</script>
<h2><i class="fa fa-line-chart"></i> <%= I18n.t(:charts) %>: <%= @project.name || @project.identifier %></h2>

<div class="row">
	<div class="col-sm-12 col-md-6">
		
		<ul class="nav nav-tabs" id="statsTab">
		  <li class="nav-item">
		    <a class="nav-link" data-toggle="tab" role="tab" href="#ui_test_stats" id="second_tab" aria-selected="false">Test
		      Stats</a></li>
		  <li class="nav-item">
		    <a class="nav-link active" data-toggle="tab" role="tab" href="#build_time_chart_div" id="first_tab" aria-selected="true">Build
		      time</a></li>
		</ul>
				
	</div>
	
	<div class="col-sm-12 col-md-6" style="margin-top: 5px;">
		<div id="reportrange" class="pull-right">
		  <input type="hidden" id="report_starts_at" name="starts_at" value="<%= @starts_at %>"/>
		  <input type="hidden" id="report_ends_at" name="ends_at" value="<%= @ends_at %>"/>
		  <i class="fa fa-calendar icon-large"></i>
		  <span><%= @starts_at.strftime('%Y-%m-%d') %> - <%= @ends_at.strftime('%Y-%m-%d') %></span> <b class="caret"></b>
		</div>
		
	</div>
</div>	




<div class="tab-content" style="padding: 15px; ">
  <div class="tab-pane fade show active" id="build_time_chart_div">
    <div id="build_time_chart" class="tab-pane" style="max-height: <%= @chart_height%>px; margin-left: 0px;">
      
    </div>
  </div>

  <div id="ui_test_stats" class="tab-pane fade" style="font-size: 15px;">
    <table class="table table-striped" style="width: 95%">
      <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>VUs</th>
        <th>Duration</th>
        <th>Hits</th>
        <th>Hits/s</th>
        <% @all_operations.each_with_index do |op, idx| %>
        <th><a href="javascript:void(0);" onclick="$.getScript('/projects/<%= @project.id %>/report_operation?operation=<%= op %>&starts_at=<%= @starts_at %>&ends_at=<%= @ends_at %>');"><%= op %></a></th>
        <% end %>
      </tr>
      </thead>
      <tbody>
        <% @load_test_results.each do |entry| %>
        <tr>
          <td><%= link_to entry[:build_id], "/builds/#{entry[:build_id]}" %></td>
          <td><%= entry[:build_start_time].localtime.strftime('%Y-%m-%d %H:%M') rescue nil %> </td>
          <td><%= entry[:vu_count] %></td>
          <td><%= entry[:build_duration] %></td>
          <td><%= entry[:hits] %></td>
          <td><%= entry[:hits_per_second] %> (<%= entry[:peak_hits_per_second] %>)</td>
          
          <% @all_operations.each do |op| %>
          
            <% entry[:timings].select{|x| x[:operation] == op }.each do |timing| %>
              <td style="text-align:center">
                <span><%= timing[:average_time] %></span>
  <!--              
                <span style="width:10rem;"><%= timing[:fastest_time] %></span>
            
                <span style="width:10rem;"><%= timing[:slowest_time] %></span>
  -->              
              </td>
            <% end %>
          
          <% end %>
        </tr>
        <% end %>
      </tbody>
    </table>

  </div>

</div>

<script>

    var chart_build_time;

    function build_time_highchart() {
        chart_build_time = $('#build_time_chart').highcharts({
            chart: {
                type: 'column',
                zoomType: 'x'
            },
            title: {
                text: 'Build Results and Time'
            },
            xAxis: {
                <% if  @build_times.count > 10 %>
                categories: <%= raw @build_times.collect{|x| x[:date]}.inspect %>,
                <% else %>
                categories: <%= raw @build_times.collect{|x| x[:time ]}.inspect %>,
                <% end %>
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Time (m)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{point.x}</span><table>',
                pointFormat: '<tr><td style="color:{point.color};padding:0">{point.result}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mins</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {},
                series: {
                    turboThreshold: 10000  //set it to a larger threshold, it is by default to 1000
                }
            },
            series: [{
                showInLegend: false,
                enableMouseTracking: true,
                color: "#B5CA92",
                data: [
                    <% @build_times.each do |entry| %>
                    {
                        result: '<%= (entry[:result] > 0) ? 'Successful' : 'Failed' %>',
                        y: <%= entry[:duration] %>,
                        color: '<%= entry[:color] %>'
                    },
                    <% end %>
                ]
            }
            ]
        });
    }

   
    $(function () {
        build_time_highchart();
      
        $('#second_tab').click(function (e) {
            $("#build_time_chart_div").hide();
            var chart = $('#test_cases_chart').highcharts();
            chart.redraw();
        });

        $('#first_tab').click(function (e) {
            $("#build_time_chart_div").show();
        });

        $('#statsTab a:first').tab('show');
        $("#test_cases_chart_div").hide();

        $('#statsTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })


        $show_failed_test_count_button = $("#show_failed_test_count_btn");
        $show_failed_test_count_button.click(function () {
            / * var series = chart.series[0]; */
            var chart = $('#test_cases_chart').highcharts();
            var failedTestSeries = chart.series[1];
            if (failedTestSeries.visible) {
                failedTestSeries.setVisible(false, false);
            } else {
                failedTestSeries.setVisible(true, false);
            }
            chart.redraw();

        });

        $(window).resize(function () {
            build_time_highchart();
            // chart_build_time.setSize(
            // 		       $(document).width(),
            // 		       $(document).height()/2,
            // 		       false
            // 		    );
            //
            // 		    chart_test_cases.setSize(
            // 		       $(document).width(),
            // 		       $(document).height()/2,
            // 		       false
            // 		    );
        });

    });

</script>

<%= partial(:'projects/date_selection', :locals => {:url_prefix => "/projects/#{@project.identifier}/report"}) %>

