Last active
April 21, 2018 19:38
-
-
Save khash/5344214 to your computer and use it in GitHub Desktop.
Cloud 66 Status Page Source Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 — 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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>—</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:support@cloud66.com">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> — Cloud 66 and related services are up & running | |
{{/equal}} | |
{{#equal aggregate 'warning' }} | |
<i class="em warning">Warning</i> — We are investigating issues with some services | |
{{/equal}} | |
{{#equal aggregate 'error' }} | |
<i class="em error">Error</i> — We’re working to resolve a Major service incident | |
{{/equal}} | |
{{#equal aggregate 'maintenance' }} | |
<i class="em error">Maintenance</i> — 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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