improve code quality

28 files changed, 230 insertions, 81 deletions

diff --git a/server/sonar-web/.eslintrc b/server/sonar-web/.eslintrc
index 6a403ba8a2f..a063471955c 100644
--- a/server/sonar-web/.eslintrc
+++ b/server/sonar-web/.eslintrc
@@ -32,7 +32,25 @@
   ],
 
   "rules": {
-    "quotes": [ 2, "single", "avoid-escape" ],
-    "react/jsx-uses-react": 1
+    "quotes": [2, "single", "avoid-escape"],
+
+    "react/jsx-closing-bracket-location": [1, "after-props"],
+    "react/jsx-handler-names": 0,
+    "react/jsx-key": 2,
+    "react/jsx-max-props-per-line": [1, { "maximum": 3 }],
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-pascal-case": 1,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 2,
+    "react/no-did-mount-set-state": [2, "allow-in-func"],
+    "react/no-did-update-set-state": [2, "allow-in-func"],
+    "react/no-direct-mutation-state": 2,
+    "react/no-multi-comp": 0,
+    "react/no-unknown-property": 2,
+    "react/prop-types": 0,
+    "react/react-in-jsx-scope": 2,
+    "react/self-closing-comp": 2,
+    "react/sort-comp": 1
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/search.js b/server/sonar-web/src/main/js/apps/background-tasks/search.js
index a1624f02aae..8c68049cf14 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/search.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/search.js
@@ -5,11 +5,11 @@ import RadioToggle from '../../components/shared/radio-toggle';
 import { STATUSES, CURRENTS, DATE, DATE_FORMAT } from './constants';
 
 export default React.createClass({
-  componentDidUpdate() {
+  componentDidMount() {
     this.attachDatePicker();
   },
 
-  componentDidMount() {
+  componentDidUpdate() {
     this.attachDatePicker();
   },
 
@@ -102,8 +102,12 @@ export default React.createClass({
           <button className="search-box-submit button-clean">
             <i className="icon-search"></i>
           </button>
-          <input onChange={this.onSearch} value={this.props.searchQuery} ref="searchInput" className="search-box-input"
-                 type="search" placeholder="Search"/>
+          <input onChange={this.onSearch}
+                 value={this.props.searchQuery}
+                 ref="searchInput"
+                 className="search-box-input"
+                 type="search"
+                 placeholder="Search"/>
         </form>
     );
   },
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/stats.js b/server/sonar-web/src/main/js/apps/background-tasks/stats.js
index f8010c93d68..308d7e4d8a8 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/stats.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/stats.js
@@ -64,7 +64,10 @@ export default React.createClass({
     if (this.props.failuresCount > 0) {
       return (
           <span>
-            <a ref="failureCount" onClick={this.onFailuresClick} className="emphasised-measure" data-toggle="tooltip"
+            <a ref="failureCount"
+               onClick={this.onFailuresClick}
+               className="emphasised-measure"
+               data-toggle="tooltip"
                title="Count of projects where processing of most recent analysis report failed"
                href="#">{this.props.failuresCount}</a>
             &nbsp;
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/tasks.js b/server/sonar-web/src/main/js/apps/background-tasks/tasks.js
index 54b05fa0eed..edffaf43198 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/tasks.js
+++ b/server/sonar-web/src/main/js/apps/background-tasks/tasks.js
@@ -10,12 +10,12 @@ import { TooltipsMixin } from '../../components/mixins/tooltips-mixin';
 
 
 export default React.createClass({
-  mixins: [TooltipsMixin],
-
   propTypes: {
     tasks: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
   },
 
+  mixins: [TooltipsMixin],
+
   onTaskCanceled (task, e) {
     e.preventDefault();
     this.props.onTaskCanceled(task);
diff --git a/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js
index 0ce2db9c0d4..96520d0ffda 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures-list.js
@@ -54,7 +54,10 @@ export const CoverageMeasuresList = React.createClass({
     }
 
     metrics = metrics.map(metric => {
-      return <DetailedMeasure key={metric.key} {...this.props} {...this.props} metric={metric.key}
+      return <DetailedMeasure key={metric.key}
+                              {...this.props} 
+                              {...this.props}
+                              metric={metric.key}
                               type={metric.type}/>;
     });
     return <div className="overview-detailed-measures-list">{metrics}</div>;
diff --git a/server/sonar-web/src/main/js/apps/overview/components/coverage-measures.js b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures.js
index 3fdf521a872..731aafa9740 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/coverage-measures.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/coverage-measures.js
@@ -72,7 +72,10 @@ export const CoverageMeasures = React.createClass({
       <div className="overview-detailed-measure-leak">
         <span className="overview-detailed-measure-value">
           <span className="spacer-right">
-            <DonutChart width="30" height="30" thickness="4" data={donutData}/>
+            <DonutChart width="30"
+                        height="30"
+                        thickness="4"
+                        data={donutData}/>
           </span>
           <DrilldownLink component={this.props.component.key}
                          metric={newCoverageMetricName}
@@ -90,7 +93,10 @@ export const CoverageMeasures = React.createClass({
       { value: coverage, fill: '#85bb43' },
       { value: 100 - coverage, fill: '#d4333f' }
     ];
-    return <DonutChart width="30" height="30" thickness="4" data={donutData}/>;
+    return <DonutChart width="30"
+                       height="30"
+                       thickness="4"
+                       data={donutData}/>;
   },
 
   render() {
diff --git a/server/sonar-web/src/main/js/apps/overview/components/event.js b/server/sonar-web/src/main/js/apps/overview/components/event.js
index 05fe615a93b..80fe89648ce 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/event.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/event.js
@@ -5,8 +5,6 @@ import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
 
 
 export const Event = React.createClass({
-  mixins: [TooltipsMixin],
-
   propTypes: {
     event: React.PropTypes.shape({
       id: React.PropTypes.string.isRequired,
@@ -17,6 +15,8 @@ export const Event = React.createClass({
     })
   },
 
+  mixins: [TooltipsMixin],
+
   render () {
     const { event } = this.props;
     return <li className="spacer-top">
diff --git a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
index 62610c2f190..e82f5a3c457 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
@@ -9,8 +9,6 @@ import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
 
 
 export const Timeline = React.createClass({
-  mixins: [ResizeMixin, TooltipsMixin],
-
   propTypes: {
     data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     padding: React.PropTypes.arrayOf(React.PropTypes.number),
@@ -18,6 +16,8 @@ export const Timeline = React.createClass({
     interpolate: React.PropTypes.string
   },
 
+  mixins: [ResizeMixin, TooltipsMixin],
+
   getDefaultProps() {
     return {
       padding: [10, 10, 10, 10],
@@ -93,7 +93,11 @@ export const Timeline = React.createClass({
       let nextTick = index + 1 < ticks.length ? ticks[index + 1] : xScale.domain()[1];
       let x = (xScale(tick) + xScale(nextTick)) / 2;
       let y = yScale.range()[0];
-      return <text key={index} className="line-chart-tick" x={x} y={y} dy="1.5em">{format(tick)}</text>;
+      return <text key={index}
+                   className="line-chart-tick"
+                   x={x}
+                   y={y}
+                   dy="1.5em">{format(tick)}</text>;
     });
     return <g>{ticks}</g>;
   },
@@ -113,11 +117,11 @@ export const Timeline = React.createClass({
   },
 
   renderLine (xScale, yScale) {
-    let path = d3.svg.line()
+    let p = d3.svg.line()
         .x(d => xScale(d.x))
         .y(d => yScale(d.y))
         .interpolate(this.props.interpolate);
-    return <path className="line-chart-path" d={path(this.props.data)}/>;
+    return <path className="line-chart-path" d={p(this.props.data)}/>;
   },
 
   renderEvents(xScale, yScale) {
diff --git a/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js
index 179520a106f..7527c23c18e 100644
--- a/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js
+++ b/server/sonar-web/src/main/js/apps/overview/domains/debt-domain.js
@@ -109,7 +109,10 @@ export const IssuesMain = React.createClass({
         .filter(metric => KNOWN_METRICS.indexOf(metric.key) === -1)
         .filter(metric => this.state.measures[metric.key] != null)
         .map(metric => {
-          return <DetailedMeasure key={metric.key} {...this.props} {...this.state} metric={metric.key}
+          return <DetailedMeasure key={metric.key}
+                                  {...this.props}
+                                  {...this.state}
+                                  metric={metric.key}
                                   type={metric.type}/>;
         });
     if (!metrics.length) {
diff --git a/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js
index 321595b779d..2223139a760 100644
--- a/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js
+++ b/server/sonar-web/src/main/js/apps/overview/domains/duplications-domain.js
@@ -84,7 +84,10 @@ export const DuplicationsMain = React.createClass({
     let metrics = filterMetricsForDomains(this.props.metrics, ['Duplication'])
         .filter(metric => metric.key !== 'duplicated_lines_density')
         .map(metric => {
-          return <DetailedMeasure key={metric.key} {...this.props} {...this.state} metric={metric.key}
+          return <DetailedMeasure key={metric.key}
+                                  {...this.props}
+                                  {...this.state}
+                                  metric={metric.key}
                                   type={metric.type}/>;
         });
     return <div>{metrics}</div>;
@@ -97,7 +100,10 @@ export const DuplicationsMain = React.createClass({
       { value: duplications, fill: '#f3ca8e' },
       { value: Math.max(0, 20 - duplications), fill: '#e6e6e6' }
     ];
-    return <DonutChart width="30" height="30" thickness="4" data={donutData}/>;
+    return <DonutChart width="30"
+                       height="30"
+                       thickness="4"
+                       data={donutData}/>;
   },
 
   renderDuplicationsLeak() {
diff --git a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js
index 26f4af61cb1..05a23ae3d51 100644
--- a/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js
+++ b/server/sonar-web/src/main/js/apps/overview/domains/size-domain.js
@@ -71,7 +71,10 @@ export const SizeMain = React.createClass({
     let metrics = filterMetricsForDomains(this.props.metrics, [domain])
         .filter(metric => hiddenMetrics.indexOf(metric.key) === -1)
         .map(metric => {
-          return <DetailedMeasure key={metric.key} {...this.props} {...this.state} metric={metric.key}
+          return <DetailedMeasure key={metric.key}
+                                  {...this.props}
+                                  {...this.state}
+                                  metric={metric.key}
                                   type={metric.type}/>;
         });
     return <div>{metrics}</div>;
@@ -112,16 +115,28 @@ export const SizeMain = React.createClass({
 
     return <div className="overview-detailed-layout-column">
       <div className="overview-detailed-measures-list">
-        <DetailedMeasure {...this.props} {...this.state} metric="complexity" type="INT"/>
-        <DetailedMeasure {...this.props} {...this.state} metric="function_complexity" type="FLOAT">
+        <DetailedMeasure {...this.props}
+                         {...this.state}
+                         metric="complexity"
+                         type="INT"/>
+        <DetailedMeasure {...this.props}
+                         {...this.state}
+                         metric="function_complexity"
+                         type="FLOAT">
           {this.renderComplexityDistribution(this.state.measures['function_complexity_distribution'],
               { of: 'function' })}
         </DetailedMeasure>
-        <DetailedMeasure {...this.props} {...this.state} metric="file_complexity" type="FLOAT">
+        <DetailedMeasure {...this.props}
+                         {...this.state}
+                         metric="file_complexity"
+                         type="FLOAT">
           {this.renderComplexityDistribution(this.state.measures['file_complexity_distribution'],
               { of: 'file' })}
         </DetailedMeasure>
-        <DetailedMeasure {...this.props} {...this.state} metric="class_complexity" type="FLOAT"/>
+        <DetailedMeasure {...this.props}
+                         {...this.state}
+                         metric="class_complexity"
+                         type="FLOAT"/>
         {this.renderOtherComplexityMeasures()}
       </div>
     </div>;
@@ -141,7 +156,10 @@ export const SizeMain = React.createClass({
         <div className="overview-detailed-layout-size">
           <div className="overview-detailed-layout-column">
             <div className="overview-detailed-measures-list">
-              <DetailedMeasure {...this.props} {...this.state} metric="ncloc" type="INT">
+              <DetailedMeasure {...this.props}
+                               {...this.state}
+                               metric="ncloc"
+                               type="INT">
                 {this.renderLanguageDistribution()}
               </DetailedMeasure>
               {this.renderOtherSizeMeasures()}
diff --git a/server/sonar-web/src/main/js/apps/overview/main/coverage.js b/server/sonar-web/src/main/js/apps/overview/main/coverage.js
index 49d08a91f31..36168a35b5f 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/coverage.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/coverage.js
@@ -9,8 +9,6 @@ import { formatMeasure } from '../../../helpers/measures';
 
 
 export const GeneralCoverage = React.createClass({
-  mixins: [TooltipsMixin, DomainMixin],
-
   propTypes: {
     measures: React.PropTypes.object.isRequired,
     leakPeriodLabel: React.PropTypes.string,
@@ -18,6 +16,8 @@ export const GeneralCoverage = React.createClass({
     coverageMetricPrefix: React.PropTypes.string.isRequired
   },
 
+  mixins: [TooltipsMixin, DomainMixin],
+
   getCoverageMetric () {
     return this.props.coverageMetricPrefix + 'coverage';
   },
@@ -86,7 +86,10 @@ export const GeneralCoverage = React.createClass({
 
             <Measure composite={true}>
               <div className="display-inline-block text-middle big-spacer-right">
-                <DonutChart width="40" height="40" thickness="4" data={donutData}/>
+                <DonutChart width="40"
+                            height="40"
+                            thickness="4"
+                            data={donutData}/>
               </div>
               <div className="display-inline-block text-middle">
                 <div className="overview-domain-measure-value">
diff --git a/server/sonar-web/src/main/js/apps/overview/main/duplications.js b/server/sonar-web/src/main/js/apps/overview/main/duplications.js
index 7e64f5184e5..eb08696c9bc 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/duplications.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/duplications.js
@@ -9,13 +9,13 @@ import { formatMeasure, formatMeasureVariation } from '../../../helpers/measures
 
 
 export const GeneralDuplications = React.createClass({
-  mixins: [TooltipsMixin, DomainMixin],
-
   propTypes: {
     leakPeriodLabel: React.PropTypes.string,
     leakPeriodDate: React.PropTypes.object
   },
 
+  mixins: [TooltipsMixin, DomainMixin],
+
   renderLeak () {
     if (!this.hasLeakPeriod()) {
       return null;
@@ -59,7 +59,10 @@ export const GeneralDuplications = React.createClass({
 
             <Measure composite={true}>
               <div className="display-inline-block text-middle big-spacer-right">
-                <DonutChart width="40" height="40" thickness="4" data={donutData}/>
+                <DonutChart width="40"
+                            height="40"
+                            thickness="4"
+                            data={donutData}/>
               </div>
               <div className="display-inline-block text-middle">
                 <div className="overview-domain-measure-value">
diff --git a/server/sonar-web/src/main/js/apps/overview/main/issues.js b/server/sonar-web/src/main/js/apps/overview/main/issues.js
index f92e7ce12a9..9993f49c720 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/issues.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/issues.js
@@ -12,13 +12,13 @@ import { formatMeasure } from '../../../helpers/measures';
 
 
 export const GeneralIssues = React.createClass({
-  mixins: [TooltipsMixin, DomainMixin],
-
   propTypes: {
     leakPeriodLabel: React.PropTypes.string,
     leakPeriodDate: React.PropTypes.object
   },
 
+  mixins: [TooltipsMixin, DomainMixin],
+
   renderLeak () {
     if (!this.hasLeakPeriod()) {
       return null;
diff --git a/server/sonar-web/src/main/js/apps/overview/main/main.js b/server/sonar-web/src/main/js/apps/overview/main/main.js
index 3d458a74c55..39e17057257 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/main.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/main.js
@@ -36,12 +36,12 @@ const HISTORY_METRICS_LIST = [
 
 
 export default React.createClass({
-  mixins: [CoverageSelectionMixin],
-
   propTypes: {
     leakPeriodIndex: React.PropTypes.string.isRequired
   },
 
+  mixins: [CoverageSelectionMixin],
+
   getInitialState() {
     return {
       ready: false,
diff --git a/server/sonar-web/src/main/js/apps/overview/main/size.js b/server/sonar-web/src/main/js/apps/overview/main/size.js
index 0ae35795ccb..683d23f5270 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/size.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/size.js
@@ -9,13 +9,13 @@ import { LanguageDistribution } from '../components/language-distribution';
 
 
 export const GeneralSize = React.createClass({
-  mixins: [TooltipsMixin, DomainMixin],
-
   propTypes: {
     leakPeriodLabel: React.PropTypes.string,
     leakPeriodDate: React.PropTypes.object
   },
 
+  mixins: [TooltipsMixin, DomainMixin],
+
   renderLeak () {
     if (!this.hasLeakPeriod()) {
       return null;
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/search.js b/server/sonar-web/src/main/js/apps/project-permissions/search.js
index 9f6bdbf12d0..547d5fe696b 100644
--- a/server/sonar-web/src/main/js/apps/project-permissions/search.js
+++ b/server/sonar-web/src/main/js/apps/project-permissions/search.js
@@ -38,7 +38,11 @@ export default React.createClass({
             <button className="search-box-submit button-clean">
               <i className="icon-search"></i>
             </button>
-            <input onChange={this.search} ref="input" className="search-box-input" type="search" placeholder="Search"/>
+            <input onChange={this.search}
+                   ref="input"
+                   className="search-box-input"
+                   type="search"
+                   placeholder="Search"/>
           </form>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/projects/search.js b/server/sonar-web/src/main/js/apps/projects/search.js
index 02b7229421a..c07450d93ca 100644
--- a/server/sonar-web/src/main/js/apps/projects/search.js
+++ b/server/sonar-web/src/main/js/apps/projects/search.js
@@ -105,8 +105,12 @@ export default React.createClass({
                   <button className="search-box-submit button-clean">
                     <i className="icon-search"></i>
                   </button>
-                  <input onChange={this.search} value={this.props.query} ref="input" className="search-box-input"
-                         type="search" placeholder="Search"/>
+                  <input onChange={this.search}
+                         value={this.props.query}
+                         ref="input"
+                         className="search-box-input"
+                         type="search"
+                         placeholder="Search"/>
                 </form>
               </td>
               <td className="thin text-middle">
diff --git a/server/sonar-web/src/main/js/components/charts/bar-chart.js b/server/sonar-web/src/main/js/components/charts/bar-chart.js
index 761ae960c65..6b95a6ec42c 100644
--- a/server/sonar-web/src/main/js/components/charts/bar-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/bar-chart.js
@@ -5,8 +5,6 @@ import { ResizeMixin } from './../mixins/resize-mixin';
 import { TooltipsMixin } from './../mixins/tooltips-mixin';
 
 export const BarChart = React.createClass({
-  mixins: [ResizeMixin, TooltipsMixin],
-
   propTypes: {
     data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     xTicks: React.PropTypes.arrayOf(React.PropTypes.any),
@@ -16,6 +14,8 @@ export const BarChart = React.createClass({
     barsWidth: React.PropTypes.number
   },
 
+  mixins: [ResizeMixin, TooltipsMixin],
+
   getDefaultProps() {
     return {
       xTicks: [],
@@ -43,7 +43,12 @@ export const BarChart = React.createClass({
         tooltipAtts['title'] = d.tooltip;
         tooltipAtts['data-toggle'] = 'tooltip';
       }
-      return <text key={index} className="bar-chart-tick" x={x} y={y} dy="1.5em" {...tooltipAtts}>{tick}</text>;
+      return <text key={index}
+                   className="bar-chart-tick"
+                   x={x}
+                   y={y}
+                   dy="1.5em"
+                   {...tooltipAtts}>{tick}</text>;
     });
     return <g>{ticks}</g>;
   },
@@ -62,7 +67,12 @@ export const BarChart = React.createClass({
         tooltipAtts['title'] = d.tooltip;
         tooltipAtts['data-toggle'] = 'tooltip';
       }
-      return <text key={index} className="bar-chart-tick" x={x} y={y} dy="-1em" {...tooltipAtts}>{value}</text>;
+      return <text key={index}
+                   className="bar-chart-tick"
+                   x={x}
+                   y={y}
+                   dy="-1em"
+                   {...tooltipAtts}>{value}</text>;
     });
     return <g>{ticks}</g>;
   },
@@ -78,8 +88,13 @@ export const BarChart = React.createClass({
         tooltipAtts['title'] = d.tooltip;
         tooltipAtts['data-toggle'] = 'tooltip';
       }
-      return <rect key={index} className="bar-chart-bar" {...tooltipAtts}
-                   x={x} y={y} width={this.props.barsWidth} height={height}/>;
+      return <rect key={index}
+                   className="bar-chart-bar"
+                   {...tooltipAtts}
+                   x={x}
+                   y={y}
+                   width={this.props.barsWidth}
+                   height={height}/>;
     });
     return <g>{bars}</g>;
   },
diff --git a/server/sonar-web/src/main/js/components/charts/bubble-chart.js b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
index ab1d1833358..270bec31d12 100644
--- a/server/sonar-web/src/main/js/components/charts/bubble-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
@@ -37,8 +37,6 @@ export const Bubble = React.createClass({
 
 
 export const BubbleChart = React.createClass({
-  mixins: [ResizeMixin, TooltipsMixin],
-
   propTypes: {
     items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     sizeRange: React.PropTypes.arrayOf(React.PropTypes.number),
@@ -52,6 +50,8 @@ export const BubbleChart = React.createClass({
     formatYTick: React.PropTypes.func
   },
 
+  mixins: [ResizeMixin, TooltipsMixin],
+
   getDefaultProps() {
     return {
       sizeRange: [5, 45],
@@ -94,7 +94,12 @@ export const BubbleChart = React.createClass({
       let x = xScale(tick);
       let y1 = yScale.range()[0];
       let y2 = yScale.range()[1];
-      return <line key={index} x1={x} x2={x} y1={y1} y2={y2} className="bubble-chart-grid"/>;
+      return <line key={index}
+                   x1={x}
+                   x2={x}
+                   y1={y1}
+                   y2={y2}
+                   className="bubble-chart-grid"/>;
     });
 
     return <g ref="xGrid">{lines}</g>;
@@ -109,7 +114,12 @@ export const BubbleChart = React.createClass({
       let y = yScale(tick);
       let x1 = xScale.range()[0];
       let x2 = xScale.range()[1];
-      return <line key={index} x1={x1} x2={x2} y1={y} y2={y} className="bubble-chart-grid"/>;
+      return <line key={index}
+                   x1={x1}
+                   x2={x2}
+                   y1={y}
+                   y2={y}
+                   className="bubble-chart-grid"/>;
     });
 
     return <g ref="yGrid">{lines}</g>;
@@ -123,8 +133,12 @@ export const BubbleChart = React.createClass({
     let ticks = xScale.ticks().map((tick, index) => {
       let x = xScale(tick);
       let y = yScale.range()[0];
-      let text = this.props.formatXTick(tick);
-      return <text key={index} className="bubble-chart-tick" x={x} y={y} dy="1.5em">{text}</text>;
+      let innerText = this.props.formatXTick(tick);
+      return <text key={index}
+                   className="bubble-chart-tick"
+                   x={x}
+                   y={y}
+                   dy="1.5em">{innerText}</text>;
     });
 
     return <g>{ticks}</g>;
@@ -138,9 +152,13 @@ export const BubbleChart = React.createClass({
     let ticks = yScale.ticks(5).map((tick, index) => {
       let x = xScale.range()[0];
       let y = yScale(tick);
-      let text = this.props.formatYTick(tick);
-      return <text key={index} className="bubble-chart-tick bubble-chart-tick-y"
-                   x={x} y={y} dx="-0.5em" dy="0.3em">{text}</text>;
+      let innerText = this.props.formatYTick(tick);
+      return <text key={index}
+                   className="bubble-chart-tick bubble-chart-tick-y"
+                   x={x}
+                   y={y}
+                   dx="-0.5em"
+                   dy="0.3em">{innerText}</text>;
     });
 
     return <g>{ticks}</g>;
diff --git a/server/sonar-web/src/main/js/components/charts/donut-chart.js b/server/sonar-web/src/main/js/components/charts/donut-chart.js
index b54597dd208..de07bd6f169 100644
--- a/server/sonar-web/src/main/js/components/charts/donut-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/donut-chart.js
@@ -16,12 +16,12 @@ const Sector = React.createClass({
 
 
 export const DonutChart = React.createClass({
-  mixins: [ResizeMixin, TooltipsMixin],
-
   propTypes: {
     data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
   },
 
+  mixins: [ResizeMixin, TooltipsMixin],
+
   getDefaultProps() {
     return { thickness: 6, padding: [0, 0, 0, 0] };
   },
@@ -45,7 +45,11 @@ export const DonutChart = React.createClass({
         .sort(null)
         .value(d => d.value);
     let sectors = pie(this.props.data).map((d, i) => {
-      return <Sector key={i} data={d} radius={radius} fill={this.props.data[i].fill} thickness={this.props.thickness}/>;
+      return <Sector key={i}
+                     data={d}
+                     radius={radius}
+                     fill={this.props.data[i].fill}
+                     thickness={this.props.thickness}/>;
     });
 
     return <svg className="donut-chart" width={this.state.width} height={this.state.height}>
diff --git a/server/sonar-web/src/main/js/components/charts/histogram.js b/server/sonar-web/src/main/js/components/charts/histogram.js
index 0843e76126a..ffac187583c 100644
--- a/server/sonar-web/src/main/js/components/charts/histogram.js
+++ b/server/sonar-web/src/main/js/components/charts/histogram.js
@@ -5,8 +5,6 @@ import { ResizeMixin } from './../mixins/resize-mixin';
 import { TooltipsMixin } from './../mixins/tooltips-mixin';
 
 export const Histogram = React.createClass({
-  mixins: [ResizeMixin, TooltipsMixin],
-
   propTypes: {
     data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     yTicks: React.PropTypes.arrayOf(React.PropTypes.any),
@@ -18,6 +16,8 @@ export const Histogram = React.createClass({
     onBarClick: React.PropTypes.func
   },
 
+  mixins: [ResizeMixin, TooltipsMixin],
+
   getDefaultProps() {
     return {
       xTicks: [],
diff --git a/server/sonar-web/src/main/js/components/charts/line-chart.js b/server/sonar-web/src/main/js/components/charts/line-chart.js
index 375931ea9f5..e4f66c7c9c8 100644
--- a/server/sonar-web/src/main/js/components/charts/line-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/line-chart.js
@@ -6,8 +6,6 @@ import { TooltipsMixin } from './../mixins/tooltips-mixin';
 
 
 export const LineChart = React.createClass({
-  mixins: [ResizeMixin, TooltipsMixin],
-
   propTypes: {
     data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     xTicks: React.PropTypes.arrayOf(React.PropTypes.any),
@@ -21,6 +19,8 @@ export const LineChart = React.createClass({
     interpolate: React.PropTypes.string
   },
 
+  mixins: [ResizeMixin, TooltipsMixin],
+
   getDefaultProps() {
     return {
       displayBackdrop: true,
@@ -63,7 +63,11 @@ export const LineChart = React.createClass({
     let points = this.props.data.map((point, index) => {
       let x = xScale(point.x);
       let y = yScale(point.y);
-      return <circle key={index} className="line-chart-point" r="3" cx={x} cy={y}/>;
+      return <circle key={index}
+                     className="line-chart-point"
+                     r="3"
+                     cx={x}
+                     cy={y}/>;
     });
     return <g>{points}</g>;
   },
@@ -76,7 +80,12 @@ export const LineChart = React.createClass({
       let x = xScale(point.x);
       let y1 = yScale.range()[0];
       let y2 = yScale(point.y);
-      return <line key={index} className="line-chart-grid" x1={x} x2={x} y1={y1} y2={y2}/>;
+      return <line key={index}
+                   className="line-chart-grid"
+                   x1={x}
+                   x2={x}
+                   y1={y1}
+                   y2={y2}/>;
     });
     return <g>{lines}</g>;
   },
@@ -89,7 +98,11 @@ export const LineChart = React.createClass({
       let point = this.props.data[index];
       let x = xScale(point.x);
       let y = yScale.range()[0];
-      return <text key={index} className="line-chart-tick" x={x} y={y} dy="1.5em">{tick}</text>;
+      return <text key={index}
+                   className="line-chart-tick"
+                   x={x}
+                   y={y}
+                   dy="1.5em">{tick}</text>;
     });
     return <g>{ticks}</g>;
   },
@@ -102,18 +115,22 @@ export const LineChart = React.createClass({
       let point = this.props.data[index];
       let x = xScale(point.x);
       let y = yScale(point.y);
-      return <text key={index} className="line-chart-tick" x={x} y={y} dy="-1em">{value}</text>;
+      return <text key={index}
+                   className="line-chart-tick"
+                   x={x}
+                   y={y}
+                   dy="-1em">{value}</text>;
     });
     return <g>{ticks}</g>;
   },
 
   renderLine (xScale, yScale) {
-    let path = d3.svg.line()
+    let p = d3.svg.line()
                  .x(d => xScale(d.x))
                  .y(d => yScale(d.y))
                  .interpolate(this.props.interpolate);
 
-    return <path className="line-chart-path" d={path(this.props.data)}/>;
+    return <path className="line-chart-path" d={p(this.props.data)}/>;
   },
 
   render () {
diff --git a/server/sonar-web/src/main/js/components/charts/treemap.js b/server/sonar-web/src/main/js/components/charts/treemap.js
index f06eda570d0..ad851948113 100644
--- a/server/sonar-web/src/main/js/components/charts/treemap.js
+++ b/server/sonar-web/src/main/js/components/charts/treemap.js
@@ -48,7 +48,7 @@ export const TreemapRect = React.createClass({
     return <a onClick={e => e.stopPropagation()}
               className="treemap-link"
               href={this.props.link}
-              style={{ fontSize: 12 }}><i className="icon-link"/></a>;
+              style={{ fontSize: 12 }}><span className="icon-link"/></a>;
   },
 
   render () {
@@ -70,7 +70,10 @@ export const TreemapRect = React.createClass({
       cursor: typeof this.props.onClick === 'function' ? 'pointer' : 'default'
     };
     let isTextVisible = this.props.width >= 40 && this.props.height >= 40;
-    return <div className="treemap-cell" {...tooltipAttrs} style={cellStyles} onClick={this.props.onClick}>
+    return <div className="treemap-cell"
+                {...tooltipAttrs}
+                style={cellStyles}
+                onClick={this.props.onClick}>
       <div className="treemap-inner" dangerouslySetInnerHTML={{ __html: this.props.label }}
            style={{ maxWidth: this.props.width, visibility: isTextVisible ? 'visible': 'hidden' }}/>
       {this.renderLink()}
@@ -80,14 +83,14 @@ export const TreemapRect = React.createClass({
 
 
 export const Treemap = React.createClass({
-  mixins: [ResizeMixin, TooltipsMixin],
-
   propTypes: {
     items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     height: React.PropTypes.number,
     onRectangleClick: React.PropTypes.func
   },
 
+  mixins: [ResizeMixin, TooltipsMixin],
+
   getInitialState() {
     return { width: this.props.width, height: this.props.height };
   },
diff --git a/server/sonar-web/src/main/js/components/charts/word-cloud.js b/server/sonar-web/src/main/js/components/charts/word-cloud.js
index 1edbc2274ec..3744d3fa6de 100644
--- a/server/sonar-web/src/main/js/components/charts/word-cloud.js
+++ b/server/sonar-web/src/main/js/components/charts/word-cloud.js
@@ -26,13 +26,13 @@ export const Word = React.createClass({
 
 
 export const WordCloud = React.createClass({
-  mixins: [TooltipsMixin],
-
   propTypes: {
     items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     sizeRange: React.PropTypes.arrayOf(React.PropTypes.number)
   },
 
+  mixins: [TooltipsMixin],
+
   getDefaultProps() {
     return {
       sizeRange: [10, 24]
diff --git a/server/sonar-web/src/main/js/components/shared/avatar.js b/server/sonar-web/src/main/js/components/shared/avatar.js
index 5060e088a00..6178343a7f7 100644
--- a/server/sonar-web/src/main/js/components/shared/avatar.js
+++ b/server/sonar-web/src/main/js/components/shared/avatar.js
@@ -16,6 +16,10 @@ export default React.createClass({
     const url = ('' + window.SS.lf.gravatarServerUrl)
             .replace('{EMAIL_MD5}', emailHash)
             .replace('{SIZE}', this.props.size * 2);
-    return <img className="rounded" src={url} width={this.props.size} height={this.props.size} alt={this.props.email}/>;
+    return <img className="rounded"
+                src={url}
+                width={this.props.size} 
+                height={this.props.size}
+                alt={this.props.email}/>;
   }
 });
diff --git a/server/sonar-web/src/main/js/components/shared/radio-toggle.js b/server/sonar-web/src/main/js/components/shared/radio-toggle.js
index eca4026c69f..126a486fcae 100644
--- a/server/sonar-web/src/main/js/components/shared/radio-toggle.js
+++ b/server/sonar-web/src/main/js/components/shared/radio-toggle.js
@@ -22,8 +22,13 @@ export default React.createClass({
     let htmlId = this.props.name + '__' + option.value;
     return (
         <li key={option.value}>
-          <input onChange={this.onChange} type="radio" name={this.props.name} value={option.value} id={htmlId}
-                 checked={checked} disabled={this.props.disabled}/>
+          <input onChange={this.onChange}
+                 type="radio"
+                 name={this.props.name}
+                 value={option.value}
+                 id={htmlId}
+                 checked={checked}
+                 disabled={this.props.disabled}/>
           <label htmlFor={htmlId}>{option.label}</label>
         </li>
     );
diff --git a/server/sonar-web/src/main/js/main/nav/global/global-nav-branding.js b/server/sonar-web/src/main/js/main/nav/global/global-nav-branding.js
index 1860d5eaf2a..1421220263f 100644
--- a/server/sonar-web/src/main/js/main/nav/global/global-nav-branding.js
+++ b/server/sonar-web/src/main/js/main/nav/global/global-nav-branding.js
@@ -6,7 +6,11 @@ export default React.createClass({
         width = this.props.logoWidth || 100,
         height = 30,
         title = window.t('layout.sonar.slogan');
-    return <img src={url} width={width} height={height} alt={title} title={title}/>;
+    return <img src={url}
+                width={width}
+                height={height}
+                alt={title} 
+                title={title}/>;
   },
 
   render() {