message: Query Browser: Better handle blank query and empty API response cases
diff: @@ -106,23 +106,28 @@ export const QueryBrowser: React.FC<QueryBrowserProps> = ({colors, defaultTimesp
  delay: endTime ? null : Math.max(span / 120, 5000),
  endTime,
  endpoint: PrometheusEndpoint.QUERY_RANGE,
  - samples,
  query,
  + samples,
  timeout,
  timespan: span,
  });
  - React.useEffect(() => setUpdating(true), [query, samples]);
  + React.useEffect(() => setUpdating(!!query), [query, samples]);
  React.useEffect(() => {
  + if (data === undefined) {
  + setGraphData(undefined);
  + return;
  + }
  +
  const result = _.get(data, 'data.result');
  - if (!_.isEmpty(result)) {
  + const newGraphData = [];
  +
  // Work out which labels have different values for different metrics
  const allLabels = _.map(result, 'metric');
  const allLabelKeys = _.uniq(_.flatMap(allLabels, _.keys));
  const differingLabelKeys = _.filter(allLabelKeys, k => _.uniqBy(allLabels, k).length > 1);
  - const newGraphData = [];
  _.each(result, d => {
  const labels = _.omit(d.metric, '__name__');
  @@ -155,12 +160,11 @@ export const QueryBrowser: React.FC<QueryBrowserProps> = ({colors, defaultTimesp
  });
  setGraphData(newGraphData);
  + setUpdating(false);
  if (onDataUpdate) {
  onDataUpdate(result);
  }
  - }
  - setUpdating(false);
  // Only trigger when data is updated
  // eslint-disable-next-line react-hooks/exhaustive-deps
  @@ -190,10 +194,17 @@ export const QueryBrowser: React.FC<QueryBrowserProps> = ({colors, defaultTimesp
  {GraphLink}
  </div>
  </div>
  + {query
  + ? <React.Fragment>
  {error && <div className="alert alert-danger query-browser__error">
  <span className="pficon pficon-error-circle-o" aria-hidden="true"></span>{_.get(error, 'json.error', error.message)}
  </div>}
  + {!error && !updating && _.isEmpty(graphData) && <div className="alert alert-warning query-browser__error">
  + <span className="pficon pficon-warning-triangle-o" aria-hidden="true"></span> Query did not return any data
  + </div>}
  <Graph colors={colors} data={graphData} domain={graphDomain} onZoom={onZoom} query={query} />
  + </React.Fragment>
  + : <div className="text-center text-muted">Enter a query in the box below to explore the metrics gathered for this cluster</div>}
  </div>;
  };
  