Skip to content

Instantly share code, notes, and snippets.

@jrichardsz

jrichardsz/status.html

Forked from binout/status.html
Created October 18, 2022 04:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jrichardsz/f4f2ec70e99b3f39acb70c3d09ba2c5b to your computer and use it in GitHub Desktop.
Save jrichardsz/f4f2ec70e99b3f39acb70c3d09ba2c5b to your computer and use it in GitHub Desktop.
Download ZIP
Status Page
Raw
status.html
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<h1 class="title">💚 Alan - Status</h1>
<section class="section">
<h1 class="title">🇫🇷</h1>
<div class="columns">
<div class="column" id="target-fr-web-staging">
</div>
<div class="column" id="target-fr-web-demo">
</div>
<div class="column" id="target-fr-web-prod">
</div>
</div>
<div class="columns">
<div class="column" id="target-fr-api-staging">
</div>
<div class="column" id="target-fr-api-demo">
</div>
<div class="column" id="target-fr-api-prod">
</div>
</div>
</section>
<section class="section">
<h1 class="title">🇧🇪</h1>
<div class="columns">
<div class="column" id="target-be-web-staging">
</div>
<div class="column" id="target-be-web-demo">
</div>
<div class="column" id="target-be-web-prod">
</div>
</div>
<div class="columns">
<div class="column" id="target-be-api-staging">
</div>
<div class="column" id="target-be-api-demo">
</div>
<div class="column" id="target-be-api-prod">
</div>
</div>
</section>
<section class="section">
<h1 class="title">🇪🇸</h1>
<div class="columns">
<div class="column" id="target-es-web-staging">
</div>
<div class="column" id="target-es-web-demo">
</div>
<div class="column" id="target-es-web-prod">
</div>
</div>
<div class="columns">
<div class="column" id="target-es-api-staging">
</div>
<div class="column" id="target-es-api-demo">
</div>
<div class="column" id="target-es-api-prod">
</div>
</div>
</section>
<script id="card-template" type="x-tmpl-mustache">
<div class="card">
<header class="card-header" style="background-color: {{statusColor}};">
<p class="card-header-title">
{{app}} - {{env}}
</p>
</header>
<div class="card-content">
<div class="content">
<code>
{{ping}}
</code>
</div>
<a target="_blank" href="https://app.datadoghq.eu/logs?query=service%3A{{app}}%20-source%3Aheroku%20host%3A{{app}}-{{env}}">Logs</a>
</div>
</div>
</script>
<script src="https://unpkg.com/mustache@latest"></script>
<script>
function renderCard(app, env, ping, statusColor, target) {
const cardTemplate = document.getElementById('card-template').innerHTML;
var rendered = Mustache.render(cardTemplate, { app, env, statusColor, ping });
console.log(rendered)
document.getElementById(target).innerHTML = rendered;
}
const config = [
{
country: 'fr',
apps: [
{
name: 'web',
envs: [
{
name: 'staging',
ping: 'https://acceptance.alan.com/ping'
},
{
name: 'demo',
ping: 'https://demo.alan.com/ping'
},
{
name: 'prod',
ping: 'https://alan.com/ping'
}
],
},
{
name: 'api',
envs: [
{
name: 'staging',
ping: 'https://api-acceptance.alan.com/ping/'
},
{
name: 'demo',
ping: 'https://api-demo.alan.com/ping/'
},
{
name: 'prod',
ping: 'https://api.alan.com/ping/'
}
]
}
]
},
{
country: 'be',
apps: [
{
name: 'web',
envs: [
{
name: 'staging',
ping: 'https://be-acceptance.alan.com/ping'
},
{
name: 'demo',
ping: 'https://be-demo.alan.com/ping'
},
{
name: 'prod',
ping: 'https://be.alan.com/ping'
}
],
},
{
name: 'api',
envs: [
{
name: 'staging',
ping: 'https://api-be-acceptance.alan.com/ping/'
},
{
name: 'demo',
ping: 'https://api-be-demo.alan.com/ping/'
},
{
name: 'prod',
ping: 'https://api-be.alan.com/ping/'
}
]
}
]
},
{
country: 'es',
apps: [
{
name: 'web',
envs: [
{
name: 'staging',
ping: 'https://es.acceptance.alan.com/ping'
},
{
name: 'demo',
ping: 'https://es.demo.alan.com/ping'
},
{
name: 'prod',
ping: 'https://es.alan.com/ping'
}
],
},
{
name: 'api',
envs: [
{
name: 'staging',
ping: 'https://api-es-acceptance.alan.com/ping/'
},
{
name: 'demo',
ping: 'https://api-es-demo.alan.com/ping/'
},
{
name: 'prod',
ping: 'https://api-es.alan.com/ping/'
}
]
}
]
}
]
for (entry of config) {
for (const app of entry.apps) {
for (const env of app.envs) {
const name = `${entry.country}-${app.name}`
const target = `target-${name}-${env.name}`
fetch(env.ping)
.then(response => response.text())
.then(json => renderCard(name, env.name, json, 'green', target))
.catch(e => renderCard(name, env.name, e, 'red', target))
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment