Monitoring: Add metric graphs to Alert and Rule details pages

Adds a `QueryBrowser` component, which plots a PromQL query as a line
graph along with controls for changing the graph to display the query
for any time range.

Adds the `QueryBrowser` to both the alert details page and the rule
details page. The alert graph shows the single metric for that alert and
the rule graph shows all metrics data for that rule.

Upgrade Plotly to version 1.44.4.

Move the "View in Prometheus UI" link from the top of the page to the
graph area.

Make some changes to the graph Base class.
  - Make the `title` property optional
  - Add the ability to invoke `fetch()` without enabling polling
  - Set a lower limit of 5 seconds on the graph refresh interval to
    prevent too frequent polling when viewing narrow time ranges.
  - Add optional `numSamples` property that defines how many data points
    will be plotted for each metric

Author: kyoto

frontend/__tests__/components/utils/datetime.ts

@@ -1,4 +1,4 @@
-import { fromNow, isValid, formatDuration } from '../../../public/components/utils/datetime';
+import { fromNow, isValid, formatDuration, formatPrometheusDuration, parsePrometheusDuration } from '../../../public/components/utils/datetime';
 
 describe('fromNow', () => {
   it('prints past dates correctly', () => {
@@ -92,3 +92,84 @@ describe('formatDuration', () => {
   });
 });
 
+// Converts time durations to milliseconds
+const ms = (s = 0, m = 0, h = 0, d = 0, w = 0) => ((((w * 7 + d) * 24 + h) * 60 + m) * 60 + s) * 1000;
+
+describe('formatPrometheusDuration', () => {
+  it('formats durations correctly', () => {
+    expect(formatPrometheusDuration(ms(1))).toEqual('1s');
+    expect(formatPrometheusDuration(ms(2, 1))).toEqual('1m 2s');
+    expect(formatPrometheusDuration(ms(3, 2, 1))).toEqual('1h 2m 3s');
+    expect(formatPrometheusDuration(ms(4, 3, 2, 1))).toEqual('1d 2h 3m 4s');
+    expect(formatPrometheusDuration(ms(5, 4, 3, 2, 1))).toEqual('1w 2d 3h 4m 5s');
+  });
+
+  it('handles invalid values', () => {
+    [null, undefined, 0, -1, -9999].forEach(v => expect(formatPrometheusDuration(v)).toEqual(''));
+  });
+});
+
+describe('parsePrometheusDuration', () => {
+  it('parses durations correctly', () => {
+    expect(parsePrometheusDuration('1s')).toEqual(ms(1));
+    expect(parsePrometheusDuration('100s')).toEqual(ms(100));
+    expect(parsePrometheusDuration('1m')).toEqual(ms(0, 1));
+    expect(parsePrometheusDuration('90m')).toEqual(ms(0, 90));
+    expect(parsePrometheusDuration('1h')).toEqual(ms(0, 0, 1));
+    expect(parsePrometheusDuration('2h 0m 0s')).toEqual(ms(0, 0, 2));
+    expect(parsePrometheusDuration('13h 10m 23s')).toEqual(ms(23, 10, 13));
+    expect(parsePrometheusDuration('25h 61m 61s')).toEqual(ms(61, 61, 25));
+    expect(parsePrometheusDuration('123h')).toEqual(ms(0, 0, 123));
+    expect(parsePrometheusDuration('1d')).toEqual(ms(0, 0, 0, 1));
+    expect(parsePrometheusDuration('2d 6h')).toEqual(ms(0, 0, 6, 2));
+    expect(parsePrometheusDuration('8d 12h')).toEqual(ms(0, 0, 12, 8));
+    expect(parsePrometheusDuration('10d 12h 30m 1s')).toEqual(ms(1, 30, 12, 10));
+    expect(parsePrometheusDuration('1w')).toEqual(ms(0, 0, 0, 0, 1));
+    expect(parsePrometheusDuration('5w 10d 12h 30m 1s')).toEqual(ms(1, 30, 12, 10, 5));
+    expect(parsePrometheusDuration('999w 999h 999s')).toEqual(ms(999, 0, 999, 0, 999));
+  });
+
+  it('handles 0 values', () => {
+    expect(parsePrometheusDuration('0s')).toEqual(0);
+    expect(parsePrometheusDuration('0w 0d 0h 0m 0s')).toEqual(0);
+    expect(parsePrometheusDuration('00h 000000m 0s')).toEqual(0);
+  });
+
+  it('handles invalid duration formats', () => {
+    [
+      '',
+      null,
+      undefined,
+      '0',
+      '12',
+      'z',
+      'h',
+      'abc',
+      '全角',
+      '0.5h',
+      '1hh',
+      '1h1m',
+      '1h h',
+      '1h 0',
+      '1h 0z',
+      '-1h',
+    ].forEach(v => expect(parsePrometheusDuration(v)).toEqual(0));
+  });
+
+  it('mirrors formatPrometheusDuration()', () => {
+    [
+      '1s',
+      '1m',
+      '1h',
+      '1m 40s',
+      '13h 10m 23s',
+      '2h 10s',
+      '1d',
+      '2d 6h',
+      '1w',
+      '5w 6d 12h 30m 1s',
+      '999w',
+      '',
+    ].forEach(v => expect(formatPrometheusDuration(parsePrometheusDuration(v))).toEqual(v));
+  });
+});

frontend/package.json

@@ -71,7 +71,7 @@
     "patternfly": "^3.59.0",
     "patternfly-react": "^2.29.1",
     "patternfly-react-extensions": "2.14.1",
-    "plotly.js": "1.28.x",
+    "plotly.js": "1.44.4",
     "prop-types": "15.6.x",
     "react": "16.6.3",
     "react-copy-to-clipboard": "5.x",

frontend/public/components/graphs/_graphs.scss

@@ -14,3 +14,43 @@
   white-space: nowrap;
   line-height: 1.4; // so descenders don't clip
 }
+
+.query-browser__wrapper {
+  border: 1px solid $color-grey-background-border;
+  margin: 0 0 20px 0;
+  overflow: visible;
+  width: 100%;
+}
+
+.query-browser__header {
+  display: inline-flex;
+  justify-content: space-between;
+  padding: 15px 10px 10px 10px;
+  width: 100%;
+}
+
+.query-browser__controls {
+  display: inline-flex;
+}
+
+.query-browser__span-text {
+  border-bottom-right-radius: 0;
+  border-right: none;
+  border-top-right-radius: 0;
+  width: 100px;
+}
+
+.query-browser__span-text--error {
+  background-color: #fdd;
+}
+
+.query-browser__span-dropdown {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  margin-right: 20px;
+  width: 30px;
+}
+
+.query-browser__span-reset {
+  margin-right: 20px;
+}

frontend/public/components/graphs/base.jsx

@@ -32,7 +32,7 @@ export class BaseGraph extends SafetyFirst {
     }
   }
 
-  fetch() {
+  fetch(enablePolling = true) {
     const timeSpan = this.end - this.start || this.timeSpan;
     const end = this.end || Date.now();
     const start = this.start || (end - timeSpan);
@@ -45,8 +45,8 @@ export class BaseGraph extends SafetyFirst {
     }
 
     const basePath = this.props.basePath || (this.props.namespace ? prometheusTenancyBasePath : prometheusBasePath);
-    const pollInterval = timeSpan / 120 || 15000;
-    const stepSize = pollInterval / 1000;
+    const pollInterval = timeSpan ? Math.max(timeSpan / 120, 5000) : 15000;
+    const stepSize = (timeSpan && this.props.numSamples ? timeSpan / this.props.numSamples : pollInterval) / 1000;
     const promises = queries.map(q => {
       const nsParam = this.props.namespace ? `&namespace=${encodeURIComponent(this.props.namespace)}` : '';
       const url = this.timeSpan
@@ -64,11 +64,15 @@ export class BaseGraph extends SafetyFirst {
         }
       })
       .catch(error => this.updateGraph(null, error))
-      .then(() => this.interval = setTimeout(() => {
-        if (this.isMounted_) {
-          this.fetch();
+      .then(() => {
+        if (enablePolling) {
+          this.interval = setTimeout(() => {
+            if (this.isMounted_) {
+              this.fetch();
+            }
+          }, pollInterval);
         }
-      }, pollInterval));
+      });
   }
 
   componentWillMount() {
@@ -132,7 +136,7 @@ export class BaseGraph extends SafetyFirst {
     const { title, className } = this.props;
     const url = this.props.query ? this.prometheusURL() : null;
     const graph = <div className={classNames('graph-wrapper', className)} style={this.style}>
-      <h5 className="graph-title">{title}</h5>
+      {title && <h5 className="graph-title">{title}</h5>}
       <div ref={this.setNode} style={{width: '100%'}} />
     </div>;
 
@@ -154,7 +158,8 @@ BaseGraph.propTypes = {
   ]),
   percent: PropTypes.number, // for gauge charts
   className: PropTypes.string,
-  title: PropTypes.string.isRequired,
+  numSamples: PropTypes.number,
+  title: PropTypes.string,
   timeSpan: PropTypes.number,
   basePath: PropTypes.string,
 };

frontend/public/components/graphs/graph-loader.jsx

@@ -1,5 +1,6 @@
 export { Bar } from './bar';
 export { Gauge } from './gauge';
 export { Line } from './line';
+export { QueryBrowser } from './query-browser';
 export { Scalar } from './scalar';
 export { Donut } from './donut';

frontend/public/components/graphs/index.jsx

@@ -9,6 +9,7 @@ export const prometheusBasePath = window.SERVER_FLAGS.prometheusBaseURL;
 export const prometheusTenancyBasePath = window.SERVER_FLAGS.prometheusTenancyBaseURL;
 export const alertManagerBasePath = window.SERVER_FLAGS.alertManagerBaseURL;
 
+export const QueryBrowser = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.QueryBrowser)} {...props} />;
 export const Bar = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Bar)} {...props} />;
 export const Gauge = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Gauge)} {...props} />;
 export const Line = props => <AsyncComponent loader={() => import('./graph-loader').then(c => c.Line)} {...props} />;

frontend/public/components/graphs/query-browser.jsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import * as _ from 'lodash-es';
+import * as classNames from 'classnames';
+import { addTraces, relayout, restyle } from 'plotly.js/lib/core';
+
+import { connectToURLs, MonitoringRoutes } from '../../monitoring';
+import { Dropdown, ExternalLink, LoadingInline } from '../utils';
+import { formatPrometheusDuration, parsePrometheusDuration } from '../utils/datetime';
+import { Line_ } from './line';
+
+const spans = ['5m', '15m', '30m', '1h', '2h', '6h', '12h', '1d', '2d', '1w', '2w'];
+const dropdownItems = _.zipObject(spans, spans);
+
+class QueryBrowser_ extends Line_ {
+  constructor(props) {
+    super(props);
+
+    _.assign(this.state, {
+      isSpanValid: true,
+      spanText: formatPrometheusDuration(props.timeSpan),
+      span: props.timeSpan,
+      updating: true,
+    });
+
+    this.data = [{}];
+    this.traces = [0];
+
+    _.merge(this.layout, {
+      dragmode: 'zoom',
+      height: 200,
+      hoverlabel: {
+        namelength: 80,
+      },
+      showlegend: false,
+      xaxis: {
+        fixedrange: false,
+        type: 'date',
+      },
+    });
+
+    this.onPlotlyRelayout = e => {
+      if (e['xaxis.autorange']) {
+        this.showLatest(this.state.span);
+      } else {
+        const start = e['xaxis.range[0]'];
+        const end = e['xaxis.range[1]'];
+        if (start && end) {
+          // Zoom to a specific graph time range
+          this.start = new Date(start).getTime();
+          this.end = new Date(end).getTime();
+          this.timeSpan = this.end - this.start;
+          this.setState({isSpanValid: true, spanText: formatPrometheusDuration(this.timeSpan), updating: true}, () => {
+            clearInterval(this.interval);
+
+            // Refresh the graph data, but stop polling, since we are no longer displaying the latest data
+            this.fetch(false);
+          });
+        }
+      }
+    };
+
+    this.relayout = () => {
+      const now = new Date();
+      const end = this.end || now;
+      const start = this.start || new Date(end - this.state.span);
+      // eslint-disable-next-line no-console
+      relayout(this.node, {'xaxis.range': [start, end]}).catch(e => console.error(e));
+    };
+
+    this.showLatest = span => {
+      this.start = null;
+      this.end = null;
+      this.timeSpan = span;
+      this.setState({isSpanValid: true, span, spanText: formatPrometheusDuration(span), updating: true}, () => {
+        clearInterval(this.interval);
+        this.fetch();
+      });
+    };
+
+    this.onSpanTextChange = e => {
+      const spanText = e.target.value;
+      const span = parsePrometheusDuration(spanText);
+      const isSpanValid = (span > 0);
+      if (isSpanValid) {
+        this.showLatest(span);
+      }
+      this.setState({isSpanValid, spanText});
+    };
+  }
+
+  updateGraph(data) {
+    const newData = _.get(data, '[0].data.result');
+    if (!_.isEmpty(newData)) {
+      this.data = newData;
+      let traceIndex = 0;
+      _.each(newData, ({metric, values}) => {
+        // If props.metric is specified, ignore all other metrics
+        const labels = _.omit(metric, '__name__');
+        if (this.props.metric && _.some(labels, (v, k) => _.get(this.props.metric, k) !== v)) {
+          return;
+        }
+
+        // The data may have missing values, so we fill those gaps with nulls so that the graph correctly shows the
+        // missing values as gaps in the line
+        const start = values[0][0];
+        const end = _.last(values)[0];
+        const step = this.state.span / this.props.numSamples / 1000;
+        _.range(start, end, step).map((t, i) => {
+          if (_.get(values, [i, 0]) > t) {
+            values.splice(i, 0, [t, null]);
+          }
+        });
+
+        const update = {
+          line: {
+            width: 1,
+          },
+          name: _.map(labels, (v, k) => `${k}=${v}`).join(','),
+          x: [values.map(v => new Date(v[0] * 1000))],
+          y: [values.map(v => v[1])],
+        };
+
+        if (!this.traces.includes(traceIndex)) {
+          // eslint-disable-next-line no-console
+          addTraces(this.node, update, traceIndex).catch(e => console.error(e));
+          this.traces.push(traceIndex);
+        }
+        // eslint-disable-next-line no-console
+        restyle(this.node, update, [traceIndex]).catch(e => console.error(e));
+        traceIndex += 1;
+      });
+
+      this.relayout();
+    }
+    this.setState({updating: false});
+  }
+
+  render() {
+    const {query, timeSpan, urls} = this.props;
+    const {spanText, isSpanValid, updating} = this.state;
+    const baseUrl = urls[MonitoringRoutes.Prometheus];
+
+    return <div className="query-browser__wrapper">
+      <div className="query-browser__header">
+        <div className="query-browser__controls">
+          <input
+            className={classNames('form-control query-browser__span-text', {'query-browser__span-text--error': !isSpanValid})}
+            onChange={this.onSpanTextChange}
+            type="text"
+            value={spanText}
+          />
+          <Dropdown
+            buttonClassName="btn-default form-control query-browser__span-dropdown"
+            items={dropdownItems}
+            noSelection={true}
+            onChange={v => this.showLatest(parsePrometheusDuration(v))}
+          />
+          <button
+            className="btn btn-default query-browser__span-reset"
+            onClick={() => this.showLatest(timeSpan)}
+            type="button"
+          >Reset Zoom</button>
+          {updating && <LoadingInline />}
+        </div>
+        {baseUrl && query && <ExternalLink href={`${baseUrl}/graph?g0.expr=${encodeURIComponent(query)}&g0.tab=0`} text="View in Prometheus UI" />}
+      </div>
+      <div ref={this.setNode} style={{width: '100%'}} />
+    </div>;
+  }
+}
+export const QueryBrowser = connectToURLs(MonitoringRoutes.Prometheus)(QueryBrowser_);