From 25f514a03d4a899da48e9b0d2d1c6cfc00f2ecf6 Mon Sep 17 00:00:00 2001
From: Alec Merdler <alec.merdler@coreos.com>
Date: Wed, 26 Jul 2017 11:24:12 -0400
Subject: [PATCH] fixed status bar not showing

---
 static/css/quay.css                                         | 6 ++++++
 static/directives/quay-service-status-bar.html              | 6 +++---
 .../structural/quay-require/quay-require.directive.ts       | 3 ++-
 templates/base.html                                         | 4 +++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 755e189bb..c0c42532c 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -48,6 +48,12 @@
   z-index: 2;
 }
 
+.announcement.inline .message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .announcement .spacer {
   display: inline-block;
   width: 45px;
diff --git a/static/directives/quay-service-status-bar.html b/static/directives/quay-service-status-bar.html
index 24e2cdef9..84c3e0671 100644
--- a/static/directives/quay-service-status-bar.html
+++ b/static/directives/quay-service-status-bar.html
@@ -1,12 +1,12 @@
 <div class="announcement inline"
      ng-show="indicator != 'loading' && (scheduled_maintenances.length || incidents.length)">
-  <div ng-repeat="incident in incidents">
+  <div ng-repeat="incident in incidents" class="message">
       <span class="quay-service-status-indicator" ng-class="indicator"
-        ng-if="indicator != 'loading'"></span>
+            ng-if="indicator != 'loading'"></span>
         <a ng-href="{{ incident.shortlink }}" class="quay-service-status-description">{{ incident.name }}</a>
   </div>
 
-  <div ng-repeat="scheduled in scheduled_maintenances">
+  <div ng-repeat="scheduled in scheduled_maintenances" class="message">
      <i class="fa fa-calendar" style="margin-right: 6px;"></i>
      <span ng-switch on="scheduled.status" style="vertical-align: middle">
        <span ng-switch-when="scheduled">
diff --git a/static/js/directives/structural/quay-require/quay-require.directive.ts b/static/js/directives/structural/quay-require/quay-require.directive.ts
index 4ac1add29..589b5831a 100644
--- a/static/js/directives/structural/quay-require/quay-require.directive.ts
+++ b/static/js/directives/structural/quay-require/quay-require.directive.ts
@@ -16,6 +16,7 @@ import { Directive, Inject, Input, AfterContentInit } from 'ng-metadata/core';
 export class QuayRequireDirective implements AfterContentInit {
 
   @Input('<quayRequire') public requiredFeatures: string[] = [];
+
   private ngIfDirective: ng.IDirective;
 
   constructor(@Inject('Features') private features: any,
@@ -27,7 +28,7 @@ export class QuayRequireDirective implements AfterContentInit {
   }
 
   public ngAfterContentInit(): void {
-    const attrs: {[name: string]: any} = {'ngIf': () => this.features.matchesFeatures(this.requiredFeatures)};
+    const attrs: {[name: string]: () => boolean} = {'ngIf': () => this.features.matchesFeatures(this.requiredFeatures)};
 
     (<Function>this.ngIfDirective.link).apply(this.ngIfDirective,
                                               [
diff --git a/templates/base.html b/templates/base.html
index 0dfa13c80..213725d92 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -154,7 +154,9 @@ mixpanel.init("{{ mixpanel_key }}", { track_pageview : false, debug: {{ is_debug
       {% endif %}
 
       <div class="quay-message-bar"></div>
-      <div class="quay-service-status-bar" quay-require="['BILLING']"></div>
+      <div quay-require="['BILLING']">
+        <div class="quay-service-status-bar"></div>
+      </div>
 
       <div id="padding-container">
         <div id="co-l-view-container">