Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Move Web Templates to External Files #4384

Merged
merged 8 commits into from
Apr 1, 2024
Merged

chore: Move Web Templates to External Files #4384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b8beadc
Rename templates package to web_templates
X-Guardian Mar 24, 2024
69b94ea
Move web templates to external files
X-Guardian Mar 24, 2024
a1e2fd4
Merge branch 'main' into web-templates-embed
X-Guardian Mar 28, 2024
429c0c7
Fix formatting
X-Guardian Mar 28, 2024
6e2065b
Merge branch 'main' into web-templates-embed
X-Guardian Mar 28, 2024
36e005f
Merge branch 'main' into web-templates-embed
X-Guardian Mar 28, 2024
c2bb871
Merge branch 'main' into web-templates-embed
X-Guardian Mar 30, 2024
3c373f1
Merge branch 'main' into web-templates-embed
X-Guardian Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions server/controllers/web_templates/templates/github-app.html.tmpl
View file
Open in desktop
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
Open in desktop
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
Loading