From ace6da5514d5f336e7acf5929a8dc19c563bd54a Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Tue, 24 Feb 2015 17:41:30 -0500 Subject: [PATCH] Add a service status indicator to the footer and add a notification bar for any incidents --- .../css/directives/ui/quay-service-status.css | 29 ++++++++ static/css/quay.css | 73 +++++++++++-------- .../directives/quay-service-status-bar.html | 7 ++ static/directives/quay-service-status.html | 6 ++ .../directives/ui/quay-service-status-bar.js | 22 ++++++ .../js/directives/ui/quay-service-status.js | 24 ++++++ static/js/services/status-service.js | 40 ++++++++++ static/partials/landing-normal.html | 11 --- templates/base.html | 5 +- 9 files changed, 173 insertions(+), 44 deletions(-) create mode 100644 static/css/directives/ui/quay-service-status.css create mode 100644 static/directives/quay-service-status-bar.html create mode 100644 static/directives/quay-service-status.html create mode 100644 static/js/directives/ui/quay-service-status-bar.js create mode 100644 static/js/directives/ui/quay-service-status.js create mode 100644 static/js/services/status-service.js 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 @@ +
+
+ + {{ incident.name }} +
+
\ 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 @@
-
- - - + - - - - - Quay.io is now part of CoreOS! Read the blog post. -
-
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