diff --git a/static/css/directives/ui/quay-service-status.css b/static/css/directives/ui/quay-service-status.css
new file mode 100644
index 000000000..367a7dede
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/static/css/quay.css b/static/css/quay.css
index 5f413f292..bc6e172e9 100644
--- a/static/css/quay.css
+++ b/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;
diff --git a/static/directives/quay-service-status-bar.html b/static/directives/quay-service-status-bar.html
new file mode 100644
index 000000000..ab5cda67b
--- /dev/null
+++ b/static/directives/quay-service-status-bar.html
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/static/directives/quay-service-status.html b/static/directives/quay-service-status.html
new file mode 100644
index 000000000..b7e77ef96
--- /dev/null
+++ b/static/directives/quay-service-status.html
@@ -0,0 +1,6 @@
+
+
+
+ {{ description }}
+
\ No newline at end of file
diff --git a/static/js/directives/ui/quay-service-status-bar.js b/static/js/directives/ui/quay-service-status-bar.js
new file mode 100644
index 000000000..1de75ddd7
--- /dev/null
+++ b/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;
+});
\ No newline at end of file
diff --git a/static/js/directives/ui/quay-service-status.js b/static/js/directives/ui/quay-service-status.js
new file mode 100644
index 000000000..e661190c1
--- /dev/null
+++ b/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;
+});
\ No newline at end of file
diff --git a/static/js/services/status-service.js b/static/js/services/status-service.js
new file mode 100644
index 000000000..8a9bba051
--- /dev/null
+++ b/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;
+}]);
\ No newline at end of file
diff --git a/static/partials/landing-normal.html b/static/partials/landing-normal.html
index bc52552f3..f8b969cd8 100644
--- a/static/partials/landing-normal.html
+++ b/static/partials/landing-normal.html
@@ -1,15 +1,4 @@
-
-
diff --git a/templates/base.html b/templates/base.html
index 9c87c5a0d..91dee7842 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -96,6 +96,7 @@ mixpanel.init("{{ mixpanel_key }}", { track_pageview : false, debug: {{ is_debug