AMBARI-5565. New dashboard UI tweaks.(xiwang)

ambari-web/app/messages.js

@@ -1647,7 +1647,7 @@ Em.I18n.translations = {
   'dashboard.clusterMetrics.memory':'Memory Usage',
   'dashboard.clusterMetrics.network':'Network Usage',
 
-  'dashboard.widgets.title': 'Cluster Status and Metrics',
+  'dashboard.widgets.title': 'Metrics',
   'dashboard.heatmaps.title': 'Heatmaps',
   'dashboard.button.switch': 'Switch to classic dashboard',
   'dashboard.button.switchShort': 'Switch',

ambari-web/app/routes/main.js

@@ -94,7 +94,7 @@ module.exports = Em.Route.extend({
       router.transitionTo(event.context);
     },
     widgets: Em.Route.extend({
-      route: '/clusterWidgets',
+      route: '/metrics',
       connectOutlets: function (router, context) {
         router.set('mainDashboardController.selectedCategory', 'widgets');
         router.get('mainDashboardController').connectOutlet('mainDashboardWidgets');

ambari-web/app/styles/application.less

@@ -123,9 +123,6 @@ footer {
 
   .navbar.navbar-static-top {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    -moz-box-shadow: 0 1 5px #888;
-    -webkit-box-shadow: 0 1px 5px #888;
-    box-shadow: 0 1px 5px #888;
     .navbar-inner {
       background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
       background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to));
@@ -1235,7 +1232,10 @@ a:focus {
 
 /**********start styles for dropdown-menu, accordion-group ****************/
 .dropdown-menu,
+.dropdown-submenu > .dropdown-menu,
 .nav-pills .dropdown-menu,
+.nav-pills > li > a,
+.nav-tabs > li > a,
 .accordion-group {
   border-radius: 0px;
   -webkit-border-radius: 0px;
@@ -2688,30 +2688,31 @@ table.graphs {
   width: 100%;
 }
 
-/*Dashboard Widgets Start*/
+/*Dashboard Widgets/heatmaps Start*/
 #dashboard-widgets-container{
   > ul.nav.nav-tabs {
     margin-bottom: 10px;
   }
-  h4{
-    line-height: 30px;
-    margin-bottom: 0px;
-    margin-top: 0px;
+  > ul.nav.nav-tabs > li.active > a, .nav-pills > li.active > a {
+    padding-right: 18px;
   }
-  .add-widget-button{
-    margin-top: 0px;
-    margin-left: -22px;
-    width: 70px;
-    .add-button{
-      color: #666666;
+  #widgets-options-menu {
+    position: relative;
+    top: -39px;
+    left: 62px;
+    width: 15px;
+    .dropdown-submenu {
+      &> a:after {
+        border-left-color: #333;
+      }
     }
-    .filter-components{
-      overflow: auto;
+    .add-widgets-text .dropdown-menu {
+      top: 0;
+      left: 99%;
+      margin-top: -6px;
+      margin-left: -1px;
       max-height: 375px;
       width: 210px;
-      color: #333333;
-      right: 0;
-      left: auto;
       li {
         display: block;
         padding: 3px 0 3px 5px;
@@ -2733,54 +2734,35 @@ table.graphs {
         }
       }
     }
-  }
-  .more-options-button{
-    margin-top: 0px;
-    margin-left: 0px;
-    margin-right: 6px;
-    padding: 1px;
-    width: 70px;
-    .icon-cog{
-      color: #666666;
-      font-size: 18px;
-      position: relative;
-      left: 3px;
-      top: 2px;
-    }
-    .caret{
-      position: relative;
-      left: 5px;
-      top: 2px;
+    .add-widgets-text:hover .dropdown-menu {
+        display: block;
     }
   }
-  .right-align-dropdown{
-    right: 0;
-    left: auto;
-    padding-top: 9px;
-    padding-bottom: 9px;
-    margin-right: 4px;
+  .dashboard-widgets-box {
+    position: relative;
+    top: -20px;
+  }
+  h4{
+    line-height: 30px;
+    margin-bottom: 0px;
+    margin-top: 0px;
   }
-
   #dashboard-widgets{
     .caption {
       height: 25px;
     }
-    .thumbnails {
-      margin-left: 8px;
-    }
     .row-fluid .span2p4 {
-      width: 19.34%;
-      *width: 19.34%;
+      width: 19.60%;
+      *width: 19.60%;
     }
     .row-fluid .span4p8 {
-      width: 39.1%;
-      *width: 39.1%;
+      width: 39.55%;
+      *width: 39.55%;
     }
-
     .thumbnails  > div {
       margin-left: 0px;
       margin-right: 3px;
-      margin-top: 5px;
+      margin-top: 0px;
       margin-bottom: 7px;
       height: 163px;
     }
@@ -2910,7 +2892,7 @@ table.graphs {
         z-index: 5;
       }
       .uptime-content{
-        top: -136px;
+        top: -116px;
       }
       .uptime-content-isNA{
         top: -95px;
@@ -4115,13 +4097,13 @@ ul.filter {
 }
 /*start charts rack*/
 .rack {
-  width: 98%;
+  width: 99%;
   display: inline-block;
   vertical-align: top;
   border: 1px solid #D4D4D4;
-  border-radius: 5px;
   margin-right: 4px;
   margin-bottom: 10px;
+  margin-top:5px;
 
   .rackHeader {
     background-color: #F7F7F7;
@@ -4258,7 +4240,6 @@ ul.filter {
 
 /*Start Heatmap*/
 .heatmap {
-  padding: 5px;
   #heatmap-metric-title {
     margin-left: 23px;
   }
@@ -4289,10 +4270,11 @@ ul.filter {
   }
   .legend-column {
     min-width: 150px;
+    margin-right: 10px;
   }
   .heatmap-content {
     float: right;
-    width: 80%;
+    width: 78%;
   }
   .heatmap_host_details {
     font-size: 12px;
@@ -5769,24 +5751,17 @@ i.icon-asterisks {
 
 #dashboard-widgets-container{
 
-  .add-widget-button{
-    margin-left: 9px; //3px for 3 buttons view
-  }
-  .more-options-button{
-    margin-right: 2px;
-  }
-
   #dashboard-widgets{
     .row-fluid .span2p4 {
-      width: 19.08%;
-      *width: 19.08%;
+      width: 19.47%;
+      *width: 19.47%;
     }
     .row-fluid .span4p8 {
-      width: 39%;
-      *width: 39%;
+      width: 39.45%;
+      *width: 39.45%;
     }
     .thumbnails  > div {
-      margin-right: 8px;
+      margin-right: 5px;
     }
     .thumbnail .caption {
       font-size: 14px;

ambari-web/app/templates/main/charts/heatmap.hbs

@@ -16,7 +16,7 @@
 * limitations under the License.
 }}
 
-<div class="heatmap box">
+<div class="heatmap">
 
   <div class="container-fluid">
 	  <div class="row-fluid">

ambari-web/app/templates/main/dashboard.hbs

@@ -25,10 +25,11 @@
       <ul class="nav nav-tabs">
         {{#each category in view.categories}}
           {{#view view.NavItemView itemBinding="category.name" }}
-              <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a>
+            <a href="#" {{action "goToDashboardView" category.url}} >{{category.label}}</a>
           {{/view}}
         {{/each}}
       </ul>
+
       <!--show widgets or heapmaps in the content-->
       {{outlet}}
     </div>

ambari-web/app/templates/main/dashboard/plus_button_filter.hbs

@@ -16,12 +16,9 @@
 * limitations under the License.
 }}
 
-<button class="btn single-btn-group add-button" {{action "clickFilterButton" target="view"}} >
-    <i class="icon-plus"></i> <span style="font-weight: bold">{{t common.add}}</span>
-</button>
-<ul class="dropdown-menu filter-components" >
+<ul class="dropdown-menu" >
   {{#if view.hiddenWidgets.length}}
-    <li>
+    <li class="add-widgets-dropdown-list">
       <ul>
         {{#each widget in view.hiddenWidgets}}
           <li>
@@ -45,6 +42,5 @@
     <li>
       <button class="btn" {{action "closeFilter" target="view"}}>{{t common.cancel}}</button>
     </li>
-
   {{/if}}
 </ul>

ambari-web/app/templates/main/dashboard/widgets.hbs

@@ -16,43 +16,43 @@
 * limitations under the License.
 }}
 {{#if view.isDataLoaded}}
-  <div class="box">
-    <div class="box-header">
-      <div class="row-fluid">
-        <h4 class="span10"></h4>
-        <a class="add-widget-button span1">{{view view.plusButtonFilterView}}</a>
-        <div class="btn-group">
-          <button class="btn dropdown-toggle span1 more-options-button"  data-toggle="dropdown">
-            <i class="icon-cog"></i> &nbsp;
-            <span class= "caret"></span>
-          </button>
-            <ul class="dropdown-menu right-align-dropdown">
-              <li>
-                <a href="#" {{action "resetAllWidgets" target="view"}}>
-                    <i class="icon-refresh"></i>
-                  {{t dashboard.button.reset}}
-                </a>
-              </li>
-              <li>
-                <a target="_blank" {{bindAttr href="view.gangliaUrl"}}>
-                    <i class="icon-share"></i>
-                  {{t dashboard.button.gangliaLink}}
-                </a>
-              </li>
-            </ul>
-        </div>
+
+  <div id="widgets-options-menu" class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+    <ul class="dropdown-menu">
+      <li class="dropdown-submenu add-widgets-text">
+        <a href="javascript:void(null);"><i class="icon-plus"></i> &nbsp; {{t common.add}}</a>
+        {{view view.plusButtonFilterView}}
+      </li>
+      <li class="dropdown-submenu">
+        <a href="javascript:void(null);"><i class="icon-cog"></i> &nbsp; {{t common.edit}}</a>
+        <ul class="dropdown-menu">
+          <li>
+            <a href="#" {{action "resetAllWidgets" target="view"}}>
+              <i class="icon-refresh"></i> &nbsp; {{t dashboard.button.reset}}
+            </a>
+          </li>
+          <li>
+            <a target="_blank" {{bindAttr href="view.gangliaUrl"}}>
+              <i class="icon-share"></i> &nbsp; {{t dashboard.button.gangliaLink}}
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+
+  <div class="dashboard-widgets-box">
+    <div id="dashboard-widgets"  class="widgets-container">
+      <div class="thumbnails row-fluid" id="sortable">
+        {{#if view.visibleWidgets.length}}
+          {{#each widgetClass in view.visibleWidgets}}
+            <div {{bindAttr class="widgetClass.class"}}>
+              {{view widgetClass }}
+            </div>
+          {{/each}}
+        {{/if}}
       </div>
     </div>
-      <div id="dashboard-widgets"  class="widgets-container">
-        <div class="thumbnails row-fluid" id="sortable">
-          {{#if view.visibleWidgets.length}}
-            {{#each widgetClass in view.visibleWidgets}}
-              <div {{bindAttr class="widgetClass.class"}}>
-                {{view widgetClass }}
-              </div>
-            {{/each}}
-          {{/if}}
-        </div>
-      </div>
   </div>
 {{/if}}

ambari-web/app/views/main/dashboard.js

@@ -27,19 +27,13 @@ App.MainDashboardView = Em.View.extend({
   categories: function() {
     var items = [{
       name: 'widgets',
-      url: 'dashboard.widgets',
-      label: Em.I18n.t('dashboard.widgets.title'),
-      isActive: function () {
-        return 'widgets' === this.get('selected');
-      }.property('selected')
+      url: 'dashboard.index',
+      label: Em.I18n.t('dashboard.widgets.title')
     },
     {
       name: 'charts',
-      url: 'dashboard.charts.heatmap',
-      label: Em.I18n.t('dashboard.heatmaps.title'),
-      isActive: function () {
-        return 'charts' === this.get('selected');
-      }.property('selected')
+      url: 'dashboard.charts.index',
+      label: Em.I18n.t('dashboard.heatmaps.title')
     }];
     return items;
   }.property(''),

ambari-web/app/views/main/dashboard/widgets.js

@@ -197,22 +197,21 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
    * Submenu view for New Dashboard style
    * @type {Ember.View}
    */
-  plusButtonFilterView: filters.createComponentView({
-    /**
-     * Base methods was implemented in <code>filters.componentFieldView</code>
-     */
-    hiddenWidgetsBinding: 'parentView.hiddenWidgets',
-    visibleWidgetsBinding: 'parentView.visibleWidgets',
-    layout: null,
-
-    filterView: filters.componentFieldView.extend({
-      templateName:require('templates/main/dashboard/plus_button_filter'),
+  plusButtonFilterView: Ember.View.extend({
+      templateName: require('templates/main/dashboard/plus_button_filter'),
       hiddenWidgetsBinding: 'parentView.hiddenWidgets',
       visibleWidgetsBinding: 'parentView.visibleWidgets',
       valueBinding: '',
+      didInsertElement: function() {
+        $(".add-widgets-dropdown-list").click(function( event ) {
+          event.stopPropagation();
+        });
+      },
+      closeFilter:function () {
+      },
       applyFilter:function() {
-        this._super();
-        var parent = this.get('parentView').get('parentView');
+        this.closeFilter();
+        var parent = this.get('parentView');
         var hiddenWidgets = this.get('hiddenWidgets');
         var checkedWidgets = hiddenWidgets.filterProperty('checked', true);
 
@@ -245,7 +244,6 @@ App.MainDashboardWidgetsView = Em.View.extend(App.UserPref, App.LocalStorage, {
           parent.translateToReal(newValue);
         }
       }
-    })
   }),
 
   /**