AMBARI-20425 Empty current and recommended values in "Recommended configs" panel during Add Service. (ababiichuk)

ambari-web/app/messages.js

@@ -463,7 +463,8 @@ Em.I18n.translations = {
   'popup.dependent.configs.table.currentValue': 'Current Value',
   'popup.dependent.configs.table.recommendedValue': 'Recommended Value',
   'popup.dependent.configs.table.newValue': 'New Value',
-  'popup.dependent.configs.table.not.defined': 'Not Defined',
+  'popup.dependent.configs.table.undefined': 'Property undefined',
+  'popup.dependent.configs.table.removed': 'Property removed',
 
 
   'popup.dependent.configs.select.config.group.header': 'Select Config Group',

ambari-web/app/styles/application.less

@@ -5983,6 +5983,10 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
 @config-dependency-t-group-width: 140px;
 @config-dependency-t-filename-width: 150px;
 @config-dependency-t-value-width: 230px;
+@diff-background-insert: #eaffea;
+@diff-background-delete: #ffecec;
+@diff-background-equal: #fff;
+@diff-background-empty: #ddd;
 
 #config-dependencies {
   max-height: 500px;
@@ -6017,17 +6021,18 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
         &.empty {
           width: 50%;
         }
-        &.delete, &.insert, &.replace {
-          color: #fff;
-        }
         &.delete {
-          background-color: @health-status-red !important;
+          background-color: @diff-background-delete !important;
         }
         &.insert {
-          background-color: @health-status-green !important;
+          background-color: @diff-background-insert !important;
+        }
+        &.equal, &.not-defined:last-of-type, &.is-removed:first-of-type {
+          background-color: @diff-background-equal;
         }
-        &.replace {
-          background-color: @health-status-orange !important;
+        &.not-defined:first-of-type, &.is-removed:last-of-type {
+          background-color: @diff-background-empty;
+          font-style: italic;
         }
       }
     }

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

@@ -29,12 +29,35 @@ App.ConfigDiffView = Em.View.extend({
       }).sort().join("\n");
       return difflib.stringAsLines(values);
     };
-    var initialValues = trimAndSort(this.get('config.initialValue'));
-    var recommendedValues = trimAndSort(this.get('config.recommendedValue'));
+    var initialValues = trimAndSort(this.get('config.initialValue')),
+      recommendedValues = trimAndSort(this.get('config.recommendedValue')),
+      opcodes = new difflib.SequenceMatcher(initialValues, recommendedValues).get_opcodes();
+    if (initialValues.length === 1 && recommendedValues.length === 1) {
+      // changes in properties with single-line values shouldn't be highlighted
+      opcodes[0][0] = 'equal';
+    }
+    if (!initialValues.length) {
+      if (recommendedValues.length > 1) {
+        // initial and recommended values should have the same number of rows
+        initialValues = Array(recommendedValues.length - 1).join('.').split('.');
+      }
+      initialValues.unshift(Em.I18n.t('popup.dependent.configs.table.undefined'));
+      opcodes[0][0] = 'not-defined'; // class name for cell corresponding to undefined property
+      opcodes[0][2] = recommendedValues.length; // specifying rows number explicitly to avoid omitting of 'Property undefined' message
+    }
+    if (!recommendedValues.length) {
+      if (initialValues.length > 1) {
+        // initial and recommended values should have the same number of rows
+        recommendedValues = Array(initialValues.length - 1).join('.').split('.');
+      }
+      recommendedValues.unshift(Em.I18n.t('popup.dependent.configs.table.removed'));
+      opcodes[0][0] = 'is-removed'; // class name for cell corresponding to removed property
+      opcodes[0][4] = initialValues.length; // specifying rows number explicitly to avoid omitting of 'Property removed' message
+    }
     return new Handlebars.SafeString(diffview.buildView({
       baseTextLines: initialValues,
       newTextLines: recommendedValues,
-      opcodes: new difflib.SequenceMatcher(initialValues, recommendedValues).get_opcodes()
+      opcodes: opcodes
     }).outerHTML);
   }.property('config.initialValues', 'config.recommendedValues')
 });