AMBARI-5070. Labels of Advanced configuration properties wrap over in between words. (onechiporenko)

ambari-web/app/styles/application.less

@@ -55,6 +55,10 @@ html, body {
   height: 100%;
 }
 
+wbr {
+  display: inline-block;
+}
+
 #wrapper {
   min-height: 100%;
 }

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

@@ -99,7 +99,7 @@
                           {{#if showLabel}}
                             <span {{bindAttr class="errorMessage:error: :control-group :control-label-span"}}>
                               <label class="control-label">
-                                {{displayName}}
+                                {{formatWordBreak displayName}}
                                 {{#if App.supports.secureCluster}}
                                   {{#if isSecureConfig}}
                                     <a href="javascript:void(null);"><i class="icon-lock" rel="tooltip" data-toggle="tooltip" title="security knob"></i></a>

ambari-web/app/utils/helper.js

@@ -437,6 +437,34 @@ App.registerBoundHelper('formatNull', Em.View.extend({
   }.property('content')
 }));
 
+/**
+ * Return formatted string with inserted <code>wbr</code>-tag after each dot
+ *
+ * @param {String} content
+ *
+ * Examples:
+ *
+ * returns 'apple'
+ * {{formatWordBreak 'apple'}}
+ *
+ * returns 'apple.<wbr />banana'
+ * {{formatWordBreak 'apple.banana'}}
+ *
+ * returns 'apple.<wbr />banana.<wbr />uranium'
+ * {{formatWordBreak 'apple.banana.uranium'}}
+ */
+App.registerBoundHelper('formatWordBreak', Em.View.extend({
+  tagName: 'span',
+  template: Em.Handlebars.compile('{{{view.result}}}'),
+
+  /**
+   * @type {string}
+   */
+  result: function() {
+    return this.get('content').replace(/\./g, '.<wbr />');
+  }.property('content')
+}));
+
 /**
  * Ambari overrides the default date transformer.
  * This is done because of the non-standard data