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

Explore: adds PrometheusExploreQueryEditor (#20195)

Browse Source 
* Explore: updates prom query field styles with flex-grow

* Explore: adds prometheus explore query editor

* Explore: updates step input width in prom explore query editor

* Explore: updates prom explore query editor step field input placeholder to auto

* Explore: updates prom explore query editor to include history

* Explore: updates prom explore query editor, removes unused lodash import

* Explore: updates step spacing in prom explore query editor

* Explore: updates prom explore query editor - moves logic to query field

* Explore: updates prom query field - adds step field with conditional rendering

* Explore: updates promql cheat sheet with step description

* Explore: updates prom cheat sheet  step description

* Explore: updates styles - adds query row break class

* Explore: moves back step markup to PromExploreQueryEditor
This commit is contained in:
Lukas Siatka
2019-12-23 11:42:31 +01:00
committed by David
parent 7e8f4d0b0e
commit 1de24cc929
5 changed files with 128 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
View File

@@ -291,7 +291,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
};
render() {
const { data, query } = this.props;
const { data, query, children } = this.props;
const { metricsOptions, syntaxLoaded, hint } = this.state;
const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
const chooserText = getChooserText(syntaxLoaded, metricsOptions);
@@ -300,7 +300,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
return (
<>
<div className="gf-form-inline gf-form-inline--nowrap">
<div className="gf-form-inline gf-form-inline--nowrap flex-grow-1">
<div className="gf-form flex-shrink-0">
<Cascader
options={metricsOptions}
@@ -325,16 +325,23 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
syntaxLoaded={syntaxLoaded}
/>
</div>
{children}
</div>
{showError ? <div className="prom-query-field-info text-error">{data.error.message}</div> : null}
{showError ? (
<div className="query-row-break">
<div className="prom-query-field-info text-error">{data.error.message}</div>
</div>
) : null}
{hint ? (
<div className="prom-query-field-info text-warning">
{hint.label}{' '}
{hint.fix ? (
<a className="text-link muted" onClick={this.onClickHintFix}>
{hint.fix.label}
</a>
) : null}
<div className="query-row-break">
<div className="prom-query-field-info text-warning">
{hint.label}{' '}
{hint.fix ? (
<a className="text-link muted" onClick={this.onClickHintFix}>
{hint.fix.label}
</a>
) : null}
</div>
</div>
) : null}
</>