prometheus

1
import * as React from 'react';
2
import { mount, shallow } from 'enzyme';
3
import Panel, { GraphDisplayMode, PanelOptions, PanelType } from './Panel';
4
import GraphControls from './GraphControls';
5
import { NavLink, TabPane } from 'reactstrap';
6
import TimeInput from './TimeInput';
7
import DataTable from './DataTable';
8
import { GraphTabContent } from './GraphTabContent';
9

10
const defaultProps = {
11
  options: {
12
    expr: 'prometheus_engine',
13
    type: PanelType.Table,
14
    range: 10,
15
    endTime: 1572100217898,
16
    resolution: 28,
17
    displayMode: GraphDisplayMode.Lines,
18
    showExemplars: true,
19
  },
20
  onOptionsChanged: (): void => {
21
    // Do nothing.
22
  },
23
  useLocalTime: false,
24
  pastQueries: [],
25
  metricNames: [
26
    'prometheus_engine_queries',
27
    'prometheus_engine_queries_concurrent_max',
28
    'prometheus_engine_query_duration_seconds',
29
  ],
30
  removePanel: (): void => {
31
    // Do nothing.
32
  },
33
  onExecuteQuery: (): void => {
34
    // Do nothing.
35
  },
36
  pathPrefix: '/',
37
  enableAutocomplete: true,
38
  enableHighlighting: true,
39
  enableLinter: true,
40
  id: 'panel',
41
};
42

43
describe('Panel', () => {
44
  const panel = shallow(<Panel {...defaultProps} />);
45

46
  it('renders NavLinks', () => {
47
    const results: PanelOptions[] = [];
48
    const onOptionsChanged = (opts: PanelOptions): void => {
49
      results.push(opts);
50
    };
51
    const panel = shallow(<Panel {...defaultProps} onOptionsChanged={onOptionsChanged} />);
52
    const links = panel.find(NavLink);
53
    [
54
      { panelType: 'Table', active: true },
55
      { panelType: 'Graph', active: false },
56
    ].forEach((tc: { panelType: string; active: boolean }, i: number) => {
57
      const link = links.at(i);
58
      const className = tc.active ? 'active' : '';
59
      expect(link.prop('className')).toEqual(className);
60
      link.simulate('click');
61
      if (tc.active) {
62
        expect(results).toHaveLength(0);
63
      } else {
64
        expect(results).toHaveLength(1);
65
        expect(results[0].type).toEqual(tc.panelType.toLowerCase());
66
        results.pop();
67
      }
68
    });
69
  });
70

71
  it('renders a TabPane with a TimeInput and a DataTable when in table mode', () => {
72
    const tab = panel.find(TabPane).filterWhere((tab) => tab.prop('tabId') === 'table');
73
    const timeInput = tab.find(TimeInput);
74
    expect(timeInput.prop('time')).toEqual(defaultProps.options.endTime);
75
    expect(timeInput.prop('range')).toEqual(defaultProps.options.range);
76
    expect(timeInput.prop('placeholder')).toEqual('Evaluation time');
77
    expect(tab.find(DataTable)).toHaveLength(1);
78
  });
79

80
  it('renders a TabPane with a Graph and GraphControls when in graph mode', () => {
81
    const options = {
82
      expr: 'prometheus_engine',
83
      type: PanelType.Graph,
84
      range: 10,
85
      endTime: 1572100217898,
86
      resolution: 28,
87
      displayMode: GraphDisplayMode.Lines,
88
      showExemplars: true,
89
    };
90
    const graphPanel = mount(<Panel {...defaultProps} options={options} />);
91
    const controls = graphPanel.find(GraphControls);
92
    graphPanel.setState({ data: { resultType: 'matrix', result: [] } });
93
    const graph = graphPanel.find(GraphTabContent);
94
    expect(controls.prop('endTime')).toEqual(options.endTime);
95
    expect(controls.prop('range')).toEqual(options.range);
96
    expect(controls.prop('resolution')).toEqual(options.resolution);
97
    expect(controls.prop('displayMode')).toEqual(options.displayMode);
98
    expect(graph.prop('displayMode')).toEqual(options.displayMode);
99
  });
100

101
  describe('when switching between modes', () => {
102
    [
103
      { from: PanelType.Table, to: PanelType.Graph },
104
      { from: PanelType.Graph, to: PanelType.Table },
105
    ].forEach(({ from, to }: { from: PanelType; to: PanelType }) => {
106
      it(`${from} -> ${to} nulls out data`, () => {
107
        const props = {
108
          ...defaultProps,
109
          options: { ...defaultProps.options, type: from },
110
        };
111
        const panel = shallow(<Panel {...props} />);
112
        const instance: any = panel.instance();
113
        panel.setState({ data: 'somedata' });
114
        expect(panel.state('data')).toEqual('somedata');
115
        instance.handleChangeType(to);
116
        expect(panel.state('data')).toBeNull();
117
      });
118
    });
119
  });
120

121
  describe('when clicking on current mode', () => {
122
    [PanelType.Table, PanelType.Graph].forEach((mode: PanelType) => {
123
      it(`${mode} keeps data`, () => {
124
        const props = {
125
          ...defaultProps,
126
          options: { ...defaultProps.options, type: mode },
127
        };
128
        const panel = shallow(<Panel {...props} />);
129
        const instance: any = panel.instance();
130
        panel.setState({ data: 'somedata' });
131
        expect(panel.state('data')).toEqual('somedata');
132
        instance.handleChangeType(mode);
133
        expect(panel.state('data')).toEqual('somedata');
134
      });
135
    });
136
  });
137

138
  describe('when changing query then time', () => {
139
    it('executes the new query', () => {
140
      const initialExpr = 'time()';
141
      const newExpr = 'time() - time()';
142
      const panel = shallow(<Panel {...defaultProps} options={{ ...defaultProps.options, expr: initialExpr }} />);
143
      const instance: any = panel.instance();
144
      instance.executeQuery();
145
      const executeQuerySpy = jest.spyOn(instance, 'executeQuery');
146
      //change query without executing
147
      panel.setProps({ options: { ...defaultProps.options, expr: newExpr } });
148
      expect(executeQuerySpy).toHaveBeenCalledTimes(0);
149
      const debounceExecuteQuerySpy = jest.spyOn(instance, 'debounceExecuteQuery');
150
      //execute query implicitly with time change
151
      panel.setProps({ options: { ...defaultProps.options, expr: newExpr, endTime: 1575744840 } });
152
      expect(debounceExecuteQuerySpy).toHaveBeenCalledTimes(1);
153
    });
154
  });
155
});
156