ui/templates/index.html (159 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title>Dagify Tool Converter</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<!-- Header Content -->
<nav class="navbar navbar-light shadow">
<div class=" container">
<a class="navbar-brand" target="_blank" style="font-family: sans-serif; font-size: medium;"
href="https://opensource.googleblog.com/2024/07/dagify-accelerate-your-journey-from-control-m-to-apache-airflow.html">
<span class="logo">About</span>
</a>
<div class="navbar-brand feedback" style="font-family: sans-serif; font-size: medium;"><span>Feedback </span>
<a target="_blank" href="https://github.com/GoogleCloudPlatform/dagify/issues" class="material-icons link-underline-opacity-0">feedback</a>
</div>
</div>
</nav>
<div class="container">
<div class="row justify-content-center">
<h1 class="text-center fs-1 mt-5 mb-3 py-2 "><strong>Convert your jobs to Airflow DAGs!</strong></h1>
<form id="upload-form" method="post" enctype="multipart/form-data" class="my-1">
<card class=" card border-light my-4 py-5 " >
<div class="row my-2 align-items-center ">
<div class="col-md-4">
<label for="file-input">Upload Source XML</label>
</div>
<div class="col-md-8">
<input type="file" name="source_file" id="file-input" class="form-control">
</div>
</div>
<div class="row my-2 align-items-center">
<div class="col-md-4">
<label for="dag_divider">Enter DAG Divider</label>
</div>
<div class="col-md-8">
<input type="text" name="dag_divider" id="dag_divider" class="form-control">
</div>
</div>
<div id="alertContainer" class="my-3"></div>
<button type="submit" class="btn btn-primary ">
<i class="bi bi-arrow-repeat me-2"></i>
Convert & Download</button>
</card>
</form>
{% if download_link %}
<meta http-equiv="refresh" content="3;url={{ download_link }}">
<p class="text-break fw-medium fs-5 lh-base" >Thank you! Your output will be downloaded soon. If not, click <a href="{{ download_link }}">here</a> to download it.</p>
<br>
{% endif %}
{% if report_data %}
<div class="card border-success my-4 py-5 ">
<h3>Conversion Summary</h3>
<list >
<ul>
{% for item in report_data.High_Level_Info %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</list>
<hr>
{% for table_name in ["Job_info_table", "Schedule_info_table"] %}
<h3>{{ report_data[table_name]["title"]}}</h3>
<br>
<table class = "table table-sm table-responsive-md caption-top rounded-3 table-bordered border border-dark">
<thead>
<tr>
{% for column in report_data[table_name]["columns"] %}
<th class="table-primary border border-dark col-sm-3">{{ column }}</th>
{% endfor %}
</tr>
</thead>
<tbody class="table-group-divider">
{% for row in report_data[table_name]["rows"] %}
<tr class = "">
{% for cell in row.values() %}
<td>
{{ cell }}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<br>
<hr>
{% endfor %}
{% if report_data.Note %}
<p class=" text-start text-break fw-medium mb-2 fs-6"> {{ report_data.Note}}</p>
{% endif %}
{% endif %}
</div>
</div>
</div>
<!-- Footer Content -->
<div class="fs-6">
<footer class="d-flex align-items-center py-1">
<ul class="nav justify-content-center align-items-center col-md-11">
<li class="nav-item py-1 px-1" >
<a class="nav-link text-muted">
© <img src="./static/assets/img/google_logo.svg" class="google_logo" alt="Google Logo" /></a></li>
<li class="nav-item py-1 px-1">
<a href="https://github.com/GoogleCloudPlatform/dagify" class="nav-link text-muted">
<img src="./static/assets/img/github_logo.svg" class="github_logo px-1" alt="Github Logo" /> Dagify</a></li>
<li class="nav-item py-1 px-1"><a href="https://policies.google.com/privacy"
class="nav-link text-muted">Privacy</a></li>
<li class="nav-item py-1 px-1"><a href="https://policies.google.com/terms?hl=en"
class="nav-link text-muted">Terms</a></li>
</ul>
</footer>
</div>
<script>
// Check for incompatible Files
const form = document.getElementById('upload-form');
const alertContainer = document.getElementById('alertContainer');
form.addEventListener('submit', (event) => {
const fileInput = document.querySelector('input[type="file"]');
if (!fileInput.files || fileInput.files.length === 0) {
event.preventDefault();
showAlert("Please upload a file!");
} else {
const file = fileInput.files[0];
const fileName = file.name;
const fileExtension = fileName.split('.').pop().toLowerCase();
if (fileExtension !== 'xml') {
event.preventDefault();
showAlert("Please upload an XML file!");
}
}
});
function showAlert(message) {
// Remove any existing alerts
alertContainer.innerHTML = '';
const alert = document.createElement('div');
alert.classList.add('alert', 'alert-danger', 'alert-dismissible', 'fade', 'show');
alert.setAttribute('role', 'alert');
alert.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
// Add the alert to the container
alertContainer.appendChild(alert);
}
</script>
<script>
// Assigns column width based on the number of columns with bootrap tag "col-md-num"
function columnWidth(){
const table = document.getElementsByTagName(table);
num_columns = table.columns.length;
col-width = "col-md-"+num_columns;
table.classList.add(col-width);
}
</script>
</body>
</html>