From 4653253df149f3d479a5831f00af2eb2c55f5f09 Mon Sep 17 00:00:00 2001
From: Alex Antonenko <aantonenko@hortonworks.com>
Date: Tue, 16 Jan 2018 15:26:51 +0300
Subject: [PATCH] AMBARI-22793. Notification popover layout issues

---
 ambari-web/app/styles/application.less        |  4 +++
 .../main/alerts/alert_notifications_popup.hbs | 30 +++++++++----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index fa1dd932369..e4189ee0613 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -2596,4 +2596,8 @@ a.abort-icon:hover {
   padding: 10px;
   max-height: 120px;
   overflow: scroll;
+}
+
+#notifications-dropdown.dropdown-menu .notifications-header .notifications-title {
+  line-height: 30px;
 }
\ No newline at end of file
diff --git a/ambari-web/app/templates/main/alerts/alert_notifications_popup.hbs b/ambari-web/app/templates/main/alerts/alert_notifications_popup.hbs
index a5f2bf2ce73..67e214ae345 100644
--- a/ambari-web/app/templates/main/alerts/alert_notifications_popup.hbs
+++ b/ambari-web/app/templates/main/alerts/alert_notifications_popup.hbs
@@ -18,25 +18,25 @@
 
 <div class="popup-arrow-up"></div>
 <div class="notifications-header col-sm-12">
-  <div class="notifications-title">{{t alerts.dropdown.dialog.title}} ({{view.alertsNumber}})</div>
+  <div class="notifications-title pull-left">{{t alerts.dropdown.dialog.title}} ({{view.alertsNumber}})</div>
+  {{#if view.isLoaded}}
+    <div class="state-filter pull-right">
+      <span>{{t common.show}}:&nbsp;</span>
+      <div class="btn-group">
+        {{view Ember.Select
+               contentBinding="view.categories"
+               optionValuePath="content.value"
+               optionLabelPath="content.label"
+               selectionBinding="view.selectedCategory"
+               classNames="filter-select form-control"
+        }}
+      </div>
+    </div>
+  {{/if}}
 </div>
 
 <div class="notifications-body col-sm-12">
   {{#if view.isLoaded}}
-    <div class="table-controls row">
-      <div class="state-filter pull-right">
-        <span>{{t common.show}}:&nbsp;</span>
-        <div class="btn-group">
-          {{view Ember.Select
-          contentBinding="view.categories"
-          optionValuePath="content.value"
-          optionLabelPath="content.label"
-          selectionBinding="view.selectedCategory"
-          classNames="filter-select form-control"
-          }}
-        </div>
-      </div>
-    </div>
     <table class="alerts-table table table-hover">
       <tbody>
         {{#if view.isAlertEmptyList}}