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

Updated Explore query styles to align them to other query editor to make them fit in better

Browse Source
This commit is contained in:
Torkel Ödegaard
2019-01-29 08:14:07 +01:00
parent 459a93da10
commit 6dad4cce07
6 changed files with 75 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -235,26 +235,28 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
const chooserText = syntaxLoaded ? 'Metrics' : 'Loading metrics...';
return (
<div className="prom-query-field">
<div className="prom-query-field-tools">
<Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
<button className="btn navbar-button navbar-button--tight" disabled={!syntaxLoaded}>
{chooserText}
</button>
</Cascader>
</div>
<div className="prom-query-field-wrapper">
<QueryField
additionalPlugins={this.plugins}
cleanText={cleanText}
initialQuery={initialQuery.expr}
onTypeahead={this.onTypeahead}
onWillApplySuggestion={willApplySuggestion}
onValueChanged={this.onChangeQuery}
placeholder="Enter a PromQL query"
portalOrigin="prometheus"
syntaxLoaded={syntaxLoaded}
/>
<>
<div className="gf-form-inline">
<div className="gf-form">
<Cascader options={metricsOptions} onChange={this.onChangeMetrics}>
<button className="gf-form-label gf-form-label--btn" disabled={!syntaxLoaded}>
{chooserText} <i className="fa fa-caret-down" />
</button>
</Cascader>
</div>
<div className="gf-form gf-form--grow">
<QueryField
additionalPlugins={this.plugins}
cleanText={cleanText}
initialQuery={initialQuery.expr}
onTypeahead={this.onTypeahead}
onWillApplySuggestion={willApplySuggestion}
onValueChanged={this.onChangeQuery}
placeholder="Enter a PromQL query"
portalOrigin="prometheus"
syntaxLoaded={syntaxLoaded}
/>
</div>
{error ? <div className="prom-query-field-info text-error">{error}</div> : null}
{hint ? (
<div className="prom-query-field-info text-warning">
@@ -267,7 +269,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
</div>
) : null}
</div>
</div>
</>
);
}
}