SONAR-9403 Replace the measures history graph by a link to the project activity page

11 files changed, 66 insertions, 52 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js b/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js
index 3b3672ed4f1..aa81154e99f 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js
@@ -20,9 +20,9 @@
 import React from 'react';
 import Rating from '../../../components/ui/Rating';
 import Level from '../../../components/ui/Level';
-import { formatMeasure } from '../../../helpers/measures';
+import { formatMeasure, isDiffMetric } from '../../../helpers/measures';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
-import { formatLeak, isDiffMetric, getRatingTooltip } from '../utils';
+import { formatLeak, getRatingTooltip } from '../utils';
 
 export default class Measure extends React.PureComponent {
   static propTypes = {
@@ -33,7 +33,7 @@ export default class Measure extends React.PureComponent {
   };
 
   renderRating(measure, metric) {
-    const value = isDiffMetric(metric) ? measure.leak : measure.value;
+    const value = isDiffMetric(metric.key) ? measure.leak : measure.value;
     const tooltip = getRatingTooltip(metric.key, value);
     const rating = <Rating value={value} />;
 
@@ -64,7 +64,7 @@ export default class Measure extends React.PureComponent {
       return <Level level={measure.value} />;
     }
 
-    const formattedValue = isDiffMetric(finalMetric)
+    const formattedValue = isDiffMetric(finalMetric.key)
       ? formatLeak(measure.leak, finalMetric, { decimals })
       : formatMeasure(measure.value, finalMetric.type, { decimals });
     return (
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js
index 0c6f0cfd625..ab1c9386456 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js
@@ -110,10 +110,11 @@ export default class MeasureDetails extends React.PureComponent {
         </div>
 
         <MeasureDetailsHeader
+          component={component}
+          leakPeriod={period}
           measure={measure}
           metric={metric}
           secondaryMeasure={secondaryMeasure}
-          leakPeriod={period}
         />
 
         {measure &&
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
index d3cdb27ff1a..adaada9f517 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsHeader.js
@@ -18,24 +18,40 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import { Link } from 'react-router';
 import Measure from './../components/Measure';
 import LanguageDistribution from '../../../components/charts/LanguageDistribution';
 import LeakPeriodLegend from '../components/LeakPeriodLegend';
+import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
+import HistoryIcon from '../../../components/icons-components/HistoryIcon';
 import { ComplexityDistribution } from '../../../components/shared/complexity-distribution';
-import { isDiffMetric } from '../utils';
+import { isDiffMetric } from '../../../helpers/measures';
 import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import { getComponentMeasureHistory } from '../../../helpers/urls';
 import { getLocalizedMetricName } from '../../../helpers/l10n';
-import IssueTypeIcon from '../../../components/ui/IssueTypeIcon';
 
-export default function MeasureDetailsHeader({ measure, metric, secondaryMeasure, leakPeriod }) {
+export default function MeasureDetailsHeader({
+  component,
+  measure,
+  metric,
+  secondaryMeasure,
+  leakPeriod
+}) {
+  const isDiff = isDiffMetric(metric.key);
   return (
     <header className="measure-details-header">
       <h2 className="measure-details-metric">
         <IssueTypeIcon query={metric.key} className="little-spacer-right" />
         {getLocalizedMetricName(metric)}
+        {!isDiff &&
+          <Link
+            to={getComponentMeasureHistory(component.key, metric.key)}
+            className="spacer-left button button-small button-compact">
+            <HistoryIcon />
+          </Link>}
       </h2>
 
-      {isDiffMetric(metric) &&
+      {isDiff &&
         <div className="pull-right">
           <LeakPeriodLegend period={leakPeriod} />
         </div>}
@@ -43,7 +59,7 @@ export default function MeasureDetailsHeader({ measure, metric, secondaryMeasure
       <TooltipsContainer options={{ html: false }}>
         <div className="measure-details-value">
 
-          {isDiffMetric(metric)
+          {isDiff
             ? <div className="measure-details-value-leak">
                 <Measure measure={measure} metric={metric} />
               </div>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/Breadcrumb.js b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/Breadcrumb.js
index 5261badeaf2..15ac0ded735 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/Breadcrumb.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/Breadcrumb.js
@@ -19,8 +19,8 @@
  */
 import React from 'react';
 import QualifierIcon from '../../../../components/shared/QualifierIcon';
-import { isDiffMetric, formatLeak } from '../../utils';
-import { formatMeasure } from '../../../../helpers/measures';
+import { formatLeak } from '../../utils';
+import { formatMeasure, isDiffMetric } from '../../../../helpers/measures';
 
 const Breadcrumb = ({ component, metric, onBrowse }) => {
   const handleClick = e => {
@@ -40,7 +40,7 @@ const Breadcrumb = ({ component, metric, onBrowse }) => {
     inner = <span>{component.name}</span>;
   }
 
-  const value = isDiffMetric(metric)
+  const value = isDiffMetric(metric.key)
     ? formatLeak(component.leak, metric)
     : formatMeasure(component.value, metric.type);
 
diff --git a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/MeasureDrilldown.js b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/MeasureDrilldown.js
index fdde4ab81bf..f54768defb7 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/MeasureDrilldown.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/details/drilldown/MeasureDrilldown.js
@@ -23,8 +23,7 @@ import IconList from './../../components/IconList';
 import IconTree from './../../components/IconTree';
 import IconBubbles from './../../components/IconBubbles';
 import IconTreemap from './../../components/IconTreemap';
-import IconHistory from './../../components/IconHistory';
-import { hasHistory, hasBubbleChart, hasTreemap } from '../../utils';
+import { hasBubbleChart, hasTreemap } from '../../utils';
 import { translate } from '../../../../helpers/l10n';
 
 export default function MeasureDrilldown(props) {
@@ -85,19 +84,6 @@ export default function MeasureDrilldown(props) {
               {translate('component_measures.tab.treemap')}
             </Link>
           </li>}
-
-        {hasHistory(metric.key) &&
-          <li>
-            <Link
-              activeClassName="active"
-              to={{
-                pathname: `/component_measures/metric/${metric.key}/history`,
-                query: { id: component.key }
-              }}>
-              <IconHistory />
-              {translate('component_measures.tab.history')}
-            </Link>
-          </li>}
       </ul>
 
       {child}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/home/MeasureListValue.js b/server/sonar-web/src/main/js/apps/component-measures/home/MeasureListValue.js
index 165980283b1..da121fc6995 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/home/MeasureListValue.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/home/MeasureListValue.js
@@ -19,12 +19,12 @@
  */
 import React from 'react';
 import Measure from '../components/Measure';
-import { isDiffMetric } from '../utils';
+import { isDiffMetric } from '../../../helpers/measures';
 
 const MeasureListValue = ({ measure }) => {
   const { metric } = measure;
 
-  if (isDiffMetric(metric)) {
+  if (isDiffMetric(metric.key)) {
     return (
       <div
         id={`measure-${measure.metric.key}-leak`}
diff --git a/server/sonar-web/src/main/js/apps/component-measures/hooks.js b/server/sonar-web/src/main/js/apps/component-measures/hooks.js
index 4aad79c6034..001948f1b59 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/hooks.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/hooks.js
@@ -17,12 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { hasHistory } from './utils';
+import { isDiffMetric } from '../../helpers/measures';
 
 export function checkHistoryExistence(nextState, replace) {
   const { metricKey } = nextState.params;
 
-  if (!hasHistory(metricKey)) {
+  if (isDiffMetric(metricKey)) {
     replace({
       pathname: metricKey,
       query: nextState.location.query
diff --git a/server/sonar-web/src/main/js/apps/component-measures/styles.css b/server/sonar-web/src/main/js/apps/component-measures/styles.css
index 12730c548c0..2d753f413ac 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/styles.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/styles.css
@@ -147,12 +147,12 @@
   margin-bottom: 10px;
 }
 
-.measure-details-metric > a {
+.measure-details-metric > a:not(.button) {
   border: none;
   color: #444;
 }
 
-.measure-details-metric > a:hover {
+.measure-details-metric > a:not(.button):hover {
   color: #236a97;
 }
 
diff --git a/server/sonar-web/src/main/js/apps/component-measures/utils.js b/server/sonar-web/src/main/js/apps/component-measures/utils.js
index 91c3e3f92b2..20595c7ab18 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/utils.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/utils.js
@@ -21,13 +21,10 @@ import bubbles from './config/bubbles';
 import {
   formatMeasure,
   formatMeasureVariation,
-  getRatingTooltip as nextGetRatingTooltip
+  getRatingTooltip as nextGetRatingTooltip,
+  isDiffMetric
 } from '../../helpers/measures';
 
-export function isDiffMetric(metric) {
-  return metric.key.indexOf('new_') === 0;
-}
-
 export function getLeakValue(measure, periodIndex = 1) {
   if (!measure) {
     return null;
@@ -63,7 +60,7 @@ export function getSingleLeakValue(measures, periodIndex = 1) {
 }
 
 export function formatLeak(value, metric, options) {
-  if (isDiffMetric(metric)) {
+  if (isDiffMetric(metric.key)) {
     return formatMeasure(value, metric.type, options);
   } else {
     return formatMeasureVariation(value, metric.type, options);
@@ -102,10 +99,6 @@ export function enhanceWithMeasure(components, metric, periodIndex = 1) {
   });
 }
 
-export function hasHistory(metricKey) {
-  return metricKey.indexOf('new_') !== 0;
-}
-
 export function hasBubbleChart(domainName) {
   return !!bubbles[domainName];
 }
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/IconHistory.js b/server/sonar-web/src/main/js/components/icons-components/HistoryIcon.js
index 19db8dc375d..7fed99c67bc 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/IconHistory.js
+++ b/server/sonar-web/src/main/js/components/icons-components/HistoryIcon.js
@@ -17,19 +17,24 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 
-export default function IconHistory() {
+type Props = { className?: string, size?: number };
+
+export default function IconHistory({ className, size = 16 }: Props) {
   /* eslint max-len: 0 */
   return (
     <svg
-      className="measure-tab-icon"
-      viewBox="0 0 512 448"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      strokeLinejoin="round"
-      strokeMiterlimit="1.414">
-      <path d="M512 384v32H0V32h32v352h480zM480 72v108.75q0 5.25-4.875 7.375t-8.875-1.875L436 156 277.75 314.25q-2.5 2.5-5.75 2.5t-5.75-2.5L208 256 104 360l-48-48 146.25-146.25q2.5-2.5 5.75-2.5t5.75 2.5L272 224l116-116-30.25-30.25q-4-4-1.875-8.875T363.25 64H472q3.5 0 5.75 2.25T480 72z" />
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}>
+      <path
+        style={{ fill: 'currentColor' }}
+        d="M14.7 3.4v3.3c0 .1 0 .2-.1.2s-.2 0-.3-.1l-.9-.9-4.8 4.8c-.1.1-.1.1-.2.1s-.1 0-.2-.1L6.4 9l-3.2 3.2-1.5-1.5 4.5-4.5c.1-.1.1-.1.2-.1s.1 0 .2.1L8.4 8l3.5-3.5-.9-1c-.1-.1-.1-.2-.1-.3s.1-.1.2-.1h3.3c.1 0 .1 0 .2.1.1 0 .1.1.1.2z"
+      />
     </svg>
   );
 }
diff --git a/server/sonar-web/src/main/js/helpers/urls.js b/server/sonar-web/src/main/js/helpers/urls.js
index 7f512e298c8..07103e12255 100644
--- a/server/sonar-web/src/main/js/helpers/urls.js
+++ b/server/sonar-web/src/main/js/helpers/urls.js
@@ -69,6 +69,19 @@ export function getComponentDrilldownUrl(componentKey, metric) {
 }
 
 /**
+ * Generate URL for a component's measure history
+ * @param {string} componentKey
+ * @param {string} metric
+ * @returns {Object}
+ */
+export function getComponentMeasureHistory(componentKey, metric) {
+  return {
+    pathname: '/project/activity',
+    query: { id: componentKey, graph: 'custom', custom_metrics: metric }
+  };
+}
+
+/**
  * Generate URL for a component's permissions page
  * @param {string} componentKey
  * @returns {Object}