SONAR-13391 handle missing newcode

12 files changed, 4292 insertions, 4734 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverview.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverview.tsx
index 6268623fb94..80a41ecc993 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverview.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverview.tsx
@@ -403,8 +403,6 @@ export default class BranchOverview extends React.PureComponent<Props, State> {
       qgStatuses
     } = this.state;
 
-    const leakPeriod = component.qualifier === ComponentQualifier.Application ? appLeak : period;
-
     const projectIsEmpty =
       loadingStatus === false &&
       (measures === undefined ||
@@ -415,16 +413,17 @@ export default class BranchOverview extends React.PureComponent<Props, State> {
     return (
       <BranchOverviewRenderer
         analyses={analyses}
+        appLeak={appLeak}
         branchLike={branchLike}
         component={component}
         graph={graph}
-        leakPeriod={leakPeriod}
         loadingHistory={loadingHistory}
         loadingStatus={loadingStatus}
         measures={measures}
         measuresHistory={measuresHistory}
         metrics={metrics}
         onGraphChange={this.handleGraphChange}
+        period={period}
         projectIsEmpty={projectIsEmpty}
         qgStatuses={qgStatuses}
       />
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx
index 45b0f93ce0f..58443d64bd4 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchOverviewRenderer.tsx
@@ -22,6 +22,7 @@ import { parseDate } from 'sonar-ui-common/helpers/dates';
 import A11ySkipTarget from '../../../app/components/a11y/A11ySkipTarget';
 import { ApplicationPeriod } from '../../../types/application';
 import { BranchLike } from '../../../types/branch-like';
+import { ComponentQualifier } from '../../../types/component';
 import { GraphType, MeasureHistory } from '../../../types/project-activity';
 import { QualityGateStatus } from '../../../types/quality-gates';
 import ActivityPanel from './ActivityPanel';
@@ -31,16 +32,17 @@ import QualityGatePanel from './QualityGatePanel';
 
 export interface BranchOverviewRendererProps {
   analyses?: T.Analysis[];
+  appLeak?: ApplicationPeriod;
   branchLike?: BranchLike;
   component: T.Component;
   graph?: GraphType;
-  leakPeriod?: T.Period | ApplicationPeriod;
   loadingHistory?: boolean;
   loadingStatus?: boolean;
   measures?: T.MeasureEnhanced[];
   measuresHistory?: MeasureHistory[];
   metrics?: T.Metric[];
   onGraphChange: (graph: GraphType) => void;
+  period?: T.Period;
   projectIsEmpty?: boolean;
   qgStatuses?: QualityGateStatus[];
 }
@@ -48,20 +50,23 @@ export interface BranchOverviewRendererProps {
 export function BranchOverviewRenderer(props: BranchOverviewRendererProps) {
   const {
     analyses,
+    appLeak,
     branchLike,
     component,
     graph,
-    leakPeriod,
     loadingHistory,
     loadingStatus,
     measures,
     measuresHistory = [],
     metrics = [],
     onGraphChange,
+    period,
     projectIsEmpty,
     qgStatuses
   } = props;
 
+  const leakPeriod = component.qualifier === ComponentQualifier.Application ? appLeak : period;
+
   return (
     <div className="page page-limited">
       <div className="overview">
@@ -82,11 +87,12 @@ export function BranchOverviewRenderer(props: BranchOverviewRendererProps) {
             <div className="flex-1">
               <div className="display-flex-column">
                 <MeasuresPanel
+                  appLeak={appLeak}
                   branchLike={branchLike}
                   component={component}
-                  leakPeriod={leakPeriod}
                   loading={loadingStatus}
                   measures={measures}
+                  period={period}
                 />
 
                 <ActivityPanel
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx
index 73521f0e274..0dddf9776bb 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanel.tsx
@@ -18,34 +18,30 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router';
 import BoxedTabs from 'sonar-ui-common/components/controls/BoxedTabs';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { isDiffMetric } from 'sonar-ui-common/helpers/measures';
-import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
 import { rawSizes } from '../../../app/theme';
 import { findMeasure } from '../../../helpers/measures';
 import { ApplicationPeriod } from '../../../types/application';
 import { BranchLike } from '../../../types/branch-like';
 import { ComponentQualifier } from '../../../types/component';
 import { MetricKey } from '../../../types/metrics';
-import IssueLabel from '../components/IssueLabel';
-import IssueRating from '../components/IssueRating';
 import MeasurementLabel from '../components/MeasurementLabel';
 import { IssueType, MeasurementType } from '../utils';
-import DebtValue from './DebtValue';
 import { DrilldownMeasureValue } from './DrilldownMeasureValue';
 import { LeakPeriodInfo } from './LeakPeriodInfo';
-import SecurityHotspotsReviewed from './SecurityHotspotsReviewed';
+import MeasuresPanelIssueMeasureRow from './MeasuresPanelIssueMeasureRow';
+import MeasuresPanelNoNewCode from './MeasuresPanelNoNewCode';
 
 export interface MeasuresPanelProps {
+  appLeak?: ApplicationPeriod;
   branchLike?: BranchLike;
   component: T.Component;
-  leakPeriod?: T.Period | ApplicationPeriod;
   loading?: boolean;
   measures?: T.MeasureEnhanced[];
+  period?: T.Period;
 }
 
 export enum MeasuresPanelTabs {
@@ -54,10 +50,11 @@ export enum MeasuresPanelTabs {
 }
 
 export function MeasuresPanel(props: MeasuresPanelProps) {
-  const { branchLike, component, loading, leakPeriod, measures = [] } = props;
+  const { appLeak, branchLike, component, loading, measures = [], period } = props;
 
   const hasDiffMeasures = measures.some(m => isDiffMetric(m.metric.key));
   const isApp = component.qualifier === ComponentQualifier.Application;
+  const leakPeriod = isApp ? appLeak : period;
 
   const [tab, selectTab] = React.useState(MeasuresPanelTabs.New);
 
@@ -109,34 +106,11 @@ export function MeasuresPanel(props: MeasuresPanelProps) {
 
           <div className="overview-panel-content flex-1 bordered">
             {!hasDiffMeasures && isNewCodeTab ? (
-              <div
-                className="display-flex-center display-flex-justify-center"
-                style={{ height: 500 }}>
-                <img
-                  alt="" /* Make screen readers ignore this image; it's purely eye candy. */
-                  className="spacer-right"
-                  height={52}
-                  src={`${getBaseUrl()}/images/source-code.svg`}
-                />
-                <div className="big-spacer-left text-muted" style={{ maxWidth: 500 }}>
-                  <p className="spacer-bottom big-spacer-top big">
-                    {translate('overview.measures.empty_explanation')}
-                  </p>
-                  <p>
-                    <FormattedMessage
-                      defaultMessage={translate('overview.measures.empty_link')}
-                      id="overview.measures.empty_link"
-                      values={{
-                        learn_more_link: (
-                          <Link to="/documentation/user-guide/clean-as-you-code/">
-                            {translate('learn_more')}
-                          </Link>
-                        )
-                      }}
-                    />
-                  </p>
-                </div>
-              </div>
+              <MeasuresPanelNoNewCode
+                branchLike={branchLike}
+                component={component}
+                period={period}
+              />
             ) : (
               <>
                 {[
@@ -145,68 +119,14 @@ export function MeasuresPanel(props: MeasuresPanelProps) {
                   IssueType.SecurityHotspot,
                   IssueType.CodeSmell
                 ].map((type: IssueType) => (
-                  <div
-                    className="display-flex-row overview-measures-row"
-                    data-test={`overview__measures-${type.toString().toLowerCase()}`}
-                    key={type}>
-                    {type === IssueType.CodeSmell ? (
-                      <>
-                        <div className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left">
-                          <DebtValue
-                            branchLike={branchLike}
-                            component={component}
-                            measures={measures}
-                            useDiffMetric={isNewCodeTab}
-                          />
-                        </div>
-                        <div className="flex-1 small display-flex-center">
-                          <IssueLabel
-                            branchLike={branchLike}
-                            component={component}
-                            measures={measures}
-                            type={type}
-                            useDiffMetric={isNewCodeTab}
-                          />
-                        </div>
-                      </>
-                    ) : (
-                      <div className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left">
-                        <IssueLabel
-                          branchLike={branchLike}
-                          component={component}
-                          docTooltip={
-                            type === IssueType.SecurityHotspot
-                              ? import(
-                                  /* webpackMode: "eager" */ 'Docs/tooltips/metrics/security-hotspots.md'
-                                )
-                              : undefined
-                          }
-                          measures={measures}
-                          type={type}
-                          useDiffMetric={isNewCodeTab}
-                        />
-                      </div>
-                    )}
-                    {type === IssueType.SecurityHotspot && (
-                      <div className="flex-1 small display-flex-center">
-                        <SecurityHotspotsReviewed
-                          measures={measures}
-                          useDiffMetric={isNewCodeTab}
-                        />
-                      </div>
-                    )}
-                    {(!isApp || tab === MeasuresPanelTabs.Overall) && (
-                      <div className="overview-panel-big-padded overview-measures-aside display-flex-center">
-                        <IssueRating
-                          branchLike={branchLike}
-                          component={component}
-                          measures={measures}
-                          type={type}
-                          useDiffMetric={isNewCodeTab}
-                        />
-                      </div>
-                    )}
-                  </div>
+                  <MeasuresPanelIssueMeasureRow
+                    branchLike={branchLike}
+                    component={component}
+                    isNewCodeTab={isNewCodeTab}
+                    key={type}
+                    measures={measures}
+                    type={type}
+                  />
                 ))}
 
                 <div className="display-flex-row overview-measures-row">
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelIssueMeasureRow.tsx b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelIssueMeasureRow.tsx
new file mode 100644
index 00000000000..dfe8795ce2c
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelIssueMeasureRow.tsx
@@ -0,0 +1,100 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { BranchLike } from '../../../types/branch-like';
+import { ComponentQualifier } from '../../../types/component';
+import IssueLabel from '../components/IssueLabel';
+import IssueRating from '../components/IssueRating';
+import { IssueType } from '../utils';
+import DebtValue from './DebtValue';
+import SecurityHotspotsReviewed from './SecurityHotspotsReviewed';
+
+export interface MeasuresPanelIssueMeasureRowProps {
+  branchLike?: BranchLike;
+  component: T.Component;
+  isNewCodeTab: boolean;
+  measures: T.MeasureEnhanced[];
+  type: IssueType;
+}
+
+export default function MeasuresPanelIssueMeasureRow(props: MeasuresPanelIssueMeasureRowProps) {
+  const { branchLike, component, isNewCodeTab, measures, type } = props;
+
+  const isApp = component.qualifier === ComponentQualifier.Application;
+
+  return (
+    <div
+      className="display-flex-row overview-measures-row"
+      data-test={`overview__measures-${type.toString().toLowerCase()}`}>
+      {type === IssueType.CodeSmell ? (
+        <>
+          <div className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left">
+            <DebtValue
+              branchLike={branchLike}
+              component={component}
+              measures={measures}
+              useDiffMetric={isNewCodeTab}
+            />
+          </div>
+          <div className="flex-1 small display-flex-center">
+            <IssueLabel
+              branchLike={branchLike}
+              component={component}
+              measures={measures}
+              type={type}
+              useDiffMetric={isNewCodeTab}
+            />
+          </div>
+        </>
+      ) : (
+        <div className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left">
+          <IssueLabel
+            branchLike={branchLike}
+            component={component}
+            docTooltip={
+              type === IssueType.SecurityHotspot
+                ? import(/* webpackMode: "eager" */ 'Docs/tooltips/metrics/security-hotspots.md')
+                : undefined
+            }
+            measures={measures}
+            type={type}
+            useDiffMetric={isNewCodeTab}
+          />
+        </div>
+      )}
+      {type === IssueType.SecurityHotspot && (
+        <div className="flex-1 small display-flex-center">
+          <SecurityHotspotsReviewed measures={measures} useDiffMetric={isNewCodeTab} />
+        </div>
+      )}
+      {(!isApp || !isNewCodeTab) && (
+        <div className="overview-panel-big-padded overview-measures-aside display-flex-center">
+          <IssueRating
+            branchLike={branchLike}
+            component={component}
+            measures={measures}
+            type={type}
+            useDiffMetric={isNewCodeTab}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelNoNewCode.tsx b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelNoNewCode.tsx
new file mode 100644
index 00000000000..71642f4f99a
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/branches/MeasuresPanelNoNewCode.tsx
@@ -0,0 +1,102 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
+import { getBranchLikeQuery } from '../../../helpers/branch-like';
+import { BranchLike } from '../../../types/branch-like';
+import { ComponentQualifier } from '../../../types/component';
+
+export interface MeasuresPanelNoNewCodeProps {
+  branchLike?: BranchLike;
+  component: T.Component;
+  period?: T.Period;
+}
+
+export default function MeasuresPanelNoNewCode(props: MeasuresPanelNoNewCodeProps) {
+  const { branchLike, component, period } = props;
+
+  const isApp = component.qualifier === ComponentQualifier.Application;
+  /*
+   * If the period is "reference branch"-based, and if there's no date, it means
+   * that we're not lacking a second analysis, but that we'll never have new code because the
+   * selected reference branch is itself, or has disappeared for some reason.
+   * Makes no sense for Apps (project aggregate)
+   */
+  const hasBadNewCodeSetting =
+    !isApp && !!period && !period.date && period.mode === 'REFERENCE_BRANCH';
+
+  const showSettingsLink = !!(component.configuration && component.configuration.showSettings);
+
+  return (
+    <div className="display-flex-center display-flex-justify-center" style={{ height: 500 }}>
+      <img
+        alt="" /* Make screen readers ignore this image; it's purely eye candy. */
+        className="spacer-right"
+        height={52}
+        src={`${getBaseUrl()}/images/source-code.svg`}
+      />
+      <div className="big-spacer-left text-muted" style={{ maxWidth: 500 }}>
+        <p className="spacer-bottom big-spacer-top big">
+          {hasBadNewCodeSetting
+            ? translate('overview.measures.bad_setting.explanation')
+            : translate('overview.measures.empty_explanation')}
+        </p>
+        {hasBadNewCodeSetting ? (
+          showSettingsLink && (
+            <p>
+              <FormattedMessage
+                defaultMessage={translate('overview.measures.bad_setting.link')}
+                id="overview.measures.bad_setting.link"
+                values={{
+                  setting_link: (
+                    <Link
+                      to={{
+                        pathname: '/project/baseline',
+                        query: { id: component.key, ...getBranchLikeQuery(branchLike) }
+                      }}>
+                      {translate('settings.new_code_period.category')}
+                    </Link>
+                  )
+                }}
+              />
+            </p>
+          )
+        ) : (
+          <p>
+            <FormattedMessage
+              defaultMessage={translate('overview.measures.empty_link')}
+              id="overview.measures.empty_link"
+              values={{
+                learn_more_link: (
+                  <Link to="/documentation/user-guide/clean-as-you-code/">
+                    {translate('learn_more')}
+                  </Link>
+                )
+              }}
+            />
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanel-test.tsx b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanel-test.tsx
index c6bd613049b..9693016bbab 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanel-test.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanel-test.tsx
@@ -20,8 +20,13 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import BoxedTabs from 'sonar-ui-common/components/controls/BoxedTabs';
-import { mockMainBranch } from '../../../../helpers/mocks/branch-like';
-import { mockComponent, mockMeasureEnhanced, mockMetric } from '../../../../helpers/testMocks';
+import { mockBranch, mockMainBranch } from '../../../../helpers/mocks/branch-like';
+import {
+  mockComponent,
+  mockMeasureEnhanced,
+  mockMetric,
+  mockPeriod
+} from '../../../../helpers/testMocks';
 import { ComponentQualifier } from '../../../../types/component';
 import { MetricKey } from '../../../../types/metrics';
 import { MeasuresPanel, MeasuresPanelProps, MeasuresPanelTabs } from '../MeasuresPanel';
@@ -53,6 +58,22 @@ it('should render correctly if there is no new code measures', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it('should render correctly if branch is misconfigured', () => {
+  const wrapper = shallowRender({
+    branchLike: mockBranch({ name: 'own-reference' }),
+    measures: [
+      mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.coverage }) }),
+      mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.bugs }) })
+    ],
+    period: mockPeriod({ date: undefined, mode: 'REFERENCE_BRANCH', parameter: 'own-reference' })
+  });
+  wrapper.find(BoxedTabs).prop<Function>('onSelect')(MeasuresPanelTabs.New);
+  expect(wrapper).toMatchSnapshot('hide settings');
+
+  wrapper.setProps({ component: mockComponent({ configuration: { showSettings: true } }) });
+  expect(wrapper).toMatchSnapshot('show settings');
+});
+
 it('should render correctly if there is no coverage', () => {
   expect(
     shallowRender({
@@ -69,7 +90,7 @@ it('should render correctly if the data is still loading', () => {
 });
 
 function shallowRender(props: Partial<MeasuresPanelProps> = {}) {
-  return shallow(
+  return shallow<MeasuresPanelProps>(
     <MeasuresPanel
       branchLike={mockMainBranch()}
       component={mockComponent()}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanelIssueMeasureRow-test.tsx b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanelIssueMeasureRow-test.tsx
new file mode 100644
index 00000000000..2503108b0a0
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanelIssueMeasureRow-test.tsx
@@ -0,0 +1,62 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { mockMainBranch } from '../../../../helpers/mocks/branch-like';
+import { mockComponent, mockMeasureEnhanced, mockMetric } from '../../../../helpers/testMocks';
+import { ComponentQualifier } from '../../../../types/component';
+import { MetricKey } from '../../../../types/metrics';
+import { IssueType } from '../../utils';
+import MeasuresPanelIssueMeasureRow, {
+  MeasuresPanelIssueMeasureRowProps
+} from '../MeasuresPanelIssueMeasureRow';
+
+it('should render correctly for projects', () => {
+  expect(shallowRender({ type: IssueType.Bug })).toMatchSnapshot('Bug');
+  expect(shallowRender({ type: IssueType.CodeSmell })).toMatchSnapshot('Code Smell');
+  expect(shallowRender({ type: IssueType.SecurityHotspot })).toMatchSnapshot('Hotspot');
+  expect(shallowRender({ type: IssueType.Vulnerability })).toMatchSnapshot('Vulnerabilty');
+  expect(shallowRender({ isNewCodeTab: false })).toMatchSnapshot('Overview');
+});
+
+it('should render correctly for apps', () => {
+  const app = mockComponent({ qualifier: ComponentQualifier.Application });
+
+  expect(shallowRender({ component: app })).toMatchSnapshot('new code');
+  expect(shallowRender({ component: app, isNewCodeTab: false })).toMatchSnapshot('overview');
+});
+
+function shallowRender(props: Partial<MeasuresPanelIssueMeasureRowProps> = {}) {
+  return shallow<MeasuresPanelIssueMeasureRowProps>(
+    <MeasuresPanelIssueMeasureRow
+      branchLike={mockMainBranch()}
+      component={mockComponent()}
+      isNewCodeTab={true}
+      measures={[
+        mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.coverage }) }),
+        mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.new_coverage }) }),
+        mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.bugs }) }),
+        mockMeasureEnhanced({ metric: mockMetric({ key: MetricKey.new_bugs }) })
+      ]}
+      type={IssueType.Bug}
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanelNoNewCode-test.tsx b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanelNoNewCode-test.tsx
new file mode 100644
index 00000000000..a1c8a59e833
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/MeasuresPanelNoNewCode-test.tsx
@@ -0,0 +1,101 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2020 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { mockMainBranch } from '../../../../helpers/mocks/branch-like';
+import { mockComponent, mockPeriod } from '../../../../helpers/testMocks';
+import { ComponentQualifier } from '../../../../types/component';
+import MeasuresPanelNoNewCode, { MeasuresPanelNoNewCodeProps } from '../MeasuresPanelNoNewCode';
+
+it('should render the default message', () => {
+  const defaultMessage = `
+  <div
+    className="display-flex-center display-flex-justify-center"
+    style={
+      Object {
+        "height": 500,
+      }
+    }
+  >
+    <img
+      alt=""
+      className="spacer-right"
+      height={52}
+      src="/images/source-code.svg"
+    />
+    <div
+      className="big-spacer-left text-muted"
+      style={
+        Object {
+          "maxWidth": 500,
+        }
+      }
+    >
+      <p
+        className="spacer-bottom big-spacer-top big"
+      >
+        overview.measures.empty_explanation
+      </p>
+      <p>
+        <FormattedMessage
+          defaultMessage="overview.measures.empty_link"
+          id="overview.measures.empty_link"
+          values={
+            Object {
+              "learn_more_link": <Link
+                onlyActiveOnIndex={false}
+                style={Object {}}
+                to="/documentation/user-guide/clean-as-you-code/"
+              >
+                learn_more
+              </Link>,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+`;
+
+  expect(shallowRender()).toMatchInlineSnapshot(defaultMessage);
+  expect(
+    shallowRender({ component: mockComponent({ qualifier: ComponentQualifier.Application }) })
+  ).toMatchInlineSnapshot(defaultMessage);
+  expect(
+    shallowRender({ period: mockPeriod({ date: '2018-05-23', mode: 'REFERENCE_BRANCH' }) })
+  ).toMatchInlineSnapshot(defaultMessage);
+  expect(
+    shallowRender({ period: mockPeriod({ date: '2018-05-23', mode: 'PREVIOUS_VERSION' }) })
+  ).toMatchInlineSnapshot(defaultMessage);
+});
+
+it('should render "bad code setting" explanation', () => {
+  const period = mockPeriod({ date: undefined, mode: 'REFERENCE_BRANCH' });
+  expect(shallowRender({ period })).toMatchSnapshot('no link');
+  expect(
+    shallowRender({ component: mockComponent({ configuration: { showSettings: true } }), period })
+  ).toMatchSnapshot('with link');
+});
+
+function shallowRender(props: Partial<MeasuresPanelNoNewCodeProps> = {}) {
+  return shallow<MeasuresPanelNoNewCodeProps>(
+    <MeasuresPanelNoNewCode branchLike={mockMainBranch()} component={mockComponent()} {...props} />
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/BranchOverview-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/BranchOverview-test.tsx.snap
index b41fbed0fa4..af58cd3e38a 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/BranchOverview-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/BranchOverview-test.tsx.snap
@@ -36,6 +36,13 @@ exports[`application overview should fetch correctly other branch 1`] = `
       },
     ]
   }
+  appLeak={
+    Object {
+      "date": "2017-01-05",
+      "project": "foo",
+      "projectName": "Foo",
+    }
+  }
   branchLike={
     Object {
       "analysisDate": "2018-01-01",
@@ -90,13 +97,6 @@ exports[`application overview should fetch correctly other branch 1`] = `
     }
   }
   graph="coverage"
-  leakPeriod={
-    Object {
-      "date": "2017-01-05",
-      "project": "foo",
-      "projectName": "Foo",
-    }
-  }
   loadingHistory={false}
   loadingStatus={false}
   measures={
@@ -990,6 +990,13 @@ exports[`application overview should render correctly 1`] = `
       },
     ]
   }
+  appLeak={
+    Object {
+      "date": "2017-01-05",
+      "project": "foo",
+      "projectName": "Foo",
+    }
+  }
   branchLike={
     Object {
       "analysisDate": "2018-01-01",
@@ -1044,13 +1051,6 @@ exports[`application overview should render correctly 1`] = `
     }
   }
   graph="coverage"
-  leakPeriod={
-    Object {
-      "date": "2017-01-05",
-      "project": "foo",
-      "projectName": "Foo",
-    }
-  }
   loadingHistory={false}
   loadingStatus={false}
   measures={
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanel-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanel-test.tsx.snap
index e6ac3a7b6b1..d147379a768 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanel-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanel-test.tsx.snap
@@ -51,688 +51,454 @@ exports[`should render correctly for applications 1`] = `
   <div
     className="overview-panel-content flex-1 bordered"
   >
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-bug"
-      key="BUG"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
+      key="BUG"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-vulnerability"
-      key="VULNERABILITY"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
+      key="VULNERABILITY"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-security_hotspot"
-      key="SECURITY_HOTSPOT"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="VULNERABILITY"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          docTooltip={Promise {}}
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
+      key="SECURITY_HOTSPOT"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <SecurityHotspotsReviewed
-          measures={
-            Array [
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-code_smell"
-      key="CODE_SMELL"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(DebtValue)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="SECURITY_HOTSPOT"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
+      key="CODE_SMELL"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="CODE_SMELL"
+    />
     <div
       className="display-flex-row overview-measures-row"
     >
@@ -1025,1148 +791,454 @@ exports[`should render correctly for applications 2`] = `
   <div
     className="overview-panel-content flex-1 bordered"
   >
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-bug"
-      key="BUG"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
+      key="BUG"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-vulnerability"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
       key="VULNERABILITY"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="VULNERABILITY"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-security_hotspot"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
       key="SECURITY_HOTSPOT"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          docTooltip={Promise {}}
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <SecurityHotspotsReviewed
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="SECURITY_HOTSPOT"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-code_smell"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
       key="CODE_SMELL"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(DebtValue)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "APP",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="CODE_SMELL"
+    />
     <div
       className="display-flex-row overview-measures-row"
     >
@@ -2687,1148 +1759,454 @@ exports[`should render correctly for projects 1`] = `
   <div
     className="overview-panel-content flex-1 bordered"
   >
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-bug"
-      key="BUG"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
+      key="BUG"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-vulnerability"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
       key="VULNERABILITY"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="VULNERABILITY"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-security_hotspot"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
       key="SECURITY_HOTSPOT"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          docTooltip={Promise {}}
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <SecurityHotspotsReviewed
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="SECURITY_HOTSPOT"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-code_smell"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
       key="CODE_SMELL"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(DebtValue)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="CODE_SMELL"
+    />
     <div
       className="display-flex-row overview-measures-row"
     >
@@ -4121,1148 +2499,454 @@ exports[`should render correctly for projects 2`] = `
   <div
     className="overview-panel-content flex-1 bordered"
   >
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-bug"
-      key="BUG"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
+      key="BUG"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-vulnerability"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
       key="VULNERABILITY"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="VULNERABILITY"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-security_hotspot"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
       key="SECURITY_HOTSPOT"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          docTooltip={Promise {}}
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <SecurityHotspotsReviewed
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="SECURITY_HOTSPOT"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-code_smell"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={false}
       key="CODE_SMELL"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(DebtValue)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={false}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "coverage",
-                  "key": "coverage",
-                  "name": "Coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_coverage",
-                  "key": "new_coverage",
-                  "name": "New_coverage",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={false}
-        />
-      </div>
-    </div>
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="CODE_SMELL"
+    />
     <div
       className="display-flex-row overview-measures-row"
     >
@@ -5732,6 +3416,221 @@ exports[`should render correctly for projects 2`] = `
 </div>
 `;
 
+exports[`should render correctly if branch is misconfigured: hide settings 1`] = `
+<div
+  className="overview-panel"
+  data-test="overview__measures-panel"
+>
+  <h2
+    className="overview-panel-title"
+  >
+    overview.measures
+  </h2>
+  <BoxedTabs
+    onSelect={[Function]}
+    selected={0}
+    tabs={
+      Array [
+        Object {
+          "key": 0,
+          "label": <div
+            className="text-left overview-measures-tab"
+          >
+            <span
+              className="text-bold"
+            >
+              overview.new_code
+            </span>
+            <LeakPeriodInfo
+              leakPeriod={
+                Object {
+                  "date": undefined,
+                  "index": 0,
+                  "mode": "REFERENCE_BRANCH",
+                  "parameter": "own-reference",
+                }
+              }
+            />
+          </div>,
+        },
+        Object {
+          "key": 1,
+          "label": <div
+            className="text-left overview-measures-tab"
+          >
+            <span
+              className="text-bold"
+              style={
+                Object {
+                  "position": "absolute",
+                  "top": 16,
+                }
+              }
+            >
+              overview.overall_code
+            </span>
+          </div>,
+        },
+      ]
+    }
+  />
+  <div
+    className="overview-panel-content flex-1 bordered"
+  >
+    <MeasuresPanelNoNewCode
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": false,
+          "name": "own-reference",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      period={
+        Object {
+          "date": undefined,
+          "index": 0,
+          "mode": "REFERENCE_BRANCH",
+          "parameter": "own-reference",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`should render correctly if branch is misconfigured: show settings 1`] = `
+<div
+  className="overview-panel"
+  data-test="overview__measures-panel"
+>
+  <h2
+    className="overview-panel-title"
+  >
+    overview.measures
+  </h2>
+  <BoxedTabs
+    onSelect={[Function]}
+    selected={0}
+    tabs={
+      Array [
+        Object {
+          "key": 0,
+          "label": <div
+            className="text-left overview-measures-tab"
+          >
+            <span
+              className="text-bold"
+            >
+              overview.new_code
+            </span>
+            <LeakPeriodInfo
+              leakPeriod={
+                Object {
+                  "date": undefined,
+                  "index": 0,
+                  "mode": "REFERENCE_BRANCH",
+                  "parameter": "own-reference",
+                }
+              }
+            />
+          </div>,
+        },
+        Object {
+          "key": 1,
+          "label": <div
+            className="text-left overview-measures-tab"
+          >
+            <span
+              className="text-bold"
+              style={
+                Object {
+                  "position": "absolute",
+                  "top": 16,
+                }
+              }
+            >
+              overview.overall_code
+            </span>
+          </div>,
+        },
+      ]
+    }
+  />
+  <div
+    className="overview-panel-content flex-1 bordered"
+  >
+    <MeasuresPanelNoNewCode
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": false,
+          "name": "own-reference",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "configuration": Object {
+            "showSettings": true,
+          },
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      period={
+        Object {
+          "date": undefined,
+          "index": 0,
+          "mode": "REFERENCE_BRANCH",
+          "parameter": "own-reference",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
 exports[`should render correctly if the data is still loading 1`] = `
 <div
   className="overview-panel"
@@ -5804,788 +3703,310 @@ exports[`should render correctly if there is no coverage 1`] = `
   <div
     className="overview-panel-content flex-1 bordered"
   >
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-bug"
-      key="BUG"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
+      key="BUG"
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="BUG"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-vulnerability"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
       key="VULNERABILITY"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="VULNERABILITY"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="VULNERABILITY"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-security_hotspot"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
       key="SECURITY_HOTSPOT"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          docTooltip={Promise {}}
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <SecurityHotspotsReviewed
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="SECURITY_HOTSPOT"
+    />
+    <MeasuresPanelIssueMeasureRow
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
             Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="SECURITY_HOTSPOT"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
-    <div
-      className="display-flex-row overview-measures-row"
-      data-test="overview__measures-code_smell"
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      isNewCodeTab={true}
       key="CODE_SMELL"
-    >
-      <div
-        className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
-      >
-        <Memo(DebtValue)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="flex-1 small display-flex-center"
-      >
-        <Memo(IssueLabel)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-              Object {
-                "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
-                "value": "1.0",
-              },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={true}
-        />
-      </div>
-      <div
-        className="overview-panel-big-padded overview-measures-aside display-flex-center"
-      >
-        <Memo(IssueRating)
-          branchLike={
-            Object {
-              "analysisDate": "2018-01-01",
-              "excludedFromPurge": true,
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component={
-            Object {
-              "breadcrumbs": Array [],
-              "key": "my-project",
-              "name": "MyProject",
-              "organization": "foo",
-              "qualifier": "TRK",
-              "qualityGate": Object {
-                "isDefault": true,
-                "key": "30",
-                "name": "Sonar way",
-              },
-              "qualityProfiles": Array [
-                Object {
-                  "deleted": false,
-                  "key": "my-qp",
-                  "language": "ts",
-                  "name": "Sonar way",
-                },
-              ],
-              "tags": Array [],
-            }
-          }
-          measures={
-            Array [
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "bugs",
-                  "key": "bugs",
-                  "name": "Bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
               Object {
                 "bestValue": true,
-                "leak": "1",
-                "metric": Object {
-                  "id": "new_bugs",
-                  "key": "new_bugs",
-                  "name": "New_bugs",
-                  "type": "PERCENT",
-                },
-                "periods": Array [
-                  Object {
-                    "bestValue": true,
-                    "index": 1,
-                    "value": "1.0",
-                  },
-                ],
+                "index": 1,
                 "value": "1.0",
               },
-            ]
-          }
-          type="CODE_SMELL"
-          useDiffMetric={true}
-        />
-      </div>
-    </div>
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="CODE_SMELL"
+    />
     <div
       className="display-flex-row overview-measures-row"
     >
@@ -6725,52 +4146,39 @@ exports[`should render correctly if there is no new code measures 1`] = `
   <div
     className="overview-panel-content flex-1 bordered"
   >
-    <div
-      className="display-flex-center display-flex-justify-center"
-      style={
+    <MeasuresPanelNoNewCode
+      branchLike={
         Object {
-          "height": 500,
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
         }
       }
-    >
-      <img
-        alt=""
-        className="spacer-right"
-        height={52}
-        src="/images/source-code.svg"
-      />
-      <div
-        className="big-spacer-left text-muted"
-        style={
-          Object {
-            "maxWidth": 500,
-          }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
         }
-      >
-        <p
-          className="spacer-bottom big-spacer-top big"
-        >
-          overview.measures.empty_explanation
-        </p>
-        <p>
-          <FormattedMessage
-            defaultMessage="overview.measures.empty_link"
-            id="overview.measures.empty_link"
-            values={
-              Object {
-                "learn_more_link": <Link
-                  onlyActiveOnIndex={false}
-                  style={Object {}}
-                  to="/documentation/user-guide/clean-as-you-code/"
-                >
-                  learn_more
-                </Link>,
-              }
-            }
-          />
-        </p>
-      </div>
-    </div>
+      }
+    />
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanelIssueMeasureRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanelIssueMeasureRow-test.tsx.snap
new file mode 100644
index 00000000000..c2ce6a22934
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanelIssueMeasureRow-test.tsx.snap
@@ -0,0 +1,1750 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly for apps: new code 1`] = `
+<div
+  className="display-flex-row overview-measures-row"
+  data-test="overview__measures-bug"
+>
+  <div
+    className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
+  >
+    <Memo(IssueLabel)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+      useDiffMetric={true}
+    />
+  </div>
+</div>
+`;
+
+exports[`should render correctly for apps: overview 1`] = `
+<div
+  className="display-flex-row overview-measures-row"
+  data-test="overview__measures-bug"
+>
+  <div
+    className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
+  >
+    <Memo(IssueLabel)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+      useDiffMetric={false}
+    />
+  </div>
+  <div
+    className="overview-panel-big-padded overview-measures-aside display-flex-center"
+  >
+    <Memo(IssueRating)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "APP",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+      useDiffMetric={false}
+    />
+  </div>
+</div>
+`;
+
+exports[`should render correctly for projects: Bug 1`] = `
+<div
+  className="display-flex-row overview-measures-row"
+  data-test="overview__measures-bug"
+>
+  <div
+    className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
+  >
+    <Memo(IssueLabel)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+      useDiffMetric={true}
+    />
+  </div>
+  <div
+    className="overview-panel-big-padded overview-measures-aside display-flex-center"
+  >
+    <Memo(IssueRating)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+      useDiffMetric={true}
+    />
+  </div>
+</div>
+`;
+
+exports[`should render correctly for projects: Code Smell 1`] = `
+<div
+  className="display-flex-row overview-measures-row"
+  data-test="overview__measures-code_smell"
+>
+  <div
+    className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
+  >
+    <Memo(DebtValue)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      useDiffMetric={true}
+    />
+  </div>
+  <div
+    className="flex-1 small display-flex-center"
+  >
+    <Memo(IssueLabel)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="CODE_SMELL"
+      useDiffMetric={true}
+    />
+  </div>
+  <div
+    className="overview-panel-big-padded overview-measures-aside display-flex-center"
+  >
+    <Memo(IssueRating)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="CODE_SMELL"
+      useDiffMetric={true}
+    />
+  </div>
+</div>
+`;
+
+exports[`should render correctly for projects: Hotspot 1`] = `
+<div
+  className="display-flex-row overview-measures-row"
+  data-test="overview__measures-security_hotspot"
+>
+  <div
+    className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
+  >
+    <Memo(IssueLabel)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      docTooltip={Promise {}}
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="SECURITY_HOTSPOT"
+      useDiffMetric={true}
+    />
+  </div>
+  <div
+    className="flex-1 small display-flex-center"
+  >
+    <SecurityHotspotsReviewed
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      useDiffMetric={true}
+    />
+  </div>
+  <div
+    className="overview-panel-big-padded overview-measures-aside display-flex-center"
+  >
+    <Memo(IssueRating)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="SECURITY_HOTSPOT"
+      useDiffMetric={true}
+    />
+  </div>
+</div>
+`;
+
+exports[`should render correctly for projects: Overview 1`] = `
+<div
+  className="display-flex-row overview-measures-row"
+  data-test="overview__measures-bug"
+>
+  <div
+    className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
+  >
+    <Memo(IssueLabel)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+      useDiffMetric={false}
+    />
+  </div>
+  <div
+    className="overview-panel-big-padded overview-measures-aside display-flex-center"
+  >
+    <Memo(IssueRating)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="BUG"
+      useDiffMetric={false}
+    />
+  </div>
+</div>
+`;
+
+exports[`should render correctly for projects: Vulnerabilty 1`] = `
+<div
+  className="display-flex-row overview-measures-row"
+  data-test="overview__measures-vulnerability"
+>
+  <div
+    className="overview-panel-big-padded flex-1 small display-flex-center big-spacer-left"
+  >
+    <Memo(IssueLabel)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="VULNERABILITY"
+      useDiffMetric={true}
+    />
+  </div>
+  <div
+    className="overview-panel-big-padded overview-measures-aside display-flex-center"
+  >
+    <Memo(IssueRating)
+      branchLike={
+        Object {
+          "analysisDate": "2018-01-01",
+          "excludedFromPurge": true,
+          "isMain": true,
+          "name": "master",
+        }
+      }
+      component={
+        Object {
+          "breadcrumbs": Array [],
+          "key": "my-project",
+          "name": "MyProject",
+          "organization": "foo",
+          "qualifier": "TRK",
+          "qualityGate": Object {
+            "isDefault": true,
+            "key": "30",
+            "name": "Sonar way",
+          },
+          "qualityProfiles": Array [
+            Object {
+              "deleted": false,
+              "key": "my-qp",
+              "language": "ts",
+              "name": "Sonar way",
+            },
+          ],
+          "tags": Array [],
+        }
+      }
+      measures={
+        Array [
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "coverage",
+              "key": "coverage",
+              "name": "Coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_coverage",
+              "key": "new_coverage",
+              "name": "New_coverage",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "bugs",
+              "key": "bugs",
+              "name": "Bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+          Object {
+            "bestValue": true,
+            "leak": "1",
+            "metric": Object {
+              "id": "new_bugs",
+              "key": "new_bugs",
+              "name": "New_bugs",
+              "type": "PERCENT",
+            },
+            "periods": Array [
+              Object {
+                "bestValue": true,
+                "index": 1,
+                "value": "1.0",
+              },
+            ],
+            "value": "1.0",
+          },
+        ]
+      }
+      type="VULNERABILITY"
+      useDiffMetric={true}
+    />
+  </div>
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanelNoNewCode-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanelNoNewCode-test.tsx.snap
new file mode 100644
index 00000000000..85573941439
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/branches/__tests__/__snapshots__/MeasuresPanelNoNewCode-test.tsx.snap
@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render "bad code setting" explanation: no link 1`] = `
+<div
+  className="display-flex-center display-flex-justify-center"
+  style={
+    Object {
+      "height": 500,
+    }
+  }
+>
+  <img
+    alt=""
+    className="spacer-right"
+    height={52}
+    src="/images/source-code.svg"
+  />
+  <div
+    className="big-spacer-left text-muted"
+    style={
+      Object {
+        "maxWidth": 500,
+      }
+    }
+  >
+    <p
+      className="spacer-bottom big-spacer-top big"
+    >
+      overview.measures.bad_setting.explanation
+    </p>
+  </div>
+</div>
+`;
+
+exports[`should render "bad code setting" explanation: with link 1`] = `
+<div
+  className="display-flex-center display-flex-justify-center"
+  style={
+    Object {
+      "height": 500,
+    }
+  }
+>
+  <img
+    alt=""
+    className="spacer-right"
+    height={52}
+    src="/images/source-code.svg"
+  />
+  <div
+    className="big-spacer-left text-muted"
+    style={
+      Object {
+        "maxWidth": 500,
+      }
+    }
+  >
+    <p
+      className="spacer-bottom big-spacer-top big"
+    >
+      overview.measures.bad_setting.explanation
+    </p>
+    <p>
+      <FormattedMessage
+        defaultMessage="overview.measures.bad_setting.link"
+        id="overview.measures.bad_setting.link"
+        values={
+          Object {
+            "setting_link": <Link
+              onlyActiveOnIndex={false}
+              style={Object {}}
+              to={
+                Object {
+                  "pathname": "/project/baseline",
+                  "query": Object {
+                    "id": "my-project",
+                  },
+                }
+              }
+            >
+              settings.new_code_period.category
+            </Link>,
+          }
+        }
+      />
+    </p>
+  </div>
+</div>
+`;