message: Monitoring: Prevent graph zooming to tiny time spans
  Calling the Prometheus API's `query_range` endpoint with a tiny time
  range (a fraction of a second) results in `422 Unprocessable Entity`
  errors. Avoid this by limiting the maximum zoom time span to 1 second.
diff: @@ -51,13 +51,25 @@ class QueryBrowser_ extends Line_ {
  // Undo zoom
  this.showLatest(this.zoomUndoSpan || this.defaultSpan);
  } else {
  - const start = e['xaxis.range[0]'];
  - const end = e['xaxis.range[1]'];
  - if (start && end) {
  + const startStr = e['xaxis.range[0]'];
  + const endStr = e['xaxis.range[1]'];
  + if (startStr && endStr) {
  // Zoom to a specific graph time range
  - this.start = new Date(start).getTime();
  - this.end = new Date(end).getTime();
  - const span = this.end - this.start;
  + let start = new Date(startStr).getTime();
  + let end = new Date(endStr).getTime();
  + let span = end - start;
  +
  + const minSpan = 1000;
  + if (span < minSpan) {
  + span = minSpan;
  + const middle = (start + end) / 2;
  + start = middle - (span / 2);
  + end = middle + (span / 2);
  + this.relayout({'xaxis.range': [start, end]});
  + }
  +
  + this.start = start;
  + this.end = end;
  this.timeSpan = span;
  this.setState({isSpanValid: true, span, spanText: formatPrometheusDuration(span), updating: true}, () => {
  clearInterval(this.interval);
  