Skip to content

Instantly share code, notes, and snippets.

@khash

khash/app.js

Last active April 21, 2018 19:38
Show Gist options
  • Save khash/5344214 to your computer and use it in GitHub Desktop.
Save khash/5344214 to your computer and use it in GitHub Desktop.
Download ZIP
Cloud 66 Status Page Source Code
Raw
app.js
Handlebars.registerHelper('equal', function(lvalue, rvalue, options) {
if (arguments.length < 3)
throw new Error("Handlebars Helper equal needs 2 parameters");
if( lvalue!=rvalue ) {
return options.inverse(this);
} else {
return options.fn(this);
}
});
window.C66Status = (function( $ ){
var config = {
dataSource: 'status.json',
interval: 60000
};
var init = (function() {
getData();
})();
function getData() {
$.ajax({
cache: false,
url: config.dataSource
}).done (function ( response ) {
displayUpdateTime( response );
displayTitle( response );
displayStatus( response );
displayStream( response );
initPlugins();
poll();
}).fail (function ( jqXHR, textStatus, errorThrown ) {
console.log('Ooops - there was a problem with the XHR');
console.log( textStatus + ' ' + errorThrown );
displayDataError();
poll();
});
}
function poll() {
setTimeout(function(){
getData();
}, config.interval );
}
var displayDataError = function() {
var msg = '<div class="error big-error">Ah heck &mdash; there was issue retrieving status data, please check Twitter for updates</div>';
$('.is-loading').removeClass('is-loading').html( msg );
};
var initPlugins = function() {
$('time').each(function(i, e) {
var time = moment( $(e).attr('datetime') );
$(e).html('<span class="moment">' + time.format('MMM Do, h:mm a') + '</span>');
});
};
var displayUpdateTime = function( json ) {
var tmplSource = $('#update-time-template').html(),
tmpCompiled = Handlebars.compile( tmplSource );
$('.js-updated').html( tmpCompiled( json ) );
}
var displayTitle = function( json ) {
var tmplSource = $('#title-template').html(),
tmpCompiled = Handlebars.compile( tmplSource );
$('#js-lead').html( tmpCompiled( json ) );
}
var displayStatus = function( json ) {
var tmplSource = $('#status-template').html(),
tmpCompiled = Handlebars.compile( tmplSource );
$('#js-primary-status').html( tmpCompiled( json ) );
}
var displayStream = function( json ) {
var tmplSource = $('#stream-template').html(),
tmpCompiled = Handlebars.compile( tmplSource );
$('#js-status-stream').html( tmpCompiled( json ) );
$('footer[role=contentinfo]').addClass('divider');
}
})( jQuery );
Raw
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Status | Cloud 66</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header role="banner">
<img class="logo" src="assets/img/logo.svg" alt="">
<h1 class="page-title">Cloud 66 Status <span>&mdash;</span> <span class="js-updated">Updating</span></h1>
<p class="lead" id="js-lead">
</p>
</header>
<main role="main">
<article id="js-primary-status" class="primary-status divider">
<div class="is-loading"></div>
</article>
<article id="js-status-stream" class="status-stream divider">
</article>
</main>
<footer role="contentinfo" class="">
<small>
<nav class="hoziz-nav">
<a href="http://cloud66.com">Cloud 66</a><a href="mailto:[email protected]">Contact Support</a><a href="https://www.hipchat.com/gRc1MnlII">Live Chat</a><a href="https://twitter.com/cloud66">Twitter Updates</a>
</nav>
</small>
</footer>
<!-- == START TEMPLATES == -->
<script id="update-time-template" type="text/x-handlebars-template">
<time datetime="{{last_change}}">{{last_change}}</time>
</script>
<script id="title-template" type="text/x-handlebars-template">
{{#equal aggregate 'good' }}
<i class="em good">All Good</i> &mdash; Cloud 66 and related services are up &amp; running
{{/equal}}
{{#equal aggregate 'warning' }}
<i class="em warning">Warning</i> &mdash; We are investigating issues with some services
{{/equal}}
{{#equal aggregate 'error' }}
<i class="em error">Error</i> &mdash; We&#8217;re working to resolve a Major service incident
{{/equal}}
{{#equal aggregate 'maintenance' }}
<i class="em error">Maintenance</i> &mdash; Services are offline for Scheduled Maintenance
{{/equal}}
</script>
<script id="status-template" type="text/x-handlebars-template">
<ul class="primary-list primary-list-divider">
{{#if status}}
{{#each status}}
<li>
{{title}} <span class="pri-status {{status}}">{{status}}</span>
</li>
{{/each}}
{{/if}}
</ul>
</script>
<script id="stream-template" type="text/x-handlebars-template">
<ul class="status-stream-list">
{{#if history}}
{{#each history}}
<li>
<time class="update-time" datetime="{{last_change}}">{{last_change}}</time>
<div class="state">
<h4 class="resource-title {{status}}">{{title}}</h4>
<p class="resource-message">{{text}}</p>
</div>
</li>
{{/each}}
{{/if}}
</ul>
</script>
<!-- == END TEMPLATES == -->
<script src="assets/js/vendor/jquery-1.9.0.min.js"></script>
<script src="assets/js/vendor/handlebars.js"></script>
<script src="assets/js/vendor/moment.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
Raw
sample.json
{
"status": [
{
"id": "1",
"title": "Deployment Gateways",
"text": "All Systems are Working Normally",
"status": "good",
"last_change": "2013-03-31T08:43:14-07:00"
},
{
"id": "2",
"title": "Terminal Gateways",
"text": "All Systems Are Working Normally",
"status": "good",
"last_change": "2013-03-13T11:09:58+00:00"
},
{
"id": "3",
"title": "Web Console",
"text": "All Systems Are Working Normally",
"status": "good",
"last_change": "2013-03-13T11:10:05+00:00"
},
{
"id": "4",
"title": "API",
"text": "All Systems Are Working Normally",
"status": "good",
"last_change": "2013-03-13T11:10:14+00:00"
},
{
"id": "5",
"title": "Documentation Search",
"text": "All Systems Are Working Normally",
"status": "good",
"last_change": "2013-03-13T11:10:23+00:00"
}
],
"history": [
{
"id": "1",
"title": "Deployment Gateways",
"text": "All Systems are Working Normally",
"status": "good",
"last_change": "2013-03-31T08:43:14-07:00"
},
{
"id": "1",
"title": "Deployment Gateways",
"text": "All Systems are Working Normally",
"status": "good",
"last_change": "2013-03-15T10:15:57+00:00"
},
{
"id": "1",
"title": "Deployment Gateways",
"text": "We are investigating an issue with node.js deployment",
"status": "warning",
"last_change": "2013-03-15T09:36:15+00:00"
},
{
"id": "1",
"title": "Deployment Gateways",
"text": "All Systems Are Working Normally",
"status": "good",
"last_change": "2013-03-14T14:42:45+00:00"
},
{
"id": "1",
"title": "Deployment Gateways",
"text": "Github issues causing intermittent deployment problems",
"status": "warning",
"last_change": "2013-03-14T13:13:35+00:00"
}
],
"aggregate": "good",
"last_change": "2013-03-31T08:43:14-07:00"
}
Raw
status.rb
require 'highline/import'
require 'json'
require 'net/http'
require 'date'
require 'aws/s3'
# download the existing status page
json_string = Net::HTTP.get(URI "http://status.cloud66.com/status.json")
status = JSON.parse(json_string)
section = 0
title = ''
current_text = ''
old_section = {}
choose do |menu|
status['status'].each do |sec|
menu.choice(sec['title']) do
old_section = sec
section = sec['id']
title = sec['title']
current_text = sec['text']
end
end
menu.prompt = "Which section you want to update?"
end
states = ['good', 'warning', 'error','maintenance']
text = ask('Text') { |q| q.default = current_text }
selected_state = 'good'
choose do |menu|
menu.prompt = "What's the state for #{title}?"
states.each do |state|
menu.choice(state) do
selected_state = state
end
end
end
item =
{
'id' => section,
'title' => title,
'text' => text,
'status' => selected_state,
'last_change' => DateTime.now.to_s
}
new_status = []
# build the new file
status['status'].each do |s|
new_status << s if s['id'] != old_section['id']
new_status << item if s['id'] == old_section['id']
end
# find the new aggregate
aggregate_state = 'good'
aggregate_state = 'warning' if new_status.any? { |i| i['status'] == 'warning' }
aggregate_state = 'maintenance' if new_status.any? { |i| i['status'] == 'maintenance' }
aggregate_state = 'error' if new_status.any? { |i| i['status'] == 'error' }
# move the old state to history
old_history = status['history']
old_history << item
# sort it
sorted_history = old_history.sort_by { |x| DateTime.parse(x['last_change']) }.reverse!
last_change = new_status.max_by { |i| DateTime.parse(i['last_change']) }['last_change']
# merge it
final = { :status => new_status, :history => sorted_history.first(5), :aggregate => aggregate_state, :last_change => last_change }
# upload
AWS::S3::Base.establish_connection!(
:access_key_id => ENV['SEC_AWS_KEY'],
:secret_access_key => ENV['SEC_AWS_SECRET']
)
puts 'Uploading'
File.open("/tmp/status.json","w") do |f|
f.write(JSON.dump(final))
end
AWS::S3::S3Object.store(
'status.json',
File.open('/tmp/status.json'),
'status.cloud66.com',
:content_type => 'text/json',
:access => :public_read
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment