Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

responsive design, cleanup, use mustache for templates #1

Merged
merged 4 commits into from

2 participants

@shane-tomlinson
Collaborator

Yo!

I started hacking on the front end. I added mustache to do the templating, started to do some cleanup, started on responsive design so you can check the status on mobile phones (where I am guessing we'll check it regularly) and still have things look alright.

@lloyd lloyd merged commit 1d76e16 into mozilla:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
50 html/index.html
@@ -4,15 +4,16 @@
<title>Persona System Status</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="fonts/fonts_common.css" type="text/css">
- <script src="modernizr.min.js"></script>
- <script src="jquery-1.8.2.min.js"></script>
- <script src="moment.min.js"></script>
- <script src="status.js"></script>
+ <script src="js/modernizr.min.js"></script>
+ <script src="js/jquery-1.8.2.min.js"></script>
+ <script src="js/moment.min.js"></script>
+ <script src="js/status.js"></script>
+ <script src="js/mustache.js"></script>
</head>
<body>
- <header>
- <h1 class="subtitle">System Status</h1>
+ <header class="cf">
<div class="logo"></div>
+ <h1 class="subtitle">System Status</h1>
</header>
<div id="content">
<section id="right_now">
@@ -35,28 +36,27 @@ <h1 class="subtitle">System Status</h1>
</section>
<section id="history">
- <h2>Incident History</h2>
- <div class="events">
- </div>
+ <h2>Incident History</h2>
+ <ul class="events">
+ </ul>
</section>
</div>
- <div id="templates">
- <div class="event">
+
+ <script type="text/html" id="templateEvent">
+ <li class="event">
<div class="summary">
- <div class="when">
- </div>
- <div class="duration">
- </div>
- </div>
- <div class="updates">
- </div>
- </div>
- <div class="update">
- <div class="when">
+ <div class="when">{{when}}</div>
+ <div class="duration {{duration_class}}">{{duration}}</div>
</div>
- <div class="comment">
- </div>
- </div>
- </div>
+ <ul class="updates">
+ {{#updates}}
+ <li class="update">
+ <div class="when">{{when}}</div>
+ <div class="comment">{{comment}}</div>
+ </li>
+ {{/updates}}
+ </ul>
+ </li>
+ </script>
</body>
</html>
View
0  html/jquery-1.8.2.min.js → html/js/jquery-1.8.2.min.js
File renamed without changes
View
0  html/modernizr.min.js → html/js/modernizr.min.js
File renamed without changes
View
0  html/moment.min.js → html/js/moment.min.js
File renamed without changes
View
622 html/js/mustache.js
@@ -0,0 +1,622 @@
+/*!
+ * mustache.js - Logic-less {{mustache}} templates with JavaScript
+ * http://github.com/janl/mustache.js
+ */
+
+/*global define: false*/
+
+var Mustache;
+
+(function (exports) {
+ if (typeof module !== "undefined" && module.exports) {
+ module.exports = exports; // CommonJS
+ } else if (typeof define === "function") {
+ define(exports); // AMD
+ } else {
+ Mustache = exports; // <script>
+ }
+}((function () {
+
+ var exports = {};
+
+ exports.name = "mustache.js";
+ exports.version = "0.7.0";
+ exports.tags = ["{{", "}}"];
+
+ exports.Scanner = Scanner;
+ exports.Context = Context;
+ exports.Writer = Writer;
+
+ var whiteRe = /\s*/;
+ var spaceRe = /\s+/;
+ var nonSpaceRe = /\S/;
+ var eqRe = /\s*=/;
+ var curlyRe = /\s*\}/;
+ var tagRe = /#|\^|\/|>|\{|&|=|!/;
+
+ // Workaround for https://issues.apache.org/jira/browse/COUCHDB-577
+ // See https://github.com/janl/mustache.js/issues/189
+ function testRe(re, string) {
+ return RegExp.prototype.test.call(re, string);
+ }
+
+ function isWhitespace(string) {
+ return !testRe(nonSpaceRe, string);
+ }
+
+ var isArray = Array.isArray || function (obj) {
+ return Object.prototype.toString.call(obj) === "[object Array]";
+ };
+
+ function escapeRe(string) {
+ return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
+ }
+
+ var entityMap = {
+ "&": "&amp;",
+ "<": "&lt;",
+ ">": "&gt;",
+ '"': '&quot;',
+ "'": '&#39;',
+ "/": '&#x2F;'
+ };
+
+ function escapeHtml(string) {
+ return String(string).replace(/[&<>"'\/]/g, function (s) {
+ return entityMap[s];
+ });
+ }
+
+ // Export the escaping function so that the user may override it.
+ // See https://github.com/janl/mustache.js/issues/244
+ exports.escape = escapeHtml;
+
+ function Scanner(string) {
+ this.string = string;
+ this.tail = string;
+ this.pos = 0;
+ }
+
+ /**
+ * Returns `true` if the tail is empty (end of string).
+ */
+ Scanner.prototype.eos = function () {
+ return this.tail === "";
+ };
+
+ /**
+ * Tries to match the given regular expression at the current position.
+ * Returns the matched text if it can match, the empty string otherwise.
+ */
+ Scanner.prototype.scan = function (re) {
+ var match = this.tail.match(re);
+
+ if (match && match.index === 0) {
+ this.tail = this.tail.substring(match[0].length);
+ this.pos += match[0].length;
+ return match[0];
+ }
+
+ return "";
+ };
+
+ /**
+ * Skips all text until the given regular expression can be matched. Returns
+ * the skipped string, which is the entire tail if no match can be made.
+ */
+ Scanner.prototype.scanUntil = function (re) {
+ var match, pos = this.tail.search(re);
+
+ switch (pos) {
+ case -1:
+ match = this.tail;
+ this.pos += this.tail.length;
+ this.tail = "";
+ break;
+ case 0:
+ match = "";
+ break;
+ default:
+ match = this.tail.substring(0, pos);
+ this.tail = this.tail.substring(pos);
+ this.pos += pos;
+ }
+
+ return match;
+ };
+
+ function Context(view, parent) {
+ this.view = view;
+ this.parent = parent;
+ this.clearCache();
+ }
+
+ Context.make = function (view) {
+ return (view instanceof Context) ? view : new Context(view);
+ };
+
+ Context.prototype.clearCache = function () {
+ this._cache = {};
+ };
+
+ Context.prototype.push = function (view) {
+ return new Context(view, this);
+ };
+
+ Context.prototype.lookup = function (name) {
+ var value = this._cache[name];
+
+ if (!value) {
+ if (name === ".") {
+ value = this.view;
+ } else {
+ var context = this;
+
+ while (context) {
+ if (name.indexOf(".") > 0) {
+ var names = name.split("."), i = 0;
+
+ value = context.view;
+
+ while (value && i < names.length) {
+ value = value[names[i++]];
+ }
+ } else {
+ value = context.view[name];
+ }
+
+ if (value != null) {
+ break;
+ }
+
+ context = context.parent;
+ }
+ }
+
+ this._cache[name] = value;
+ }
+
+ if (typeof value === "function") {
+ value = value.call(this.view);
+ }
+
+ return value;
+ };
+
+ function Writer() {
+ this.clearCache();
+ }
+
+ Writer.prototype.clearCache = function () {
+ this._cache = {};
+ this._partialCache = {};
+ };
+
+ Writer.prototype.compile = function (template, tags) {
+ var fn = this._cache[template];
+
+ if (!fn) {
+ var tokens = exports.parse(template, tags);
+ fn = this._cache[template] = this.compileTokens(tokens, template);
+ }
+
+ return fn;
+ };
+
+ Writer.prototype.compilePartial = function (name, template, tags) {
+ var fn = this.compile(template, tags);
+ this._partialCache[name] = fn;
+ return fn;
+ };
+
+ Writer.prototype.compileTokens = function (tokens, template) {
+ var fn = compileTokens(tokens);
+ var self = this;
+
+ return function (view, partials) {
+ if (partials) {
+ if (typeof partials === "function") {
+ self._loadPartial = partials;
+ } else {
+ for (var name in partials) {
+ self.compilePartial(name, partials[name]);
+ }
+ }
+ }
+
+ return fn(self, Context.make(view), template);
+ };
+ };
+
+ Writer.prototype.render = function (template, view, partials) {
+ return this.compile(template)(view, partials);
+ };
+
+ Writer.prototype._section = function (name, context, text, callback) {
+ var value = context.lookup(name);
+
+ switch (typeof value) {
+ case "object":
+ if (isArray(value)) {
+ var buffer = "";
+
+ for (var i = 0, len = value.length; i < len; ++i) {
+ buffer += callback(this, context.push(value[i]));
+ }
+
+ return buffer;
+ }
+
+ return value ? callback(this, context.push(value)) : "";
+ case "function":
+ var self = this;
+ var scopedRender = function (template) {
+ return self.render(template, context);
+ };
+
+ return value.call(context.view, text, scopedRender) || "";
+ default:
+ if (value) {
+ return callback(this, context);
+ }
+ }
+
+ return "";
+ };
+
+ Writer.prototype._inverted = function (name, context, callback) {
+ var value = context.lookup(name);
+
+ // Use JavaScript's definition of falsy. Include empty arrays.
+ // See https://github.com/janl/mustache.js/issues/186
+ if (!value || (isArray(value) && value.length === 0)) {
+ return callback(this, context);
+ }
+
+ return "";
+ };
+
+ Writer.prototype._partial = function (name, context) {
+ if (!(name in this._partialCache) && this._loadPartial) {
+ this.compilePartial(name, this._loadPartial(name));
+ }
+
+ var fn = this._partialCache[name];
+
+ return fn ? fn(context) : "";
+ };
+
+ Writer.prototype._name = function (name, context) {
+ var value = context.lookup(name);
+
+ if (typeof value === "function") {
+ value = value.call(context.view);
+ }
+
+ return (value == null) ? "" : String(value);
+ };
+
+ Writer.prototype._escaped = function (name, context) {
+ return exports.escape(this._name(name, context));
+ };
+
+ /**
+ * Calculates the bounds of the section represented by the given `token` in
+ * the original template by drilling down into nested sections to find the
+ * last token that is part of that section. Returns an array of [start, end].
+ */
+ function sectionBounds(token) {
+ var start = token[3];
+ var end = start;
+
+ var tokens;
+ while ((tokens = token[4]) && tokens.length) {
+ token = tokens[tokens.length - 1];
+ end = token[3];
+ }
+
+ return [start, end];
+ }
+
+ /**
+ * Low-level function that compiles the given `tokens` into a function
+ * that accepts three arguments: a Writer, a Context, and the template.
+ */
+ function compileTokens(tokens) {
+ var subRenders = {};
+
+ function subRender(i, tokens, template) {
+ if (!subRenders[i]) {
+ var fn = compileTokens(tokens);
+ subRenders[i] = function (writer, context) {
+ return fn(writer, context, template);
+ };
+ }
+
+ return subRenders[i];
+ }
+
+ return function (writer, context, template) {
+ var buffer = "";
+ var token, sectionText;
+
+ for (var i = 0, len = tokens.length; i < len; ++i) {
+ token = tokens[i];
+
+ switch (token[0]) {
+ case "#":
+ sectionText = template.slice.apply(template, sectionBounds(token));
+ buffer += writer._section(token[1], context, sectionText, subRender(i, token[4], template));
+ break;
+ case "^":
+ buffer += writer._inverted(token[1], context, subRender(i, token[4], template));
+ break;
+ case ">":
+ buffer += writer._partial(token[1], context);
+ break;
+ case "&":
+ buffer += writer._name(token[1], context);
+ break;
+ case "name":
+ buffer += writer._escaped(token[1], context);
+ break;
+ case "text":
+ buffer += token[1];
+ break;
+ }
+ }
+
+ return buffer;
+ };
+ }
+
+ /**
+ * Forms the given array of `tokens` into a nested tree structure where
+ * tokens that represent a section have a fifth item: an array that contains
+ * all tokens in that section.
+ */
+ function nestTokens(tokens) {
+ var tree = [];
+ var collector = tree;
+ var sections = [];
+ var token, section;
+
+ for (var i = 0; i < tokens.length; ++i) {
+ token = tokens[i];
+
+ switch (token[0]) {
+ case "#":
+ case "^":
+ token[4] = [];
+ sections.push(token);
+ collector.push(token);
+ collector = token[4];
+ break;
+ case "/":
+ if (sections.length === 0) {
+ throw new Error("Unopened section: " + token[1]);
+ }
+
+ section = sections.pop();
+
+ if (section[1] !== token[1]) {
+ throw new Error("Unclosed section: " + section[1]);
+ }
+
+ if (sections.length > 0) {
+ collector = sections[sections.length - 1][4];
+ } else {
+ collector = tree;
+ }
+ break;
+ default:
+ collector.push(token);
+ }
+ }
+
+ // Make sure there were no open sections when we're done.
+ section = sections.pop();
+
+ if (section) {
+ throw new Error("Unclosed section: " + section[1]);
+ }
+
+ return tree;
+ }
+
+ /**
+ * Combines the values of consecutive text tokens in the given `tokens` array
+ * to a single token.
+ */
+ function squashTokens(tokens) {
+ var token, lastToken;
+
+ for (var i = 0; i < tokens.length; ++i) {
+ token = tokens[i];
+
+ if (lastToken && lastToken[0] === "text" && token[0] === "text") {
+ lastToken[1] += token[1];
+ lastToken[3] = token[3];
+ tokens.splice(i--, 1); // Remove this token from the array.
+ } else {
+ lastToken = token;
+ }
+ }
+ }
+
+ function escapeTags(tags) {
+ if (tags.length !== 2) {
+ throw new Error("Invalid tags: " + tags.join(" "));
+ }
+
+ return [
+ new RegExp(escapeRe(tags[0]) + "\\s*"),
+ new RegExp("\\s*" + escapeRe(tags[1]))
+ ];
+ }
+
+ /**
+ * Breaks up the given `template` string into a tree of token objects. If
+ * `tags` is given here it must be an array with two string values: the
+ * opening and closing tags used in the template (e.g. ["<%", "%>"]). Of
+ * course, the default is to use mustaches (i.e. Mustache.tags).
+ */
+ exports.parse = function (template, tags) {
+ tags = tags || exports.tags;
+
+ var tagRes = escapeTags(tags);
+ var scanner = new Scanner(template);
+
+ var tokens = [], // Buffer to hold the tokens
+ spaces = [], // Indices of whitespace tokens on the current line
+ hasTag = false, // Is there a {{tag}} on the current line?
+ nonSpace = false; // Is there a non-space char on the current line?
+
+ // Strips all whitespace tokens array for the current line
+ // if there was a {{#tag}} on it and otherwise only space.
+ function stripSpace() {
+ if (hasTag && !nonSpace) {
+ while (spaces.length) {
+ tokens.splice(spaces.pop(), 1);
+ }
+ } else {
+ spaces = [];
+ }
+
+ hasTag = false;
+ nonSpace = false;
+ }
+
+ var start, type, value, chr;
+
+ while (!scanner.eos()) {
+ start = scanner.pos;
+ value = scanner.scanUntil(tagRes[0]);
+
+ if (value) {
+ for (var i = 0, len = value.length; i < len; ++i) {
+ chr = value.charAt(i);
+
+ if (isWhitespace(chr)) {
+ spaces.push(tokens.length);
+ } else {
+ nonSpace = true;
+ }
+
+ tokens.push(["text", chr, start, start + 1]);
+ start += 1;
+
+ if (chr === "\n") {
+ stripSpace(); // Check for whitespace on the current line.
+ }
+ }
+ }
+
+ start = scanner.pos;
+
+ // Match the opening tag.
+ if (!scanner.scan(tagRes[0])) {
+ break;
+ }
+
+ hasTag = true;
+ type = scanner.scan(tagRe) || "name";
+
+ // Skip any whitespace between tag and value.
+ scanner.scan(whiteRe);
+
+ // Extract the tag value.
+ if (type === "=") {
+ value = scanner.scanUntil(eqRe);
+ scanner.scan(eqRe);
+ scanner.scanUntil(tagRes[1]);
+ } else if (type === "{") {
+ var closeRe = new RegExp("\\s*" + escapeRe("}" + tags[1]));
+ value = scanner.scanUntil(closeRe);
+ scanner.scan(curlyRe);
+ scanner.scanUntil(tagRes[1]);
+ type = "&";
+ } else {
+ value = scanner.scanUntil(tagRes[1]);
+ }
+
+ // Match the closing tag.
+ if (!scanner.scan(tagRes[1])) {
+ throw new Error("Unclosed tag at " + scanner.pos);
+ }
+
+ tokens.push([type, value, start, scanner.pos]);
+
+ if (type === "name" || type === "{" || type === "&") {
+ nonSpace = true;
+ }
+
+ // Set the tags for the next time around.
+ if (type === "=") {
+ tags = value.split(spaceRe);
+ tagRes = escapeTags(tags);
+ }
+ }
+
+ squashTokens(tokens);
+
+ return nestTokens(tokens);
+ };
+
+ // The high-level clearCache, compile, compilePartial, and render functions
+ // use this default writer.
+ var _writer = new Writer();
+
+ /**
+ * Clears all cached templates and partials in the default writer.
+ */
+ exports.clearCache = function () {
+ return _writer.clearCache();
+ };
+
+ /**
+ * Compiles the given `template` to a reusable function using the default
+ * writer.
+ */
+ exports.compile = function (template, tags) {
+ return _writer.compile(template, tags);
+ };
+
+ /**
+ * Compiles the partial with the given `name` and `template` to a reusable
+ * function using the default writer.
+ */
+ exports.compilePartial = function (name, template, tags) {
+ return _writer.compilePartial(name, template, tags);
+ };
+
+ /**
+ * Compiles the given array of tokens (the output of a parse) to a reusable
+ * function using the default writer.
+ */
+ exports.compileTokens = function (tokens, template) {
+ return _writer.compileTokens(tokens, template);
+ };
+
+ /**
+ * Renders the `template` with the given `view` and `partials` using the
+ * default writer.
+ */
+ exports.render = function (template, view, partials) {
+ return _writer.render(template, view, partials);
+ };
+
+ // This is here for backwards compatibility with 0.4.x.
+ exports.to_html = function (template, view, partials, send) {
+ var result = exports.render(template, view, partials);
+
+ if (typeof send === "function") {
+ send(result);
+ } else {
+ return result;
+ }
+ };
+
+ return exports;
+
+}())));
View
71 html/status.js → html/js/status.js
@@ -1,5 +1,11 @@
$(document).ready(function() {
$.get('data/1.json', function(events) {
+ renderHappiness(events);
+ renderEvents(events);
+ renderUptime(events);
+ });
+
+ function renderHappiness(events) {
var howLong;
if (events.length === 0 || events[0].duration != null) {
$("#right_now .happy").show();
@@ -9,50 +15,55 @@ $(document).ready(function() {
howLong = moment.unix(events[0].start);
}
$("#right_now .timespan").text(howLong.fromNow());
+ }
- var outagesThisMonth = 0;
-
- var secsInMonth = (30 * 24 * 60 * 60);
- var thisMonth = (new Date()).getTime() / 1000 - secsInMonth;
-
- for(var i=0; i < events.length; i++) {
- var ev = events[i];
- var domfrag = $("#templates .event").clone();
-
- // if this was less than 30 days ago, let's count the duration toward our uptime calculation
- if (ev.duration && ev.start > thisMonth) outagesThisMonth += ev.duration;
-
- // when did it start?
- domfrag.find(".when").text(moment.unix(ev.start).format('LL'));
+ function renderEvents(events) {
+ var template = $("#templateEvent").html();
+ for(var i=0, ev; ev = events[i]; i++) {
+ var viewData = {
+ duration: "a few seconds",
+ duration_class: "short",
+ when: moment.unix(ev.start).format('LL'),
+ updates: []
+ };
// how long did it last?
if (ev.duration) {
var c = 'long';
if (ev.duration < 60) c = "short";
else if (ev.duration < (60 * 10)) c = "medium";
- domfrag.find(".duration").addClass(c);
- domfrag.find(".duration").text(moment.duration(ev.duration * 1000).humanize());
- } else {
- domfrag.find(".duration").addClass("long");
+ viewData.duration_class = c;
+ viewData.duration = moment.duration(ev.duration * 1000).humanize();
}
// now append specific updates
- for (var j=0; j < ev.updates.length; j++) {
- var u = ev.updates[j];
+ for (var j=0, u; u = ev.updates[j]; j++) {
+ viewData.updates[j] = {
+ when: moment.unix(u.when).format('LT'),
+ comment: u.msg
+ };
+ }
- var up_domfrag = $("#templates .update").clone();
+ var domfrag = Mustache.render(template, viewData);
+ $("#history .events").append($(domfrag));
+ }
+ }
+
+
+ function renderUptime(events) {
+ var outagesThisMonth = 0;
+
+ var secsInMonth = (30 * 24 * 60 * 60);
+ var thisMonth = (new Date()).getTime() / 1000 - secsInMonth;
- // when was the comment made?
- up_domfrag.find(".when").text(moment.unix(u.when).format('LT'));
- // what was said?
- up_domfrag.find(".comment").text(u.msg);
-
- domfrag.find(".updates").append(up_domfrag);
- }
+ for(var i=0, ev; ev = events[i]; i++) {
+ // if this was less than 30 days ago, let's count the duration toward our uptime calculation
+ if (ev.duration && ev.start > thisMonth) outagesThisMonth += ev.duration;
- $("#history .events").append(domfrag);
}
var pct = (100.0 * (secsInMonth - outagesThisMonth) / secsInMonth).toFixed(3);
$(".happy .details .value").text(pct);
- });
+ }
+
+
});
View
70 html/style.css
@@ -12,9 +12,34 @@ body {
h1 {
font-size: 48px;
font-weight: 300;
+ line-height: 1.2em;
+}
+
+ul, li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.cf:after {
+ content: ".";
+ display: block;
+ clear: both;
+ visibility: hidden;
+ line-height: 0;
+ height: 0;
+}
+
+html[xmlns] .cf {
+ display: block;
+}
+
+* html .cf {
+ height: 1%;
}
header .logo {
+ float: left;
background: url("/i/persona-logo-wordmark.png") 0 0 no-repeat;
width: 205px;
height: 50px;
@@ -37,7 +62,7 @@ header {
}
#content {
-/* text-shadow: 1px 1px 0 rgba(255,255,255,0.5); */
+/* text-shadow: 1px 1px 0 rgba(255,255,255,0.5); */
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 5px;
@@ -52,13 +77,13 @@ section#right_now > div {
section#right_now .overview {
font-size: 24px;
-}
+}
section#right_now .details {
font-size: 16px;
padding-top: 5px;
-}
+}
#right_now .happy .status {
color: #494;
@@ -85,10 +110,6 @@ section#right_now .details {
}
-#templates {
- display: none;
-}
-
.event {
width: 600px;
margin: auto;
@@ -143,4 +164,37 @@ section#right_now .details {
.event .duration.short {
color: #9b9;
-}*/
+}*/
+
+@media screen and (max-width: 775px) {
+ body > *, .event {
+ width: auto;
+ }
+
+ .subtitle {
+ float: none;
+ text-align: center;
+ }
+
+ #content {
+ padding: 25px;
+ }
+
+ .event .summary {
+ float: none;
+ width: auto;
+ text-align: left;
+ }
+
+ .event .duration {
+ float: none;
+ padding: 0;
+ }
+
+ .event .updates {
+ margin: 0 0 30px 0;
+ padding: 10px 0 0 0;
+ border: 1px solid grey;
+ border-width: 1px 0 0 0;
+ }
+}
View
6 package.json
@@ -10,12 +10,14 @@
},
"private": true,
"scripts": {
- "test": "mocha scripts/tests"
+ "test": "mocha scripts/tests",
+ "start": "node scripts/run"
},
"devDependencies": {
"mocha": "1.5.0",
"should": "1.2.0",
"rss": "0.0.4",
- "express": "*"
+ "express": "*",
+ "moment": "1.7.0"
}
}
Something went wrong with that request. Please try again.