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

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;
+}]);