Add a service status indicator to the footer and add a notification bar for any incidents

static/css/directives/ui/quay-service-status.css

@@ -0,0 +1,29 @@
+.quay-service-status-indicator {
+  display: inline-block;
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+  background: #eee;
+  vertical-align: middle
+}
+
+.quay-service-status-description {
+  vertical-align: middle;
+}
+
+.quay-service-status-indicator.none {
+  background: #2fcc66;
+}
+
+.quay-service-status-indicator.minor {
+  background: #f1c40f;
+}
+
+.quay-service-status-indicator.major {
+  background: #e67e22;
+}
+
+.quay-service-status-indicator.critical {
+  background: #e74c3c;
+}

static/css/quay.css

@@ -23,6 +23,47 @@
   }
 }
 
+.announcement a {
+  color: lightblue;
+}
+
+.announcement {
+  position: absolute;
+  z-index: 9;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+
+  display: block;
+  background: rgba(8, 61, 95, 0.6);
+  min-height: 45px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 45px;
+  color: white;
+}
+
+.announcement.inline {
+  position: relative;
+}
+
+.announcement .spacer {
+  display: inline-block;
+  width: 45px;
+}
+
+.announcement img {
+  height: 45px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.announcement .plus {
+  display: inline-block;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
 .scrollable-menu {
   max-height: 400px;
   overflow: auto;
@@ -1516,38 +1557,6 @@ i.toggle-icon:hover {
   margin-top: 20px;
 }
 
-.landing .announcement {
-  position: absolute;
-  z-index: 9;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-
-  display: block;
-  background: rgba(8, 61, 95, 0.6);
-  min-height: 45px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 45px;
-}
-
-.landing .announcement .spacer {
-  display: inline-block;
-  width: 45px;
-}
-
-.landing .announcement img {
-  height: 45px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-.landing .announcement .plus {
-  display: inline-block;
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
 .landing {
   color: white;
 

static/directives/quay-service-status-bar.html

@@ -0,0 +1,7 @@
+<div class="announcement inline" ng-show="indicator != 'none' && indicator != 'loading'">
+  <div ng-repeat="incident in incidents">
+      <span class="quay-service-status-indicator" ng-class="indicator"
+        ng-if="indicator != 'loading'"></span>
+        <a ng-href="{{ incident.shortlink }}" class="quay-service-status-description">{{ incident.name }}</a>
+  </div>
+</div>

static/directives/quay-service-status.html

@@ -0,0 +1,6 @@
+<span class="quay-service-status-element">
+  <span class="quay-service-status-indicator" ng-class="indicator"
+        ng-if="indicator != 'loading'"></span>
+  <span class="cor-loader-inline" ng-if="indicator == 'loading'"></span>
+  <a href="http://status.quay.io" class="quay-service-status-description">{{ description }}</a>
+</span>

static/js/directives/ui/quay-service-status-bar.js

@@ -0,0 +1,22 @@
+/**
+ * An element which displays the current status of the service as an announcement bar.
+ */
+angular.module('quay').directive('quayServiceStatusBar', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/quay-service-status-bar.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {},
+    controller: function($scope, $element, StatusService) {
+      $scope.indicator = 'loading';
+
+      StatusService.getStatus(function(data) {
+        $scope.indicator = data['status']['indicator'];
+        $scope.incidents = data['incidents'];
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/quay-service-status.js

@@ -0,0 +1,24 @@
+/**
+ * An element which displays the current status of the service.
+ */
+angular.module('quay').directive('quayServiceStatus', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/quay-service-status.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {},
+    controller: function($scope, $element, StatusService) {
+      $scope.indicator = 'loading';
+      $scope.description = '';
+
+      StatusService.getStatus(function(data) {
+        $scope.indicator = data['status']['indicator'];
+        $scope.incidents = data['incidents'];
+        $scope.description = data['status']['description'];
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/services/status-service.js

@@ -0,0 +1,40 @@
+/**
+ * Helper service for retrieving the statuspage status of the quay service.
+ */
+angular.module('quay').factory('StatusService', ['Features', function(Features) {
+  if (!Features.BILLING) {
+    return;
+  }
+
+  var STATUSPAGE_PAGE_ID = '8szqd6w4s277';
+  var STATUSPAGE_SRC = 'https://statuspage-production.s3.amazonaws.com/se-v2.js';
+  var statusPageHandler = null;
+  var statusPageData = null;
+  var callbacks = [];
+
+  var handleGotData = function(data) {
+    if (!data) { return; }
+    statusPageData = data;
+
+    for (var i = 0; i < callbacks.length; ++i) {
+      callbacks[i](data);
+    }
+
+    callbacks = [];
+  };
+
+  $.getScript(STATUSPAGE_SRC, function(){
+    statusPageHandler = new StatusPage.page({ page: STATUSPAGE_PAGE_ID });
+    statusPageHandler.summary({
+      success : handleGotData
+    });
+  });
+
+  var statusService = {};
+  statusService.getStatus = function(callback) {
+    callbacks.push(callback);
+    handleGotData(statusPageData);
+  };
+
+  return statusService;
+}]);

static/partials/landing-normal.html

@@ -1,15 +1,4 @@
 <div class="jumbotron landing">
-  <div class="announcement">
-    <span class="hidden-xs-inline">
-      <img src="/static/img/white_horizontal.png" style="height: 40px">
-      <span class="plus">+</span>
-      <img src="/static/img/coreos-wordmark-horiz-white.svg">
-    </span>
-
-    <span class="spacer"></span>
-    Quay.io is now part of CoreOS! <a href="https://coreos.com/blog/CoreOS-enterprise-docker-registry/" target="_blank">Read the blog post.</a>
-  </div>
-
   <div class="landing-background" ng-class="user.anonymous ? 'landing': 'signedin'"></div>
   <div class="landing-filter" ng-class="user.anonymous ? 'landing': 'signedin'"></div>
   <div class="landing-content">

templates/base.html

@@ -96,6 +96,7 @@ mixpanel.init("{{ mixpanel_key }}", { track_pageview : false, debug: {{ is_debug
   <body ng-class="pageClass + ' ' + (user.anonymous ? 'anon' : 'signedin')" class="co-img-bg-network">
     <div id="co-l-footer-wrapper">
       <nav class="navbar navbar-default header-bar co-m-navbar co-fx-box-shadow" role="navigation"></nav>
+      <div class="quay-service-status-bar" quay-require="['BILLING']"></div>
       <div id="padding-container">
         <div id="co-l-view-container">
           <div ng-class="newLayout ? '' : 'main-panel co-fx-box-shadow-heavy'">
@@ -118,7 +119,9 @@ mixpanel.init("{{ mixpanel_key }}", { track_pageview : false, debug: {{ is_debug
           <li quay-require="['BILLING']"><a href="/security/" target="_self">Security</a></li>
           <li quay-require="['BILLING']"><a href="/about/" target="_self">About</a></li>
           <li><b><a href="{{ contact_href or '/contact/' }}" target="_self">Contact</a></b></li>
-          <li quay-require="['BILLING']"><b><a href="http://status.quay.io" target="_self">Service Status</a></b></li>
+          <li quay-require="['BILLING']">
+            <span class="quay-service-status"></span>
+          </li>
         </ul>
       </div>
       <div class="col-md-4">