Show message when there are no results

ui/src/shared/components/AutoRefresh.tsx

@@ -4,6 +4,7 @@ import _ from 'lodash'
 import {getQueryConfig} from 'src/shared/apis'
 import {fetchTimeSeries} from 'src/shared/apis/query'
 import {DEFAULT_TIME_SERIES} from 'src/shared/constants/series'
+import {TimeSeriesServerResponse, TimeSeriesResponse} from 'src/types/series'
 
 interface Axes {
   bounds: {
@@ -50,27 +51,6 @@ interface Props {
   grabDataForDownload: (timeSeries: TimeSeriesServerResponse[]) => void
 }
 
-type TimeSeriesValue = string | number | Date | null
-
-interface Series {
-  name: string
-  columns: string[]
-  values: TimeSeriesValue[]
-}
-
-interface Result {
-  series: Series[]
-  statement_id: number
-}
-
-interface TimeSeriesResponse {
-  results: Result[]
-}
-
-interface TimeSeriesServerResponse {
-  response: TimeSeriesResponse
-}
-
 interface QueryAST {
   groupBy?: {
     tags: string[]
@@ -162,7 +142,7 @@ const AutoRefresh = (
         const newSeries = timeSeries.map((response: TimeSeriesResponse) => ({
           response,
         }))
-        const isLastQuerySuccessful = this.resultsForQuery(newSeries)
+        const isLastQuerySuccessful = this.hasResultsForQuery(newSeries)
 
         this.setState({
           timeSeries: newSeries,
@@ -190,6 +170,21 @@ const AutoRefresh = (
         isLastQuerySuccessful,
       } = this.state
 
+      const hasValues = _.some(timeSeries, s => {
+        const results = _.get(s, 'response.results', [])
+        const v = _.some(results, r => r.series)
+        console.error(results, v)
+        return v
+      })
+
+      if (!hasValues) {
+        return (
+          <div className="graph-empty">
+            <p>No Results</p>
+          </div>
+        )
+      }
+
       if (isFetching && isLastQuerySuccessful) {
         return (
           <ComposedComponent
@@ -277,7 +272,7 @@ const AutoRefresh = (
       )
     }
 
-    private resultsForQuery = data => {
+    private hasResultsForQuery = (data): boolean => {
       if (!data.length) {
         return false
       }

ui/src/types/series.ts

@@ -0,0 +1,20 @@
+export type TimeSeriesValue = string | number | Date | null
+
+export interface Series {
+  name: string
+  columns: string[]
+  values: TimeSeriesValue[]
+}
+
+export interface Result {
+  series: Series[]
+  statement_id: number
+}
+
+export interface TimeSeriesResponse {
+  results: Result[]
+}
+
+export interface TimeSeriesServerResponse {
+  response: TimeSeriesResponse
+}