AMBARI-6841. Config History: implement UI tweaks.(xiwang)

ambari-web/app/controllers/main/dashboard/config_history_controller.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+var App = require('app');
 var customDatePopup = require('/views/common/custom_date_popup');
 
 App.MainConfigHistoryController = Em.ArrayController.extend(App.TableServerMixin, {

ambari-web/app/messages.js

@@ -1974,16 +1974,18 @@ Em.I18n.translations = {
   'dashboard.services.zookeeper.server' : 'ZooKeeper Server',
 
   'dashboard.configHistory.title': 'Configs',
-  'dashboard.configHistory.table.version.title' : 'Service: version',
+  'dashboard.configHistory.table.version.title' : 'Service',
   'dashboard.configHistory.table.modified.title' : 'Modified',
   'dashboard.configHistory.table.empty' : 'No history to display',
+  'dashboard.configHistory.table.version.versionText' : 'V{0}',
   'dashboard.configHistory.table.filteredHostsInfo': '{0} of {1} versions showing',
   'dashboard.configHistory.info-bar.authoredOn': 'authored on',
   'dashboard.configHistory.info-bar.changesToHandle': 'Changes to handle',
   'dashboard.configHistory.info-bar.showMore': 'Show more',
   'dashboard.configHistory.info-bar.save.popup.title': 'Save Configuration',
   'dashboard.configHistory.info-bar.save.popup.placeholder': 'What did you change?',
-  'dashboard.configHistory.info-bar.revert.button': 'Revert to this version',
+  'dashboard.configHistory.info-bar.revert.button': 'Make current',
+
 
   'timeRange.presets.1hour':'1h',
   'timeRange.presets.12hour':'12h',

ambari-web/app/models/service_config_version.js

@@ -35,9 +35,9 @@ App.ServiceConfigVersion = DS.Model.extend({
     var length = this.get('isCurrent') ? 20 : 40;
     return (typeof this.get('notes') === 'string') ? this.get('notes').slice(0, length) : "";
   }.property('notes', 'isCurrent'),
-  serviceVersion: function () {
-    return this.get('serviceName') + ': ' + this.get('version');
-  }.property('serviceName', 'version'),
+  versionText: function () {
+    return Em.I18n.t('dashboard.configHistory.table.version.versionText').format(this.get('version'));
+  }.property('version'),
   modifiedDate: function () {
     return dateUtil.dateFormat(this.get('appliedTime'));
   }.property('createTime'),

ambari-web/app/styles/application.less

@@ -4913,67 +4913,41 @@ ul.inline li {
 }
 
 #config_history_flow {
-  margin-bottom: 100px;
+  margin-bottom: 80px;
   .version-slider {
     width: 100%;
     height: 100px;
     margin: 10px 0;
     .flow-element {
-      width: 20%;
+      width: 18%;
       height: 100%;
       .box {
         position: relative;
-        width: 73%;
-        height: 100%;
-        background-color: #f1f1f1;
-        border: 1px solid #000000;
-        font-size: 0.9em;
-        .top-right-label {
-          font-size: @default-font-size;
-          background-color: white;
-          position: absolute;
-          top: 0;
-          left: 0;
+        width: 72%;
+        height: 90%;
+        background-color: #ffffff;
+        border: 1px solid #dddddd;
+        font-size: @default-font-size;
+        .top-label {
           min-width: 20px;
-          border: solid #000000;
-          border-width: 0 1px 1px 0;
           padding: 5px;
-          text-align: center;
-        }
-        .date {
-          margin-left: 35px;
-          line-height: 30px;
-          white-space: nowrap;
         }
         .content {
           padding: 0 5px;
-          line-height: 16px;
-        }
-        .current-label {
-          position: absolute;
-          border-top: 1px solid black;
-          bottom: 0;
-          left: 0;
-          width: 100%;
           text-align: center;
-          font-weight: bold;
-          border-radius: 0;
-          padding: 0;
-          font-size: 14px;
-          line-height: 20px;
+          color: #555555;
         }
       }
       .displayed {
-        background-color: #dcdcdc;
+        background-color: #eeeeee;
+        border: 1px solid #dddddd;
       }
       .arrow-box {
-        width: 25%;
-        height: 100%;
+        width: 20%;
         margin-left: 1px;
-        .big-arrow-right {
-          height: 100%;
-          background-size: 100% 25%;
-          background-position: 50% center;
+        margin-top: 20px;
+        .icon-arrow-right {
+          color: #c3c3c3;
         }
       }
     }
@@ -4984,45 +4958,50 @@ ul.inline li {
       .box {
         width: 100%;
       }
-      width: 15%;
+      width: 13%;
     }
 
-    .arrow-right {
-      margin: 20px -15px 20px 10px;
-      border-top: 30px solid transparent;
-      border-bottom: 30px solid transparent;
-    }
-    .arrow-left {
-      margin: 20px 10px 20px -15px;
-      border-top: 30px solid transparent;
-      border-bottom: 30px solid transparent;
-    }
-    .visibleArrow {
-      border-right-color: black;
-      border-left-color: black;
+    .icon-chevron-box {
+      margin-top: 25px;
+      width: 5%;
+      .icon-chevron-right,
+      .icon-chevron-left{
+       color: #c3c3c3;
+      }
+      .icon-chevron-left:hover,
+      .icon-chevron-right:hover{
+        color: #808080;
+      }
     }
   }
   .version-info-bar {
-    height: 60px;
-    border: 2px solid #a9a9a9;
-    background-color: #dcdcdc;
+    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));
+    background-image: -webkit-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+    background-image: -o-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+    background-image: linear-gradient(to bottom, @top-nav-bg-color-from, @top-nav-bg-color-to);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= @top-nav-bg-color-from, endColorstr=@top-nav-bg-color-to); //for IE9-
+    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
     margin: 5px 0;
     padding: 5px;
     position: fixed;
-    width: 52%;
     z-index: 2;
-    min-width: 743px;
+    width: 747px;
 
     .label-wrapper {
       line-height: 30px;
       margin-left: 10px;
+      color: #d3d3d3;
       .label {
         font-size: 14px;
         padding: 5px;
       }
     }
     .dropdown-menu {
-      min-width: 660px;
+      min-width: 400px;
+      margin-top: 4px;
       li {
         line-height: 30px;
       }
@@ -6038,11 +6017,26 @@ i.icon-asterisks {
     }
   }
 }
-
-
-
-
-
+  #config_history_flow {
+    .version-slider {
+      .flow-element {
+        .box {
+          width: 75%;
+        }
+        .arrow-box {
+          margin-left: 5px;
+        }
+      }
+      .first {
+        .box {
+          width: 100%;
+        }
+      }
+    }
+    .version-info-bar {
+      width: 960px;
+    }
+  }
   .summary-metric-graphs {
     [class*="span"] {
       float: left;

ambari-web/app/templates/common/configs/compare_property.hbs

@@ -19,10 +19,6 @@
 <div {{bindAttr class=":control-group :overrideField"}}>
   {{view view.serviceConfigProperty.compareConfig.viewClass serviceConfigBinding="view.serviceConfigProperty.compareConfig"}}
   {{#unless view.serviceConfigProperty.compareConfig.isMock}}
-    <span>
-      <strong><i class="icon-asterisks">&#10037;</i>{{view.serviceConfigProperty.compareConfig.serviceVersion.author}}</strong>&nbsp;
-        {{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;
-      <strong>{{view.serviceConfigProperty.compareConfig.serviceVersion.modifiedDate}}</strong>
-    </span>
+    <span class="label label-info">{{view.serviceConfigProperty.compareConfig.serviceVersion.versionText}}</span>
   {{/unless}}
 </div>

ambari-web/app/templates/common/configs/config_history_flow.hbs

@@ -19,24 +19,26 @@
 
 <div id="config_history_flow">
   <div class="version-slider">
-      <div {{bindAttr class=":pull-left :arrow-left :visibleArrow view.showLeftArrow::hide"}} {{action shiftBack target="view"}}></div>
-      {{#each serviceVersion in view.visibleServiceVersion}}
-          <div {{bindAttr class=":flow-element :pull-left serviceVersion.first:first"}}>
-              <div class="arrow-box pull-left"><div class="big-arrow-right"></div></div>
-              <div {{bindAttr class=":box :pull-right serviceVersion.isDisplayed:displayed"}}>
-                  <div class="top-right-label">{{serviceVersion.version}}</div>
-                  <p class="date">{{serviceVersion.shortModifiedDate}}</p>
-                  <p class="content">{{serviceVersion.author}}:&nbsp;{{serviceVersion.briefNotes}}</p>
-                  {{#if serviceVersion.isCurrent}}
-                    <div class="current-label label label-success">
-                      {{t common.latest}}
-                      <i {{bindAttr class=":icon-refresh :restart-required-service view.displayedServiceVersion.isRestartRequired::hidden"}}></i>
-                    </div>
-                  {{/if}}
-              </div>
+    <div {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::hide"}} {{action shiftBack target="view"}}><i class="icon-chevron-left icon-3x"></i></div>
+    {{#each serviceVersion in view.visibleServiceVersion}}
+      <div {{bindAttr class=":flow-element :pull-left serviceVersion.first:first"}}>
+        <div class="arrow-box pull-left"><i class="icon-arrow-right icon-3x"></i></div>
+        <div {{bindAttr class=":box :pull-right serviceVersion.isDisplayed:displayed"}}>
+          <div class="top-label">
+            <span class="label label-info">{{serviceVersion.versionText}}</span>
+            {{#if serviceVersion.isCurrent}}
+              <span class="label label-success">
+                {{t common.current}}
+                <i {{bindAttr class=":icon-refresh :restart-required-service view.displayedServiceVersion.isRestartRequired::hidden"}}></i>
+              </span>
+            {{/if}}
           </div>
-      {{/each}}
-      <div {{bindAttr class=":arrow-right :visibleArrow view.showRightArrow::hide"}} {{action shiftForward target="view"}}></div>
+          <div class="content">{{serviceVersion.author}}</div>
+          <div class="content">{{serviceVersion.shortModifiedDate}}</div>
+        </div>
+      </div>
+    {{/each}}
+    <div {{bindAttr class=":icon-chevron-box :pull-right view.showRightArrow::hide"}} {{action shiftForward target="view"}}><i class="icon-chevron-right icon-3x"></i></div>
   </div>
   <div class="version-info-bar">
     <div class="row-fluid">
@@ -49,10 +51,9 @@
               {{#each serviceVersion in view.dropDownList}}
                   <li class="pointer dropdown-submenu">
                       <div class="row-fluid">
-                          <div class="span2">{{t common.version}}:&nbsp;{{serviceVersion.version}}</div>
-                          <div class="span3">{{serviceVersion.modifiedDate}}</div>
-                          <div class="span2">{{serviceVersion.author}}</div>
-                          <div class="span4"><span class="ellipsis">{{t dashboard.configHistory.info-bar.changesToHandle}}</span></div>
+                          <div class="span2">{{serviceVersion.versionText}}</div>
+                          <div class="span6">{{serviceVersion.modifiedDate}}</div>
+                          <div class="span3">{{serviceVersion.author}}</div>
                           <div class="pull-right"><i class="icon-caret-right"></i></div>
                       </div>
                       <ul class="dropdown-menu">
@@ -73,7 +74,10 @@
             </ul>
         </div>
         <div class="label-wrapper span8">
-            <span {{bindAttr class=":label view.displayedServiceVersion.isCurrent:label-success"}}>{{t common.latest}}: {{view.displayedServiceVersion.version}}</span>
+            <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span>
+            {{#if view.displayedServiceVersion.isCurrent}}
+              <span class="label label-success">{{t common.current}}</span>
+            {{/if}}
             <strong>{{view.displayedServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.modifiedDate}}</strong>
         </div>
         <div class="pull-right">

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

@@ -38,11 +38,16 @@
           {{#if view.pageContent}}
             {{#each item in view.pageContent}}
                 <tr>
-                    <td class="first"><a {{action goToServiceConfigs item.serviceName}}>
-                      {{item.serviceVersion}}
-                      {{#if item.isCurrent}}&nbsp;({{t common.latest}}){{/if}}
-                        <i {{bindAttr class=":icon-refresh :restart-required-service item.isRestartRequired::hidden"}}></i>
-                    </a></td>
+                    <td class="first">
+                      <a {{action goToServiceConfigs item.serviceName}}>
+                      {{item.serviceName}}
+                      </a>
+                      <span class="label label-info">{{item.versionText}}</span>
+                      {{#if item.isCurrent}}
+                        <span class="label label-success">{{t common.current}}</span>
+                      {{/if}}
+                      <i {{bindAttr class=":icon-refresh :restart-required-service item.isRestartRequired::hidden"}}></i>
+                    </td>
                     <td>{{item.modifiedDate}}</td>
                     <td>{{item.author}}</td>
                     <td>{{item.notes}}</td>

ambari-web/app/views/common/configs/config_history_flow.js

@@ -101,7 +101,9 @@ App.ConfigHistoryFlowView = Em.View.extend({
     var startIndex = 0;
 
     serviceVersions.setEach('isDisplayed', false);
-    serviceVersions.findProperty('isCurrent').set('isDisplayed', true);
+    if (serviceVersions.findProperty('isCurrent')) {
+      serviceVersions.findProperty('isCurrent').set('isDisplayed', true);
+    }
 
     if (serviceVersions.length > 0) {
       if (serviceVersions.length > this.VERSIONS_IN_FLOW) {

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

@@ -151,7 +151,6 @@ App.MainConfigHistoryView = App.TableView.extend({
 
   updateFilter: function (iColumn, value, type) {
     var self = this;
-
     this.set('controller.resetStartIndex', false);
     this.saveFilterConditions(iColumn, value, type, false);
     if (!this.get('filteringComplete')) {