khash/app.js

## 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 );

## 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: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> &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>

## 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"
}

## 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
)
	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 );
	<!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>
	{
	"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"
	}
	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
	)