SONAR-8611 Add shortcuts to project activity page on project dashboard

6 files changed, 65 insertions, 28 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
index db8f370c60f..1de56542c21 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
@@ -69,7 +69,7 @@ class BugsAndVulnerabilities extends React.PureComponent {
               {this.props.renderRating('new_reliability_rating')}
             </div>
             <div className="overview-domain-measure-label">
-              <span className="little-spacer-right"><BugIcon /></span>
+              <BugIcon className="little-spacer-right" />
               {getMetricName('new_bugs')}
             </div>
           </div>
@@ -82,7 +82,7 @@ class BugsAndVulnerabilities extends React.PureComponent {
               {this.props.renderRating('new_security_rating')}
             </div>
             <div className="overview-domain-measure-label">
-              <span className="little-spacer-right"><VulnerabilityIcon /></span>
+              <VulnerabilityIcon className="little-spacer-right" />
               {getMetricName('new_vulnerabilities')}
             </div>
           </div>
@@ -103,8 +103,9 @@ class BugsAndVulnerabilities extends React.PureComponent {
                 {this.props.renderRating('reliability_rating')}
               </div>
               <div className="overview-domain-measure-label">
-                <span className="little-spacer-right"><BugIcon /></span>
+                <BugIcon className="little-spacer-right " />
                 {getMetricName('bugs')}
+                {this.props.renderHistoryLink('bugs')}
               </div>
             </div>
           </div>
@@ -116,8 +117,9 @@ class BugsAndVulnerabilities extends React.PureComponent {
                 {this.props.renderRating('security_rating')}
               </div>
               <div className="overview-domain-measure-label">
-                <span className="little-spacer-right"><VulnerabilityIcon /></span>
+                <VulnerabilityIcon className="little-spacer-right " />
                 {getMetricName('vulnerabilities')}
+                {this.props.renderHistoryLink('vulnerabilities')}
               </div>
             </div>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
index 44ef34fa0a4..6ae5012f443 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
@@ -99,7 +99,7 @@ class CodeSmells extends React.PureComponent {
               {this.props.renderIssues('new_code_smells', 'CODE_SMELL')}
             </div>
             <div className="overview-domain-measure-label">
-              <span className="little-spacer-right"><CodeSmellIcon /></span>
+              <CodeSmellIcon className="little-spacer-right" />
               {getMetricName('new_code_smells')}
             </div>
           </div>
@@ -123,6 +123,7 @@ class CodeSmells extends React.PureComponent {
               </div>
               <div className="overview-domain-measure-label">
                 {getMetricName('effort')}
+                {this.props.renderHistoryLink('sqale_rating')}
               </div>
             </div>
           </div>
@@ -133,8 +134,9 @@ class CodeSmells extends React.PureComponent {
                 {this.props.renderIssues('code_smells', 'CODE_SMELL')}
               </div>
               <div className="overview-domain-measure-label">
-                <span className="little-spacer-right"><CodeSmellIcon /></span>
+                <CodeSmellIcon className="little-spacer-right " />
                 {getMetricName('code_smells')}
+                {this.props.renderHistoryLink('code_smells')}
               </div>
             </div>
           </div>
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 b2eeb752d25..2c86b6e6970 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
@@ -76,6 +76,7 @@ class Coverage extends React.PureComponent {
 
           <div className="overview-domain-measure-label">
             {getMetricName('coverage')}
+            {this.props.renderHistoryLink('coverage')}
           </div>
         </div>
       </div>
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 d0989dcddf1..c6e9a8cd18f 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
@@ -58,6 +58,7 @@ class Duplications extends React.PureComponent {
 
           <div className="overview-domain-measure-label">
             {getMetricName('duplications')}
+            {this.props.renderHistoryLink('duplicated_lines_density')}
           </div>
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
index f6d450c661a..2bd0e72530b 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
@@ -21,6 +21,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import moment from 'moment';
 import { DrilldownLink } from '../../../components/shared/drilldown-link';
+import HistoryIcon from '../../../components/icons-components/HistoryIcon';
 import Rating from './../../../components/ui/Rating';
 import Timeline from '../components/Timeline';
 import {
@@ -33,13 +34,13 @@ import {
 } from '../../../helpers/measures';
 import { translateWithParameters } from '../../../helpers/l10n';
 import { getPeriodDate } from '../../../helpers/periods';
-import { getComponentIssuesUrl } from '../../../helpers/urls';
+import { getComponentIssuesUrl, getComponentMeasureHistory } from '../../../helpers/urls';
 
 export default function enhance(ComposedComponent) {
   return class extends React.PureComponent {
     static displayName = `enhance(${ComposedComponent.displayName})}`;
 
-    getValue(measure) {
+    getValue = measure => {
       const { leakPeriod } = this.props;
 
       if (!measure) {
@@ -49,9 +50,9 @@ export default function enhance(ComposedComponent) {
       return isDiffMetric(measure.metric.key)
         ? getPeriodValue(measure, leakPeriod.index)
         : measure.value;
-    }
+    };
 
-    renderHeader(domain, label) {
+    renderHeader = (domain, label) => {
       const { component } = this.props;
       const domainUrl = {
         pathname: `/component_measures/domain/${domain}`,
@@ -65,9 +66,9 @@ export default function enhance(ComposedComponent) {
           </div>
         </div>
       );
-    }
+    };
 
-    renderMeasure(metricKey) {
+    renderMeasure = metricKey => {
       const { measures, component } = this.props;
       const measure = measures.find(measure => measure.metric.key === metricKey);
 
@@ -87,12 +88,13 @@ export default function enhance(ComposedComponent) {
 
           <div className="overview-domain-measure-label">
             {measure.metric.name}
+            {this.renderHistoryLink(measure.metric.key)}
           </div>
         </div>
       );
-    }
+    };
 
-    renderMeasureVariation(metricKey, customLabel) {
+    renderMeasureVariation = (metricKey, customLabel) => {
       const NO_VALUE = '—';
       const { measures, leakPeriod } = this.props;
       const measure = measures.find(measure => measure.metric.key === metricKey);
@@ -111,8 +113,8 @@ export default function enhance(ComposedComponent) {
           </div>
         </div>
       );
-    }
-    renderRating(metricKey) {
+    };
+    renderRating = metricKey => {
       const { component, measures } = this.props;
       const measure = measures.find(measure => measure.metric.key === metricKey);
       if (!measure) {
@@ -127,8 +129,8 @@ export default function enhance(ComposedComponent) {
           </DrilldownLink>
         </div>
       );
-    }
-    renderIssues(metric, type) {
+    };
+    renderIssues = (metric, type) => {
       const { measures, component } = this.props;
       const measure = measures.find(measure => measure.metric.key === metric);
       const value = this.getValue(measure);
@@ -148,8 +150,19 @@ export default function enhance(ComposedComponent) {
           </span>
         </Link>
       );
-    }
-    renderTimeline(metricKey, range, children) {
+    };
+    renderHistoryLink = metricKey => {
+      const linkClass =
+        'button button-small button-compact spacer-left overview-domain-measure-history-link';
+      return (
+        <Link
+          className={linkClass}
+          to={getComponentMeasureHistory(this.props.component.key, metricKey)}>
+          <HistoryIcon />
+        </Link>
+      );
+    };
+    renderTimeline = (metricKey, range, children) => {
       if (!this.props.history) {
         return null;
       }
@@ -167,18 +180,19 @@ export default function enhance(ComposedComponent) {
           {children}
         </div>
       );
-    }
+    };
     render() {
       return (
         <ComposedComponent
           {...this.props}
-          getValue={this.getValue.bind(this)}
-          renderHeader={this.renderHeader.bind(this)}
-          renderMeasure={this.renderMeasure.bind(this)}
-          renderMeasureVariation={this.renderMeasureVariation.bind(this)}
-          renderRating={this.renderRating.bind(this)}
-          renderIssues={this.renderIssues.bind(this)}
-          renderTimeline={this.renderTimeline.bind(this)}
+          getValue={this.getValue}
+          renderHeader={this.renderHeader}
+          renderHistoryLink={this.renderHistoryLink}
+          renderMeasure={this.renderMeasure}
+          renderMeasureVariation={this.renderMeasureVariation}
+          renderRating={this.renderRating}
+          renderIssues={this.renderIssues}
+          renderTimeline={this.renderTimeline}
         />
       );
     }
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 45911113921..5de0ceca320 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -246,10 +246,27 @@
   margin-top: 10px;
 }
 
+.overview-domain-measure-label > svg {
+  margin-top: 3px;
+}
+
 .overview-domain-leak .overview-domain-measure-label {
   text-align: center;
 }
 
+.overview-domain-leak .overview-domain-measure-label > svg {
+  margin-top: 0;
+}
+
+.overview-domain-measure-history-link {
+  vertical-align: bottom;
+  visibility: hidden;
+}
+
+.overview-domain-measure:hover .overview-domain-measure-history-link {
+  visibility: visible;
+}
+
 .overview-domain-measure-sup {
   display: inline-block;
   vertical-align: top;