

<% if @step %>
	<div style="margin-top: 15px; margin-bottom: 15px;">  

	<div class="step-history-chart-container" id="step-chart-<%= @step.id %>" style="margin-top: -10px; float:right; height: 56px; width: 120px; margin-left: 0px;"></div>											

		 <div class="row">
		 	 <div class="col-sm-12 col-md-4">
						<b style="font-size: 1.2em"><%= @step.task_name %></b>
				 </div>
		   <div class="col-sm-12 col-md-3">
			   <%= I18n.t(:started)%>:
			   <b><span data-localtime-format="yyyy-MM-dd HH:mm"><%= @step.start_time.iso8601 rescue nil %></span></b>
		   </div>
		   <div class="col-sm-12 col-md-3">
			   <% if @step.end_time%><%= I18n.t(:duration) %><% else%><%= I18n.t(:elapsed) %><% end%>:
         <% if @step.end_time && !@build.incomplete? %>
             <b><%= format_seconds(@step.duration) rescue nil %></b>
         <% else %>
             <b><%= format_seconds(@step.elapsed_time_in_progress) rescue nil %></b>
         <% end %>
			 </div>
			</div> 				
	</div>		

	<% if @step.task_name == "SCM Update"%>
	  <!-- Change Log -->
		<%= partial "/builds/change_log".to_sym %>			
	<% end%>
	
	<% if @step.task_name == "UI Test" || @step.task_name = "Load Test"%>
	  <% if @build.is_parallel && @build.is_load_testing %>              
      <% if @build.incomplete? %>
        <%= partial "/builds/load_test_results_inprogress".to_sym %>
      <% else %>
        <%= partial "/builds/load_test_results_completed".to_sym %>      
      <% end %>
	  <% end %>
  	  
	  <!-- UI test results -->
	  <div id="ui-test-results-div">
		  <%= partial "/builds/ui_test_results".to_sym %>
	  </div>
	<% end%>

	<div class="hidden-print section_open">
	  <div class="section_header" onclick="toggle_section(this.parentNode)"><%= I18n.t(:log)%></div>
	  <div class="section_content">
			  <% if @step && @step.respond_to?("log_output") %>
	      <div class="logfile formatted"><%= raw format_build_log(@step.log_output) %></div>
				<% else %>
				<%= @step.class %>
				<% end %>
	  </div>
	</div>	
	
<% end %>
	
	
<script type="text/javascript">

	function refreshUITestResultsPeriodically() {
		  $.getScript('/builds/<%= @build.id %>/ui-test-results', function() {
          //script loaded and parsed
         updateCall();		
      }).fail(function(){
          if(arguments[0].readyState==0){
              //script failed to load
            console.log("refreshing call failed to load resonse JS: " + arguments[2].toString());
            console.log("stop calling the server periodically")
          } else{
            //script loaded but failed to parse
            console.log("refreshing call error occurred: " + arguments[2].toString());
            console.log("stop calling the server periodically")
          }
      });
	}
	
	// every 5+ seconds based on UI test count, for in-progress build, refresh the records
	function updateCall(){
    var build_ui_test_count = <%= @build.ui_test_count rescue 0%>;
    var factor = 5 + Math.floor(build_ui_test_count / 50);
		var is_parallel_build_in_progress = $('#is_parallel_build_in_progress').val();
		if (is_parallel_build_in_progress == "true") {
      <% if @build.is_load_testing %>
        // load testing, reduce refresh test rate
        setTimeout(function(){refreshUITestResultsPeriodically()}, 1000 * 3 * factor);
      <% else %>
        setTimeout(function(){refreshUITestResultsPeriodically()}, 1000 * factor);
      <% end %>
		}
	}
	
<% step_last_runs = @step.last_runs(10) rescue []%>
	
$(document).ready(function() {		

  <% if @build && @build.incomplete? %>
	refreshUITestResultsPeriodically();
  <% end %>

  <% if step_last_runs.any? %>
	Highcharts.chart('step-chart-<%= @step.id%>', {
	    chart: {
	      type: 'column',
        backgroundColor: null
		
	    },
		  title: {
          text: ''
      },
      credits: {
          enabled: false
      },
      xAxis: {
          labels: {
              enabled: false
          },
          title: {
              text: null
          },
          startOnTick: false,
          endOnTick: false,
          tickPositions: []
      },
      yAxis: {
          endOnTick: false,
          startOnTick: false,
          labels: {
              enabled: false
          },
          title: {
              text: null
          },
          tickPositions: [0]
      },
      legend: {
          enabled: false
      },
	    tooltip: {     
				 formatter: function() {
					 return '<span style="font-size:10px;">'  + this.point.duration + '</b></span>';
				}
	    },
	    plotOptions: {
	        column: {
	            pointPadding: 0.15,
	            borderWidth: 0
	        },
					series: {
            animation: false,
						cursor: 'pointer'
					}
	    },
      series: [{
          name: 'time',
				  maxPointWidth: 8,					
          data: <%=  raw step_last_runs.reverse.collect{|x| x.chart_data}.to_json %>					
      }]
		});
		
	<% end %>
	
	});
	
</script>
	
	
