Johnny Miller, Sun Oct 30 16:36:03 CST 2022
A Postman Scripts Collection like pre-request JavaScript script, tests script, Handlebars.js script.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>dev-test-application-list</title> | |
<!-- Bootstrap https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start --> | |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | |
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" | |
crossorigin="anonymous"></script> | |
<!-- Include Handlebars from a CDN. https://handlebarsjs.com/guide/#installation --> | |
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script> | |
<!-- jQuery https://www.jsdelivr.com/package/npm/jquery --> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" | |
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> | |
</head> | |
<body> | |
<div id="app"></div> | |
</body> | |
<script id="entry-template" type="text/x-handlebars-template"> | |
<div> | |
<h1>{{title}}</h1> | |
<div class="body"> | |
{{body}} | |
</div> | |
</div> | |
<div class="input-group"> | |
<div class="input-group-text">Filter by</div> | |
<input type="text" class="form-control" id="filterInput" placeholder="Name"> | |
<span class="input-group-btn"> | |
<button class="btn btn-primary" type="button" onclick="onClickConfirm()">Confirm</button> | |
</span> | |
</div> | |
<table class="table table-striped"> | |
<thead data-bs-toggle="collapse" href="#unhealthyApps" role="button" aria-expanded="true" | |
aria-controls="unhealthyApps"> | |
<tr bgcolor="#6E535B" style="color: white;"> | |
<th style="width: 10%">#</th> | |
<th style="width: 60%"> | |
<div class="spinner-grow text-danger" role="status"></div> | |
<span>⛈️ Unhealthy Service (total: {{unhealthyApps.length}})</span> | |
</th> | |
<th style="width: 10%">Status</th> | |
<th style="width: 20%">Updated At</th> | |
</tr> | |
</thead> | |
<tbody class="collapse" id="unhealthyApps"> | |
{{#each unhealthyApps}} | |
<tr> | |
<th scope="row">⛈️ {{index}}</th> | |
<td> | |
<button class="btn btn-lg btn-danger btn-sm" type="button" type="button" data-bs-toggle="popover" | |
data-bs-title="Docker Image" data-bs-content="{{image}}">{{name}} ({{pods}})</button> | |
</td> | |
<td><span class="badge text-bg-danger">{{status}}</span></td> | |
<td>{{update_at}}</td> | |
</tr> | |
{{/each}} | |
</tbody> | |
<thead data-bs-toggle="collapse" href="#healthyApps" role="button" aria-expanded="true" | |
aria-controls="healthyApps"> | |
<tr bgcolor="#49544A" style="color: white;"> | |
<th style="width: 10%">#</th> | |
<th style="width: 60%">☀️ Healthy Service (total: {{healthyApps.length}})</th> | |
<th style="width: 10%">Status</th> | |
<th style="width: 20%">Updated At</th> | |
</tr> | |
</thead> | |
<tbody class="collapse" id="healthyApps"> | |
{{#each healthyApps}} | |
<tr> | |
<th scope="row">☀️ {{index}}</th> | |
<td> | |
<button class="btn btn-lg btn-success btn-sm" type="button" type="button" data-bs-toggle="popover" | |
data-bs-title="Docker Image" data-bs-content="{{image}}">{{name}} ({{pods}})</button> | |
</td> | |
<td><span class="badge text-bg-success">{{status}}</span></td> | |
<td>{{update_at}}</td> | |
</tr> | |
{{/each}} | |
</tbody> | |
</table> | |
</script> | |
<script> | |
const context = { | |
title: "DEV TEST APPLICATION LIST", | |
body: "Boom status for applications.", | |
unhealthyApps: [ | |
{ | |
index: 1, | |
name: "Application 1", | |
image: "docker.io/application1", | |
pods: "0 / 1", | |
status: "NotReady", | |
update_at: new Date().toISOString() | |
}, | |
{ | |
index: 2, | |
name: "Application 2", | |
image: "docker.io/application2", | |
pods: "1 / 2", | |
status: "NotReady", | |
update_at: new Date().toISOString() | |
} | |
], | |
healthyApps: [ | |
{ | |
index: 1, | |
name: "Application 3", | |
image: "docker.io/application3", | |
pods: "1 / 1", | |
status: "Running", | |
update_at: new Date().toISOString() | |
}, | |
{ | |
index: 2, | |
name: "Application 4", | |
image: "docker.io/application4", | |
pods: "2 / 2", | |
status: "Running", | |
update_at: new Date().toISOString() | |
} | |
] | |
} | |
// Persistance of the context | |
localStorage.setItem("context", JSON.stringify(context)) | |
render(context) | |
function render (context) { | |
const entryTemplate = $("#entry-template") | |
console.info(`Got the length of template: ${entryTemplate.text().length}`) | |
console.info("Compiling template...") | |
const template = Handlebars.compile(entryTemplate.text()) | |
const renderedHtml = template(context) | |
console.info(`Finished compiling Handlebars template. About to replace rendered HTML DOM, rendered length: ${renderedHtml.length}`) | |
$("#app").html(renderedHtml) | |
afterRender() | |
} | |
/** | |
* Configure bootstrap | |
*/ | |
function afterRender () { | |
const popoverTriggerList = $('[data-bs-toggle="popover"]') | |
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) | |
} | |
function onClickConfirm () { | |
const contextStored = JSON.parse(localStorage.getItem("context")) | |
context.unhealthyApps = contextStored.unhealthyApps.filter(item => item.name.includes($("#filterInput").val())) | |
context.healthyApps = contextStored.healthyApps.filter(item => item.name.includes($("#filterInput").val())) | |
render(context) | |
} | |
</script> | |
<style> | |
</style> | |
</html> |
<!-- Bootstrap https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start --> | |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | |
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | |
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" | |
crossorigin="anonymous"></script> | |
<!-- Include Handlebars from a CDN. https://handlebarsjs.com/guide/#installation --> | |
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script> | |
<!-- jQuery https://www.jsdelivr.com/package/npm/jquery --> | |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" | |
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> |