Show a message if there is no data to be displayed on the project activity preview...

diff --git a/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js b/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js
index 20538c6a4d1579fa91280f5c01a78feff47fb3c8..5ecdab564372bc8ff2cc10a98b58a44e3cdc7135 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js
+++ b/server/sonar-web/src/main/js/apps/overview/events/PreviewGraph.js
@@ -28,10 +28,12 @@ import {
   getDisplayedHistoryMetrics,
   generateSeries,
   getSeriesMetricType,
+  hasHistoryDataValue,
   splitSeriesInGraphs
 } from '../../projectActivity/utils';
 import { getCustomGraph, getGraph } from '../../../helpers/storage';
 import { formatMeasure, getShortType } from '../../../helpers/measures';
+import { translate } from '../../../helpers/l10n';
 import type { Serie } from '../../../components/charts/AdvancedTimeline';
 import type { History, Metric } from '../types';
 
@@ -137,46 +139,57 @@ export default class PreviewGraph extends React.PureComponent {
   updateTooltip = (selectedDate: ?Date, tooltipXPos: ?number, tooltipIdx: ?number) =>
     this.setState({ selectedDate, tooltipXPos, tooltipIdx });
 
-  render() {
+  renderTimeline() {
     const { graph, selectedDate, series, tooltipIdx, tooltipXPos } = this.state;
+    return (
+      <AutoSizer disableHeight={true}>
+        {({ width }) =>
+          <div>
+            <AdvancedTimeline
+              endDate={null}
+              startDate={null}
+              height={80}
+              width={width}
+              hideGrid={true}
+              hideXAxis={true}
+              interpolate="linear"
+              metricType={getSeriesMetricType(series)}
+              padding={GRAPH_PADDING}
+              series={series}
+              showAreas={['coverage', 'duplications'].includes(graph)}
+              updateTooltip={this.updateTooltip}
+            />
+            {selectedDate != null &&
+              tooltipXPos != null &&
+              tooltipIdx != null &&
+              <PreviewGraphTooltips
+                formatValue={this.formatValue}
+                graph={graph}
+                graphWidth={width}
+                metrics={this.props.metrics}
+                selectedDate={selectedDate}
+                series={series}
+                tooltipIdx={tooltipIdx}
+                tooltipPos={tooltipXPos}
+              />}
+          </div>}
+      </AutoSizer>
+    );
+  }
+
+  render() {
+    const { series } = this.state;
     return (
       <div
         className="overview-analysis-graph big-spacer-bottom spacer-top"
         onClick={this.handleClick}
         tabIndex={0}
         role="link">
-        <AutoSizer disableHeight={true}>
-          {({ width }) =>
-            <div>
-              <AdvancedTimeline
-                endDate={null}
-                startDate={null}
-                height={80}
-                width={width}
-                hideGrid={true}
-                hideXAxis={true}
-                interpolate="linear"
-                metricType={getSeriesMetricType(series)}
-                padding={GRAPH_PADDING}
-                series={series}
-                showAreas={['coverage', 'duplications'].includes(graph)}
-                updateTooltip={this.updateTooltip}
-              />
-              {selectedDate != null &&
-                tooltipXPos != null &&
-                tooltipIdx != null &&
-                <PreviewGraphTooltips
-                  formatValue={this.formatValue}
-                  graph={graph}
-                  graphWidth={width}
-                  metrics={this.props.metrics}
-                  selectedDate={selectedDate}
-                  series={series}
-                  tooltipIdx={tooltipIdx}
-                  tooltipPos={tooltipXPos}
-                />}
+        {hasHistoryDataValue(series)
+          ? this.renderTimeline()
+          : <div className="note text-center spacer-top big-spacer-bottom">
+              {translate('component_measures.no_history')}
             </div>}
-        </AutoSizer>
       </div>
     );
   }

diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 46b4bcaec9118077ca75faef2fc13f72a362f3ee..0b27fa872355524a1ac1deb438a741022a8c1177 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -381,6 +381,10 @@
   padding: 0;
 }
 
+.overview-analysis-graph .bubble-popup-arrow {
+  top: 7px;
+}
+
 .overview-analysis-graph-tooltip {
   padding: 4px;
   pointer-events: none;

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/utils.js b/server/sonar-web/src/main/js/apps/projectActivity/utils.js
index 89171cf36173daf6b1dac65ec0ea4ebc8be14ffc..7a126be384a59db9cd2f686b570c34b0cec6bcee 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectActivity/utils.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/utils.js
@@ -67,6 +67,9 @@ export const hasDataValues = (serie: Serie) => serie.data.some(point => point.y
 export const hasHistoryData = (series: Array<Serie>) =>
   series.some(serie => serie.data && serie.data.length > 1);
 
+export const hasHistoryDataValue = (series: Array<Serie>) =>
+  series.some(serie => serie.data && serie.data.length > 1 && hasDataValues(serie));
+
 export const historyQueryChanged = (prevQuery: Query, nextQuery: Query): boolean =>
   prevQuery.graph !== nextQuery.graph;