{% extends base_template %}
{% block title %} Aerofoil - Backfill {% endblock %}

{% block head_css %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ url_for_asset('switch.css') }}">
<style type="text/css">
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}
</style>

{% endblock %}

{% block body %}
{{ super() }}   
<div class="container">
	<div class="panel panel-primary show">
		<div class="panel-heading">
			<div class="panel-title">Submit a new Backfill Request</div>
		</div>
		<div class="panel-body">
			<div class="table-responsive table-borderless">
				<form id="form" autocomplete="on" > 
					<table class="table table-borderless">
						<tbody>
							<tr>
								<td>
									<div class="row form-inline">
										<div class="form-group">
											<label>Dag Name: 
												<input class="form-control" type="text" name="dag_name" id="dag_name" 
													   placeholder=" Enter exact dag name" size="100" required="true"
													   oninvalid="this.setCustomValidity('Please Enter a Dag Name')"/>
											</label>
										</div>
									</div> 
								</td>
							</tr>
							<tr>
								<td>
									<div class="row form-inline">
										<div class="form-group">
											<label>Task Name (optional): </label>
											<input class="form-control" type="text" name="task_regex" id="task_regex" placeholder="Task name REGEX" size="90"/>
										</div>
									</div>  
								</td>
							</tr>
							<tr>
								<td>
									<div class="row form-inline">
										<div class="form-group">
											<label>Backfill Start Date: </label>
											<input type="date" name="start_date" class="form-control" id="start_date" required="true" 
													placeholder="Start date*" oninvalid="this.setCustomValidity('Please select  backfill start date.')"/>
										</div>
										&nbsp; &nbsp;&nbsp;&nbsp;
										<div class="form-group">
											<label>Backfill End Date: </label>
											<input type="date" name="end_date" class="form-control" id="end_date" required="true"
												   placeholder="Start date*" oninvalid="this.setCustomValidity('Please select  backfill end date.')"/>
										</div>    
									</div>  
								</td>
							</tr>
							<tr>
								<td>
									<div class="row form-inline">
										<label class="switch-label" title="Clear previous runs (if any) ">
											<input class="switch-input" id="clear_previous"  type="checkbox" value="yes" />
          									<span class="switch" aria-hidden="true"></span>
          									Clear previous runs (if any) 
          									<span class="info-icon" data-toggle="tooltip"
												  title="if selected, the backfill will delete existing backfill-related DAG runs and start anew with fresh, running DAG runs."
										          data-placement="right">&#9432;
											</span>	
       									</label>
       								</div>	
								</td>
							</tr>
							<tr>
								<td>
									<div class="row form-inline">
										<label class="switch-label" title="Rerun only Failed Tasks ">
											<input class="switch-input" id="rerun_failed"  type="checkbox" value="yes" />
          									<span class="switch" aria-hidden="true"></span>
          									Rerun only Failed Tasks 
          									<span class="info-icon" data-toggle="tooltip"
												  title="If selected, the backfill will auto-rerun all the failed tasks for the backfill date range instead of throwing exceptions"
										          data-placement="right">&#9432;
											</span>	
       									</label>
       								</div>	
								</td>
							</tr>
							<tr>
								<td>
									<div class="row form-inline">
										<label class="switch-label" title="Run Backwards">
											<input class="switch-input" id="run_backwards"  type="checkbox" value="yes" />
          									<span class="switch" aria-hidden="true"></span>
          									Run Backwards
          									<span class="info-icon" data-toggle="tooltip"
												  title="If selected, the backfill will run tasks from the most recent day first. if there are tasks that depend_on_past this option will throw an exception"
										          data-placement="right">&#9432;
											</span>	
       									</label>
       								</div>	
								</td>
							</tr>
							<tr>
								<td>
									<div class="row">
										<input id="submit" type="submit" class="btn btn-primary" value="Submit" />
										<input type="reset" id="reset-btn" class="btn btn-light" value="Clear" />
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</form>
			</div>
			<div id='backfill_status'> </div> 
		</div>
	</div>
</div>
<div class="container">
	<div class="panel panel-primary show">
		<div class="panel-heading">
			<div class="panel-title">Backfill History </div>
		</div>
		<div class="panel-body">
			<div class="table-responsive table-borderless" id='history'>

			</div>
		</div>
	</div>
</div>
{% endblock %}
{% block tail %}
{{ super() }} 
<script type="text/javascript">
	const disable_form = function () {
			$("#form :input").prop("disabled", true);
	};

	const enable_form = function () {
			$("#form :input").prop("disabled", false);
	};

	String.prototype.format = function () {
  		var i = 0, args = arguments;
	  	return this.replace(/{}/g, function () {
	    return typeof args[i] != 'undefined' ? args[i++] : '';
	  });
	};

	function backfill_done(){
		const msg = '<div class="alert alert-success alert-dismissible">'+
		            'Backfill submitted successfully. <strong>&#128077;</strong> </div>'
		$('#backfill_status').html(msg)
	}

	function backfill_wip(){
		const msg = '<span class="alert spinner-border text-primary" style="height: 20px; width:20px;"</span>' +
		            '<img src="/static/loading.gif" width=25/>' +
		            '&nbsp; &nbsp; </strong> Submitting Job, Please wait.. </div>'
		$('#backfill_status').html(msg)
	}

	function backfill_error(error_msg){
		const msg = `<div class="alert alert-danger alert-dismissible show"> ${error_msg} </div>`;  
		$('#backfill_status').html(msg)
	}

	function clear_msg(){
		$('#backfill_status').html('')
	}	


	$(document).on("submit", "#form", function (event) {
			event.preventDefault();
			disable_form();
			backfill_wip();

			const dag_name = $("#dag_name").val();
			const task_regex = $("#task_regex").val();

			const start_date = moment($("#start_date").val());
			const end_date = moment($("#end_date").val());

			if (start_date > end_date) {
				backfill_error('Start date should be before end date ');
				enable_form();
				return false;
			}

			const start_date_str = start_date.format('YYYY-MM-DD');
			const end_date_str = end_date.format('YYYY-MM-DD');


			const clear_previous = $("#clear_previous").prop("checked");
			const rerun_failed = $("#rerun_failed").prop("checked");
			const run_backwards = $("#run_backwards").prop("checked");

			const query_string = `dag_name=${dag_name}\
			&task_regex=${task_regex}\
			&start_date=${start_date_str}\
			&end_date=${end_date_str}\
			&clear_previous=${clear_previous}\
			&rerun_failed=${rerun_failed}\
			&run_backwards=${run_backwards}`
			backfill_url = `{{ url_base }}/run?${query_string}`;

			$.ajax({url: backfill_url}).done(function(data){
				enable_form();
				$.get(`{{ url_base }}/history`, function(data){
					load_history(data);
				});
				backfill_done();
			});
	});

	function load_history(data){
		if(data == null){
			$('#history').html('Can not load history, something went wrong!');
			return;
		}
		let data_rows = data;
		let rows = [];
		let header = "<thead> <tr><th width='38%'><b>DAG Name </b> </th>" + 
					 "<th> <b>Start Date </b> </th>" +
					 "<th> <b>End Date </b> </th>" +
					 "<th> <b>Run By </b> </th>" +
					 "<th> <b>Run Date </b> </th>" +
					 "<th> <b>Status </b> </th>" +
					 "<th> <b>Log </b> </th> </tr></thead>" ;

		for(const data_row of data_rows){
			let row = `<tr><td><a href='/tree?dag_id?${data_row.dag_id}'>${data_row.dag_id}</a> </td>` + 
			          `<td>${data_row.start_date}</td>` + 
			          `<td>${data_row.end_date}</td>` + 
			          `<td>${data_row.started_by}</td>` + 
			          `<td>${data_row.run_datetime}</td>` + 
			          `<td>${data_row.status}</td>` + 
			          `<td><a href='${data_row.log_url}''>log</a> </td> </tr>` ;
			rows.push(row)
		}

		let data_html = header + rows.join('')
		$('#history').html(`<table class='table table-bordered' width='100%'>${data_html}</table>`);
	}

	$('#reset-btn').click(function(){
		clear_msg();
	})

	$(document).ready(function(){
		$('#history').html('Loading history...');
		$.get(`{{ url_base }}/history`, function(data){
			load_history(data);
		});
	});


</script>
{% endblock %}