Explore: query transactions

Existing querying was grouped together before handed over to the
datasource. This slowed down result display to however long the slowest
query took.

- create one query transaction per result viewer (graph, table, etc.)
  and query row
- track latencies for each transaction
- show results as soon as they are being received
- loading indicator on graph and query button to indicate that queries
  are still running and that results are incomplete
- properly discard transactions when removing or changing queries
This commit is contained in:
David Kaltschmidt
2018-10-22 17:51:42 +02:00
parent e761fb1936
commit 2e02a8c855
10 changed files with 484 additions and 211 deletions

View File

@@ -4,24 +4,11 @@ import { Graph } from './Graph';
import { mockData } from './__mocks__/mockData';
const setup = (propOverrides?: object) => {
const props = Object.assign(
{
data: mockData().slice(0, 19),
options: {
interval: '20s',
range: { from: 'now-6h', to: 'now' },
targets: [
{
format: 'time_series',
instant: false,
hinting: true,
expr: 'prometheus_http_request_duration_seconds_bucket',
},
],
},
},
propOverrides
);
const props = {
data: mockData().slice(0, 19),
range: { from: 'now-6h', to: 'now' },
...propOverrides,
};
// Enzyme.shallow did not work well with jquery.flop. Mocking the draw function.
Graph.prototype.draw = jest.fn();