From 04f60b1bbbd809dc2dd5ea465481a977a54f163c Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Fri, 6 Nov 2015 17:57:39 +0100
Subject: SONAR-6331 apply feedback

---
 .../src/main/js/apps/overview/main/issues.js       | 67 ++++++----------------
 .../src/main/js/apps/overview/main/main.js         | 34 ++---------
 .../src/main/js/apps/overview/main/size.js         | 17 +++---
 server/sonar-web/src/main/less/pages/overview.less |  2 +
 4 files changed, 36 insertions(+), 84 deletions(-)

(limited to 'server')

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 e34bb88b073..7cff763c5ac 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
@@ -22,28 +22,6 @@ export const GeneralIssues = React.createClass({
     leakPeriodDate: React.PropTypes.object
   },
 
-  renderSeverities() {
-    let severities = SEVERITIES.map((s, index) => {
-      let measure = this.props.measures.issuesSeverities[index];
-      return <tr key={s}>
-        <td>
-          <SeverityHelper severity={s}/>
-        </td>
-        <td className="thin nowrap text-right">
-          <IssuesLink component={this.props.component.key} params={{ resolved: 'false', severities: s }}>
-            {formatMeasure(measure, 'SHORT_INT')}
-          </IssuesLink>
-        </td>
-      </tr>;
-    });
-
-    return <div style={{ width: 120 }}>
-      <table className="data">
-        <tbody>{severities}</tbody>
-      </table>
-    </div>;
-  },
-
   renderLeak () {
     if (!this.hasLeakPeriod()) {
       return null;
@@ -56,37 +34,31 @@ export const GeneralIssues = React.createClass({
         <Measure label={getMetricName('new_issues')}>
           <IssuesLink component={this.props.component.key}
                       params={{ resolved: 'false', createdAfter: createdAfter }}>
-            {formatMeasureVariation(this.props.leak.issues, 'SHORT_INT')}
+            {formatMeasure(this.props.leak.issues, 'SHORT_INT')}
           </IssuesLink>
         </Measure>
         <Measure label={getMetricName('new_debt')}>
           <IssuesLink component={this.props.component.key}
                       params={{ resolved: 'false', createdAfter: createdAfter, facetMode: 'debt' }}>
-            {formatMeasureVariation(this.props.leak.debt, 'SHORT_WORK_DUR')}
+            {formatMeasure(this.props.leak.debt, 'SHORT_WORK_DUR')}
           </IssuesLink>
         </Measure>
-      </MeasuresList>
-      <MeasuresList>
-        <Measure label={getMetricName('new_blocker_issues')}>
-          <span className="spacer-right"><SeverityIcon severity="BLOCKER"/></span>
-          <IssuesLink component={this.props.component.key}
-                      params={{ resolved: 'false', severities: 'BLOCKER', createdAfter: createdAfter }}>
-            {formatMeasureVariation(this.props.leak.issuesSeverities[0], 'SHORT_INT')}
-          </IssuesLink>
-        </Measure>
-        <Measure label={getMetricName('new_critical_issues')}>
-          <span className="spacer-right"><SeverityIcon severity="CRITICAL"/></span>
-          <IssuesLink component={this.props.component.key}
-                      params={{ resolved: 'false', severities: 'CRITICAL', createdAfter: createdAfter }}>
-            {formatMeasureVariation(this.props.leak.issuesSeverities[1], 'SHORT_INT')}
-          </IssuesLink>
-        </Measure>
-        <Measure label={getMetricName('new_open_issues')}>
-          <span className="spacer-right"><StatusIcon status="OPEN"/></span>
-          <IssuesLink component={this.props.component.key}
-                      params={{ resolved: 'false', statuses: 'OPEN,REOPENED', createdAfter: createdAfter }}>
-            {formatMeasureVariation(this.props.leak.issuesStatuses[0] + this.props.leak.issuesStatuses[1], 'SHORT_INT')}
-          </IssuesLink>
+        <Measure composite={true}>
+          <div>
+            <span className="spacer-right"><SeverityIcon severity="BLOCKER"/></span>
+            <IssuesLink component={this.props.component.key}
+                        params={{ resolved: 'false', severities: 'BLOCKER', createdAfter: createdAfter }}>
+              {formatMeasure(this.props.leak.issuesSeverities[0], 'SHORT_INT')}
+            </IssuesLink>
+          </div>
+          <div className="little-spacer-top">
+            <span className="spacer-right"><SeverityIcon severity="CRITICAL"/></span>
+            <IssuesLink component={this.props.component.key}
+                        params={{ resolved: 'false', severities: 'CRITICAL', createdAfter: createdAfter }}>
+              {formatMeasure(this.props.leak.issuesSeverities[1], 'SHORT_INT')}
+            </IssuesLink>
+          </div>
+          <div className="little-spacer-top">&nbsp;</div>
         </Measure>
       </MeasuresList>
       {this.renderTimeline('after')}
@@ -116,9 +88,6 @@ export const GeneralIssues = React.createClass({
                 {formatMeasure(this.props.measures.debt, 'SHORT_WORK_DUR')}
               </IssuesLink>
             </Measure>
-            <Measure composite={true}>
-              {this.renderSeverities()}
-            </Measure>
           </MeasuresList>
           {this.renderTimeline('before')}
         </DomainNutshell>
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 dd0d748788c..268bc4682d5 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
@@ -10,7 +10,7 @@ import { getPeriodLabel, getPeriodDate } from './../helpers/period-label';
 import { getMeasuresAndVariations } from '../../../api/measures';
 import { getFacet, getIssuesCount } from '../../../api/issues';
 import { getTimeMachineData } from '../../../api/time-machine';
-import { SEVERITIES, STATUSES } from '../../../helpers/constants';
+import { SEVERITIES } from '../../../helpers/constants';
 
 
 const METRICS_LIST = [
@@ -21,7 +21,7 @@ const METRICS_LIST = [
   'duplicated_lines_density',
   'duplicated_blocks',
   'ncloc',
-  'files'
+  'ncloc_language_distribution'
 ];
 
 const HISTORY_METRICS_LIST = [
@@ -55,23 +55,19 @@ export default React.createClass({
     Promise.all([
       this.requestMeasures(),
       this.requestIssuesAndDebt(),
-      this.requestIssuesSeverities(),
       this.requestLeakIssuesAndDebt(),
-      this.requestIssuesLeakSeverities(),
-      this.requestIssuesLeakStatuses()
+      this.requestIssuesLeakSeverities()
     ]).then(responses => {
       let measures = this.getMeasuresValues(responses[0], 'value');
       measures.issues = responses[1].issues;
       measures.debt = responses[1].debt;
-      measures.issuesSeverities = SEVERITIES.map(s => getFacetValue(responses[2].facet, s));
 
       let leak;
       if (this.state.leakPeriodLabel) {
         leak = this.getMeasuresValues(responses[0], 'var' + this.props.leakPeriodIndex);
-        leak.issues = responses[3].issues;
-        leak.debt = responses[3].debt;
-        leak.issuesSeverities = SEVERITIES.map(s => getFacetValue(responses[4].facet, s));
-        leak.issuesStatuses = STATUSES.map(s => getFacetValue(responses[5].facet, s));
+        leak.issues = responses[2].issues;
+        leak.debt = responses[2].debt;
+        leak.issuesSeverities = SEVERITIES.map(s => getFacetValue(responses[3].facet, s));
       }
 
       this.setState({
@@ -119,10 +115,6 @@ export default React.createClass({
     });
   },
 
-  requestIssuesSeverities() {
-    return getFacet({ componentUuids: this.props.component.id, resolved: 'false' }, 'severities');
-  },
-
   requestIssuesLeakSeverities() {
     if (!this.state.leakPeriodLabel) {
       return Promise.resolve();
@@ -137,20 +129,6 @@ export default React.createClass({
     }, 'severities');
   },
 
-  requestIssuesLeakStatuses() {
-    if (!this.state.leakPeriodLabel) {
-      return Promise.resolve();
-    }
-
-    let createdAfter = moment(this.state.leakPeriodDate).format('YYYY-MM-DDTHH:mm:ssZZ');
-
-    return getFacet({
-      componentUuids: this.props.component.id,
-      createdAfter: createdAfter,
-      resolved: 'false'
-    }, 'statuses');
-  },
-
   requestHistory () {
     let metrics = HISTORY_METRICS_LIST.join(',');
     return getTimeMachineData(this.props.component.key, metrics).then(r => {
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 e639a239e7e..a9e207d5908 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
@@ -5,6 +5,7 @@ import DrilldownLink from '../helpers/drilldown-link';
 import { TooltipsMixin } from '../../../components/mixins/tooltips-mixin';
 import { getMetricName } from '../helpers/metrics';
 import { formatMeasure, formatMeasureVariation } from '../../../helpers/measures';
+import { LanguageDistribution } from '../size/language-distribution';
 
 
 export const GeneralSize = React.createClass({
@@ -25,14 +26,18 @@ export const GeneralSize = React.createClass({
         <Measure label={getMetricName('ncloc')}>
           {formatMeasureVariation(this.props.leak['ncloc'], 'SHORT_INT')}
         </Measure>
-        <Measure label={getMetricName('files')}>
-          {formatMeasureVariation(this.props.leak['files'], 'SHORT_INT')}
-        </Measure>
       </MeasuresList>
       {this.renderTimeline('after')}
     </DomainLeak>;
   },
 
+  renderLanguageDistribution() {
+    return <div style={{ width: 200 }}>
+      <LanguageDistribution lines={this.props.measures['ncloc']}
+                            distribution={this.props.measures['ncloc_language_distribution']}/>
+    </div>;
+  },
+
   render () {
     return <Domain>
       <DomainHeader {...this.props} title="Size" linkTo="/size"/>
@@ -45,10 +50,8 @@ export const GeneralSize = React.createClass({
                 {formatMeasure(this.props.measures['ncloc'], 'SHORT_INT')}
               </DrilldownLink>
             </Measure>
-            <Measure label={getMetricName('files')}>
-              <DrilldownLink component={this.props.component.key} metric="files">
-                {formatMeasure(this.props.measures['files'], 'SHORT_INT')}
-              </DrilldownLink>
+            <Measure composite={true}>
+              {this.renderLanguageDistribution()}
             </Measure>
           </MeasuresList>
           {this.renderTimeline('before')}
diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index a2142d9be4d..86067345095 100644
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -153,6 +153,8 @@
 .overview-domain-nutshell,
 .overview-domain-leak {
   position: relative;
+  display: flex;
+  flex-direction: column;
   padding: 30px 10px;
 }
 
-- 
cgit v1.2.3