From ecf08b060c4bdccd34049c0ca8840de389a4fb6b Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Mon, 24 Sep 2018 16:35:24 +0200 Subject: [PATCH 1/7] limit number of time series show in explore graph --- public/app/features/explore/Explore.tsx | 22 ++++++------ public/app/features/explore/Graph.tsx | 47 +++++++++++++++++++++---- public/sass/pages/_explore.scss | 19 ++++++++++ 3 files changed, 72 insertions(+), 16 deletions(-) diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 187d68133cd..6b5c2ac9dd2 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -603,16 +603,18 @@ export class Explore extends React.Component {
- {supportsGraph && showingGraph ? ( - - ) : null} + {supportsGraph && + showingGraph && + graphResult && ( + + )} {supportsTable && showingTable ? ( ) : null} diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx index 9243f612466..29167dcc4c4 100644 --- a/public/app/features/explore/Graph.tsx +++ b/public/app/features/explore/Graph.tsx @@ -67,6 +67,16 @@ const FLOT_OPTIONS = { }; class Graph extends Component { + state = { + showAllTimeSeries: false, + }; + + getGraphData() { + const { data } = this.props; + + return this.state.showAllTimeSeries ? data : data.slice(0, 20); + } + componentDidMount() { this.draw(); } @@ -82,8 +92,19 @@ class Graph extends Component { } } + onShowAllTimeSeries = () => { + this.setState( + { + showAllTimeSeries: true, + }, + this.draw + ); + }; + draw() { - const { data, options: userOptions } = this.props; + const { options: userOptions } = this.props; + const data = this.getGraphData(); + const $el = $(`#${this.props.id}`); if (!data) { $el.empty(); @@ -124,8 +145,10 @@ class Graph extends Component { } render() { - const { data, height, loading } = this.props; - if (!loading && data && data.length === 0) { + const { height, loading } = this.props; + const data = this.getGraphData(); + + if (!loading && data.length === 0) { return (
The queries returned no time series to graph.
@@ -133,9 +156,21 @@ class Graph extends Component { ); } return ( -
-
- +
+ {this.props.data.length > 20 && + !this.state.showAllTimeSeries && ( +
+ + Showing only 20 time series.{' '} + {`Show all ${ + this.props.data.length + }`} +
+ )} +
+
+ +
); } diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 903193d8b10..c4a7da46263 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -55,6 +55,25 @@ margin-top: 2 * $panel-margin; } + .time-series-disclaimer { + width: 300px; + margin: 10px auto; + padding: 10px 0; + border-radius: 4px; + text-align: center; + background-color: #212124; + + .disclaimer-icon { + color: $yellow; + margin-right: 5px; + } + + .show-all-time-series { + cursor: pointer; + color: $external-link-color; + } + } + .elapsed-time { position: absolute; left: 0; From bb20e5cb94558e3ee0b0682a2b95dac20d446987 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 25 Sep 2018 11:50:55 +0200 Subject: [PATCH 2/7] created test for graph disclaimer --- public/app/features/explore/Graph.test.tsx | 60 ++ .../features/explore/__mocks__/mockData.ts | 274 +++++ .../explore/__snapshots__/Graph.test.tsx.snap | 971 ++++++++++++++++++ 3 files changed, 1305 insertions(+) create mode 100644 public/app/features/explore/Graph.test.tsx create mode 100644 public/app/features/explore/__mocks__/mockData.ts create mode 100644 public/app/features/explore/__snapshots__/Graph.test.tsx.snap diff --git a/public/app/features/explore/Graph.test.tsx b/public/app/features/explore/Graph.test.tsx new file mode 100644 index 00000000000..eb9cb8a7f0d --- /dev/null +++ b/public/app/features/explore/Graph.test.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +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 + ); + + // Enzyme.shallow did not work well with jquery.flop. Mocking the draw function. + Graph.prototype.draw = jest.fn(); + + const wrapper = shallow(); + const instance = wrapper.instance() as Graph; + + return { + wrapper, + instance, + }; +}; + +describe('Render', () => { + it('should render component', () => { + const { wrapper } = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render component with disclaimer', () => { + const { wrapper } = setup({ + data: mockData(), + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should show query return no time series', () => { + const { wrapper } = setup({ + data: [], + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/explore/__mocks__/mockData.ts b/public/app/features/explore/__mocks__/mockData.ts new file mode 100644 index 00000000000..2e89ded29cf --- /dev/null +++ b/public/app/features/explore/__mocks__/mockData.ts @@ -0,0 +1,274 @@ +export const mockData = () => { + return [ + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '+Inf', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.1', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.2', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.4', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '1', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '120', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '20', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '3', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '60', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/label/:name/values', + instance: 'localhost:9090', + job: 'prometheus', + le: '8', + }, + values: [[1537858100, '16'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '+Inf', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.1', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.4', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '1', + }, + values: [[1537847900, '953'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '120', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '20', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '3', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '60', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/metrics', + instance: 'localhost:9090', + job: 'prometheus', + le: '8', + }, + values: [[1537858060, '1195'], [1537858080, '1195'], [1537858100, '1195']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '+Inf', + }, + values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.1', + }, + values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.2', + }, + values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '0.4', + }, + values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '1', + }, + values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '120', + }, + values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '20', + }, + values: [[1537858100, '55'], [1537861960, '1'], [1537861980, '1']], + }, + { + metric: { + __name__: 'prometheus_http_request_duration_seconds_bucket', + handler: '/query', + instance: 'localhost:9090', + job: 'prometheus', + le: '3', + }, + values: [[1537857260, '55'], [1537861960, '1'], [1537861980, '1']], + }, + ]; +}; diff --git a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap new file mode 100644 index 00000000000..9f30a9e7eb9 --- /dev/null +++ b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap @@ -0,0 +1,971 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
+
+
+ +
+
+`; + +exports[`Render should render component with disclaimer 1`] = ` +
+
+ + Showing only 20 time series. + + + Show all 27 + +
+
+
+ +
+
+`; + +exports[`Render should show query return no time series 1`] = ` +
+
+ The queries returned no time series to graph. +
+
+`; From ff96a6b766a07986f09628cf2bc16c8da62fcd43 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 25 Sep 2018 13:39:22 +0200 Subject: [PATCH 3/7] using variable --- public/sass/pages/_explore.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index c4a7da46263..ac8c8aba554 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -61,7 +61,7 @@ padding: 10px 0; border-radius: 4px; text-align: center; - background-color: #212124; + background-color: $panel-bg; .disclaimer-icon { color: $yellow; From 3590ca2632b92facf5119db49f918c783adf82e7 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 26 Sep 2018 15:18:46 +0200 Subject: [PATCH 4/7] Added constant --- public/app/features/explore/Graph.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx index 29167dcc4c4..89e48b9d5d1 100644 --- a/public/app/features/explore/Graph.tsx +++ b/public/app/features/explore/Graph.tsx @@ -9,6 +9,8 @@ import TimeSeries from 'app/core/time_series2'; import Legend from './Legend'; +const MAX_NUMBER_OF_TIME_SERIES = 20; + // Copied from graph.ts function time_format(ticks, min, max) { if (min && max && ticks) { @@ -74,7 +76,7 @@ class Graph extends Component { getGraphData() { const { data } = this.props; - return this.state.showAllTimeSeries ? data : data.slice(0, 20); + return this.state.showAllTimeSeries ? data : data.slice(0, MAX_NUMBER_OF_TIME_SERIES); } componentDidMount() { From 32389f6171336022e2699b903737644fca4f305e Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 26 Sep 2018 21:27:14 +0200 Subject: [PATCH 5/7] using more variables --- public/sass/pages/_explore.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index ac8c8aba554..02a2e75e246 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -57,15 +57,15 @@ .time-series-disclaimer { width: 300px; - margin: 10px auto; + margin: $panel-margin auto; padding: 10px 0; - border-radius: 4px; + border-radius: $border-radius; text-align: center; background-color: $panel-bg; .disclaimer-icon { color: $yellow; - margin-right: 5px; + margin-right: $panel-margin/2; } .show-all-time-series { From 327cdf34d5921cf836eec5e95450f6e55bc5627e Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Thu, 27 Sep 2018 14:32:54 +0200 Subject: [PATCH 6/7] using constant --- public/app/features/explore/Graph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx index 89e48b9d5d1..e29abdbd194 100644 --- a/public/app/features/explore/Graph.tsx +++ b/public/app/features/explore/Graph.tsx @@ -159,7 +159,7 @@ class Graph extends Component { } return (
- {this.props.data.length > 20 && + {this.props.data.length > MAX_NUMBER_OF_TIME_SERIES && !this.state.showAllTimeSeries && (
From e50a87aec9f33fd7c42048df303ce3abd21c9cb6 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Fri, 28 Sep 2018 12:58:01 +0200 Subject: [PATCH 7/7] using constant --- public/app/features/explore/Graph.tsx | 2 +- public/app/features/explore/__snapshots__/Graph.test.tsx.snap | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/public/app/features/explore/Graph.tsx b/public/app/features/explore/Graph.tsx index e29abdbd194..8a9390a0b6b 100644 --- a/public/app/features/explore/Graph.tsx +++ b/public/app/features/explore/Graph.tsx @@ -163,7 +163,7 @@ class Graph extends Component { !this.state.showAllTimeSeries && (
- Showing only 20 time series.{' '} + {`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `} {`Show all ${ this.props.data.length }`} diff --git a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap index 9f30a9e7eb9..a1e80defe92 100644 --- a/public/app/features/explore/__snapshots__/Graph.test.tsx.snap +++ b/public/app/features/explore/__snapshots__/Graph.test.tsx.snap @@ -468,8 +468,7 @@ exports[`Render should render component with disclaimer 1`] = ` - Showing only 20 time series. - + Showing only 20 time series.