From e2c4de92f34a14c3d258ffed3c8236d430f6715b Mon Sep 17 00:00:00 2001
From: Johan Tibell <johan.tibell@gmail.com>
Date: Sun, 1 Jan 2012 16:49:06 -0800
Subject: [PATCH] Show a message box when the server can't be reached

---
 assets/cross-16-ns.png | Bin 0 -> 737 bytes
 assets/index.html      |   5 +++++
 assets/monitor.css     |  16 ++++++++++++++++
 assets/monitor.js      |   6 ++++++
 4 files changed, 27 insertions(+)
 create mode 100644 assets/cross-16-ns.png

diff --git a/assets/cross-16-ns.png b/assets/cross-16-ns.png
new file mode 100644
index 0000000000000000000000000000000000000000..8323db5357b9933eb9189adf7fd790a6e707de0e
GIT binary patch
literal 737
zcmV<70v`Q|P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkQlSxEDR5;6}l22<BQ53~bv`7c1Nov!kij7LuS`|d0Lh-pB=~h38
zZVT=My7x=?0S0Cxh&WI|snjOc*3xP<f>xWnnaRw%e_X`2y7q4F>iq7x=iZX4;(uxg
z05%^#07@kfKohDDRn)2oR0Ki{VIFj1PaHLc_@OY{8&96%2mq+4ry`L*d-J}Egeu~z
z2!sa^Wr4DIN*s+|ymDWdLviE-*az^VkxO%?I#I{Sr8y(Sp%D8@e@!NesuwPsiADpp
z=^4XW+B^UV$>Oi&m+|iUGAfla$}`uE5Qj|Uiz81QMb+t9Gd@0s&YM^G`g$qmELr>u
zKvsx?pRLt+ce91j$_OgwuNrX_vZJUvJ!8geqxjZ(hfZrX=F|q9SbGqn5Cf`KRf8Yx
zcEnjSU#p*nH+Rc`3B%k+r?rA_@7H2VlYrC2a+VxkfgJ&=P*tm<!S}U|$U|v<xO5a?
zhE03uwAwLeNkGX!EdA^dAdaA_fGAXzm4)T!E+k8#MFCL;*&cJ2fYSt=rQkn+Bl`ex
z1a{<c;iBq^5i<-zN(EBahgTxh#(YDz7gAz<N(Z2SR#0YNToI0)X_$KX7<M)`(b?LG
zCGYb@t!$>ICc*Bk*<M--xnC?O!5%o^)cRz*;n=CVIq4}rueR~!{d!E@Ujg;@7CyB;
zyx4rZf<}1=r)Fo2<On&(;UiIEo3+y?&1889+bgU1++K@aZ!d7&J?pxAmTY%ntF`fB
zeR&1vCXZw4+Bu^RO#mpVDxTlD=1Y-B_3_I5&d2Ro@;ne%SSj*BzyyecuZ(c2F>JQh
z`!NK;-ArvsRq^chG$il)oaar+`-@WKc3-Fj2m#7~GJFV{Dp&+y@8vph@IUn%HtYR`
Th%=%K00000NkvXXu0mjf$(&N}

literal 0
HcmV?d00001

diff --git a/assets/index.html b/assets/index.html
index 954962f..f04f7a6 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -28,7 +28,12 @@
     </div>
 
     <div class="container">
+      <div id="message-box" class="icon-alert span-24" style="display: none;">
+        Lost connection to server.
+      </div>
+
       <div id="plots" class="span-16">
+
         <div id="current-bytes-used-plot" class="plot-container">
           <h3>Current residency</h3>
           <div class="plot"></div>
diff --git a/assets/monitor.css b/assets/monitor.css
index 45dba6c..af783fb 100644
--- a/assets/monitor.css
+++ b/assets/monitor.css
@@ -46,6 +46,22 @@
     margin: 10px 0 0 10px;
 }
 
+/**
+ * Message box
+ *
+ * Taken from: http://woork.blogspot.com/2008/03/css-message-box-collection.html
+ */
+
+.icon-alert {
+    border: solid 1px #CB2026;
+    background: #F6CBCA url(cross-16-ns.png) 8px 6px no-repeat;
+    color: #D0282A;
+    padding: 4px 0;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
 /**
  * Plots
  */
diff --git a/assets/monitor.js b/assets/monitor.js
index dc9909a..bf4b5bf 100644
--- a/assets/monitor.js
+++ b/assets/monitor.js
@@ -109,14 +109,20 @@ $(document).ready(function () {
 
     function fetchData() {
         function onDataReceived(stats) {
+            $("#message-box").hide();
             for (var i = 0; i < listeners.length; i++) {
                 listeners[i](stats, stats.server_timestamp_millis);
             }
         }
 
+        function onError() {
+            $("#message-box").show();
+        }
+
         $.ajax({
             dataType: 'json',
             success: onDataReceived,
+            error: onError,
             cache: false
         });