Explore: No logs should show an empty graph (#19132)

* Explore: add no data points text to graph

* Explore: add console log for error (accidentaly removed)

* Explore: refactor, created getYAxes method for better readability

* Explore: remove unnecessary console.log

* Explore: fix getYAxes method to return value

* Graph: Simplify warning from no data points to No data

packages/grafana-ui/src/components/Graph/Graph.tsx

@@ -54,6 +54,27 @@ export class Graph extends PureComponent<GraphProps> {
     }
   };
 
+  getYAxes(series: GraphSeriesXY[]) {
+    if (series.length === 0) {
+      return [{ show: true, min: -1, max: 1 }];
+    }
+    return uniqBy(
+      series.map(s => {
+        const index = s.yAxis ? s.yAxis.index : 1;
+        const min = s.yAxis && !isNaN(s.yAxis.min as number) ? s.yAxis.min : null;
+        const tickDecimals = s.yAxis && !isNaN(s.yAxis.tickDecimals as number) ? s.yAxis.tickDecimals : null;
+        return {
+          show: true,
+          index,
+          position: index === 1 ? 'left' : 'right',
+          min,
+          tickDecimals,
+        };
+      }),
+      yAxisConfig => yAxisConfig.index
+    );
+  }
+
   draw() {
     if (this.element === null) {
       return;
@@ -79,22 +100,8 @@ export class Graph extends PureComponent<GraphProps> {
     const ticks = width / 100;
     const min = timeRange.from.valueOf();
     const max = timeRange.to.valueOf();
-    const yaxes = uniqBy(
-      series.map(s => {
-        const index = s.yAxis ? s.yAxis.index : 1;
-        const min = s.yAxis && !isNaN(s.yAxis.min as number) ? s.yAxis.min : null;
-        const tickDecimals = s.yAxis && !isNaN(s.yAxis.tickDecimals as number) ? s.yAxis.tickDecimals : null;
+    const yaxes = this.getYAxes(series);
 
-        return {
-          show: true,
-          index,
-          position: index === 1 ? 'left' : 'right',
-          min,
-          tickDecimals,
-        };
-      }),
-      yAxisConfig => yAxisConfig.index
-    );
     const flotOptions: any = {
       legend: {
         show: false,
@@ -122,6 +129,7 @@ export class Graph extends PureComponent<GraphProps> {
         shadowSize: 0,
       },
       xaxis: {
+        show: true,
         mode: 'time',
         min: min,
         max: max,
@@ -157,10 +165,12 @@ export class Graph extends PureComponent<GraphProps> {
   }
 
   render() {
-    const { height } = this.props;
+    const { height, series } = this.props;
+    const noDataToBeDisplayed = series.length === 0;
     return (
       <div className="graph-panel">
         <div className="graph-panel__chart" ref={e => (this.element = e)} style={{ height }} />
+        {noDataToBeDisplayed && <div className="datapoints-warning">No data</div>}
       </div>
     );
   }

public/app/plugins/panel/graph/module.ts

@@ -225,14 +225,14 @@ class GraphCtrl extends MetricsPanelCtrl {
 
     if (datapointsCount === 0) {
       this.dataWarning = {
-        title: 'No data points',
-        tip: 'No datapoints returned from data query',
+        title: 'No data',
+        tip: 'No data returned from query',
       };
     } else {
       for (const series of this.seriesList) {
         if (series.isOutsideRange) {
           this.dataWarning = {
-            title: 'Data points outside time range',
+            title: 'Data outside time range',
             tip: 'Can be caused by timezone mismatch or missing time filter in query',
           };
           break;

public/app/plugins/panel/graph/specs/graph_ctrl.test.ts

@@ -58,7 +58,7 @@ describe('GraphCtrl', () => {
     });
 
     it('should set datapointsOutside', () => {
-      expect(ctx.ctrl.dataWarning.title).toBe('Data points outside time range');
+      expect(ctx.ctrl.dataWarning.title).toBe('Data outside time range');
     });
   });
 
@@ -94,7 +94,7 @@ describe('GraphCtrl', () => {
     });
 
     it('should set datapointsCount warning', () => {
-      expect(ctx.ctrl.dataWarning.title).toBe('No data points');
+      expect(ctx.ctrl.dataWarning.title).toBe('No data');
     });
   });
 });