Skip to content

N
nexpie-grafana-theme
Commit eadaff61 by David Kaltschmidt
Options

Explore: Design integration 

* style header like other grafana components
* use panel container for graph and same styles for query field
* fix typeahead CSS selector (was created outside of .explore)
* use navbar buttons for +/- of rows
* moved elapsed time under run query button
* fix JS error on multiple timeseries being returned
* fix color for graph lines
* show prometheus query errors
parent 0d3f24ce
Showing with 327 additions and 276 deletions
public/app/containers/Explore/Explore.tsx
...@@ -4,7 +4,6 @@ import colors from 'app/core/utils/colors'; ...@@ -4,7 +4,6 @@ import colors from 'app/core/utils/colors';
import TimeSeries from 'app/core/time_series2'; import TimeSeries from 'app/core/time_series2';
import ElapsedTime from './ElapsedTime'; import ElapsedTime from './ElapsedTime';
import Legend from './Legend';
import QueryRows from './QueryRows'; import QueryRows from './QueryRows';
import Graph from './Graph'; import Graph from './Graph';
import Table from './Table'; import Table from './Table';
...@@ -16,9 +15,7 @@ import { decodePathComponent } from 'app/core/utils/location_util'; ...@@ -16,9 +15,7 @@ import { decodePathComponent } from 'app/core/utils/location_util';
function makeTimeSeriesList(dataList, options) { function makeTimeSeriesList(dataList, options) {
return dataList.map((seriesData, index) => { return dataList.map((seriesData, index) => {
const datapoints = seriesData.datapoints || []; const datapoints = seriesData.datapoints || [];
const responseAlias = seriesData.target; const alias = seriesData.target;
const query = options.targets[index].expr;
const alias = responseAlias && responseAlias !== '{}' ? responseAlias : query;
const colorIndex = index % colors.length; const colorIndex = index % colors.length;
const color = colors[colorIndex]; const color = colors[colorIndex];
...@@ -54,6 +51,7 @@ interface IExploreState { ...@@ -54,6 +51,7 @@ interface IExploreState {
latency: number; latency: number;
loading: any; loading: any;
queries: any; queries: any;
queryError: any;
range: any; range: any;
requestOptions: any; requestOptions: any;
showingGraph: boolean; showingGraph: boolean;
...@@ -76,6 +74,7 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -76,6 +74,7 @@ export class Explore extends React.Component<any, IExploreState> {
latency: 0, latency: 0,
loading: false, loading: false,
queries: ensureQueries(queries), queries: ensureQueries(queries),
queryError: null,
range: range || { ...DEFAULT_RANGE }, range: range || { ...DEFAULT_RANGE },
requestOptions: null, requestOptions: null,
showingGraph: true, showingGraph: true,
...@@ -94,6 +93,10 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -94,6 +93,10 @@ export class Explore extends React.Component<any, IExploreState> {
} }
} }
componentDidCatch(error) {
console.error(error);
}
handleAddQueryRow = index => { handleAddQueryRow = index => {
const { queries } = this.state; const { queries } = this.state;
const nextQueries = [ const nextQueries = [
...@@ -155,7 +158,7 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -155,7 +158,7 @@ export class Explore extends React.Component<any, IExploreState> {
if (!hasQuery(queries)) { if (!hasQuery(queries)) {
return; return;
} }
this.setState({ latency: 0, loading: true, graphResult: null }); this.setState({ latency: 0, loading: true, graphResult: null, queryError: null });
const now = Date.now(); const now = Date.now();
const options = buildQueryOptions({ const options = buildQueryOptions({
format: 'time_series', format: 'time_series',
...@@ -169,9 +172,10 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -169,9 +172,10 @@ export class Explore extends React.Component<any, IExploreState> {
const result = makeTimeSeriesList(res.data, options); const result = makeTimeSeriesList(res.data, options);
const latency = Date.now() - now; const latency = Date.now() - now;
this.setState({ latency, loading: false, graphResult: result, requestOptions: options }); this.setState({ latency, loading: false, graphResult: result, requestOptions: options });
} catch (error) { } catch (response) {
console.error(error); console.error(response);
this.setState({ loading: false, graphResult: error }); const queryError = response.data ? response.data.error : response;
this.setState({ loading: false, queryError });
} }
} }
...@@ -180,7 +184,7 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -180,7 +184,7 @@ export class Explore extends React.Component<any, IExploreState> {
if (!hasQuery(queries)) { if (!hasQuery(queries)) {
return; return;
} }
this.setState({ latency: 0, loading: true, tableResult: null }); this.setState({ latency: 0, loading: true, queryError: null, tableResult: null });
const now = Date.now(); const now = Date.now();
const options = buildQueryOptions({ const options = buildQueryOptions({
format: 'table', format: 'table',
...@@ -194,9 +198,10 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -194,9 +198,10 @@ export class Explore extends React.Component<any, IExploreState> {
const tableModel = res.data[0]; const tableModel = res.data[0];
const latency = Date.now() - now; const latency = Date.now() - now;
this.setState({ latency, loading: false, tableResult: tableModel, requestOptions: options }); this.setState({ latency, loading: false, tableResult: tableModel, requestOptions: options });
} catch (error) { } catch (response) {
console.error(error); console.error(response);
this.setState({ loading: false, tableResult: null }); const queryError = response.data ? response.data.error : response;
this.setState({ loading: false, queryError });
} }
} }
...@@ -214,6 +219,7 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -214,6 +219,7 @@ export class Explore extends React.Component<any, IExploreState> {
latency, latency,
loading, loading,
queries, queries,
queryError,
range, range,
requestOptions, requestOptions,
showingGraph, showingGraph,
...@@ -221,55 +227,63 @@ export class Explore extends React.Component<any, IExploreState> { ...@@ -221,55 +227,63 @@ export class Explore extends React.Component<any, IExploreState> {
tableResult, tableResult,
} = this.state; } = this.state;
const showingBoth = showingGraph && showingTable; const showingBoth = showingGraph && showingTable;
const graphHeight = showingBoth ? '200px' : null; const graphHeight = showingBoth ? '200px' : '400px';
const graphButtonClassName = showingBoth || showingGraph ? 'btn m-r-1' : 'btn btn-inverse m-r-1'; const graphButtonActive = showingBoth || showingGraph ? 'active' : '';
const tableButtonClassName = showingBoth || showingTable ? 'btn m-r-1' : 'btn btn-inverse m-r-1'; const tableButtonActive = showingBoth || showingTable ? 'active' : '';
return ( return (
<div className="explore"> <div className="explore">
<div className="page-body page-full"> <div className="navbar">
<h2 className="page-sub-heading">Explore</h2> <div>
{datasourceLoading ? <div>Loading datasource...</div> : null} <a className="navbar-page-btn">
<i className="fa fa-rocket" />
Explore
</a>
</div>
<div className="navbar__spacer" />
<div className="navbar-buttons">
<button className={`btn navbar-button ${graphButtonActive}`} onClick={this.handleClickGraphButton}>
Graph
</button>
<button className={`btn navbar-button ${tableButtonActive}`} onClick={this.handleClickTableButton}>
Table
</button>
</div>
<TimePicker range={range} onChangeTime={this.handleChangeTime} />
<div className="navbar-buttons relative">
<button className="btn navbar-button--primary" onClick={this.handleSubmit}>
Run Query <i className="fa fa-level-down run-icon" />
</button>
{loading || latency ? <ElapsedTime time={latency} className="text-info" /> : null}
</div>
</div>
{datasourceError ? <div title={datasourceError}>Error connecting to datasource.</div> : null} {datasourceLoading ? <div className="explore-container">Loading datasource...</div> : null}
{datasource ? ( {datasourceError ? (
<div className="m-r-3"> <div className="explore-container" title={datasourceError}>
<div className="nav m-b-1 navbar"> Error connecting to datasource.
<div className="navbar-buttons"> </div>
<button className={graphButtonClassName} onClick={this.handleClickGraphButton}> ) : null}
Graph
</button> {datasource ? (
<button className={tableButtonClassName} onClick={this.handleClickTableButton}> <div className="explore-container">
Table <QueryRows
</button> queries={queries}
</div> request={this.request}
<div className="navbar__spacer" /> onAddQueryRow={this.handleAddQueryRow}
<TimePicker range={range} onChangeTime={this.handleChangeTime} /> onChangeQuery={this.handleChangeQuery}
<div className="navbar-buttons"> onExecuteQuery={this.handleSubmit}
<button type="submit" className="btn btn-primary" onClick={this.handleSubmit}> onRemoveQueryRow={this.handleRemoveQueryRow}
<i className="fa fa-return" /> Run Query />
</button> {queryError ? <div className="text-warning m-a-2">{queryError}</div> : null}
</div> <main className="m-t-2">
{loading || latency ? <ElapsedTime time={latency} className="" /> : null} {showingGraph ? (
</div> <Graph data={graphResult} id="explore-1" options={requestOptions} height={graphHeight} />
<QueryRows ) : null}
queries={queries} {showingTable ? <Table data={tableResult} className="m-t-3" /> : null}
request={this.request} </main>
onAddQueryRow={this.handleAddQueryRow} </div>
onChangeQuery={this.handleChangeQuery} ) : null}
onExecuteQuery={this.handleSubmit}
onRemoveQueryRow={this.handleRemoveQueryRow}
/>
<main className="m-t-2">
{showingGraph ? (
<Graph data={graphResult} id="explore-1" options={requestOptions} height={graphHeight} />
) : null}
{showingGraph ? <Legend data={graphResult} /> : null}
{showingTable ? <Table data={tableResult} className="m-t-3" /> : null}
</main>
</div>
) : null}
</div>
</div> </div>
); );
} }
......
public/app/containers/Explore/Graph.tsx
...@@ -2,11 +2,12 @@ import $ from 'jquery'; ...@@ -2,11 +2,12 @@ import $ from 'jquery';
import React, { Component } from 'react'; import React, { Component } from 'react';
import moment from 'moment'; import moment from 'moment';
import 'vendor/flot/jquery.flot';
import 'vendor/flot/jquery.flot.time';
import * as dateMath from 'app/core/utils/datemath'; import * as dateMath from 'app/core/utils/datemath';
import TimeSeries from 'app/core/time_series2'; import TimeSeries from 'app/core/time_series2';
import 'vendor/flot/jquery.flot'; import Legend from './Legend';
import 'vendor/flot/jquery.flot.time';
// Copied from graph.ts // Copied from graph.ts
function time_format(ticks, min, max) { function time_format(ticks, min, max) {
...@@ -86,6 +87,7 @@ class Graph extends Component<any, any> { ...@@ -86,6 +87,7 @@ class Graph extends Component<any, any> {
return; return;
} }
const series = data.map((ts: TimeSeries) => ({ const series = data.map((ts: TimeSeries) => ({
color: ts.color,
label: ts.label, label: ts.label,
data: ts.getFlotPairs('null'), data: ts.getFlotPairs('null'),
})); }));
...@@ -120,12 +122,13 @@ class Graph extends Component<any, any> { ...@@ -120,12 +122,13 @@ class Graph extends Component<any, any> {
} }
render() { render() {
const style = { const { data, height } = this.props;
height: this.props.height || '400px', return (
width: this.props.width || '100%', <div className="panel-container">
}; <div id={this.props.id} className="explore-graph" style={{ height }} />
<Legend data={data} />
return <div id={this.props.id} style={style} />; </div>
);
} }
} }
......
public/app/containers/Explore/QueryField.tsx
...@@ -50,7 +50,7 @@ class Portal extends React.Component { ...@@ -50,7 +50,7 @@ class Portal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.node = document.createElement('div'); this.node = document.createElement('div');
this.node.classList.add(`query-field-portal-${props.index}`); this.node.classList.add('explore-typeahead', `explore-typeahead-${props.index}`);
document.body.appendChild(this.node); document.body.appendChild(this.node);
} }
......
public/app/containers/Explore/QueryRows.tsx
...@@ -48,10 +48,10 @@ class QueryRow extends PureComponent<any, any> { ...@@ -48,10 +48,10 @@ class QueryRow extends PureComponent<any, any> {
return ( return (
<div className="query-row"> <div className="query-row">
<div className="query-row-tools"> <div className="query-row-tools">
<button className="btn btn-small btn-inverse" onClick={this.handleClickAddButton}> <button className="btn navbar-button navbar-button--tight" onClick={this.handleClickAddButton}>
<i className="fa fa-plus" /> <i className="fa fa-plus" />
</button> </button>
<button className="btn btn-small btn-inverse" onClick={this.handleClickRemoveButton}> <button className="btn navbar-button navbar-button--tight" onClick={this.handleClickRemoveButton}>
<i className="fa fa-minus" /> <i className="fa fa-minus" />
</button> </button>
</div> </div>
...@@ -60,6 +60,7 @@ class QueryRow extends PureComponent<any, any> { ...@@ -60,6 +60,7 @@ class QueryRow extends PureComponent<any, any> {
initialQuery={edited ? null : query} initialQuery={edited ? null : query}
onPressEnter={this.handlePressEnter} onPressEnter={this.handlePressEnter}
onQueryChange={this.handleChangeQuery} onQueryChange={this.handleChangeQuery}
placeholder="Enter a PromQL query"
request={request} request={request}
/> />
</div> </div>
......
public/app/plugins/datasource/prometheus/datasource.ts
...@@ -164,6 +164,7 @@ export class PrometheusDatasource { ...@@ -164,6 +164,7 @@ export class PrometheusDatasource {
legendFormat: activeTargets[index].legendFormat, legendFormat: activeTargets[index].legendFormat,
start: start, start: start,
end: end, end: end,
query: queries[index].expr,
responseListLength: responseList.length, responseListLength: responseList.length,
responseIndex: index, responseIndex: index,
refId: activeTargets[index].refId, refId: activeTargets[index].refId,
......
public/app/plugins/datasource/prometheus/result_transformer.ts
...@@ -123,11 +123,16 @@ export class ResultTransformer { ...@@ -123,11 +123,16 @@ export class ResultTransformer {
} }
createMetricLabel(labelData, options) { createMetricLabel(labelData, options) {
let label = '';
if (_.isUndefined(options) || _.isEmpty(options.legendFormat)) { if (_.isUndefined(options) || _.isEmpty(options.legendFormat)) {
return this.getOriginalMetricName(labelData); label = this.getOriginalMetricName(labelData);
} else {
label = this.renderTemplate(this.templateSrv.replace(options.legendFormat), labelData);
} }
if (!label || label === '{}') {
return this.renderTemplate(this.templateSrv.replace(options.legendFormat), labelData) || '{}'; label = options.query;
}
return label;
} }
renderTemplate(aliasPattern, aliasData) { renderTemplate(aliasPattern, aliasData) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment