IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #13408 from grafana/limit-number-of-series-in-explore

Browse Source 
Limit number of time series in explore
This commit is contained in:
David 2018-09-28 17:45:33 +02:00 committed by GitHub
commit b2758b2ad0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1378 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/app/features/explore/Explore.tsx
View File

@ -604,16 +604,18 @@ export class Explore extends React.Component<any, ExploreState> {
</div>
<main className="m-t-2">
{supportsGraph && showingGraph ? (
<Graph
data={graphResult}
height={graphHeight}
loading={loading}
id={`explore-graph-${position}`}
options={requestOptions}
split={split}
/>
) : null}
{supportsGraph &&
showingGraph &&
graphResult && (
<Graph
data={graphResult}
height={graphHeight}
loading={loading}
id={`explore-graph-${position}`}
options={requestOptions}
split={split}
/>
)}
{supportsTable && showingTable ? (
<Table className="m-t-3" data={tableResult} loading={loading} onClickCell={this.onClickTableCell} />
) : null}

60
public/app/features/explore/Graph.test.tsx Normal file
View File

@ -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(<Graph {...props} />);
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();
});
});

49
public/app/features/explore/Graph.tsx
View File

@ -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) {
@ -67,6 +69,16 @@ const FLOT_OPTIONS = {
};
class Graph extends Component<any, any> {
state = {
showAllTimeSeries: false,
};
getGraphData() {
const { data } = this.props;
return this.state.showAllTimeSeries ? data : data.slice(0, MAX_NUMBER_OF_TIME_SERIES);
}
componentDidMount() {
this.draw();
}
@ -82,8 +94,19 @@ class Graph extends Component<any, any> {
}
}
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 +147,10 @@ class Graph extends Component<any, any> {
}
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 (
<div className="panel-container">
<div className="muted m-a-1">The queries returned no time series to graph.</div>
@ -133,9 +158,21 @@ class Graph extends Component<any, any> {
);
}
return (
<div className="panel-container">
<div id={this.props.id} className="explore-graph" style={{ height }} />
<Legend data={data} />
<div>
{this.props.data.length > MAX_NUMBER_OF_TIME_SERIES &&
!this.state.showAllTimeSeries && (
<div className="time-series-disclaimer">
<i className="fa fa-fw fa-warning disclaimer-icon" />
{`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
<span className="show-all-time-series" onClick={this.onShowAllTimeSeries}>{`Show all ${
this.props.data.length
}`}</span>
</div>
)}
<div className="panel-container">
<div id={this.props.id} className="explore-graph" style={{ height }} />
<Legend data={data} />
</div>
</div>
);
}

274
public/app/features/explore/__mocks__/mockData.ts Normal file
View File

@ -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']],
},
];
};

970
public/app/features/explore/__snapshots__/Graph.test.tsx.snap Normal file
View File

@ -0,0 +1,970 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<div>
<div
className="panel-container"
>
<div
className="explore-graph"
style={
Object {
"height": undefined,
}
}
/>
<Legend
data={
Array [
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.2",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537847900,
"953",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
]
}
/>
</div>
</div>
`;
exports[`Render should render component with disclaimer 1`] = `
<div>
<div
className="time-series-disclaimer"
>
<i
className="fa fa-fw fa-warning disclaimer-icon"
/>
Showing only 20 time series.
<span
className="show-all-time-series"
onClick={[Function]}
>
Show all 27
</span>
</div>
<div
className="panel-container"
>
<div
className="explore-graph"
style={
Object {
"height": undefined,
}
}
/>
<Legend
data={
Array [
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.2",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/label/:name/values",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858100,
"16",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.1",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "0.4",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "1",
},
"values": Array [
Array [
1537847900,
"953",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "120",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "20",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "3",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "60",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/metrics",
"instance": "localhost:9090",
"job": "prometheus",
"le": "8",
},
"values": Array [
Array [
1537858060,
"1195",
],
Array [
1537858080,
"1195",
],
Array [
1537858100,
"1195",
],
],
},
Object {
"metric": Object {
"__name__": "prometheus_http_request_duration_seconds_bucket",
"handler": "/query",
"instance": "localhost:9090",
"job": "prometheus",
"le": "+Inf",
},
"values": Array [
Array [
1537858100,
"55",
],
Array [
1537861960,
"1",
],
Array [
1537861980,
"1",
],
],
},
]
}
/>
</div>
</div>
`;
exports[`Render should show query return no time series 1`] = `
<div
className="panel-container"
>
<div
className="muted m-a-1"
>
The queries returned no time series to graph.
</div>
</div>
`;

19
public/sass/pages/_explore.scss
View File

@ -55,6 +55,25 @@
margin-top: 2 * $panel-margin;
}
.time-series-disclaimer {
width: 300px;
margin: $panel-margin auto;
padding: 10px 0;
border-radius: $border-radius;
text-align: center;
background-color: $panel-bg;
.disclaimer-icon {
color: $yellow;
margin-right: $panel-margin/2;
}
.show-all-time-series {
cursor: pointer;
color: $external-link-color;
}
}
.elapsed-time {
position: absolute;
left: 0;