~launchpad-pqm/launchpad/devel : contents of lib/lp/app/templates/launchpad-databaseunavailable.pt at revision 14617

~launchpad-pqm/launchpad/devel : (revision 14617)

<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:tal="http://xml.zope.org/namespaces/tal"
  xml:lang="en"
  lang="en"
>
  <head>
    <title>Error: database unavailable</title>

    <style type="text/css">

html {
  background: #fff;
  margin: 0;
  padding: 0;
}

body {
  font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
  font-size: 0.75em;
  line-height: 1.3em;
  color: #000;
  margin: 0 0 40px 0;
}

a {
  color: #03a;
  text-decoration: none;
}

h1 {
  font-size: 3.7em;
}

h2,
h3,
h4 {
  font-weight: normal;
}

h2 {
  margin: 1.3em 0 1em 0;
  font-size: 1.8em;
  line-height: 26px;
}

h3, h4{
  margin: 0;
}

h4 {
  font-size: 1.4em;
  color: #333;
}

p.sub {
  color: #333;
}

p.large {
  font-size: 1.2em;
}

a img {
  vertical-align: middle;
}

.page-center-wrap {
  text-align: left;
}
.page-center {
  text-align: center;
  margin: 0px;
  margin: auto;
  width: 780px;
}
.page-center-content {
  text-align: left;
}

#header,
#status-feed,
#status-subscribe,
#footer {
  padding-left: 50px;
  padding-right: 50px;
}

#header {
  border: 1px solid #d7d3cf;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 15%;
}

#header .graphic {
  font-size: 110px;
  color: #646464;
  float: right;
  padding: 100px 80px 0 0;
}

#header .content {
  margin-right: 300px;
}

#header-shadow {
  height: 2px;
  background-color: #ebe9e7;
}

#status-feed {
  padding-top: 10px;
  width: 450px;
  display: none;
}

#status-feed h2 {
  border-bottom: 1px solid #d7d3cf;
  padding-bottom: 0.7em;
  margin-bottom: 0.3em;
}

#status-feed span.datetime {
  color: gray;
  font-size: smaller;
}

#status-feed div {
  text-align: center;
}

#status-subscribe img {
  margin-right: 3px;
}

#status-subscribe a:last-child {
  margin-left: 20px;
}

#footer {
  border-top: 1px solid #d7d3cf;
  margin-top: 40px;
  padding-top: 20px;
}

</style>

  <metal:load-lavascript use-macro="context/@@+base-layout-macros/load-javascript"
/>
  <script tal:define="
    revno modules/lp.app.versioninfo/revno | string:unknown;
    icingroot string:/+icing/rev${revno};
    yui string:${icingroot}/yui;"
  tal:content="
string:var lp_yui_root = '${yui}';
lp_status_flash_feed = '${view/flash_feed}';
lp_status_cors_feed = '${view/cors_feed}';
"
></script>
    <script id="load-status" type="text/javascript">
LPS.use('node', 'io-xdr', 'json-parse', 'datatype-date', function(Y) {
  var tag = function(name) {
    return Y.Node.create('<'+name+'/>');
  }
  var li = function(text, created_at) {
    var datetime = Y.DataType.Date.parse(created_at);
    return tag('li')
      .append(
        tag('span')
          .addClass('datetime')
          .set('text', Y.DataType.Date.format(datetime, {format: "%F %X %Z"})))
      .append(tag('br'))
      .append(
        tag('span')
          .addClass('text')
          .set('text', text));
  }
  Y.on('load', function(e){
    var destination = Y.one('#status-feed');
    // The feed block starts hidden so that browsers without JS do not
    // see it.  We have JS, so we can show it.
    destination.setStyle('display', 'block');
    var _handleSuccess = function(o, get_results) {
      var rawJSON = Y.JSON.parse(o.responseText);
      var oRSS = get_results(rawJSON);
      if (oRSS && oRSS.length) {
        destination.one('div').setStyle('display', 'none');
        var l = destination.one('ul');
        for (var i=0; i<Math.min(oRSS.length, 5); i++) {
          var entry = oRSS[i];
          l.append(li(entry.text, entry.created_at));
        }
      }
    };
    var handleTwitterSuccess = function(id, o, a){
      _handleSuccess(o, function(json) {return json.results;});
    };
    var handleIdenticaSuccess = function(id, o, a){
      _handleSuccess(o, function(json) {return json;});
    }
    var loadStatusWithFlash = function(){
      var obj = Y.io(
        lp_status_flash_feed,
        {
          method: 'GET',
          xdr: {use: 'flash'},
          on: {
            success: handleTwitterSuccess,
            failure: function (id, o, a){
              Y.log("ERROR " + id + " " + a, "info", "example");
              Y.one('#status-feed div').set(
                'text', '[Sorry, the feed could not load.]');
            }
          }
        });
    };
    var loadStatusWithCORS = function() {
      // CORS: http://www.w3.org/TR/cors/
      // Identi.ca supports it; Twitter does not at this time.
      var obj = Y.io(
        lp_status_cors_feed,
        {
          // This is important for Chromium.  Otherwise, the XHR will fail.
          headers: { 'X-Requested-With': 'disable'},
          on: {
            success: handleIdenticaSuccess,
            failure: function(id, o, a){
              Y.log("ERROR " + id + " " + a, "info", "example");
              Y.io.transport({id: 'flash', src: lp_yui_root + '/io/io.swf'});
              Y.on('io:xdrReady', loadStatusWithFlash);
            }
          }
        });
    };
    loadStatusWithCORS();
  }, window);
});
    </script>
</head>
<body>
  <div class="page-center-wrap">
    <div class="page-center">
      <div class="page-center-content">
        <div id="header">
          <div class="graphic">
            :(
          </div>
          <div class="content">
            <h1>Uh oh!</h1>
            <h4>Something has gone wrong. We're sorry!</h4>
            <p>If we are in the middle of an update, Launchpad will be
            back in less than five minutes.  Otherwise, we are working
            to fix the unexpected problems.</p>
            <p class="sub">Technically, this is a 503 error and has
              been caused by
              <span tal:replace="view/reason">our database
                being temporarily offline</span>.
            </p>
            <p><a href="javascript:window.location.reload()">Reload</a>
              this page or try again in a few minutes</p>
          </div>
        </div>
        <div id="header-shadow"></div>
        <div id="status-feed">
          <h2>Recent status updates</h2>
          <div><img src="/@@/spinner.gif" /></div>
          <ul></ul>
        </div>
        <div id="status-subscribe">
          <h2>Subscribe to updates</h2>
          <a href="http://identi.ca/launchpadstatus">
            <img src="/@@/identica_logo.png" alt="Identi.ca" />
            @launchpadstatus
          </a>
          on Identi.ca
          <a href="http://twitter.com/launchpadstatus">
            <img src="/@@/twitter_logo.png" alt="Twitter" />
            @launchpadstatus
          </a>
          on Twitter
        </div>
        <div id="footer">
          <a href="http://launchpad.net/">
            <img src="/@@/launchpad-logo-and-name-hierarchy.png"
            alt="Launchpad" />
          </a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

14091.1.1 by Gary Poster add back in databaseunavailable code	1	<html
	2	xmlns="http://www.w3.org/1999/xhtml"
	3	xmlns:tal="http://xml.zope.org/namespaces/tal"
	4	xml:lang="en"
	5	lang="en"
	6	>
13965.2.12 by Gary Poster add JS status updates	7	<head>
14091.1.1 by Gary Poster add back in databaseunavailable code	8	<title>Error: database unavailable</title>
13965.2.9 by Gary Poster clean up tests, mostly	9
14091.1.1 by Gary Poster add back in databaseunavailable code	10	<style type="text/css">
13965.2.9 by Gary Poster clean up tests, mostly	11
13965.2.12 by Gary Poster add JS status updates	12	html {
	13	background: #fff;
	14	margin: 0;
	15	padding: 0;
	16	}
	17
	18	body {
14448.2.1 by mbp at canonical Remove all references to UbuntuBeta fonts	19	font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
13965.2.12 by Gary Poster add JS status updates	20	font-size: 0.75em;
	21	line-height: 1.3em;
	22	color: #000;
	23	margin: 0 0 40px 0;
	24	}
	25
	26	a {
	27	color: #03a;
	28	text-decoration: none;
	29	}
	30
	31	h1 {
	32	font-size: 3.7em;
	33	}
	34
	35	h2,
	36	h3,
	37	h4 {
	38	font-weight: normal;
	39	}
	40
	41	h2 {
	42	margin: 1.3em 0 1em 0;
	43	font-size: 1.8em;
	44	line-height: 26px;
	45	}
	46
	47	h3, h4{
	48	margin: 0;
	49	}
	50
	51	h4 {
	52	font-size: 1.4em;
	53	color: #333;
	54	}
	55
	56	p.sub {
	57	color: #333;
	58	}
	59
	60	p.large {
	61	font-size: 1.2em;
	62	}
	63
	64	a img {
	65	vertical-align: middle;
	66	}
	67
	68	.page-center-wrap {
	69	text-align: left;
	70	}
	71	.page-center {
	72	text-align: center;
	73	margin: 0px;
	74	margin: auto;
	75	width: 780px;
	76	}
	77	.page-center-content {
	78	text-align: left;
	79	}
	80
	81	#header,
	82	#status-feed,
	83	#status-subscribe,
84	#footer {
85	padding-left: 50px;
86	padding-right: 50px;
87	}
88
89	#header {
90	border: 1px solid #d7d3cf;
91	padding-top: 20px;
92	padding-bottom: 20px;
93	margin-top: 15%;
94	}
95
96	#header .graphic {
97	font-size: 110px;
98	color: #646464;
99	float: right;
100	padding: 100px 80px 0 0;
101	}
102
103	#header .content {
104	margin-right: 300px;
105	}
106
107	#header-shadow {
108	height: 2px;
109	background-color: #ebe9e7;
110	}
111
112	#status-feed {
113	padding-top: 10px;
114	width: 450px;
13965.2.15 by Gary Poster hide JS-populated bits from JS browsers	115	display: none;
13965.2.12 by Gary Poster add JS status updates	116	}
	117
	118	#status-feed h2 {
	119	border-bottom: 1px solid #d7d3cf;
	120	padding-bottom: 0.7em;
	121	margin-bottom: 0.3em;
	122	}
	123
	124	#status-feed span.datetime {
	125	color: gray;
	126	font-size: smaller;
	127	}
	128
	129	#status-feed div {
	130	text-align: center;
	131	}
	132
	133	#status-subscribe img {
	134	margin-right: 3px;
	135	}
	136
	137	#status-subscribe a:last-child {
	138	margin-left: 20px;
	139	}
	140
	141	#footer {
	142	border-top: 1px solid #d7d3cf;
	143	margin-top: 40px;
	144	padding-top: 20px;
	145	}
	146
	147	</style>
	148
	149	<metal:load-lavascript use-macro="context/@@+base-layout-macros/load-javascript"
	150	/>
	151	<script tal:define="
	152	revno modules/lp.app.versioninfo/revno \| string:unknown;
	153	icingroot string:/+icing/rev${revno};
	154	yui string:${icingroot}/yui;"
	155	tal:content="
	156	string:var lp_yui_root = '${yui}';
	157	lp_status_flash_feed = '${view/flash_feed}';
	158	lp_status_cors_feed = '${view/cors_feed}';
	159	"
	160	></script>
	161	<script id="load-status" type="text/javascript">
	162	LPS.use('node', 'io-xdr', 'json-parse', 'datatype-date', function(Y) {
	163	var tag = function(name) {
	164	return Y.Node.create('<'+name+'/>');
	165	}
	166	var li = function(text, created_at) {
	167	var datetime = Y.DataType.Date.parse(created_at);
	168	return tag('li')
	169	.append(
	170	tag('span')
	171	.addClass('datetime')
	172	.set('text', Y.DataType.Date.format(datetime, {format: "%F %X %Z"})))
	173	.append(tag('br'))
	174	.append(
	175	tag('span')
	176	.addClass('text')
	177	.set('text', text));
	178	}
	179	Y.on('load', function(e){
180	var destination = Y.one('#status-feed');
13965.2.15 by Gary Poster hide JS-populated bits from JS browsers	181	// The feed block starts hidden so that browsers without JS do not
	182	// see it. We have JS, so we can show it.
	183	destination.setStyle('display', 'block');
13965.2.12 by Gary Poster add JS status updates	184	var _handleSuccess = function(o, get_results) {
	185	var rawJSON = Y.JSON.parse(o.responseText);
	186	var oRSS = get_results(rawJSON);
	187	if (oRSS && oRSS.length) {
	188	destination.one('div').setStyle('display', 'none');
	189	var l = destination.one('ul');
	190	for (var i=0; i<Math.min(oRSS.length, 5); i++) {
	191	var entry = oRSS[i];
	192	l.append(li(entry.text, entry.created_at));
14091.1.1 by Gary Poster add back in databaseunavailable code	193	}
13965.2.15 by Gary Poster hide JS-populated bits from JS browsers	194	}
13965.2.12 by Gary Poster add JS status updates	195	};
	196	var handleTwitterSuccess = function(id, o, a){
	197	_handleSuccess(o, function(json) {return json.results;});
	198	};
	199	var handleIdenticaSuccess = function(id, o, a){
	200	_handleSuccess(o, function(json) {return json;});
	201	}
	202	var loadStatusWithFlash = function(){
	203	var obj = Y.io(
	204	lp_status_flash_feed,
	205	{
	206	method: 'GET',
	207	xdr: {use: 'flash'},
	208	on: {
	209	success: handleTwitterSuccess,
	210	failure: function (id, o, a){
	211	Y.log("ERROR " + id + " " + a, "info", "example");
	212	Y.one('#status-feed div').set(
	213	'text', '[Sorry, the feed could not load.]');
	214	}
	215	}
	216	});
	217	};
	218	var loadStatusWithCORS = function() {
	219	// CORS: http://www.w3.org/TR/cors/
	220	// Identi.ca supports it; Twitter does not at this time.
	221	var obj = Y.io(
	222	lp_status_cors_feed,
	223	{
	224	// This is important for Chromium. Otherwise, the XHR will fail.
	225	headers: { 'X-Requested-With': 'disable'},
	226	on: {
	227	success: handleIdenticaSuccess,
	228	failure: function(id, o, a){
	229	Y.log("ERROR " + id + " " + a, "info", "example");
	230	Y.io.transport({id: 'flash', src: lp_yui_root + '/io/io.swf'});
	231	Y.on('io:xdrReady', loadStatusWithFlash);
	232	}
	233	}
	234	});
	235	};
	236	loadStatusWithCORS();
	237	}, window);
	238	});
	239	</script>
14091.1.1 by Gary Poster add back in databaseunavailable code	240	</head>
	241	<body>
13965.2.12 by Gary Poster add JS status updates	242	<div class="page-center-wrap">
	243	<div class="page-center">
	244	<div class="page-center-content">
	245	<div id="header">
	246	<div class="graphic">
	247	:(
	248	</div>
	249	<div class="content">
	250	<h1>Uh oh!</h1>
13965.2.13 by Gary Poster address wording per review	251	<h4>Something has gone wrong. We're sorry!</h4>
	252	<p>If we are in the middle of an update, Launchpad will be
	253	back in less than five minutes. Otherwise, we are working
	254	to fix the unexpected problems.</p>
13965.2.12 by Gary Poster add JS status updates	255	<p class="sub">Technically, this is a 503 error and has
	256	been caused by
	257	<span tal:replace="view/reason">our database
	258	being temporarily offline</span>.
	259	</p>
	260	<p><a href="javascript:window.location.reload()">Reload</a>
	261	this page or try again in a few minutes</p>
	262	</div>
	263	</div>
	264	<div id="header-shadow"></div>
	265	<div id="status-feed">
	266	<h2>Recent status updates</h2>
	267	<div><img src="/@@/spinner.gif" /></div>
	268	<ul></ul>
	269	</div>
	270	<div id="status-subscribe">
	271	<h2>Subscribe to updates</h2>
	272	<a href="http://identi.ca/launchpadstatus">
	273	<img src="/@@/identica_logo.png" alt="Identi.ca" />
	274	@launchpadstatus
	275	</a>
	276	on Identi.ca
	277	<a href="http://twitter.com/launchpadstatus">
	278	<img src="/@@/twitter_logo.png" alt="Twitter" />
	279	@launchpadstatus
	280	</a>
	281	on Twitter
	282	</div>
	283	<div id="footer">
	284	<a href="http://launchpad.net/">
	285	<img src="/@@/launchpad-logo-and-name-hierarchy.png"
	286	alt="Launchpad" />
	287	</a>
	288	</div>
	289	</div>
14091.1.1 by Gary Poster add back in databaseunavailable code	290	</div>
13965.2.12 by Gary Poster add JS status updates	291	</div>
13965.2.12 by Gary Poster add JS status updates	292	</body>
14091.1.1 by Gary Poster add back in databaseunavailable code	293	</html>