Skip to content

Commit

Permalink
chore: Move Web Templates to External Files (#4384)
Browse files Browse the repository at this point in the history
  • Loading branch information
@X-Guardian
X-Guardian authored Apr 1, 2024
1 parent 83d99ce commit f0312e3
Show file tree
Hide file tree
Showing 6 changed files with 596 additions and 585 deletions.
81 changes: 81 additions & 0 deletions server/controllers/web_templates/templates/github-app.html.tmpl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>atlantis</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/normalize.css">
<link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/skeleton.css">
<link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/custom.css">
<style>

form {
width: 100%;
}

form button {
float: right;
}

textarea {
width: 100%;
height: 300px;
font-family: monospace;
}

.config {
display: flex;
flex-direction: row;
align-items: baseline;
border-bottom: 1px solid #eee;
}


.config strong {
width: 15%;
}

pre {
background-color: #eee;
padding: .5em;
width: 80%;
}
</style>
<link rel="icon" type="image/png" href="{{ .CleanedBasePath }}/static/images/atlantis-icon.png">
<script src="{{ .CleanedBasePath }}/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
<section class="header">
<a title="atlantis" href="{{ .CleanedBasePath }}"><img class="hero" src="{{ .CleanedBasePath }}/static/images/atlantis-icon_512.png"/></a>
<p class="title-heading">atlantis</p>

<p class="github-app-msg"><strong>
{{ if .Target }}
Create a github app
{{ else }}
Github app created successfully!
{{ end }}
</strong></p>
</section>
<section>
{{ if .Target }}
<form action="{{ .Target }}" method="POST">
<textarea name="manifest">{{ .Manifest }}</textarea>
<button type="submit">Setup</button>
</form>
{{ else }}
<p>Visit <a href="{{ .URL }}/installations/new" target="_blank">{{ .URL }}/installations/new</a> to install the app for your user or organization, then <strong>update the following values</strong> in your config and <strong>restart Atlantis<strong>:</p>

<ul>
<li class="config"><strong>gh-app-id:</strong> <pre>{{ .ID }}</pre></li>
<li class="config"><strong>gh-app-key-file:</strong> <pre>{{ .Key }}</pre></li>
<li class="config"><strong>gh-webhook-secret:</strong> <pre>{{ .WebhookSecret }}</pre></li>
</ul>
{{ end }}
</section>
</div>
</body>
</html>
243 changes: 243 additions & 0 deletions server/controllers/web_templates/templates/index.html.tmpl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>atlantis</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{{ .CleanedBasePath }}/static/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
if (document.URL.indexOf("discard=true") !== -1) {
$("p.js-discard-success").show();
setTimeout(function() {
$("p.js-discard-success").fadeOut('slow',function(){
window.location.href = "/";
})
}, 5000); // <-- time in milliseconds
}
});
</script>
<link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/normalize.css">
<link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/skeleton.css">
<link rel="stylesheet" href="{{ .CleanedBasePath }}/static/css/custom.css">
<link rel="icon" type="image/png" href="{{ .CleanedBasePath }}/static/images/atlantis-icon.png">
</head>
<body>
<div class="container">
<section class="header">
<a title="atlantis" href="{{ .CleanedBasePath }}/"><img class="hero" src="{{ .CleanedBasePath }}/static/images/atlantis-icon_512.png"/></a>
<p class="title-heading">atlantis</p>
<p class="js-discard-success"><strong>Plan discarded and unlocked!</strong></p>
</section>
<section>
{{ if .ApplyLock.GlobalApplyLockEnabled }}
{{ if .ApplyLock.Locked }}
<div class="twelve center columns">
<h6><strong>Apply commands are disabled globally</strong></h6>
<h6><code>Lock Status</code>: <strong>Active</strong></h6>
<h6><code>Active Since</code>: <strong>{{ .ApplyLock.TimeFormatted }}</strong></h6>
<a class="button button-primary" id="applyUnlockPrompt">Enable Apply Commands</a>
</div>
{{ else }}
<div class="twelve columns">
<h6><strong>Apply commands are enabled</strong></h6>
<a class="button button-primary" id="applyLockPrompt">Disable Apply Commands</a>
</div>
{{ end }}
{{ end }}
</section>
<br>
<br>
<br>
<section>
<p class="title-heading small"><strong>Locks</strong></p>
{{ $basePath := .CleanedBasePath }}
{{ if .Locks }}
<div class="lock-grid">
<div class="lock-header">
<span>Repository</span>
<span>Project</span>
<span>Workspace</span>
<span>Locked By</span>
<span>Date/Time</span>
<span>Status</span>
</div>
{{ range .Locks }}
<div class="lock-row">
<a class="lock-link" href="{{ $basePath }}{{.LockPath}}">
<span class="lock-reponame">{{.RepoFullName}} #{{.PullNum}}</span>
</a>
<a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
<span class="lock-path">{{.Path}}</span>
</a>
<a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
<span><code>{{.Workspace}}</code></span>
</a>
<a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
<span class="lock-username">{{.LockedBy}}</span>
</a>
<a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
<span class="lock-datetime">{{.TimeFormatted}}</span>
</a>
<a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
<span><code>Locked</code></span>
</a>
</div>
{{ end }}
</div>
{{ else }}
<p class="placeholder">No locks found.</p>
{{ end }}
</section>
<br>
<br>
<br>
<section>
<p class="title-heading small"><strong>Jobs</strong></p>
{{ if .PullToJobMapping }}
<div class="lock-grid">
<div class="lock-header">
<span>Repository</span>
<span>Project</span>
<span>Workspace</span>
<span>Date/Time</span>
<span>Step</span>
<span>Description</span>
</div>
{{ range .PullToJobMapping }}
<div class="pulls-row">
<span class="pulls-element">{{ .Pull.RepoFullName }} #{{ .Pull.PullNum }}</span>
<span class="pulls-element">{{ if .Pull.Path }}<code>{{ .Pull.Path }}</code>{{ end }}</span>
<span class="pulls-element">{{ if .Pull.Workspace }}<code>{{ .Pull.Workspace }}</code>{{ end }}</span>
<span class="pulls-element">
{{ range .JobIDInfos }}
<div><span class="lock-datetime">{{ .TimeFormatted }}</span></div>
{{ end }}
</span>
<span class="pulls-element">
{{ range .JobIDInfos }}
<div><a href="{{ $basePath }}{{ .JobIDUrl }}" target="_blank">{{ .JobStep }}</a></div>
{{ end }}
</span>
<span class="pulls-element">
{{ range .JobIDInfos }}
<div>{{ .JobDescription }}</div>
{{ end }}
</span>
</div>
{{ end }}
</div>
{{ else }}
<p class="placeholder">No jobs found.</p>
{{ end }}
</section>
<div id="applyLockMessageModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
</div>
<div class="modal-body">
<p><strong>Are you sure you want to create a global apply lock? It will disable applies globally</strong></p>
<input class="button-primary" id="applyLockYes" type="submit" value="Yes">
<input type="button" class="cancel" value="Cancel">
</div>
</div>
</div>
<div id="applyUnlockMessageModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
</div>
<div class="modal-body">
<p><strong>Are you sure you want to release global apply lock?</strong></p>
<input class="button-primary" id="applyUnlockYes" type="submit" value="Yes">
<input type="button" class="cancel" value="Cancel">
</div>
</div>
</div>
</div>
<footer>
{{ .AtlantisVersion }}
</footer>
<script>

function applyLockModalSetup(lockOrUnlock) {
// Get the modal
switch( lockOrUnlock ) {
case "lock":
var modal = $("#applyLockMessageModal");

var btn = $("#applyLockPrompt");

$("#applyLockYes").click(function() {
$.ajax({
url: '{{ .CleanedBasePath }}/apply/lock',
type: 'POST',
success: function(result) {
window.location.replace("{{ .CleanedBasePath }}/");
}
});
});

break;
case "unlock":
var modal = $("#applyUnlockMessageModal");

var btn = $("#applyUnlockPrompt");
var btnApplyUnlock =

$("#applyUnlockYes").click(function() {
$.ajax({
url: '{{ .CleanedBasePath }}/apply/unlock',
type: 'DELETE',
success: function(result) {
window.location.replace("{{ .CleanedBasePath }}/");
}
});
});

break;
default:
throw("unsupported command " + lockOrUnlock)
}

return [modal, btn];
}

{{ if .ApplyLock.Locked }}
var [modal, btn] = applyLockModalSetup("unlock");
{{ else }}
var [modal, btn] = applyLockModalSetup("lock");
{{ end }}

// Get the <span> element that closes the modal
// using document.getElementsByClassName since jquery $("close") doesn't seem to work for btn click events
var span = document.getElementsByClassName("close")[0];
var cancelBtn = document.getElementsByClassName("cancel")[0];

// When the user clicks the button, open the modal
btn.click(function() {
modal.css("display", "block");
});

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.css("display", "none");
}
cancelBtn.onclick = function() {
modal.css("display", "none");
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.css("display", "none");
}
}
</script>
</body>
</html>
Loading

0 comments on commit f0312e3

Please sign in to comment.