Make StatusPage issues more visible

[dstufft]

Currently when statuspage is having a problem, we just display that in a very muted way in the footer of the page. Combine this with the fact we will serve cached content or stale cached content if the backend is unhealthy, means that people can get a degraded experience where some parts of the site are "working" (because they're cached) and some parts are not (because they cant' be cached, or we've been down too long).

Ideally I think we'd display a big red warning banner at the top of the page whenever we have a status incident (perhaps different colors for downtime vs other status? IDK). It would have to all be done in javascript because at the point we'd be displaying it, we can't rely on anything from the backend server still existing.

[ewdurbin]

JS bits can be easily lifted from https://github.com/pypa/warehouse/blob/master/warehouse/static/html/mirror.html

[brainwane]

@aalmazan we'd love your help on this, if you have time.

[aalmazan]

What sort of information should be in the banner (maybe notification?) when its status isn't normal? In the mirror page mentioned, we can get a list of incidents and scheduled maintenance windows.

[brainwane]

If the status is not normal, I think we should indicate:

• that the status is not normal
• if there's a component affected, mention the component
• here's a link for more info (default: status.python.org -- if there's an incident, permalink to that)
• the time the incident started, in UTC

[aalmazan]

Sorry, haven't had too much time this week, but I have a very rough implementation of this -- assuming the Statuspage API here is more or less correct. Screenshot below.

@brainwane I believe we can get a list of affected components/services with the summary API data, but I'm not sure if the shortlink (example: "shortlink": "http://stspg.dev:5000/Q0F") is what you're looking for in terms of a permalink. Note that the red exclamation icon refers to the events severity or impact as its used in statuspage.io.

Also, even though this may never happen (hopefully), below is something to give us an idea of what a bunch of incidents would look like. I have it currently limited to 10 in the screenshot.

[brainwane]

I removed the "help wanted" tag since you're helping, @aalmazan -- thanks! @NLH this could use your review.

[brainwane]

Whoops, I meant @nlhkabu. @yeraydiazdiaz and @ncoghlan I'd appreciate your input as well.

[ncoghlan]

The banner-based approach Allan suggests looks good to me (although the "max issues" limit could likely be even lower - perhaps only show at most three actual issues, and if there's more than that, replace the 3rd entry with "Multiple additional issues, see ... for details").